@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

      :root {
        --clr-bg:          #f5f5f5;
        --clr-card:        #fafafa;
        --clr-border:      #e0e0e0;
        --clr-text:        #333;
        --clr-muted:       #666;

        --radius-card:     0px;
        --radius-hero:     48px;

        --shadow-sm:       0 4px 3px rgba(0, 0, 0, .06);
        --shadow-lg:       0 6px 16px rgba(0, 0, 0, .08);
        --font-primary: 'Poppins', sans-serif;
        --container-max: 100%; 
      }

      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--clr-bg);
        color: var(--clr-text);
          font-family: var(--font-primary);
      }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; }
    .page-wrapper {
      max-width: var(--container-max); /* Şimdi %100 */
      margin: 0;                        /* Ortalanmadan tam genişlik */
      padding: 0 16px;    /* ← hem sağda hem solda 16px boşluk */
    }

    .hero-section1   { margin: 0px 0 32px; }
    .hero-grid       {
      display: grid;

      align-items: center;
      background: var(--clr-card);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .hero-img {
      min-height: 490px;
      max-width: 100%;
    }

    @media (max-width: 992px) {
      .hero-grid   { grid-template-columns: 1fr; }

      .hero-img    { order: 1; }
    }

    .info-bar {
    background: var(--clr-card);
    padding: 14px 24px;
    margin-bottom: 32px;
    font-weight: 600;
    text-align: center;              /* <-- metni ortala */
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
    font-size: 1.5rem;  
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
    }

    .info-bar a { 

        font-weight: 400; 
        font-size: .9rem; 
    }


.urunler-container {
  display: flex;
  flex-wrap: wrap;    /* Dar ekranda alt satıra düşsün */
  gap: 32px;
  width: 100%;        /* Eski sabit 1250px yerine */
  max-width: none;    /* Sınır kaldırıldı */
  margin: 0 auto;     /* Yine de ortalanabilir */
  padding: 0 0;    /* İsteğe bağlı: uçlarda biraz iç boşluk */
  background-color: #EFEEEA;

}
    @media (max-width: 768px) {
      .urunler-container { flex-direction: column; }
    }

    .sidebar {
      width: 260px;
      flex-shrink: 0;
      background: var(--clr-card);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-card);
      padding: 24px 20px;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 100px;
      max-height: calc(102vh - 140px);
      overflow: auto;
    }
    .sidebar h2 {
      margin: 0 0 18px;
      font-size: 1.1rem;
      border-bottom: 1px solid var(--clr-border);
      padding-bottom: 6px;
    }
    /* scrollbar’ı gizle */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* —————————————————————————————
   Beğenebileceğiniz Ürünler - Güncellenmiş
   ————————————————————————————— */
.recommend-section {
  margin: 80px 0;
  padding: 0 16px;
}

.recommend-section h2 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 32px;
  color: var(--color-base);
  position: relative;
}

.recommend-section h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--clr-border);
  margin: 12px auto 0;
}

.recommend-wrapper {
  position: relative;
  max-width: 1200px;    /* istersen kendi container genişliğine göre ayarla */
  margin: 0 auto;

}

.recommend-carousel {
  display: flex;
  gap: 24px;            /* kartlar arası boşluk */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0px;      /* kenarlardan biraz boşluk */
}

.recommend-item {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  flex: 0 0 calc((100% - 2*24px)/2);
  max-width: calc((100% - 2*24px)/2);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
  transform-origin: center center;
  /* Aspect-ratio ile 16:9 oranı sabitliyoruz */
  aspect-ratio: 16 / 9;
}

/* Hover efektleri aynen koru */
/* Kart hover efekti */
.recommend-item:hover {
  /* 1) Aşağı doğru 5px
     2) %97 oranında küçült (arka doğru gitme hissi)
  */
  transform: translateY(5px) scale(0.97);
  
  /* Kutucuk derinliğini biraz alçaltalım */
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}
.recommend-item img {
  /* Resmi kartı tamamen dolduracak şekilde yerleştir */
  width: 100%;
  height: 100%;

  object-position: center;
  display: block;
}
/* UA stylesheet override: img üzerindeki overflow clip’i iptal et */
.recommend-item img,
.recommend-item.category-item img {
  overflow: visible !important;
  overflow-clip-margin: initial !important;
}

.recommend-item p {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 90%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Genel ok stilleri */
.rec-arrow.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 2rem;
  color: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 100;
}



