/* ==========================================================================
   VAST — MOBİLYA / EV MOBİLYASI TEMASI · TAM STİL DOSYASI
   ==========================================================================
   BU DOSYA public/css/shop.css'İN ÜSTÜNE YAMA DEĞİLDİR.
   `resources/views/themes/vast/shop/layouts/app.blade.php` çekirdek
   `css/shop.css` dosyasını HİÇ YÜKLEMEZ; aşağıdaki sıfırlama, ızgara,
   tipografi ve bileşen kuralları temanın TEK stil kaynağıdır.

   NİÇİN TOKEN SÖZLÜĞÜNÜN TAMAMI BURADA
   ------------------------------------
   Vitrin YAPRAK stil dosyaları (css/shop-karsilastirma.css,
   css/shop-birim.css, css/shop-dijital.css, css/shop-teslimat.css,
   css/shop-sepet-zekasi.css) çekirdek `:root` sözlüğünden `var(--…)` okur ve
   düzen onları BU dosyadan SONRA bağlar. shop.css yüklenmediği için o
   değişkenleri burada tanımlamak zorunludur; tanımlanmazsa karşılaştırma
   şeridi, birim fiyat satırı ve teslimat randevusu RENKSİZ kalır (ölçülebilir
   gerileme, hata mesajı yok).

   ERİŞİLEBİLİRLİK SÖZLEŞMESİ (kırık beyaz zemin #faf9f6 üstünde ölçüldü)
   ---------------------------------------------------------------------
     --title            #2f2e2b → 12,89:1
     --text             #4a4842 →  8,68:1
     --muted            #6f6c63 →  4,99:1
     --accent           #6b7250 →  4,81:1
     --primary          #3f4630 →  9,37:1   (beyaz metinle 9,86:1)
     --control-border   #8a8679 →  3,46:1   (WCAG 1.4.11 eşiği 3:1)
     --on-accent        #ffffff → zeytin --accent (#6b7250) üstünde 5,06:1
     --on-safran        #2f2e2b → safran (#e8b93f) üstünde 7,40:1
   ZEMİN belirteci (--page-bg, --card-bg, --surface, --border) METİN rengi
   OLARAK KULLANILMAZ; rol karışması koyu bir temada metni görünmez yapar.

   GEÇİŞ KISAYOLUNDA `all` KULLANILMAZ: her geçiş yalnızca adı verilmiş
   özellikleri (color, border-color, background-color, opacity) hedefler ve
   animasyon yalnızca transform/opacity üzerinden yapılır.
   `prefers-reduced-motion` bloğu dosyanın sonundadır.

   ASCII DIŞI `content` YOK: Türkçe kodlama kapısı (pre-commit) bunu yakalar,
   ayrıca dosya bir kez ANSI okunursa çift kodlanır. Gereken işaretler kaçış
   dizisiyle yazılıdır (`content: "\2014"`).
   ========================================================================== */

:root {
  /* ---------- Ham palet: kırık beyaz kâğıt, grafit, zeytin ---------- */
  --kagit-000: #ffffff;
  --kagit-050: #fffefb;
  --kagit-100: #faf9f6;
  --kagit-200: #f2f0ea;
  --kagit-300: #e3e0d8;
  --kagit-400: #cfcbbf;

  --grafit-900: #21201d;
  --grafit-800: #2f2e2b;
  --grafit-600: #4a4842;
  --grafit-500: #6f6c63;
  --grafit-400: #8a8679;

  --zeytin-800: #2f3423;
  --zeytin-700: #3f4630;
  --zeytin-600: #545c3e;
  --zeytin-500: #6b7250;
  --zeytin-200: #d7dac9;
  --zeytin-100: #eceee3;

  /* Sarı YALNIZCA tek bir vurgu ögesidir (rozet / dekoratif daire). */
  --safran-500: #e8b93f;
  --safran-100: #fbf1d4;

  /* ---------- Çekirdek sözlükle AYNI ADLAR (yaprak CSS bunları okur) ---------- */
  --title: #2f2e2b;
  --text: #4a4842;
  --muted: #6f6c63;
  --border: #e3e0d8;
  --border-strong: #cfcbbf;
  --surface: #f2f0ea;
  --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: #8a8679;
  --control-border-strong: #5f5c52;

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

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --pill: 0px;

  /* Bu tema gölgesizdir: ayrım 1px açık gri çizgiyle yapılır. Yaprak CSS
     yine de --shadow* okuyor; hepsi `none` verilir ki miras gölge sızmasın. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 1px 0 var(--border);

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

  /*
   | EB Garamond (serif başlık) + Work Sans (sade gövde).
   | 'Cormorant Garamond' BİLEREK SEÇİLMEDİ: kardeş sektör temalarından biri
   | (seasy) onu kullanıyor ve iki tema aynı serifle çizilince görsel kimlik
   | yalnızca renge iner — bu temanın var olma nedeni tam olarak o sonuçtan
   | kaçınmak. 'Playfair Display' de çekirdek `sicak` temasında kullanılıyor.
   */
  --font-heading: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;

  --primary: #3f4630;
  --primary-strong: #2f3423;
  --primary-soft: #eceee3;
  --on-primary: #ffffff;
  --primary-hover: #545c3e;
  --primary-focus: #6b7250;
  --primary-line: #d7dac9;

  --accent: #6b7250;
  --accent-strong: #3f4630;
  --accent-light: #d7dac9;
  --accent-soft: #eceee3;
  /*
   * DÜŞMAN DENETİMİNDE ÖLÇÜLDÜ VE DÜZELTİLDİ — 2,68:1 → 5,06:1.
   *
   * `--on-accent` SÖZLEŞMESİ: "--accent ZEMİNİ üstünde okunan metin rengi".
   * Değer #2f2e2b (koyu grafit) idi; zeytin yeşili --accent (#6b7250)
   * üstünde yalnızca 2,68:1 veriyor — gövde eşiği 4,5:1.
   *
   * Tarayıcıda ölçülen kırık: shop-listeler.css içindeki .vl-rozet--one
   * kuralı zemini var(--accent), metnini var(--on-accent) yapıyor; /temalar
   * sayfasındaki "Öne çıkan" rozeti 2,68:1 ile OKUNAKSIZDI.
   *
   * NOT — BU BLOĞUN İÇİNDE SÜS PARANTEZ YAZILMAZ, YORUMDA BİLE.
   * TemaVastTest :root bloğunu TEKİL bir düzenli ifadeyle, İLK kapanış
   * parantezine kadar okuyor. Açıklamaya örnek bir CSS kuralı ya da o
   * ifadenin kendisi yazılınca blok erken kesiliyor ve sonrasındaki
   * belirteçler (--page-bg ve devamı) ölçüme hiç girmiyor; test
   * "Tanımdaki belirteç CSS'te yok: --page-bg" diye düşüyor. Ölçüldü.
   *
   * Eski değer aslında BAŞKA bir zemin için seçilmişti: safran rozeti
   * (--safran-500 #e8b93f). O AÇIK bir zemindir ve KOYU metin ister; ama
   * `--on-accent` o zeminin değil, `--accent`in sözleşmesidir. İki farklı
   * zemin tek belirteci paylaşamaz — safran için ayrı ad açıldı
   * (--on-safran) ve .vast-etiket--sari onu kullanıyor.
   *
   * KONTRAST: #ffffff / --accent #6b7250 → 5,06:1  (gövde eşiği 4,5:1)
   */
  --on-accent: #ffffff;
  /* Safran rozetinin KENDİ metin rengi: #2f2e2b / #e8b93f → 7,40:1 */
  --on-safran: #2f2e2b;

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

  --btn-radius: 0px;
  --btn-tracking: 0.14em;
  --btn-transform: none;
  --btn-height: 48px;

  --heading-tracking: 0.14em;
  --heading-transform: none;
  --section-space: 72px;

  /* ---------- Temanın kendi ölçü sistemi ---------- */
  --vast-kenar: clamp(16px, 3.6vw, 56px);
  --vast-mozaik-bosluk: 14px;
  --vast-cizgi: 1px solid var(--border);
  --vast-dokunma: 44px;
}

/* ==========================================================================
   1) SIFIRLAMA — temanın kendi sıfırlaması
   ========================================================================== */

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

