/* Imported from: ../../styles/nc-beden-secici.css */
/* ═══════════════════════════════════════════════════════════════════
   BEDEN SEÇİCİ — karttan açılan seçim paneli
   ═══════════════════════════════════════════════════════════════════

   NEDEN PANEL, NEDEN KARTTA DEĞİL:
   Beden şeridi kartın içinde dururken 9 bedenin tamamı iki satıra taşıyor,
   kartın yarısını yiyor ve "Sepete Ekle" butonunu ekranın altına itiyordu.
   Müşteri ürünleri tarayamıyor, her kart için kaydırmak zorunda kalıyordu.
   Kart artık kompakt: görsel, renk, beden ARALIĞI, fiyat, tek buton.
   Seçim panelde — orada dokunma hedefi de 44'ten 56px'e çıkabiliyor.

   NEDEN PORTAL (bkz. index.tsx):
   Kartlar `contain: paint` taşıyan yatay kaydırma şeridinin içinde
   (UrunSeridi/styles.css — yatay kaymayı çözen tek yöntem oydu).
   `contain` bir öğeyi konumlandırma bağlamı yapar, yani içindeki
   `position: fixed` EKRANA GÖRE DEĞİL o şeride göre konumlanır.
   Panel bu yüzden document.body'ye portal ile taşınıyor.

   MOBİLDE ALTTAN, MASAÜSTÜNDE ORTADAN: alttan açılan panel başparmakla
   ulaşılabilir; hedef kitlenin çoğu telefonda.
   ═══════════════════════════════════════════════════════════════════ */

.cc_twnkcbd7_xUch9uzqfR .nc-secici {
  position: fixed;
  inset: 0;
  z-index: 2147483620; /* hediye barı 2.147.483.640 — onun ALTINDA */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cc_twnkcbd7_xUch9uzqfR .nc-secici__perde {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 29, 0.5);
  animation: cc_twnkcbd7_xUch9uzqfR_nc-secici-bel 200ms ease both;
}

