/* ==========================================================================
   MALA — YAPI MARKET VE HIRDAVAT
   ==========================================================================

   ÖLÇÜ FİŞİ. Bu tema göz kararıyla değil ÖLÇÜLEREK yazıldı.
   Kaynak: wpamerce.com/construction/ — 1440px görüntü alanında Playwright ile
   (/root/screenshot-tool/yapi-renk.mjs).

   NİÇİN YALNIZ PALET ÖLÇÜLDÜ
   --------------------------
   wpamerce TEK bir WordPress temasıdır; demoları arasında tipografi ve ölçü
   AYNIDIR — DM Sans 16/24, mürekkep rgb(16,16,16), hap düğme r60/h42, kart
   r0 gölgesiz. Bu sayılar `lale` (kozmetik) ve `rotor` (oto) yazılırken
   ZATEN İKİ KEZ ölçüldü. Üçüncü kez ölçüp fişe yazmak, ölçüm gibi görünen
   bir tekrar olurdu. Demolar arasında gerçekten değişen şey palettir.

     referansın vurgusu   rgb(255, 235, 138)  — soluk inşaat sarısı
     referansın koyusu    rgb(16, 16, 16)
     referansın zemini    rgb(247, 247, 247)
     referansın soluğu    rgb(105, 110, 115)

   TEMANIN KENDİ ÖLÇÜ SİSTEMİ (bu dosyada kurulur, referanstan değil):
     kapsayıcı            1360px
     gövde                16px / 26px · Karla
     h1 (kahraman)        40px / 48px · Archivo · 700
     bölüm başlığı        28px / 36px · Archivo · 700
     ürün kartı           ÇERÇEVELİ · yarıçap 2px · GÖLGE YOK
     kart fotoğrafı       4 : 3 · object-fit COVER
     düğme                yükseklik 46 · yarıçap 2 · 14px / 22px · 600
     bölüm zemini         #f6f5f2 (sıcak harç grisi)

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

   VURGU RENGİ İKİYE BÖLÜNDÜ — TEMANIN EN ÖNEMLİ KARARI
   ----------------------------------------------------
   Referansın sarısı (#ffeb8a) beyaz üstünde **1,20:1** verir; o renkle
   yazılan metin okunmaz. Referansta da yalnız blok zemini olarak
   kullanılıyor — ama bu ayrım hiçbir yerde YAZILI DEĞİL ve bir sonraki kişi
   onu metne verir. Burada ayrım JETON ADINDA:

     --sari-blok  #ffe89a  → YALNIZ ZEMİN. Metin rengi olarak KULLANILMAZ.
     --accent     #854d0e  → metin ve düğme. Ölçüldü: beyazda 6,85 ·
                             yüzeyde 6,28 · SARI BLOĞUN ÜSTÜNDE 5,63.

   TEMANIN TEK CÜMLESİ
   -------------------
   "Kaç tane gerekiyor?" Yapı markette karar bu soruyla verilir; yanlış hesap
   ya işi yarıda bırakır ya da elde kalan malzeme parasıdır. Bu yüzden ürün
   sayfasında HESAP KUTUSU fiyattan ÖNCE gelir, kartta toplu alım kademesi ve
   birim fiyat (₺/m²) yazar, ağır üründe nakliye uyarısı sepete girmeden
   görünür.

   TÜRKÇE BÜYÜK HARF UYARISI
   -------------------------
   Bu dosyada `text-transform: uppercase` HİÇBİR YERDE YOK. 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.

   TEMEL TİPOGRAFİ `:where()` İÇİNDE
   ---------------------------------
   `.tema-mala h2` (0,1,1) çekirdek bileşenin `.riza__baslik` (0,1,0)
   kuralını yener ve çerez bandının başlığını temanın rengiyle çizerdi
   (lale'de ölçüldü: karşıtlık 1,03). `:where()` özgüllüğü 0,1,0'a indirir.

   Ç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
   tarayıcı varsayılanlarıyla çizilir.

   Yapı market modülü kendi CSS'ini getirir (`css/shop-yapi.css`) ve on iki
   jeton okur; `.yapi-*` sınıfları burada yeniden çizilmez, yalnız KAP
   boyanır (hesap kutusu temanın sarı bloğuna oturur).

   DOĞRULAMA — 23 Ağustos 2026, canlı sayfada ölçüldü
   --------------------------------------------------
     ölçü fişi        26 / 26 tuttu              mala-olc.mjs
     yatay taşma      11 genişlikte YOK          mala-tasma.mjs
     karşıtlık        3 sayfada ihlal YOK        mala-karsit.mjs
     odak halkası     45 / 45 görünür (Tab ile)  mala-odak.mjs
     mobil çekmece    açılıyor VE kapanıyor      mala-odak.mjs
     CLS              pc 0,001 · mobil 0,002     mala-cls.mjs
     Lighthouse       masaüstü 100/100/100/100   wp-lh.mjs
                      mobil      98/100/100/100
     hesap akışı      40 m² → 31 koli, adımlar   mala-hesap.mjs
                      görünür; 18 kartta 4 ayrı birim (₺/m², ₺/metretül,
                      ₺/m² tek kat, ₺/kg), 12 toplu alım rozeti,
                      9 nakliye işareti; ÖLÇÜSÜ OLMAYAN üründe kutu
                      BASILMIYOR, hesabı olmayan ama nakliyesi olan
                      üründe yalnız teslim yolu basılıyor.
   Betiklerin hepsi /root/screenshot-tool altında.

   BU TEMAYI YAZARKEN BULUNAN VE DÜZELTİLEN ŞEYLER
   -----------------------------------------------
   1) Modülün ÜÇ TABLOSU DA BOŞTU (`urun_olculeri`, `fiyat_kademeleri`,
      `kargo_desi_kademeleri`): servisler çalışıyordu ama hesap bloğu hiçbir
      üründe basılmıyordu. `YapiMarketDemoSeeder` yazıldı.
   2) Seeder'ın ilk hâli bütün ürünleri TEK rafa yazıyordu; demoda boya ve
      çimento "Zemin Kaplama" altında duracaktı. Dört iş rafı açıldı.
   3) Demo verisinde ÖLÇÜ HATASI bulundu: 25 kg'lık beton torbasının 0,0125 m³
      kapsamı `paket_kapsami_binde` (binde) çözünürlüğüyle ifade edilemiyor;
      12 yazınca 3 m³ için 263 torba çıkıyordu, doğrusu 252. Ambalaj şemanın
      çözünürlüğüne UYAN 30 kg'a (0,015 m³ = 15 binde) çevrildi → 210 torba.
   4) Kartın birinci imza kararı (birim fiyat) ÇALIŞMIYORDU: çekirdek `Unit`
      sınıfının taban birimleri kg/lt/adet — **m² YOK**. Alan ve uzunluk
      birim fiyatı `urun_olculeri`nden hesaplanıyor; ağırlık/hacim ürünlerinde
      çekirdek yolu kullanılıyor (`unit`/`unit_amount`/`unit_base` seeder'da
      dolduruldu — `products.unit` NOT NULL, null'lanamıyor).
   5) Boya için ₺/m² **kat başına**dır; nitelik yazılmazsa fayansın
      ₺/m²'siyle yan yana durup boyayı on kat ucuz gösteriyordu
      (297,92 karşı 12,60 — ölçüldü). Etiket "(tek kat)" taşıyor.
   6) `layers` ve `brush` simgeleri IconDictionary'de YOK; bilinmeyen ad
      hiçbir şey basmadığı için ilk iki iş kapısı simgesiz kalıyordu.
   ========================================================================== */