html {
  /*
   * `overflow-x: clip` BİLEREK `hidden` DEĞİL.
   * `hidden` bir KAYDIRMA KABI yaratır ve içindeki `position: sticky`
   * öğelerini bozar — ürün sayfasının sağ kolonu tam bu yüzden yapışmayı
   * bırakıyordu. `clip` kaydırma kabı yaratmaz, yalnızca 1px'lik yuvarlama
   * taşmalarını kırpar; desteklemeyen eski tarayıcıda `visible`a düşer ve
   * hiçbir kap taşmadığı için sonuç yine aynıdır.
   */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

/*
 | İKİ TAŞIYICI AİLE AÇIKÇA YAZILI (yalnızca `var(--font-…)` DEĞİL).
 | İki nedeni var: (1) `:root` bloğu herhangi bir nedenle uygulanmazsa
 | (panelden gelen ince ayar <style>'ı bozulursa, bir eklenti araya girerse)
 | sayfa yine kendi yazı tipiyle çizilir; (2) tasarım ayrışma denetimi
 | (`php artisan cea:tasarim-ayrisma`) temanın yazı tipi imzasını literal
 | `font-family` bildirimlerinden okuyor — belirteç arkasına saklanan bir aile
 | ölçümde "tanımsız" görünüyordu.
 */
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(15px * var(--font-scale));
  font-weight: 300;
  line-height: 1.7;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--title);
  font-family: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.24;
}

p {
  margin: 0 0 1em;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* iOS ZORLA YAKINLAŞTIRMA KAPISI: form alanı 16px'in ALTINA DÜŞEMEZ. */
input,
select,
textarea {
  font-size: 16px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Fare kullanıcısına halka basılmaz ama klavye kullanıcısı ASLA halkasız
   kalmaz: :focus-visible zaten bunu yapar, aşağıdaki kural yalnızca
   :focus-visible'ı desteklemeyen tarayıcıda halkayı KORUR. */
:focus:not(:focus-visible) {
  outline-color: transparent;
}

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

/* JS'in (public/js/shop.js) varyant satırına yazdığı yardımcı sınıflar —
   çekirdek shop.css yüklenmediği için burada tanımlı olmak ZORUNDA. */
.muted {
  color: var(--muted);
}

.text-success {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

.nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   2) KAPSAYICI
   ========================================================================== */

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

.vast-en--dar {
  max-width: 880px;
}

/* Kenar boşluksuz tam genişlik şeridi (fotoğraf perdeleri). */
.vast-tam {
  width: 100%;
  margin: 0;
}

/* ==========================================================================
   3) BAŞLIK — ÇOK İNCE, TEK SATIR, MASAÜSTÜNDE 64px'İ GEÇMEZ
   ========================================================================== */

.vast-ust {
  position: relative;
  z-index: 20;
  background: var(--page-bg);
  border-bottom: var(--vast-cizgi);
}

.vast-ust__sira {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 36px);
  min-height: 56px;
}

/*
 | KELİME MARKASI DARALABİLİR (`flex: 0 1 auto` + `min-width: 0`).
 | İlk yazımda `flex: 0 0 auto` ve sabit 20px/0.42em idi. ÖLÇÜLDÜ: 320-414px
 | arasında "VAST MOBİLYA" 182px'lik ikon bloğunu görüş alanının DIŞINA itiyordu
 | (`.vast-eylem` sağ kenarı 450px, görünüm 320px) ve `overflow-x: clip`
 | yüzünden sepet ile menü düğmesi KIRPILIP erişilemez hâle geliyordu — yatay
 | kaydırma 0 olduğu için ölçüm "temiz" görünüyordu, hata sessizdi.
 | Bugün punto ve harf aralığı görünümle birlikte küçülür.
 */
.vast-marka {
  display: inline-flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: clamp(14px, 3.4vw, 20px);
  font-weight: 500;
  letter-spacing: clamp(0.16em, 0.9vw, 0.42em);
  color: var(--title);
}

/* Kelime markasının son harfinden sonraki harf aralığı sağda boşluk bırakır;
   optik hizayı geri almak için o kadar geri çekilir. Tek satırda kalır ve
   gerçekten sığmazsa üç noktayla kısalır — kırpılıp yok olmaz. */
.vast-marka__ad {
  display: block;
  margin-right: -0.16em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vast-marka__alt {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--muted);
}

/* --- yatay, ince, küçük puntolu metin menü --- */
.vast-menu {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 | SARMA (wrap) BİLEREK AÇIK, `overflow: hidden` DEĞİL.
 | İlk yazımda kap `nowrap` + `overflow: hidden` idi: kategori adları uzun olan
 | bir mağazada son menü maddesi SESSİZCE kırpılıyordu (901px'te ölçüldü —
 | hata yok, uyarı yok, madde yok). Sarmayla en kötü durumda başlık ikinci
 | satıra taşar; hiçbir bağlantı kaybolmaz. 1040px ve üstünde tek satır kalır
 | (ölçüldü), yani masaüstünde başlık 64px'i geçmez.
 */
.vast-menu__sira {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  flex-wrap: wrap;
  min-width: 0;
}

.vast-menu__bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kısa maddeler ("SEÇKİ" 42px ölçüldü) de 44x44 kapısını geçmek zorunda. */
  min-width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.vast-menu__bag:hover,
.vast-menu__bag:focus-visible {
  color: var(--title);
  border-bottom-color: var(--accent);
}

.vast-menu__bag[aria-current='page'] {
  color: var(--title);
  border-bottom-color: var(--title);
}

/* --- sağda YALNIZCA üç küçük ikon; metin yok --- */
.vast-eylem {
  position: relative; /* arama panelinin çapası */
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex: 0 0 auto;
}

.vast-ikon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vast-dokunma);
  height: var(--vast-dokunma);
  padding: 0;
  background: none;
  border: 0;
  color: var(--title);
  cursor: pointer;
  transition: opacity 160ms var(--ease);
}

.vast-ikon-btn:hover {
  opacity: 0.62;
}

/* Sepet sayacı: küçük üst simge. */
.vast-sayac {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: var(--accent);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0;
  text-align: center;
}

/* --- arama: başlıkta GÖRÜNMEZ, ikona basınca açılır (JS'siz, <details>) --- */
.vast-ara {
  display: inline-flex;
}

.vast-ara__ac {
  list-style: none;
}

.vast-ara__ac::-webkit-details-marker {
  display: none;
}

/*
 | PANEL SAĞA ÇAPALI (`right: 0`) VE GÖRÜŞ ALANIYLA SINIRLI.
 | Sağ kenara çapalanınca panelin sağ kenarı kapsayıcının sağ dolgusuyla
 | hizalanır; genişlik `calc(100vw - 2 * kenar)` ile sınırlı olduğu için sol
 | kenarı da her zaman görüş alanının içinde kalır. Sola çapalı bir panel
 | 320px'te ekranın dışına taşıyordu.
 */
.vast-ara__panel {
  position: absolute;
  z-index: 25;
  top: calc(100% + 1px);
  right: 0;
  width: min(460px, calc(100vw - 2 * var(--vast-kenar)));
  padding: 14px 16px;
  background: var(--kagit-050);
  border: 1px solid var(--border-strong);
}

.vast-arama {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vast-arama__alan {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--vast-dokunma);
  padding: 0 12px;
  background: var(--kagit-000);
  border: 1px solid var(--control-border);
  color: var(--title);
}

.vast-arama__alan::placeholder {
  color: var(--muted);
}

