/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f3f3f3;
  color: #151826;
}

/* Header Genel Stili */
.site-header {
  display: flex;
  flex-direction: column;
  background-color: #13182b; /* Üst bölüm rengi */
  font-family: Arial, sans-serif;
  position: relative;
}

/* Üst Kısım */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

/* Logo */
.logo img {
   padding-left: 20px;
   height: 650px;
}

/* Menü Konteyner */
.menu-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Menü Butonu */
.menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 10px;
}

.menu-icon .bar {
  width: 30px;
  height: 3px;
  background-color: white;
}

/* Açılır Menü */
.nav-menu {
  position: absolute;
  top: 40px; /* Menü ikonunun hemen altında açılır */
  right: 5px;
  background-color: #6f78b0;
  border-radius: 5px;
  padding: 10px 0;
  width: 150px;
  display: none; /* Başlangıçta gizli */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  text-align: center;
  padding: 10px 0;
}

.nav-menu ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  display: block;
}

.nav-menu ul li:hover {
  background-color: #2f354f;
}

/* Menü Açık Olduğunda */
.nav-menu.active {
  display: block;
}

/* Alt Kısım */
.header-bottom {
  background-color: #2f354f;
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Taşma durumunda alt satıra geç */
  gap: 15px; /* Öğeler arası boşluk */
  min-height: 50px; /* Minimum yükseklik */
}

.header-bottom a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 15px;
  font-size: clamp(14px, 1.8vw, 20px); /* Responsive yazı boyutu */
  white-space: nowrap; /* Metni tek satırda tut */
  flex-shrink: 0; /* Küçülmeyi engelle */
}


.category-header {
  background: #f3f3f3; /* Örnek kahverengi */
  color: #000;
  padding: 20px;
  text-align: center;
}

.category-header h2 {
  font-size: 28px;
  margin-bottom: 0px;
}
.category-header p {
  font-size: 16px;
  margin-bottom: 0px;
}
.breadcrumbs a {
  color: #000;
  text-decoration: underline;
  margin-right: 0px;
}

.search-form{
  display:flex;
  align-items:center;
  /* buton + input bitişik dursun, ikon sağda olsun */
  justify-content:flex-start;
  gap:4px;                 /* buton-input arası mesafe küçüldü */
  flex-wrap:wrap;
  padding-left:8px;        /* sol kenardan hafif içeri */
}


.search-btn{
  padding:8px 14px;
  font-size:15px;
  background:#0d6efd;
  color:#fff;
  border:none;border-radius:4px;
  cursor:pointer;
  margin-right:2px;      /* input’a çok yapışmasın */
}


/* Arama input'u: biraz daraltıldı */
#searchInput{
  flex:1 1 180px;          /* esnek ama min 180 px */
  max-width:260px;         /* çok uzunlaşmasın */
  padding:8px;
  font-size:15px;
  border:1px solid #ccc;
  border-radius:4px;
}

/* Sıralama ikonu (sağ) – önceki tanımlar aynen */
.sort-container{
  position:relative;
  width:44px;height:44px;
  margin-left:auto;      /* otomatik boşluk, sağ kenara yaslar */
}


.sort-container select{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;cursor:pointer;
}

.sort-container i{
  font-size:22px;line-height:44px;
  color:#333;pointer-events:none;
  transition:color .2s ease;
}
.sort-container:hover i{ color:#0d6efd; }



/* Ana İçerik (Filtre + Ürünler) */
.main-content {
  display: flex;
  min-height: 600px;
}


/* Ürünler (sağ) */
.category-products {
  flex: 1;
  padding: 20px;
  display: grid;
  gap: 35px; /* Ürünler arasındaki boşluk */
  grid-template-columns: repeat(5, 180px); /* Her satırda 4 ürün, biraz daha büyük */
  justify-content: center; /* Sayfanın ortasına hizalama */
}

.product-card {
  border: 1px solid #ddd;
  background: #fff;
  padding: 15px; /* İçerik etrafında daha fazla boşluk */
  position: relative;
  text-align: center;
  transition: box-shadow 0.2s;
  cursor: pointer; /* Tüm karta tık işareti */
  width: 200px; /* Ürün kartlarının genişliği */
  height: 280px; /* Ürün kartlarının yüksekliği */
}
.product-card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.product-card img {
  max-width: 100%;
  height: 120px; /* Görselleri biraz büyüt */
  margin-bottom: 10px;
  object-fit: contain; /* Görsellerin orantılı kalmasını sağlar */
}
.product-card h4 {
  font-size: 15px; /* Yazıyı biraz büyüt */
  color:#000;
  margin-bottom: 5px;
}


/* Ürün kartındaki kod kutusu */
.product-code {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #2f354f; /* Siyah yarı saydam kutu */
  color: #fff; /* Yazı rengi beyaz */
  font-size: 12px; /* Yazı boyutu */
  padding: 5px 10px; /* Kutu içi boşluk */
  border-radius: 0px; /* Hafif yuvarlatılmış köşeler */
  z-index: 100; /* Üstte gösterilsin */
}

/* Fiyat bilgisi */
.product-price {
  font-size: 20px; /* Daha büyük yazı */
  font-weight: bold; /* Kalın yazı */
  color: #9e006a; /* Fiyat için farklı bir renk (turuncu ton) */
  margin: 10px 0; /* Üst ve alt boşluk */
}

/* Toplam stok bilgisi */
.product-stock {
  font-size: 12px; /* Daha küçük yazı */
  color: #9e9e9e; /* Silik gri renk */
  font-style: italic; /* Eğik yazı */
}




.site-footer {
  background: #13182b; 
  color: white;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

.footer-container {
  display: flex;
  justify-content: space-around;
  align-items: start;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.footer-logo img {
  width: 120px; /* Logo Boyutu */
}

.footer-section {
  text-align: left;
}

.footer-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.footer-section p {
  margin: 5px 0;
}

.footer-section a {
  color: white;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 20px;
  border-top: 1px solid gray;
  padding-top: 10px;
}

@media (min-width: 768px){     /* dilediğiniz breakpoint */
  .search-form{
    justify-content:center;    /* yatayda tam ortala */
    padding-left:0;            /* sol iç boşluğu sıfırla */
  }

  /* İkonu input’tan biraz uzak tutmaya devam et */
  .sort-container{
    margin-left:12px;          /* input-ikon arası 12 px */
  }
}

/* MOBİL STİLLERİ */
@media (max-width: 768px) {
  /* Header Adjustments */
  .header-top {
    padding: 15px;
  }

  .header-bottom {
    gap: 10px;
    padding: 10px;
  }
  
  .header-bottom a {
    font-size: 14px;
    padding: 6px 10px;
  }

  .logo img {
    height: 55px;
  }

  .menu-icon .bar {
    width: 25px;
    height: 2px;
  }

  /* Açılır Menü Mobil Pozisyon */
  .nav-menu {
    top: 50px;
    right: 0;
    width: 100%;
    border-radius: 0;
  }

  /* Kategori Başlık */
  .category-header {
    padding: 15px;
  }

  .category-header h2 {
    font-size: 24px;
  }

  /* Ürün Grid'i Mobil */
  .category-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px;
  }

  .product-card {
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: 10px;
  }

  .product-card img {
    height: 100px;
    margin-bottom: 8px;
  }

  .product-card h4 {
    font-size: 14px;
  }

  .product-price {
    font-size: 14px;
    margin: 6px 0;
  }
  .footer-logo img {
    width: 50px; /* Logo Boyutu */
  }
}

/* Animasyonlar */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.site-header , .category-header , .product-card {
  animation: fadeIn 1s ease-out;
}