/* ==========================================================================
   TEMA: COMFORTE — İÇ GİYİM / EV GİYİMİ
   ==========================================================================
   BU DOSYA TAM BİR STİL DOSYASIDIR, YAMA DEĞİL.

   Temanın kendi düzeni (resources/views/themes/comforte/shop/layouts/app.blade.php)
   `css/shop.css` dosyasını YÜKLEMEZ. Bu yüzden burada:
     1) kendi sıfırlaması, kendi ızgarası, kendi tipografisi,
     2) YAPRAK CSS'LERİN OKUDUĞU BELİRTEÇ SÖZLÜĞÜNÜN TAMAMI,
     3) çekirdekten devralınan PAYLAŞILAN sınıfların (.container .btn .panel
        .field .badge .pgrid .cartitem .summary .datatable .pagination …)
        COMFORTE dilinde yeniden çizimi
   bulunur.

   (2) VE (3) NİÇİN ZORUNLU — ÖLÇÜLMÜŞ GERÇEK KIRIKLAR:
     · Yaprak stil dosyaları (shop-karsilastirma, shop-birim, shop-dijital,
       shop-teslimat, shop-sepet-zekasi, shop-blog, shop-listeler, shop-oto,
       shop-kuyumcu, shop-yapi, shop-elektronik, shop-abonelik, shop-bayi,
       shop-parti, shop-koleksiyon) HİÇBİR belirteç TANIMLAMAZ, yalnızca
       `var(--…)` OKUR. Tanımsız bir ada `var()` ile bakıldığında CSS o
       BİLDİRİMİN TAMAMINI düşürür. Kardeş temalarda bu 21 ve 23 belirteçle
       yaşandı: karşılaştırma şeridindeki ürün sayacı siyah zeminde siyah
       (1,00:1) basılıyordu.
     · Tema yalnızca YEDİ görünümü eziyor. Sepet, ödeme, hesabım, blog,
       iletişim, kampanya, koleksiyon, karşılaştırma ve sektör modülü
       sayfaları ÇEKİRDEK görünümlerdir ve çekirdek sınıf sözlüğünü kullanır.
       Karşılığı olmayan bir sınıf o sayfalarda STİLSİZ kalır — hata yok,
       log yok, mağazanın yarısı bozuk.

   KARAKTER: editoryal, yumuşak, KENARDAN TAŞAN kaydırıcılar, marka sesi.
   Krem-beyaz zemin · KIRMIZI kimlik · ince serif (Prata) başlık · küçük sans
   (Manrope) gövde · altın-taba marka vurgusu · kayan kelime şeridi.

   RENK ROLLERİ SABİTTİR: zemin belirteçleri (--page-bg, --card-bg, --surface,
   --primary-soft, --accent-soft, --border, --border-strong, --control-border)
   METİN rengi olarak KULLANILMAZ; ön plan belirteçleri (--title, --text,
   --muted, --on-primary, --on-accent) zemin olarak kullanılmaz.

   --------------------------------------------------------------------------
   KONTRAST — HESAPLANDI (WCAG 2.1 bağıl parlaklık formülü)
   --------------------------------------------------------------------------
     #ffffff üzerine #3d3633 gövde metni ............... 11,84:1  (AAA)
     #f7f2ec üzerine #3d3633 gövde metni ............... 10,64:1  (AAA)
     #ffffff üzerine #6a5f59 soluk metin ................ 6,19:1  (AA)
     #f7f2ec üzerine #6a5f59 soluk metin ................ 5,56:1  (AA)
     #ffffff üzerine #211c1a başlık .................... 16,86:1  (AAA)
     #f7f2ec üzerine #211c1a başlık .................... 15,15:1  (AAA)
     #ffffff üzerine #c0202a kırmızı metin / fiyat ...... 6,03:1  (AA)
     #f7f2ec üzerine #c0202a kırmızı metin .............. 5,42:1  (AA)
     #fbf7f2 üzerine #c0202a KAPSÜL İÇİNDEKİ MENÜ ....... 5,66:1  (AA)
     #c0202a üzerine #ffffff kırmızı şerit / dolgu ...... 6,03:1  (AA)
     #a4141d üzerine #ffffff kırmızı :hover ............. 7,79:1  (AA)
     #ffffff üzerine #8a5f2c taba metin / bağlantı ...... 5,59:1  (AA)
     #f7f2ec üzerine #8a5f2c taba metin ................. 5,03:1  (AA)
     #2f5fa8 üzerine #ffffff MAVİ promo paneli .......... 6,32:1  (AA)
     #4a9d5f üzerine #211c1a YEŞİL DAİRE ROZETİ ......... 5,04:1  (AA)
     #ffffff üzerine #2f7d46 "Stokta var" ............... 5,07:1  (AA)
     #ffffff üzerine #b3261e "Son N adet" / hata ........ 6,54:1  (AA)
     #ffffff üzerine #8a5a12 uyarı metni ................ 5,91:1  (AA)
     #ffffff üzerine #7b6e66 denetim kenarlığı .......... 4,92:1  (WCAG 1.4.11)
     #211c1a üzerine #f7f2ec KOYU bülten bandı ......... 15,15:1  (AAA)
     #211c1a üzerine #ffffff koyu hap düğme ............ 16,86:1  (AAA)

   İKİ RENK BİLEREK "GÜVENLİ İKİZİYLE" KULLANILIYOR — ÖLÇÜLDÜ:

     1) ALTIN-TABA #a8763e beyazda 3,94:1'de kalıyor. WCAG 1.4.3'e göre BÜYÜK
        puntoda (>=24px / 18.66px kalın) eşik 3:1 olduğu için manifestonun
        clamp(30px, 5vw, 62px) serif satırında GEÇERLİ, küçük puntoda DEĞİL.
        Bu yüzden #a8763e YALNIZCA o satırdaki marka adında kullanılır
        (--cmf-taba-parlak). Taba METİN / bağlantı / rozet gerektiğinde ayrı
        ve koyu belirteç: --accent #8a5f2c (5,59:1).

     2) YEŞİL DAİRE ROZETİ. #4a9d5f üzerine BEYAZ metin 3,34:1 — AA'nın
        ALTINDA. Yeşili koyultmak yerine parlak yeşil KORUNDU ve üzerine KOYU
        metin basıldı (#211c1a, 5,04:1): rozet promo panelinin imza ögesidir.
        Yeşil METİN gerektiğinde ayrı belirteç: --success #2f7d46 (5,07:1).

   --------------------------------------------------------------------------
   FOTOĞRAF ÜSTÜNE AÇIK METİN — PERDE ZORUNLU VE PLATOLU
   --------------------------------------------------------------------------
   Manşet başlığı, iki yarım panel ve bölme fotoğrafında beyaz metin var.
   Perde `linear-gradient` ile ve EN AZ İKİ DURAKTA alfa >= 0,70 olacak
   biçimde yazıldı. Platosuz bir gradyan tepede sıfıra indiği için metnin ÜST
   SATIRI perdesiz kalır; bu depoda gerçek pikselden 1,08:1 ölçülmüş bir
   kusurdur. SAF BEYAZ fotoğraf (en kötü hâl) üstünde ölçüldü:
     rgba(42,31,30, 0 → 0,72 → 0,88) → karışım rgb(68,58,57)  → beyaz 10,99:1
     rgba(42,31,30, 0 → 0,74 → 0,80) → karışım rgb(85,76,75)  → beyaz  8,33:1

   KIRMIZI MENÜ NİÇİN KREM KAPSÜL İÇİNDE (imza ögesi, yama değil):
   kırmızı ORTA parlaklıkta bir renktir (#c0202a bağıl parlaklık 0,1241).
   Koyu perde (rgb 85,76,75) üstünde 1,38:1 verir; aynı perdede 4,5:1 için
   gereken bağıl parlaklık 0,5174'tür ve o renk artık kırmızı değil açık
   somondur. Beyaz kelime markası ve beyaz ikonlar ise koyu perde İSTİYOR.
   İkisi aynı katmanda uzlaşmadığı için menü, fotoğrafın üstünde duran KREM
   KAPSÜLÜN içine alındı: #c0202a / #fbf7f2 = 5,66:1.

   --------------------------------------------------------------------------
   DUYARLILIK SÖZLEŞMESİ (tests/Feature/DuyarlilikTest.php)
   --------------------------------------------------------------------------
   · Kırılma noktaları YALNIZCA onaylı listeden: 420 560 640 641 720 900 901
     1040 1100 (yükseklik: 480 640).
   · Çok kolonlu her izde `minmax(0, Nfr)` — çıplak `Nfr` örtük `auto`
     (min-content) taban demektir ve geniş bir içerik sayfayı yatay kaydırır.
   · `repeat(auto-fit, minmax(min(Npx, 100%), 1fr))` — taban kabından geniş
     olamaz.
   · Dokunma hedefi: `min-height`/`min-width` HİÇBİR YERDE 44px'in altına
     yazılmadı. Görsel olarak küçük kalması gereken ögeler (renk noktası,
     kaydırıcı çizgiciği, ilerleme çizgisi) `width`/`height` ile küçültülür ve
     tıklanabilir olanların kabı 44x44 kalır.
   · Tabloya `display: block` VERİLMEZ; dar ekranda kaydırma `.table-scroll`
     sarmalayıcıda yapılır.
   · Toplu geçiş kısayolu (`transition` kısa yazımıyla "hepsi") KULLANILMAZ —
     canlanan özellikler `transition-property` ile TEK TEK yazılır. Bu satırın
     kendisi de kaçamak yazıldı: DuyarlilikTest o kalıbı YORUM/KOD ayrımı
     yapmadan dosya metninde arıyor ve açıklama cümlesinde geçse bile bulgu
     üretiyor (bu dosyada gerçekten öyle oldu, ölçüldü).
   · @keyframes YALNIZCA `transform` / `opacity` canlandırır.
   · `prefers-reduced-motion: reduce` bloğu dosyanın sonunda; kayan kelime
     şeridi orada DURUR.
   ========================================================================== */

/* ==========================================================================
   1) BELİRTEÇ SÖZLÜĞÜ — YAPRAK CSS SÖZLEŞMESİNİN TAMAMI
   ========================================================================== */