:root {

  /* ---------- Ham palet: kraft, harç, kehribar ---------- */
  --kraft-900: #1c1a17;
  --kraft-800: #292620;
  --kraft-700: #3a3630;
  --kraft-600: #55504a;
  --kraft-500: #6b655c;
  --kraft-400: #948d82;

  --harc-100: #f6f5f2;   /* ÖLÇÜLDÜ karşılığı: referansın #f7f7f7'si, ısıtıldı */
  --harc-200: #efede8;
  --harc-300: #e3e0d9;
  --harc-400: #cdc8bd;

  --kehribar-900: #713f12;
  --kehribar-800: #854d0e;   /* beyazda 6,85 · sarı blokta 5,63 */
  --kehribar-600: #a16207;

  /* SARI BLOK — YALNIZ ZEMİN.
     Beyazda 1,22:1. Metin rengi olarak kullanılırsa okunmaz; bu jeton
     hiçbir `color:` bildiriminde geçmez. Denetim: `mala-sari.mjs`. */
  --sari-blok: #ffe89a;
  --sari-blok-koyu: #f7d96b;

  /* ---------- Çekirdek sözlükle AYNI ADLAR (yaprak CSS bunları okur) ---------- */
  --title: #1c1a17;
  --text: #3a3630;
  --muted: #6b655c;          /* beyazda 5,77:1 · harçta 5,29:1 */
  --border: #e3e0d9;
  --border-strong: #cdc8bd;
  --surface: #f6f5f2;
  --white: #ffffff;

  /* WCAG 1.4.11: etkileşimli denetim kenarlığı zemine göre >= 3:1. */
  --control-border: #948d82;
  --control-border-strong: #6b655c;

  --success: #166534;
  --danger: #b3261e;
  --warning: #8a5a00;

  /* 2px İSTİSNASIZ: neredeyse köşeli ama tam değil — kart bir MALZEME
     ETİKETİDİR. `--pill` yalnız rozet ve adet sayacı için. */
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 2px;
  --pill: 999px;

  /* Ayrım ÇERÇEVEYLE yapılır, gölgeyle değil: gölgeli kartlar yoğun bir
     malzeme listesinde yüzer gibi durup taranmayı zorlaştırıyor. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --katman-golge: rgba(28, 26, 23, .18) 0 14px 34px -10px;

  --container: 1360px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Yedek zincir GERÇEK yüzlerden kurulur: "… Yedek" diye ölçüsü eşitlenmiş
     bir yüz YALNIZ ana sitede tanımlıdır, mağaza temalarında yoktur. */
  --font-heading: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;

  /* ---------- Tanım dosyasındaki 12 jeton ---------- */
  --primary: #1c1a17;
  --primary-strong: #100e0c;
  --primary-soft: #efede8;
  --primary-hover: #3a3630;
  --primary-focus: #55504a;
  --primary-line: #3a3630;
  --on-primary: #ffffff;

  --accent: #854d0e;
  --accent-strong: #713f12;
  --accent-light: #a16207;
  --accent-soft: #fdf3dc;
  --on-accent: #ffffff;      /* #854d0e üstünde 6,85:1 */

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

  --btn-radius: 2px;
  --btn-tracking: .01em;
  --btn-transform: none;     /* Türkçe: bkz. dosya başı */
  --btn-height: 46px;

  --heading-tracking: -.01em;
  --heading-transform: none;
  --section-space: 84px;

  /* ---------- Temanın kendi ölçü sistemi ---------- */
  --mala-kenar: clamp(16px, 3vw, 44px);
  --mala-oluk: 20px;
  --mala-cizgi: 1px solid var(--border);
  --mala-dokunma: 44px;
  --mala-kart-oran: 4 / 3;
  --mala-ust-yukseklik: 80px;
  --mala-menu-aralik: 26px;
  --mala-bolum: clamp(50px, 6vw, 84px);
}

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

.tema-mala {
  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%;
}

/* Özgüllük gerekçesi dosya başında. */
.tema-mala :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 .5em;
  color: var(--title);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
}

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

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

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

.tema-mala .visually-hidden,
.tema-mala .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-mala :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tema-mala .atlama {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius);
}

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

/* ÖLÇÜ SATIRI — temanın kendi tipografik ilkesi.
   Paket kapsamı ("1,44 m²/koli") ve birim fiyat ("29,79 ₺/m²") sütun hâlinde
   okunur; rakamlar hizalanmalı. */
