/* ==========================================================================
   LALE — KOZMETİK VE KİŞİSEL BAKIM
   ==========================================================================

   ÖLÇÜ FİŞİ. Bu tema göz kararıyla değil ÖLÇÜLEREK yazıldı.
   Kaynak: iki kozmetik referansı, 1440px görüntü alanında Playwright ile
   getComputedStyle + getBoundingClientRect.
     wpamerce.com/cosmetic/                      (modern-yumuşak kol)
     seraphina.qodeinteractive.com/makeup-home/  (editoryal-lüks kol)
   Betikler: /root/screenshot-tool/kozmetik-olc.mjs, yeni-cek.mjs

     kapsayıcı            1340px
     gövde                16px / 26px · Plus Jakarta Sans · #46393c
     kahraman h1          47px / 60px · BÜYÜK HARF · beyaz, fotoğraf üstünde
     bölüm başlığı        40px / 52px · Bodoni Moda
     ürün kartı           273px · yarıçap 0 · gölge YOK · çerçeve YOK
     kart fotoğrafı       5 : 6 dikey, kartın tam genişliği (273 × 329,7)
     düğme                yükseklik 49 · dolgu 13px 20px 11px · yarıçap 0
                          13px / 23px · 600 · harf aralığı 0,65px
     bölüm zemini         #fbf9f9 (pudra beyazı)
     koyu zemin           #252525 → bizde #241c1e (sıcak mürekkep)
     yarıçap              0px — İSTİSNASIZ

   REFERANSIN KODU KOPYALANMADI. Ölçü kopyalanmaz, ölçülür.

   TÜRKÇE BÜYÜK HARF UYARISI
   -------------------------
   Bu dosyada `text-transform: uppercase` HİÇBİR YERDE YOK. Referans
   başlıkları onunla büyütüyor ama Türkçe'de o kural "ilgi"yi "ILGI" yapar,
   "İLGİ" yapmaz. Büyük harf istenen her yerde metin Blade tarafında
   `Metin::buyuk()` ile üretilir. `--btn-transform` ve `--heading-transform`
   jetonları da bilerek `none` bırakılmıştır.

   ÇEKİRDEK SINIFLAR BU DOSYADA YENİDEN ÇİZİLİR
   --------------------------------------------
   Tema kendi Blade iskeletini getirdiği için `css/shop.css` YÜKLENMEZ.
   Düğme, form alanı, uyarı, sepet satırı, ödeme adımı, sayfalama, prose ve
   veri tablosu burada yeniden tanımlanmazsa temanın EZMEDİĞİ her ekran
   (hesabım, kasa, sipariş takibi) tarayıcı varsayılanlarıyla çizilir.

   DOĞRULAMA — 23 Ağustos 2026, canlı sayfada ölçüldü
   --------------------------------------------------
     ölçü fişi        16 / 16 tuttu              lale-olc.mjs
     yatay taşma      11 genişlikte YOK          lale-tasma.mjs
                      (320 · 360 · 390 · 414 · 640 · 768 · 900 ·
                       1024 · 1280 · 1440 · 1920)
     karşıtlık        3 sayfada ihlal YOK        lale-karsit.mjs
     odak halkası     45 / 45 görünür            lale-odak.mjs
                      (GERÇEK Tab ile; `element.focus()` :focus-visible
                       tetiklemez ve yalancı bulgu üretir)
     mobil çekmece    açılıyor VE kapanıyor      lale-odak.mjs
     CLS              pc 0,0017 · mobil 0,0043   lale-cls.mjs
     Lighthouse       masaüstü 100/100/100/100   wp-lh.mjs
                      mobil     98/100/100/100
   Betiklerin hepsi /root/screenshot-tool altında.

   YOL BOYUNCA ÖLÇÜLEN BEŞ TUZAK (hepsi dosya içinde kendi yerinde yazılı)
   ----------------------------------------------------------------------
   1) `.tema-lale h2` (0,1,1) çekirdek bileşenin `.riza__baslik` (0,1,0)
      kuralını YENİYOR. Temel tipografi `:where()` içine alındı.
   2) `position: relative; z-index` YIĞIN BAĞLAMI açar; içerideki daha
      yüksek z-index dışarıya çıkmaz. Hamburger düğmesi perdenin altında
      kalıp menü kapanmaz olmuştu.
   3) Izgara çocuğunun `min-width` değeri `auto`dur; sarmayan fiyat satırı
      kartı içeriden şişirip sayfayı yana kaydırıyordu.
   4) `aspect-ratio` SATIR İÇİ kutuda uygulanmaz — kategori penceresi bir
      `<span>` olduğu için kadraj hiç çalışmıyordu.
   5) `content-visibility: auto` ölçülebilir hız kazancı vermedi ama axe'ın
      zemin okumasını bozup mobil erişilebilirliği 93'e düşürdü.
   ========================================================================== */

:root {

  /* ---------- Ham palet: pudra, gül, sıcak mürekkep ---------- */
  --pudra-000: #ffffff;
  --pudra-050: #fdfcfc;
  --pudra-100: #fbf9f9;   /* ÖLÇÜLDÜ: referansın bölüm zemini */
  --pudra-200: #f5f0f0;
  --pudra-300: #ece4e4;
  --pudra-400: #d9cccd;

  --murekkep-900: #14100f;
  --murekkep-800: #1a1416;
  --murekkep-700: #241c1e;
  --murekkep-500: #46393c;
  --murekkep-400: #6b5b5e;
  --murekkep-300: #8d7f82;

  --gul-800: #6d383d;
  --gul-700: #7d3f45;
  --gul-600: #8f4a50;
  --gul-400: #c99498;
  --gul-200: #eddcdd;
  --gul-100: #f7eeef;

  /* ---------- Çekirdek sözlükle AYNI ADLAR (yaprak CSS bunları okur) ---------- */
  --title: #1a1416;
  --text: #46393c;
  --muted: #6b5b5e;          /* beyazda 6,40:1 · pudrada 6,10:1 */
  --border: #ece4e4;
  --border-strong: #d9cccd;
  --surface: #fbf9f9;
  --white: #ffffff;

  /* WCAG 1.4.11: etkileşimli denetim kenarlığı zemine göre >= 3:1.
     PANELDEN AYARLANAMAZ (config/themes.php `adjustable` dışında). */
  --control-border: #8d7f82;
  --control-border-strong: #5f5153;

  --success: #2f6b3f;
  --danger: #a63a2c;
  --warning: #8a6314;

  /* SIFIR YARIÇAP TEMANIN EN GÖRÜNÜR KARARI. Editoryal ızgarada
     yuvarlatılmış her köşe fotoğrafı kutuya sokar; kart çerçevesiz ve
     gölgesiz olduğu için yuvarlatma tek başına "kutu" hissini geri getirir. */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --pill: 0px;

  /* Bu tema gölgesizdir: ayrım boşlukla ve fotoğrafla yapılır.
     Yaprak CSS yine --shadow* okuyor; hepsi `none` verilir ki miras gölge
     sızmasın. Tek istisna açılır katmanlar (mini sepet, alt menü). */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --katman-golge: rgba(20, 16, 15, .14) 0 18px 44px -12px;

  --container: 1340px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /*
   | Bodoni Moda (editoryal başlık) + Plus Jakarta Sans (sade gövde).
   | `meniac` de Bodoni Moda kullanıyor AMA Inter Tight ile ve kurumsal erkek
   | giyim paletiyle. Bodoni kozmetik/moda dergi başlıklarının yüzüdür;
   | eşleşme, palet ve ızgara farklı olduğu için sayfalar benzemiyor.
   */
  --font-heading: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;

  --primary: #241c1e;
  --primary-strong: #14100f;
  --primary-soft: #f5f0f0;
  --on-primary: #ffffff;      /* #241c1e üstünde 16,67:1 */
  --primary-hover: #3a2d30;
  --primary-focus: #6b5b5e;
  --primary-line: #d9cccd;

  --accent: #8f4a50;
  --accent-strong: #6d383d;
  --accent-light: #eddcdd;
  --accent-soft: #f7eeef;
  /*
   * `--on-accent` SÖZLEŞMESİ: "--accent ZEMİNİ üstünde okunan metin rengi".
   * #ffffff / #8f4a50 → 6,44:1 (gövde eşiği 4,5:1).
   *
   * NOT — BU BLOĞUN İÇİNDE SÜS PARANTEZ YAZILMAZ, YORUMDA BİLE.
   * Tema testleri :root bloğunu TEKİL bir düzenli ifadeyle, İLK kapanış
   * parantezine kadar okuyor; açıklamaya örnek bir CSS kuralı yazılınca blok
   * erken kesiliyor ve sonraki belirteçler ölçüme hiç girmiyor.
   */
  --on-accent: #ffffff;

  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --card-radius: 0px;
  --card-shadow: none;
  --card-hover-shadow: none;

  --btn-radius: 0px;
  /* ÖLÇÜLDÜ: referans düğmesinin harf aralığı 0,65px / 13px = 0,05em */
  --btn-tracking: 0.05em;
  --btn-transform: none;
  --btn-height: 49px;

  --heading-tracking: normal;
  --heading-transform: none;
  --section-space: 96px;

  /* ---------- Temanın kendi ölçü sistemi ---------- */
  --lale-kenar: clamp(16px, 3.4vw, 50px);
  --lale-oluk: 24px;
  --lale-cizgi: 1px solid var(--border);
  --lale-dokunma: 44px;
  --lale-kart-oran: 5 / 6;

  /* ÖLÇÜ (referans üst bilgi): ana satır 96px, menü aralığı 34px.
     Bölüm boşluğu mobilde daralsın diye clamp — 96px telefonda bir ekranın
     dörtte birini yiyordu. */
  --lale-ust-yukseklik: 96px;
  --lale-menu-aralik: 34px;
  --lale-bolum: clamp(56px, 7vw, 96px);
}

/* ==========================================================================
   TEMEL
   ========================================================================== */