.vast-arama__gonder {
  flex: 0 0 auto;
  min-height: var(--vast-dokunma);
  padding: 0 20px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  letter-spacing: var(--btn-tracking);
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.vast-arama__gonder:hover {
  background: var(--primary-hover);
}

/* --- mobil menü (public/js/shop.js `#mobile-menu` kimliğini arar) --- */
.vast-mobil {
  display: none;
  padding: 8px 0 20px;
  border-top: var(--vast-cizgi);
}

.vast-mobil.is-open {
  display: block;
}

.vast-mobil__arama {
  padding-block: 12px;
  border-bottom: var(--vast-cizgi);
}

.vast-mobil a,
.vast-mobil summary {
  display: flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  border-bottom: var(--vast-cizgi);
  cursor: pointer;
}

.vast-mobil details a {
  padding-left: 18px;
  color: var(--muted);
}

.vast-mobil summary::-webkit-details-marker {
  display: none;
}

.vast-mobil summary::after {
  content: "\002B";
  margin-left: auto;
  color: var(--muted);
}

.vast-mobil details[open] > summary::after {
  content: "\2212";
}

.vast-burger {
  display: none;
}

/* ==========================================================================
   4) FOTOĞRAF PERDELERİ — tema kimliğinin merkezi
   ========================================================================== */

.vast-perde {
  position: relative;
  margin: 0;
}

.vast-perde__resim {
  width: 100%;
  height: clamp(280px, 62vh, 660px);
  object-fit: cover;
  object-position: center;
}

.vast-perde__yazi {
  margin: 10px 0 0;
  padding-inline: var(--vast-kenar);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* İki büyük yaşam alanı fotoğrafı yan yana. */
.vast-ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vast-mozaik-bosluk);
}

.vast-ikili__resim {
  width: 100%;
  height: clamp(240px, 42vw, 480px);
  object-fit: cover;
}

/* ==========================================================================
   5) BÖLÜM BAŞLIĞI — İMZA AYRINTI
   --------------------------------------------------------------------------
   İnce yatay çizgi başlığın ÜSTÜNDE durur, başlığı KESMEZ; başlığın iki
   yanında geniş boşluk vardır. Ortalanmış, küçük puntolu, harf aralıklı serif.
   ========================================================================== */

.vast-bolum {
  padding-block: clamp(40px, 6vw, var(--section-space));
}

.vast-bolum__ust {
  padding-top: 22px;
  border-top: var(--vast-cizgi);
  text-align: center;
}

.vast-bolum__baslik {
  margin: 0 auto;
  padding-inline: clamp(0px, 6vw, 120px);
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: var(--heading-tracking);
  color: var(--title);
}

.vast-bolum__not {
  margin: 8px auto 0;
  max-width: 62ch;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.vast-bolum__govde {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Sarının TEK kullanımı: bölüm başlığının altındaki dekoratif daire. */
.vast-nokta {
  display: block;
  width: 6px;
  height: 6px;
  margin: 14px auto 0;
  background: var(--safran-500);
  border-radius: 50%;
}

/* ==========================================================================
   6) ÜRÜN MOZAİĞİ — ÇERÇEVE YOK, GÖLGE YOK, DAR BOŞLUK
   ========================================================================== */

.vast-mozaik {
  display: grid;
  /* ÇIPLAK `1fr` YASAK: taşan içerik ızgarayı genişletir ve sayfa yatay kayar. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vast-mozaik-bosluk);
}

.vast-urun {
  position: relative; /* ürün adı bağlantısının kaplama çapası */
  min-width: 0;
}

.vast-urun__resim-bag {
  display: block;
  position: relative;
  background: var(--kagit-200);
}

.vast-urun__resim {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: opacity 220ms var(--ease);
}

/* Fotoğrafı olmayan ürün: boş kutu değil, ürün adının baş harfi. */
.vast-urun__bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  font-family: var(--font-heading);
  font-size: 40px;
  color: var(--border-strong);
}

.vast-urun__isaret {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.vast-etiket {
  padding: 2px 7px;
  background: var(--kagit-000);
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--title);
}

.vast-etiket--sari {
  background: var(--safran-500);
  border-color: var(--safran-500);
  /* AÇIK safran zemin KOYU metin ister; --on-accent artık --accent'in
     (zeytin) sözleşmesidir ve beyazdır. Bkz. :root açıklaması. 7,40:1 */
  color: var(--on-safran);
}

.vast-etiket--bitti {
  background: var(--grafit-800);
  border-color: var(--grafit-800);
  color: var(--kagit-000);
}

/* Altında SADECE iki satır: ürün adı ve fiyat. */
.vast-urun__govde {
  padding-top: 10px;
}

/*
 | DOKUNMA HEDEFİ KARTIN TAMAMI.
 | Metin 13px/19px kalır (temanın sessiz tipografisi) ama tıklanabilir alan
 | `::after` kaplamasıyla fotoğraf + metin bloğunun tamamına yayılır. Ölçüm:
 | önce 137x19 px (kapının altında), sonra 137x~420 px.
 */
.vast-urun__ad {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--title);
}

.vast-urun__ad::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vast-urun__ad:hover {
  color: var(--accent);
}

.vast-urun:hover .vast-urun__resim {
  opacity: 0.86;
}

/* Eylem satırı kaplamanın ÜSTÜNDE durur; yoksa tıklama ürün sayfasına gider
   ve iki denetim de (sepete ekle / karşılaştır) hiç çalışmaz. */
.vast-urun__eylem {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 10px;
}

.vast-urun__sepet {
  margin: 0;
}

/*
 | KARTTAKİ KARŞILAŞTIRMA DENETİMİ — çekirdek yaprak dosyası
 | (css/shop-karsilastirma.css) onu TAM GENİŞLİKTE, ÇERÇEVELİ, yuvarlatılmış
 | bir düğme yapıyor. Bu tema çerçevesiz ve gölgesiz bir galeri katalogudur;
 | o düğme mozaiğin içinde tek başına duran bir kutu olurdu. Aynı satırdaki
 | "SEPETE EKLE" ile aynı sessiz metin denetimine indirilir.
 |
 | SEÇİCİ ÖZGÜLLÜĞÜ (0,3,0) yaprak dosyanın (0,1,0) üstündedir, bu yüzden
 | yükleme sırası değişse de kural kazanır — @push('head') ile bağlanan
 | yaprak dosya tema CSS'inden SONRA gelebilir.
 */
.vast-urun .krs-ekle {
  margin: 0;
}

.vast-urun .krs-ekle--kart .krs-ekle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: var(--vast-dokunma);
  padding: 0;
  border: 0;
  /* Kardeş denetimle (.vast-btn--metin) AYNI çizgi belirteci: ikisi aynı
     satırda duruyor, iki farklı kalınlıkta alt çizgi görsel gürültü olurdu. */
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.vast-urun .krs-ekle--kart .krs-ekle__btn:hover {
  border-bottom-color: var(--accent);
  background: none;
  color: var(--accent);
}

/* Seçili durum RENKLE DEĞİL, dolu bir alt çizgi + koyu mürekkeple duyurulur;
   metin de "Karşılaştırmada"ya döner (renk tek başına anlam taşımaz). */
.vast-urun .krs-ekle--kart .krs-ekle__btn[aria-pressed='true'] {
  border-bottom: 2px solid var(--title);
  background: none;
  color: var(--title);
}

.vast-urun__fiyat {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--title);
}

.vast-urun__fiyat del {
  margin-left: 6px;
  font-weight: 300;
  color: var(--muted);
}

.vast-urun__ek {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ==========================================================================
   7) NUMARALI EDİTORYAL DİZİN (ana sayfa)
   ========================================================================== */

.vast-dizin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0 var(--vast-mozaik-bosluk);
  border-top: var(--vast-cizgi);
}

.vast-dizin__bag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: var(--vast-dokunma);
  padding: 10px 0;
  border-bottom: var(--vast-cizgi);
  transition: color 160ms var(--ease);
}

.vast-dizin__bag:hover {
  color: var(--accent);
}

.vast-dizin__no {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.vast-dizin__ad {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--title);
}

.vast-dizin__alt {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* ==========================================================================
   8) SAYFA YOLU
   ========================================================================== */

.vast-iz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Sayfa yolu bağlantıları da 44px dokunma kapısından geçer (ölçümde 62x19
   çıkıyordu). Metin 11px kalır, hedef büyür. */
.vast-iz a,
.vast-iz span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kısa kategori adları ("MODA" 36px ölçüldü) de kapıdan geçsin. */
  min-width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
}

.vast-iz a:hover {
  color: var(--accent);
}

.vast-iz__ayrac::before {
  content: "\2014";
}

/* ==========================================================================
   9) KATEGORİ — YATAY SÜZGEÇ ŞERİDİ (SOL KOLON YOK)
   ========================================================================== */

.vast-liste-basi {
  padding-bottom: 18px;
  border-bottom: var(--vast-cizgi);
}