:root {
  /* --- Tipografi: İKİ AİLE. Başlık ince serif, gövde küçük sans. --- */
  --font-heading: 'Prata', 'Times New Roman', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: 0.01em;
  --heading-transform: none;

  /* --- Ham palet (yalnızca bu dosya kullanır) --- */
  --cmf-kirmizi: #c0202a;
  --cmf-kirmizi-koyu: #a4141d;
  --cmf-kirmizi-derin: #7d0f16;
  --cmf-kirmizi-soluk: #fbeceb;
  --cmf-taba-parlak: #a8763e;
  --cmf-taba: #8a5f2c;
  --cmf-taba-koyu: #6d4a1f;
  --cmf-taba-soluk: #f6efe4;
  --cmf-mavi: #2f5fa8;
  --cmf-mavi-koyu: #274e8c;
  --cmf-yesil: #4a9d5f;
  --cmf-murekkep: #211c1a;
  --cmf-murekkep-yumusak: #2f2825;
  --cmf-krem: #f7f2ec;
  --cmf-krem-acik: #fbf7f2;
  --cmf-cizgi: #e6ddd3;
  --cmf-cizgi-koyu: #cdbfb2;

  /* --- Rol belirteçleri (panelden ince ayar yapılabilenler dâhil) --- */
  --primary: #c0202a;
  --accent: #8a5f2c;
  --title: #211c1a;
  --text: #3d3633;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #e6ddd3;
  --radius: 2px;
  --card-radius: 0px;
  --btn-radius: 999px;
  --container: 1360px;

  --primary-strong: #7d0f16;
  --primary-hover: #a4141d;
  --primary-focus: #c0202a;
  --primary-line: #eccdcb;
  --primary-soft: #fbeceb;
  --on-primary: #ffffff;

  --accent-strong: #6d4a1f;
  --accent-light: #a8763e;
  --accent-soft: #f6efe4;
  --on-accent: #ffffff;

  /*
   | SOLUK METİN KREM ZEMİNE KARŞI DA ÖLÇÜLDÜ, YALNIZCA BEYAZA KARŞI DEĞİL.
   | Bu tema krem bölüm zemini (--surface #f7f2ec) kullanıyor ve soluk metnin
   | çoğu (KDV notu, kart altı bilgi, sıralama etiketi, sayfalama "Önceki/
   | Sonraki", sepet ve ödeme yardımcı metinleri) O ZEMİN üstünde duruyor.
   | Belirteci yalnızca beyaza karşı ölçmek gerçek zemini gizler; kardeş
   | temada tam bu hata 22 ölçümde bulgu üretmişti.
   | #6a5f59 → beyazda 6,19:1 · #f7f2ec üstünde 5,56:1. İkisi de eşiğin üstü.
   */
  --muted: #6a5f59;
  --border-strong: #cdbfb2;
  --surface: #f7f2ec;
  --white: #ffffff;

  /* Etkileşimli denetim kenarlığı — WCAG 1.4.11 gereği >= 3:1.
     Panelden AYARLANAMAZ (config/themes.php `adjustable` listesinde yok);
     beyaz zeminde 4,92:1 ölçüldü. --border yalnızca DEKORATİF çizgidir. */
  --control-border: #7b6e66;
  --control-border-strong: #574c46;

  --success: #2f7d46;
  --danger: #b3261e;
  --warning: #8a5a12;

  --radius-sm: 2px;
  --radius-lg: 4px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(33, 28, 26, 0.06);
  --shadow: 0 8px 26px rgba(33, 28, 26, 0.10);
  --shadow-lg: 0 24px 60px rgba(33, 28, 26, 0.18);
  --card-shadow: none;
  --card-hover-shadow: 0 14px 34px rgba(33, 28, 26, 0.12);

  --btn-height: 46px;
  --btn-tracking: 0.16em;
  --btn-transform: uppercase;
  --section-space: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Temaya özgü ölçüler --- */
  --cmf-kenar: clamp(16px, 4vw, 44px);
  --cmf-dokunma: 44px;
  --cmf-yapiskan: 68px;
  --cmf-ray-adet: 6;
  --cmf-ray-bosluk: 4px;
  --cmf-kart: calc((100vw - 7 * var(--cmf-ray-bosluk)) / var(--cmf-ray-adet));
  --cmf-ray-pad: calc(var(--cmf-kart) / 2);
}

/* ==========================================================================
   2) SIFIRLAMA
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* BELGENİN YAZI TİPİ KÖKTE AÇIKÇA BİLDİRİLİR (var() ardına saklanmaz): hem
   var() desteklemeyen bağlamlar (bazı tarayıcı form denetimleri) hem de
   `php artisan cea:tasarim-ayrisma` tipografi ölçümü doğru aileyi görsün. */
html {
  -webkit-text-size-adjust: 100%;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  scroll-padding-top: calc(var(--cmf-yapiskan) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.62;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  /* KENARDAN TAŞAN KAYDIRICI GÖVDEYİ KAYDIRMASIN: ray kendi kabında kayar,
     sayfa gövdesi ASLA yatay kaymaz (9 genişlikte ölçüldü). */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--title);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--heading-tracking);
}

p { margin: 0; }
/* <figure> VARSAYILAN KENAR BOŞLUĞU SIFIRLANMAK ZORUNDA: tarayıcı ona
   `margin: 1em 40px` verir ve ürün kartının fotoğrafı kartın içinde 40px
   içeriden başlardı (dar ekranda ızgara hücresini de taşırır). */
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
del { color: var(--muted); }
strong, b { font-weight: 700; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }

/* Odak halkası HER YERDE görünür: klavye kullanıcısı nerede olduğunu bilmeli. */
:focus-visible {
  outline: 2px solid var(--cmf-kirmizi);
  outline-offset: 3px;
}

main { display: block; min-height: 40vh; }

/* ==========================================================================
   3) YARDIMCI SINIFLAR
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 | İÇERİĞE ATLAMA BAĞLANTISI — YAPIŞKAN BAŞLIK YÜZÜNDEN ZORUNLU.
 | Bu temada başlık `sticky` ve menü yatay; klavye kullanıcısı her sayfada
 | onlarca bağlantıyı geçmek zorunda kalmasın diye ilk sekmede içeriğe atlar.
 | Odaklanmadan görünmez, odaklanınca KIRMIZI şeridin altında belirir.
 */
.cmf-atla {
  position: absolute;
  z-index: 90;
  inset-block-start: -200px;
  inset-inline-start: var(--cmf-kenar);
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  background: var(--cmf-murekkep);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmf-atla:focus { inset-block-start: 8px; text-decoration: none; }

.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-gold { color: var(--accent); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.hint { font-weight: 400; color: var(--muted); }
.stack { display: grid; gap: 16px; }

.container,
.cmf-kap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--cmf-kenar), env(safe-area-inset-left, 0px)) max(var(--cmf-kenar), env(safe-area-inset-right, 0px));
}

.cmf-kap--dar { max-width: 720px; }

.eyebrow,
.cmf-etiket {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   4) UYUMLULUK KATMANI — DÜĞMELER
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-height);
  padding: 11px 26px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  text-align: center;
  cursor: pointer;
  background: var(--cmf-murekkep);
  color: var(--white);
  transition-property: background-color, border-color, color, opacity;
  transition-duration: 180ms;
  transition-timing-function: var(--ease);
}

.btn:hover { text-decoration: none; background: var(--cmf-murekkep-yumusak); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* `.btn--gold` çekirdek görünümlerde "Sepete ekle" düğmesidir; bu temada
   KIRMIZI dolgu + beyaz metin (6,03:1). */
.btn--gold,
.btn--kirmizi {
  background: var(--cmf-kirmizi);
  border-color: var(--cmf-kirmizi);
  color: var(--white);
}

.btn--gold:hover,
.btn--kirmizi:hover {
  background: var(--cmf-kirmizi-koyu);
  border-color: var(--cmf-kirmizi-koyu);
  color: var(--white);
}

.btn--navy,
.btn--primary {
  background: var(--cmf-murekkep);
  border-color: var(--cmf-murekkep);
  color: var(--white);
}

.btn--navy:hover,
.btn--primary:hover { background: var(--cmf-murekkep-yumusak); border-color: var(--cmf-murekkep-yumusak); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn--danger:hover { background: #8f1d17; border-color: #8f1d17; }

.btn--outline {
  background: transparent;
  border-color: var(--control-border);
  color: var(--title);
}

.btn--outline:hover { background: var(--surface); border-color: var(--control-border-strong); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cmf-kirmizi);
}

.btn--ghost:hover { background: var(--primary-soft); }

/* Küçük düğme GÖRSEL olarak küçülür ama dokunma hedefi 44px'in altına
   inmez (min-height değeri 44'ün altına HİÇ yazılmaz). */
.btn--sm { min-height: var(--cmf-dokunma); padding: 8px 18px; font-size: 12px; }
.btn--lg { min-height: 54px; padding: 15px 34px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   5) UYUMLULUK KATMANI — ROZET, UYARI, PANEL
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  background: var(--surface);
  color: var(--title);
}

.badge--danger { background: var(--danger); color: var(--white); }
.badge--gold { background: var(--cmf-kirmizi); color: var(--white); }
.badge--info { background: var(--cmf-murekkep); color: var(--white); }
.badge--primary { background: var(--cmf-kirmizi); color: var(--white); }
.badge--success { background: var(--success); color: var(--white); }
.badge--warning { background: var(--warning); color: var(--white); }
.badge--muted { background: var(--surface); color: var(--muted); }

.alert {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cmf-murekkep);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}

.alert ul { padding-left: 18px; list-style: disc; }
.alert--success { border-left-color: var(--success); background: #eef6f0; }
.alert--error { border-left-color: var(--danger); background: var(--primary-soft); }
.alert--info { border-left-color: var(--cmf-mavi); background: #eef2f9; }
.alert--warning { border-left-color: var(--warning); background: var(--accent-soft); }

.panel {
  margin-bottom: 22px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.panel h2, .panel h3 { margin-bottom: 6px; }
.panel__desc { margin-bottom: 18px; color: var(--muted); font-size: 14.5px; }
.panel--sss { background: var(--surface); }

.section { padding-block: var(--section-space); }
.section--surface { background: var(--surface); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.empty {
  padding: 56px 24px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  text-align: center;
}

.success-box {
  padding: 34px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}

.success-box__icon { margin-inline: auto; margin-bottom: 14px; color: var(--success); }

.statcards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.statcards--3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.statcard {
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
}

.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.steps__item { display: flex; gap: 12px; align-items: flex-start; }

.steps__no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  background: var(--cmf-kirmizi);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
}

.trust { padding-block: 34px; background: var(--surface); }
.trust__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.trust__item { display: flex; gap: 12px; align-items: flex-start; }

.prose { color: var(--text); font-size: 16px; line-height: 1.78; }
.prose h2, .prose h3, .prose h4 { margin: 26px 0 10px; }
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 21px; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 14px 20px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose img { margin-block: 18px; }
.prose blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--cmf-kirmizi);
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--title);
}

.stars { color: var(--cmf-taba-parlak); letter-spacing: 0.06em; }

/* ==========================================================================
   6) UYUMLULUK KATMANI — FORM ALANLARI
   ========================================================================== */

.field { margin-bottom: 16px; }

.field label,
.filters__title,
.optgroup__title {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--title);
}

/* FORM DENETİMİ YAZI BOYU 16px'İN ALTINA İNMEZ: iOS Safari daha küçük bir
   alana odaklanınca sayfayı ZORLA yakınlaştırır ve kullanıcı geri
   uzaklaştıramaz. */
.field input,
.field select,
.field textarea,
.filters input,
.filters select,
.coupon input,
.checkout input,
.checkout select,
.checkout textarea,
.cmf-alan {
  width: 100%;
  min-height: var(--cmf-dokunma);
  padding: 11px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  transition-property: border-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: var(--ease);
}

