/* ═══════════════════════════════════════════════════════════════
   Çok Satanlar — pekmez zemin üstünde açık kartlar.
   Telefon: yana kaydırmalı şerit · 768+: birinci üstte yatay, altında 3 sütun ·
   1024+: birinci solda iki satır boyu, yanında 3×2.
   Sıra mührü logodaki sekiz köşeli yıldızdan.
   ═══════════════════════════════════════════════════════════════ */

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar {
  --cs-yazi: var(--color-text-primary);
  --cs-soluk: var(--color-text-secondary);
  --cs-vurgu: var(--renk-susam, #B8893E);
  --cs-kenar: clamp(16px, 5vw, 80px);
  position: relative;
  overflow: hidden;
  padding: 52px 0 60px;
  background: var(--color-bg);
  color: var(--cs-yazi);
  font-family: var(--font-body);
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar--koyu {
  --cs-yazi: #F3E9D8;
  --cs-soluk: color-mix(in srgb, #E2CCA8 78%, transparent);
  --cs-vurgu: #D2A55A;
  background:
    radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--renk-kahve, #42210B) 75%, var(--renk-pekmez, #1F120A)) 0%, transparent 65%),
    radial-gradient(55% 55% at 100% 100%, color-mix(in srgb, var(--renk-susam, #B8893E) 16%, var(--renk-pekmez, #1F120A)) 0%, transparent 70%),
    var(--renk-pekmez, #1F120A);
}

/* Sağ üstte büyük, silik sekiz köşeli yıldız */
.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -140px;
  width: 300px;
  height: 300px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8893E' stroke-width='0.35'%3E%3Crect x='6' y='6' width='12' height='12'/%3E%3Crect x='6' y='6' width='12' height='12' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.16;
  pointer-events: none;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__ic {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--cs-kenar);
}

/* ─── Başlık ────────────────────────────────────────────────── */

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-bottom: 28px;
}

/* Rozet, başlık ve alt başlık alt alta — editörde başlık rozetin yanına akıyordu */
.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__baslik-grup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__rozet {
  display: inline-flex;
  margin-bottom: 8px;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--cs-vurgu) 55%, transparent);
  border-radius: 999px;
  color: var(--cs-vurgu);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__rozet-ikon { width: 15px; height: 15px; }

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__baslik {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--cs-yazi);
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__alt {
  margin: 0;
  font-size: 15px;
  color: var(--cs-soluk);
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__tumu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid color-mix(in srgb, var(--cs-yazi) 35%, transparent);
  border-radius: 999px;
  color: var(--cs-yazi);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__tumu svg { width: 18px; height: 18px; transition: transform 250ms ease; }

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__tumu:hover {
  border-color: var(--cs-vurgu);
  background: var(--cs-vurgu);
  color: var(--renk-pekmez, #1F120A);
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__tumu:hover svg { transform: translateX(3px); }

/* ─── Izgara ────────────────────────────────────────────────── */

/* Telefon: yana kaydırmalı şerit, bir sonraki kart kenardan görünür */
.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__izgara {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: 14px;
  margin: 0 calc(var(--cs-kenar) * -1);
  padding: 4px var(--cs-kenar) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--cs-kenar);
  scrollbar-width: none;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__izgara::-webkit-scrollbar { display: none; }

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__hucre {
  min-width: 0;
  scroll-snap-align: start;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__hucre--birinci { grid-column: span 1; }

@media (min-width: 768px) {
  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar { padding: 72px 0 84px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar::before { top: -120px; right: -110px; width: 460px; height: 460px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__baslik { font-size: 52px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__alt { font-size: 16px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__bas { margin-bottom: 36px; }

  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__izgara {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__hucre--birinci { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__izgara {
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__hucre--birinci {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

/* Görünür alana girerken hafifçe yükselerek gelsin */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__hucre {
      animation: cc_NMGXlHaf1N_4lu1JF8LeC_cok-satanlar-gel linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes cc_NMGXlHaf1N_4lu1JF8LeC_cok-satanlar-gel {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__bos {
  padding: 48px 24px;
  border: 2px dashed color-mix(in srgb, var(--cs-yazi) 30%, transparent);
  border-radius: 18px;
  text-align: center;
  color: var(--cs-soluk);
}

/* Kartın temel stilleri global.css'te (Ürün Önerileri de kullanıyor). Burada yalnız bölüme özel olanlar. */

/* ─── Birinci kart ──────────────────────────────────────────── */

.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__muhur { width: 50px; height: 50px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__muhur::before, .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__muhur::after { inset: 6px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__muhur span { font-size: 22px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__serit { top: 22px; left: 70px; }

.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ad {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
}

.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__fiyat strong { font-size: 20px; }

/* Birincide düğme hep yazılı. Telefonda fiyat üstte, düğme altında tam genişlik
   (yan yana sığmıyordu, düğme kartın dışına taşıyordu) */
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__alt { flex-direction: column; align-items: stretch; gap: 12px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__fiyat { flex-direction: row; align-items: baseline; gap: 8px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ekle { width: 100%; height: 46px; padding: 0 16px; font-size: 14px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ekle-yazi { max-width: 160px; opacity: 1; margin-left: 6px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__fiyat strong { font-size: 19px; }
.cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ad { font-size: 19px; -webkit-line-clamp: 3; }

@media (min-width: 768px) {
  /* Tablet: birinci yatay kart — solda görsel, sağda bilgi */
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci { flex-direction: row; gap: 22px; padding: 12px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__gorsel { width: 50%; flex-shrink: 0; aspect-ratio: 4 / 3; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__bilgi { justify-content: center; gap: 22px; padding: 12px 12px 12px 0; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ad { font-size: 30px; -webkit-line-clamp: 3; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__alt { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__fiyat strong { font-size: 24px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ekle { width: auto; height: 48px; padding: 0 20px 0 16px; font-size: 13.5px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ekle-yazi { margin-left: 8px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__fiyat { flex-direction: column; align-items: flex-start; gap: 1px; }
}

@media (min-width: 1024px) {
  /* Masaüstü: birinci dikey ve uzun, görsel kalan yüksekliği doldurur */
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci { flex-direction: column; gap: 0; padding: 12px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__gorsel { width: 100%; flex: 1 1 auto; aspect-ratio: auto; min-height: 380px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__bilgi { flex: 0 0 auto; justify-content: flex-start; gap: 16px; padding: 18px 8px 6px; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__ad { font-size: 26px; -webkit-line-clamp: 2; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart--birinci .cs-kart__alt { flex-direction: row; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart, .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart__resim, .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart__ekle, .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart__ekle-yazi, .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__tumu, .cc_NMGXlHaf1N_4lu1JF8LeC .cok-satanlar__tumu svg { transition: none; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart:hover { transform: none; }
  .cc_NMGXlHaf1N_4lu1JF8LeC .cs-kart:hover .cs-kart__resim { transform: none; }
}