.vast-liste-basi__ad {
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.06em;
}

.vast-liste-basi__not {
  margin: 8px 0 0;
  max-width: 72ch;
  font-size: 13px;
  color: var(--muted);
}

.vast-suzgec {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding-block: 12px;
  border-bottom: var(--vast-cizgi);
}

/*
 | SÜZGEÇ KUTUSU AÇILDIĞINDA TAM SATIR OLUR — MUTLAK KONUMLANDIRMA YOK.
 |
 | İlk yazımda panel `position: absolute` idi. Sağa yakın bir kutu açıldığında
 | 320px genişlikte panel görüş alanının dışına taşıyordu; `overflow-x: clip`
 | ile de taşan kısım KIRPILIYOR, yani süzgecin bir bölümü hiç görünmüyordu.
 | Bugün açık kutu esnek satırda %100 yer kaplıyor ve panel normal akışta
 | altına iniyor: hiçbir genişlikte taşma yok, JavaScript de gerekmiyor.
 */
.vast-suzgec__kutu {
  flex: 0 0 auto;
  min-width: 0;
}

.vast-suzgec__kutu[open] {
  flex: 1 1 100%;
}

.vast-suzgec__ac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--vast-dokunma);
  padding: 0 14px;
  background: var(--kagit-000);
  border: 1px solid var(--control-border);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--title);
  cursor: pointer;
  list-style: none;
}

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

.vast-suzgec__ac::after {
  content: "\002B";
  color: var(--muted);
}

.vast-suzgec__kutu[open] > .vast-suzgec__ac::after {
  content: "\2212";
}

.vast-suzgec__panel {
  width: 100%;
  max-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 16px;
  background: var(--kagit-000);
  border: 1px solid var(--border-strong);
}

/* Panel içeriği kolonlanır: uzun marka listesi tek sütunda uzayıp sayfayı
   germesin. `minmax(min(…), 1fr)` kalıbı 320px'te tek kolona düşer. */
.vast-suzgec__kolon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0 20px;
}

.vast-onay {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--vast-dokunma);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.vast-onay input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.vast-alan {
  display: block;
  margin-bottom: 10px;
}

.vast-alan > span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.vast-alan input,
.vast-alan select,
.vast-alan textarea {
  width: 100%;
  min-height: var(--vast-dokunma);
  padding: 8px 10px;
  background: var(--kagit-000);
  border: 1px solid var(--control-border);
  color: var(--title);
}

.vast-alan textarea {
  min-height: 96px;
  resize: vertical;
}

.vast-alan input:hover,
.vast-alan select:hover,
.vast-alan textarea:hover {
  border-color: var(--control-border-strong);
}

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

.vast-suzgec__sag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.vast-suzgec__sirala {
  min-height: var(--vast-dokunma);
  padding: 0 10px;
  background: var(--kagit-000);
  border: 1px solid var(--control-border);
  color: var(--title);
}

.vast-liste-sayi {
  padding-block: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.vast-liste-sayi strong {
  color: var(--title);
  font-weight: 500;
}

.vast-bos {
  padding: 64px 0;
  text-align: center;
}

.vast-bos h2 {
  font-size: 20px;
  letter-spacing: 0.1em;
}

.vast-bos p {
  margin: 10px 0 20px;
  color: var(--muted);
}

/* ==========================================================================
   10) SAYFALAMA — küçük numaralar, "daha fazla yükle" yok
   ========================================================================== */

.vast-sayfa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding-block: 40px;
}

.vast-sayfa a,
.vast-sayfa span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
  padding: 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
}

.vast-sayfa a:hover {
  color: var(--accent);
}

.vast-sayfa .is-current {
  color: var(--title);
  border-bottom: 1px solid var(--title);
}

/*
 | DEVRE DIŞI SAYFALAMA OKU — BELİRTEÇ ROLÜ DÜZELTİLDİ.
 |
 | `--border-strong` bir ÇİZGİ belirtecidir; metin rengi olarak kullanılması
 | deponun belirteç-rolü kuralını çiğniyordu (bkz. CssBelirtecRoluTest'in
 | çekirdek temalarda uyguladığı kural). Ölçüldü: #cfcbbf / #faf9f6 = 1,54:1
 | — ok neredeyse görünmüyordu. WCAG 1.4.3 devre dışı bileşenleri MUAF tutar,
 | yani bu bir ihlal değildi; ama "orada ama kullanılamaz" bilgisini
 | taşıyamayan bir gösterge işe yaramaz. Denetim kenarlığı belirteci
 | (#8a8679) ile aynı değere çekildi: 3,46:1 — etkin bağlantıdan (12,90:1)
 | açıkça daha soluk, ama görünür.
 */
.vast-sayfa .is-disabled {
  color: var(--control-border);
}

/* ==========================================================================
   11) ÜRÜN SAYFASI — SOL DİKEY FOTOĞRAF YIĞINI + SAĞ DAR YAPIŞKAN KOLON
   ========================================================================== */

.vast-detay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: 56px;
}

/* Dikey fotoğraf yığını: kaydırılan galeri DEĞİL, sayfa aşağı kaydıkça
   fotoğraflar geliyor. */
/*
 | `align-content: start` ZORUNLU.
 | Izgaranın varsayılan `align-content: normal` davranışı, kabında artan boşluğu
 | OTOMATİK boyutlu satırlara dağıtır. Ölçüldü: sağ kolon (taksit tablosu +
 | açılır bölümler) uzun olduğu için `.vast-detay` iki kolonunu eşitliyor,
 | fazla yükseklik fotoğraf satırlarına yayılıyor ve her fotoğrafın ALTINDA
 | 180px'lik boş bej bir alan kalıyordu. `start` ile fotoğraflar kendi
 | oranlarında kalır, artan boşluk kolonun sonunda toplanır.
 */
.vast-yigin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--vast-mozaik-bosluk);
  min-width: 0;
}

.vast-kare {
  margin: 0;
  background: var(--kagit-200);
}

.vast-kare__resim {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vast-kare__yazi {
  padding: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.vast-satin {
  min-width: 0;
}

.vast-satin__marka {
  display: inline-flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.vast-satin__ad {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.03em;
}

.vast-satin__kod {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.vast-satin__ozet {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--text);
}

.vast-fiyat {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: var(--vast-cizgi);
}

.vast-fiyat__tutar {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  color: var(--title);
}

.vast-fiyat del {
  margin-left: 10px;
  font-size: 15px;
  color: var(--muted);
}

.vast-fiyat__kdv {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.vast-secim {
  margin-top: 22px;
}

.vast-secim__ad {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.vast-secim__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vast-secim__oge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--vast-dokunma);
  padding: 0 14px;
  background: var(--kagit-000);
  border: 1px solid var(--control-border);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--title);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.vast-secim__oge:hover {
  border-color: var(--control-border-strong);
}

/* Seçili seçenek: renk TEK BAŞINA anlam taşımasın diye kenarlık da kalınlaşır
   ve radyo düğmesi ekran okuyucuya durumu zaten söyler. */
.vast-secim__oge:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.vast-secim__oge input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.vast-boya {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
}

.vast-stok {
  margin: 16px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.vast-adet-sira {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
}

.vast-adet {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--control-border);
  background: var(--kagit-000);
}

.vast-adet button {
  width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
  background: none;
  border: 0;
  color: var(--title);
  font-size: 16px;
  cursor: pointer;
}

.vast-adet button:disabled {
  color: var(--border-strong);
  cursor: not-allowed;
}

/*
 | ADET ALANININ AYIRICISI BİR DENETİM KENARLIĞIDIR — ÖLÇÜLEREK DÜZELTİLDİ.
 |
 | Ayırıcı `--border` (#e3e0d8) kullanıyordu; hesaplanmış renklerle ölçüldü:
 | beyaz üstünde 1,32:1. Bu, temanın KENDİ belirteç-rolü kuralını çiğniyor
 | (dekoratif çizgi belirteci etkileşimli denetim sınırı olarak kullanılamaz)
 | ve adet alanının nerede bitip artı/eksi düğmelerinin nerede başladığı
 | görsel olarak ayırt edilemiyordu (WCAG 1.4.11 eşiği 3:1). Kabın DIŞ
 | kenarlığı zaten `--control-border` (#8a8679 = 3,2:1) ile çizili; İÇ ayırıcı
 | da aynı role çekildi. Ölçüm: #8a8679 / #ffffff = 3,64:1.
 */
.vast-adet input {
  width: 56px;
  min-height: var(--vast-dokunma);
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--control-border);
  text-align: center;
  background: none;
}

/* Tek koyu-yeşil ana eylem. */
.vast-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-height);
  padding: 0 26px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--btn-tracking);
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}

