/* ===== Çok Satanlar — Silva 2026 =====
 * Referans: design-reference/home/silva-home.jsx → Bestsellers + MobileShelf
 *
 * Bölüm: krem zemin (panelden) · üst dış boşluk 32 mobil / 56 masaüstü
 *   · iç 40/0 mobil (yanlar 0 — raf kenara taşar) · 72/32 masaüstü
 * Başlık bloğu (SectionHead): eyebrow 12/700 ls .16em altın (mb 10) ·
 *   başlık Editoryal 500, 29/38, ls −0.035em · sağda aksiyon 14.5/700 mavi
 *   + ok 15 (yalnız masaüstü) · blok mb 22/30
 * Masaüstü: 4 sütun ızgara · gap 20 · kartlar kademeli belirir
 * Mobil raf: kart 265 · gap 13 · 22px kenar payı (snap sonrası korunur) ·
 *   x-mandatory snap · gizli scrollbar · sağda 34px zemine solma ·
 *   sonda 9px nefes payı · altta nokta göstergesi (aktif 16×5 lacivert hap,
 *   diğerleri 5×5; genişleme .25s) · mt 14
 */

.cc_dht747cl_DW86mF2DHS .kombos-bs {
  width: 100%;
  margin-top: 2rem;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__inner {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  /* Mobilde yan boşluk yok — raf ekran kenarından akar */
  padding-left: 0;
  padding-right: 0;
}

/* ===== Başlık bloğu ===== */

.cc_dht747cl_DW86mF2DHS .kombos-bs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.375rem;
  padding: 0 1.375rem;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silva-gold);
  margin-bottom: 0.625rem;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__title {
  display: block;
  font-size: 1.8125rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--silva-ink);
  margin: 0;
}

/* Aksiyon bağlantısı yalnız masaüstünde (referans) */
.cc_dht747cl_DW86mF2DHS .kombos-bs__action {
  display: none;
}

/* ===== Masaüstü ızgarası — mobilde gizli ===== */

.cc_dht747cl_DW86mF2DHS .kombos-bs__grid {
  display: none;
}

/* ===== Mobil raf ===== */

.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf-wrap {
  position: relative;
}

/* Sağ kenarda zemine karışan solma */
.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.125rem;
  pointer-events: none;
  background: linear-gradient(to left, var(--bs-fade, var(--silva-cream)), transparent);
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf {
  display: flex;
  gap: 0.8125rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.375rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem 1.375rem 0.375rem;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf::-webkit-scrollbar {
  display: none;
}

/* Sondaki kartın nefes alması için (referans: 9px kuyruk) */
.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf::after {
  content: "";
  flex: 0 0 9px;
}

/* Raf hücresi: kart kökü doğrudan flex çocuğu gibi davransın —
   renderer sarmalayıcıları (derinlik öngörülemez) kutu üretmesin */
.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf > *:not(.kombos-bs-card), .cc_dht747cl_DW86mF2DHS .kombos-bs__shelf > *:not(.kombos-bs-card) > *:not(.kombos-bs-card) {
  display: contents;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__shelf .kombos-bs-card {
  flex: 0 0 auto;
  width: 16.5625rem;
  scroll-snap-align: start;
}

/* ===== Nokta göstergesi ===== */

.cc_dht747cl_DW86mF2DHS .kombos-bs__dots {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--silva-cream-deep);
  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.cc_dht747cl_DW86mF2DHS .kombos-bs__dot--active {
  width: 1rem;
  background: var(--silva-blue);
}

/* ===== Masaüstü (≥1024) ===== */

@media (min-width: 1024px) {
  .cc_dht747cl_DW86mF2DHS .kombos-bs {
    margin-top: 3.5rem;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__inner {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__head {
    margin-bottom: 1.875rem;
    padding: 0;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__title {
    font-size: 2.375rem;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__action {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.90625rem;
    font-weight: 700;
    color: var(--silva-blue);
    text-decoration: none;
    white-space: nowrap;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__action-icon {
    font-size: 0.9375rem;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__mobile {
    display: none;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  /* Izgara hücresi: renderer sarmalayıcıları kutu üretmesin */
  .cc_dht747cl_DW86mF2DHS .kombos-bs__grid > *:not(.kombos-bs-card), .cc_dht747cl_DW86mF2DHS .kombos-bs__grid > *:not(.kombos-bs-card) > *:not(.kombos-bs-card) {
    display: contents;
  }

  /* Kademeli belirme (referans Reveal i×70ms — gecikme kart JS'inden).
     Bu kurallar bilerek BURADA: ızgara section alanında, kartın kendi
     CSS'inde ".kombos-bs__grid ..." scoping sonrası eşleşmez. */
  .cc_dht747cl_DW86mF2DHS .kombos-bs__grid .kombos-bs-card {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.55s var(--silva-ease),
      transform 0.55s var(--silva-ease),
      box-shadow 0.2s;
    will-change: opacity, transform;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__grid .kombos-bs-card--in {
    opacity: 1;
    transform: none;
    /* Belirme bitti — hover kaldırması kartın kendi kuralından çalışır */
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__grid .kombos-bs-card--in:hover {
    transform: translateY(-3px);
  }
}

/* Hareketi azaltan kullanıcı: belirme ve nokta animasyonu kapanır */
@media (prefers-reduced-motion: reduce) {
  .cc_dht747cl_DW86mF2DHS .kombos-bs__shelf {
    scroll-behavior: auto;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__dot {
    transition: none;
  }

  .cc_dht747cl_DW86mF2DHS .kombos-bs__grid .kombos-bs-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}