body {
			font-family: 'IBM Plex Sans', sans-serif;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			height: 100vh;
			background-color: #f8f9fa;
			color: #333;
			transition: opacity 0.2s ease-in;
		}

		.container {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* Bilgisayarda 4 sütun */
			gap: 10px 10px;
			width: 90%;
			max-width: 1200px;
			margin: 10px auto;
			flex-grow: 1;
		}

		@media (max-width: 768px) {
			.container {
				grid-template-columns: repeat(2, 1fr); /* Mobilde 2 sütun */
				margin: 10px auto;
			}

			.box {
				height: 150px; /* Mobilde yüksekliği düşürdüm */
			}
		}

		.box {
			background-color: #ffffff;
			padding: 10px;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			text-align: center;
			transition: transform 0.3s ease-in-out;
			overflow: hidden;
			border: 1px solid #ddd;
			height: 180px; /* Varsayılan yükseklik bilgisayarda */
		}

		.box img {
			width: 70px;
			height: 70px;
			object-fit: contain;
		}

		.box h2 {
			font-size: 18px; /* Başlık font boyutunu küçülttüm */
			color: #004080;
			margin:5px;
		}

		.box p {
			font-size: 12px; /* Paragraf font boyutunu küçülttüm */
			color: #333;
		}

		.box a {
			text-decoration: none;
			color: inherit;
		}

		.box:hover {
			transform: translateY(-5px);
			box-shadow: 0 20px 16px rgba(0, 0, 255, 0.15);
		}