.vast-btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.vast-btn:disabled {
  background: var(--border-strong);
  border-color: var(--border-strong);
  color: var(--grafit-800);
  cursor: not-allowed;
}

.vast-btn--genis {
  width: 100%;
  flex: 1 1 200px;
}

.vast-btn--bos {
  background: none;
  border-color: var(--control-border);
  color: var(--title);
}

.vast-btn--bos:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

/*
 | SESSİZ METİN DENETİMİ — tek başına da kullanılır (ürün kartı), bu yüzden
 | `.vast-btn` tabanına İHTİYAÇ DUYMAZ; tüm gerekli bildirimler burada.
 | Dokunma hedefi 44px'in altına inmez (yazı 10px olsa da).
 */
.vast-btn--metin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--vast-dokunma);
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.vast-btn--metin:hover {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.vast-not {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- açılır-kapanır (accordion) açıklama / ölçüler / teslimat --- */
.vast-acilir-grup {
  margin-top: 28px;
  border-top: var(--vast-cizgi);
}

.vast-acilir {
  border-bottom: var(--vast-cizgi);
}

.vast-acilir__bas {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--title);
  cursor: pointer;
  list-style: none;
}

.vast-acilir__bas::-webkit-details-marker {
  display: none;
}

.vast-acilir__bas::after {
  content: "\002B";
  margin-left: auto;
  font-family: var(--font-body);
  color: var(--muted);
}

.vast-acilir[open] > .vast-acilir__bas::after {
  content: "\2212";
}

.vast-acilir__govde {
  padding-bottom: 20px;
  font-size: 14px;
}

.vast-olcu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.vast-olcu > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--border);
}

.vast-olcu dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.vast-olcu dd {
  font-size: 13px;
  color: var(--title);
  text-align: right;
}

/* Ürün açıklamasının kendi HTML'i (panelden gelir). */
.vast-yazi > :last-child {
  margin-bottom: 0;
}

.vast-yazi h2,
.vast-yazi h3,
.vast-yazi h4 {
  margin: 20px 0 8px;
  font-size: 17px;
  letter-spacing: 0.06em;
}

.vast-yazi ul,
.vast-yazi ol {
  margin: 0 0 1em;
  padding-left: 18px;
  list-style: revert;
}

.vast-yazi a {
  color: var(--accent);
  text-decoration: underline;
}

/* GENİŞ İÇERİK KENDİ KABINDA KAYAR: tabloya display:block VERİLMEZ. */
.vast-kaydir {
  max-width: 100%;
  overflow-x: auto;
}

.vast-kaydir table {
  border-collapse: collapse;
  min-width: 100%;
}

.vast-kaydir th,
.vast-kaydir td {
  padding: 8px 10px;
  border-bottom: var(--vast-cizgi);
  font-size: 13px;
  text-align: left;
}

/* --- değerlendirmeler --- */
.vast-yorum {
  padding: 16px 0;
  border-bottom: 1px dotted var(--border);
}

.vast-yorum__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.vast-yorum__kisi {
  color: var(--title);
  letter-spacing: 0.06em;
}

.vast-yildiz {
  color: var(--accent);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   12) ALT BİLGİ — ÜÇ KOLON, İNCE, KÜÇÜK PUNTO
   ========================================================================== */

.vast-alt {
  margin-top: clamp(48px, 6vw, 88px);
  border-top: var(--vast-cizgi);
  background: var(--kagit-050);
}

.vast-alt__sira {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-block: clamp(32px, 4vw, 56px);
}

.vast-alt__baslik {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--title);
}

.vast-alt__bag {
  display: flex;
  align-items: center;
  /* 44x44 DOKUNMA KAPISI: ölçümde 30px çıkıyordu ve alt bilgi bağlantıları
     kapıyı geçmiyordu. Alt bilgi uzuyor ama bağlantılar basılabilir. */
  min-height: var(--vast-dokunma);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 160ms var(--ease);
}

.vast-alt__bag:hover {
  color: var(--accent);
}

.vast-alt__metin {
  font-size: 12px;
  color: var(--muted);
}

.vast-sosyal {
  display: flex;
  gap: 4px;
  margin-top: 14px;
}

.vast-sosyal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vast-dokunma);
  height: var(--vast-dokunma);
  border: 1px solid var(--border);
  color: var(--title);
  transition: border-color 160ms var(--ease);
}

.vast-sosyal a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.vast-alt__dip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-block: 18px;
  border-top: var(--vast-cizgi);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ==========================================================================
   13) PAYLAŞILAN PARÇALAR (çekirdek shop.css yüklenmediği için burada)
   --------------------------------------------------------------------------
   alerts.blade.php, theme-preview.blade.php ve karşılaştırma düğmesi bu
   temayla da basılıyor; sınıfları burada tanımlı olmasa RENKSİZ kalırlardı.
   ========================================================================== */

.alert {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-size: 13px;
  color: var(--title);
}

.alert ul {
  margin: 0;
  padding-left: 18px;
  list-style: revert;
}

.alert--success {
  border-left-color: var(--success);
}

.alert--error {
  border-left-color: var(--danger);
}

.alert--info {
  border-left-color: var(--accent);
}

.tema-onizleme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px var(--vast-kenar);
  background: var(--grafit-800);
  color: var(--kagit-100);
  font-size: 12px;
}

.tema-onizleme strong {
  color: var(--kagit-000);
}

.tema-onizleme__ayrinti {
  color: var(--kagit-300);
}

.tema-onizleme a,
.tema-onizleme button {
  display: inline-flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  padding: 0 14px;
  background: none;
  border: 1px solid var(--kagit-400);
  color: var(--kagit-000);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.tema-onizleme form {
  display: inline-flex;
}

/* Karşılaştırma düğmesi (shop/karsilastirma/dugme.blade.php) kendi yaprak
   CSS'ini @push ile bağlıyor; ölçüsünü yalnızca dokunma hedefi için sabitliyoruz. */
.krs-ekle__btn {
  min-height: var(--vast-dokunma);
}

/* Kategori çekmecesindeki oda bağlantıları. */
.vast-oda-grup {
  margin-bottom: 14px;
}

.vast-oda {
  display: flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  font-size: 13px;
  color: var(--muted);
}

.vast-oda--kok {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--title);
}

.vast-oda:hover,
.vast-oda[aria-current='page'] {
  color: var(--accent);
}

/* Madde listesi (ürün özellikleri). */
.vast-madde {
  margin: 14px 0 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 13px;
}

/* ==========================================================================
   13b) ÇEKİRDEK SINIF UYUMLULUK KATMANI — VAST DİLİNDE
   --------------------------------------------------------------------------
   NİÇİN GEREKLİ: bu tema yedi görünümü eziyor, ama vitrinin geri kalanı
   (sepet, ödeme, hesabım, blog, iletişim, koleksiyon, kampanya, tema
   mağazası, karşılaştırma rehberleri, sektör modülü sayfaları) ÇEKİRDEK
   görünümlerdir ve çekirdek sınıf sözlüğünü kullanır. `css/shop.css`
   yüklenmediği için o sayfalar STİLSİZ kalırdı — mağazanın yarısı bozuk
   görünürdü ve bu sessiz bir gerileme olurdu (hata yok, log yok).

   Bu yüzden çekirdeğin PAYLAŞILAN bileşen sözlüğü burada VAST'IN kendi
   dilinde yeniden tanımlanır: keskin köşe, gölgesiz yüzey, saç teli çizgi,
   küçük punto, harf aralıklı düğme. Yani "çekirdek görünüm" ile "tema
   görünümü" aynı mağazaya benziyor.

   Modüllerin kendi sınıfları (lp-, elk-, oto-, ky-, krs-, dij-, abn-, bayi-,
   blog-, kol-, tm-, vl-, yapi-, mc-, teslimat, hediye, kombin, tazelik) kendi
   yaprak CSS dosyalarından gelir ve bu temanın belirteçlerini okur; onları
   yeniden tanımlamak gerekmez.
   ========================================================================== */

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

