/* Genel stil ayarları */
body {
  font-family: Arial, sans-serif; /* Yazı tipi */
  margin: 0; /* Varsayılan dış boşluğu sıfırla */
  padding: 0; /* Varsayılan iç boşluğu sıfırla */
  box-sizing: border-box; /* Kutu modelini ayarla */
}

/* Header Ayarları */
header {
  display: flex; /* Esnek kutu düzeni */
  justify-content: space-between; /* Alanı eşit dağıt */
  align-items: center; /* Dikey ortalama */
  padding: 20px; /* İç boşluk */
  background-color: #000000; /* Arka plan rengi */
  border-bottom: 2px solid #007BFF; /* Alt kenarlık */
}

.header-content {
  display: flex; /* Esnek kutu düzeni */
  align-items: center; /* Dikey ortalama */
  width: 100%; /* Tam genişlik */
}

.left-side, .right-side {
  flex: 1; /* Eşit alan kaplama */
}

.center {
  flex-grow: 1; /* Logo alanını genişlet */
  display: flex; /* Esnek düzen */
  justify-content: center; /* Ortala */
}

.header-content span {
  font-size: 18px; /* Yazı boyutu */
}

.header-content img {
  max-width: 150px; /* Logo maksimum genişlik */
  height: auto; /* Yükseklik otomatik */
}

.back-button {
  margin-left: 20px; /* Soldan boşluk */
}

.back-button a {
  text-decoration: none; /* Alt çizgiyi kaldır */
  color: #007BFF; /* Renk */
  font-weight: bold; /* Kalın yazı */
  padding: 5px 10px; /* İç boşluk */
  border: 2px solid #007BFF; /* Kenarlık */
  border-radius: 5px; /* Kenar yuvarlama */
  transition: background-color 0.3s; /* Geçiş efekti */
}

.back-button a:hover {
  background-color: #007BFF; /* Hover rengi */
  color: white; /* Yazı rengi */
}

#product-details {
  display: flex;
  flex-wrap: wrap; /* Satır sonuna ulaştığında yeni satıra geç */
  justify-content: center; /* Ortada yerleştir */
  margin: 20px; /* Bölüm üst ve alt boşluğu */
  padding: 20px; /* Bölüm iç boşluğu */
  background-color: #eaeff1; /* Arka plan rengi */
  border-radius: 10px; /* Köşe yuvarlama */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Gölgelendirme */
}

.product-item {
  background-color: #fff;
  border: 1px solid #ccc; /* Ürün sınırı */
  border-radius: 10px; /* Köşe yuvarlama */
  width: calc(25% - 40px); /* Dört sütun için genişlik ayarı */
  margin: 20px; /* Ürünler arasındaki boşluk */
  padding: 20px; /* Ürün kartı iç boşluk */
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s; /* Efekt geçişi */
}

.product-item:hover {
  transform: translateY(-5px); /* Hover efekti */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Hover gölgesi */
}

.product-item img {
  max-width: 100%; /* Resim genişliği */
  border-radius: 10px; /* Resim köşe yuvarlama */
}

.product-item h3 {
  color: #333; /* Ürün başlığı rengi */
  margin: 15px 0; /* Başlık altı boşluk */
}

.product-item p {
  color: #666; /* Açıklama metni rengi */
  font-size: 0.95em; /* Yazı boyutu */
  margin: 10px 0; /* Açıklama metni alt boşluk */
}

.product-item ul {
  list-style-type: none; /* Liste stilini kaldır */
  padding: 0; /* İç boşluğu kaldır */
}

.product-item ul li {
  background: #f0f4f8; /* Liste öğesi arka plan rengi */
  border-radius: 5px; /* Köşe yuvarlama */
  padding: 5px 10px; /* İç boşluk */
  margin: 5px 0; /* Alt boşluk */
}