.cc_twnkcbd7_xUch9uzqfR .nc-secici__panel {
  position: relative;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--fwUr2Oxnij, #FCFCFB);
  border-radius: 14px 14px 0 0;
  padding: 20px 20px
    calc(20px + var(--nc-alt-bar, 0px) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 48px rgba(28, 26, 29, 0.22);
  animation: cc_twnkcbd7_xUch9uzqfR_nc-secici-kalk 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes cc_twnkcbd7_xUch9uzqfR_nc-secici-bel { from { opacity: 0 } to { opacity: 1 } }
@keyframes cc_twnkcbd7_xUch9uzqfR_nc-secici-kalk { from { transform: translateY(100%) } to { transform: translateY(0) } }

@media (prefers-reduced-motion: reduce) {
  .cc_twnkcbd7_xUch9uzqfR .nc-secici__perde, .cc_twnkcbd7_xUch9uzqfR .nc-secici__panel { animation: none; }
}

/* Masaüstü: ortada iletişim kutusu */
@media (min-width: 720px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-secici { align-items: center; }
  .cc_twnkcbd7_xUch9uzqfR .nc-secici__panel {
    width: min(460px, 92vw);
    max-height: 86vh;
    border-radius: 10px;
    padding: 24px 24px calc(24px + var(--nc-alt-bar, 0px));
    box-shadow: 0 24px 64px rgba(28, 26, 29, 0.26);
    animation-name: cc_twnkcbd7_xUch9uzqfR_nc-secici-bel;
  }
}

/* ── üst: ürün kimliği ── */
.cc_twnkcbd7_xUch9uzqfR .nc-secici__ust {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__gorsel {
  flex: 0 0 64px;
  width: 64px;
  height: 86px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__kimlik { flex: 1 1 auto; min-width: 0; }
.cc_twnkcbd7_xUch9uzqfR .nc-secici__urun {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--1QyC2Xla3O, #1C1A1D);
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__renk {
  display: block;
  margin-top: 4px;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--79GJzc9RAk, #5A5257);
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__fiyat {
  display: block;
  margin-top: 6px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--1QyC2Xla3O, #1C1A1D);
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__kapat {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: -6px -6px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--79GJzc9RAk, #5A5257);
  cursor: pointer;
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__kapat:hover { background: var(--dPiHaE9ISn, #F1E4DC); }
.cc_twnkcbd7_xUch9uzqfR .nc-secici__kapat:focus-visible {
  outline: 3px solid var(--59B9UOa2Vc, #7A1F52);
  outline-offset: 2px;
}

/* ── seçim ── */
.cc_twnkcbd7_xUch9uzqfR .nc-secici__baslik {
  margin: 0 0 10px;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--1QyC2Xla3O, #1C1A1D);
}
/* Panelde hedef kartın darlığından kurtuluyor: 56px. */
.cc_twnkcbd7_xUch9uzqfR .nc-secici .nc-beden__oge { min-height: 56px; font-size: 18px; }

.cc_twnkcbd7_xUch9uzqfR .nc-secici__durum {
  margin: 12px 0 0;
  min-height: 24px;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--79GJzc9RAk, #5A5257);
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__durum--uyari { color: #A3341F; font-weight: 500; }
.cc_twnkcbd7_xUch9uzqfR .nc-secici__durum a {
  color: var(--59B9UOa2Vc, #7A1F52);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── eylemler ── */
.cc_twnkcbd7_xUch9uzqfR .nc-secici__ekle {
  display: block;
  width: 100%;
  min-height: 56px;
  text-align: center;
  margin-top: 16px;
  padding: 16px;
  border: 0;
  border-radius: 4px;
  background: var(--59B9UOa2Vc, #7A1F52);
  color: var(--2Lp22Xnz3G, #ffffff);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__ekle:hover { background: var(--cRez3QrrW7, #C9316F); }
.cc_twnkcbd7_xUch9uzqfR .nc-secici__ekle:focus-visible {
  outline: 3px solid var(--1QyC2Xla3O, #1C1A1D);
  outline-offset: 2px;
}
/* Beden seçilmeden buton PASİF YAPILMAZ — 60+ kitlede pasif buton
   "bozuk" sanılıyor. Soluk görünüyor ama basılabiliyor ve neden
   olmadığını söylüyor. */
.cc_twnkcbd7_xUch9uzqfR .nc-secici__ekle--bekliyor {
  /* #8E8489 üzerinde beyaz metin 3,0:1 — AA'nın altında. Metin/İkincil
     tonunda beyaz 7,5:1 veriyor ve hâlâ "henüz hazır değil" diyor. */
  background: var(--79GJzc9RAk, #5A5257);
}

.cc_twnkcbd7_xUch9uzqfR .nc-secici__urune {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--79GJzc9RAk, #5A5257);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc_twnkcbd7_xUch9uzqfR .nc-secici__urune:hover { color: var(--1QyC2Xla3O, #1C1A1D); }

/* End import: ../../styles/nc-beden-secici.css */
/* Imported from: ../../styles/nc-beden-seridi.css */
/* ═══════════════════════════════════════════════════════════════════
   BEDEN ŞERİDİ — markanın imza öğesi
   ═══════════════════════════════════════════════════════════════════

   TEZ: Bu markanın rakiplerinden tek gerçek farkı BEDEN. O yüzden beden
   dekoratif bir metin değil, sitenin taşıyıcı arayüz öğesi. Aynı şerit
   kartta, ürün sayfasında, kategoride ve beden rehberinde görünür.

   BİÇİM: terzi mezurası. Rakamlar tek sıra, aralarında saç çizgisi,
   altında çentik. Kutucuk yığını değil, ölçüm aleti.

   ÖLÇÜLMÜŞ KARARLAR — değiştirmeden önce oku:

   1. Stoksuz beden `disabled` DEĞİL.
      Gerçek `disabled` bir <button> tıklama olayı ÜRETMEZ. Faz 9'un
      "hangi bedene tıklandı ama stokta yoktu" sinyali — doğrudan restok
      kararı — hiç gelmez. `aria-disabled="true"` + `data-stok="yok"`
      kullanılıyor: ekran okuyucuya durumu bildiriyor, tıklanabilir kalıyor,
      tıklayınca "haber ver" akışı açılıyor.

   2. Dokunma hedefi ≥48px (WCAG 2.5.5 AAA). Hedef kitle 40-60 yaş.
      Kartın dar halinde bile yükseklik 44px'in altına düşmüyor.

   3. Renk TEK BAŞINA durum taşımaz (WCAG 1.4.1). Seçili beden dolgu +
      kalınlık, stoksuz beden çapraz çizgi ile de ayrılıyor.

   4. Bu dosya PAYLAŞILIYOR. Alt bileşen CSS'i derlemeye girmediği için
      (bkz. CLAUDE.md §4) her kullanan bölüm bunu @import eder; @import'in
      derlemeden sağ çıktığı ve doğru kapsamlandığı ölçüldü.
   ═══════════════════════════════════════════════════════════════════ */

.cc_twnkcbd7_xUch9uzqfR .nc-beden {
  /* GRID, flex değil: flex-wrap ile alt satıra taşan öğeler `flex:1 1 auto`
     yüzünden gerilip hizayı bozuyordu (56 ve 58 satır boyunca yayılıyordu).
     Grid'de her hücre aynı genişlikte kalır, mezura hizası korunur. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--mgEj69OOxO, #E3DAD4);
  border-radius: 4px;
  overflow: hidden;
  background: var(--fwUr2Oxnij, #FCFCFB);
}

.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge {
  display: block;
  min-width: 44px;
  min-height: 48px;
  padding: 0 2px;
  border: 0;
  border-right: 1px solid var(--mgEj69OOxO, #E3DAD4);
  background: transparent;
  color: var(--1QyC2Xla3O, #1C1A1D);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge:last-child { border-right: 0; }
/* Satır sonundaki hücrenin sağ çizgisi kapsayıcının kenarıyla üst üste
   binmesin diye taşma gizleniyor (kapsayıcıda overflow:hidden zaten var). */

/* Mezura çentiği — sayının altında ince bir işaret. Şeridi kutucuk
   yığınından ayıran şey bu. */
.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 1px;
  height: 5px;
  background: var(--mgEj69OOxO, #E3DAD4);
  transform: translateX(-50%);
}

.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge:hover { background: var(--dPiHaE9ISn, #F1E4DC); }

.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge:focus-visible {
  outline: 3px solid var(--59B9UOa2Vc, #7A1F52);
  outline-offset: -3px;
}

/* Seçili: dolgu + kalınlık. Renk tek başına taşımıyor. */
.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge[aria-pressed="true"], .cc_twnkcbd7_xUch9uzqfR .nc-beden__oge[data-secili="1"] {
  background: var(--59B9UOa2Vc, #7A1F52);
  color: var(--2Lp22Xnz3G, #ffffff);
  font-weight: 700;
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge[aria-pressed="true"]::after, .cc_twnkcbd7_xUch9uzqfR .nc-beden__oge[data-secili="1"]::after {
  background: var(--2Lp22Xnz3G, #ffffff);
  height: 7px;
}

/* Stoksuz: soluk + çapraz çizgi. disabled DEĞİL — tıklanabilir. */
.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge[data-stok="yok"] {
  /* 8 Eyl 2026 persona testi: yalnız soluk gri (3,6:1) telefonda ayırt edilemiyordu.
     Üstü çizili + koyu gri (≥ 4,5:1) + tek çapraz çizgi; yine tıklanabilir (haber ver akışı). */
  color: #6B6169;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(107, 97, 105, 0.55) calc(50% - 1px), rgba(107, 97, 105, 0.55) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(142, 132, 137, 0.14) 5px 6px);
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden__oge[data-stok="yok"]:hover {
  color: var(--1QyC2Xla3O, #1C1A1D);
  background: var(--dPiHaE9ISn, #F1E4DC);
}

/* Kart içindeki dar hâl */
.cc_twnkcbd7_xUch9uzqfR .nc-beden--dar {
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden--dar .nc-beden__oge {
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden--dar .nc-beden__oge::after { bottom: 5px; height: 4px; }

/* Şeridin üstündeki etiket ve altındaki geri bildirim */
.cc_twnkcbd7_xUch9uzqfR .nc-beden-blok { display: block; }
.cc_twnkcbd7_xUch9uzqfR .nc-beden-blok__etiket {
  display: block;
  margin: 0 0 6px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px; /* 60+ tabanı; 13px kapının altındaydı (Codex, 2 Eyl 2026) */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--79GJzc9RAk, #5A5257);
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden-blok__haber {
  display: block;
  margin: 8px 0 0;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--1QyC2Xla3O, #1C1A1D);
}
.cc_twnkcbd7_xUch9uzqfR .nc-beden-blok__haber a {
  color: var(--59B9UOa2Vc, #7A1F52);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   MEZURA — şeridin KATEGORİ FİLTRESİ varyantı (Faz 5, 2 Eyl 2026)
   ═══════════════════════════════════════════════════════════════════
   Aynı mezura, bu kez her rakam gerçek bir bağlantı: o bedende ürünlere
   gider. Rakamın altında adet yazar. Bu listede olmayan beden soluk ve
   çizik, tıklanmaz — "hiçbir yere gitmeyen sayı" göstermeyiz.

   DOKUNMA HEDEFİ: 390px'te 11 rakam tek satıra 32px'lik hücrelerle
   sığıyor; 44px kuralı tutmaz. Mobilde mezura İKİ parçaya bölünür
   (6 + 6: on bir beden + "Bedenimi bilmiyorum" hücresi), hücre 58px olur.
   600px'ten geniş ekranda tek satır. Renk tek başına durum taşımaz:
   seçili dolgu + kalın, yok olan çizik + soluk (WCAG 1.4.1). */

.cc_twnkcbd7_xUch9uzqfR .nc-mezura {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--1QyC2Xla3O, #1c1a1d);
  border-radius: 4px;
  overflow: hidden;
  background: var(--fwUr2Oxnij, #fcfcfb);
}

@media (min-width: 600px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-mezura {
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    grid-auto-flow: column;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 2px 14px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--mgEj69OOxO, #e3dad4);
  border-top: 1px solid var(--mgEj69OOxO, #e3dad4);
  background: transparent;
  color: var(--1QyC2Xla3O, #1c1a1d);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
/* Mobilde ilk sıra (6 hücre) üst çizgi taşımaz; ikinci sıra ayraç alır. */
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge:nth-child(-n + 6) { border-top: 0; }
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge:nth-child(6n + 1) { border-left: 0; }

@media (min-width: 600px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge { border-top: 0; border-left: 1px solid var(--mgEj69OOxO, #e3dad4); }
  .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge:first-child { border-left: 0; }
}

/* Mezura çentiği */
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 1px;
  height: 5px;
  background: var(--mgEj69OOxO, #e3dad4);
  transform: translateX(-50%);
}

.cc_twnkcbd7_xUch9uzqfR .nc-mezura__adet {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--79GJzc9RAk, #5a5257);
}

.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge:hover, .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge:focus-visible {
  background: var(--dPiHaE9ISn, #f1e4dc);
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge:focus-visible {
  outline: 3px solid var(--59B9UOa2Vc, #7a1f52);
  outline-offset: -3px;
}

/* Seçili: dolgu + kalınlık */
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--secili, .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge[aria-pressed="true"] {
  background: var(--59B9UOa2Vc, #7a1f52);
  color: var(--2Lp22Xnz3G, #ffffff);
  font-weight: 700;
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--secili .nc-mezura__adet, .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge[aria-pressed="true"] .nc-mezura__adet {
  color: rgba(255, 255, 255, 0.86);
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--secili::after, .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge[aria-pressed="true"]::after {
  background: var(--2Lp22Xnz3G, #ffffff);
  height: 7px;
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--secili:hover, .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge[aria-pressed="true"]:hover {
  background: var(--cRez3QrrW7, #c9316f);
}

/* Bu listede yok: çapraz çizgi + ikincil renk, tıklanmaz.
   #8e8489 zemin üzerinde 3,5:1 idi (Codex ölçümü) — durum bilgisi 4,5:1 ister;
   ikincil metin rengi 7:1, çizgili dolgu ayrımı korur. */
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--yok {
  color: var(--79GJzc9RAk, #5a5257);
  cursor: default;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    rgba(142, 132, 137, 0.16) 5px 6px
  );
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--yok:hover { background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(142, 132, 137, 0.16) 5px 6px); }
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--yok .nc-mezura__adet { color: var(--79GJzc9RAk, #5a5257); }
/* Programatik odak (filtre temizlenince mezuraya dönülür) görünür kalsın */
.cc_twnkcbd7_xUch9uzqfR .nc-mezura:focus-visible {
  outline: 3px solid var(--59B9UOa2Vc, #7a1f52);
  outline-offset: 2px;
}

/* "Bedenimi bilmiyorum" hücresi: soru işareti + kısa metin. Yalnız geniş
   ekranda: 390px'te hücre 58px ve metin sığmıyor (ölçüldü 2 Eyl 2026);
   dar ekranda bölüm aynı paneli mezuranın altındaki tam genişlik düğmeyle
   açar. Mobilde 11 hücre 6+5 kalır; son hücre (60) iki sütun alır ki
   mezura boş slotla bitmesin. */
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--bulucu {
  display: none;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  border-left-style: dashed;
}
@media (max-width: 599px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge[data-beden="60"] { grid-column: span 2; }
}
@media (min-width: 600px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--bulucu { display: flex; }
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--bulucu .nc-mezura__ad {
  font-family: "DM Mono", ui-monospace, monospace;
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__adet--metin {
  font-size: 14px;
  line-height: 1.15;
  color: var(--59B9UOa2Vc, #7a1f52);
  font-weight: 500;
  padding: 0 4px;
}
.cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--secili .nc-mezura__adet--metin { color: var(--2Lp22Xnz3G, #ffffff); }
@media (min-width: 600px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-mezura__oge--bulucu { min-width: 132px; }
}

/* End import: ../../styles/nc-beden-seridi.css */
/* Imported from: ../../styles/nc-tipografi.css */
/* NC TASARIM SİSTEMİ — tipografi. Faz 0.
 *
 * NEDEN BU DOSYA VAR: tema tipografi className'leri (`_SewBN6r2ez` vb.) KARARSIZ —
 * yayınlanan CSS'te kuralları yok ve sınıf adı token'a değil sıraya bağlı.
 * Ölçüm: docs/studio-notlar/2026-08-31-tipografi-classname-kararsiz.md
 * Fontlar tema tarafından yükleniyor; yalnız BAĞLAMA güvenilmez.
 *
 * ##  KURAL: BU DOSYADAKİ TİPOGRAFİ UTILITY'LERİ RENK BELİRLEMEZ.  ##
 * Sebebi ölçülmüş bir hatadır: MarkaSeridi ve YardimSeridi koyu zeminli ve
 * metin rengini sarmalayıcıdaki inline `color:#ffffff` ile MİRAS bırakıyor.
 * Utility çocuk öğede renk verirse mirası ezer ve koyu zeminde kontrast
 * 1,8:1'e (etiket) ve 2,3:1'e (gövde) düşer — 4,5:1 sınırının çok altı.
 * Renk bileşenin kendi CSS'inin ya da aşağıdaki opt-in renk sınıflarının işidir.
 */

.cc_twnkcbd7_xUch9uzqfR .nc-imza-testi { outline-color: rgb(1 2 3); }

/* ---- Tipografi: yalnız aile / boyut / ağırlık / ritim. RENK YOK. ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 7.5vw, 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
}
.cc_twnkcbd7_xUch9uzqfR .nc-h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 4.4vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
}
.cc_twnkcbd7_xUch9uzqfR .nc-h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 28;
}
.cc_twnkcbd7_xUch9uzqfR .nc-govde {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
}
.cc_twnkcbd7_xUch9uzqfR .nc-govde-buyuk {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
}
.cc_twnkcbd7_xUch9uzqfR .nc-etiket {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px; /* 60+ tabanı; 13px kapının altındaydı (Codex, 2 Eyl 2026) */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cc_twnkcbd7_xUch9uzqfR .nc-sayi {
  font-family: "DM Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---- Renk: OPT-IN. Açık zeminde kullan; koyu zeminde `nc-ters-*` kullan. ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-metin-ana { color: var(--1QyC2Xla3O, #1C1A1D); }
.cc_twnkcbd7_xUch9uzqfR .nc-metin-ikincil { color: var(--79GJzc9RAk, #5A5257); }
.cc_twnkcbd7_xUch9uzqfR .nc-metin-vurgu { color: var(--59B9UOa2Vc, #7A1F52); }

/* Koyu zemin (Zemin/Derin #2A0F1E) üzerinde AA/AAA sağlayan çiftler. */
.cc_twnkcbd7_xUch9uzqfR .nc-ters-ana { color: var(--fwUr2Oxnij, #FCFCFB); }   /* #2A0F1E üzerinde 16,4:1 */
.cc_twnkcbd7_xUch9uzqfR .nc-ters-ikincil { color: #E8DDE3; }                       /* #2A0F1E üzerinde 12,4:1 */
.cc_twnkcbd7_xUch9uzqfR .nc-ters-vurgu { color: #F0A9C8; }                       /* #2A0F1E üzerinde  7,6:1 */

/* End import: ../../styles/nc-tipografi.css */
/* Imported from: ../../styles/nc-kart.css */
/* ═══════════════════════════════════════════════════════════════════
   RENK KARTI — ortak kart stili (src/sub-components/RenkKarti)
   ═══════════════════════════════════════════════════════════════════

   Alt bileşen CSS'i derlemeye girmediği için (CLAUDE.md §4) kartı
   kullanan HER bölüm bu dosyayı kendi styles.css'inde @import eder:
   UrunSeridi (anasayfa rafları) ve NcKategoriSayfasi (kategori/arama).
   KatalogIzgara çift kayıtlı ve emekli; kendi eski kopyasını taşıyor.

   Seçiciler `.nc-katalog .nc-kart…` biçiminde: kartı saran ızgara/ray
   `nc-katalog` sınıfını taşımalı. Kapsam bölümün kendi sarmalayıcısıyla
   sınırlı olduğu için UrunSeridi'nin `.nc-katalog` düzen kuralları
   (padding, boş raf gizleme) buraya SIZMAZ — onlar UrunSeridi'de kalır.

   Renk tokenları hex yedekli (src/tema-tokenlari.json ile kapıda eşlenir).
   KART TASARIMI temanın kendi ProductSlider kartını izliyor: indirim
   rozeti, mono üst satır, serif ad + renk noktası, üstü çizili + vurgulu
   fiyat. 60+ kuralları: gövde >=16px, dokunma >=44px, kontrast >=4,5:1.
   ═══════════════════════════════════════════════════════════════════ */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__gorsel-link {
  position: relative;
  display: block;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__gorsel {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  background: #f4f2f0;
}

/* İndirim rozeti — temanın kartıyla aynı yer ve aynı ses. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__rozet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 5px 9px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--2Lp22Xnz3G, #ffffff);
  background: var(--59B9UOa2Vc, #7a1f52);
}

/* Gövde esner, aksiyon bloğu dibe yapışır: kartlar farklı uzunlukta
   isim taşısa da bütün "Sepete ekle" butonları aynı hizada durur. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 0 0;
}

/* Gövde 10 Eyl 2026'da <div>'den <a>'ya geçti: ad, beden aralığı, fiyat ve
   puan ölü metindi (1,7 günde 53 dokunuş / 31 oturum). Görünüm DEĞİŞMEZ —
   renk ve alt çizgi metnin kendi kuralından gelir. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog a.nc-kart__govde {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__govde {
    padding: 18px 0 0;
  }
}

/* Kartın kimliği ÜRÜN ADI — temanın serif sesiyle. Gerekçe:
   src/sub-components/RenkKarti/index.tsx `ustSatir`. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__urun {
  margin: 0 0 4px;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--1QyC2Xla3O, #1c1a1d);
  /* İKİ SATIR SABİT — raydaki her kart aynı yükseklikte kalsın. */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__urun {
    font-size: 20px;
  }
}

/* Ürün adı yokken (showProductName kapalı) kartın kimliği renktir. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 60+ kuralı madde 4 / WCAG 2.5.5: dokunma hedefi en az 44x44.
     Ölçüldü 2026-09-01: bu bağlantı 390px'te 169x22 idi — sayfadaki
     44'ten küçük 21 hedefin 18'i buydu. Metin flex ile dikey ortada
     kaldığı için görünüm değişmiyor, yalnız dokunulabilir alan büyüyor. */
  min-height: 44px;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--1QyC2Xla3O, #1c1a1d);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk {
    font-size: 20px;
  }
}

/* Ürün adı üstteyken renk İKİNCİL satıra düşer — iki serif başlık üst üste
   gelmesin. Sırası önemli: aynı özgüllükteki `.nc-kart__renk` kurallarından
   SONRA gelmeli ki masaüstündeki 20px'i de ezsin. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk--ikincil, .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk--bos {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--79GJzc9RAk, #5a5257);
  /* Ürün adı gibi iki satır sabit; renk adı uzun olan kart diğerlerini
     yukarı itmesin. `--bos` renksiz üründe yalnız yer tutar.
     `max()`: 2.6em 14px'te 36px eder ve 44px dokunma hedefini ezerdi. */
  min-height: max(2.6em, 44px);
  align-items: flex-start;
}

/* Nokta 14px satırın optik ortasına gelsin (flex-start hizasında). */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk--ikincil .nc-kart__renk-nokta {
  margin-top: 3px;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk--ikincil .nc-kart__renk-ad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk-nokta {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(35, 35, 35, 0.18);
}

/* ---- Beden aralığı ----
   60+ kitlede kartın cevaplaması gereken ilk soru "benim bedenim var mı".
   Fiyatın ÜSTÜNDE duruyor: fiyata bakmadan önce görülmesi gereken bilgi.
   Yeşil, çünkü bu bir stok/güven sinyali — indirim rozetiyle karışmasın. */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__beden-aralik {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(30, 122, 76, 0.08);
  color: #1a6742;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__beden-aralik {
    font-size: 14px;
  }
}

/* ---- Fiyat ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat-eski {
  font-size: 14px;
  line-height: 1.4;
  color: var(--79GJzc9RAk, #5a5257);
  text-decoration: line-through;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat-son {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--1QyC2Xla3O, #1c1a1d);
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat-son--indirimli {
  color: var(--59B9UOa2Vc, #7a1f52);
}

/* İki sütunlu mobilde kart ~161px. Masaüstü ölçüleriyle eski + yeni
   fiyat yan yana sığmıyor, satır kırılıyordu; burada daraltıyoruz. */
@media (max-width: 767px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat {
    gap: 6px;
  }

  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat-eski {
    font-size: 14px;
  }

  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__fiyat-son {
    font-size: 15px;
  }
}

/* ---- Puan (yorum varsa) ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__puan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__yildizlar {
  display: inline-flex;
  gap: 2px;
  color: var(--59B9UOa2Vc, #7a1f52);
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__puan-metin {
  font-size: 14px;
  line-height: 1.4;
  color: var(--79GJzc9RAk, #5a5257);
}

/* ---- Beden: kutu değil, alt çizgi ---- */

/* Aksiyon bloğu TEK sarmal: dibe yapışan tek bir auto-margin var.
   İki ayrı auto olsaydı flex boşluğu ikiye böler, seçim kutusuyla
   buton birbirinden kopardı. Kartlar farklı uzunlukta isim taşısa da
   bütün "Sepete ekle" butonları aynı hizada duruyor. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__aksiyon {
  margin-top: auto;
  padding-top: 16px;
}
/* ---- Sepete ekle ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--2Lp22Xnz3G, #ffffff);
  background: var(--59B9UOa2Vc, #7a1f52);
  border: 1px solid var(--59B9UOa2Vc, #7a1f52);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__btn {
    font-size: 16px;
    letter-spacing: 0.14em;
    margin-top: 14px;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__aksiyon > .nc-kart__btn:first-child {
  margin-top: 0;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__btn:focus-visible {
  outline: 2px solid var(--1QyC2Xla3O, #1c1a1d);
  outline-offset: 2px;
}

/* Klavye odağı kart BAĞLANTILARINDA da görünür: yalnız "Sepete Ekle" halkalıydı, görsel ve renk bağlantısı
   outline:none kalıyordu → klavyeyle gezen 3 duraktan 2'sinde nerede olduğunu göremiyordu (Opus canlı, 9 Eyl). */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__gorsel-link:focus-visible, .cc_twnkcbd7_xUch9uzqfR .nc-katalog a.nc-kart__govde:focus-visible, .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__renk:focus-visible {
  outline: 2px solid var(--1QyC2Xla3O, #1c1a1d);
  outline-offset: 2px;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__btn[disabled] {
  cursor: default;
  opacity: 0.7;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__btn--eklendi {
  color: var(--2Lp22Xnz3G, #ffffff);
  background: var(--fBbIfTAjTm, #1e7a4c);
  border-color: var(--fBbIfTAjTm, #1e7a4c);
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__uyari {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #a8202b;
}

/* Ekran okuyucu için; gözle görünmez. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Seçili bedende kartın cevabı: "48 beden stokta ✓" ya da "48 bu renkte
   tükendi". Kategori filtresi "48 bedeni olan ürünler"i getirir ama o beden
   bu RENKTE tükenmiş olabilir; kart bunu gizlemez. Kırmızı tek başına durum
   taşımaz: metin de "tükendi" der (WCAG 1.4.1). */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-kart__beden-aralik--yok {
  background: rgba(214, 40, 40, 0.08);
  color: #a8202b;
}

/* End import: ../../styles/nc-kart.css */
/* ===== KatalogIzgara — yatay ürün slider'ı =====
 * RenkKarti'nın stilleri de burada: derleme yalnız section'ın
 * ikas.config.json'da bildirilen styles.css'ini paketliyor.
 *
 * RENK ve TİPOGRAFİ temanın KENDİ tokenlarından (list_theme_globals):
 *   Zemin/Ana      var(--fwUr2Oxnij)  #ffffff
 *   Metin/Ana      var(--1QyC2Xla3O)  #232323
 *   Metin/İkincil  var(--79GJzc9RAk)  #565654
 *   Çizgi          var(--mgEj69OOxO)  #E5E5E2
 *   Brand/Accent   var(--59B9UOa2Vc)  #8a245e
 *   Accent/Metin   var(--2Lp22Xnz3G)  #ffffff
 *   Accent Hover   var(--cRez3QrrW7)  #c9316f
 *   Durum/Başarı   var(--fBbIfTAjTm)  #1e7a4c
 * Tipografi class'ları JSX'te: _GgHttox5I1 (Başlık 3 / Playfair 32),
 * _SewBN6r2ez (Gövde / Poppins 17), _1zaRU3zOVz (Etiket / DM Mono 12).
 * Hex yedekleri, token canlıda yoksa diye duruyor.
 *
 * KART TASARIMI temanın kendi ProductSlider kartını ("Yeni Gelenler")
 * izliyor: indirim rozeti, mono üst satır, serif ad + renk noktası,
 * üstü çizili + vurgulu fiyat. Aynı sayfada iki kart dili olmasın.
 *
 * 60+ kuralları: gövde >=16px, dokunma hedefi >=48px, kontrast >=4,5:1,
 * hover'a bağlı etkileşim yok, otomatik hareket yok.
 */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog {
  /* FOUC kapısı — bkz. utils/hazir.tsx: bu dosya uygulanınca kök açılır (max-height/visibility → none). */
  --nc-katalog-hazir: none;
  box-sizing: border-box;
  width: 100%;
  padding: 56px 0;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog {
    padding: 88px 0;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog *, .cc_twnkcbd7_xUch9uzqfR .nc-katalog *::before, .cc_twnkcbd7_xUch9uzqfR .nc-katalog *::after {
  box-sizing: border-box;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ic {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ic {
    padding: 0 48px;
  }
}

/* ---- Başlık ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__baslik-alani {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__baslik-alani {
    margin-bottom: 44px;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__etiket {
  margin: 0 0 12px;
  text-transform: uppercase;
  color: var(--79GJzc9RAk, #5a5257);
}

/* Playfair 32px token'ı taşıyor; burada yalnız akış düzeltmesi. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog__baslik {
  margin: 0;
  color: var(--1QyC2Xla3O, #1c1a1d);
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__alt-baslik {
  margin: 10px 0 0;
  color: var(--79GJzc9RAk, #5a5257);
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__tumu {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--1QyC2Xla3O, #1c1a1d);
  text-decoration: none;
  border-bottom: 1px solid var(--1QyC2Xla3O, #1c1a1d);
  white-space: nowrap;
}

/* Mobilde "Tümünü gör" başlığın altına iner; yan yana sıkışmasın. */
@media (max-width: 767px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__baslik-alani {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ---- Slider ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__slider {
  position: relative;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ray {
/* MOBİLDE YATAY KAYMAYI ÖNLER — silmeyin.
   Ölçüm (2026-08-31, 390px iPhone emülasyonu): bu şerit `overflow-x: auto`
   ile görsel olarak doğru kırpıyordu AMA içeriğinin genişliği belge
   seviyesine sızıyordu; sayfa 390px ekranda 11.786px oluyor ve müşteri
   sağa kaydırınca BOMBOŞ beyaz alana düşüyordu (ekran görüntüsüyle
   doğrulandı). `overflow-x: clip`, `max-width`, `min-width:0`, ebeveyne
   `overflow:hidden` — hiçbiri çözmedi; yalnız `contain: paint` çözdü.
   Düzeltme sonrası: belge genişliği = ekran genişliği, şeridin kendi
   içindeki kaydırma bozulmadan çalışıyor. */
  contain: paint;

  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ray::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ray {
    gap: 32px;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__oge {
  flex: 0 0
    calc((100% - (var(--sutun-mobil, 2) - 1) * 12px) / var(--sutun-mobil, 2));
  scroll-snap-align: start;
  display: flex;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__oge {
    flex: 0 0
      calc(
        (100% - (var(--sutun-masaustu, 4) - 1) * 32px) /
          var(--sutun-masaustu, 4)
      );
  }
}

/* Oklar yalnız masaüstünde; mobilde parmakla kaydırma doğal yol.
   Temanın dili köşesiz — daire yerine kare. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ok {
  display: none;
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ok {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--1QyC2Xla3O, #1c1a1d);
    background: var(--fwUr2Oxnij, #fcfcfb);
    border: 1px solid var(--mgEj69OOxO, #e3dad4);
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(35, 35, 35, 0.08);
    cursor: pointer;
    z-index: 2;
  }

  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ok--sol {
    left: -20px;
  }

  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ok--sag {
    right: -20px;
  }

  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ok[disabled] {
    opacity: 0;
    pointer-events: none;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ok:focus-visible {
  outline: 2px solid var(--59B9UOa2Vc, #7a1f52);
  outline-offset: 2px;
}

/* ---- Kaydırma göstergesi ---- */

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ilerleme {
  position: relative;
  height: 2px;
  margin-top: 20px;
  overflow: hidden;
  background: var(--mgEj69OOxO, #e3dad4);
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog__ilerleme {
    margin-top: 32px;
  }
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__ilerleme-dolu {
  display: block;
  height: 100%;
  background: var(--59B9UOa2Vc, #7a1f52);
}

.cc_twnkcbd7_xUch9uzqfR .nc-katalog__bos {
  font-size: 17px;
  line-height: 1.6;
  color: var(--79GJzc9RAk, #5a5257);
}

/* Grup özeti — "18 renk · 42–58 beden". Başlıkla alt başlık arasında,
   ikisinden de sessiz. Rakam taşıdığı için tabular-nums. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-katalog__ozet {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--79GJzc9RAk, #5a5257);
}

@media (min-width: 1024px) {
  .cc_twnkcbd7_xUch9uzqfR .nc-katalog .nc-katalog__ozet { font-size: 17px; }
}

/* KARTSIZ RAF GÖRÜNMEZ.
   Bu kural YALNIZ bu bileşenin kendi bölümleri için geçerli: build her
   kuralı bileşenin sarmalayıcısıyla kapsıyor
   (`.cc_twnkcbd7_xUch9uzqfR .nc-katalog:not(...)`), yani bir bileşenin
   CSS'i başka bileşenin bölümüne ASLA ulaşmaz. Ölçüldü 2026-09-01:
   çift kayıtlı KatalogIzgara'nın boş kabuklarını buradan gizlemeye
   çalıştım, kural yayına gitti ama kapsam dışı kaldığı için hiç uygulanmadı.
   Kuralın kendi değeri duruyor: bir rafın ürünü kalmazsa boş raf
   göstermek yerine bölüm tamamen kalkar. */
.cc_twnkcbd7_xUch9uzqfR .nc-katalog:not(:has(.nc-kart)) {
  /* FOUC kapısı (utils/hazir.tsx) display'e dokunmaz (max-height/visibility kapısı); bu kural olduğu
     gibi çalışır, display:none öğede yedek animasyon da başlamaz. */
  display: none;
}