.section {
  padding-block: clamp(32px, 4vw, 56px);
}

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

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-top: 20px;
  border-top: var(--vast-cizgi);
}

.section-head h2 {
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: 0.1em;
}

.eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* --- düğmeler: çekirdek adları, vast görünümü --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 0 22px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--btn-tracking);
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}

.btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn:disabled,
.btn[disabled] {
  background: var(--border-strong);
  border-color: var(--border-strong);
  color: var(--grafit-800);
  cursor: not-allowed;
}

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

/* Çekirdekte "gold" birincil eylemdir; bu temada birincil eylem KOYU
   ZEYTİNDİR. Sarıyı düğmeye vermek temanın tek sarı vurgu kuralını bozardı. */
.btn--gold {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

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

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

.btn--sm {
  min-height: var(--vast-dokunma);
  padding: 0 14px;
  font-size: 10px;
}

.btn--lg {
  min-height: 52px;
  padding: 0 28px;
}

.btn--block {
  width: 100%;
}

/* --- yüzeyler --- */
.panel {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--card-bg);
  border: var(--vast-cizgi);
}

.panel h2,
.panel h3 {
  font-size: 16px;
  letter-spacing: 0.1em;
}

.panel__desc {
  margin: 6px 0 16px;
  font-size: 12px;
  color: var(--muted);
}

.statcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--vast-mozaik-bosluk);
}

.statcard {
  padding: 16px;
  background: var(--card-bg);
  border: var(--vast-cizgi);
}

.success-box {
  padding: 24px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
}

.empty {
  padding: 56px 20px;
  border: 1px dashed var(--border-strong);
  text-align: center;
}

/* --- formlar --- */
.field {
  display: block;
  margin-bottom: 14px;
}

.field > label,
.field label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/*
 | ÖZGÜLLÜĞÜ SIFIR OLAN TABAN: `:where()` içindeki seçiciler özgüllüğe
 | KATKI YAPMAZ. Bu bilerek seçildi — ilk yazımda kural
 | `input[type='number']` biçimindeydi (0,1,1) ve temanın KENDİ sınıflarını
 | (`.vast-adet input`, `.vast-arama__alan`) EZİYORDU: adet alanı %100
 | genişliğe atlıyor ve adet kutusu bozuluyordu. `:where()` ile her sınıf
 | kuralı bu tabanı yener, çekirdek görünümlerdeki çıplak alanlar ise yine
 | doğru biçimlenir.
 */
:where(input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden'])),
:where(select),
:where(textarea),
.field input,
.field select,
.field textarea,
.coupon input,
.filters input {
  width: 100%;
  min-height: var(--vast-dokunma);
  padding: 8px 10px;
  background: var(--kagit-000);
  border: 1px solid var(--control-border);
  color: var(--title);
}

/* Onay kutusu ve radyo yukarıdaki genişlik kuralına GİRMEZ. */
:where(input[type='checkbox']),
:where(input[type='radio']) {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}

.field-row,
.addr-grid,
.contact-grid,
.ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
}

.hint {
  font-size: 11px;
  color: var(--muted);
}

.check,
.radio-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--vast-dokunma);
  font-size: 13px;
  cursor: pointer;
}

.radio-card {
  padding: 10px 14px;
  border: 1px solid var(--control-border);
}

.radio-card__price {
  margin-left: auto;
  font-weight: 500;
  color: var(--title);
}

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  background: var(--kagit-000);
}

.qty button {
  width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
  background: none;
  border: 0;
  color: var(--title);
  cursor: pointer;
}

.qty input {
  width: 56px;
  min-height: var(--vast-dokunma);
  border: 0;
  border-inline: 1px solid var(--border);
  background: none;
  text-align: center;
}

.qtyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 18px;
}

/* --- rozetler --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--kagit-000);
  border: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--title);
}

/*
 * DÜŞMAN DENETİMİNDE ÖLÇÜLDÜ VE DÜZELTİLDİ — 1,84:1 → 7,40:1.
 *
 * Bu kural safran (#e8b93f) zemininde metnini `var(--on-accent)`ten alıyordu.
 * `--on-accent` ise ARTIK #ffffff: telafi turunda "--accent zemininin metin
 * rengi" sözleşmesine çekildi ve zeytin --accent (#6b7250) için beyaz seçildi
 * (bkz. :root açıklaması). Safran rozeti için AYRI bir ad (--on-safran)
 * açılmış ama SADECE `.vast-etiket--sari` güncellenmişti; ikinci tüketici
 * olan bu kural gözden kaçtı.
 *
 * Gerçek tarayıcıda ölçülen kırık: /urun sayfasındaki kombin kartının
 * `.badge.badge--gold` rozeti ("%15 kombin indirimi", 10px) BEYAZ metinle
 * #e8b93f üstünde 1,84:1 idi — gövde eşiği 4,5:1. 320·390·768·1280 px'te
 * dördünde de ölçüldü (shop.partials.outfit-card).
 *
 * KONTRAST: #2f2e2b / #e8b93f → 7,40:1
 */
.badge--gold {
  background: var(--safran-500);
  border-color: var(--safran-500);
  color: var(--on-safran);
}

.badge--success {
  border-color: var(--success);
  color: var(--success);
}

.badge--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.badge--warning {
  border-color: var(--warning);
  color: var(--warning);
}

.badge--info {
  border-color: var(--accent);
  color: var(--accent);
}

.badge--muted {
  color: var(--muted);
}

.stars {
  color: var(--accent);
  letter-spacing: 0.1em;
}

/* --- listeler ve ızgaralar --- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--vast-mozaik-bosluk);
}

.pgrid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.pgrid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

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

.filters__group {
  padding-block: 12px;
  border-bottom: var(--vast-cizgi);
}

.filters__title {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.filters__list {
  display: flex;
  flex-direction: column;
}

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

.filters__list a.is-active {
  color: var(--accent);
}

.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-bottom: var(--vast-cizgi);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Çekirdek sayfa yolu bağlantıları da 44x44 kapısından geçer (ölçümde /blog ve
   /iletisim sayfalarında 50x19 çıkıyordu). */
.breadcrumb a,
.breadcrumb span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding-block: 32px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vast-dokunma);
  min-height: var(--vast-dokunma);
  padding: 0 6px;
  font-size: 12px;
  color: var(--text);
}

.pagination .is-current {
  color: var(--title);
  border-bottom: 1px solid var(--title);
}

/* Aynı düzeltme, çekirdek sayfalayıcı sınıfı için (bkz. .vast-sayfa .is-disabled). */
.pagination .is-disabled {
  color: var(--control-border);
}

/* --- sepet / ödeme / hesap --- */
.cartlayout,
.checkout,
.acclayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-block: 32px;
}

.cartlist {
  display: flex;
  flex-direction: column;
}

.cartitem {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding-block: 18px;
  border-bottom: var(--vast-cizgi);
}

.cartitem__img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  background: var(--kagit-200);
}

.cartitem__name {
  font-size: 14px;
  color: var(--title);
}

.cartitem__meta {
  font-size: 12px;
  color: var(--muted);
}

.cartitem__total {
  font-weight: 500;
  color: var(--title);
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 16px;
}

.summary {
  padding: 20px;
  background: var(--card-bg);
  border: var(--vast-cizgi);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-block: 7px;
  font-size: 13px;
}

.summary__row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: var(--vast-cizgi);
  font-size: 16px;
  color: var(--title);
}

.summary__note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

.accnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.accnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  padding: 0 12px;
  border: var(--vast-cizgi);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.accnav a.is-active {
  border-color: var(--primary);
  color: var(--title);
}

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 16px;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--control-border);
  font-size: 11px;
}

/* --- tablolar: KABI kaydırılır, tabloya display:block VERİLMEZ --- */
.table-scroll,
.krs-tablo-kap,
.responsive {
  max-width: 100%;
  overflow-x: auto;
}

.datatable,
.kargo-tablo {
  border-collapse: collapse;
  min-width: 100%;
}