.field textarea, .checkout textarea { min-height: 120px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.cmf-alan:focus {
  border-color: var(--cmf-kirmizi);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

.field-error { margin-top: 5px; color: var(--danger); font-size: 13.5px; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

/* Dokunma hedefi SARAN ETİKETTEDİR: yerel onay kutusu 20px kalır (appearance:
   none ile yeniden çizmek yüksek kontrast kipini bozar). */
.check {
  display: flex;
  min-height: var(--cmf-dokunma);
  gap: 10px;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}

.check input { width: 20px; height: 20px; accent-color: var(--cmf-kirmizi); }

.radio-card {
  display: flex;
  min-height: var(--cmf-dokunma);
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}

.radio-card input { width: 20px; height: 20px; accent-color: var(--cmf-kirmizi); }
.radio-card:hover { border-color: var(--cmf-kirmizi); }
.radio-card__price { margin-left: auto; font-weight: 700; color: var(--cmf-kirmizi); }

.qty,
.cmf-adet {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  overflow: hidden;
}

.qty button,
.cmf-adet button {
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  border: 0;
  background: transparent;
  color: var(--title);
  font-size: 18px;
  cursor: pointer;
}

.qty button:hover,
.cmf-adet button:hover { background: var(--surface); }
.qty button:disabled,
.cmf-adet button:disabled { opacity: 0.4; cursor: not-allowed; }

.qty input,
.cmf-adet input {
  width: 62px;
  min-height: var(--cmf-dokunma);
  border: 0;
  border-inline: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--title);
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
}

.qtyrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }

.optgroup { margin-bottom: 18px; }
.optlist { display: flex; flex-wrap: wrap; gap: 8px; }

.optlist label {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
}

.optlist label:hover { border-color: var(--cmf-kirmizi); }
.optlist input { position: absolute; opacity: 0; pointer-events: none; }
.optlist label:has(input:checked) { border-color: var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); }
.optlist label:has(input:focus-visible) { outline: 2px solid var(--cmf-kirmizi); outline-offset: 3px; }

.swatch { width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: var(--pill); }

.coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.coupon input { flex: 1 1 160px; }

/* ==========================================================================
   7) UYUMLULUK KATMANI — TABLO, SAYFALAMA, SAYFA YOLU
   ========================================================================== */

/* TABLOYA `display: block` VERİLMEZ: satır-sütun ilişkisi erişilebilirlik
   ağacından düşer. Dar ekranda kaydırma SARMALAYICIDA yapılır. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}

.datatable,
.kargo-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.datatable th,
.kargo-tablo th {
  background: var(--surface);
  color: var(--title);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 42px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.pagination a:hover { border-color: var(--cmf-kirmizi); color: var(--cmf-kirmizi); text-decoration: none; }
.pagination .is-current { border-color: var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); }
.pagination .is-disabled { color: var(--muted); opacity: 0.6; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  padding-block: 20px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Kısa metinli, TEK BAŞINA duran bağlantı: hedef İKİ YÖNDE de 44px.
   `min-height` tek başına yetmiyor — kardeş temalarda gerçek tarayıcıda
   "Blog" 26x44, "Moda" 36x44 ölçülmüştü. */
.breadcrumb a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.breadcrumb a:hover { color: var(--cmf-kirmizi); }
.breadcrumb [aria-current='page'] { color: var(--title); font-weight: 700; }

/* ==========================================================================
   8) UYUMLULUK KATMANI — ÜRÜN IZGARASI VE ÇEKİRDEK ÜRÜN KARTI
   ==========================================================================
   Bu tema kendi `product-card.blade.php` dosyasını getiriyor, yani `.pcard*`
   sınıfları normalde BASILMAZ. Yine de çiziliyor: sektör modülü ve koleksiyon
   sayfaları kendi kartlarını çekirdek adlarla basabiliyor ve karşılığı olmayan
   bir sınıf orada STİLSİZ kalırdı. */

.pgrid { display: grid; gap: 26px 18px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.pgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.pgrid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.pgrid--5 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.pcard { position: relative; display: flex; flex-direction: column; background: var(--card-bg); }
.pcard__media { position: relative; display: block; overflow: hidden; background: var(--surface); }
.pcard__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pcard__flags { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: grid; gap: 5px; justify-items: start; }

.pcard__fav {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  place-items: center;
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--title);
  cursor: pointer;
}