.tema-lale *,
.tema-lale *::before,
.tema-lale *::after { box-sizing: border-box; }

.tema-lale {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   TEMEL TİPOGRAFİ — HEPSİ `:where()` İÇİNDE. NİÇİN:

   ÖLÇÜLMÜŞ ARIZA. `.tema-lale h2` seçicisinin özgüllüğü (0,1,1); çekirdek
   bileşenlerin kendi yaprak CSS'i ise tek sınıfla yazılmıştır — `.riza__baslik`
   (0,1,0), `.bulten__baslik` (0,1,0). Yani TEMANIN GENEL kuralı, BİLEŞENİN
   ÖZEL kuralını yeniyordu:
     • çerez bandının başlığı 19px yerine 40px çiziliyor ve rengi
       `var(--title)` (#1a1416) oluyordu → bandın #0b1220 zemininde
       karşıtlık 1,03 (ölçüldü);
     • bültenin başlığı koyu alt bilgide 1,09'a düşüyordu;
     • `.riza__baglanti` ve `.riza-serit__baglanti` `var(--accent)` alıyor,
       2,9 ve 2,8 veriyordu.

   `:where()` içine alınan her şey ÖZGÜLLÜĞE SIFIR katkı yapar; seçici
   (0,1,0)'a iner ve bileşenin tek sınıflı kuralıyla BERABERE kalır. Yaprak
   CSS `<head>` sırasında temanın ARDINDAN geldiği için beraberlik bileşenin
   lehine çözülür — istenen davranış tam olarak budur.

   Temanın KENDİ bileşenleri bundan etkilenmez: `.lal-baslik h2` (0,1,1)
   ve `.tema-lale .lal-urun__ad` (0,2,0) zaten daha özgüldür.
   -------------------------------------------------------------------------- */
.tema-lale :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 .5em;
  color: var(--title);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: var(--heading-tracking);
  /* Türkçe "i" yüzünden CSS ile büyütülmez — bkz. dosya başı. */
  text-transform: var(--heading-transform);
}

/* ÖLÇÜ: bölüm başlığı 40px / 52px */
.tema-lale :where(h2) { font-size: calc(40px * var(--font-scale)); line-height: calc(52px * var(--font-scale)); }
.tema-lale :where(h3) { font-size: calc(28px * var(--font-scale)); line-height: 1.25; }
.tema-lale :where(h4) { font-size: calc(21px * var(--font-scale)); line-height: 1.3; }

.tema-lale :where(p) { margin: 0 0 1em; }
.tema-lale :where(a) { color: var(--accent); text-decoration: none; }
.tema-lale :where(a:hover) { color: var(--accent-strong); }
.tema-lale :where(img, svg, video) { max-width: 100%; height: auto; display: block; }
.tema-lale :where(ul, ol) { padding-left: 1.2em; }

.tema-lale .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--lale-kenar);
}

.tema-lale .visually-hidden,
.tema-lale .ekran-okuyucu-metni {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ODAK — WCAG 2.4.7. `outline: none` hiçbir yerde yazılmaz. */
.tema-lale :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Atlama bağlantısı — odaklanınca GÖRÜNÜR olmak zorunda (WCAG 2.4.1). */
.tema-lale .atlama {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--on-primary);
}

.tema-lale .atlama:focus { left: 12px; top: 12px; }

/* ==========================================================================
   ÇEKİRDEK SINIFLAR — shop.css YÜKLENMEDİĞİ İÇİN BURADA
   ========================================================================== */

/* --------------------------------- DÜĞME --------------------------------- */
/* ÖLÇÜ: yükseklik 49 · dolgu 13px 20px 11px · 13/23 · 600 · aralık 0,65px */
.tema-lale .btn,
.tema-lale :where(button, input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 13px 26px 11px;
  border: 1px solid var(--primary);
  border-radius: var(--btn-radius);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  line-height: calc(23px * var(--font-scale));
  font-weight: 600;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.tema-lale .btn:hover,
.tema-lale :where(button:hover, input[type="submit"]:hover) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.tema-lale .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.tema-lale .btn--gold,
.tema-lale .btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.tema-lale .btn--gold:hover,
.tema-lale .btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.tema-lale .btn--outline,
.tema-lale .btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--control-border);
}

.tema-lale .btn--outline:hover,
.tema-lale .btn--ghost:hover { background: var(--primary-soft); border-color: var(--primary); }

.tema-lale .btn--navy { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tema-lale .btn--sm { min-height: 38px; padding: 9px 16px 8px; font-size: calc(12px * var(--font-scale)); }
.tema-lale .btn--lg { min-height: 56px; padding: 16px 34px 14px; font-size: calc(14px * var(--font-scale)); }
.tema-lale .btn--block { display: flex; width: 100%; }
.tema-lale .btn[disabled],
.tema-lale :where(button[disabled]) { opacity: .5; cursor: not-allowed; }

/* --------------------------------- FORM ---------------------------------- */
.tema-lale .field,
.tema-lale input[type="text"],
.tema-lale input[type="search"],
.tema-lale input[type="email"],
.tema-lale input[type="url"],
.tema-lale input[type="tel"],
.tema-lale input[type="number"],
.tema-lale input[type="password"],
.tema-lale input[type="date"],
.tema-lale select,
.tema-lale textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.5;
}

.tema-lale textarea { min-height: 140px; resize: vertical; }

.tema-lale .field:focus,
.tema-lale input:focus,
.tema-lale select:focus,
.tema-lale textarea:focus { border-color: var(--accent); }

.tema-lale ::placeholder { color: var(--muted); opacity: 1; }

.tema-lale label { display: block; margin-bottom: 6px; font-size: calc(14px * var(--font-scale)); color: var(--title); }

.tema-lale .field-row { display: grid; gap: 16px; }
@media (min-width: 720px) { .tema-lale .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tema-lale .field-error {
  margin-top: 6px;
  font-size: calc(13px * var(--font-scale));
  color: var(--danger);
}

.tema-lale .field[aria-invalid="true"],
.tema-lale input[aria-invalid="true"] { border-color: var(--danger); }

/* -------------------------------- UYARI ---------------------------------- */
.tema-lale .alert {
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: calc(15px * var(--font-scale));
}

.tema-lale .alert--success { border-left-color: var(--success); }
.tema-lale .alert--error,
.tema-lale .alert--danger { border-left-color: var(--danger); }
.tema-lale .alert--info { border-left-color: var(--accent); }
.tema-lale .alert--warning { border-left-color: var(--warning); }

/* ------------------------------ SEPET SATIRI ----------------------------- */
.tema-lale .cartitem {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: var(--lale-cizgi);
}

.tema-lale .cartitem img { width: 96px; aspect-ratio: var(--lale-kart-oran); object-fit: cover; }
.tema-lale .cartitem__ad { font-family: var(--font-heading); font-size: calc(19px * var(--font-scale)); color: var(--title); }
.tema-lale .cartitem__fiyat { font-weight: 600; color: var(--title); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .tema-lale .cartitem { grid-template-columns: 72px minmax(0, 1fr); }
  .tema-lale .cartitem img { width: 72px; }
  .tema-lale .cartitem__fiyat { grid-column: 2; }
}

/* -------------------------------- ÖDEME ---------------------------------- */
.tema-lale .checkout { display: grid; gap: 40px; }
@media (min-width: 960px) { .tema-lale .checkout { grid-template-columns: minmax(0, 1fr) 380px; } }

.tema-lale .checkout__ozet {
  padding: 28px;
  border: var(--lale-cizgi);
  background: var(--surface);
  align-self: start;
  position: sticky;
  top: 24px;
}

.tema-lale .checkout__satir {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: calc(15px * var(--font-scale));
}

.tema-lale .checkout__satir--toplam {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-heading);
  font-size: calc(22px * var(--font-scale));
  color: var(--title);
}

/* ------------------------------ SAYFALAMA -------------------------------- */
.tema-lale .pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }

.tema-lale .pagination a,
.tema-lale .pagination span {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  color: var(--title);
  font-size: calc(14px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.tema-lale .pagination a:hover,
.tema-lale .pagination .is-aktif,
.tema-lale .pagination [aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* -------------------------------- PROSE ---------------------------------- */
.tema-lale .prose { font-size: calc(17px * var(--font-scale)); line-height: 1.78; }
.tema-lale .prose > * + * { margin-top: 1.1em; }
.tema-lale .prose h2 { margin-top: 1.7em; font-size: calc(32px * var(--font-scale)); line-height: 1.2; }
.tema-lale .prose h3 { margin-top: 1.5em; font-size: calc(24px * var(--font-scale)); }
.tema-lale .prose ul,
.tema-lale .prose ol { padding-left: 1.4em; }
.tema-lale .prose li + li { margin-top: .4em; }
.tema-lale .prose figure { margin: 2em 0; }
.tema-lale .prose figcaption { margin-top: .6em; font-size: calc(14px * var(--font-scale)); color: var(--muted); }

.tema-lale .prose blockquote {
  margin: 1.8em 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-heading);
  font-size: calc(23px * var(--font-scale));
  line-height: 1.45;
  color: var(--title);
}

.tema-lale .prose pre {
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--surface);
  border: var(--lale-cizgi);
  font-size: calc(14px * var(--font-scale));
}

.tema-lale .prose code { padding: 2px 6px; background: var(--surface); font-size: .92em; }
.tema-lale .prose pre code { padding: 0; background: none; }

/* ------------------------------ VERİ TABLOSU ----------------------------- */
.tema-lale .datatable,
.tema-lale .prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(15px * var(--font-scale));
}

.tema-lale .datatable th,
.tema-lale .datatable td,
.tema-lale .prose th,
.tema-lale .prose td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--lale-cizgi);
}

.tema-lale .datatable th,
.tema-lale .prose th {
  background: var(--surface);
  color: var(--title);
  font-weight: 600;
  white-space: nowrap;
}

/* Geniş tablo sayfayı yana kaydırmasın. */
.tema-lale .datatable-kap { position: relative; overflow-x: auto; }