.tema-mala .mala-olcu {
  font-family: var(--font-heading);
  font-size: calc(13px * var(--font-scale));
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.tema-mala .mala-olcu b { color: var(--title); font-weight: 700; }

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

/* --------------------------------- DÜĞME --------------------------------- */
/* ÖLÇÜ: yükseklik 46 · yarıçap 2 · 14/22 · 600.
   Dolgu 11px: 11 + 22 + 11 + 2 çerçeve = 46. `min-height` bir ALT SINIRDIR;
   12px yazılsaydı düğme 48 olurdu (rotor'da ölçüldü). */
.tema-mala .btn,
.tema-mala :where(button, input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 11px 22px;
  border: 1px solid var(--primary);
  border-radius: var(--btn-radius);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-family: var(--font-heading);
  font-size: calc(14px * var(--font-scale));
  line-height: calc(22px * var(--font-scale));
  font-weight: 600;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}

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

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

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

.tema-mala .btn--navy { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tema-mala .btn--sm { min-height: 36px; padding: 6px 14px; font-size: calc(13px * var(--font-scale)); }
.tema-mala .btn--lg { min-height: 54px; padding: 15px 30px; font-size: calc(16px * var(--font-scale)); }
.tema-mala .btn--block { display: flex; width: 100%; }
.tema-mala .btn[disabled],
.tema-mala :where(button[disabled]) { opacity: .5; cursor: not-allowed; }

/* --------------------------------- FORM ---------------------------------- */
.tema-mala .field,
.tema-mala :where(input[type="text"], input[type="search"], input[type="email"], input[type="url"],
                  input[type="tel"], input[type="number"], input[type="password"], input[type="date"],
                  select, textarea) {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  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-mala textarea { min-height: 140px; resize: vertical; }
.tema-mala .field:focus,
.tema-mala :where(input:focus, select:focus, textarea:focus) { border-color: var(--accent); }
.tema-mala ::placeholder { color: var(--muted); opacity: 1; }
.tema-mala :where(label) { display: block; margin-bottom: 6px; font-size: calc(14px * var(--font-scale)); color: var(--title); font-weight: 600; }
.tema-mala .field-row { display: grid; gap: 16px; }
@media (min-width: 720px) { .tema-mala .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tema-mala .field-error { margin-top: 6px; font-size: calc(13px * var(--font-scale)); color: var(--danger); }
.tema-mala .field[aria-invalid="true"],
.tema-mala :where(input[aria-invalid="true"]) { border-color: var(--danger); }

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

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

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

.tema-mala .cartitem img { width: 92px; aspect-ratio: var(--mala-kart-oran); object-fit: cover; border: var(--mala-cizgi); border-radius: var(--radius-sm); }
.tema-mala .cartitem__ad { font-family: var(--font-heading); font-size: calc(16px * var(--font-scale)); color: var(--title); font-weight: 700; }
.tema-mala .cartitem__fiyat { font-weight: 700; color: var(--title); font-variant-numeric: tabular-nums; }

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

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

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

.tema-mala .checkout__satir { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: calc(15px * var(--font-scale)); }
.tema-mala .checkout__satir--toplam { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border-strong); font-family: var(--font-heading); font-size: calc(20px * var(--font-scale)); font-weight: 700; color: var(--title); }

/* ------------------------------ SAYFALAMA -------------------------------- */
.tema-mala .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 44px; }

.tema-mala .pagination a,
.tema-mala .pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--title);
  font-family: var(--font-heading);
  font-size: calc(14px * var(--font-scale));
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

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

/* -------------------------------- PROSE ---------------------------------- */
.tema-mala .prose { font-size: calc(16px * var(--font-scale)); line-height: 1.75; }
.tema-mala .prose > * + * { margin-top: 1em; }
.tema-mala .prose h2 { margin-top: 1.6em; font-size: calc(23px * var(--font-scale)); line-height: 1.25; }
.tema-mala .prose h3 { margin-top: 1.4em; font-size: calc(19px * var(--font-scale)); }
.tema-mala .prose ul,
.tema-mala .prose ol { padding-left: 1.4em; }
.tema-mala .prose li + li { margin-top: .35em; }
.tema-mala .prose figcaption { margin-top: .6em; font-size: calc(14px * var(--font-scale)); color: var(--muted); }

.tema-mala .prose blockquote {
  margin: 1.6em 0;
  padding: 14px 18px;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: calc(17px * var(--font-scale));
  color: var(--title);
}

.tema-mala .prose pre { padding: 16px 18px; overflow-x: auto; background: var(--kraft-900); color: #eeece6; border-radius: var(--radius-sm); font-size: calc(14px * var(--font-scale)); }
.tema-mala .prose code { padding: 2px 6px; background: var(--surface); border-radius: 2px; font-size: .92em; }
.tema-mala .prose pre code { padding: 0; background: none; color: inherit; }

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

.tema-mala .datatable th,
.tema-mala .datatable td,
.tema-mala .prose th,
.tema-mala .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border: var(--mala-cizgi); }

.tema-mala .datatable th,
.tema-mala .prose th { background: var(--surface); color: var(--title); font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
.tema-mala .datatable tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tema-mala .datatable-kap { position: relative; overflow-x: auto; }

/* ==========================================================================
   ÜST BİLGİ — İKİ KATMAN: HİZMET ŞERİDİ · ANA SATIR (ARAMA + MENÜ)
   --------------------------------------------------------------------------
   ÖLÇÜ: hizmet şeridi 36 · ana satır 80.
   Menü AYRI BİR ŞERİTTE DEĞİL, ana satırın içinde: yapı marketin menüsü kısa
   (dört iş rafı) ve üçüncü bir katman başlığı 166px'e çıkarıp ilk ekrandan
   kataloğu itiyordu.
   ========================================================================== */
.tema-mala .mala-ust { position: relative; z-index: 80; background: var(--page-bg); }

.tema-mala .mala-hizmet {
  background: var(--kraft-900);
  color: color-mix(in srgb, #fff 82%, transparent);
  font-size: calc(13px * var(--font-scale));
  line-height: 36px;
}

.tema-mala .mala-hizmet__ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 36px; flex-wrap: wrap; }
.tema-mala .mala-hizmet__baglar { display: flex; gap: 18px; flex-wrap: wrap; }
.tema-mala .mala-hizmet a { color: #fff; }
.tema-mala .mala-hizmet b { color: var(--sari-blok); }

.tema-mala .mala-serit { position: sticky; top: 0; z-index: 81; background: var(--page-bg); border-bottom: 2px solid var(--primary); }
.tema-mala .mala-serit__ic { display: flex; align-items: center; gap: 22px; min-height: var(--mala-ust-yukseklik); }

.tema-mala .mala-marka {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-size: calc(24px * var(--font-scale));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--title);
  text-decoration: none;
}

.tema-mala .mala-marka img { max-height: 40px; width: auto; }

/* Marka işareti — sarı blok. METİN DEĞİL, ZEMİN (bkz. dosya başı). */
.tema-mala .mala-marka__isaret {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: var(--sari-blok);
  color: var(--kraft-900);
  font-size: 17px;
  font-weight: 800;
}

.tema-mala .mala-arama { flex: 1 1 auto; max-width: 520px; display: flex; }
.tema-mala .mala-arama input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.tema-mala .mala-arama button { flex: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-inline: 20px; }

.tema-mala .mala-menu { display: flex; align-items: center; gap: var(--mala-menu-aralik); margin: 0; padding: 0; list-style: none; }
.tema-mala .mala-menu li { position: relative; }

.tema-mala .mala-menu > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.tema-mala .mala-menu > li > a:hover,
.tema-mala .mala-menu > li > a.is-aktif { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

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

.tema-mala .mala-menu li:hover > .mala-altmenu,
.tema-mala .mala-menu li:focus-within > .mala-altmenu { opacity: 1; visibility: visible; transform: translateY(0); }
.tema-mala .mala-altmenu a { display: block; padding: 9px 18px; color: var(--text); font-size: calc(14px * var(--font-scale)); text-decoration: none; }
.tema-mala .mala-altmenu a:hover { background: var(--surface); color: var(--title); text-decoration: none; }

.tema-mala .mala-araclar { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }

.tema-mala .mala-arac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--title);
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  text-decoration: none;
}

.tema-mala .mala-arac:hover { background: var(--surface); color: var(--title); text-decoration: none; }
.tema-mala .mala-arac svg { width: 21px; height: 21px; flex: none; }
.tema-mala .mala-arac__yazi { display: none; }
@media (min-width: 1240px) { .tema-mala .mala-arac__yazi { display: inline; } }

.tema-mala .mala-sepet { position: relative; }

.tema-mala .mala-sepet__sayi {
  position: absolute;
  top: 4px; left: 21px;
  min-width: 18px; height: 18px;
  display: grid; place-items: center;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tema-mala .mala-mobil-dugme { display: none; }

/* ==========================================================================
   KAHRAMAN — "İŞİNE GÖRE BAŞLA"
   --------------------------------------------------------------------------
   TEMANIN İMZASI. Kardeş temaların ilk ekranı ürün ya da koleksiyon vaat
   eder; rotor'unki bir ARAÇ SORAR. Burada ilk ekran bir İŞ SORAR: zemin mi
   döşüyorsun, duvar mı boyuyorsun, banyo mu yeniliyorsun?

   NİÇİN: yapı marketi kullanan kişi "laminat parke 8 mm AC4" diye aramaz;
   "salonun zeminini yenileyeceğim" diye gelir. Malzeme adı sonucun kendisi
   değil, işin bir çıktısıdır.

   Sağdaki sarı blok hesap vaadini taşır — modülün gerçekte yaptığı işi ilk
   ekranda söyler. SARI BLOK ZEMİNDİR; üstündeki metin --title ve --accent
   (sarıda 14,27 ve 5,63 — ölçüldü).
   ========================================================================== */
.tema-mala .mala-kahraman { background: var(--surface); border-bottom: var(--mala-cizgi); }
.tema-mala .mala-kahraman__ic { display: grid; gap: 28px; padding-block: clamp(32px, 4vw, 52px); }
@media (min-width: 960px) { .tema-mala .mala-kahraman__ic { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 380px); gap: 44px; align-items: start; } }

.tema-mala .mala-kahraman h1 { margin: 0 0 12px; font-size: calc(40px * var(--font-scale)); line-height: calc(48px * var(--font-scale)); }
.tema-mala .mala-kahraman__ozet { margin: 0 0 26px; max-width: 56ch; color: var(--muted); font-size: calc(17px * var(--font-scale)); line-height: 1.6; }

/* İş döşemeleri */
.tema-mala .mala-isler { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .tema-mala .mala-isler { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tema-mala .mala-is {
  display: grid;
  gap: 8px;
  padding: 16px 14px;
  border: var(--mala-cizgi);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--title);
  text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}

.tema-mala .mala-is:hover { border-color: var(--primary); background: var(--card-bg); text-decoration: none; }
.tema-mala .mala-is svg { width: 26px; height: 26px; color: var(--accent); }
.tema-mala .mala-is__ad { font-family: var(--font-heading); font-size: calc(15px * var(--font-scale)); font-weight: 700; line-height: 1.3; }
.tema-mala .mala-is__not { color: var(--muted); font-size: calc(13px * var(--font-scale)); line-height: 1.45; }

/* Sarı hesap vaadi bloğu */
.tema-mala .mala-vaat {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--sari-blok);
  color: var(--kraft-900);
}

.tema-mala .mala-vaat h2 { margin: 0 0 10px; font-size: calc(22px * var(--font-scale)); line-height: 1.28; color: var(--kraft-900); }
.tema-mala .mala-vaat p { margin: 0 0 14px; font-size: calc(15px * var(--font-scale)); line-height: 1.6; color: var(--kraft-800); }
.tema-mala .mala-vaat ul { margin: 0 0 16px; padding-left: 1.1em; display: grid; gap: 7px; font-size: calc(14px * var(--font-scale)); color: var(--kraft-800); }
.tema-mala .mala-vaat .btn { background: var(--kraft-900); border-color: var(--kraft-900); color: #fff; }
.tema-mala .mala-vaat .btn:hover { background: var(--kraft-700); border-color: var(--kraft-700); }
.tema-mala .mala-vaat a:not(.btn) { color: var(--accent-strong); text-decoration: underline; }

/* ==========================================================================
   ANA SAYFA BÖLÜMLERİ
   ========================================================================== */
.tema-mala .mala-bolum { padding-block: var(--mala-bolum); }
.tema-mala .mala-bolum--tint { background: var(--surface); }
.tema-mala .mala-bolum--dar { padding-block: calc(var(--mala-bolum) * .6); }

.tema-mala .mala-baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}

.tema-mala .mala-baslik h2 { margin: 0; }
.tema-mala .mala-baslik p { margin: 6px 0 0; color: var(--muted); font-size: calc(15px * var(--font-scale)); }
.tema-mala .mala-baslik__bag { font-family: var(--font-heading); font-size: calc(14px * var(--font-scale)); font-weight: 700; }

/* Güven şeridi */
.tema-mala .mala-guven { display: grid; gap: 1px; background: var(--border); border-block: var(--mala-cizgi); }
@media (min-width: 700px)  { .tema-mala .mala-guven { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tema-mala .mala-guven { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tema-mala .mala-guven__oge { display: flex; align-items: center; gap: 13px; padding: 20px var(--mala-kenar); background: var(--page-bg); }
.tema-mala .mala-guven__oge svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.tema-mala .mala-guven__ad { display: block; color: var(--title); font-family: var(--font-heading); font-weight: 700; font-size: calc(15px * var(--font-scale)); }
.tema-mala .mala-guven__not { display: block; color: var(--muted); font-size: calc(13px * var(--font-scale)); }

/* Raf döşemeleri */
.tema-mala .mala-raflar { display: grid; gap: var(--mala-oluk); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .tema-mala .mala-raflar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tema-mala .mala-raf {
  display: grid;
  grid-template-rows: auto 1fr;
  border: var(--mala-cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  color: var(--title);
  text-decoration: none;
  transition: border-color .16s var(--ease);
}

.tema-mala .mala-raf:hover { border-color: var(--primary); text-decoration: none; }
.tema-mala .mala-raf__foto { aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.tema-mala .mala-raf__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.tema-mala .mala-raf:hover .mala-raf__foto img { transform: scale(1.04); }
.tema-mala .mala-raf__govde { padding: 13px 15px 15px; }
.tema-mala .mala-raf__ad { display: block; font-family: var(--font-heading); font-size: calc(16px * var(--font-scale)); font-weight: 700; }
.tema-mala .mala-raf__sayi { display: block; margin-top: 3px; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.tema-mala .mala-raf__harf { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-heading); font-size: 42px; font-weight: 800; color: var(--kraft-400); }

/* ==========================================================================
   ÜRÜN IZGARASI VE KARTI
   --------------------------------------------------------------------------
   ÜÇ ÖLÇÜLMÜŞ KARAR:

   1) KARTTA BİRİM FİYAT KALICI (₺/m², ₺/L, ₺/metretül). Yapı marketinde
      "42,90 ₺" bir bilgi değildir; koli 1,44 m² ise gerçek fiyat 29,79 ₺/m².
      İki ürünü ancak birim fiyatla karşılaştırabilirsiniz ve raflar farklı
      ambalajlarla doludur. Çekirdek `unitPriceLabel()` bu değeri zaten
      üretiyordu; kardeş temalarda ürün SAYFASINDA görünüyor, burada KARTTA.

   2) KARTTA TOPLU ALIM ROZETİ. Yapı marketin müşterisinin yarısı ustadır ve
      tek kutu almaz. Kademe tablosu yalnız ürün sayfasında dururken usta
      telefonla fiyat soruyordu; rozet ("10+ al 405,00 ₺") kararı kartta
      veriyor.

   3) FOTOĞRAF `cover`, `contain` DEĞİL. Rotor'da parça fotoğrafı kırpılmaz
      (kırpılan fren diski tanınmaz). Yapı market malzemesi DOKUDUR — fayans,
      parke, boya. Dokuyu göstermek için kadraj DOLU olmalı; `contain` bir
      fayans kolisini beyaz boşlukta yüzen küçük bir kutu yapıyordu.
   ========================================================================== */
.tema-mala .mala-izgara { display: grid; gap: var(--mala-oluk); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .tema-mala .mala-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tema-mala .mala-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tema-mala .mala-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tema-mala .mala-urun {
  position: relative;
  min-width: 0;           /* ızgara çocuğu içeriğinin altına inebilsin */
  display: flex;
  flex-direction: column;
  border: var(--mala-cizgi);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: none;
  transition: border-color .16s var(--ease);
}

.tema-mala .mala-urun:hover,
.tema-mala .mala-urun:focus-within { border-color: var(--primary); }

.tema-mala .mala-urun__medya { position: relative; overflow: hidden; background: var(--surface); border-bottom: var(--mala-cizgi); }
.tema-mala .mala-urun__gorsel { display: block; aspect-ratio: var(--mala-kart-oran); }
.tema-mala .mala-urun__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.tema-mala .mala-urun:hover .mala-urun__gorsel img { transform: scale(1.035); }
.tema-mala .mala-urun__bos { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-heading); font-size: 38px; font-weight: 800; color: var(--kraft-400); }

.tema-mala .mala-urun__isaret { position: absolute; top: 10px; left: 10px; display: grid; gap: 5px; justify-items: start; }

.tema-mala .mala-etiket {
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-heading);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
}

.tema-mala .mala-etiket--indirim { background: var(--accent); color: var(--on-accent); }
/* SARI BLOK ZEMİNDİR: üstündeki metin --title (14,27:1). */
.tema-mala .mala-etiket--yeni { background: var(--sari-blok); color: var(--kraft-900); }
.tema-mala .mala-etiket--bitti { background: var(--kraft-500); color: #fff; }
.tema-mala .mala-etiket--nakliye { background: var(--card-bg); color: var(--title); border: 1px solid var(--border-strong); }

.tema-mala .mala-urun__fav { position: absolute; top: 8px; right: 8px; }

.tema-mala .mala-urun__fav button {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  min-height: 0; padding: 0;
  border: var(--mala-cizgi);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--muted);
}

.tema-mala .mala-urun__fav button:hover { border-color: var(--accent); color: var(--accent); background: var(--card-bg); }
.tema-mala .mala-fav-btn.is-secili { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tema-mala .mala-urun__fav svg { width: 16px; height: 16px; }

.tema-mala .mala-urun__govde { display: flex; flex-direction: column; flex: 1 1 auto; padding: 13px 15px 15px; gap: 7px; }
.tema-mala .mala-urun__marka { color: var(--muted); font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .05em; }

.tema-mala .mala-urun__ad {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(15px * var(--font-scale));
  line-height: calc(23px * var(--font-scale));
  font-weight: 600;
}

.tema-mala .mala-urun__ad a { color: var(--title); text-decoration: none; }
.tema-mala .mala-urun__ad a:hover { color: var(--accent); text-decoration: underline; }
.tema-mala .mala-urun__puan { margin: 0; font-size: calc(13px * var(--font-scale)); color: var(--muted); }
.tema-mala .mala-yildiz { color: var(--accent); letter-spacing: .05em; }

.tema-mala .mala-urun__fiyat {
  margin: 0;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-family: var(--font-heading);
  font-size: calc(19px * var(--font-scale));
  font-variant-numeric: tabular-nums;
}

.tema-mala .mala-urun__fiyat strong { color: var(--title); font-weight: 800; }
.tema-mala .mala-urun__fiyat del { color: var(--muted); font-family: var(--font-body); font-size: calc(14px * var(--font-scale)); font-weight: 400; }

/* Birim fiyat — kalıcı, fiyatın hemen altında. */
.tema-mala .mala-urun__birim { margin: 0; font-family: var(--font-heading); font-size: calc(13px * var(--font-scale)); font-variant-numeric: tabular-nums; color: var(--muted); }

/* Toplu alım rozeti — sarı blok üstünde koyu metin. */
.tema-mala .mala-kademe-rozet {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 2px;
  background: var(--sari-blok);
  color: var(--kraft-900);
  font-family: var(--font-heading);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tema-mala .mala-kademe-rozet span { font-weight: 600; color: var(--kraft-800); }

.tema-mala .mala-urun__stok { margin: 0; font-size: calc(12px * var(--font-scale)); color: var(--muted); }
.tema-mala .mala-urun__stok.text-danger { color: var(--danger); }
.tema-mala .mala-urun__ekle { margin-top: 4px; }
.tema-mala .mala-urun__ekle .btn { width: 100%; }
.tema-mala .mala-urun__dip { display: flex; flex-wrap: wrap; gap: 10px 14px; padding-top: 3px; }

.tema-mala .mala-urun__dip button,
.tema-mala .mala-urun__dip .btn {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
}

.tema-mala .mala-urun__dip button:hover,
.tema-mala .mala-urun__dip .btn:hover { background: none; color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   KATALOG SAYFASI
   ========================================================================== */
.tema-mala .mala-sayfa { padding-block: clamp(22px, 3vw, 36px) var(--mala-bolum); }

.tema-mala .mala-yol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: calc(13px * var(--font-scale)); color: var(--muted); }
.tema-mala .mala-yol li + li::before { content: "›"; margin-right: 8px; color: var(--border-strong); }
.tema-mala .mala-yol a { color: var(--muted); text-decoration: none; }
.tema-mala .mala-yol a:hover { color: var(--accent); text-decoration: underline; }

.tema-mala .mala-sayfa__basi { margin-bottom: 24px; }
.tema-mala .mala-sayfa__basi h1 { margin: 0; font-size: calc(32px * var(--font-scale)); line-height: 1.2; }
.tema-mala .mala-sayfa__basi p { margin: 10px 0 0; max-width: 70ch; color: var(--muted); }

.tema-mala .mala-katalog { display: grid; gap: 30px; align-items: start; }
@media (min-width: 980px) { .tema-mala .mala-katalog { grid-template-columns: 244px minmax(0, 1fr); } }
.tema-mala .mala-katalog > * { min-width: 0; }

/* Süzgeç kolonu — SOLDA ve KALICI.
   Rotor'da süzgeç üstte yatay bir çubuktu çünkü orada asıl süzme aracı araç
   seçimiydi. Burada öyle bir eksen yok; yapı marketinde süzgeç arka arkaya
   kullanılır (raf → marka → fiyat) ve her seferinde bir paneli açıp kapamak
   üç fazladan tık demekti. */
.tema-mala .mala-suzgec { border: var(--mala-cizgi); border-radius: var(--radius); overflow: hidden; }
.tema-mala .mala-suzgec__grup { border-bottom: var(--mala-cizgi); }
.tema-mala .mala-suzgec__grup:last-child { border-bottom: 0; }
.tema-mala .mala-suzgec__baslik { margin: 0; padding: 12px 15px; background: var(--surface); color: var(--title); font-family: var(--font-heading); font-size: calc(13px * var(--font-scale)); font-weight: 700; }
.tema-mala .mala-suzgec__ic { padding: 13px 15px; display: grid; gap: 10px; }
.tema-mala .mala-suzgec__ic label { display: flex; align-items: center; gap: 9px; margin: 0; min-height: 26px; font-weight: 400; font-size: calc(14px * var(--font-scale)); color: var(--text); cursor: pointer; }
.tema-mala .mala-suzgec__ic input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; flex: none; accent-color: var(--accent); }
.tema-mala .mala-suzgec__ic a { display: block; color: var(--text); font-size: calc(14px * var(--font-scale)); text-decoration: none; }
.tema-mala .mala-suzgec__ic a:hover { color: var(--accent); text-decoration: underline; }
.tema-mala .mala-suzgec__alt { padding-left: 14px; color: var(--muted); }
.tema-mala .mala-suzgec [aria-current] { color: var(--title); font-weight: 700; }
.tema-mala .mala-suzgec__eylem { display: grid; gap: 8px; padding: 13px 15px; background: var(--surface); }

.tema-mala .mala-katalog__basi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tema-mala .mala-katalog__sayi { margin: 0; color: var(--muted); font-size: calc(14px * var(--font-scale)); }
.tema-mala .mala-katalog__sayi strong { color: var(--title); font-variant-numeric: tabular-nums; }
.tema-mala .mala-katalog__sirala { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tema-mala .mala-katalog__sirala label { margin: 0; color: var(--muted); font-size: calc(14px * var(--font-scale)); font-weight: 400; }
.tema-mala .mala-katalog__sirala select { width: auto; min-width: 182px; min-height: 40px; padding-block: 7px; }

.tema-mala .mala-bos { padding: 60px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; color: var(--muted); }
.tema-mala .mala-bos h2 { font-size: calc(21px * var(--font-scale)); line-height: 1.3; }
.tema-mala .mala-reklam { margin-bottom: 20px; }
.tema-mala .mala-reklam:empty { display: none; }

/* ==========================================================================
   ÜRÜN SAYFASI
   --------------------------------------------------------------------------
   HESAP KUTUSU FİYATTAN ÖNCE. Sektörün tek sorusu "kaç tane gerekiyor?";
   fiyatı ondan önce göstermek, kararın kendisini kararın girdisinden önceye
   koymaktı. Kutu sarı bloğun içinde duruyor — sayfadaki tek sarı alan o.

   Modül (`shop.yapi-market.partials.urun-hesap`) kendi CSS'ini getiriyor ve
   on iki jeton okuyor; `.yapi-*` sınıfları burada yeniden çizilmez, yalnız
   KAP boyanır.
   ========================================================================== */
.tema-mala .mala-urunsayfa { display: grid; gap: 32px; align-items: start; }
@media (min-width: 940px) { .tema-mala .mala-urunsayfa { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; } }
.tema-mala .mala-urunsayfa > * { min-width: 0; }

.tema-mala .mala-galeri { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tema-mala .mala-galeri__kare { margin: 0; overflow: hidden; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--surface); }
.tema-mala .mala-galeri__kare img { width: 100%; aspect-ratio: var(--mala-kart-oran); object-fit: cover; }
/* İlk kare üç sütunu kaplar — doku ancak büyük kadrajda okunur. */
.tema-mala .mala-galeri__kare:first-child { grid-column: 1 / -1; }
.tema-mala .mala-galeri__kare:first-child img { aspect-ratio: 3 / 2; }
.tema-mala .mala-galeri--tek { grid-template-columns: 1fr; }

.tema-mala .mala-urunbilgi__marka { display: inline-block; margin-bottom: 9px; color: var(--accent); font-family: var(--font-heading); font-size: calc(13px * var(--font-scale)); font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.tema-mala .mala-urunbilgi h1 { margin: 0 0 10px; font-size: calc(29px * var(--font-scale)); line-height: 1.26; }
.tema-mala .mala-urunbilgi__kunye { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; font-size: calc(13px * var(--font-scale)); color: var(--muted); }

/* HESAP KABI — sayfadaki tek sarı alan. */
.tema-mala .mala-hesap-kap { padding: 18px; margin: 0 0 18px; border-radius: var(--radius); background: var(--sari-blok); }
.tema-mala .mala-hesap-kap .yapi-hesap { margin: 0; }
.tema-mala .mala-hesap-kap .yapi-hesap__baslik { color: var(--kraft-900); }
.tema-mala .mala-hesap-kap .yapi-hesap__aciklama,
.tema-mala .mala-hesap-kap .yapi-not { color: var(--kraft-800); }
.tema-mala .mala-hesap-kap :where(label) { color: var(--kraft-900); }
.tema-mala .mala-hesap-kap .yapi-hesap__kart,
.tema-mala .mala-hesap-kap .yapi-hesap__sonuc { background: var(--card-bg); border-color: var(--sari-blok-koyu); }
.tema-mala .mala-hesap-kap .btn { background: var(--kraft-900); border-color: var(--kraft-900); color: #fff; }
.tema-mala .mala-hesap-kap .btn:hover { background: var(--kraft-700); border-color: var(--kraft-700); }
.tema-mala .mala-hesap-kap a { color: var(--accent-strong); }

.tema-mala .mala-urunbilgi__fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 4px;
  padding: 15px;
  border: var(--mala-cizgi);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: calc(29px * var(--font-scale));
  font-weight: 800;
  color: var(--title);
  font-variant-numeric: tabular-nums;
}

.tema-mala .mala-urunbilgi__fiyat del { font-family: var(--font-body); font-size: calc(16px * var(--font-scale)); font-weight: 400; color: var(--muted); }
.tema-mala .mala-urunbilgi__ozet { margin: 16px 0; color: var(--muted); line-height: 1.7; }

.tema-mala .mala-varyant { margin: 0 0 16px; padding: 0; border: 0; }
.tema-mala .mala-varyant__ad { display: block; margin-bottom: 8px; padding: 0; color: var(--title); font-family: var(--font-heading); font-size: calc(14px * var(--font-scale)); font-weight: 700; }
.tema-mala .mala-varyant__secim { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-mala .mala-varyant__secim label { margin: 0; padding: 9px 15px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); font-weight: 400; font-size: calc(14px * var(--font-scale)); color: var(--text); cursor: pointer; }
.tema-mala .mala-varyant__secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-mala .mala-varyant__secim label:has(input:checked) { border-color: var(--primary); background: var(--surface); color: var(--title); font-weight: 700; }
.tema-mala .mala-varyant__secim label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-mala .mala-varyant__secim label:has(input:disabled) { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.tema-mala .mala-alis { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 16px 0; }
.tema-mala .mala-adet { display: inline-flex; align-items: center; border: 1px solid var(--control-border); border-radius: var(--radius-sm); }
.tema-mala .mala-adet button { width: 44px; min-height: var(--btn-height); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--title); font-size: 18px; }
.tema-mala .mala-adet button:hover { background: var(--surface); }
.tema-mala .mala-adet input { width: 52px; min-height: 0; padding: 0; border: 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.tema-mala .mala-adet input::-webkit-outer-spin-button,
.tema-mala .mala-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tema-mala .mala-alis__ekle { flex: 1 1 200px; }

.tema-mala .mala-guvence { margin: 16px 0 0; padding: 15px; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--surface); }
.tema-mala .mala-guvence ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tema-mala .mala-guvence li { display: flex; align-items: center; gap: 10px; font-size: calc(14px * var(--font-scale)); color: var(--text); }
.tema-mala .mala-guvence svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* Alt bölümler — çerçeveli kutu yığını. */
.tema-mala .mala-kutular { display: grid; gap: 16px; margin-top: 44px; }
.tema-mala .mala-kutular > * { min-width: 0; }
.tema-mala .mala-kutu { border: var(--mala-cizgi); border-radius: var(--radius); background: var(--card-bg); overflow: hidden; }
.tema-mala .mala-kutu__basi { margin: 0; padding: 13px 17px; border-bottom: var(--mala-cizgi); background: var(--surface); font-family: var(--font-heading); font-size: calc(16px * var(--font-scale)); font-weight: 700; color: var(--title); }
.tema-mala .mala-kutu__ic { padding: 17px; }
.tema-mala .mala-kutu__ic > :last-child { margin-bottom: 0; }
.tema-mala .mala-madde { margin: 0; padding-left: 1.2em; display: grid; gap: 7px; }

.tema-mala .mala-yorum { padding: 15px 0; border-bottom: var(--mala-cizgi); }
.tema-mala .mala-yorum:last-of-type { border-bottom: 0; }
.tema-mala .mala-yorum__basi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.tema-mala .mala-yorum__kisi { color: var(--title); font-family: var(--font-heading); font-weight: 700; font-size: calc(15px * var(--font-scale)); }
.tema-mala .mala-yorum__tarih { color: var(--muted); font-size: calc(13px * var(--font-scale)); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.tema-mala .mala-yazilar { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.tema-mala .mala-yazi { border: var(--mala-cizgi); border-radius: var(--radius); overflow: hidden; background: var(--card-bg); min-width: 0; }
.tema-mala .mala-yazi__foto { aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; }
.tema-mala .mala-yazi__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.tema-mala .mala-yazi:hover .mala-yazi__foto img { transform: scale(1.04); }
.tema-mala .mala-yazi__govde { padding: 15px 17px 18px; }
.tema-mala .mala-yazi__ust { display: flex; gap: 10px; margin-bottom: 7px; color: var(--accent); font-family: var(--font-heading); font-size: 12px; font-weight: 700; }
.tema-mala .mala-yazi__ad { margin: 0 0 7px; font-size: calc(18px * var(--font-scale)); line-height: 1.3; }
.tema-mala .mala-yazi__ad a { color: var(--title); text-decoration: none; }
.tema-mala .mala-yazi__ad a:hover { color: var(--accent); text-decoration: underline; }
.tema-mala .mala-yazi__ozet { margin: 0; color: var(--muted); font-size: calc(14px * var(--font-scale)); line-height: 1.65; }
.tema-mala .mala-yazisayfa { max-width: 760px; margin-inline: auto; }
.tema-mala .mala-yazisayfa h1 { font-size: calc(32px * var(--font-scale)); line-height: 1.22; }
.tema-mala .mala-yazisayfa__kunye { margin: 0 0 26px; color: var(--muted); font-size: calc(14px * var(--font-scale)); }
.tema-mala .mala-yazisayfa__kapak { margin-bottom: 32px; }
.tema-mala .mala-yazisayfa__kapak img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

/* ==========================================================================
   ÇEKİRDEK SINIFLARIN MALA DİLİNDE YENİDEN ÇİZİMİ
   --------------------------------------------------------------------------
   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.
   ========================================================================== */
.tema-mala .section-head { margin-bottom: 24px; }
.tema-mala .section-head h1,
.tema-mala .section-head h2 { margin: 0; }
.tema-mala .section-head p { margin: 8px 0 0; color: var(--muted); }
.tema-mala .section--surface { background: var(--surface); }
.tema-mala .stack { display: grid; gap: 16px; }
.tema-mala .ikili { display: grid; gap: 20px; }
@media (min-width: 820px) { .tema-mala .ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tema-mala .center { text-align: center; }
.tema-mala .right { text-align: right; }
.tema-mala .nowrap { white-space: nowrap; }
.tema-mala .mono { font-family: var(--font-heading); font-variant-numeric: tabular-nums; }
.tema-mala .muted { color: var(--muted); }
.tema-mala .hint { color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.tema-mala .text-danger { color: var(--danger); }
.tema-mala .text-success { color: var(--success); }
.tema-mala .eyebrow { display: block; margin-bottom: 9px; color: var(--accent); font-family: var(--font-heading); font-size: calc(13px * var(--font-scale)); font-weight: 700; letter-spacing: .05em; }

.tema-mala .panel { padding: 18px; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--card-bg); }
.tema-mala .panel__desc { margin: 0 0 14px; color: var(--muted); }
.tema-mala .panel--sss { padding: 0; border: 0; border-bottom: var(--mala-cizgi); border-radius: 0; }
.tema-mala .panel--sss summary { padding: 15px 0; cursor: pointer; font-family: var(--font-heading); font-size: calc(16px * var(--font-scale)); font-weight: 700; color: var(--title); }
.tema-mala .panel--sss .panel__desc { padding-bottom: 15px; }
.tema-mala .mala-sss { max-width: 860px; border-top: var(--mala-cizgi); }

.tema-mala .empty { padding: 56px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; color: var(--muted); }
.tema-mala .empty h2 { font-size: calc(21px * var(--font-scale)); line-height: 1.3; }
.tema-mala .success-box { padding: 26px; border: 1px solid var(--success); border-radius: var(--radius); background: color-mix(in srgb, var(--success) 7%, var(--page-bg)); text-align: center; }

/* ------------------------------- ROZETLER -------------------------------- */
.tema-mala .badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface); color: var(--title); font-family: var(--font-heading); font-size: 11px; line-height: 1.3; font-weight: 700; }
/* SARI BLOK ZEMİNDİR: metin --kraft-900 (14,27:1). */
.tema-mala .badge--gold { background: var(--sari-blok); border-color: var(--sari-blok-koyu); color: var(--kraft-900); }
.tema-mala .badge--success { background: color-mix(in srgb, var(--success) 12%, var(--page-bg)); border-color: var(--success); color: color-mix(in srgb, var(--success) 80%, #03120a); }
.tema-mala .badge--danger { background: color-mix(in srgb, var(--danger) 10%, var(--page-bg)); border-color: var(--danger); color: color-mix(in srgb, var(--danger) 86%, #180404); }
.tema-mala .badge--warning { background: var(--accent-soft); border-color: var(--accent-light); color: var(--accent-strong); }
.tema-mala .badge--info { background: var(--surface); border-color: var(--border-strong); color: var(--accent-strong); }
.tema-mala .badge--muted { background: var(--surface); border-color: var(--border); color: var(--muted); }

/* ----------------------------- KIRINTI YOLU ------------------------------ */
.tema-mala .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: calc(13px * var(--font-scale)); color: var(--muted); }
.tema-mala .breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--border-strong); }
.tema-mala .breadcrumb a { color: var(--muted); text-decoration: none; }
.tema-mala .breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* ------------------- ÇEKİRDEK ÜRÜN KARTI (pcard/pgrid) ------------------- */
.tema-mala .pgrid { display: grid; gap: var(--mala-oluk); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .tema-mala .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tema-mala .pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tema-mala .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tema-mala .pcard { display: flex; min-width: 0; flex-direction: column; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--card-bg); box-shadow: none; }
.tema-mala .pcard:hover { border-color: var(--primary); }
.tema-mala .pcard__media { position: relative; overflow: hidden; background: var(--surface); border-bottom: var(--mala-cizgi); }
.tema-mala .pcard__media img { width: 100%; aspect-ratio: var(--mala-kart-oran); object-fit: cover; }
.tema-mala .pcard__flags { position: absolute; top: 10px; left: 10px; display: grid; gap: 5px; justify-items: start; }
.tema-mala .pcard__fav { position: absolute; top: 8px; right: 8px; }
.tema-mala .pcard__fav button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: var(--mala-cizgi); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--muted); }
.tema-mala .pcard__fav button:hover { border-color: var(--accent); color: var(--accent); background: var(--card-bg); }
.tema-mala .pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 7px; padding: 13px 15px 15px; }
.tema-mala .pcard__brand { color: var(--muted); font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.tema-mala .pcard__name { margin: 0; font-family: var(--font-body); font-size: calc(15px * var(--font-scale)); line-height: calc(23px * var(--font-scale)); font-weight: 600; }
.tema-mala .pcard__name a { color: var(--title); text-decoration: none; }
.tema-mala .pcard__name a:hover { color: var(--accent); text-decoration: underline; }
.tema-mala .pcard__rating { margin: 0; font-size: calc(13px * var(--font-scale)); color: var(--muted); }
.tema-mala .pcard__stars,
.tema-mala .stars { color: var(--accent); letter-spacing: .05em; }
.tema-mala .pcard__price { margin: 0; margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--font-heading); font-size: calc(19px * var(--font-scale)); font-variant-numeric: tabular-nums; }
.tema-mala .pcard__price strong { color: var(--title); font-weight: 800; }
.tema-mala .pcard__price del { color: var(--muted); font-family: var(--font-body); font-size: calc(14px * var(--font-scale)); font-weight: 400; }
.tema-mala .pcard__stock { margin: 0; font-size: calc(12px * var(--font-scale)); color: var(--muted); }
.tema-mala .pcard__foot { display: flex; flex-wrap: wrap; gap: 10px 14px; }

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

.tema-mala .optgroup { margin-bottom: 16px; }
.tema-mala .optgroup__title { display: block; margin-bottom: 8px; color: var(--title); font-family: var(--font-heading); font-size: calc(14px * var(--font-scale)); font-weight: 700; }
.tema-mala .optlist { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-mala .optlist label { margin: 0; padding: 9px 15px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); font-weight: 400; font-size: calc(14px * var(--font-scale)); color: var(--text); cursor: pointer; }
.tema-mala .optlist label:has(input:checked) { border-color: var(--primary); background: var(--surface); color: var(--title); font-weight: 700; }
.tema-mala .optlist label:has(input:disabled) { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.tema-mala .optlist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Renk lekesi SÜSTÜR: yanındaki metin rengin adını yazıyor (WCAG 1.4.1). */
.tema-mala .swatch { display: inline-block; width: 14px; height: 14px; padding: 0; margin-right: 8px; border: 1px solid var(--border-strong); border-radius: 2px; vertical-align: -2px; }
.tema-mala .radio-card { display: flex; gap: 12px; padding: 15px; border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; }
.tema-mala .radio-card:has(input:checked) { border-color: var(--primary); background: var(--surface); }
.tema-mala .radio-card input { flex: none; margin-top: 3px; width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); }
.tema-mala .check { display: flex; align-items: center; gap: 10px; }
.tema-mala .check input { width: 16px; height: 16px; min-height: 0; flex: none; accent-color: var(--accent); }

/* ------------------------------- SEKMELER -------------------------------- */
.tema-mala .tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: var(--mala-cizgi); }
.tema-mala .tabs__btn { min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: none; color: var(--muted); font-family: var(--font-heading); font-size: calc(14px * var(--font-scale)); font-weight: 700; }
.tema-mala .tabs__btn:hover { background: var(--surface); color: var(--title); }
.tema-mala .tabs__btn[aria-selected="true"],
.tema-mala .tabs__btn.is-aktif { background: var(--card-bg); border-color: var(--border); color: var(--title); margin-bottom: -1px; }
.tema-mala .tabs__panel { padding-top: 22px; }

/* ---------------------------- SEPET · ÖZET ------------------------------- */
.tema-mala .cartlayout { display: grid; gap: 34px; align-items: start; }
@media (min-width: 960px) { .tema-mala .cartlayout { grid-template-columns: minmax(0, 1fr) 348px; } }
.tema-mala .cartlayout > * { min-width: 0; }
.tema-mala .cartlist { display: grid; }
.tema-mala .cartitem__img { width: 92px; }
.tema-mala .cartitem__meta { min-width: 0; }
.tema-mala .cartitem__name { display: block; margin-bottom: 5px; font-family: var(--font-heading); font-size: calc(16px * var(--font-scale)); font-weight: 700; color: var(--title); }
.tema-mala .cartitem__right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.tema-mala .cartitem__total { font-weight: 800; font-family: var(--font-heading); color: var(--title); font-variant-numeric: tabular-nums; }

.tema-mala .summary { padding: 20px; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--surface); position: sticky; top: calc(var(--mala-ust-yukseklik) + 12px); }
.tema-mala .summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: calc(15px * var(--font-scale)); }
.tema-mala .summary__row--total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border-strong); font-family: var(--font-heading); font-size: calc(20px * var(--font-scale)); font-weight: 800; color: var(--title); }
.tema-mala .summary__note { margin: 12px 0 0; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.tema-mala .coupon { display: flex; gap: 8px; margin: 15px 0; }
.tema-mala .coupon .field { flex: 1 1 auto; min-height: 44px; }
.tema-mala .coupon .btn { min-height: 44px; padding-inline: 16px; }

/* -------------------------------- ADIMLAR -------------------------------- */
.tema-mala .steps { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 32px; padding: 0; list-style: none; }
.tema-mala .steps__item { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: calc(14px * var(--font-scale)); }
.tema-mala .steps__no { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tema-mala .steps__item.is-aktif { color: var(--title); font-weight: 700; }
.tema-mala .steps__item.is-aktif .steps__no { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tema-mala .steps__item.is-tamam .steps__no { background: var(--sari-blok); border-color: var(--sari-blok-koyu); color: var(--kraft-900); }

/* ------------------------------- LİSTELER -------------------------------- */
.tema-mala .listlayout { display: grid; gap: 30px; align-items: start; }
@media (min-width: 980px) { .tema-mala .listlayout { grid-template-columns: 244px minmax(0, 1fr); } }
.tema-mala .listlayout > * { min-width: 0; }
.tema-mala .listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 11px 13px; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--surface); }
.tema-mala .listbar select { width: auto; min-width: 182px; min-height: 40px; padding-block: 7px; }
.tema-mala .filters { border: var(--mala-cizgi); border-radius: var(--radius); padding: 15px; }
.tema-mala .filters__title { margin: 0 0 8px; color: var(--title); font-family: var(--font-heading); font-size: calc(14px * var(--font-scale)); font-weight: 700; }
.tema-mala .filters__list { margin: 0 0 15px; padding: 0; list-style: none; display: grid; gap: 8px; }
.tema-mala .filters__list a { color: var(--text); font-size: calc(14px * var(--font-scale)); text-decoration: none; }
.tema-mala .filters__list a:hover { color: var(--accent); text-decoration: underline; }

/* --------------------------------- HESAP --------------------------------- */
.tema-mala .acclayout { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .tema-mala .acclayout { grid-template-columns: 228px minmax(0, 1fr); } }
.tema-mala .acclayout > * { min-width: 0; }
.tema-mala .accnav { display: grid; gap: 2px; border: var(--mala-cizgi); border-radius: var(--radius); padding: 7px; }
.tema-mala .accnav a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: calc(14px * var(--font-scale)); text-decoration: none; }
.tema-mala .accnav a:hover { background: var(--surface); color: var(--title); text-decoration: none; }
.tema-mala .accnav a.is-aktif,
.tema-mala .accnav a[aria-current] { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.tema-mala .addr-grid,
.tema-mala .contact-grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .tema-mala .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tema-mala .contact-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
.tema-mala .statcards { display: grid; gap: var(--mala-oluk); grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
@media (min-width: 820px) { .tema-mala .statcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tema-mala .statcard { padding: 18px; border: var(--mala-cizgi); border-radius: var(--radius); background: var(--card-bg); }
.tema-mala .statcard strong { display: block; font-family: var(--font-heading); font-size: calc(27px * var(--font-scale)); font-weight: 800; color: var(--title); font-variant-numeric: tabular-nums; }
.tema-mala .statcard span { color: var(--muted); font-size: calc(13px * var(--font-scale)); }

/* ------------------------- YANA KAYAN TABLOLAR --------------------------- */
.tema-mala .table-scroll,
.tema-mala .responsive,
.tema-mala .kargo-tablo,
.tema-mala .krs-tablo-kap { overflow-x: auto; }
.tema-mala .kargo-tablo table { width: 100%; border-collapse: collapse; }
.tema-mala .kargo-tablo th,
.tema-mala .kargo-tablo td { padding: 11px 14px; text-align: left; border: var(--mala-cizgi); }
.tema-mala .kargo-tablo th { background: var(--surface); color: var(--title); font-family: var(--font-heading); font-weight: 700; }

/* --------------------------- KARŞILAŞTIRMA ------------------------------- */
.tema-mala .krs-ekle__btn { min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); font-family: var(--font-body); font-size: calc(12px * var(--font-scale)); font-weight: 600; }
.tema-mala .krs-ekle__btn:hover { background: none; color: var(--accent); text-decoration: underline; }

/* ----------------------------- BAYİ PANELİ ------------------------------- */
/* Yapı marketinde B2B ORANI YÜKSEK: usta, müteahhit ve site yönetimi bayi
   fiyatıyla alır. Panel sarı blokla işaretlendi — sayfadaki ikinci sarı alan
   ve o da bir HESAP alanıdır. */
.tema-mala .bayi-panel { margin-block: 16px; padding: 15px; border: 1px solid var(--sari-blok-koyu); border-left-width: 4px; border-radius: var(--radius); background: var(--sari-blok); color: var(--kraft-900); }
.tema-mala .bayi-panel__head { color: var(--kraft-900); font-family: var(--font-heading); font-weight: 700; }

/* --------------------- TEMA ÖNİZLEME ÇUBUĞU (personel) ------------------- */
.tema-mala .tema-onizleme { position: sticky; top: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; background: var(--kraft-900); color: #fff; font-size: calc(13px * var(--font-scale)); }
.tema-mala .tema-onizleme__ayrinti { color: rgba(255, 255, 255, .74); }
.tema-mala .tema-onizleme__eylemler { display: flex; gap: 8px; }
.tema-mala .tema-onizleme__btn { min-height: 32px; padding: 6px 13px; border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 12px; }
.tema-mala .tema-onizleme__btn--birincil { background: var(--sari-blok); border-color: var(--sari-blok); color: var(--kraft-900); }

/* ==========================================================================
   ALT BİLGİ
   --------------------------------------------------------------------------
   Zemin kraft-900; metin beyazın %80'i → ölçüldü 13,3:1.
   ÖLÇÜLMÜŞ TUZAK (bu depoda BEŞİNCİ kez): `.govde a:not([class])` (0,2,1)
   `.mala-alt__dip a` (0,1,1) kuralını yener ve telif bağlantısını soluk
   renge düşürür. Aşağıdaki kural bilerek `.tema-mala` ile öneklidir.
   ========================================================================== */
.tema-mala .mala-alt { margin-top: auto; background: var(--kraft-900); color: color-mix(in srgb, #fff 80%, transparent); }

.tema-mala .mala-bulten { background: var(--kraft-800); border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent); }
.tema-mala .mala-bulten__ic { padding-block: 40px; }
.tema-mala .mala-bulten .bulten { margin: 0; padding: 0; background: none; border: 0; }
.tema-mala .mala-bulten .bulten__ic { display: grid; gap: 20px 40px; align-items: center; }
@media (min-width: 900px) { .tema-mala .mala-bulten .bulten__ic { grid-template-columns: minmax(0, 1fr) minmax(310px, 430px); } }
.tema-mala .mala-bulten .bulten__baslik { margin: 0 0 8px; color: #fff; font-size: calc(23px * var(--font-scale)); line-height: 1.25; }
.tema-mala .mala-bulten .bulten__aciklama { margin: 0; max-width: 58ch; font-size: calc(14px * var(--font-scale)); line-height: 1.65; color: color-mix(in srgb, #fff 82%, transparent); }
.tema-mala .mala-bulten .bulten__aciklama strong { color: #fff; font-weight: 700; }
.tema-mala .mala-bulten .bulten__form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.tema-mala .mala-bulten .bulten__form input { flex: 1 1 220px; background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 38%, transparent); color: #fff; }
.tema-mala .mala-bulten .bulten__form input::placeholder { color: color-mix(in srgb, #fff 66%, transparent); }
/* SARI BLOK ZEMİNDİR: düğme metni koyu. */
.tema-mala .mala-bulten .bulten__form .btn { flex: none; background: var(--sari-blok); border-color: var(--sari-blok); color: var(--kraft-900); }
.tema-mala .mala-bulten .bulten__form .btn:hover { background: var(--sari-blok-koyu); border-color: var(--sari-blok-koyu); color: var(--kraft-900); }
.tema-mala .mala-bulten .bulten__hata { margin: 10px 0 0; color: var(--sari-blok); font-size: calc(14px * var(--font-scale)); }

.tema-mala .mala-alt__ic { display: grid; gap: 30px var(--mala-oluk); padding-block: 48px 36px; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); }
@media (min-width: 1000px) { .tema-mala .mala-alt__ic { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.tema-mala .mala-alt__marka { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-size: calc(22px * var(--font-scale)); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.tema-mala .mala-alt__ozet { margin: 12px 0 0; max-width: 36ch; font-size: calc(14px * var(--font-scale)); line-height: 1.7; }
.tema-mala .mala-alt h3 { margin: 0 0 13px; color: #fff; font-family: var(--font-heading); font-size: calc(14px * var(--font-scale)); font-weight: 700; }
.tema-mala .mala-alt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tema-mala .mala-alt__ic a { color: inherit; font-size: calc(14px * var(--font-scale)); text-decoration: none; }
.tema-mala .mala-alt__ic a:hover { color: #fff; text-decoration: underline; }

.tema-mala .mala-alt__sosyal { display: flex; gap: 10px; margin-top: 16px; }
.tema-mala .mala-alt__sosyal a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, #fff 26%, transparent); border-radius: var(--radius-sm); }
.tema-mala .mala-alt__sosyal a:hover { background: var(--sari-blok); border-color: var(--sari-blok); color: var(--kraft-900); }
.tema-mala .mala-alt__sosyal svg { width: 17px; height: 17px; }

.tema-mala .mala-alt__dip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-block: 18px; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); font-size: calc(13px * var(--font-scale)); }
.tema-mala .mala-alt__dip p { margin: 0; }
.tema-mala .mala-alt__dip a { color: color-mix(in srgb, #fff 84%, transparent); }
.tema-mala .mala-alt__dip a:hover { color: #fff; }
.tema-mala .mala-alt__odeme { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tema-mala .mala-alt form { color: color-mix(in srgb, #fff 82%, transparent); }
.tema-mala .mala-alt input[type="email"],
.tema-mala .mala-alt input[type="text"],
.tema-mala .mala-alt input[type="search"] { background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 38%, transparent); color: #fff; }
.tema-mala .mala-alt input::placeholder { color: color-mix(in srgb, #fff 66%, transparent); }

/* ==========================================================================
   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.

   ÖLÇÜLMÜŞ TUZAK (lale ve rotor'da yaşandı): `.mala-ust` `position: relative`
   + `z-index` ile bir YIĞIN BAĞLAMI açıyor; içindeki şeridin z-index'i o
   bağlamın dışına çıkmaz. Kabın değeri (80) çekmeceden (60) ve perdeden (59)
   YÜKSEK olmak zorunda, yoksa hamburger düğmesi perdenin altında kalır ve
   `shop.js` menüyü yalnız o düğmeyle kapattığı için menü KAPANMAZ.
   ========================================================================== */
.tema-mala .mala-mobil-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(360px, 88vw);
  padding: calc(var(--mala-ust-yukseklik) + 20px) 22px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--page-bg);
  border-right: var(--mala-cizgi);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .26s var(--ease), visibility .26s;
}

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

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

.tema-mala .mala-mobil-menu summary::-webkit-details-marker { display: none; }
.tema-mala .mala-mobil-menu summary::after { content: "+"; color: var(--muted); font-size: 20px; }
.tema-mala .mala-mobil-menu details[open] summary::after { content: "−"; }
.tema-mala .mala-mobil-menu details ul { padding: 4px 0 10px 14px; }
.tema-mala .mala-mobil-menu details a { display: block; min-height: 40px; padding: 9px 0; color: var(--text); font-family: var(--font-body); font-size: calc(15px * var(--font-scale)); font-weight: 400; text-decoration: none; }
.tema-mala .mala-mobil-menu .mala-arama { max-width: none; margin-bottom: 18px; }

/* Perde çekmecenin KARDEŞİ, çocuğu değil: çocuk olsaydı `overflow-y: auto`
   kutusu onu kırpardı. */
.tema-mala .mala-perde {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(28, 26, 23, .48);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s;
}

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

@media (max-width: 1100px) {
  .tema-mala { --mala-ust-yukseklik: 68px; }
  .tema-mala .mala-menu { display: none; }
  .tema-mala .mala-mobil-dugme { display: inline-flex; }
  .tema-mala .mala-serit__ic { gap: 12px; }
  .tema-mala .mala-marka { font-size: calc(20px * var(--font-scale)); }
}

@media (max-width: 820px) {
  /* Ana satırdaki arama daralınca kullanışsızlaşıyor; tam genişlik ikinci
     satıra iniyor — İKONUN ARKASINA GİZLENMİYOR. */
  .tema-mala .mala-serit__ic { flex-wrap: wrap; padding-bottom: 12px; }
  .tema-mala .mala-arama { order: 3; flex-basis: 100%; max-width: none; }
  .tema-mala .mala-araclar { order: 2; }
  .tema-mala .mala-kahraman h1 { font-size: calc(30px * var(--font-scale)); line-height: calc(38px * var(--font-scale)); }
  .tema-mala .summary,
  .tema-mala .checkout__ozet,
  .tema-mala .mala-serit { position: static; }
}

@media (max-width: 700px) {
  .tema-mala :where(h2) { font-size: calc(23px * var(--font-scale)); line-height: calc(31px * var(--font-scale)); }
  .tema-mala .mala-sayfa__basi h1,
  .tema-mala .mala-urunbilgi h1,
  .tema-mala .mala-yazisayfa h1 { font-size: calc(24px * var(--font-scale)); }
  .tema-mala .mala-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tema-mala .mala-alis__ekle { flex: 1 1 100%; }
  .tema-mala .mala-katalog__basi { flex-direction: column; align-items: flex-start; }
}

/* Dokunmatik hedef en az 44×44 (WCAG 2.5.8). */
@media (pointer: coarse) {
  .tema-mala .mala-arac,
  .tema-mala .mala-menu > li > a,
  .tema-mala .accnav a,
  .tema-mala .pagination a,
  .tema-mala .pagination span { min-height: var(--mala-dokunma); }

  .tema-mala .mala-alt__ic a,
  .tema-mala .mala-alt__dip a { display: inline-flex; align-items: center; min-height: var(--mala-dokunma); }
  .tema-mala .mala-alt ul { gap: 2px; }
}

/* ==========================================================================
   HAREKET AZALTMA VE BASKI
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tema-mala *,
  .tema-mala *::before,
  .tema-mala *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tema-mala .mala-raf:hover .mala-raf__foto img,
  .tema-mala .mala-urun:hover .mala-urun__gorsel img,
  .tema-mala .mala-yazi:hover .mala-yazi__foto img { transform: none; }
}

@media print {
  .tema-mala .mala-hizmet,
  .tema-mala .mala-serit,
  .tema-mala .mala-alt,
  .tema-mala .mala-mobil-menu,
  .tema-mala .mala-perde,
  .tema-mala .tema-onizleme,
  .tema-mala .exit-offer,
  .tema-mala .dij-cubuk { display: none !important; }

  .tema-mala { background: #fff; color: #000; font-size: 12pt; }
  .tema-mala .container { max-width: none; padding: 0; }
  /* HESAP ÇIKTISI KAĞITTA DA OKUNMALI: usta listeyi yazdırıp şantiyeye
     götürüyor. Sarı blok baskıda beyazlar ama çerçevesi kalır. */
  .tema-mala .mala-hesap-kap,
  .tema-mala .bayi-panel { background: #fff !important; border: 1px solid #999; }
  .tema-mala .mala-kutu,
  .tema-mala .datatable th,
  .tema-mala .datatable td { border-color: #999; }
  .tema-mala a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}