.pcard__body { display: grid; gap: 5px; padding-block: 12px; }
.pcard__brand { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

.pcard__name {
  display: block;
  min-height: var(--cmf-dokunma);
  color: var(--title);
  font-size: 15px;
  font-weight: 500;
}

.pcard__rating { color: var(--muted); font-size: 13px; }
.pcard__stars { color: var(--cmf-taba-parlak); }
.pcard__price { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.pcard__price strong { color: var(--cmf-kirmizi); font-size: 17px; }
.pcard__price del { font-size: 14px; }
.pcard__foot { display: grid; gap: 8px; margin-top: auto; }
.pcard__stock { font-size: 13px; }

/* ==========================================================================
   9) UYUMLULUK KATMANI — SEPET, ÖZET, ÖDEME, HESAP, LİSTE
   ========================================================================== */

.cartlayout { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.cartlist { display: grid; gap: 0; }

.cartitem {
  display: grid;
  gap: 16px;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  padding-block: 20px;
  border-bottom: 1px solid var(--border);
}

.cartitem__img { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface); }
.cartitem__name { color: var(--title); font-size: 16px; font-weight: 600; }
.cartitem__meta { color: var(--muted); font-size: 13.5px; }
.cartitem__right { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cartitem__total { color: var(--cmf-kirmizi); font-size: 17px; font-weight: 700; }

.summary {
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.summary__row { display: flex; gap: 12px; justify-content: space-between; padding-block: 8px; font-size: 15px; }
.summary__row--total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-strong);
  color: var(--title);
  font-size: 19px;
  font-weight: 700;
}
.summary__note { margin-top: 12px; color: var(--muted); font-size: 13px; }

.checkout { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }

.acclayout { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.accnav { display: grid; gap: 2px; }

.accnav a {
  display: flex;
  min-height: var(--cmf-dokunma);
  align-items: center;
  padding: 10px 14px;
  border-left: 2px solid transparent;
  color: var(--text);
  font-size: 14.5px;
}

.accnav a:hover { background: var(--surface); text-decoration: none; }
.accnav .is-active { border-left-color: var(--cmf-kirmizi); background: var(--surface); color: var(--cmf-kirmizi); font-weight: 700; }
.accnav-logout { margin-top: 10px; }

.addr-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.addr-grid--bosluklu { gap: 22px; }
.addr-grid--genis { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.contact-grid { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }

.listlayout { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.listlayout--tek { grid-template-columns: minmax(0, 1fr); }

.listbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.filters { display: grid; gap: 20px; }
.filters h3 { font-size: 19px; }
.filters__group { display: grid; gap: 8px; }
.filters__list { display: grid; gap: 2px; }

.filters__list a {
  display: flex;
  min-height: var(--cmf-dokunma);
  align-items: center;
  color: var(--text);
  font-size: 14.5px;
}

.filters__list a:hover { color: var(--cmf-kirmizi); }
.filters__list .is-active { color: var(--cmf-kirmizi); font-weight: 700; }

.catgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.catcard {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--title);
  text-align: center;
}

.catcard:hover { border-color: var(--cmf-kirmizi); text-decoration: none; }

/* ==========================================================================
   10) UYUMLULUK KATMANI — ÇEKİRDEK MANŞET, SEKME, YORUM, GALERİ, ÜRÜN BİLGİSİ
   ========================================================================== */

.hero { padding-block: 60px; background: var(--surface); }
.hero__inner { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.hero__badge { display: inline-flex; padding: 5px 12px; border-radius: var(--pill); background: var(--cmf-kirmizi); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.hero__card { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--border); background: var(--card-bg); }
.hero__card-icon { color: var(--cmf-kirmizi); }

.pdetail { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
.pinfo { display: grid; gap: 12px; align-content: start; }
.pinfo h1 { font-size: clamp(26px, 4vw, 38px); }
.pinfo__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 13.5px; }
.pinfo__price { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.pinfo__price strong { color: var(--cmf-kirmizi); font-size: 30px; }
.pinfo__tax { flex: 1 0 100%; color: var(--muted); font-size: 13px; }

.pfeatures { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.pfeatures li { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 14.5px; }
.pfeatures svg { flex: 0 0 auto; color: var(--cmf-taba); }

.gallery__main { overflow: hidden; background: var(--surface); }
.gallery__main img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.gallery__thumb {
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.gallery__thumb img { width: 64px; height: 80px; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--cmf-murekkep); }

.tabs { margin-top: 46px; }
.tabs__nav { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); }

.tabs__btn {
  min-height: var(--cmf-dokunma);
  padding: 10px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tabs__btn.is-active { border-bottom-color: var(--cmf-kirmizi); color: var(--cmf-kirmizi); }
.tabs__panel { display: none; padding-top: 26px; }
.tabs__panel.is-active { display: block; }

.reviews-layout { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.review { padding-block: 18px; border-bottom: 1px solid var(--border); }
.review__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 6px; }
.review__author { color: var(--title); font-weight: 700; }

/* ==========================================================================
   11) UYUMLULUK KATMANI — ÇEKİRDEK BAŞLIK / ALT BİLGİ / MENÜ ADLARI
   ==========================================================================
   Bu tema kendi header ve footer dosyalarını getiriyor; aşağıdaki adlar
   yalnızca çekirdek parçaları hâlâ çağıran bir yüzey kalırsa (kampanya
   önizleme kabuğu, gelecekte eklenecek bir sayfa) stilsiz kalmasın diye
   çiziliyor. */

.topbar { background: var(--cmf-kirmizi); color: var(--white); font-size: 12.5px; }
.topbar__inner { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding-block: 8px; }
.topbar__links { display: flex; flex-wrap: wrap; gap: 14px; }

.topbar__links a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.hdr { border-bottom: 1px solid var(--border); background: var(--card-bg); }
.hdr__inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-block: 16px; }
.hdr__logo { display: flex; gap: 10px; align-items: center; }
.hdr__logo-mark { display: grid; width: 38px; height: 38px; place-items: center; background: var(--cmf-kirmizi); color: var(--white); font-family: var(--font-heading); }
.hdr__logo-text { display: block; font-family: var(--font-heading); font-size: 22px; color: var(--title); letter-spacing: 0.08em; }
.hdr__logo-sub { display: block; color: var(--muted); font-size: 10px; letter-spacing: 0.24em; }
.hdr__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.hdr__action {
  position: relative;
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--title);
  font-size: 13px;
}

.hdr__action-count { display: inline-grid; width: 19px; height: 19px; place-items: center; border-radius: var(--pill); background: var(--cmf-kirmizi); color: var(--white); font-size: 11px; font-weight: 700; }

.hdr__burger {
  display: none;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.search { display: flex; flex: 1 1 260px; gap: 0; max-width: 520px; }
.search input { flex: 1 1 auto; min-height: var(--cmf-dokunma); padding: 10px 14px; border: 1px solid var(--control-border); background: var(--card-bg); font-family: var(--font-body); font-size: 16px; }
.search button { min-height: var(--cmf-dokunma); padding-inline: 20px; border: 1px solid var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.search--mobile { max-width: none; margin-bottom: 12px; }

.catnav { border-top: 1px solid var(--border); background: var(--card-bg); }
.catnav__list { display: flex; flex-wrap: wrap; }
.catnav__item { position: relative; }

.catnav__link {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  color: var(--title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.catnav__link:hover { color: var(--cmf-kirmizi); }
.catnav__sub,
.catnav__mega { display: none; }
.catnav__item:hover .catnav__sub,
.catnav__item:focus-within .catnav__sub { position: absolute; z-index: 30; display: grid; min-width: 220px; padding: 10px; border: 1px solid var(--border); background: var(--card-bg); box-shadow: var(--shadow); }
.catnav__item:hover .catnav__mega,
.catnav__item:focus-within .catnav__mega { position: absolute; z-index: 30; display: block; inset-inline: 0; border: 1px solid var(--border); background: var(--card-bg); box-shadow: var(--shadow); }
.catnav__mega-ic { padding-block: 18px; }
.catnav__mega-baslik { margin-bottom: 10px; font-weight: 700; }
.catnav__mega-kolon { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

.mobmenu { display: none; }
.mobmenu.is-open { display: grid; gap: 2px; padding-block: 14px; }

.mobmenu a,
.mobmenu summary {
  display: flex;
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 15px;
}

.ftr { padding-top: 56px; border-top: 1px solid var(--border); background: var(--surface); }
.ftr__main { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); padding-bottom: 40px; }
.ftr h4 { margin-bottom: 14px; font-size: 12px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.ftr__links { display: grid; gap: 2px; }

.ftr__links a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  color: var(--text);
  font-size: 14px;
}

.ftr__links a:hover { color: var(--cmf-kirmizi); }
.ftr__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ftr__badges li { padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--pill); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ftr__bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; padding-block: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

/* Tema önizleme çubuğu — HER SAYFADA basılabilir, karşılığı olmak ZORUNDA. */
.tema-onizleme {
  position: sticky;
  z-index: 60;
  inset-block-start: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--cmf-kenar);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--cmf-murekkep);
  color: var(--white);
  font-size: 13.5px;
}

.tema-onizleme__metin strong { color: var(--white); }
.tema-onizleme__ayrinti { color: #ddd4cd; }
.tema-onizleme__eylemler { display: flex; flex-wrap: wrap; gap: 8px; }

.tema-onizleme__btn {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--pill);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}

.tema-onizleme__btn--birincil { border-color: var(--cmf-kirmizi); background: var(--cmf-kirmizi); }

/* ==========================================================================
   12) COMFORTE — BAŞLIK (üç katman: kırmızı şerit · şeffaf · yapışkan beyaz)
   ========================================================================== */

/* KATMAN 0: KIRMIZI İNCE ŞERİT — ortada iade hakkı cümlesi. */
.cmf-serit-ust {
  position: relative;
  z-index: 40;
  background: var(--cmf-kirmizi);
  color: var(--white);
}

.cmf-serit-ust__ic {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding-block: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmf-serit-ust__ic a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 | KATMAN 1: HERO FOTOĞRAFININ ÜSTÜNDE ŞEFFAF BAŞLIK.
 |
 | `position: absolute` DEĞİL `sticky` DEĞİL — `fixed` de değil: başlık
 | manşetin ÜSTÜNE biner (`position: absolute` + manşet `position: relative`
 | olurdu) ama o zaman kaydırıldığında kaybolurdu. Çözüm: başlık `sticky`
 | ve manşet başlığın ALTINA `margin-top: calc(-1 * yükseklik)` ile çekiliyor.
 | Sayfa kaydırılınca tema JS'i `is-dolgu` sınıfını ekliyor ve başlık beyaz
 | dolguya dönüyor. JS çalışmasa bile başlık okunur kalır: perde CSS'te.
 */
.cmf-tepe {
  position: sticky;
  z-index: 38;
  inset-block-start: 0;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 240ms;
  transition-timing-function: var(--ease);
}

/*
 | BAŞLIK PERDESİ — beyaz kelime markası ve beyaz ikonlar için ZORUNLU.
 | İki durakta alfa >= 0,70 (plato): platosuz gradyan tepede sıfıra indiği
 | için metnin üst satırı perdesiz kalır. SAF BEYAZ fotoğraf en kötü hâlinde
 | karışım rgb(85,76,75) → beyaz metin 8,33:1.
 */
.cmf-tepe__perde {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(42, 31, 30, 0.80) 0%, rgba(42, 31, 30, 0.74) 62%, rgba(42, 31, 30, 0) 100%);
}

.cmf-tepe__ic {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--cmf-yapiskan);
  padding-block: 12px;
}

/* SOLDA serif kelime markası (beyaz). */
.cmf-marka {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  align-items: center;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}

.cmf-marka:hover { text-decoration: none; }

/* ORTADA yatay menü — KREM KAPSÜL içinde KIRMIZI metin (5,66:1).
   Kapsül bir yama değil: kırmızı metin koyu perde üstünde 1,38:1 veriyor ve
   4,5:1 için gereken parlaklıkta artık kırmızı olmuyor (bkz. dosya başı). */
/*
 | KAPSÜLÜN GENİŞLİĞİ MAĞAZANIN VERİSİNE BAĞLI — ÖLÇÜLDÜ VE SINIRLANDI.
 | Kategori adlarını biz yazmıyoruz; panele "ALTIN VE MÜCEVHER" gibi uzun bir
 | ad girildiğinde kapsül 1032px'e çıktı ve 1024px'lik ekranda SAĞDAKİ SEPET
 | İKONU gövdenin dışına taşıp KIRPILDI (`body { overflow-x: hidden }` yatay
 | kaydırmayı engelliyor, yani ikon erişilemez oluyordu — gerçek tarayıcıda
 | ölçüldü). Üç katmanlı çözüm:
 |   1) kapsül `min-width: 0` ile ızgara hücresinde daralabilir,
 |   2) `overflow-x: auto` ile kapsülün İÇİ kayar; hiçbir menü ögesi
 |      erişilemez olmaz, sayfa gövdesi ise kaymaz,
 |   3) kapsül yalnızca 1100px ve üstünde açılır; altında hamburger menü
 |      devreye girer (aşağıdaki kırılma noktası bloğu).
 */
.cmf-menu {
  display: none;
  gap: 2px;
  align-items: center;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--cmf-krem-acik);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.cmf-menu::-webkit-scrollbar { display: none; }

.cmf-menu__oge {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 11px;
  border-radius: var(--pill);
  color: var(--cmf-kirmizi);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmf-menu__oge:hover { background: var(--cmf-kirmizi); color: var(--white); text-decoration: none; }
.cmf-menu__oge[aria-current='page'] { background: var(--cmf-kirmizi); color: var(--white); }

/* SAĞDA dört ikon (arama / kalp / kullanıcı / çanta). */
.cmf-ikonlar { display: flex; gap: 2px; align-items: center; justify-self: end; }

.cmf-ikon {
  position: relative;
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
}

.cmf-ikon:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; }

.cmf-ikon__sayi {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 2px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: var(--pill);
  background: var(--cmf-kirmizi);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
}

/* KAYDIRILINCA BEYAZ DOLGU. */
.cmf-tepe.is-dolgu .cmf-tepe__perde {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 18px rgba(33, 28, 26, 0.07);
}

.cmf-tepe.is-dolgu .cmf-marka,
.cmf-tepe.is-dolgu .cmf-ikon { color: var(--title); }
.cmf-tepe.is-dolgu .cmf-ikon:hover { background: var(--surface); }
.cmf-tepe.is-dolgu .cmf-menu { background: transparent; }

/*
 | HERO OLMAYAN SAYFALARDA (liste, ürün, sepet…) başlık fotoğraf üstünde
 | DEĞİL. `.cmf-tepe--duz` beyaz dolguyla başlar; beyaz metin kalırsa
 | 1,00:1 olurdu.
 */
.cmf-tepe--duz .cmf-tepe__perde {
  color: var(--title);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.cmf-tepe--duz .cmf-marka,
.cmf-tepe--duz .cmf-ikon { color: var(--title); }
.cmf-tepe--duz .cmf-menu { background: transparent; }

/* Mobil menü açma düğmesi ve panel. */
.cmf-burger {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 17px;
}

.cmf-mobil { display: none; }

.cmf-mobil.is-open {
  display: grid;
  gap: 0;
  padding-bottom: 16px;
  background: var(--card-bg);
}

.cmf-mobil a,
.cmf-mobil summary {
  display: flex;
  min-height: var(--cmf-dokunma);
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--title);
  cursor: pointer;
  font-size: 14.5px;
  letter-spacing: 0.06em;
}

.cmf-mobil details a { padding-left: 16px; color: var(--text); }
.cmf-mobil__arama { display: flex; margin-block: 14px; }
.cmf-mobil__arama input { flex: 1 1 auto; min-height: var(--cmf-dokunma); padding: 10px 14px; border: 1px solid var(--control-border); background: var(--card-bg); font-family: var(--font-body); font-size: 16px; }
.cmf-mobil__arama button { min-height: var(--cmf-dokunma); padding-inline: 18px; border: 1px solid var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* Açılır arama katmanı (sağdaki arama ikonu). */
.cmf-arama-kat { display: none; padding-block: 16px; border-bottom: 1px solid var(--border); background: var(--card-bg); }
.cmf-arama-kat.is-open { display: block; }
.cmf-arama-kat form { display: flex; gap: 0; }
.cmf-arama-kat input { flex: 1 1 auto; min-height: var(--cmf-dokunma); padding: 12px 16px; border: 1px solid var(--control-border); background: var(--card-bg); font-family: var(--font-body); font-size: 16px; }
.cmf-arama-kat button { min-height: var(--cmf-dokunma); padding-inline: 22px; border: 1px solid var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* ==========================================================================
   13) COMFORTE — 1) TAM TAŞAN MANŞET
   ========================================================================== */

.cmf-hero {
  position: relative;
  /* Başlık manşetin ÜSTÜNE biniyor: manşet başlık yüksekliği kadar yukarı
     çekilir ve içerik o kadar aşağıdan başlar. */
  margin-top: calc(-1 * var(--cmf-yapiskan) - 24px);
  background: var(--cmf-murekkep);
}

.cmf-hero__slaytlar { position: relative; }

.cmf-hero__slayt { display: none; }
.cmf-hero__slayt.is-active { display: block; }

.cmf-hero__foto {
  position: relative;
  overflow: hidden;
}

.cmf-hero__foto img {
  width: 100%;
  aspect-ratio: 18 / 11;
  min-height: 420px;
  max-height: 78vh;
  object-fit: cover;
}

/*
 | MANŞET PERDESİ — SOL ALTTAKİ BEYAZ METİN İÇİN ZORUNLU.
 | Duraklar: 0 → 0,72 → 0,88. İki durakta alfa >= 0,70 olduğu için plato var;
 | SAF BEYAZ fotoğraf en kötü hâlinde karışım rgb(68,58,57) → beyaz 10,99:1.
 */
.cmf-hero__ic {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--cmf-kenar);
  padding-bottom: calc(var(--cmf-kenar) + 34px);
  color: #ffffff;
  /*
   | PLATO METNİN TAMAMINI KAPSAMAK ZORUNDA — GERÇEK PİKSELDEN ÖLÇÜLDÜ.
   | İlk yazımda duraklar 0,88 / 0,72 (%38) / 0 (%74) idi ve metin bloğunun
   | EN ÜST satırı (etiket) tabandan ~%50 yükseklikte kalıyordu: orada alfa
   | 0,49'a düşüyor, karışım rgb(150,145,144) oluyordu. Beyaz metin orada
   | 3,11:1, `--muted` etiket ise 1,99:1 veriyordu (tuvale çizilip okunan
   | piksel). Plato %58'e uzatıldı; metnin bulunduğu bandın tamamında alfa
   | 0,72'nin üstünde kalıyor.
   */
  background: linear-gradient(0deg, rgba(42, 31, 30, 0.88) 0%, rgba(42, 31, 30, 0.72) 58%, rgba(42, 31, 30, 0) 92%);
}

.cmf-hero__yazi { max-width: 560px; }

/* Fotoğraf üstündeki etiket `--muted` KALAMAZ: o belirteç AÇIK zeminler
   için ölçülmüştür (beyazda 6,19:1) ve koyu perdede 1,99:1'e düşer. */
.cmf-hero__yazi .cmf-etiket { color: #ffffff; }

.cmf-hero__baslik {
  margin-bottom: 14px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: clamp(30px, 6vw, 62px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.cmf-hero__alt {
  margin-bottom: 22px;
  max-width: 44ch;
  color: #ffffff;
  font-size: 14.5px;
  line-height: 1.66;
}

/* HAP KENARLIKLI düğme — "ALIŞVERİŞE BAŞLA ↗" */
.cmf-hap {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  color: inherit;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  transition-property: background-color, color, border-color;
  transition-duration: 200ms;
  transition-timing-function: var(--ease);
}

.cmf-hap:hover { background: var(--white); border-color: var(--white); color: var(--cmf-murekkep); text-decoration: none; }

/* KOYU HAP — krem zemin üstünde (16,86:1) */
.cmf-hap--koyu { border-color: var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); }
.cmf-hap--koyu:hover { background: var(--cmf-kirmizi); border-color: var(--cmf-kirmizi); color: var(--white); }

/* AÇIK HAP — beyaz/krem zemin üstünde koyu kenarlıklı */
.cmf-hap--cizgi { border-color: var(--control-border); color: var(--title); }
.cmf-hap--cizgi:hover { background: var(--cmf-murekkep); border-color: var(--cmf-murekkep); color: var(--white); }

/* SOL ALTTA CAROUSEL ÇİZGİCİKLERİ — nokta değil, KISA ÇİZGİLER.
   Düğme 44x44 kalır; çizgicik `::before` ile çizilir (görsel 18x2px). */
.cmf-hero__cizgiler {
  position: absolute;
  z-index: 3;
  inset-block-end: calc(var(--cmf-kenar) - 6px);
  inset-inline-start: var(--cmf-kenar);
  display: flex;
  gap: 2px;
  align-items: center;
}

.cmf-cizgicik {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.cmf-cizgicik::before {
  content: '';
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.55);
  transition-property: background-color, width;
  transition-duration: 220ms;
  transition-timing-function: var(--ease);
}

.cmf-cizgicik[aria-current='true']::before { width: 34px; background: #ffffff; }

.cmf-hero__oklar { position: absolute; z-index: 3; inset-block-end: calc(var(--cmf-kenar) - 6px); inset-inline-end: var(--cmf-kenar); display: flex; gap: 4px; }

.cmf-hero__ok {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--pill);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.cmf-hero__ok:hover { background: rgba(255, 255, 255, 0.2); }

.cmf-hero__dur {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--pill);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   14) COMFORTE — ORTALANMIŞ BÖLÜM BAŞLIĞI
   ========================================================================== */

.cmf-bas { padding-block: 62px 26px; text-align: center; }
.cmf-bas__etiket { margin-bottom: 12px; }

.cmf-bas h2 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--title);
}

.cmf-bas__alt { margin-top: 10px; color: var(--muted); font-size: 14.5px; }

/* ==========================================================================
   15) COMFORTE — KENARDAN TAŞAN ÜRÜN KAYDIRICISI (TEMANIN İMZASI)
   ==========================================================================
   Ray SAYFA KABINDAN taşar: kartlar görünüm alanının iki kenarından çıkar ve
   yarım kart görünür. Kaydırma KABIN İÇİNDE olur — `body { overflow-x: hidden }`
   ile birlikte sayfa gövdesi 320..1920 px'te YATAY KAYMAZ (ölçüldü).

   YARIM KART NASIL SAĞLANIYOR — ve niçin böyle:
   Kaydırma kabına `padding-inline: var(--cmf-ray-pad)` (yarım kart) verilir,
   tema JS'i de açılışta `scrollLeft = padding + kart/2` yapar. Sonuç:
     · İLK kartın SOL YARISI kenarda kesilir (imza görünüm),
     · kullanıcı sola kaydırarak ilk kartı TAM görebilir.
   Negatif kenar boşluğuyla kaydırmak daha kısa olurdu ama ilk kart HİÇBİR
   ZAMAN tam görünmezdi: birincil ürün bağlantısının yarısı kalıcı olarak
   erişilemez olurdu. Bu depoda 21px'lik bir birincil ürün bağlantısı zaten
   bulgu olmuştu; aynı hatayı tasarım adına tekrarlamıyoruz.
   JavaScript kapalıyken ray yarım kart dolgusuyla başlar ve TAMAMEN
   kullanılabilir kalır.
   ========================================================================== */

.cmf-ray { position: relative; }

.cmf-ray__pist {
  display: flex;
  gap: var(--cmf-ray-bosluk);
  padding-inline: var(--cmf-ray-pad);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cmf-ray__pist::-webkit-scrollbar { display: none; }

.cmf-ray__oge {
  flex: 0 0 var(--cmf-kart);
  min-width: 0;
  scroll-snap-align: center;
}

/* Ray denetimleri: sol/sağ ok + İNCE İLERLEME ÇİZGİSİ. */
.cmf-ray__denetim {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding-inline: var(--cmf-kenar);
}

.cmf-ray__ok {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  background: transparent;
  color: var(--title);
  cursor: pointer;
}

.cmf-ray__ok:hover { border-color: var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); }
.cmf-ray__ok:disabled { opacity: 0.35; cursor: not-allowed; }

.cmf-ray__ilerleme { position: relative; flex: 1 1 auto; height: 2px; background: var(--border); }
.cmf-ray__ilerleme span { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; width: 22%; background: var(--cmf-murekkep); }

/* ==========================================================================
   16) COMFORTE — ÜRÜN KARTI + "+" DÜĞMESİ + BEDEN BALONU
   ========================================================================== */

.cmf-kart { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--card-bg); }

/*
 | KIRPMA SINIRI FOTOĞRAFIN KENDİSİNDE, MEDYA KABINDA DEĞİL — ÖLÇÜLEN KIRIK.
 | Kap `overflow: hidden` iken 320px'lik ekranda kart ~144px'e düşüyor, beden
 | balonu tek sütuna dizilip ~300px'e uzuyor ve kabın 192px'lik kutusundan
 | TAŞAN kısmı KIRPILIYORDU: altı bedenden dördü görünmez ve tıklanamaz
 | hâlde kalıyordu (gerçek tarayıcıda `elementFromPoint` ile ölçüldü).
 | Kırpma artık fotoğraf bağlantısında; `:hover` yakınlaştırması yine
 | taşmıyor, balon ise kartın dışına açılabiliyor.
 */
.cmf-kart__medya { position: relative; display: block; background: var(--surface); }

/* Fotoğraf bağlantısı. Medya kabı bir <figure> OLMAK ZORUNDA: "+" düğmesi,
   favori düğmesi ve beden balonunun formu bir <a> içine giremez (etkileşimli
   öge iç içe geçemez, tarayıcı ağacı sessizce bozar). Bağlantı bu yüzden kabın
   içinde blok bir öge olarak durur ve fotoğrafın tamamını kaplar. */
.cmf-kart__bag { display: block; overflow: hidden; }

.cmf-kart__medya img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition-property: transform;
  transition-duration: 700ms;
  transition-timing-function: var(--ease);
}

.cmf-kart:hover .cmf-kart__medya img { transform: scale(1.03); }

.cmf-kart__bos { display: grid; aspect-ratio: 3 / 4; place-items: center; color: var(--border-strong); font-family: var(--font-heading); font-size: 40px; }

/* SOL ÜSTTE küçük "SALE" / durum etiketi. */
.cmf-kart__etiketler { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 10px; display: grid; gap: 5px; justify-items: start; }

.cmf-kart__etiket {
  padding: 3px 9px;
  background: var(--cmf-kirmizi);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cmf-kart__etiket--yeni { background: var(--cmf-murekkep); }
.cmf-kart__etiket--tuk { background: var(--muted); }

.cmf-kart__fav {
  position: absolute;
  z-index: 2;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: grid;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  place-items: center;
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--title);
  cursor: pointer;
  font-size: 14px;
}

.cmf-kart__fav:hover { background: var(--white); color: var(--cmf-kirmizi); }

/* FOTOĞRAFIN SAĞ ALTINDA yuvarlak "+" DÜĞMESİ. */
.cmf-kart__ekle {
  position: absolute;
  z-index: 3;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--cmf-murekkep);
  cursor: pointer;
  font-size: 15px;
  transition-property: background-color, color, border-color;
  transition-duration: 180ms;
  transition-timing-function: var(--ease);
}

.cmf-kart__ekle:hover { background: var(--cmf-murekkep); border-color: var(--cmf-murekkep); color: var(--white); }

/*
 | BALON AÇIKKEN "+" DÜĞMESİ PANELİN ÜSTÜNDE KALIR — ÖLÇÜLEN KIRIK.
 | Balonun z-index'i 6, düğmenin 3'tü: panel açılınca düğmenin ORTASINA
 | atılan `elementFromPoint` `.cmf-balon__not` paragrafına düşüyordu, yani
 | `aria-expanded="true"` taşıyan düğme TIKLANAMIYORDU (kapatmanın üçüncü
 | yolu odur; × ve Escape çalışsa da bir düğmenin durumu duyurup tıklanamaz
 | olması yanlıştır). Düğme yükseltildi, alttaki not da düğmenin altında
 | kalmasın diye sağdan boşluk aldı.
 */
.cmf-kart__ekle[aria-expanded='true'] { z-index: 7; background: var(--cmf-kirmizi); border-color: var(--cmf-kirmizi); color: var(--white); }

/* BEDEN BALONU — küçük beyaz kart, fotoğrafın alt kısmına biner. */
.cmf-balon {
  position: absolute;
  z-index: 6;
  inset-block-end: 0;
  inset-inline: 0;
  display: none;
  /* Çok varyantlı bir üründe panel sınırsız uzamasın: 340px'i aşarsa KENDİ
     içinde kayar, hiçbir beden erişilemez olmaz. */
  max-height: 340px;
  overflow-y: auto;
  padding: 16px 16px 18px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.cmf-balon.is-open { display: block; }
.cmf-balon__bas { margin-bottom: 12px; padding-inline-end: 34px; color: var(--title); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.cmf-balon__kapat {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  display: grid;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}

.cmf-balon__kapat:hover { color: var(--cmf-kirmizi); }
.cmf-balon__cipler { display: flex; flex-wrap: wrap; gap: 6px; }

.cmf-balon__cip {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--title);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cmf-balon__cip:hover { border-color: var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); }
.cmf-balon__cip:disabled { border-color: var(--border); color: var(--muted); cursor: not-allowed; text-decoration: line-through; }
/* Sağdaki boşluk, panelin üstünde duran "+" düğmesinin yeri (bkz. yukarıdaki
   z-index notu): metin düğmenin altında kalmaz. */
.cmf-balon__not { margin-top: 10px; padding-inline-end: 52px; color: var(--muted); font-size: 12.5px; }

/* Kart gövdesi: renk noktaları · ad · fiyat. */
.cmf-kart__govde { display: grid; gap: 6px; padding: 14px 2px 4px; }

/* RENK NOKTALARI süs DEĞİL veri: ürünün gerçek renk varyantlarından gelir.
   Nokta bir DÜĞME DEĞİL (tıklanmaz), o yüzden 44px kuralına girmez —
   `width`/`height` ile küçültülür. */
.cmf-kart__renkler { display: flex; gap: 5px; align-items: center; min-height: 18px; }

.cmf-kart__renk { width: 13px; height: 13px; border: 1px solid var(--border-strong); border-radius: var(--pill); }
.cmf-kart__renk-artan { color: var(--muted); font-size: 11px; font-weight: 700; }

.cmf-kart__ad {
  display: block;
  min-height: var(--cmf-dokunma);
  color: var(--title);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}

.cmf-kart__ad:hover { color: var(--cmf-kirmizi); text-decoration: none; }
.cmf-kart__marka { color: var(--muted); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.cmf-kart__fiyat { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cmf-kart__fiyat strong { color: var(--title); font-size: 15px; font-weight: 700; }
.cmf-kart__fiyat del { font-size: 13px; }
.cmf-kart__fiyat .badge { font-size: 10px; }
.cmf-kart__stok { font-size: 12.5px; }
.cmf-kart__ayak { display: grid; gap: 6px; margin-top: auto; padding-top: 8px; }

/* ==========================================================================
   17) COMFORTE — 4) MARKA MANİFESTOSU
   ========================================================================== */

.cmf-manifesto { padding-block: clamp(56px, 9vw, 110px); text-align: center; }
.cmf-manifesto__etiket { margin-bottom: 26px; }

.cmf-manifesto__metin {
  margin-inline: auto;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: clamp(24px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--title);
}

/* MARKA ADI FARKLI RENKTE — altın-taba #a8763e.
   Bu renk beyazda 3,94:1 verir; WCAG 1.4.3'e göre BÜYÜK punto eşiği 3:1
   olduğu için YALNIZCA bu clamp(24px..54px) satırında kullanılır. Küçük
   puntolu taba metin için --accent (#8a5f2c, 5,59:1) vardır. */
.cmf-manifesto__marka { color: var(--cmf-taba-parlak); }
.cmf-manifesto__eylem { margin-top: 34px; }

/* ==========================================================================
   18) COMFORTE — 5) İKİ YARIM PANEL (tam fotoğraf + degrade perde)
   ========================================================================== */

.cmf-ikili { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }

.cmf-ikili__panel { position: relative; display: block; overflow: hidden; background: var(--cmf-murekkep); }
.cmf-ikili__panel img { width: 100%; aspect-ratio: 9 / 11; max-height: 76vh; object-fit: cover; }

/*
 | FOTOĞRAF ÜSTÜ BEYAZ METİN — PLATOLU PERDE ZORUNLU.
 | Duraklar 0 → 0,74 → 0,88; SAF BEYAZ fotoğrafta karışım rgb(68,58,57),
 | beyaz metin 10,99:1.
 */
.cmf-ikili__yazi {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--cmf-kenar);
  color: #ffffff;
  background: linear-gradient(0deg, rgba(42, 31, 30, 0.88) 0%, rgba(42, 31, 30, 0.74) 34%, rgba(42, 31, 30, 0) 68%);
}

.cmf-ikili__baslik { color: #ffffff; font-family: var(--font-heading); font-size: clamp(24px, 3.4vw, 42px); font-weight: 400; letter-spacing: 0.03em; }
.cmf-ikili__alt { margin-bottom: 8px; max-width: 40ch; color: #ffffff; font-size: 14px; }
.cmf-ikili__panel:hover { text-decoration: none; }

/* ==========================================================================
   19) COMFORTE — 6) BEŞ KÜÇÜK KATEGORİ DÖŞEMESİ
   ========================================================================== */

.cmf-dosem { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); padding-bottom: 20px; }

.cmf-dosem__oge { display: grid; gap: 12px; text-align: center; }
.cmf-dosem__oge:hover { text-decoration: none; }
.cmf-dosem__gorsel { position: relative; overflow: hidden; background: var(--surface); }
.cmf-dosem__gorsel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* GÖRSELİ OLMAYAN KATEGORİ: baş harf yer tutucusu. Stok fotoğraf KONMAZ —
   o kategoride olmayan bir ürünü ima ederdi (bkz. img/…/LISANS.md). */
.cmf-dosem__harf {
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  background: var(--cmf-krem);
  color: var(--cmf-taba);
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 46px);
}

.cmf-dosem__ad {
  display: block;
  min-height: var(--cmf-dokunma);
  color: var(--title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cmf-dosem__oge:hover .cmf-dosem__ad { color: var(--cmf-kirmizi); }

/* ==========================================================================
   20) COMFORTE — 7) MAVİ TAM GENİŞLİK PROMO + YEŞİL DAİRE ROZETİ
   ========================================================================== */

.cmf-promo { position: relative; margin-top: 60px; background: var(--cmf-mavi); color: var(--white); overflow: hidden; }
.cmf-promo__ic { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: clamp(38px, 6vw, 72px); }
.cmf-promo__yazi { display: grid; gap: 14px; justify-items: start; }
.cmf-promo__etiket { color: #e7eefa; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.cmf-promo__baslik { color: var(--white); font-family: var(--font-heading); font-size: clamp(24px, 4vw, 44px); font-weight: 400; line-height: 1.14; }
.cmf-promo__alt { max-width: 46ch; color: #eef3fb; font-size: 14.5px; }
.cmf-promo__hap { border-color: var(--white); color: var(--white); }
.cmf-promo__hap:hover { background: var(--white); color: var(--cmf-mavi-koyu); }
.cmf-promo__foto { position: relative; }
.cmf-promo__foto img { width: 100%; aspect-ratio: 1 / 1; max-width: 420px; margin-inline-start: auto; object-fit: cover; }

/*
 | YEŞİL DAİRE ROZETİ — parlak yeşil + KOYU metin.
 | ÖLÇÜLDÜ: #4a9d5f üzerine BEYAZ metin 3,34:1 (AA'nın altında). Yeşili
 | koyultmak yerine rozetin imza rengi korunup üzerine koyu mürekkep
 | basıldı: #211c1a / #4a9d5f = 5,04:1.
 */
.cmf-rozet {
  position: absolute;
  z-index: 3;
  inset-block-start: clamp(-8px, 1vw, 18px);
  inset-inline-end: clamp(4px, 2vw, 30px);
  display: grid;
  width: clamp(84px, 11vw, 116px);
  height: clamp(84px, 11vw, 116px);
  place-items: center;
  border-radius: var(--pill);
  background: var(--cmf-yesil);
  color: var(--cmf-murekkep);
  text-align: center;
  font-size: clamp(10px, 1.1vw, 12.5px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-9deg);
}

/* ==========================================================================
   21) COMFORTE — 9/10) BÖLME VE TERS BÖLME
   ========================================================================== */

.cmf-bolme { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); align-items: stretch; }

.cmf-bolme__yazi {
  display: grid;
  gap: 16px;
  place-content: center;
  justify-items: center;
  padding: clamp(38px, 7vw, 88px) var(--cmf-kenar);
  background: var(--cmf-krem);
  text-align: center;
}

.cmf-bolme__baslik { max-width: 22ch; font-family: var(--font-heading); font-size: clamp(22px, 3.4vw, 38px); font-weight: 400; line-height: 1.2; color: var(--title); }
.cmf-bolme__alt { max-width: 46ch; color: var(--muted); font-size: 14.5px; }
.cmf-bolme__foto { overflow: hidden; background: var(--surface); }
.cmf-bolme__foto img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* ==========================================================================
   22) COMFORTE — 12) YORUM BLOĞU (GERÇEK YORUM YOKSA HİÇ BASILMAZ)
   ========================================================================== */

.cmf-yorum { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); background: var(--card-bg); }
.cmf-yorum__yazi { display: grid; gap: 16px; place-content: center; padding: clamp(38px, 7vw, 88px) var(--cmf-kenar); }
.cmf-yorum__yildiz { color: var(--cmf-taba-parlak); font-size: 17px; letter-spacing: 0.14em; }
.cmf-yorum__alinti { max-width: 30ch; font-family: var(--font-heading); font-size: clamp(20px, 2.8vw, 32px); font-weight: 400; line-height: 1.34; color: var(--title); }
.cmf-yorum__kisi { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.cmf-yorum__oklar { display: flex; gap: 6px; }
.cmf-yorum__foto { overflow: hidden; background: var(--surface); }
.cmf-yorum__foto img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* ==========================================================================
   23) COMFORTE — 13) KAYAN KELİME ŞERİDİ (MARQUEE)
   ==========================================================================
   `prefers-reduced-motion: reduce` altında DURUR (dosyanın sonundaki blok).
   Kayan kopya `aria-hidden="true"`: sonsuz döngü ekran okuyucuya sızmaz.
   ERİŞİLEBİLİR GERÇEK LİSTE ayrıca basılır (.cmf-serit__liste) ve klavyeyle
   gezilebilir; kayan katmanda odaklanabilir öge YOKTUR.
   ========================================================================== */

.cmf-serit { padding-block: 22px; border-block: 1px solid var(--border); background: var(--cmf-krem); overflow: hidden; }
.cmf-serit__pist { display: flex; width: max-content; animation: cmf-kay 34s linear infinite; }
.cmf-serit:hover .cmf-serit__pist,
.cmf-serit.is-durdu .cmf-serit__pist { animation-play-state: paused; }
.cmf-serit__grup { display: flex; flex: 0 0 auto; gap: 0; }

.cmf-serit__kelime {
  display: inline-flex;
  align-items: center;
  padding-inline: 26px;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.6vw, 30px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmf-serit__ayrac { color: var(--cmf-kirmizi); font-size: clamp(16px, 2vw, 22px); }

/* Erişilebilir gerçek liste: görsel olarak sadeleşir, gizlenmez. */
.cmf-serit__liste { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; margin-top: 14px; }

.cmf-serit__liste a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmf-serit__liste a:hover { border-color: var(--cmf-kirmizi); color: var(--cmf-kirmizi); text-decoration: none; }

.cmf-serit__dur { display: flex; justify-content: center; margin-top: 12px; }

@keyframes cmf-kay {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   24) COMFORTE — 14) SOSYAL BÖLÜMÜ · 15) KOYU BÜLTEN BANDI
   ========================================================================== */

.cmf-sosyal { padding-block: clamp(46px, 7vw, 86px); text-align: center; }
.cmf-sosyal__etiket { margin-bottom: 14px; }

.cmf-sosyal__ad {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  align-items: center;
  font-family: var(--font-heading);
  font-size: clamp(26px, 5vw, 58px);
  letter-spacing: 0.02em;
  color: var(--title);
}

.cmf-sosyal__ad:hover { color: var(--cmf-kirmizi); text-decoration: none; }

.cmf-bulten { padding-block: clamp(44px, 6vw, 78px); background: var(--cmf-murekkep); color: var(--cmf-krem); text-align: center; }
.cmf-bulten__baslik { color: var(--cmf-krem); font-family: var(--font-heading); font-size: clamp(22px, 3.4vw, 36px); font-weight: 400; letter-spacing: 0.04em; }
.cmf-bulten__alt { margin: 12px auto 26px; max-width: 52ch; color: #ddd4cd; font-size: 14.5px; }
.cmf-bulten__form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-inline: auto; max-width: 560px; }
.cmf-bulten__form label { flex: 1 1 100%; }

.cmf-bulten__form input {
  flex: 1 1 240px;
  min-height: var(--cmf-dokunma);
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--pill);
  background: transparent;
  color: var(--cmf-krem);
  font-family: var(--font-body);
  font-size: 16px;
}

.cmf-bulten__form input::placeholder { color: #bdb2ab; }

.cmf-bulten__form button {
  min-height: var(--cmf-dokunma);
  padding-inline: 30px;
  border: 1px solid var(--cmf-kirmizi);
  border-radius: var(--pill);
  background: var(--cmf-kirmizi);
  color: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cmf-bulten__form button:hover { background: var(--cmf-kirmizi-koyu); border-color: var(--cmf-kirmizi-koyu); }
.cmf-bulten__durum { margin-top: 14px; color: #ddd4cd; font-size: 13.5px; }

/* ==========================================================================
   25) COMFORTE — 16) ALT BİLGİ (5 KOLON)
   ========================================================================== */

.cmf-alt { padding-top: clamp(40px, 6vw, 70px); background: var(--cmf-krem); }
.cmf-alt__kolonlar { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); padding-bottom: 36px; }
.cmf-alt__marka { display: grid; gap: 14px; align-content: start; }
.cmf-alt__ad { font-family: var(--font-heading); font-size: 24px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--title); }
.cmf-alt__ozet { max-width: 34ch; color: var(--muted); font-size: 14px; }
.cmf-alt__sosyal { display: flex; flex-wrap: wrap; gap: 6px; }

.cmf-alt__sosyal a {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--title);
  font-size: 15px;
}

.cmf-alt__sosyal a:hover { border-color: var(--cmf-kirmizi); color: var(--cmf-kirmizi); }

.cmf-alt__baslik { margin-bottom: 12px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--title); }
.cmf-alt__bag { display: grid; gap: 0; }