.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
  padding: 9px 10px;
  border-bottom: var(--vast-cizgi);
  font-size: 13px;
  text-align: left;
}

.datatable th,
.kargo-tablo th {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--title);
}

/* --- metin yardımcıları --- */
.prose > :last-child {
  margin-bottom: 0;
}

.prose h2,
.prose h3,
.prose h4 {
  margin: 22px 0 8px;
  font-size: 17px;
  letter-spacing: 0.06em;
}

.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 18px;
  list-style: revert;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
}

.mono {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.stack > * + * {
  margin-top: 14px;
}

/* --- çekirdek ürün sayfası / kart artıkları (ezilmeyen sayfalarda geçebilir) --- */
.pcard__brand {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.optgroup {
  margin-block: 16px;
}

.optgroup__title {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.optlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.optlist label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--vast-dokunma);
  padding: 0 12px;
  border: 1px solid var(--control-border);
  font-size: 12px;
  cursor: pointer;
}

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

.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: var(--vast-cizgi);
}

.tabs__btn {
  min-height: var(--vast-dokunma);
  padding: 0 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  cursor: pointer;
}

.tabs__btn.is-active {
  border-bottom-color: var(--primary);
  color: var(--title);
}

.tabs__panel {
  display: none;
  padding-block: 20px;
}

.tabs__panel.is-active {
  display: block;
}

.pfeatures {
  margin-block: 18px;
}

.pfeatures li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-block: 7px;
  border-bottom: 1px dotted var(--border);
  font-size: 13px;
}

/* ==========================================================================
   14) DUYARLILIK
   --------------------------------------------------------------------------
   ÖLÇÜLEN GENİŞLİKLER: 320 · 360 · 390 · 414 · 768 · 1024 · 1280 · 1440 · 1920
   KIRILMA NOKTALARI (yalnızca depo genelinde ONAYLI değerler):
       560 / 720 / 900 / 1040  ve  max-width 560 / max-width 900
   Bu liste tests/Feature/DuyarlilikTest::KIRILMA_NOKTALARI ile ORTAKTIR.
   İlk yazımda 768 / 1024 / 1023 / 559 / 1440 kullanılmıştı ve o test düştü:
   dağınık kırılma noktaları "1024'te düzeldi ama 1040'ta bozuk" gibi izi
   sürülemez hatalar üretiyor. Yeni bir nokta gerekiyorsa o sabite gerekçesiyle
   eklenir, CSS'e tek başına yazılmaz.
   ========================================================================== */