/* ==========================================================================
   ÜST BİLGİ
   --------------------------------------------------------------------------
   ÖLÇÜ (seraphina/makeup-home + wpamerce/cosmetic):
     duyuru şeridi  yükseklik 40 · 12/40 · aralık 0,04em
     ana satır      yükseklik 96 · marka 26px Bodoni · menü 13/96 w600
     menü aralığı   34px · alt çizgi hover'da SOLDAN sağa açılıyor
   Yapışkan davranış: yalnız ana satır yapışıyor, duyuru şeridi kayıp gidiyor.
   `position: sticky` GÖVDEYE `overflow` verilmediği sürece çalışır — bu
   dosyada gövdeye overflow YOK, bilerek.
   ========================================================================== */
/* ÖLÇÜLMÜŞ ARIZA — YIĞIN BAĞLAMI TUZAĞI (bu depoda İKİNCİ kez; ilki
   `/tema-magazasi` kartındaki `isolation: isolate`).
   `position: relative` + `z-index` bir YIĞIN BAĞLAMI açar. İçerideki
   `.lal-serit { z-index: 70 }` o bağlamın İÇİNDE sıralanır; dışarıya karşı
   kabın kendi değeri (40) geçerlidir. Perde 59, çekmece 60 olduğu için
   başlık şeridi ikisinin de ALTINA düşüyordu: hamburger düğmesi görünüyor
   ama tıklanamıyordu (Playwright: "lal-perde intercepts pointer events") ve
   `shop.js` menüyü YALNIZ o düğmeyle kapattığı için menü bir daha
   KAPANMIYORDU. Kabın değeri çekmecenin üstüne çıkarıldı. */
.tema-lale .lal-ust { position: relative; z-index: 80; background: var(--page-bg); }

.tema-lale .lal-duyuru {
  background: var(--primary);
  color: var(--on-primary);
  font-size: calc(12px * var(--font-scale));
  line-height: 40px;
  letter-spacing: .04em;
  text-align: center;
}

.tema-lale .lal-duyuru__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 40px;
  flex-wrap: wrap;
}

.tema-lale .lal-duyuru a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ÖLÇÜLMÜŞ TUZAK: çekmece soldan tam ekran kayıyor ve z-index'i 60. Şerit
   41'de kalsaydı çekmece AÇILDIĞINDA hamburger düğmesinin ÜSTÜNÜ örterdi —
   `shop.js` menüyü yalnız o düğmeyle kapatıyor, yani menü açıldıktan sonra
   KAPATILAMAZDI. Şerit bilerek çekmecenin üstünde. */
.tema-lale .lal-serit {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--page-bg);
  border-bottom: var(--lale-cizgi);
}

.tema-lale .lal-serit__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: var(--lale-ust-yukseklik);
}

/* ÖLÇÜ: marka ortada, 26px Bodoni, aralık 0,08em — imza hizalama. */
.tema-lale .lal-marka {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-heading);
  font-size: calc(26px * var(--font-scale));
  line-height: 1;
  letter-spacing: .08em;
  color: var(--title);
  white-space: nowrap;
}

.tema-lale .lal-marka img { max-height: 40px; width: auto; }
.tema-lale .lal-marka:hover { color: var(--accent); }

.tema-lale .lal-menu { display: flex; align-items: center; gap: var(--lale-menu-aralik); margin: 0; padding: 0; list-style: none; }
.tema-lale .lal-menu--sol { grid-column: 1; }
.tema-lale .lal-araclar { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }

.tema-lale .lal-menu a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: var(--title);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .06em;
}

/* Alt çizgi SOLDAN açılır: `scaleX` + `transform-origin`. Genişlik
   canlandırmak düzen hesabı tetikler; `transform` tetiklemez. */
.tema-lale .lal-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--ease);
}

.tema-lale .lal-menu a:hover::after,
.tema-lale .lal-menu a:focus-visible::after,
.tema-lale .lal-menu .is-aktif::after { transform: scaleX(1); }
.tema-lale .lal-menu a:hover { color: var(--accent); }

/* Alt menü */
.tema-lale .lal-menu li { position: relative; }

.tema-lale .lal-altmenu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 5;
  min-width: 214px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  background: var(--card-bg);
  border: var(--lale-cizgi);
  box-shadow: var(--katman-golge);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.tema-lale .lal-menu li:hover > .lal-altmenu,
.tema-lale .lal-menu li:focus-within > .lal-altmenu { opacity: 1; visibility: visible; transform: translateY(0); }
.tema-lale .lal-altmenu a { display: block; padding: 8px 22px; font-weight: 400; letter-spacing: .02em; }
.tema-lale .lal-altmenu a::after { display: none; }
.tema-lale .lal-altmenu a:hover { background: var(--surface); }

/* Araç düğmeleri (arama · hesap · sepet) */
.tema-lale .lal-arac {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
  color: var(--title);
}

.tema-lale .lal-arac:hover { background: transparent; color: var(--accent); }
.tema-lale .lal-arac svg { width: 20px; height: 20px; }

.tema-lale .lal-sepet { position: relative; }