/* Label (yazı) */
.nav-label {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* İkon */
.rec-arrow.hero-nav i {
  font-size: 2rem;
  color: #000;
  transition: transform 0.5s ease;
}



.rec-arrow.hero-nav:hover i {
  transform: rotate(360deg);
}

.rec-arrow.hero-nav:hover .nav-label {
  color: #efefef;
}

/* Yönlendirme (sağ/sol) */
.hero-nav-prev {
  left: -90px !important;
  flex-direction: row;
}

.hero-nav-next {
  right: -90px !important;
  flex-direction: row-reverse;
}

/* Mobilde boyut küçült */
@media (max-width: 768px) {
  .rec-arrow.hero-nav {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .rec-arrow.hero-nav i {
    font-size: 1rem;
  }

  .nav-label {
    font-size: 0.9rem;
  }

  .hero-nav-prev { left: 10px; }
  .hero-nav-next { right: 10px; }
}
/* Küçük ekranlarda okları biraz küçült */
@media (max-width: 768px) {
  .rec-arrow {
    width: 36px;
    height: 36px;
  }
}
    .kategori-listesi {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 12px;
      padding: 0;
      list-style: none;
    }
    .kategori-listesi li { margin: 0; }
    .kategori-listesi input[type="checkbox"] { display: none; }

    .kategori-card {
      display: block;
      background: #fff;
      border: 1px solid var(--clr-border);

      text-align: center;
      font-size: .85rem;
      font-weight: 500;
      color: var(--clr-text);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: all .25s ease;
      user-select: none;
    }
    .kategori-card:hover {
      background:rgb(102, 104, 105);
      color: #fff;
      transform: scale(1.03);
    }
    .kategori-card.checked {
      background:rgb(50, 57, 64);
      color: #fff;
      border-color: #2B6CB0;
    }

    @media (max-width: 992px) { .sidebar { width: 220px; } }
    @media (max-width: 768px) {
      .sidebar { position: static; width: 100%; max-height: none; }
      .kategori-listesi { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    }


    .products      { flex: 1; }
    .product-grid  {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: stretch;
    }
    @media (max-width: 992px) {
      .product-grid { gap: 24px; grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .product-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 600px) {
  .product-card-link {
    /* Üst boşluk bırakmak için 20px, sağ-sol otomatik ile ortala */
    margin: 20px 20px 0;
    /* İstersen tam genişlik istersen max-width’i de kaldırabilirsin */
    /* max-width: none; */
  }
}
    .product-card-link {
      display: block;
      max-width: 460px;
      margin-top: 20px;
      margin-left: 18px;
      transition: transform .3s cubic-bezier(.25, .8, .25, 1);
    }
    .product-card-link:hover { transform: translateY(-4px) scale(1.02); }

    .product-card {
      background: var(--clr-card);
      border-radius: 28px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: box-shadow .3s;
     border: 2px solid rgba(8, 8, 8, 0.05); /* hafif gri kontur */

    }
    .product-card:hover { box-shadow: var(--shadow-lg); }


    .image-wrapper {
      position: relative;
      height: 240px;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 28px;  

      
    }
    .image-wrapper img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: opacity .4s ease;
      border-radius: 29px;
    }
    .img-front { opacity: 1; }
    .img-back  { opacity: 0; }
    .product-card:hover .img-front { opacity: 0; }
    .product-card:hover .img-back  { opacity: 1; }


    .badge {
      position: absolute;
      bottom: 14px;
      left: 14px;
      padding: 4px 12px;
      border-radius: 18px;
      font-size: .7rem;
      font-weight: 500;
      color: #fff;
      text-transform: uppercase;
      backdrop-filter: blur(4px);
    }

    .product-info {
      padding: 18px;
      text-align: center;
      border-top: 1px solid rgba(0, 0, 0, .05);
    }
    .product-info h3 {
      margin: 0 0 -15px;
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: .3px;
      color: var(--clr-text);
    }
    .product-info h3 small {
    font-size: 0.7em;        /* Başlığa göre küçültülmüş */
    color: #3b3838;             /* Gri tonla zayıflat */
    font-weight: 400;        /* Kalınlığı azalt */
    opacity: 0.7;            /* Daha silik görünüm */
    margin-left: 6px;        /* Ana başlıktan ayırmak için boşluk */
    font-style: normal;      /* İstersen italic de yapabiliriz */
    }
    .product-info p {
      margin: 0;
      font-size: .85rem;
      color: var(--clr-muted);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .no-products {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 0;
      color: var(--clr-muted);
      font-size: 1rem;
    }
@media (max-width: 768px) {
  /* Carousel’i flex olarak ayarla */
  .recommend-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* Her kartı tam genişlik yap, kaydırırken ortala */
  .recommend-item {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  /* İsteğe bağlı: kartlar arasına boşluk */
  .recommend-carousel {
    gap: 16px;
  }
}
/* ── Canlı Arama Çubuğu ───────────────────────────── */
.search-container {
  max-width: 800px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}

#product-search {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  border: none;
  border-bottom: 2px solid #ccc;
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#product-search::placeholder {
  color: #999;
}

#product-search:focus {
  border-color: #2B6CB0;
  box-shadow: 0 2px 6px rgba(43, 108, 176, 0.2);
}

/* ── No-Results Mesajı ───────────────────────────── */
.no-products {
  text-align: center;
  color: #666;
  font-size: 1.1rem;
  padding: 2rem 0;
}

/* ── Arama Wrapper ───────────────────────────── */
.search-wrapper {
  position: relative;
  max-width: 800px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}

/* yerine bunu kullan: */
.search-wrapper .search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  fill: #999;
  pointer-events: none;
}
/* ── Input Stili (ikon için sola padding) ───── */
#product-search {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem; /* soldan ikon için ekstra boşluk */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  border: none;
  border-bottom: 2px solid #ccc;
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#product-search::placeholder {
  color: #999;
}
#product-search:focus {
  border-color: #2B6CB0;
  box-shadow: 0 2px 6px rgba(43, 108, 176, 0.2);
}