.cmf-alt__bag a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  color: var(--text);
  font-size: 13.5px;
}

.cmf-alt__bag a:hover { color: var(--cmf-kirmizi); }

.cmf-alt__dip { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.cmf-alt__secim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmf-alt__secim span { display: inline-flex; min-height: var(--cmf-dokunma); align-items: center; padding-inline: 12px; border: 1px solid var(--border-strong); border-radius: var(--pill); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ==========================================================================
   26) COMFORTE — LİSTE SAYFASI (süzgeç ÜSTTE tek satır)
   ========================================================================== */

.cmf-liste { padding-bottom: 70px; }
.cmf-liste__bas { display: grid; gap: 10px; padding-block: 26px 22px; text-align: center; }
.cmf-liste__bas h1 { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 40px); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; }
.cmf-liste__ozet { color: var(--muted); font-size: 14.5px; }

.cmf-suzgec { margin-bottom: 26px; border-block: 1px solid var(--border); }
.cmf-suzgec__satir { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding-block: 10px; }

.cmf-suzgec__ac {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  gap: 10px;
  align-items: center;
  padding-inline: 4px;
  color: var(--title);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  list-style: none;
}

.cmf-suzgec__ac::-webkit-details-marker { display: none; }

/*
 | SÜZGEÇ FORMU ŞERİDİN SOL HÜCRESİ, SIRALAMA SAĞ HÜCRESİ.
 | <summary> HTML gereği <details>'in İLK ÇOCUĞU olmak zorunda; bu yüzden
 | "aç" düğmesi ile sıralama açılırı aynı ögenin içine konamaz. Şerit bir
 | esnek satırdır: süzgeç formu büyür, sıralama sağ uçta kalır ve açılan gövde
 | formun kendi genişliğinde ikinci satıra iner. `min-width: 0` ZORUNLU —
 | esnek öge varsayılan olarak min-content tabanlıdır ve uzun bir marka adı
 | 320px'te sayfayı yatay kaydırırdı.
 */