@media (min-width: 560px) {
  .vast-mozaik {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vast-alt__sira {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .vast-ikili {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vast-olcu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .vast-alt__sira {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Çekirdek görünümlerin iki kolonlu düzenleri (sepet, ödeme, hesabım, liste) */
@media (min-width: 900px) {
  .cartlayout,
  .checkout {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  }

  .acclayout {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }

  .listlayout {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }

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

  .accnav {
    flex-direction: column;
  }
}

@media (min-width: 1040px) {
  .vast-ust__sira {
    min-height: 64px;
  }

  .vast-mozaik {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vast-detay {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  }

  /* Sağ kolon YAPIŞKAN ve DAR. Yükseklik sınırı + kendi kaydırması: uzun
     varyant listesinde kolonun altı ekran dışında kalmasın. */
  .vast-satin {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

/*
 | Masaüstü metin menüsü / çekmece anahtarı 900px'te.
 | 1040 kullanılamaz: onaylı liste 1039 ya da 1041 içermiyor ve `max-width:
 | 1040` ile `min-width: 1040` tam 1040'ta ÇAKIŞIR (menü hem gizli hem gerekli
 | olurdu). 900/901 çifti onaylı, bu yüzden anahtar oraya alındı: 901px'ten
 | itibaren metin menüsü, altında çekmece.
 */
@media (max-width: 900px) {
  .vast-menu {
    display: none;
  }

  .vast-burger {
    display: inline-flex;
  }
}

/*
 | ÇOK KÜÇÜK EKRANDA BAŞLIKTA İKİ İKON KALIR: sepet + menü.
 | Arama ve hesap çekmeceye taşınır (mobil menüde ikisi de VAR). Gerekçe
 | ölçümdür: dört ikon 182px yer kaplıyor ve 320px'te kelime markasına 94px
 | kalıyordu — marka ikonları ekran dışına itiyordu. İki ikon 88px, markaya
 | 188px kalıyor ve hiçbir şey kırpılmıyor.
 |
 | ARAMA YOLU KAPANMAZ: mobil menünün EN ÜSTÜNDE arama formu duruyor, yani
 | klavye ve ekran okuyucu kullanıcısı da arama yapabiliyor.
 */
@media (max-width: 560px) {
  .vast-ara,
  .vast-hesap {
    display: none;
  }
}

/* ==========================================================================
   15) HAREKET AZALTMA — ZORUNLU BLOK
   ========================================================================== */

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

  /* Yapışkan kolon da kapatılır: hareket duyarlılığı olan kullanıcı için
     kaydırmayla birlikte yer değiştiren bir blok rahatsız edici. */
  .vast-satin {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ==========================================================================
   16) BASKI — fotoğraf katalogu kâğıda da düzgün çıkar
   ========================================================================== */

@media print {
  .vast-ust,
  .vast-alt,
  .vast-sayfa {
    display: none;
  }

  .vast-satin {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK — DÜŞMAN DENETİMİNDE ÖLÇÜLEN BOŞLUKLAR
   --------------------------------------------------------------------------
   Bu tema `css/shop.css` YÜKLEMEZ. Ezilmeyen sayfalarda (sepet, SSS, tema
   önizleme şeridi) aşağıdaki paylaşılan seçiciler için HİÇ kural yoktu; 1280px
   gerçek tarayıcıda CSSOM ile ölçüldü ve çekirdekle karşılaştırıldı:

     .cartitem__right      tema: display block, 88x70   çekirdek: grid, 94x107
     .panel--sss           tema: dolgusuz, 820x68       çekirdek: 820x78
     .tema-onizleme__metin tema: kural 0                çekirdek: min-width 0
     .tema-onizleme__btn   tema: kural 0                çekirdek: 44px hedef

   Değerler kopyalanmadı; vast'ın köşeli/gölgesiz diline göre seçildi.
   ========================================================================== */

/* Sepet satırının sağ kolonu: tutar sağa yaslı ve dikey ızgarada. */
.cartitem__right {
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: right;
}

/* 640 ONAYLI kırılma noktası: dar ekranda sağ kolon tam satıra iner. */
@media (max-width: 640px) {
  .cartitem__right {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* SSS panelinin dolgusu: varsayılan panel dolgusundan daha sıkı. */
.panel--sss {
  margin: 0;
  padding: 16px 20px;
}

/*
 | TEMA ÖNİZLEME ŞERİDİ — panel kabuğudur, vitrin tasarımı DEĞİL.
 | Bu yüzden renkleri tema belirteçlerinden DEĞİL çekirdeğin koyu şeridinden
 | alır: şerit hangi tema önizlenirse önizlensin aynı okunur kalmalı.
 | KONTRAST: #f4f5f5 / #18181b → 15,68:1 · #a1a1aa / #18181b → 6,66:1
 |           #1a1200 / #ffd479 → 14,79:1
 */
.tema-onizleme__metin {
  min-width: 0;
}

.tema-onizleme__eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tema-onizleme__eylemler form {
  margin: 0;
}

.tema-onizleme__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #3f3f46;
  background: transparent;
  color: #f4f5f5;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.tema-onizleme__btn:hover {
  border-color: #52525b;
  background: #27272a;
}

.tema-onizleme__btn--birincil {
  border-color: #ffd479;
  background: #ffd479;
  color: #1a1200;
}

.tema-onizleme__btn--birincil:hover {
  border-color: #ffe0a0;
  background: #ffe0a0;
}

.tema-onizleme__btn:focus-visible {
  outline: 3px solid #ffd479;
  outline-offset: 2px;
}

/* ==========================================================================
   .statcards--3 — ÖLÇÜLEN BOŞLUK
   --------------------------------------------------------------------------
   `/hesabim` panosu üç sayaç kartı bastığında `.statcards--3` ile üç kolona
   iner; bu temada kural yoktu ve kartlar dört kolonluk ızgarada kalıyordu
   (in-process müşteri oturumuyla ölçüldü). 901 ve 640 onaylı noktalardır.
   ========================================================================== */

.statcards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 901px) {
  .statcards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .statcards--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   DOKUNMA HEDEFİ — /iletisim TELEFON VE E-POSTA BAĞLANTILARI
   --------------------------------------------------------------------------
   Gerçek tarayıcıda 390px'te ölçüldü (elementFromPoint ile dört yönde vuruş
   sınaması): `a[href^="tel:"]` ve `a[href^="mailto:"]` 16-20px YÜKSEKLİKTE
   ölçüldü — dokunma hedefi eşiği 44x44. Bağlantılar ÇEKİRDEK /iletisim
   görünümünden geliyor; çekirdek DEĞİŞTİRİLMEDİ, düzeltme temanın kendi
   CSS'inde. (Aynı düzeltme orion temasında zaten vardı; sekiz temanın altısında
   yoktu.)

   `inline-flex` + `min-height` seçildi: `display: block` vermek bağlantıyı
   metin akışından çıkarır ve iletişim kartındaki satır düzenini bozar.
   ========================================================================== */

a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* DOKUNMA HEDEFİ — ürün sayfasındaki marka bağlantısı 33x44 ölçüldü
   (genişlik eşiğin altında). Kısa marka adlarında ("VEGA") hedef daralıyor. */
.vast-satin__marka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* ==========================================================================
   MODÜL BLOKLARI VAST'IN DİLİNDE
   --------------------------------------------------------------------------
   Çift opt-in bülten, "stoğa gelince haber ver" ve B2B bayi şeridi çekirdek
   parçalardır; kendi yaprak dosyalarını (`shop-stok-bildirim.css`,
   `shop-bayi.css`) GÖVDEDEN yükler, yani bu temadan SONRA gelirler ve eşit
   özgüllükte sonra gelen kazanır. Kurallar bu yüzden `.vast-alt` /
   `.vast-satin` kabıyla SARILIR (özgüllük 0,2,0 > 0,1,0).

   Bu tema GÖLGESİZDİR ve köşesi 0'dır; yaprak dosyanın `border-radius:
   var(--radius, 12px)` yedeği burada --radius: 0px olarak okunur, ayrıca
   yedeğe düşmemesi için değerler açıkça yazılır.

   ÖLÇÜLEN KONTRASTLAR (WCAG bağıl parlaklık)
   ------------------------------------------
   bülten başlığı  #2f2e2b / #faf9f6 = 12,89:1
   bülten metni    #6f6c63 / #faf9f6 =  4,99:1
   bülten düğmesi  #ffffff / #3f4630 =  9,86:1
   ========================================================================== */

/*
 | BÜLTEN ŞERİDİ — ALT BİLGİNİN EN ÜSTÜNDE, İNCE KÂĞIT BANDI.
 |
 | Bu temanın KENDİ bülten formu YOKTU: modül gelmeden önce mağazanın hiçbir
 | sayfasında kayıt çağrısı yoktu. Bant bu yüzden `@unless` kapısı olmadan
 | basılır ve sayfa başına `name="email"` alan sayısı 1'i geçmez.
 |
 | Görsel dil alt bilginin devamıdır: kırık beyaz kâğıt zemin, tek piksel
 | çizgi, serif EB Garamond başlık, harfleri aralanmış küçük punto gövde.
 */
.vast-alt .bulten {
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 0;
  border-bottom: var(--vast-cizgi);
  background: var(--kagit-100);
}

.vast-alt .bulten__ic {
  max-width: var(--container);
  padding-inline: var(--vast-kenar);
}

.vast-alt .bulten__baslik {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--title);
}

.vast-alt .bulten__aciklama {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.vast-alt .bulten__aciklama strong {
  color: var(--title);
  font-weight: 600;
}

/*
 | Yaprak dosyadaki `min-width: 240px` SABİTTİR; 320px'lik ekranda kabı
 | genişletip sayfayı yatay kaydırır — `min-width: 0` daralmaya izin verir.
 | Yükseklik --vast-dokunma (44px), punto 16px: iOS Safari'nin zorla
 | yakınlaştırma eşiği.
 */
.vast-alt .bulten__form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: var(--vast-dokunma);
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--kagit-000);
  color: var(--title);
  font-size: 16px;
}

/* `btn--gold` bu temada zaten KOYU ZEYTİNDİR (#ffffff / #3f4630 = 9,86:1);
   kâğıt bandın üstünde tek koyu blok olarak durur. Yalnızca hizalanır. */
.vast-alt .bulten__form .btn {
  flex: 0 0 auto;
}

.vast-alt .bulten__hata {
  max-width: var(--container);
  padding-inline: var(--vast-kenar);
  color: var(--danger);
}

/*
 | STOK BİLDİRİM KUTUSU — satın alma kolonunda, köşesiz ve gölgesiz.
 | Ayrım tek piksel çizgiyle yapılır; başlık serif, gövde küçük punto.
 */
.vast-satin .stokbildirim {
  border: var(--vast-cizgi);
  border-radius: 0;
  background: var(--kagit-100);
}

.vast-satin .stokbildirim__baslik {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--title);
}

.vast-satin .stokbildirim__aciklama {
  font-size: 13px;
  color: var(--muted);
}

/* Onay kutusunun KENDİSİ 18px kalır (appearance:none yüksek kontrast kipini
   bozar); dokunma hedefi SARAN ETİKETTEDİR. */
.vast-satin .stokbildirim__onay {
  min-height: var(--vast-dokunma);
  color: var(--muted);
}

.vast-satin .stokbildirim__form input[type="email"],
.vast-satin .stokbildirim__form select {
  min-height: var(--vast-dokunma);
  border-radius: 0;
  background: var(--kagit-000);
  font-size: 16px;
}

/* Bayi şeridi: köşesiz panel, zeytin başlık bandı. */
.vast-satin .bayi-panel {
  border-radius: 0;
}

.vast-satin .bayi-panel__head {
  border-bottom: var(--vast-cizgi);
  background: var(--primary-soft);
}

/* ==========================================================================
   DOKUNMA HEDEFİ — BAYİ ŞERİDİNDEKİ "HIZLI TOPLU SİPARİŞ" BAĞLANTISI
   --------------------------------------------------------------------------
   GERÇEK TARAYICIDA ÖLÇÜLDÜ (dokuz genişlikte, elementFromPoint vuruşuyla):
   `.bayi-panel a` 104,4x15 px çıkıyor — eşik 44x44. Bağlantı ÇEKİRDEK
   `shop/partials/dealer-price.blade.php` parçasından geliyor ve bu temada
   ancak bayi kancası konduktan SONRA basılıyor. Çekirdek DEĞİŞTİRİLMEDİ;
   düzeltme temanın kendi CSS'inde — bu dosyadaki `a[href^="tel:"]` kalıbıyla
   aynı. `inline-flex`: `block` vermek bağlantıyı cümleden koparırdı.
   ========================================================================== */

.bayi-panel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--vast-dokunma);
  min-width: var(--vast-dokunma);
}


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

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

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

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

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

/*
 * VAST — EDİTORYAL MOBİLYA: EN GENİŞ BOŞLUK, ETİKET ÜSTTE ORTALI DEĞİL,
 * SATIR BAŞINDA VE ÇOK KÜÇÜK.
 *
 * Bu tema büyük fotoğraflar ve geniş boşluklarla çalışıyor; numaralı
 * editoryal dizin dışında hiçbir yerde çizgi kullanmıyor. Yuva da çizgi
 * kullanmaz; ayrım 64px boşlukla yapılır. Etiket bu temada en küçük
 * ölçüdedir (10px) çünkü tema tipografik hiyerarşiyi punto farkıyla
 * kuruyor, çizgiyle değil.
 */
[data-tema='vast'] .reklam {
  --reklam-bosluk: 64px;
}

[data-tema='vast'] .reklam--kenar-cubugu {
  --reklam-bosluk: 40px;
}

[data-tema='vast'] .reklam__etiket {
  font-family: var(--font-body, inherit);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--muted);
  opacity: 1;
}

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