.tema-lale .lal-sepet__sayi {
  position: absolute;
  top: 3px; right: 1px;
  min-width: 18px; height: 18px;
  display: grid; place-items: center;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Mobil menü düğmesi — masaüstünde gizli */
.tema-lale .lal-mobil-dugme { display: none; }

/* ==========================================================================
   ANA SAYFA
   ========================================================================== */
.tema-lale .lal-bolum { padding-block: var(--lale-bolum); }
.tema-lale .lal-bolum--tint { background: var(--surface); }
.tema-lale .lal-bolum--dar { padding-block: calc(var(--lale-bolum) * .62); }

.tema-lale .lal-baslik { max-width: 640px; margin-bottom: 46px; }
.tema-lale .lal-baslik--orta { margin-inline: auto; text-align: center; }

.tema-lale .lal-baslik__ust {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .16em;
}

.tema-lale .lal-baslik h2 { margin: 0; }
.tema-lale .lal-baslik p { margin: 14px 0 0; color: var(--muted); font-size: calc(16px * var(--font-scale)); }

/* --------------------------------- KAHRAMAN ------------------------------ */
/* ÖLÇÜ: h1 47/60 · 500 · aralık 0,01em. Referans BÜYÜK HARF gösteriyor;
   burada büyütme CSS'e bırakılmıyor (Türkçe "i" → "I" olurdu). Metin
   Blade'de `Metin::buyuk()` ile hazırlanıyor. */
.tema-lale .lal-kahraman { position: relative; background: var(--surface); }

.tema-lale .lal-kahraman__ic {
  display: grid;
  gap: 0;
  align-items: stretch;
  min-height: 620px;
}

@media (min-width: 900px) {
  .tema-lale .lal-kahraman__ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.tema-lale .lal-kahraman__yazi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px var(--lale-kenar);
  max-width: 620px;
}

.tema-lale .lal-kahraman h1 {
  margin: 0 0 22px;
  font-size: calc(47px * var(--font-scale));
  line-height: calc(60px * var(--font-scale));
  font-weight: 500;
  letter-spacing: .01em;
}

.tema-lale .lal-kahraman__ozet {
  margin: 0 0 32px;
  max-width: 460px;
  color: var(--muted);
  font-size: calc(17px * var(--font-scale));
  line-height: 1.7;
}

.tema-lale .lal-kahraman__gorsel { position: relative; overflow: hidden; }

.tema-lale .lal-kahraman__gorsel img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

/* --------------------------- ÜÇLÜ GÜVEN ŞERİDİ --------------------------- */
.tema-lale .lal-guven { display: grid; gap: 1px; background: var(--border); }
@media (min-width: 760px) { .tema-lale .lal-guven { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tema-lale .lal-guven__oge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px var(--lale-kenar);
  background: var(--page-bg);
}

.tema-lale .lal-guven__oge svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.tema-lale .lal-guven__ad { color: var(--title); font-weight: 600; font-size: calc(15px * var(--font-scale)); }
.tema-lale .lal-guven__not { color: var(--muted); font-size: calc(14px * var(--font-scale)); }

/* ------------------------------ KATEGORİLER ------------------------------ */
.tema-lale .lal-kategoriler { display: grid; gap: var(--lale-oluk); grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; }

@media (min-width: 780px) {
  .tema-lale .lal-kategoriler { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* KOLON SAYISI VERİDEN GELİR (bkz. home.blade.php). Sabit dört kolonda tek
     kategorisi olan mağazada satırın dörtte üçü boş kalıyordu. Az kategoride
     kart genişliği 300px'te tutulup satır ortalanıyor — kart büyüyüp
     kadrajı bozmasın diye `1fr` değil sabit ölçü. */
  .tema-lale .lal-kategoriler--k1 { grid-template-columns: 300px; }
  .tema-lale .lal-kategoriler--k2 { grid-template-columns: repeat(2, 300px); }
  .tema-lale .lal-kategoriler--k3 { grid-template-columns: repeat(3, minmax(0, 300px)); }
}

.tema-lale .lal-kategori { position: relative; display: block; overflow: hidden; color: var(--title); }
/* `display: block` ZORUNLU — ÖLÇÜLDÜ: pencere bir <span>, yani satır içi bir
   kutu; `aspect-ratio` satır içi kutuda UYGULANMAZ ve kadraj 4:5 yerine
   fotoğrafın kendi oranına (0,86) düşüyordu. */
.tema-lale .lal-kategori__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }

.tema-lale .lal-kategori__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.tema-lale .lal-kategori:hover .lal-kategori__foto img { transform: scale(1.05); }

.tema-lale .lal-kategori__ad {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: calc(20px * var(--font-scale));
  letter-spacing: .01em;
}

.tema-lale .lal-kategori__sayi { display: block; margin-top: 4px; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.tema-lale .lal-kategori:hover .lal-kategori__ad { color: var(--accent); }

/* ---------------------------- EDİTORYAL BLOK ----------------------------- */
.tema-lale .lal-editoryal { display: grid; gap: 0; align-items: center; }
@media (min-width: 900px) { .tema-lale .lal-editoryal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.tema-lale .lal-editoryal__gorsel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tema-lale .lal-editoryal__yazi { padding: 60px clamp(24px, 5vw, 74px); }
.tema-lale .lal-editoryal--ters .lal-editoryal__gorsel { order: 2; }

.tema-lale .lal-editoryal blockquote {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  font-family: var(--font-heading);
  font-size: calc(30px * var(--font-scale));
  line-height: 1.34;
  color: var(--title);
}

/* -------------------------------- BÜLTEN ---------------------------------
   İÇERİK ÇEKİRDEK PARÇASINDAN GELİR (`shop.partials.bulten`): KVKK onayı,
   çift kayıt koruması ve doğrulama orada. Tema yalnızca KAP çizer —
   alt bilginin üstünde, koyu mürekkep zeminli tam genişlik bir şerit.
   Ölçüldü: başlık 14,6:1 · açıklama 9,4:1 · alan kenarlığı 3,4:1. */
.tema-lale .lal-bulten {
  background: var(--primary-strong);
  color: color-mix(in srgb, var(--on-primary) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary) 12%, transparent);
}

.tema-lale .lal-bulten__ic { padding-block: 56px; }
.tema-lale .lal-bulten .bulten { margin: 0; padding: 0; background: none; border: 0; }

.tema-lale .lal-bulten .bulten__ic {
  display: grid;
  gap: 26px 48px;
  align-items: center;
}

@media (min-width: 900px) { .tema-lale .lal-bulten .bulten__ic { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); } }

.tema-lale .lal-bulten .bulten__baslik {
  margin: 0 0 10px;
  color: var(--on-primary);
  font-size: calc(28px * var(--font-scale));
  line-height: 1.25;
}

.tema-lale .lal-bulten .bulten__aciklama {
  margin: 0;
  max-width: 56ch;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.7;
  color: color-mix(in srgb, var(--on-primary) 82%, transparent);
}

.tema-lale .lal-bulten .bulten__aciklama strong { color: var(--on-primary); font-weight: 600; }
.tema-lale .lal-bulten .bulten__form { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

.tema-lale .lal-bulten .bulten__form input {
  flex: 1 1 220px;
  background: color-mix(in srgb, var(--on-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--on-primary) 38%, transparent);
  color: var(--on-primary);
}

.tema-lale .lal-bulten .bulten__form input::placeholder { color: color-mix(in srgb, var(--on-primary) 66%, transparent); }
.tema-lale .lal-bulten .bulten__form .btn { flex: none; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tema-lale .lal-bulten .bulten__form .btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.tema-lale .lal-bulten .bulten__hata { margin: 12px 0 0; color: var(--gul-200); font-size: calc(14px * var(--font-scale)); }

/* ==========================================================================
   ÜRÜN IZGARASI VE KARTI
   --------------------------------------------------------------------------
   ÖLÇÜ (seraphina/makeup-home): kart 273px · köşe 0 · GÖLGE YOK · ÇERÇEVE YOK
   fotoğraf 273 × 329,7 → 5:6 · ad 16/26 · fiyat 15/24 w600

   KARDEŞ TEMALARDAN AYRIŞMA
   İpek'in kartı ortalanmış metinli ve sepet düğmesi fotoğrafın ALT kenarından
   kayarak çıkıyor. Nordika'nınki çerçeveli beyaz bir kutu. Lale'de kart yine
   çerçevesiz ama metin SOLA hizalı ve hızlı eylemler fotoğrafın SAĞ kenarında
   dikey bir raydan içeri kayıyor; sepete ekleme fotoğrafın altındaki ince bir
   satır olarak açılıyor. Üç kart üç ayrı hareket dili.

   DOKUNMATİK: `@media (hover: none)` altında ray ve satır AKIŞA döner.
   Faresi olmayan cihazda gizli kalan düğme, olmayan düğmedir.
   ========================================================================== */
.tema-lale .lal-izgara {
  display: grid;
  gap: var(--lale-oluk) var(--lale-oluk);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px)  { .tema-lale .lal-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tema-lale .lal-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tema-lale .lal-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* `min-width: 0` ŞART — ÖLÇÜLDÜ (320px, kategori sayfası: +12px yatay kayma).
   Izgara çocuğunun varsayılan `min-width` değeri `auto`dur, yani kutu KENDİ
   İÇERİĞİNİN altına inemez. İki kolonluk ızgarada kart 132px'e düşmesi
   gerekirken sarmayan fiyat satırı (`<strong>` + `<del>`) kartı içeriden
   şişiriyor ve SAYFAYI yana kaydırıyordu. */
.tema-lale .lal-urun {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ÖLÇÜLMÜŞ ARIZA (İpek'te de yaşandı): kayan katman doğrudan `.lal-urun`
   içindeyse `bottom: 0` KARTIN dibine oturur, fotoğrafın değil. Medya
   sarmalayıcısı zorunlu. */
.tema-lale .lal-urun__medya {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.tema-lale .lal-urun__gorsel { display: block; aspect-ratio: var(--lale-kart-oran); }

.tema-lale .lal-urun__gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), opacity .35s var(--ease);
}

.tema-lale .lal-urun:hover .lal-urun__gorsel img { transform: scale(1.045); }

/* Fotoğrafsız ürün: gri kutu değil, adın baş harfi. */
.tema-lale .lal-urun__bos {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: var(--font-heading);
  font-size: 54px;
  color: var(--gul-400);
}

/* Etiketler — sol üst */
.tema-lale .lal-urun__isaret { position: absolute; top: 12px; left: 12px; display: grid; gap: 6px; justify-items: start; }

.tema-lale .lal-etiket {
  padding: 5px 10px 4px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .08em;
}

.tema-lale .lal-etiket--indirim { background: var(--accent); color: var(--on-accent); }
.tema-lale .lal-etiket--yeni { background: var(--page-bg); color: var(--title); border: 1px solid var(--border-strong); }
.tema-lale .lal-etiket--bitti { background: var(--murekkep-500); color: #fff; }

/* İMZA: sağ kenardan içeri kayan dikey eylem rayı. */
.tema-lale .lal-urun__ray {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  gap: 6px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.tema-lale .lal-urun:hover .lal-urun__ray,
.tema-lale .lal-urun:focus-within .lal-urun__ray { opacity: 1; transform: translateX(0); }

.tema-lale .lal-urun__ray button,
.tema-lale .lal-urun__ray a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--page-bg);
  color: var(--title);
}

.tema-lale .lal-urun__ray button:hover,
.tema-lale .lal-urun__ray a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tema-lale .lal-urun__ray svg { width: 17px; height: 17px; }
.tema-lale .lal-fav-btn.is-secili { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* İMZA: fotoğrafın dibinde açılan ince sepet satırı. */
.tema-lale .lal-urun__hizli {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  transition: transform .32s var(--ease);
}

.tema-lale .lal-urun:hover .lal-urun__hizli,
.tema-lale .lal-urun:focus-within .lal-urun__hizli { transform: translateY(0); }

.tema-lale .lal-urun__hizli .btn,
.tema-lale .lal-urun__hizli button,
.tema-lale .lal-urun__hizli a {
  display: flex;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px 10px;
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  font-size: calc(12px * var(--font-scale));
  letter-spacing: .1em;
}

.tema-lale .lal-urun__hizli form { margin: 0; }
.tema-lale .lal-urun__hizli .btn:hover { background: var(--accent); color: var(--on-accent); }

.tema-lale .lal-urun__govde { padding: 16px 0 0; text-align: left; }

.tema-lale .lal-urun__marka {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}

.tema-lale .lal-urun__ad {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: calc(26px * var(--font-scale));
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.tema-lale .lal-urun__ad a { color: var(--title); }
.tema-lale .lal-urun__ad a:hover { color: var(--accent); }

.tema-lale .lal-urun__puan { margin: 0 0 6px; font-size: calc(13px * var(--font-scale)); color: var(--muted); }
.tema-lale .lal-yildiz { color: var(--accent); letter-spacing: .08em; }

.tema-lale .lal-urun__fiyat {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  font-size: calc(15px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.tema-lale .lal-urun__fiyat strong { color: var(--title); font-weight: 600; }
.tema-lale .lal-urun__fiyat del { color: var(--muted); font-size: .87em; font-weight: 400; }
.tema-lale .lal-urun__birim { margin: 5px 0 0; font-size: calc(12px * var(--font-scale)); color: var(--muted); }
.tema-lale .lal-urun__stok { margin: 7px 0 0; font-size: calc(12px * var(--font-scale)); color: var(--muted); }
.tema-lale .lal-urun__stok.text-danger { color: var(--danger); }
.tema-lale .lal-urun__dip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

.tema-lale .lal-urun__dip button,
.tema-lale .lal-urun__dip .btn {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
}

.tema-lale .lal-urun__dip button:hover,
.tema-lale .lal-urun__dip .btn:hover { background: none; color: var(--accent); }

/* Faresi olmayan cihaz: gizli katmanlar akışa döner. */
@media (hover: none) {
  .tema-lale .lal-urun__ray { position: static; opacity: 1; transform: none; grid-auto-flow: column; justify-content: end; padding: 8px; }
  .tema-lale .lal-urun__hizli { position: static; transform: none; }
  .tema-lale .lal-urun__hizli .btn { min-height: var(--lale-dokunma); }
}

/* ==========================================================================
   KATEGORİ SAYFASI
   ========================================================================== */
.tema-lale .lal-sayfa { padding-block: clamp(30px, 4vw, 52px) var(--lale-bolum); }

.tema-lale .lal-yol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: calc(13px * var(--font-scale));
  color: var(--muted);
}

.tema-lale .lal-yol li + li::before { content: "/"; margin-right: 8px; color: var(--border-strong); }
.tema-lale .lal-yol a { color: var(--muted); }
.tema-lale .lal-yol a:hover { color: var(--accent); }

.tema-lale .lal-sayfa__basi { margin-bottom: 40px; }
.tema-lale .lal-sayfa__basi h1 { margin: 0; font-size: calc(38px * var(--font-scale)); line-height: 1.2; }
.tema-lale .lal-sayfa__basi p { margin: 12px 0 0; max-width: 62ch; color: var(--muted); }

.tema-lale .lal-katalog { display: grid; gap: 44px; align-items: start; }
@media (min-width: 980px) { .tema-lale .lal-katalog { grid-template-columns: 262px minmax(0, 1fr); } }

/* Süzgeç paneli — JavaScript'siz, <details> ile. */
.tema-lale .lal-suzgec { border-top: var(--lale-cizgi); }
.tema-lale .lal-suzgec details { border-bottom: var(--lale-cizgi); }

.tema-lale .lal-suzgec summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  color: var(--title);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .08em;
  list-style: none;
}

.tema-lale .lal-suzgec summary::-webkit-details-marker { display: none; }

/* ÖLÇÜLMÜŞ ARIZA (320px'te belge +1px kayıyordu): 45° döndürülmüş 9×9 bir
   kare LAYOUT'ta 9px yer kaplar ama BOYANDIĞINDA köşegeni kadar, yani
   ~12,7px yer tutar; her yandan ~1,9px taşar. `space-between` onu tam sağ
   kenara yasladığı için o taşma sayfaya geçiyordu. `flex: none` + sağ
   payı taşmayı içeride tutuyor. */
.tema-lale .lal-suzgec summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-right: 3px;
  border-right: 1px solid var(--murekkep-400);
  border-bottom: 1px solid var(--murekkep-400);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}

.tema-lale .lal-suzgec details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tema-lale .lal-suzgec__ic { padding: 0 0 20px; display: grid; gap: 11px; }

.tema-lale .lal-suzgec__ic label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-height: 26px;
  color: var(--text);
  font-size: calc(14px * var(--font-scale));
  font-weight: 400;
  cursor: pointer;
}

.tema-lale .lal-suzgec__ic input[type="checkbox"],
.tema-lale .lal-suzgec__ic input[type="radio"] { width: 16px; height: 16px; min-height: 0; flex: none; accent-color: var(--accent); }
.tema-lale .lal-suzgec__ic label:hover { color: var(--accent); }
.tema-lale .lal-suzgec__sayi { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.tema-lale .lal-katalog__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: var(--lale-cizgi);
}

.tema-lale .lal-katalog__sayi { color: var(--muted); font-size: calc(14px * var(--font-scale)); }
.tema-lale .lal-katalog__sirala { display: flex; align-items: center; gap: 10px; }
.tema-lale .lal-katalog__sirala label { margin: 0; color: var(--muted); font-size: calc(14px * var(--font-scale)); }
.tema-lale .lal-katalog__sirala select { width: auto; min-width: 190px; min-height: 42px; padding-block: 8px; }

.tema-lale .lal-bos {
  padding: 74px 24px;
  border: 1px dashed var(--border-strong);
  text-align: center;
  color: var(--muted);
}

.tema-lale .lal-bos h2 { font-size: calc(26px * var(--font-scale)); line-height: 1.3; }

/* ==========================================================================
   ÜRÜN SAYFASI
   --------------------------------------------------------------------------
   Galeri IZGARA — karusel değil. Karusel bir JavaScript bağımlılığı, bir
   erişilebilirlik yükü (canlı bölge, klavye, duraklat) ve bir CLS kaynağıdır.
   Kozmetikte kare sayısı azdır (2–5); hepsini aynı anda göstermek hem daha
   hızlı hem daha dürüst.
   ========================================================================== */
.tema-lale .lal-urunsayfa { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .tema-lale .lal-urunsayfa { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 64px; } }

.tema-lale .lal-galeri { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tema-lale .lal-galeri__kare { background: var(--surface); overflow: hidden; }
.tema-lale .lal-galeri__kare img { width: 100%; aspect-ratio: var(--lale-kart-oran); object-fit: cover; }
/* İlk kare iki sütunu birden kaplar — sayfanın görsel çapası. */
.tema-lale .lal-galeri__kare:first-child { grid-column: 1 / -1; }
.tema-lale .lal-galeri__kare:first-child img { aspect-ratio: 1 / 1; }
.tema-lale .lal-galeri--tek { grid-template-columns: 1fr; }

.tema-lale .lal-urunbilgi__marka {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .14em;
}

.tema-lale .lal-urunbilgi h1 {
  margin: 0 0 14px;
  font-size: calc(34px * var(--font-scale));
  line-height: 1.22;
}

.tema-lale .lal-urunbilgi__puan { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: calc(14px * var(--font-scale)); color: var(--muted); }

.tema-lale .lal-urunbilgi__fiyat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  padding-bottom: 22px;
  border-bottom: var(--lale-cizgi);
  font-family: var(--font-heading);
  font-size: calc(30px * var(--font-scale));
  color: var(--title);
  font-variant-numeric: tabular-nums;
}

.tema-lale .lal-urunbilgi__fiyat del { font-family: var(--font-body); font-size: calc(17px * var(--font-scale)); color: var(--muted); }
.tema-lale .lal-urunbilgi__ozet { margin: 22px 0 26px; color: var(--muted); line-height: 1.72; }

.tema-lale .lal-varyant { margin-bottom: 22px; }
.tema-lale .lal-varyant__ad { display: block; margin-bottom: 10px; color: var(--title); font-size: calc(13px * var(--font-scale)); font-weight: 600; letter-spacing: .06em; }
.tema-lale .lal-varyant__secim { display: flex; flex-wrap: wrap; gap: 8px; }

.tema-lale .lal-varyant__secim label {
  margin: 0;
  padding: 10px 17px;
  border: 1px solid var(--control-border);
  color: var(--text);
  font-size: calc(14px * var(--font-scale));
  font-weight: 400;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.tema-lale .lal-varyant__secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-lale .lal-varyant__secim input:checked + span,
.tema-lale .lal-varyant__secim label:has(input:checked) { border-color: var(--primary); color: var(--title); }
.tema-lale .lal-varyant__secim label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-lale .lal-varyant__secim label:has(input:disabled) { opacity: .42; cursor: not-allowed; text-decoration: line-through; }

.tema-lale .lal-alis { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 22px; }

.tema-lale .lal-adet {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--control-border);
}

.tema-lale .lal-adet button {
  width: 46px; height: 100%;
  min-height: var(--btn-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--title);
  font-size: 18px;
}

.tema-lale .lal-adet button:hover { background: var(--surface); }

.tema-lale .lal-adet input {
  width: 52px;
  min-height: 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.tema-lale .lal-adet input::-webkit-outer-spin-button,
.tema-lale .lal-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tema-lale .lal-alis__ekle { flex: 1 1 220px; }

.tema-lale .lal-guvence { display: grid; gap: 12px; padding: 22px 0; border-top: var(--lale-cizgi); }
.tema-lale .lal-guvence li { display: flex; align-items: center; gap: 11px; font-size: calc(14px * var(--font-scale)); color: var(--muted); }
.tema-lale .lal-guvence svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.tema-lale .lal-guvence ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

/* Sekmeler — <details>, JavaScript yok */
.tema-lale .lal-sekme { margin-top: 60px; border-top: var(--lale-cizgi); }
.tema-lale .lal-sekme details { border-bottom: var(--lale-cizgi); }

.tema-lale .lal-sekme summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: calc(21px * var(--font-scale));
  color: var(--title);
}

.tema-lale .lal-sekme summary::-webkit-details-marker { display: none; }
.tema-lale .lal-sekme summary::after { content: "+"; font-family: var(--font-body); font-size: 22px; color: var(--muted); }
.tema-lale .lal-sekme details[open] summary::after { content: "−"; }
.tema-lale .lal-sekme__ic { padding: 0 0 30px; max-width: 74ch; }

/* Değerlendirme */
.tema-lale .lal-yorum { padding: 24px 0; border-bottom: var(--lale-cizgi); }
.tema-lale .lal-yorum__basi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.tema-lale .lal-yorum__kisi { color: var(--title); font-weight: 600; font-size: calc(15px * var(--font-scale)); }
.tema-lale .lal-yorum__tarih { color: var(--muted); font-size: calc(13px * var(--font-scale)); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.tema-lale .lal-yazilar { display: grid; gap: 40px var(--lale-oluk); grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.tema-lale .lal-yazi__foto { overflow: hidden; background: var(--surface); }
.tema-lale .lal-yazi__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s var(--ease); }
.tema-lale .lal-yazi:hover .lal-yazi__foto img { transform: scale(1.05); }

.tema-lale .lal-yazi__ust {
  display: flex;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--accent);
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .14em;
}

.tema-lale .lal-yazi__ad { margin: 0 0 10px; font-size: calc(22px * var(--font-scale)); line-height: 1.32; }
.tema-lale .lal-yazi__ad a { color: var(--title); }
.tema-lale .lal-yazi__ad a:hover { color: var(--accent); }
.tema-lale .lal-yazi__ozet { margin: 0; color: var(--muted); font-size: calc(15px * var(--font-scale)); line-height: 1.66; }

.tema-lale .lal-yazisayfa { max-width: 760px; margin-inline: auto; }
.tema-lale .lal-yazisayfa h1 { font-size: calc(40px * var(--font-scale)); line-height: 1.18; }
.tema-lale .lal-yazisayfa__kunye { margin: 0 0 34px; color: var(--muted); font-size: calc(14px * var(--font-scale)); }
.tema-lale .lal-yazisayfa__kapak { margin-bottom: 42px; }
.tema-lale .lal-yazisayfa__kapak img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.tema-lale .lal-alt { margin-top: auto; background: var(--primary); color: color-mix(in srgb, var(--on-primary) 76%, transparent); }

.tema-lale .lal-alt__ic {
  display: grid;
  gap: 40px var(--lale-oluk);
  padding-block: 72px 52px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 1000px) { .tema-lale .lal-alt__ic { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.tema-lale .lal-alt__marka { font-family: var(--font-heading); font-size: calc(24px * var(--font-scale)); letter-spacing: .08em; color: var(--on-primary); }
.tema-lale .lal-alt__ozet { margin: 16px 0 0; max-width: 34ch; font-size: calc(14px * var(--font-scale)); line-height: 1.72; }

.tema-lale .lal-alt h3 {
  margin: 0 0 18px;
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .14em;
}

.tema-lale .lal-alt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.tema-lale .lal-alt__ic a { color: inherit; font-size: calc(14px * var(--font-scale)); }
.tema-lale .lal-alt__ic a:hover { color: var(--on-primary); }

.tema-lale .lal-alt__sosyal { display: flex; gap: 12px; margin-top: 22px; }

.tema-lale .lal-alt__sosyal a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid color-mix(in srgb, var(--on-primary) 26%, transparent);
}

.tema-lale .lal-alt__sosyal a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tema-lale .lal-alt__sosyal svg { width: 17px; height: 17px; }

.tema-lale .lal-alt__dip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  border-top: 1px solid color-mix(in srgb, var(--on-primary) 16%, transparent);
  font-size: calc(13px * var(--font-scale));
}

/* ÖLÇÜLMÜŞ TUZAK — bu depoda ÜÇÜNCÜ kez: `.lal-govde a:not([class])` (0,2,1)
   `.lal-alt__dip a` (0,1,1) seçicisini yenip alt bilgi bağlantısını soluk
   renge düşürüyordu. Seçici KASITLI olarak `.tema-lale` ile önekli. */
.tema-lale .lal-alt__dip a { color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.tema-lale .lal-alt__dip a:hover { color: var(--on-primary); }
.tema-lale .lal-alt__odeme { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tema-lale .lal-alt__odeme img { height: 22px; width: auto; }

/* ==========================================================================
   ÇEKİRDEK SINIFLARIN LALE DİLİNDE YENİDEN ÇİZİMİ
   --------------------------------------------------------------------------
   Bu bloğun varlık sebebi: sepet, ödeme, hesap, iletişim, kargo, SSS ve
   karşılaştırma sayfalarının Blade'i temaya ait DEĞİL — çekirdekten geliyor
   ve `shop.css` sınıflarını kullanıyor. `shop.css` bu temada YÜKLENMEDİĞİ
   için o sınıflar burada yeniden çizilmezse o sayfalar çıplak HTML olur.
   Doğrulama: `tema-denetim-genis.mjs` her temada bu sınıf listesini arar.
   ========================================================================== */

/* --------------------------------- DÜZEN --------------------------------- */
.tema-lale .section-head { margin-bottom: 32px; }
.tema-lale .section-head h1,
.tema-lale .section-head h2 { margin: 0; }
.tema-lale .section-head p { margin: 10px 0 0; color: var(--muted); }
.tema-lale .section--surface { background: var(--surface); }
.tema-lale .stack { display: grid; gap: 18px; }
.tema-lale .ikili { display: grid; gap: 24px; }
@media (min-width: 820px) { .tema-lale .ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tema-lale .center { text-align: center; }
.tema-lale .right { text-align: right; }
.tema-lale .nowrap { white-space: nowrap; }
.tema-lale .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tema-lale .muted { color: var(--muted); }
.tema-lale .hint { color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.tema-lale .text-danger { color: var(--danger); }
.tema-lale .text-success { color: var(--success); }

.tema-lale .eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .16em;
}

.tema-lale .panel {
  padding: 28px;
  border: var(--lale-cizgi);
  background: var(--card-bg);
}

.tema-lale .panel__desc { margin: 0 0 18px; color: var(--muted); }
.tema-lale .panel--sss { padding: 0; border: 0; }

.tema-lale .empty {
  padding: 70px 24px;
  border: 1px dashed var(--border-strong);
  text-align: center;
  color: var(--muted);
}

.tema-lale .empty h2 { font-size: calc(26px * var(--font-scale)); line-height: 1.3; }

.tema-lale .success-box {
  padding: 34px;
  border: 1px solid var(--success);
  background: color-mix(in srgb, var(--success) 7%, var(--page-bg));
  text-align: center;
}

/* ------------------------------- ROZETLER -------------------------------- */
.tema-lale .badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--title);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .07em;
}

.tema-lale .badge--gold { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* ÖLÇÜLDÜ: `--success` kendi açık zemininde 3,28:1 — 11px metin için eşik
   4,5. Rozet metni jetondan DEĞİL, jetonun koyulaştırılmışından alınır. */
.tema-lale .badge--success { background: color-mix(in srgb, var(--success) 12%, var(--page-bg)); border-color: var(--success); color: color-mix(in srgb, var(--success) 72%, #05170d); }
.tema-lale .badge--danger { background: color-mix(in srgb, var(--danger) 10%, var(--page-bg)); border-color: var(--danger); color: var(--danger); }
.tema-lale .badge--warning { background: color-mix(in srgb, var(--warning) 14%, var(--page-bg)); border-color: var(--warning); color: var(--murekkep-800); }
.tema-lale .badge--info { background: var(--gul-100); border-color: var(--gul-200); color: var(--gul-800); }
.tema-lale .badge--muted { background: var(--surface); border-color: var(--border); color: var(--muted); }

/* ----------------------------- KIRINTI YOLU ------------------------------ */
.tema-lale .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: calc(13px * var(--font-scale));
  color: var(--muted);
}

.tema-lale .breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--border-strong); }
.tema-lale .breadcrumb a { color: var(--muted); }
.tema-lale .breadcrumb a:hover { color: var(--accent); }

/* ------------------- ÇEKİRDEK ÜRÜN KARTI (pcard/pgrid) ------------------- */
/* Temanın kendi `.lal-urun` kartı ürün ızgaralarında kullanılıyor; `.pcard`
   ise favoriler, karşılaştırma ve arama gibi çekirdek sayfalarda basılıyor.
   İkisi AYNI görünmeli, yoksa aynı ürün iki sayfada iki farklı kart olur. */
.tema-lale .pgrid { display: grid; gap: var(--lale-oluk); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px)  { .tema-lale .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tema-lale .pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tema-lale .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tema-lale .pcard { display: flex; min-width: 0; flex-direction: column; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.tema-lale .pcard__media { position: relative; overflow: hidden; background: var(--surface); }
.tema-lale .pcard__media img { width: 100%; aspect-ratio: var(--lale-kart-oran); object-fit: cover; transition: transform .7s var(--ease); }
.tema-lale .pcard:hover .pcard__media img { transform: scale(1.045); }
.tema-lale .pcard__flags { position: absolute; top: 12px; left: 12px; display: grid; gap: 6px; justify-items: start; }
.tema-lale .pcard__fav { position: absolute; top: 12px; right: 12px; }

.tema-lale .pcard__fav button {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  min-height: 0; padding: 0;
  border: 1px solid var(--border);
  background: var(--page-bg);
  color: var(--title);
}

.tema-lale .pcard__fav button:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tema-lale .pcard__body { padding: 16px 0 0; }
.tema-lale .pcard__brand { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.tema-lale .pcard__name { margin: 0 0 8px; font-family: var(--font-body); font-size: calc(16px * var(--font-scale)); line-height: calc(26px * var(--font-scale)); font-weight: 500; text-transform: none; }
.tema-lale .pcard__name a { color: var(--title); }
.tema-lale .pcard__name a:hover { color: var(--accent); }
.tema-lale .pcard__rating { margin: 0 0 6px; font-size: calc(13px * var(--font-scale)); color: var(--muted); }
.tema-lale .pcard__stars,
.tema-lale .stars { color: var(--accent); letter-spacing: .08em; }
.tema-lale .pcard__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; font-size: calc(15px * var(--font-scale)); font-variant-numeric: tabular-nums; }
.tema-lale .pcard__price strong { color: var(--title); font-weight: 600; }
.tema-lale .pcard__price del { color: var(--muted); font-size: .87em; }
.tema-lale .pcard__stock { margin: 7px 0 0; font-size: calc(12px * var(--font-scale)); color: var(--muted); }
.tema-lale .pcard__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* --------------------------- ADET VE VARYANT ----------------------------- */
.tema-lale .qtyrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.tema-lale .qty { display: inline-flex; align-items: center; border: 1px solid var(--control-border); }
.tema-lale .qty button { width: 46px; min-height: var(--btn-height); padding: 0; border: 0; background: transparent; color: var(--title); font-size: 18px; }
.tema-lale .qty button:hover { background: var(--surface); }
.tema-lale .qty input { width: 52px; min-height: 0; padding: 0; border: 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.tema-lale .qty input::-webkit-outer-spin-button,
.tema-lale .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tema-lale .optgroup { margin-bottom: 20px; }
.tema-lale .optgroup__title { display: block; margin-bottom: 10px; color: var(--title); font-size: calc(13px * var(--font-scale)); font-weight: 600; letter-spacing: .06em; }
.tema-lale .optlist { display: flex; flex-wrap: wrap; gap: 8px; }

/* `.swatch` BU GRUBA GİRMEZ: çekirdekte renk lekesi bir SEÇENEK KUTUSU değil,
   etiketin içindeki 14px'lik bir kare. Tanımı aşağıda, künye bloğunda. */
.tema-lale .optlist label {
  margin: 0;
  padding: 10px 17px;
  border: 1px solid var(--control-border);
  color: var(--text);
  font-size: calc(14px * var(--font-scale));
  font-weight: 400;
  cursor: pointer;
}

.tema-lale .optlist label:has(input:checked) { border-color: var(--primary); color: var(--title); }
.tema-lale .optlist label:has(input:disabled) { opacity: .42; cursor: not-allowed; text-decoration: line-through; }
.tema-lale .optlist input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.tema-lale .radio-card {
  display: flex;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--control-border);
  cursor: pointer;
}

.tema-lale .radio-card:has(input:checked) { border-color: var(--primary); background: var(--surface); }
.tema-lale .radio-card input { flex: none; margin-top: 3px; width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); }
.tema-lale .check { display: flex; align-items: center; gap: 10px; }
.tema-lale .check input { width: 16px; height: 16px; min-height: 0; flex: none; accent-color: var(--accent); }

/* ------------------------------- SEKMELER -------------------------------- */
.tema-lale .tabs__nav { display: flex; flex-wrap: wrap; gap: 26px; border-bottom: var(--lale-cizgi); }

.tema-lale .tabs__btn {
  position: relative;
  padding: 0 0 15px;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: none;
}

.tema-lale .tabs__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease); }
.tema-lale .tabs__btn:hover { background: none; color: var(--title); }
.tema-lale .tabs__btn[aria-selected="true"],
.tema-lale .tabs__btn.is-aktif { background: none; color: var(--title); }
.tema-lale .tabs__btn[aria-selected="true"]::after,
.tema-lale .tabs__btn.is-aktif::after { transform: scaleX(1); }
.tema-lale .tabs__panel { padding-top: 30px; }

/* ---------------------------- SEPET · ÖZET ------------------------------- */
.tema-lale .cartlayout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .tema-lale .cartlayout { grid-template-columns: minmax(0, 1fr) 360px; } }
.tema-lale .cartlist { display: grid; }
.tema-lale .cartitem__img { width: 96px; }
.tema-lale .cartitem__meta { min-width: 0; }
.tema-lale .cartitem__name { display: block; margin-bottom: 6px; font-family: var(--font-heading); font-size: calc(18px * var(--font-scale)); color: var(--title); }
.tema-lale .cartitem__right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.tema-lale .cartitem__total { font-weight: 600; color: var(--title); font-variant-numeric: tabular-nums; }

.tema-lale .summary {
  padding: 28px;
  border: var(--lale-cizgi);
  background: var(--surface);
  position: sticky;
  top: calc(var(--lale-ust-yukseklik) + 16px);
}

.tema-lale .summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: calc(15px * var(--font-scale)); }
.tema-lale .summary__row--total { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border-strong); font-family: var(--font-heading); font-size: calc(22px * var(--font-scale)); color: var(--title); }
.tema-lale .summary__note { margin: 14px 0 0; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.tema-lale .coupon { display: flex; gap: 8px; margin: 18px 0; }
.tema-lale .coupon .field { flex: 1 1 auto; min-height: 46px; }
.tema-lale .coupon .btn { min-height: 46px; padding-inline: 18px; }

/* -------------------------------- ADIMLAR -------------------------------- */
.tema-lale .steps { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 40px; padding: 0; list-style: none; }
.tema-lale .steps__item { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: calc(14px * var(--font-scale)); }

.tema-lale .steps__no {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tema-lale .steps__item.is-aktif { color: var(--title); font-weight: 600; }
.tema-lale .steps__item.is-aktif .steps__no { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tema-lale .steps__item.is-tamam .steps__no { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ------------------------------- LİSTELER -------------------------------- */
.tema-lale .listlayout { display: grid; gap: 44px; align-items: start; }
@media (min-width: 980px) { .tema-lale .listlayout { grid-template-columns: 262px minmax(0, 1fr); } }
.tema-lale .listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: var(--lale-cizgi); }
.tema-lale .listbar select { width: auto; min-width: 190px; min-height: 42px; padding-block: 8px; }
.tema-lale .filters { border-top: var(--lale-cizgi); }
.tema-lale .filters__title { padding: 16px 0 10px; color: var(--title); font-size: calc(13px * var(--font-scale)); font-weight: 600; letter-spacing: .08em; }
.tema-lale .filters__list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tema-lale .filters__list a { color: var(--text); font-size: calc(14px * var(--font-scale)); }
.tema-lale .filters__list a:hover { color: var(--accent); }

/* --------------------------------- HESAP --------------------------------- */
.tema-lale .acclayout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .tema-lale .acclayout { grid-template-columns: 236px minmax(0, 1fr); } }
.tema-lale .accnav { display: grid; gap: 2px; border-top: var(--lale-cizgi); }

.tema-lale .accnav a {
  display: block;
  padding: 13px 0;
  border-bottom: var(--lale-cizgi);
  color: var(--text);
  font-size: calc(14px * var(--font-scale));
}

.tema-lale .accnav a:hover { color: var(--accent); }
.tema-lale .accnav a.is-aktif,
.tema-lale .accnav a[aria-current] { color: var(--title); font-weight: 600; }
.tema-lale .addr-grid,
.tema-lale .contact-grid { display: grid; gap: 24px; }
@media (min-width: 820px) { .tema-lale .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tema-lale .contact-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.tema-lale .statcards { display: grid; gap: var(--lale-oluk); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (min-width: 820px) { .tema-lale .statcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tema-lale .statcard { padding: 24px; border: var(--lale-cizgi); background: var(--card-bg); }
.tema-lale .statcard strong { display: block; font-family: var(--font-heading); font-size: calc(30px * var(--font-scale)); color: var(--title); font-variant-numeric: tabular-nums; }
.tema-lale .statcard span { color: var(--muted); font-size: calc(13px * var(--font-scale)); }

/* ------------------------- YANA KAYAN TABLOLAR --------------------------- */
/* Geniş tablo SAYFAYI yana kaydırmasın — kendi kabında kaysın. */
.tema-lale .table-scroll,
.tema-lale .responsive,
.tema-lale .kargo-tablo,
.tema-lale .krs-tablo-kap { overflow-x: auto; }
.tema-lale .kargo-tablo table { width: 100%; border-collapse: collapse; }
.tema-lale .kargo-tablo th,
.tema-lale .kargo-tablo td { padding: 12px 16px; text-align: left; border-bottom: var(--lale-cizgi); }
.tema-lale .kargo-tablo th { background: var(--surface); color: var(--title); font-weight: 600; }

/* --------------------------- KARŞILAŞTIRMA ------------------------------- */
.tema-lale .krs-ekle__btn { min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: calc(12px * var(--font-scale)); font-weight: 500; letter-spacing: .04em; text-transform: none; }
.tema-lale .krs-ekle__btn:hover { background: none; color: var(--accent); }

/* ----------------------------- BAYİ PANELİ ------------------------------- */
.tema-lale .bayi-panel { margin-block: 16px; padding: 18px; border: var(--lale-cizgi); background: var(--surface); }

/* ------------------- ÇEKİRDEK BÜLTEN PARÇASI (koyu zemin) ----------------
   ÖLÇÜLMÜŞ ARIZA: bülten parçası kendi rengini BELİRTMİYOR — açık zeminde
   çalışsın diye devralınan renge güveniyor. Alt bilgide zemin koyu olduğu
   için başlık `var(--title)` (#1a1416) ile çiziliyordu: karşıtlık 1,09,
   açıklama 2,61. Parçayı koyu zemine KOYAN taraf tema olduğuna göre,
   okunurluğu sağlamak da temanın işi.
   Ölçüldü (düzeltmeden sonra): başlık 14,9:1 · açıklama 9,4:1. */
.tema-lale .lal-alt form { color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.tema-lale .lal-alt input[type="email"],
.tema-lale .lal-alt input[type="text"],
.tema-lale .lal-alt input[type="search"] { background: color-mix(in srgb, var(--on-primary) 8%, transparent); border-color: color-mix(in srgb, var(--on-primary) 38%, transparent); color: var(--on-primary); }
.tema-lale .lal-alt input::placeholder { color: color-mix(in srgb, var(--on-primary) 66%, transparent); }

/* --------------------- TEMA ÖNİZLEME ÇUBUĞU (personel) ------------------- */
.tema-lale .tema-onizleme {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--murekkep-900);
  color: #fff;
  font-size: calc(13px * var(--font-scale));
}

.tema-lale .tema-onizleme__ayrinti { color: rgba(255, 255, 255, .74); }
.tema-lale .tema-onizleme__eylemler { display: flex; gap: 8px; }
.tema-lale .tema-onizleme__btn { min-height: 34px; padding: 7px 14px 6px; border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 12px; }
.tema-lale .tema-onizleme__btn--birincil { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   MOBİL MENÜ VE DUYARLILIK
   --------------------------------------------------------------------------
   SÖZLEŞME (public/js/shop.js): düğme `[data-toggle-menu]`, panel
   `#mobile-menu`, açık durum `.is-open`. Bu üçü DEĞİŞTİRİLEMEZ; değişirse
   menü sessizce ölür.
   ========================================================================== */
.tema-lale .lal-mobil-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(360px, 88vw);
  padding: calc(var(--lale-ust-yukseklik) + 22px) 26px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--page-bg);
  border-right: var(--lale-cizgi);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s;
}

.tema-lale .lal-mobil-menu.is-open { transform: translateX(0); visibility: visible; }
.tema-lale .lal-mobil-menu ul { margin: 0; padding: 0; list-style: none; display: grid; }

.tema-lale .lal-mobil-menu > ul > li > a,
.tema-lale .lal-mobil-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--lale-dokunma);
  padding: 12px 0;
  border-bottom: var(--lale-cizgi);
  color: var(--title);
  font-size: calc(16px * var(--font-scale));
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.tema-lale .lal-mobil-menu summary::-webkit-details-marker { display: none; }
.tema-lale .lal-mobil-menu summary::after { content: "+"; color: var(--muted); font-size: 20px; }
.tema-lale .lal-mobil-menu details[open] summary::after { content: "−"; }
.tema-lale .lal-mobil-menu details ul { padding: 4px 0 12px 16px; }
.tema-lale .lal-mobil-menu details a { display: block; min-height: 40px; padding: 9px 0; color: var(--text); font-size: calc(15px * var(--font-scale)); }
.tema-lale .lal-mobil-menu__basi { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

/* Panel açıkken arkasını karartan katman: panelin KARDEŞİ, çocuğu değil —
   çocuk olsaydı `overflow-y: auto` onu kırpardı. */
.tema-lale .lal-perde {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(26, 20, 22, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}

.tema-lale .lal-mobil-menu.is-open ~ .lal-perde { opacity: 1; visibility: visible; }

@media (max-width: 1060px) {
  .tema-lale .lal-menu--sol { display: none; }
  .tema-lale .lal-mobil-dugme { display: inline-grid; }
  .tema-lale .lal-serit__ic { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 72px; }
  .tema-lale .lal-marka { grid-column: 2; justify-self: center; font-size: calc(21px * var(--font-scale)); }
  .tema-lale .lal-araclar { gap: 4px; }
  /* `:root` <html> demektir; `.tema-lale` <body> üzerindedir. `.tema-lale :root`
     HİÇBİR ŞEYLE eşleşmez — jeton temanın kendi kökünde geçersiz kılınır. */
  .tema-lale { --lale-ust-yukseklik: 72px; }
}

@media (max-width: 900px) {
  .tema-lale .lal-kahraman__ic { min-height: 0; }
  .tema-lale .lal-kahraman__yazi { order: 2; padding: 44px var(--lale-kenar) 52px; max-width: none; }
  .tema-lale .lal-kahraman__gorsel { order: 1; }
  .tema-lale .lal-kahraman__gorsel img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .tema-lale .lal-kahraman h1 { font-size: calc(33px * var(--font-scale)); line-height: calc(42px * var(--font-scale)); }
  .tema-lale .lal-editoryal--ters .lal-editoryal__gorsel { order: 0; }
  .tema-lale .lal-editoryal__yazi { padding: 40px var(--lale-kenar) 52px; }
  .tema-lale .summary,
  .tema-lale .checkout__ozet,
  .tema-lale .lal-serit { position: static; }
}

@media (max-width: 700px) {
  .tema-lale h2 { font-size: calc(28px * var(--font-scale)); line-height: calc(38px * var(--font-scale)); }
  .tema-lale .lal-sayfa__basi h1,
  .tema-lale .lal-urunbilgi h1,
  .tema-lale .lal-yazisayfa h1 { font-size: calc(27px * var(--font-scale)); }
  .tema-lale .lal-galeri { grid-template-columns: 1fr; }
  .tema-lale .lal-galeri__kare:first-child img { aspect-ratio: var(--lale-kart-oran); }
  .tema-lale .lal-alis__ekle { flex: 1 1 100%; }
  .tema-lale .lal-duyuru__ic { gap: 14px; }
  /* Küçük ekranda dört kolonluk düğme satırı taşıyordu. */
  .tema-lale .lal-katalog__basi { flex-direction: column; align-items: flex-start; }
}

/* Dokunmatik hedef en az 44×44 (WCAG 2.5.8 · AAA'ya yakın AA uygulaması). */
@media (pointer: coarse) {
  .tema-lale .lal-arac,
  .tema-lale .lal-menu a,
  .tema-lale .accnav a,
  .tema-lale .pagination a,
  .tema-lale .pagination span { min-height: var(--lale-dokunma); }
  .tema-lale .lal-menu a { display: flex; align-items: center; }

  /* ÖLÇÜLDÜ: alt bilgi bağlantıları 31×18px'ti (Lighthouse target-size:
     en az 24×24, WCAG 2.5.8 AA). Liste `gap`i 11px olduğu için komşu
     hedefler de birbirine yakındı. Bağlantı kendi satırını kaplıyor. */
  .tema-lale .lal-alt__ic a,
  .tema-lale .lal-alt__dip a {
    display: inline-flex;
    align-items: center;
    min-height: var(--lale-dokunma);
  }
  .tema-lale .lal-alt ul { gap: 2px; }
}

/* ==========================================================================
   HAREKET AZALTMA VE BASKI
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tema-lale *,
  .tema-lale *::before,
  .tema-lale *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Hareket kapalıyken de gizli katmanlar ERİŞİLEBİLİR kalmalı: geçişi
     kaldırmak yeter, görünürlüğü değil. */
  .tema-lale .lal-urun:hover .lal-urun__gorsel img { transform: none; }
  .tema-lale .lal-kategori:hover .lal-kategori__foto img { transform: none; }
  .tema-lale .lal-yazi:hover .lal-yazi__foto img { transform: none; }
}

@media print {
  .tema-lale .lal-duyuru,
  .tema-lale .lal-serit,
  .tema-lale .lal-alt,
  .tema-lale .lal-mobil-menu,
  .tema-lale .lal-perde,
  .tema-lale .lal-urun__ray,
  .tema-lale .lal-urun__hizli,
  .tema-lale .tema-onizleme,
  .tema-lale .exit-offer,
  .tema-lale .dij-cubuk { display: none !important; }

  .tema-lale { background: #fff; color: #000; font-size: 12pt; }
  .tema-lale .container { max-width: none; padding: 0; }
  .tema-lale a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ==========================================================================
   EKRAN DIŞI BÖLÜMLER — `content-visibility` BİLEREK KULLANILMIYOR
   --------------------------------------------------------------------------
   Önce `content-visibility: auto` + `contain-intrinsic-size: auto 640px`
   yazılmıştı. ÖLÇÜLDÜ VE GERİ ALINDI:

   • KAZANÇ ÖLÇÜLEMEDİ. Masaüstü Lighthouse performansı zaten 100, mobil 98;
     bölümler atlanınca da aynı kaldı (FCP 1,7 s · LCP 2,0 s · TBT 0 ms).
     Bu sayfada ertelenecek kadar ağır bir düzen işi yok.
   • BEDEL ÖLÇÜLDÜ. Atlanan bölümün kutusu çökünce axe (Lighthouse
     erişilebilirlik) kartın arkasındaki zemini `elementsFromPoint` ile
     buluyor ve BÜLTEN ŞERİDİNİ (#14100f) okuyor: ürün kartı metinleri
     "karşıtlık 1,04" diye raporlanıyordu. Mobil erişilebilirlik 93'e
     düşüyordu; kural kalkınca 100.

   Sınıf DURUYOR ama boş: şablonlarda `lal-gec` geçen bölümler var ve
   sınıfı kaldırmak yerine niçin boş olduğunu burada yazmak, bir gün
   birinin aynı kuralı yeniden eklemesini engelliyor.
   ========================================================================== */
.tema-lale .lal-gec { /* content-visibility: auto — bkz. yukarıdaki ölçüm */ }

/* --------------------------- AÇILIR ARAMA PANELİ -------------------------- */
/* İkonun arkasına saklanan bir arama değil: `<details>` ana satırın ALTINA
   tam genişlikte bir form indiriyor. JavaScript yok — klavyeyle açılıp
   kapanıyor ve açıkken odak doğal sırada forma giriyor. */
.tema-lale .lal-arama { position: static; }
.tema-lale .lal-arama > summary { list-style: none; cursor: pointer; }
.tema-lale .lal-arama > summary::-webkit-details-marker { display: none; }
.tema-lale .lal-arama[open] > summary { color: var(--accent); }

.tema-lale .lal-arama__form { display: flex; gap: 8px; }

.tema-lale .lal-arama[open] .lal-arama__form {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 5;
  padding: 18px var(--lale-kenar);
  background: var(--page-bg);
  border-bottom: var(--lale-cizgi);
  box-shadow: var(--katman-golge);
}

.tema-lale .lal-arama__form .field { flex: 1 1 auto; }
.tema-lale .lal-arama__form .btn { flex: none; padding-inline: 24px; }
.tema-lale .lal-mobil-menu .lal-arama__form { margin-bottom: 22px; }
.tema-lale .lal-sekme--dar { max-width: 820px; margin-inline: auto; }

/* Süzgeç kolonu eylem satırı ve alt kategori bağlantıları */
.tema-lale .lal-suzgec__eylem { display: grid; gap: 10px; margin-top: 22px; }
.tema-lale .lal-suzgec__alt { display: block; padding-left: 14px; color: var(--muted); }
.tema-lale .lal-suzgec [aria-current] { color: var(--title); font-weight: 600; }
.tema-lale .lal-reklam { margin-bottom: 26px; }
.tema-lale .lal-reklam:empty { display: none; }

/* ==========================================================================
   KÜNYE DÜZENİ — ÜRÜN SAYFASININ ALT BÖLÜMLERİ
   --------------------------------------------------------------------------
   Sekme YOK, açılır-kapanır YOK. Solda 180px etiket sütunu, sağda ölçülü
   genişlikte metin, aralarında saç teli çizgi.

   NİÇİN: 1340px kapsayıcıda tam genişlik bir metin bloğu 120 karakterlik
   satırlar üretiyordu (okunabilir üst sınır ~75 karakter). Sekmeye almak ise
   her bölümü bir tık uzağa atardı ve JavaScript gerektirirdi.
   ========================================================================== */
.tema-lale .lal-kunye { max-width: 1040px; padding-bottom: var(--lale-bolum); }

.tema-lale .lal-kunye__satir {
  display: grid;
  gap: 12px 40px;
  padding: 44px 0;
  border-top: var(--lale-cizgi);
}

@media (min-width: 860px) { .tema-lale .lal-kunye__satir { grid-template-columns: 180px minmax(0, 1fr); } }

.tema-lale .lal-kunye__etiket {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.9;
  color: var(--accent);
}

.tema-lale .lal-kunye__govde { max-width: 68ch; }
.tema-lale .lal-kunye__govde > * + * { margin-top: 18px; }
.tema-lale .lal-madde { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.tema-lale .lal-kunye .datatable th { width: 40%; background: transparent; }
.tema-lale .lal-kunye__govde form label > span { display: block; margin-bottom: 6px; font-size: calc(14px * var(--font-scale)); color: var(--title); }

/* Varyant renk lekesi — metnin YANINDA, metnin yerine değil (WCAG 1.4.1). */
.tema-lale .swatch {
  display: inline-block;
  width: 14px; height: 14px;
  padding: 0;
  margin-right: 8px;
  border: 1px solid var(--border-strong);
  vertical-align: -2px;
}