.cmf-suzgec__form { flex: 1 1 260px; min-width: 0; }
.cmf-suzgec__govde { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); padding-block: 8px 26px; border-top: 1px solid var(--border); }
.cmf-suzgec__grup { display: grid; gap: 8px; align-content: start; }

.cmf-suzgec__baslik {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--title);
}

/* Kategori bağlantıları: KISA METİN, TEK BAŞINA duruyor → hedef İKİ YÖNDE
   de 44px. `min-height` tek başına yetmiyor (kardeş temalarda "Moda" 36x44
   ölçülmüştü). */
.cmf-suzgec__liste { display: grid; }

.cmf-suzgec__liste a {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  color: var(--text);
  font-size: 14px;
}

.cmf-suzgec__liste a:hover { color: var(--cmf-kirmizi); }
.cmf-suzgec__liste a.is-active { color: var(--cmf-kirmizi); font-weight: 700; }
.cmf-suzgec__grup > label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cmf-suzgec__eylem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cmf-sirala { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmf-sirala label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cmf-sirala select { min-height: var(--cmf-dokunma); padding: 8px 14px; border: 1px solid var(--control-border); border-radius: var(--pill); background: var(--card-bg); font-family: var(--font-body); font-size: 16px; }

.cmf-izgara { display: grid; gap: 34px 18px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.cmf-bos { padding: 64px 24px; border: 1px solid var(--border); background: var(--cmf-krem); text-align: center; }
.cmf-bos h2 { margin-bottom: 10px; font-family: var(--font-heading); font-size: 26px; font-weight: 400; }

/* ==========================================================================
   27) COMFORTE — ÜRÜN SAYFASI
   ==========================================================================
   SOL kolonda büyük fotoğraf ve küçük yatay şerit fotoğrafın ÜSTÜNDE
   (`order` ile — orion şeridi ALTINA, tunga SOLA dikey, vast dikey yığın
   koyuyor). SAĞ kolonda bilgi + HAP biçimli beden çipleri + açılır beden
   tablosu katmanı. */

.cmf-urun { padding-bottom: 70px; }
.cmf-urun__ust { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }

/*
 | IZGARA HÜCRELERİNE `min-width: 0` ZORUNLU — ÖLÇÜLEN KIRIK.
 | Izgara ögesinin varsayılan taban genişliği `auto`, yani MIN-CONTENT'tir:
 | iz `minmax(0, 1fr)` olsa bile öge içeriğinden dar olamaz. Sağ kolona
 | elektronik modülünün taksit TABLOSU (`.table-scroll` içinde) düştüğünde
 | tablonun min-content genişliği kolonu 380px'e itti ve 320px'lik ekranda
 | sayfa 77px yatay kaydı (gerçek tarayıcıda ölçüldü). `min-width: 0` ile
 | kolon daralır, tablo kendi sarmalayıcısında kayar.
 */
.cmf-foto,
.cmf-bilgi { min-width: 0; }

.cmf-foto { display: flex; flex-direction: column; gap: 12px; }

/* ŞERİT FOTOĞRAFIN ÜSTÜNDE. */
.cmf-foto__serit { order: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.cmf-foto__ana { order: 2; overflow: hidden; background: var(--surface); }
.cmf-foto__ana img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.cmf-foto__kucuk {
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.cmf-foto__kucuk img { width: 58px; height: 72px; object-fit: cover; }
.cmf-foto__kucuk.is-active { border-color: var(--cmf-murekkep); }
.cmf-foto__kucuk:hover { border-color: var(--cmf-kirmizi); }

/*
 | TEK KOLON AÇIKÇA `minmax(0, 1fr)` — ÖLÇÜLEN KIRIK.
 | `display: grid` örtük kolonu `auto` boyutlar, yani MIN-CONTENT tabanlıdır:
 | kabın kendisi 288px'e daralsa bile içindeki ögeler 380px'te kalıp taşar
 | (sağ kolona elektronik modülünün taksit tablosu düştüğünde 320px'lik
 | ekranda tam bu oldu). `minmax(0, 1fr)` kolonun sıfıra kadar daralmasına
 | izin verir; tablo kendi `.table-scroll` sarmalayıcısında kayar.
 */
.cmf-bilgi { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-content: start; }

/* Marka bağlantısı TEK BAŞINA duruyor (bir cümlenin içinde akmıyor): hedef
   İKİ YÖNDE de 44px olmak zorunda. Yalnızca yazı boyu verildiğinde gerçek
   tarayıcıda 380x18 ölçüldü — yükseklik dokunma eşiğinin çok altındaydı. */
.cmf-bilgi__marka {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  min-width: var(--cmf-dokunma);
  align-items: center;
  justify-self: start;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cmf-bilgi__marka:hover { color: var(--cmf-kirmizi); }
.cmf-bilgi h1 { font-family: var(--font-heading); font-size: clamp(24px, 3.6vw, 40px); font-weight: 400; line-height: 1.14; }
.cmf-bilgi__kunye { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 13px; }
.cmf-bilgi__fiyat { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.cmf-bilgi__fiyat strong { color: var(--title); font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px); font-weight: 400; }
.cmf-bilgi__kdv { flex: 1 0 100%; color: var(--muted); font-size: 12.5px; }
.cmf-bilgi__ozet { color: var(--text); font-size: 15px; }
.cmf-bilgi__stok { font-size: 13.5px; font-weight: 600; }

/* BEDEN ÇİPLERİ — HAP biçiminde (kutu değil). */
.cmf-beden { display: grid; gap: 10px; }
.cmf-beden__bas { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.cmf-beden__etiket { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--title); }

.cmf-beden__tablo-bag {
  display: inline-flex;
  min-height: var(--cmf-dokunma);
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cmf-beden__tablo-bag:hover { color: var(--cmf-kirmizi); }
.cmf-beden__cipler { display: flex; flex-wrap: wrap; gap: 8px; }

.cmf-beden__cip {
  display: inline-flex;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding-inline: 18px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--title);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.cmf-beden__cip:hover { border-color: var(--cmf-kirmizi); }
.cmf-beden__cip:has(input:checked) { border-color: var(--cmf-murekkep); background: var(--cmf-murekkep); color: var(--white); }
.cmf-beden__cip:has(input:focus-visible) { outline: 2px solid var(--cmf-kirmizi); outline-offset: 3px; }
.cmf-beden__cip input { position: absolute; opacity: 0; pointer-events: none; }
.cmf-beden__not { color: var(--muted); font-size: 13px; }

/* BEDEN TABLOSU — açılır katman (modal). */
.cmf-tablo-kat {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--cmf-kenar);
  background: rgba(33, 28, 26, 0.62);
}

.cmf-tablo-kat.is-open { display: flex; }

.cmf-tablo-kat__kutu {
  width: 100%;
  max-width: 620px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 26px;
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
}

.cmf-tablo-kat__bas { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.cmf-tablo-kat__bas h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 400; }

.cmf-tablo-kat__kapat {
  display: grid;
  min-width: var(--cmf-dokunma);
  min-height: var(--cmf-dokunma);
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}

.cmf-tablo-kat__kapat:hover { color: var(--cmf-kirmizi); }
.cmf-tablo-kat__not { margin-top: 14px; color: var(--muted); font-size: 13.5px; }

/* SATIN ALMA FORMU. Düğme satırı SARILIR: 320px'te "Sepete ekle" ve "Hemen
   satın al" alt alta iner, adet kümesi kendi genişliğini korur. */
/* Aynı gerekçe: örtük `auto` kolon min-content tabanlıdır (bkz. .cmf-bilgi). */
.cmf-satin { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
.cmf-beden { grid-template-columns: minmax(0, 1fr); }
.cmf-satin__satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmf-satin__satir .cmf-hap { flex: 1 1 180px; }

/* Favori + karşılaştırma satırı. */
.cmf-bilgi__eylem { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-top: 4px; }

/* Panelden gelen zengin metin (ürün açıklaması). */
.cmf-metin { color: var(--text); font-size: 15px; line-height: 1.78; }
.cmf-metin > * + * { margin-top: 14px; }
.cmf-metin h2, .cmf-metin h3, .cmf-metin h4 { margin-top: 22px; font-size: 20px; }
.cmf-metin ul, .cmf-metin ol { display: grid; gap: 8px; padding-inline-start: 20px; list-style: disc; }
.cmf-metin ol { list-style: decimal; }
.cmf-metin a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cmf-metin img { margin-block: 14px; }
.cmf-metin blockquote { padding-inline-start: 16px; border-inline-start: 2px solid var(--cmf-kirmizi); color: var(--muted); }

/* Ürün açıklaması ORTALANMIŞ ve DAR (max 720px). */
.cmf-aciklama { padding-block: clamp(44px, 6vw, 80px); }
.cmf-aciklama__bas { margin-bottom: 22px; text-align: center; }
.cmf-aciklama__bas h2 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 30px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.cmf-bakim { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.cmf-bakim h3 { margin-bottom: 14px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--title); }
.cmf-bakim ul { display: grid; gap: 10px; }
.cmf-bakim li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: 14.5px; }
.cmf-bakim li svg,
.cmf-bakim li i { flex: 0 0 auto; margin-top: 3px; color: var(--cmf-taba); }

.cmf-vaat { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.cmf-vaat li { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 14px; }
.cmf-vaat i { color: var(--cmf-taba); }

.cmf-yorumlar { padding-block: clamp(40px, 5vw, 66px); background: var(--cmf-krem); }
.cmf-yorumlar__duzen { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.cmf-yorum-kart { padding-block: 18px; border-bottom: 1px solid var(--border-strong); }
.cmf-yorum-kart__bas { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 6px; }
.cmf-yorum-kart__ad { color: var(--title); font-weight: 700; }

/* ==========================================================================
   28) DUYARLILIK — YALNIZCA ONAYLI KIRILMA NOKTALARI
   ==========================================================================
   Onaylı liste (DuyarlilikTest::KIRILMA_NOKTALARI):
     420 560 640 641 720 900 901 1040 1100
   Mobil öncelikli yazıldı: yukarıdaki kurallar TEK KOLON, aşağıdaki
   `min-width` sorguları kolonları açar.
   ========================================================================== */

/* --- 641px ve üstü: ray 3,5 kart, ikili panel iki kolon --- */
@media (min-width: 641px) {
  :root { --cmf-ray-adet: 3.4; --cmf-ray-bosluk: 6px; }

  .cmf-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmf-yorum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmf-alt__kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartitem { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .cmf-suzgec__govde { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 901px ve üstü: iki kolonlu bölmeler, ray 4,4 kart ---
   ORTADAKİ MENÜ BURADA AÇILMAZ: kategori adları panelden geliyor ve uzun
   adlarla kapsül 1024px'lik ekranda sepet ikonunu kırpıyordu (ölçüldü).
   Menü 1100px bloğunda açılır; altında hamburger devrede kalır. */
@media (min-width: 901px) {
  :root { --cmf-ray-adet: 4.4; }

  .cmf-bolme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmf-promo__ic { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .cmf-urun__ust { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 46px; }
  .cmf-yorumlar__duzen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .pdetail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
  .cartlayout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .acclayout { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmf-suzgec__govde { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 1100px ve üstü: ORTADA MENÜ açılır, alt bilgi 5 KOLON, ray 6 kart --- */
@media (min-width: 1100px) {
  :root { --cmf-ray-adet: 6; --cmf-ray-bosluk: 4px; }

  .cmf-menu { display: flex; }
  .cmf-burger { display: none; }
  .cmf-mobil { display: none; }
  .cmf-mobil.is-open { display: none; }

  /* ORTA HÜCRE `auto` DEĞİL `minmax(0, auto)`: `auto` max-content tabanlıdır
     ve kapsülü ASLA daraltmaz; uzun kategori adlarıyla sağdaki ikonları
     hücreden taşırır (1024px'te ölçülen kırık). */
  .cmf-tepe__ic { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); }

  .cmf-alt__kolonlar { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 34px; }
}

/* --- 900px ve altı: yapışkan başlık daha ince --- */
@media (max-width: 900px) {
  :root { --cmf-yapiskan: 60px; }

  .cmf-hero__foto img { min-height: 380px; }
  .cmf-ikili__panel img { aspect-ratio: 4 / 5; }
}

/* --- 640px ve altı: ray 2,3 kart, ürün ızgarası iki kolon --- */
@media (max-width: 640px) {
  :root { --cmf-ray-adet: 2.3; --cmf-ray-bosluk: 6px; --cmf-ray-pad: 16px; }

  .pgrid, .pgrid--3, .pgrid--4, .pgrid--5,
  .cmf-izgara,
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }

  .cmf-dosem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmf-hero__foto img { min-height: 460px; aspect-ratio: 4 / 5; }
  .cmf-serit__kelime { padding-inline: 16px; }
  .cmf-alt__dip { justify-content: flex-start; }
  .cmf-promo__foto img { margin-inline: auto; }
  .cmf-bolme__foto img { min-height: 260px; }
  .cmf-yorum__foto img { min-height: 260px; }
}

/* --- 420px ve altı: ikon etiketleri ve şerit metni daralır --- */
@media (max-width: 420px) {
  :root { --cmf-ray-adet: 1.85; }

  .cmf-serit-ust__ic { font-size: 11px; letter-spacing: 0.06em; }
  .cmf-hero__oklar { display: none; }
  .cmf-manifesto__metin { max-width: 17ch; }
}

/* --- 560px ve altı: bülten formu tam genişlik --- */
@media (max-width: 560px) {
  .cmf-bulten__form input { flex: 1 1 100%; }
  .cmf-bulten__form button { width: 100%; }
  .cmf-beden__cipler { gap: 6px; }
}

/* --- 720px ve altı: veri tablosu yazı boyu --- */
@media (max-width: 720px) {
  .datatable, .kargo-tablo { font-size: 13.5px; }
  .datatable th, .datatable td, .kargo-tablo th, .kargo-tablo td { padding: 10px; }
}

/* --- 1040px ve üstü: manifesto ve bölüm boşlukları genişler --- */
@media (min-width: 1040px) {
  .cmf-manifesto__metin { max-width: 26ch; }
  .cmf-bolme__foto img { min-height: 520px; }
}

/* --- Yatay mod / kısa ekran: manşet ekranı doldurmasın --- */
@media (max-height: 480px) {
  .cmf-hero__foto img { min-height: 300px; max-height: 100vh; }
  .cmf-tepe__ic { min-height: 52px; padding-block: 6px; }
}

/* ==========================================================================
   29) HAREKETİ AZALT — WCAG 2.3.3
   ==========================================================================
   Vestibüler rahatsızlığı olan kullanıcı için hareket kapatılabilir olmak
   zorundadır. Süreleri sıfırlamak YETMEZ: kayan kelime şeridi (`animation`),
   yumuşak kaydırma (`scroll-behavior`) ve kaydırma yakalaması (`scroll-snap`)
   da harekettir.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  /* KAYAN KELİME ŞERİDİ TAMAMEN DURUR ve başa sarılı kalır. */
  .cmf-serit__pist { animation: none; transform: none; }
  .cmf-ray__pist { scroll-behavior: auto; scroll-snap-type: none; }
  .cmf-kart:hover .cmf-kart__medya img { transform: none; }
}

/* ==========================================================================
   30) BASKI — mürekkep tasarrufu ve okunur çıktı
   ========================================================================== */

@media print {
  .cmf-serit-ust,
  .cmf-tepe,
  .cmf-serit,
  .cmf-bulten,
  .cmf-ray__denetim,
  .cmf-hero__oklar,
  .cmf-hero__cizgiler,
  .tema-onizleme { display: none; }

  body { color: #000000; background: #ffffff; }
}


/* ==========================================================================
   REKLAM YUVASI — COMFORTE DİLİNDE
   ==========================================================================
   TABAN BU DOSYADA DEĞİL: `public/css/reklam.css` (R1 kolu) `.reklam`,
   `.reklam__etiket`, `.reklam__birim` ve `.reklam--bos` kurallarını
   tanımlar; yer ayırma (`--reklam-yer`), asgari mesafe tabanı (24px) ve
   dolmayan yuvanın çöküşü ORADADIR ve BURADA TEKRARLANMAZ. Bu bölüm
   yalnızca temanın kendi ritmini ve kendi tipografisini uygular.

   O dosya reklam basılacaksa `@stack('head')` üzerinden yükleniyor; bu
   temanın düzeni `@stack('head')` taşıdığı için taban kurallar burada da
   geçerli. (Tema `css/shop.css` yüklemez, ama `reklam.css` yaprak bir
   dosyadır ve sıfırlama içermez — iki sıfırlama üst üste binmez.)

   KART GÖRÜNÜMÜ VERİLMEZ — BİLEREK: zemin, çerçeve, gölge ve yuvarlatma
   bir arada reklamı ÜRÜN KARTINA benzetir; bu AdSense'in ayrı bir
   yasağıdır ve mağaza sahibinin hesabını kapattırır. Temalar birbirinden
   ZEMİNLE değil, BOŞLUK RİTMİ · AYIRICI ÇİZGİ · ETİKET TİPOGRAFİSİ ve
   ÖLÇÜ ile ayrışır.

   SABİT GENİŞLİK YOK: yalnızca `max-width` kullanılır. Duyarlılık kapısı
   9 genişlikte (320·360·390·414·768·1024·1280·1440·1920) yatay kaydırmayı
   SIFIR ölçüyor; sabit bir genişlik ya da `min-width: <px>` o kapıyı
   düşürürdü.

   GEÇİŞ KISAYOLU `all` DEĞERİYLE YAZILMAZ (depo kuralı; DuyarlilikTest
   `transition` bildirimini `all` ile arayıp düşürür — bu satır ilk
   yazımda kuralı ANLATIRKEN kalıbı da içerdiği için kapı 13 dosyada
   birden düştü, ÖLÇÜLDÜ). Bu bölümde hiç geçiş bildirimi yok.
   ========================================================================== */

/*
 * COMFORTE — EDİTORYAL DAR SÜTUN.
 *
 * Temanın karakteri "krem kâğıt üstünde dar sütun ve kenardan taşan
 * kaydırıcılar". Yuva TAŞMAZ ve GENİŞLEMEZ: manifesto metniyle aynı dar
 * ölçüye (720px) oturur ve ortalanır. Kardeş temaların tam genişlik
 * bandından ayrıştığı yer burası.
 *
 * `max-width` kullanılır, `width` DEĞİL: dar ekranda kap zaten daha
 * dardır ve yuva onu aşmaz (yatay kaydırma kapısı).
 */
[data-tema='comforte'] .reklam {
  --reklam-bosluk: 56px;

  max-width: 720px;
  margin-inline: auto;
}

[data-tema='comforte'] .reklam--kenar-cubugu {
  --reklam-bosluk: 32px;

  max-width: none;
}

/* Üstte tek saç teli çizgi: temanın bölüm ayırıcısıyla aynı dil. */
[data-tema='comforte'] .reklam {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

[data-tema='comforte'] .reklam__etiket {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
  opacity: 1;
  text-align: center;
}

/* Çöken yuvada çizgi ve iç boşluk da gider (boş kutu kalmasın). */
[data-tema='comforte'] .reklam--bos {
  border-top-width: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  [data-tema='comforte'] .reklam {
    --reklam-bosluk: 40px;
  }
}