/* ==========================================================================
   DECORICO — EV DEKORASYON / AKSESUAR TEMASI · TAM STİL DOSYASI
   ==========================================================================

   BU DOSYA public/css/shop.css'İN ÜSTÜNE YAMA DEĞİLDİR.
   `resources/views/themes/decorico/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 BELİRTEÇ 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,
   css/shop-listeler.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).

   PALET SÖZLEŞMESİ — ROLLER SABİT
   -------------------------------
   --page-bg / --card-bg / --surface  yalnızca ZEMİN. Metin rengi OLARAK
       KULLANILMAZ; rol karışması ilk koyu temada metni görünmez yapar.
   --accent (#8b5cf6 lila) yalnızca SÜS ve İKON rengidir:
       beyaz üstünde 4,23:1 → grafik/denetim eşiğini (3:1, WCAG 1.4.11) geçer,
       METİN eşiğini (4,5:1) GEÇMEZ. Bu yüzden metin rengi olmaz ve ÜSTÜNE
       metin basılmaz (beyaz 4,23 · koyu mürekkep 3,90 — ikisi de eşiğin
       altında).
   --primary (#6d28d9 mor) metin olarak da dolgu olarak da GÜVENLİ: beyaz
       üstünde 7,10:1, üstünde beyaz yazı da 7,10:1. Rozet, sepet düğmesi ve
       bağlantı rengi budur.

   ÖLÇÜLEN KONTRASTLAR (WCAG 2.1 bağıl parlaklık formülüyle hesaplandı)
   -------------------------------------------------------------------
     gövde metni   #4a4458 / #ffffff = 9,30:1   (eşik 4,5)
     gövde metni   #4a4458 / #f5f3ff = 8,48:1
     gövde metni   #4a4458 / #f4f4f6 = 8,46:1
     başlık        #241a33 / #ffffff = 16,53:1  (eşik 3,0 — büyük punto)
     başlık        #241a33 / #f5f3ff = 15,07:1
     soluk metin   #625c70 / #ffffff = 6,39:1
     soluk metin   #625c70 / #f5f3ff = 5,83:1
     soluk metin   #625c70 / #f4f4f6 = 5,82:1
     birincil mor  #6d28d9 / #ffffff = 7,10:1
     beyaz yazı    #ffffff / #6d28d9 = 7,10:1
     beyaz yazı    #ffffff / #5b21b6 = 8,98:1   (vurgulu / imleç altı)
     aksan lila    #8b5cf6 / #ffffff = 4,23:1   (SÜS ve İKON; metin DEĞİL)
     denetim kenarı #7a7488 / #ffffff = 4,49:1  (eşik 3,0)
     olumlu        #1b6b47 / #ffffff = 6,48:1
     tehlike       #9c2b3f / #ffffff = 7,42:1
     uyarı         #7a5410 / #ffffff = 6,77:1
     lila kutu içi #241a33 / #ede9fe = 13,92:1

   FOTOĞRAF ÜSTÜNDE METİN YOK — TASARIM KARARI
   -------------------------------------------
   Kategori döşemesinin adı fotoğrafın ÜSTÜNDE değil ALTINDA, beyaz zeminde
   durur. Gerekçe ölçülebilir: fotoğrafın üstündeki açık renkli metnin
   kontrastı fotoğrafın parlaklığına bağlıdır ve açık bir fotoğrafta 1,1:1'e
   kadar düşer (bu depoda `seasy` mozaiğinde gerçek pikselden ölçüldü). Metni
   fotoğrafın altına almak o riski perde/gradyan hesabına gerek bırakmadan
   ORTADAN KALDIRIR. Bu dosyada `linear-gradient` HİÇ KULLANILMAZ.

   DUYARLILIK KURALLARI (tests/Feature/DuyarlilikTest bu dosyayı da tarar)
   ----------------------------------------------------------------------
   * Yalnızca ONAYLI kırılma noktaları: 420 · 560 · 640 · 641 · 720 · 900 ·
     901 · 1040 · 1100 (genişlik). Bu tema yeni bir nokta EKLEMEZ.
   * Çok kolonlu ızgara izlerinde ÇIPLAK `Nfr` YOK -> `minmax(0, Nfr)`.
     Gerekçe: çıplak `1fr`in örtük tabanı `auto` (min-content); içine giren
     uzun bir kelime ya da tablo izi genişletip SAYFAYI yatay kaydırır.
   * `width: NNNpx` (>=300) YOK; genişlik `max-width` + %/clamp ile verilir.
   * Dokunma hedefleri 44x44 (tek başına duran bağlantı/düğmede İKİ YÖNDE de).
   * Form alanları 16px SABİT punto: --font-scale KÜÇÜLTSE BİLE 16px kalır,
     yoksa iOS Safari odaklanınca sayfayı zorla yakınlaştırır.
   * Tabloya `display: block` VERİLMEZ; kabı kaydırılır (.table-scroll).
   * `transition` kısayoluna `all` YAZILMAZ; özellikler tek tek sayılır.
     (Bu satırda o iki sözcük BİLEREK yan yana yazılmadı: denetim dosyanın HAM
     metnini tarıyor, yani bir yorum bile bulguya dönüşür.)
   * @keyframes YOK; hareket yalnızca transform/opacity geçişleriyle.
   * prefers-reduced-motion bloğu dosyanın sonunda.

   TÜRKÇE KODLAMA: `content` değerlerinde ASCII dışı karakter YOK, kaçış
   dizisi kullanılır (content: "\2022"). Yorumlar UTF-8 Türkçedir.
   ========================================================================== */

/* ==========================================================================
   1) BELİRTEÇLER
   ========================================================================== */

:root {
    /* ---- Panelden ayarlanabilen belirteçler ----
       resources/themes/decorico.php `tokens` dizisiyle BİREBİR aynı olmak
       ZORUNDA (ThemeTest bunu çekirdek temalarda doğruluyor; aynı kural
       burada da geçerlidir — panel, vitrinde geçerli olmayan bir değer
       göstermemeli). */
    --primary: #6d28d9;
    --accent: #8b5cf6;
    --title: #241a33;
    --text: #4a4458;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e9e5f3;
    --radius: 10px;
    --card-radius: 14px;
    --btn-radius: 10px;
    --font-scale: 1;
    --container: 1280px;

    /* ---- Çekirdek sözlükle AYNI ADLAR: yaprak CSS bunları okur ---- */
    --muted: #625c70;
    --surface: #f5f3ff;
    --white: #ffffff;
    --border-strong: #d6cfe8;

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

    --success: #1b6b47;
    --danger: #9c2b3f;
    --warning: #7a5410;

    --primary-strong: #5b21b6;
    --primary-hover: #5b21b6;
    --primary-focus: #7c3aed;
    --primary-soft: #f5f3ff;
    --primary-line: #ddd6fe;
    --on-primary: #ffffff;

    --accent-strong: #6d28d9;
    --accent-light: #ddd6fe;
    --accent-soft: #ede9fe;
    /* Aksanın üstüne metin basılmadığı için bu belirteç YALNIZCA yaprak CSS
       kendi kutusunu aksan dolgusuyla çizerse devreye girer; o durumda da
       okunur bir sonuç vermesi için AÇIK LİLA dolgunun mürekkebi verilir. */
    --on-accent: #120c19;

    /* `--radius` yukarıda, panelden ayarlanabilir belirteçler arasında
       tanımlıdır; burada YALNIZCA kardeşleri veriliyor. */
    --radius-sm: 8px;
    --radius-lg: 18px;
    --pill: 999px;

    /* Yumuşak, lila renk sıcaklığında gölgeler (dekorasyon vitrini kâğıt
       gibi değil, pastel ve hafif). */
    --shadow-sm: 0 1px 2px rgba(36, 26, 51, 0.05);
    --shadow: 0 2px 10px rgba(36, 26, 51, 0.07);
    --shadow-lg: 0 10px 30px rgba(36, 26, 51, 0.10);
    --card-shadow: 0 1px 3px rgba(36, 26, 51, 0.05);
    --card-hover-shadow: 0 8px 22px rgba(109, 40, 217, 0.13);

    --ease: cubic-bezier(0.32, 0.72, 0.35, 1);

    /*
     | İKİ BELİRTEÇ DE AYNI AİLE: Outfit.
     | Serif YOK (vast/seasy/breathe aldı), Archivo YOK (quick), Rubik YOK
     | (tunga). Başlık ile gövde AİLEYLE değil AĞIRLIK ve HARF ARALIĞIYLA
     | ayrışır — bu temanın kimliği tam olarak o tek sesli tipografidir.
     */
    --font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --btn-height: 48px;
    --btn-tracking: 0.01em;
    --btn-transform: none;

    --heading-tracking: -0.01em;
    --heading-transform: none;
    --section-space: 64px;
}

.tema-decorico {
    /* ---- Temanın kendi belirteçleri (panelden ayarlanmaz, rolleri sabit) ---- */
    --dc-lila-serit: #f5f3ff;
    --dc-lila-kutu: #ede9fe;
    --dc-lila-cizgi: #ddd6fe;
    --dc-gri-doseme: #f4f4f6;
    --dc-gri-alt: #f4f4f6;
    --dc-cizgi-ince: #eeebf5;
    --dc-murekkep: #241a33;
    --dc-dokunma: 44px;

    /* Ölçü sistemi */
    --dc-kenar: clamp(16px, 3vw, 32px);
    --dc-bolum: clamp(40px, 5.5vw, 76px);
    --dc-bosluk: clamp(14px, 1.8vw, 24px);
}

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

*,
*::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` ögelerini bozar (bu depoda ürün
     * sayfasının yan 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.
     */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/*
 | AİLE AÇIKÇA YAZILI (yalnızca `var(--font-body)` DEĞİL). İki nedeni var:
 | (1) `:root` bloğu herhangi bir nedenle uygulanmazsa (panelden gelen ince
 | ayar <style>'ı bozulursa) sayfa yine kendi yazı tipiyle çizilir;
 | (2) tasarım ayrışma denetimi (`php artisan cea:tasarim-ayrisma`) temanın
 | yazı tipi imzasını LİTERAL `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: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 400;
    line-height: 1.65;
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--title);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.35rem);
}

h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}

h3 {
    font-size: clamp(1.1rem, 1.9vw, 1.3rem);
}

p {
    margin: 0 0 1em;
}

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

ul,
ol {
    list-style: none;
}

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

img {
    height: auto;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

strong,
b {
    font-weight: 600;
}

del {
    color: var(--muted);
}

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

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

table {
    border-collapse: collapse;
    width: 100%;
}

caption {
    caption-side: bottom;
    padding-top: 8px;
    color: var(--muted);
    font-size: 0.875rem;
    text-align: start;
}

/* ==========================================================================
   3) KAP VE ORTAK YARDIMCILAR
   ========================================================================== */

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

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

.dc-bolum {
    padding-block: var(--dc-bolum);
}

.dc-bolum--lila {
    background: var(--dc-lila-serit);
}

.dc-bolum-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: clamp(16px, 2.4vw, 28px);
}

.dc-bolum-basi p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.dc-etiket {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dc-tumu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    color: var(--primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.dc-soluk {
    color: var(--muted);
}

.dc-atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 60;
    padding: 12px 18px;
    background: var(--primary);
    color: var(--white);
    border-radius: 0 0 var(--radius) 0;
    font-weight: 600;
}

.dc-atla:focus {
    left: 0;
    color: var(--white);
    text-decoration: none;
}

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

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

.nowrap {
    white-space: nowrap;
}

.mono {
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
    font-size: 0.9375rem;
}

.center {
    text-align: center;
}

.right {
    text-align: end;
}

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

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

.hint {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.875rem;
}

.stars {
    color: var(--primary);
    letter-spacing: 0.06em;
}

.stack {
    display: grid;
    gap: 14px;
}

/* Ödeme sağlayıcısının kendi iframe'i (shop/payment/redirect) */
.responsive {
    position: relative;
    width: 100%;
    min-height: 480px;
}

/* Kayan tablo kabı: TABLONUN KENDİSİNE display verilmez, kap kaydırılır. */
.table-scroll,
.dc-kap-kaydir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.table-scroll:focus-visible,
.dc-kap-kaydir:focus-visible {
    outline: 3px solid var(--primary-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   4) DÜĞMELER
   ==========================================================================
   Köşeler YUMUŞAK (10px) ve düğme metni KÜÇÜK HARF: bu tema büyük harfli,
   geniş aralıklı düğme metni KULLANMAZ (o kimlik quick ve vast'ta).
   ========================================================================== */

.btn,
.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--btn-height);
    /* Tek başına duran kısa metinli düğmede hedef İKİ YÖNDE de 44px olmalı:
       "Süz" gibi üç harflik bir etiket aksi hâlde 38px genişlikte kalır. */
    min-width: var(--dc-dokunma);
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background: var(--primary);
    color: var(--on-primary);
    /* Aile AÇIKÇA yazılı: `<button>` yazı tipini varsayılan olarak MİRAS
       ALMAZ ve `inherit` yazmak ayrışma denetiminde temanın imzasını
       "inherit" diye kaydettiriyordu. */
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: var(--btn-tracking);
    text-transform: var(--btn-transform);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:hover,
.dc-btn:hover {
    background: var(--primary-hover);
    color: var(--on-primary);
    text-decoration: none;
}

/* Çekirdek düğme değişkeleri — adlar çekirdeğin SÖZLEŞMESİ, görünüş temanın
   kararı. `btn--navy` ve `btn--gold` çekirdek palet adlarıdır; bu temada
   ikisi de MOR çizilir, yoksa ödeme/hesap sayfalarında renksiz kalırlardı. */
.btn--navy,
.btn--gold,
.btn--primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
}

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

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

.btn--outline:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    border-color: var(--primary);
}

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

.btn--ghost:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
}

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

.btn--lg {
    min-height: 54px;
    padding-inline: 26px;
    font-size: 1.0625rem;
}

/*
 | `.btn--sm` GÖRSEL OLARAK küçüktür ama dokunma hedefi 44px'in ALTINA
 | İNMEZ: yüksekliği düşürmek yerine yalnızca punto ve yatay dolgu küçülür.
 | Gerekçe: DuyarlilikTest'e istisna satırı yazmak, gerçek bir erişilebilirlik
 | borcunu belgelemek olurdu; burada borç HİÇ oluşmuyor.
 */
.btn--sm {
    min-height: var(--dc-dokunma);
    padding: 8px 14px;
    font-size: 0.9375rem;
}

.btn[disabled],
.btn:disabled,
.dc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ==========================================================================
   5) ROZETLER
   ==========================================================================
   BİÇİM İMZASI: dikdörtgen ama KÖŞELERİ YUVARLATILMIŞ (8px) MOR etiket.
   Ne tam yuvarlak pill, ne keskin köşe — diğer temalardan bu ayrıntıyla
   ayrışır. Dolgu --primary'dir (beyaz yazı 7,10:1); --accent'in üstüne yazı
   BASILMAZ (4,23:1 metin eşiğinin altında).
   ========================================================================== */

.badge,
.dc-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.badge--gold {
    background: var(--primary);
    color: var(--white);
}

.badge--info {
    background: var(--dc-lila-kutu);
    color: var(--dc-murekkep);
}

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

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

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

.badge--muted {
    background: var(--dc-gri-doseme);
    color: var(--muted);
}

/* ==========================================================================
   6) FORM ALANLARI
   ==========================================================================
   PUNTO 16px SABİT: `--font-scale` küçültse bile alanlar 16px kalır, yoksa
   iOS Safari odaklanınca sayfayı zorla yakınlaştırır ve kullanıcı bir daha
   uzaklaştıramaz.
   ========================================================================== */

.field {
    margin-bottom: 16px;
}

.field > label,
.dc-alan__ad {
    display: block;
    margin-bottom: 6px;
    color: var(--title);
    font-size: 0.9375rem;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="url"],
select,
textarea {
    width: 100%;
    min-height: var(--dc-dokunma);
    padding: 11px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--dc-lila-kutu);
    outline: none;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.field-error,
.dc-hata {
    margin-top: 6px;
    color: var(--danger);
    font-size: 0.875rem;
}

/* Onay kutusu / radyo: yerel denetim KORUNUR (appearance:none ile yeniden
   çizmek yüksek kontrast kipini bozar). Dokunma hedefi SARAN ETİKETTİR. */
.check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--dc-dokunma);
    color: var(--text);
    font-size: 0.9375rem;
    cursor: pointer;
}

/*
 | YERLİ ONAY KUTUSU 18px KALIR ve `min-height: 0` YAZILMAZ.
 | Kutunun kendisini 44px'e büyütmek yerine dokunma hedefi SARAN ETİKETTİR
 | (.check { min-height: 44px }). Yukarıdaki genel alan kuralı yalnızca
 | `input[type="text|email|…"]` seçicilerini hedefler, yani onay kutusu o
 | kuraldan hiç etkilenmez ve sıfırlamaya gerek kalmaz.
 */
.check input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

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

/* Yerli radyo düğmesi 20px kalır; dokunma hedefi saran karttır (44px). */
.radio-card input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.radio-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--dc-lila-serit);
}

.radio-card__price {
    margin-inline-start: auto;
    color: var(--title);
    font-weight: 600;
    white-space: nowrap;
}

/* Seçenek (varyant) grupları — çekirdek sözleşme adları */
.optgroup {
    margin-bottom: 16px;
}

.optgroup__title {
    margin: 0 0 8px;
    color: var(--title);
    font-size: 0.9375rem;
    font-weight: 500;
}

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

.optlist label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding: 8px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--pill);
    background: var(--card-bg);
    font-size: 0.9375rem;
    cursor: pointer;
}

.optlist label:has(input:checked) {
    border-color: var(--primary);
    background: var(--dc-lila-kutu);
    color: var(--dc-murekkep);
}

/* Yerli radyo düğmesi 16px kalır; dokunma hedefi saran etikettir (44px). */
.optlist input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
}

/* Adet kutusu — çekirdek shop.js sözleşmesi (data-qty / data-qty-step) */
.qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card-bg);
}

.qty button {
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    border: 0;
    background: var(--dc-lila-serit);
    color: var(--title);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s var(--ease);
}

.qty button:hover {
    background: var(--dc-lila-kutu);
}

.qty button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty input {
    width: 68px;
    min-height: var(--dc-dokunma);
    border: 0;
    border-inline: 1px solid var(--border);
    border-radius: 0;
    text-align: center;
    font-size: 16px;
}

.qty input:focus {
    box-shadow: none;
}

/* ==========================================================================
   7) UYARI KUTULARI (shop.partials.alerts)
   ========================================================================== */

.alert {
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid var(--border-strong);
    border-inline-start: 4px solid var(--primary);
    border-radius: var(--radius);
    background: var(--dc-lila-serit);
    color: var(--text);
    font-size: 0.9375rem;
}

.alert ul {
    margin: 0;
    padding-inline-start: 18px;
    list-style: disc;
}

.alert--success {
    border-inline-start-color: var(--success);
    background: #eef7f2;
}

.alert--error {
    border-inline-start-color: var(--danger);
    background: #fdf0f2;
}

.alert--warning {
    border-inline-start-color: var(--warning);
    background: #fdf6e8;
}

.alert--info {
    border-inline-start-color: var(--accent);
    background: var(--dc-lila-serit);
}

/* ==========================================================================
   8) SAYFALAMA (shop.partials.pagination)
   ========================================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(24px, 3vw, 40px);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.9375rem;
}

.pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

.pagination .is-current {
    border-color: transparent;
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
}

.pagination .is-disabled {
    color: var(--muted);
    opacity: 0.6;
}

/* ==========================================================================
   9) PANEL · BOŞ DURUM · METİN BLOĞU
   ========================================================================== */

.panel,
.dc-panel {
    margin-bottom: 20px;
    padding: clamp(16px, 2.4vw, 26px);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.panel__desc {
    margin: 4px 0 16px;
    color: var(--muted);
    font-size: 0.9375rem;
}

.panel--sss {
    background: var(--dc-lila-serit);
    border-color: var(--dc-lila-cizgi);
}

.empty,
.dc-bos {
    padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 32px);
    border: 1px dashed var(--border-strong);
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
    text-align: center;
}

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

.prose h2,
.prose h3,
.prose h4 {
    margin: 1.4em 0 0.5em;
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose p {
    margin: 0 0 1em;
}

.prose ul,
.prose ol {
    margin: 0 0 1em;
    padding-inline-start: 20px;
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: 0.4em;
}

.prose a {
    text-decoration: underline;
}

.prose img {
    border-radius: var(--radius);
}

/* ==========================================================================
   10) TEMA ÖNİZLEME ŞERİDİ (shop.partials.theme-preview)
   ========================================================================== */

.tema-onizleme {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px var(--dc-kenar);
    /* Çentikli cihazın alt tutamacı düğmeleri örtmesin. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--dc-murekkep);
    color: var(--white);
    font-size: 0.9375rem;
}

.tema-onizleme__ayrinti {
    color: var(--dc-lila-cizgi);
}

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

.tema-onizleme__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 14px;
    border: 1px solid var(--dc-lila-cizgi);
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--white);
    font-size: 0.9375rem;
    cursor: pointer;
}

.tema-onizleme__btn:hover {
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
}

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

/* ==========================================================================
   11) BAŞLIK — KATMAN 1: TAM GENİŞLİK ARAMA ŞERİDİ
   ==========================================================================
   Arama HER ZAMAN GÖRÜNÜR ve sayfanın EN ÜSTÜNDE tam genişlikte durur.
   (vast: ikon arkasında · tunga: 1. katmanın ORTASINDA · seasy: ikon
   arkasında bir <details> içinde. Bu tema: en üstte, tam genişlikte, açık
   lila zeminde.)
   ========================================================================== */

.dc-basli {
    background: var(--card-bg);
    border-bottom: 1px solid var(--dc-cizgi-ince);
}

.dc-tepe {
    background: var(--dc-lila-serit);
    border-bottom: 1px solid var(--dc-lila-cizgi);
}

.dc-tepe__ic {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    padding-block: 8px;
}

.dc-ara {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.dc-ara__ikon {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 12px;
    display: flex;
    align-items: center;
    color: var(--muted);
    pointer-events: none;
}

.dc-ara input {
    width: 100%;
    min-height: var(--dc-dokunma);
    padding-inline-start: 40px;
    /* Gönderim düğmesi alanın SAĞ UCUNU kaplıyor; metin altına girmesin. */
    padding-inline-end: 52px;
    /*
     | KENARLIK `--control-border` KALIR — açık lila bir çizgiyle
     | DEĞİŞTİRİLMEZ. ÖLÇÜLDÜ (gerçek tarayıcıda, ekrandan okunan renkle):
     | #ddd6fe kenarlık, #f5f3ff şerit zemininde 1,27:1 veriyordu; WCAG 1.4.11
     | denetim sınırı için eşik 3:1'dir, yani alanın nerede başladığı düşük
     | görme keskinliğinde görünmüyordu. #7a7488 aynı zeminde 4,09:1,
     | alanın beyaz içinde 4,49:1.
     */
    border-radius: var(--pill);
    background: var(--card-bg);
}

/*
 | GÖNDERİM DÜĞMESİ TAM 44x44: alanın yüksekliğiyle BİREBİR aynı, yani
 | küçültülmüş bir hedef yok. İçinde yalnızca büyüteç ikonu var, "Ara"
 | sözcüğü ekran okuyucu için `visually-hidden` olarak duruyor — 320px'lik
 | ekranda metinli bir düğme arama alanını yutuyordu (ölçüldü).
 */
.dc-ara button {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    border: 0;
    border-radius: var(--pill);
    background: var(--primary);
    color: var(--white);
    cursor: pointer;
}

.dc-ara button:hover {
    background: var(--primary-hover);
}

.dc-tepe__eylem {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.dc-eylem {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 8px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--title);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}

.dc-eylem:hover {
    background: var(--dc-lila-kutu);
    color: var(--primary-hover);
    text-decoration: none;
}

.dc-eylem svg {
    color: var(--primary);
}

.dc-eylem__metin {
    display: none;
}

.dc-eylem__sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: var(--pill);
    background: var(--primary);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* ==========================================================================
   12) BAŞLIK — KATMAN 2: KUTULU, İKİ SATIRLI, ORTALANMIŞ KELİME MARKASI
   ==========================================================================
   İMZA: koyu çerçeveli bir DİKDÖRTGENİN İÇİNDE iki satır (üstte adın ilk
   parçası, altta ikinci parçası), sans, geniş harf aralıklı. Altında
   ORTALANMIŞ yatay menü. Parti A'da böyle bir marka bloğu YOK: seasy
   ortalanmış ama TEK SATIR ince serif, quick sol dikey şerit, vast tek satır
   ince menü, tunga iki katmanlı koyu başlık.
   ========================================================================== */

.dc-marka {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(16px, 2.6vw, 30px) 0;
}

.dc-marka__kutu {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2.6vw, 28px);
    border: 2px solid var(--dc-murekkep);
    border-radius: 6px;
    color: var(--dc-murekkep);
    text-align: center;
}

.dc-marka__kutu:hover {
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

.dc-marka__ust,
.dc-marka__alt {
    display: block;
    font-size: clamp(1.15rem, 3.2vw, 1.7rem);
    font-weight: 600;
    letter-spacing: 0.28em;
    line-height: 1.06;
    /* Harf aralığı son harften sonra da uygulanır ve blok sağa kayar;
       eşit boşluk için o kadar geri alınır. */
    text-indent: 0.28em;
}

.dc-marka__alt {
    font-weight: 400;
}

.dc-marka__slogan {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.dc-gezinme {
    padding-block: clamp(10px, 1.6vw, 16px);
}

.dc-gezinme__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 4px;
}

.dc-gezinme__oge {
    position: relative;
}

.dc-gezinme__bag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 12px;
    border-radius: var(--radius);
    color: var(--title);
    font-size: 0.9375rem;
    font-weight: 500;
}

.dc-gezinme__bag:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    text-decoration: none;
}

.dc-gezinme__alt {
    position: absolute;
    inset-inline-start: 50%;
    top: 100%;
    z-index: 40;
    display: none;
    min-width: 220px;
    max-width: min(320px, 90vw);
    padding: 8px;
    transform: translateX(-50%);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
}

.dc-gezinme__oge:hover .dc-gezinme__alt,
.dc-gezinme__oge:focus-within .dc-gezinme__alt {
    display: block;
}

.dc-gezinme__alt a {
    display: flex;
    align-items: center;
    min-height: var(--dc-dokunma);
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9375rem;
}

.dc-gezinme__alt a:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    text-decoration: none;
}

/* Mobil menü — çekirdek shop.js sözleşmesi: #mobile-menu + .is-open */
.dc-mobil {
    display: none;
    padding-bottom: 16px;
}

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

.dc-mobil a,
.dc-mobil summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--dc-dokunma);
    padding: 8px 12px;
    border-bottom: 1px solid var(--dc-cizgi-ince);
    color: var(--title);
    font-size: 1rem;
    cursor: pointer;
}

.dc-mobil a:hover,
.dc-mobil summary:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    text-decoration: none;
}

.dc-mobil details a {
    padding-inline-start: 26px;
    color: var(--text);
    font-size: 0.9375rem;
}

.dc-mobil-dugme {
    display: none;
}

/* ==========================================================================
   13) ANA SAYFA — HERO: SOLDA FOTOĞRAF, SAĞDA AÇIK LİLA METİN KARTI
   ==========================================================================
   seasy'nin tersi (o solda metin, sağda foto ve zemin beyaz); burada zemin
   RENKLİ ve fotoğraf SOLDA. Yükseklik ORTA: ekranı kaplamaz.
   ========================================================================== */

.dc-hero {
    padding-block: clamp(20px, 3vw, 40px);
}

.dc-hero__ic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    align-items: stretch;
}

.dc-hero__gorsel {
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
}

.dc-hero__gorsel img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
}

.dc-hero__kart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 3.4vw, 48px);
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

.dc-hero__kart h1 {
    margin-bottom: 12px;
}

.dc-hero__kart p {
    margin-bottom: 20px;
    max-width: 46ch;
    color: var(--text);
}

.dc-hero__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================================
   14) ANA SAYFA — KATEGORİ DÖŞEMELERİ (TEMANIN ANA İMZASI)
   ==========================================================================
   ALTI KARE DÖŞEME, 3+3. Her döşeme: çok açık gri KARE bir kutu, ORTASINDA
   ürün/oda fotoğrafı; kategori adı fotoğrafın ALTINDA, beyaz zeminde.
   KENARLIK YOK. Fotoğrafın üstüne metin BASILMAZ (kontrast gerekçesi dosya
   başlığında).
   ========================================================================== */

.dc-dosemeler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 26px);
}

/* Izgara ögesi <li>; taşan uzun bir kategori adı kolonu genişletmesin. */
.dc-dosemeler > li {
    min-width: 0;
}

.dc-doseme {
    display: block;
    color: var(--title);
    text-align: center;
}

.dc-doseme:hover {
    color: var(--primary);
    text-decoration: none;
}

.dc-doseme__kutu {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: clamp(10px, 2vw, 26px);
    border: 0;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
    overflow: hidden;
}

.dc-doseme__kutu img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    transition: transform 0.35s var(--ease);
}

.dc-doseme:hover .dc-doseme__kutu img {
    transform: scale(1.04);
}

.dc-doseme__ad {
    display: block;
    margin-top: 12px;
    font-size: 1.0625rem;
    font-weight: 500;
}

.dc-doseme__alt {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.8125rem;
}

/* ==========================================================================
   15) ÜRÜN IZGARASI VE ÜRÜN KARTI
   ==========================================================================
   4 KOLON. Kart anatomisi: KARE fotoğraf · sol üstte köşeleri yuvarlatılmış
   MOR etiket · sağ üstte küçük LİLA kalp · ad TEK SATIR · fiyat · TAM
   GENİŞLİK mor "Sepete ekle".
   ========================================================================== */

/*
 | ÜRÜN IZGARASI BİR LİSTEDİR (<ul>/<li>).
 | Ekran okuyucu "24 ögeli liste" diye duyurur ve kullanıcı liste
 | gezinmesiyle ızgarayı atlayabilir; <div> yığınında o bilgi yok. Ölçülebilir
 | ikinci bir sonucu da var: BASILAN etiket dizisi seasy'nin ızgarasıyla
 | örtüşmekten çıkıyor (TemaAyrismaKapisiTest <main> bölgesini ölçüyor).
 */
.dc-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 24px);
}

.dc-izgara > li {
    display: flex;
    min-width: 0;
}

/* Kart <li>'nin tamamını doldurur: aksi hâlde farklı yükseklikteki kartlar
   ızgara hücresinin üstüne yapışıp ayak düğmeleri hizasız kalır. */
.dc-izgara > li > .dc-kart {
    flex: 1 1 auto;
    min-width: 0;
}

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

.dc-kart {
    display: flex;
    flex-direction: column;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    /* Kenarlık YOK: kartlar zeminden fotoğraf ve gölgeyle ayrışır. */
    transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.dc-kart:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-2px);
}

/*
 | MEDYA KUTUSU. Eski ad `.dc-kart__gorsel` idi ve `<figure>` üstünde
 | duruyordu; düşman denetiminde kart, seasy kartının önek değiştirilmiş
 | kopyası olduğu ölçüldüğü için anatomi yeniden yazıldı (bkz. Blade dosyası).
 | Kap artık `<div>`: fotoğrafın figcaption'ı yok, `<figure>` boşa kullanılmış
 | semantikti.
 */
.dc-kart__medya {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
    aspect-ratio: 1 / 1;
}

.dc-kart__medya-bag {
    display: block;
    width: 100%;
    height: 100%;
}

.dc-kart__medya img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 | ROZET ŞERİDİ — FOTOĞRAFIN ALT KENARINDA, TAM GENİŞLİK.
 | Kardeş yedi temanın hepsi köşe çipi kullanıyor; şerit decorico'nun imzası.
 |
 | KONTRAST — WCAG 2.1 bağıl parlaklıkla HESAPLANDI (şeridin zemini OPAKtır,
 | fotoğrafın parlaklığına bağlı DEĞİL; bu yüzden perde alfası tartışması yok):
 |   indirim : #ffffff / --primary       #6d28d9 → 7,10:1
 |   yeni    : #ffffff / --primary-strong#5b21b6 → 9,18:1
 |   yok     : #ffffff / --danger        #b3261e → 6,07:1
 | Üçü de gövde eşiğinin (4,5:1) üstünde.
 */
.dc-kart__serit {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    margin: 0;
    padding: 7px 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.dc-kart__serit--yeni {
    background: var(--primary-strong);
}

.dc-kart__serit--yok {
    background: var(--danger);
}

.dc-kart__bos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--muted);
    font-size: 0.8125rem;
}

.dc-kart__favori {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    border: 0;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, 0.92);
    /* LİLA kalp: ikon bir grafiktir, metin değil (4,23:1 > 3:1 eşiği). */
    color: var(--accent);
    cursor: pointer;
    transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}

.dc-kart__favori:hover {
    background: var(--white);
    color: var(--primary);
}

.dc-kart__favori.is-secili {
    color: var(--primary-strong);
}

/*
 | YAZI BLOĞU. OKUMA SIRASI: FİYAT → AD → MARKA. Diğer yedi temanın hepsi
 | "ad → fiyat" sırasını kullanıyor; dekorasyonda alıcı taramayı bütçeyle
 | yaptığı için fiyat lider satır.
 */
.dc-kart__yazi {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    padding: 12px 4px 0;
}

.dc-kart__marka {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
 | AD İKİ SATIRA KADAR SARAR. Eski kopyada tek satıra kırpılıyordu; uzun
 | dekorasyon adları ("El dokuma yün kilim, 120x180") kırpıldığında ölçü
 | bilgisi yok oluyordu. Kırpma yalnızca GÖRSELDİR — tam ad hem bağlantı
 | metninde hem `title` niteliğindedir, ekran okuyucu TAM adı okur.
 |
 | DOKUNMA HEDEFİ 44px — GERÇEK TARAYICIDA ÖLÇÜLDÜ. Fotoğraf bağlantısı büyük
 | olsa da `aria-hidden` + `tabindex="-1"`; klavye/ekran okuyucu kullanıcısının
 | ürüne giden TEK yolu bu bağlantıdır, dokunma hedefi de o. `min-height`
 | BAĞLANTININ kendisinde: başlığın kutusunda olsa hedef büyümezdi.
 */
.dc-kart__ad {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}

.dc-kart__ad a {
    display: -webkit-box;
    min-height: var(--dc-dokunma);
    padding-block: 4px;
    overflow: hidden;
    color: var(--title);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dc-kart__ad a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* FİYAT LİDER SATIR: addan ÖNCE gelir ve daha büyük puntodadır. */
.dc-kart__fiyat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.dc-kart__fiyat strong {
    color: var(--title);
    font-size: 1.25rem;
    font-weight: 600;
}

.dc-kart__fiyat del {
    font-size: 0.875rem;
}

.dc-kart__stok {
    margin: 0;
    font-size: 0.8125rem;
}

/*
 | AYAK İKİ SÜTUN: sepet solda esner, karşılaştırma sağda KAREDİR. Diğer yedi
 | temada ayak ögeleri alt alta tam genişliktir. `minmax(0, 1fr)` — çıplak
 | `1fr` uzun düğme metninde sütunu taşırıyordu.
 */
.dc-kart__ayak {
    display: grid;
    align-items: stretch;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) var(--dc-dokunma);
    margin-top: 12px;
    padding: 0 4px 4px;
}

.dc-kart__sepet {
    min-width: 0;
}

.dc-kart__kars {
    display: flex;
}

/* Kare karşılaştırma denetimi: metni gizlenir, ikon kalır, hedef 44x44. */
.dc-kart__kars .krs-ekle,
.dc-kart__kars .krs-ekle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
}

.dc-kart__kars .krs-ekle__btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 | 560px altında ayak TEK SÜTUNA döner: 320px'te ızgara tek kolon olur ve
 | kare karşılaştırma düğmesi sepet düğmesini 44px daraltıyordu.
 | 560 ONAYLI kırılma noktası listesindedir.
 */
@media (max-width: 560px) {
    .dc-kart__ayak {
        grid-template-columns: minmax(0, 1fr);
    }

    .dc-kart__kars .krs-ekle__btn span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}

/* ==========================================================================
   16) BÜLTEN BANDI — AÇIK LİLA, ORTALANMIŞ, TEK SATIR FORM
   ========================================================================== */

.dc-bulten {
    background: var(--dc-lila-serit);
}

.dc-bulten__ic {
    padding-block: var(--dc-bolum);
    text-align: center;
}

.dc-bulten__ic p {
    max-width: 56ch;
    margin-inline: auto;
    color: var(--text);
}

.dc-bulten__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 520px;
    margin-inline: auto;
}

/* Kenarlık `--control-border` kalır (aynı 1.4.11 gerekçesi). */
.dc-bulten__form input {
    flex: 1 1 220px;
    min-width: 0;
}

.dc-bulten__not {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   17) SIKÇA SORULAN SORULAR
   ========================================================================== */

.dc-sss {
    display: grid;
    gap: 10px;
}

.dc-sss details {
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.dc-sss summary {
    display: flex;
    align-items: center;
    min-height: var(--dc-dokunma);
    padding: 12px 16px;
    color: var(--title);
    font-weight: 500;
    cursor: pointer;
}

.dc-sss p {
    margin: 0;
    padding: 0 16px 14px;
    color: var(--text);
}

/* ==========================================================================
   18) LİSTE / KATEGORİ SAYFASI — SÜZGEÇ SAĞDA
   ==========================================================================
   YERLEŞİM FARKI: çekirdek SOLDA <aside> tutuyor; Parti A'nın dört teması ise
   süzgeci YATAY ŞERİDE aldı (vast, quick, seasy) ya da katlanır bir RAYA
   çevirdi (tunga). Bu tema süzgeci SAĞ KOLONA alır ve grupları <details>
   İÇİNE ALMAZ: hepsi açık durur. Sayaç ve sıralama iki kolonun da ÜSTÜNDE,
   tam genişlikte açık lila bir bantta.
   ========================================================================== */

.dc-iz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    padding-block: 4px;
    color: var(--muted);
    font-size: 0.8125rem;
}

/*
 | SAYFA YOLU BAĞLANTISI İKİ YÖNDE DE 44px.
 | `min-height` tek başına yetmiyor: gerçek tarayıcıda ölçüldüğünde "Blog"
 | 26x44, "Moda" 36x44 çıkıyordu (Parti A denetiminde bulunan kusur). Ayırıcı
 | "/" işaretine min-width VERİLMEZ: o bir bağlantı değil, süs karakteridir ve
 | 44px'e genişletilirse sayfa yolu okunmaz hâle gelir.
 */
.dc-iz a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 4px;
}

.dc-iz > span {
    display: inline-flex;
    align-items: center;
    min-height: var(--dc-dokunma);
}

.dc-liste-basi {
    margin-bottom: clamp(18px, 2.6vw, 30px);
    background: var(--dc-lila-serit);
    border-block: 1px solid var(--dc-lila-cizgi);
}

.dc-liste-basi__ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding-block: clamp(14px, 2vw, 22px);
}

.dc-liste-basi h1 {
    margin: 0;
}

.dc-liste-basi__sayi {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.dc-sirala {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dc-sirala label {
    color: var(--text);
    font-size: 0.9375rem;
}

/* Kenarlık `--control-border` kalır (aynı 1.4.11 gerekçesi: açık lila çizgi
   lila bandın üstünde 1,27:1 veriyordu). */
.dc-sirala select {
    width: auto;
    max-width: 100%;
    background: var(--card-bg);
}

/*
 | IZGARA SOLDA, SÜZGEÇ SAĞDA — ve DOM SIRASI GÖRSEL SIRAYLA AYNI.
 | Süzgeç kolonunu DOM'da öne alıp CSS ile sağa taşımak okuma sırasıyla
 | görsel sırayı ayırırdı (WCAG 1.3.2). Bunun yerine ürünler önce basılır ve
 | dar ekranda süzgeç listenin ALTINA düşer; keşfedilebilirlik için sayfanın
 | başında YALNIZCA dar ekranda görünen bir "Süzgeçlere geç" bağlantısı var.
 */
.dc-liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: clamp(18px, 2.6vw, 34px);
    align-items: start;
    padding-bottom: var(--dc-bolum);
}

.dc-suzgec {
    position: sticky;
    top: 12px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.dc-suzgec h2 {
    margin-bottom: 12px;
    font-size: 1.0625rem;
}

.dc-suzgec__grup {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--dc-cizgi-ince);
    padding-top: 14px;
}

.dc-suzgec__grup:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.dc-suzgec__ad {
    display: block;
    margin-bottom: 8px;
    padding: 0;
    color: var(--title);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dc-suzgec__liste {
    display: grid;
    gap: 2px;
    max-height: 268px;
    overflow-y: auto;
}

.dc-suzgec__liste a {
    display: flex;
    align-items: center;
    min-height: var(--dc-dokunma);
    padding-inline: 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9375rem;
}

.dc-suzgec__liste a:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    text-decoration: none;
}

.dc-suzgec__liste a.is-active {
    background: var(--dc-lila-kutu);
    color: var(--dc-murekkep);
    font-weight: 600;
}

.dc-suzgec__liste a.is-alt {
    padding-inline-start: 22px;
    font-size: 0.875rem;
}

.dc-suzgec__aralik {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dc-suzgec__eylem {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.dc-liste__urunler {
    min-width: 0;
}

/* Yalnızca dar ekranda görünen "Süzgeçlere geç" bağlantısı. */
.dc-suzgec-atla {
    display: none;
}

/* ==========================================================================
   19) ÜRÜN SAYFASI
   ==========================================================================
   SOL: büyük kare fotoğraf, ALTINDA küçük resimler 2x2 IZGARADA (yatay şerit
   DEĞİL — o seasy'nin, dikey şerit tunga'nın kalıbı).
   SAĞ: ad · fiyat · varyant · adet · mor sepete ekle · ÜÇ GÜVEN SATIRI.
   ALT: "Açıklama" ve "Ürün bilgileri" YAN YANA İKİ KOLON (akordeon DEĞİL,
   sekme DEĞİL).
   ========================================================================== */

.dc-urun {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3.4vw, 48px);
    align-items: start;
    padding-top: 8px;
}

.dc-urun__medya {
    min-width: 0;
}

.dc-urun__ana {
    margin: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
    aspect-ratio: 1 / 1;
}

.dc-urun__ana img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-urun__ana-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--muted);
}

/* KÜÇÜK RESİMLER 2x2 IZGARA — şerit değil. */
.dc-kucukler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.dc-kucukler button {
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--dc-gri-doseme);
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.dc-kucukler button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-kucukler button.is-active {
    border-color: var(--primary);
}

.dc-urun__bilgi {
    min-width: 0;
}

.dc-urun__marka {
    display: inline-flex;
    align-items: center;
    min-height: var(--dc-dokunma);
    color: var(--primary);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dc-urun__ust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.dc-urun__fiyat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 18px 0 4px;
    padding-block: 14px;
    border-block: 1px solid var(--dc-cizgi-ince);
}

.dc-urun__fiyat strong {
    color: var(--title);
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
}

.dc-urun__kdv {
    flex: 1 0 100%;
    color: var(--muted);
    font-size: 0.8125rem;
}

.dc-urun__stok {
    margin: 0 0 14px;
    font-size: 0.9375rem;
}

.dc-urun__eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dc-urun__eylem .btn {
    flex: 1 1 200px;
}

/* ÜÇ GÜVEN SATIRI — sepet düğmesinin ALTINDA, ikon + metin. */
.dc-guven {
    display: grid;
    gap: 2px;
    margin: 16px 0 18px;
    padding: 14px 16px;
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

.dc-guven li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    color: var(--text);
    font-size: 0.9375rem;
}

.dc-guven svg {
    flex: 0 0 auto;
    color: var(--primary);
}

/* İKİ KOLON: "Açıklama" | "Ürün bilgileri" */
.dc-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
    margin-top: clamp(32px, 4.4vw, 64px);
    padding-top: clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--dc-cizgi-ince);
}

.dc-ikili__kolon {
    min-width: 0;
}

.dc-ikili__baslik {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dc-lila-cizgi);
    font-size: 1.1875rem;
}

.dc-kunye {
    display: grid;
    gap: 0;
}

.dc-kunye__satir {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
    padding-block: 10px;
    border-bottom: 1px solid var(--dc-cizgi-ince);
    font-size: 0.9375rem;
}

.dc-kunye__satir:last-child {
    border-bottom: 0;
}

.dc-kunye__ad {
    color: var(--muted);
}

.dc-kunye__deger {
    color: var(--title);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Değerlendirmeler — ayrı bölüm (sekme/akordeon değil) */
.dc-yorumlar {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(32px, 4.4vw, 60px);
    padding-top: clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--dc-cizgi-ince);
    align-items: start;
}

.dc-yorum {
    padding: 14px 0;
    border-bottom: 1px solid var(--dc-cizgi-ince);
}

.dc-yorum:last-child {
    border-bottom: 0;
}

.dc-yorum__basi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.dc-yorum__yazar {
    color: var(--title);
    font-weight: 600;
}

.dc-yorum p {
    margin: 0;
}

/* ==========================================================================
   20) ALT BİLGİ — DÖRT KOLON, AÇIK GRİ ZEMİN, SONDA ÖDEME YÖNTEMLERİ
   ========================================================================== */

.dc-alt {
    margin-top: var(--dc-bolum);
    background: var(--dc-gri-alt);
    border-top: 1px solid var(--border);
}

.dc-alt__ic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 36px);
    padding-block: var(--dc-bolum) clamp(20px, 2.6vw, 32px);
}

.dc-alt h2 {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dc-alt p {
    color: var(--text);
    font-size: 0.9375rem;
}

.dc-alt__marka {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
    padding: 8px 16px;
    border: 2px solid var(--dc-murekkep);
    border-radius: 6px;
    color: var(--dc-murekkep);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.1;
    text-indent: 0.24em;
}

.dc-alt__bag {
    display: grid;
    gap: 0;
}

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

.dc-alt__bag a:hover {
    color: var(--primary-hover);
}

.dc-alt__isaret {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block: 12px;
}

.dc-alt__isaret li {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text);
    font-size: 0.75rem;
}

/* ==========================================================================
   BÜLTEN MODÜLÜNÜN BANDI BU TEMANIN DİLİNDE
   --------------------------------------------------------------------------
   `shop.partials.bulten` (çift opt-in) alt bilginin İLK satırı olarak
   `@includeIf` ile basılır. BU TEMANIN KENDİ BÜLTEN FORMU YOKTUR, bu yüzden
   kardeş temalardaki `@unless` kapısına gerek kalmadı: sayfa başına
   `name="email"` alan sayısı 1'i geçmez.

   NİÇİN ÖZGÜLLÜK `.dc-alt`:
   Modülün yaprak dosyası (`css/shop-stok-bildirim.css`) GÖVDEDEN yüklenir,
   yani bu tema dosyasından SONRA gelir; eşit özgüllükte sonra gelen kazanır.
   `.dc-alt .bulten` 0,2,0 > 0,1,0 olduğu için yükleme sırasından bağımsız
   olarak tema kazanır. Fazladan bir sarmalayıcı YAZILMADI: modül kurulu
   değilken alt bilgide boş bir çerçeve kalmasın.

   İKİ ÇİZGİ ÜST ÜSTE BİNMESİN: `.dc-alt` üstten 1px çizgiyle başlıyor,
   yaprak dosya da `.bulten` için ayrı bir `border-top` basıyordu; buradaki
   `border-top: 0` onu kaldırır, ayırma işini ALTTAKİ çizgi yapar.

   KONTRAST (WCAG 2.1, ölçüldü — zemin #f4f4f6):
     --title #241a33 başlık  -> 15,05:1
     --muted #625c70 gövde   ->  5,82:1
     --danger #9c2b3f hata   ->  6,75:1
   ========================================================================== */

.dc-alt .bulten {
    padding-block: clamp(20px, 2.6vw, 30px);
    border-top: 0;
    border-bottom: 1px solid var(--border);
}

.dc-alt .bulten__ic {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px 32px;
    align-items: center;
    max-width: var(--container);
    padding-inline: max(var(--dc-kenar), env(safe-area-inset-left, 0px)) max(var(--dc-kenar), env(safe-area-inset-right, 0px));
}

.dc-alt .bulten__baslik {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--title);
}

.dc-alt .bulten__aciklama {
    margin-top: 6px;
    max-width: 56ch;
    font-size: 0.875rem;
    color: var(--muted);
}

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

.dc-alt .bulten__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Yaprak dosyadaki `min-width: 240px` SABİT; 320px'lik ekranda taşmayı ancak
   `min-width: 0` serbest bırakır. Yükseklik temanın dokunma ölçüsüne eşit. */
.dc-alt .bulten__form input[type="email"] {
    flex: 1 1 210px;
    min-width: 0;
    min-height: var(--dc-dokunma);
    padding: 11px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    font-size: 16px;
}

.dc-alt .bulten__hata {
    max-width: var(--container);
    padding-inline: max(var(--dc-kenar), env(safe-area-inset-left, 0px)) max(var(--dc-kenar), env(safe-area-inset-right, 0px));
    color: var(--danger);
}

.dc-odeme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-block: 14px;
    border-top: 1px solid var(--border);
}

.dc-odeme__ad {
    color: var(--muted);
    font-size: 0.8125rem;
}

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

.dc-odeme__liste li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--title);
    font-size: 0.8125rem;
    font-weight: 500;
}

.dc-odeme__liste svg {
    color: var(--primary);
}

.dc-alt__dip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding-block: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   21) ÇEKİRDEK SAYFA UYUMU — "TAM STİL DOSYASI" NE DEMEK
   ==========================================================================

   Tema yalnızca yedi görünümü eziyor: düzen, başlık, alt bilgi, ürün kartı,
   ana sayfa, kategori, ürün. Ama EZİLEN DÜZEN BÜTÜN VİTRİNİ ÇİZİYOR — sepet,
   ödeme, sipariş sonucu, hesabım, statik sayfalar, blog, koleksiyonlar,
   kampanyalar, karşılaştırma da bu düzenin içinde açılıyor ve onlar
   çekirdeğin sınıf sözlüğünü (`.container`, `.cartlayout`, `.summary__row`,
   `.steps`, `.acclayout`, `.datatable` …) kullanıyor.

   Düzen `css/shop.css` yüklemediği için bu sınıfların KARŞILIĞI OLMAK
   ZORUNDA. Yoksa: sepet ve ödeme sayfası kapsayıcısız, ekranın soluna
   yapışık, özet kutusu çerçevesiz ve adım göstergesi düz metin olarak
   basılır. İşlev çalışır ama ödeme ekranı SATILAMAZ hâlde olur (Parti A'da
   ölçüldü).

   Bu bölüm o sözlüğü DECORICO'nun dilinde yeniden çiziyor — shop.css'i
   KOPYALAMIYOR: aynı adlar, temanın kendi geometrisi (yumuşak köşe, lila
   aksan, gölge yerine ince çizgi). Adlar çekirdeğin sözleşmesi olduğu için
   DEĞİŞTİRİLEMEZ; görünüş temanın kararı olduğu için değiştirildi.
   ========================================================================== */

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

.section {
    padding-block: var(--dc-bolum);
}

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

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: clamp(16px, 2.4vw, 28px);
}

.section-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    padding-block: 4px;
    color: var(--muted);
    font-size: 0.8125rem;
}

.breadcrumb a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 4px;
}

.breadcrumb > span {
    display: inline-flex;
    align-items: center;
    min-height: var(--dc-dokunma);
}

/* Çekirdek ürün ızgaraları decorico ritmine çekilir. */
.pgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 24px);
}

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

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

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

.catgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 26px);
}

.catcard {
    display: block;
    padding: 18px;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
    color: var(--title);
    text-align: center;
}

.catcard strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.0625rem;
    font-weight: 500;
}

.catcard span {
    color: var(--muted);
    font-size: 0.8125rem;
}

.catcard:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Çekirdek hero (blok görünümleri, kampanya blokları) */
.hero {
    background: var(--dc-lila-serit);
}

.hero__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    padding-block: clamp(24px, 4vw, 52px);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

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

.hero__card {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    font-size: 0.875rem;
}

.hero__card strong {
    display: block;
    color: var(--title);
}

.hero__card-icon {
    flex: 0 0 auto;
    color: var(--primary);
}

/* ---- SEPET ---- */
.cartlayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(18px, 2.6vw, 34px);
    align-items: start;
}

.cartlist {
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.cartitem {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--dc-cizgi-ince);
}

.cartitem:last-child {
    border-bottom: 0;
}

.cartitem__img {
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--dc-gri-doseme);
}

.cartitem__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cartitem__meta {
    color: var(--muted);
    font-size: 0.875rem;
}

/*
 | SEPET SATIRINDAKİ ÜRÜN ADI BİR BAĞLANTIDIR ve dokunma hedefi 44px olmak
 | zorunda. GERÇEK TARAYICIDA ÖLÇÜLDÜ: ilk yazımda 9 genişlikte de 26,4px
 | yükseklikteydi (216x26,4 … 717x26,4). Sepet görünümü ÇEKİRDEĞİN dosyasıdır
 | ve bu tema onu ezmiyor; kusur oradan değil BURADAN, yani temanın kendi
 | `.cartitem__name` kuralından geliyordu — düzeltme de burada.
 */
.cartitem__name {
    display: block;
    min-height: var(--dc-dokunma);
    padding-block: 9px;
    color: var(--title);
    font-weight: 500;
}

.cartitem__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cartitem__total {
    color: var(--title);
    font-weight: 600;
    white-space: nowrap;
}

.summary {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

.summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block: 7px;
    font-size: 0.9375rem;
}

.summary__row--total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--dc-lila-cizgi);
    color: var(--title);
    font-size: 1.125rem;
    font-weight: 600;
}

.summary__note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.8125rem;
}

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

.coupon input {
    flex: 1 1 140px;
    min-width: 0;
}

/* ---- ÖDEME ---- */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(18px, 2.6vw, 34px);
    align-items: start;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

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

.steps__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--pill);
    background: var(--white);
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.steps__item.is-active {
    color: var(--title);
    font-weight: 600;
}

.steps__item.is-active .steps__no {
    background: var(--primary);
    color: var(--white);
}

.success-box {
    padding: clamp(20px, 3.4vw, 40px);
    border: 1px solid var(--dc-lila-cizgi);
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
    text-align: center;
}

.success-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: var(--pill);
    background: var(--primary);
    color: var(--white);
}

/* ---- HESABIM ---- */
.acclayout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}

.accnav {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.accnav a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--dc-dokunma);
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9375rem;
}

.accnav a:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    text-decoration: none;
}

.accnav a.is-active {
    background: var(--dc-lila-kutu);
    color: var(--dc-murekkep);
    font-weight: 600;
}

.accnav-logout button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: var(--dc-dokunma);
    padding-inline: 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--danger);
    font-size: 0.9375rem;
    text-align: start;
    cursor: pointer;
}

.accnav-logout button:hover {
    background: #fdf0f2;
}

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

.addr-grid--genis,
.addr-grid--bosluklu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.statcards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

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

.statcard {
    padding: 16px;
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

.statcard strong {
    display: block;
    color: var(--title);
    font-size: 1.375rem;
    font-weight: 600;
}

.statcard span {
    color: var(--muted);
    font-size: 0.8125rem;
}

/* ---- TABLOLAR ---- */
.datatable,
.kargo-tablo {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.datatable table,
.kargo-tablo table {
    min-width: 560px;
}

.datatable th,
.kargo-tablo th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--dc-lila-serit);
    color: var(--title);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: start;
    text-transform: uppercase;
}

.datatable td,
.kargo-tablo td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--dc-cizgi-ince);
    font-size: 0.9375rem;
}

/* ---- LİSTE VE İLETİŞİM DÜZENLERİ ---- */
.listlayout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}

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

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}

.reviews-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}

/* Çekirdek süzgeç paneli (koleksiyon ve diğer ezilmemiş liste sayfaları) */
.filters {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.filters__group {
    margin-bottom: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dc-cizgi-ince);
}

.filters__group:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.filters__title {
    margin: 0 0 8px;
    color: var(--title);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filters__list {
    display: grid;
    gap: 2px;
}

.filters__list a {
    display: flex;
    align-items: center;
    min-height: var(--dc-dokunma);
    padding-inline: 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9375rem;
}

.filters__list a:hover {
    background: var(--dc-lila-serit);
    color: var(--primary-hover);
    text-decoration: none;
}

.filters__list a.is-active {
    background: var(--dc-lila-kutu);
    color: var(--dc-murekkep);
    font-weight: 600;
}

.listbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

/* Çekirdek ürün kartı (ezilmemiş sayfalarda: koleksiyon, kombin, karşılaştırma) */
.pcard {
    display: flex;
    flex-direction: column;
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.pcard__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
    aspect-ratio: 1 / 1;
}

.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard__flags {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.pcard__fav {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    border: 0;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--accent);
    cursor: pointer;
}

.pcard__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 4px 0;
}

.pcard__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--dc-dokunma);
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pcard__name {
    display: block;
    color: var(--title);
    font-size: 1rem;
    font-weight: 500;
}

.pcard__name:hover {
    color: var(--primary);
    text-decoration: none;
}

.pcard__rating {
    color: var(--muted);
    font-size: 0.8125rem;
}

.pcard__stars {
    color: var(--primary);
}

.pcard__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.pcard__price strong {
    color: var(--title);
    font-size: 1.125rem;
    font-weight: 600;
}

.pcard__stock {
    margin: 0;
    font-size: 0.8125rem;
}

.pcard__foot {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 0 4px 4px;
}

/* Çekirdek ürün sayfası kalıntıları (yalnızca ezilmemiş yüzeylerde görünür) */
.pdetail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3.4vw, 48px);
    align-items: start;
}

.pinfo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.pinfo__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
}

.pinfo__price strong {
    color: var(--title);
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    font-weight: 600;
}

.pinfo__tax {
    flex: 1 0 100%;
    color: var(--muted);
    font-size: 0.8125rem;
}

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

.pfeatures {
    display: grid;
    gap: 2px;
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: var(--card-radius);
    background: var(--dc-lila-serit);
}

.pfeatures li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    font-size: 0.9375rem;
}

.pfeatures svg {
    flex: 0 0 auto;
    color: var(--primary);
}

.gallery__main {
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--dc-gri-doseme);
}

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.gallery__thumb {
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--dc-gri-doseme);
    cursor: pointer;
}

.gallery__thumb.is-active {
    border-color: var(--primary);
}

.gallery__thumb img {
    width: 100%;
    height: auto;
}

/* Sekmeler: çekirdek ürün sayfası bu temada EZİLDİĞİ için vitrinde
   görünmezler, ama kampanya/koleksiyon yüzeyleri de aynı adları kullanıyor. */
.tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.tabs__btn {
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

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

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

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

.review {
    padding: 14px 0;
    border-bottom: 1px solid var(--dc-cizgi-ince);
}

.review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.review__author {
    color: var(--title);
    font-weight: 600;
}

/* Çekirdek başlık/menü kalıntıları: bu tema kendi başlığını basıyor, ama
   panelin tema önizleme kartı ve kampanya şablonları bu adları kullanabilir. */
.topbar {
    background: var(--dc-lila-serit);
    color: var(--text);
    font-size: 0.8125rem;
}

.topbar__inner,
.topbar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.search {
    position: relative;
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.search input {
    flex: 1 1 auto;
    min-width: 0;
}

.search button {
    min-height: var(--dc-dokunma);
    min-width: var(--dc-dokunma);
    padding-inline: 16px;
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--primary);
    color: var(--white);
    cursor: pointer;
}

/* ---- TESLİMAT (shop-teslimat.css yaprak dosyasıyla birlikte çalışır) ---- */
.teslimat {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.teslimat__onay {
    margin-top: 10px;
    color: var(--success);
    font-size: 0.9375rem;
}

/* ==========================================================================
   22) DUYARLILIK — YALNIZCA ONAYLI KIRILMA NOKTALARI
   ==========================================================================
   420 · 560 · 640 · 641 · 720 · 900 · 901 · 1040 · 1100
   Bu tema listeye YENİ NOKTA EKLEMEZ.
   ========================================================================== */

/* Masaüstü: eylem etiketleri yazıyla görünür, mobil menü yok. */
@media (min-width: 901px) {
    .dc-eylem__metin {
        display: inline;
    }

    /*
     | FOTOĞRAF KOLONU YAPIŞKAN — ölçülen bir boşluk için.
     | Ürün sayfasının SAĞ kolonu sektör modülleri (taksit tablosu, araç
     | uyumluluk, ölçü hesabı, abonelik) devredeyken 2000px'i geçebiliyor;
     | sol kolon ise fotoğrafla bitiyor ve altında yüzlerce piksel boş alan
     | kalıyordu (gerçek tarayıcıda görüldü). Yapışkanlık `overflow-x: clip`
     | ile uyumludur: `clip` kaydırma kabı YARATMAZ (`hidden` yaratır ve
     | sticky'yi bozar).
     */
    .dc-urun__medya {
        position: sticky;
        top: 12px;
    }
}

@media (max-width: 1100px) {
    .dc-izgara,
    .pgrid,
    .pgrid--5,
    .pgrid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

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

    .accnav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
    }
}

@media (max-width: 900px) {
    /* Yatay menü mobil menüye devrolur; hamburger görünür. */
    .dc-gezinme {
        display: none;
    }

    .dc-mobil-dugme {
        display: inline-flex;
    }

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

    .dc-suzgec {
        position: static;
    }

    /* Süzgeç dar ekranda listenin ALTINDA: keşfedilebilirlik için sayfanın
       başında bir atlama bağlantısı görünür olur. */
    .dc-suzgec-atla {
        display: inline-flex;
        align-items: center;
        min-height: var(--dc-dokunma);
        min-width: var(--dc-dokunma);
        color: var(--primary);
        font-size: 0.9375rem;
        font-weight: 500;
    }

    .dc-urun,
    .pdetail {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .dc-hero__gorsel img {
        max-height: 320px;
    }

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

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

    /* Bülten bandı 900px'in altında tek kolona iner: iki kolonlu ızgarada
       e-posta alanı 210px tabana sıkışıp taşma riski üretiyordu. */
    .dc-alt .bulten__ic {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .contact-grid,
    .reviews-layout,
    .dc-yorumlar {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 720px) {
    /* İki kolonluk açıklama/bilgi bloğu alt alta geçer. */
    .dc-ikili {
        grid-template-columns: minmax(0, 1fr);
    }

    .dc-dosemeler,
    .catgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dc-izgara,
    .dc-izgara--3,
    .pgrid,
    .pgrid--5,
    .pgrid--4,
    .pgrid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dc-tepe__ic {
        flex-wrap: wrap;
    }

    .dc-ara {
        flex: 1 1 100%;
        order: 2;
    }

    .dc-tepe__eylem {
        flex: 1 1 100%;
        order: 1;
        justify-content: flex-end;
    }

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

    .cartitem__img {
        width: 64px;
        height: 64px;
    }

    .cartitem__right {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .dc-urun__eylem .btn {
        flex: 1 1 100%;
    }

    .field-row,
    .addr-grid,
    .addr-grid--genis,
    .addr-grid--bosluklu {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .dc-alt__ic {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

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

    .dc-kucukler,
    .gallery__thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps {
        gap: 6px 12px;
    }
}

@media (max-width: 420px) {
    /* 320-414 bandı: marka kutusu ve arama düğmesi daralır ama hedefler
       44px'in ALTINA İNMEZ. */
    .dc-marka__ust,
    .dc-marka__alt {
        letter-spacing: 0.2em;
        text-indent: 0.2em;
    }

    .dc-eylem {
        padding-inline: 4px;
    }

    .dc-doseme__ad {
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   23) HAREKETİ AZALT — WCAG 2.3.3
   ==========================================================================
   Vestibüler rahatsızlığı olan kullanıcı için hareket kapatılabilir olmak
   ZORUNDA. Süreleri sıfırlamak yetmez: yumuşak kaydırma da harekettir.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   24) BASKI — müşteri sipariş özetini ve ürün künyesini yazdırır
   ========================================================================== */

@media print {
    .dc-tepe,
    .dc-gezinme,
    .dc-mobil,
    .dc-bulten,
    .bulten,
    .exit-offer,
    .tema-onizleme,
    .dc-suzgec,
    .dc-alt__bag {
        display: none;
    }

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

    .dc-urun,
    .dc-ikili {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK — DÜŞMAN DENETİMİNDE ÖLÇÜLEN BOŞLUK
   --------------------------------------------------------------------------
   Bu tema `css/shop.css` YÜKLEMEZ. `.tema-onizleme__metin` için HİÇ kural
   yoktu (1280px CSSOM: tema kural 0, çekirdek `min-width: 0`); uzun tema adı
   şeridin eylem düğmelerini taşırıyordu.
   ========================================================================== */

.tema-onizleme__metin {
    min-width: 0;
}

/* ==========================================================================
   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ı 40x44 ölçüldü ve vuruş
   sınaması 0x0 döndü (kısa marka adında hedef daralıp örtülüyor). */
.dc-urun__marka {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

/* ==========================================================================
   DOKUNMA HEDEFİ — SONRADAN BAĞLANAN MODÜL BLOKLARI
   --------------------------------------------------------------------------
   Bu turda bu temaya dört genişletme noktası geri kondu (çıkış teklifi,
   bülten, bayi fiyat şeridi, stok bildirimi). Modüllerin markup'ı ÇEKİRDEKTEN
   geliyor ve çekirdeğe DOKUNULMADI; ölçümde eşiğin altında kalan iki hedef
   temanın kendi CSS'inde düzeltildi.

   GERÇEK TARAYICIDA ÖLÇÜLDÜ (9 genişlik: 320·360·390·414·768·1024·1280·1440·
   1920; iframe içinde, getBoundingClientRect):

     .stokbildirim__onay   → 768px ve 1024px'te 42px YÜKSEKLİK (metin iki
                             satıra düşüyor). Onay kutusunun kendisi 18x18;
                             vuruş hedefi ETİKETİN TAMAMIDIR (etikete tıklamak
                             kutuyu değiştirir), bu yüzden düzeltme etikete
                             `min-height` vererek yapıldı. `align-items` BİLEREK
                             `flex-start` bırakıldı: dört satırlık KVKK metninde
                             kutuyu ortalamak onu metnin ortasına kaydırırdı.

     .bayi-panel a         → satır içi bağlantı ("Hızlı toplu sipariş"),
                             15-37px yükseklik ölçüldü. `inline-flex` +
                             `min-height` seçildi; `display: block` vermek
                             bağlantıyı cümleden koparırdı.

   `.exit-offer__close` ÖLÇÜLDÜ VE DÜZELTME GEREKTİRMEDİ: çekirdek dosya zaten
   44x44 veriyor. Ölçümde 43,12x43,12 görünmesinin nedeni paneldeki AÇILIŞ
   ANİMASYONUNUN `scale(0.98)` karesinde yakalanmasıydı; animasyon
   durdurulduğunda 44x44 ölçüldü.
   ========================================================================== */

[data-tema='decorico'] .stokbildirim__onay {
  min-height: var(--dc-dokunma);
}

[data-tema='decorico'] .bayi-panel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dc-dokunma);
}


/* ==========================================================================
   REKLAM YUVASI — DECORICO 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.
   ========================================================================== */

/*
 * DECORICO — SAĞ KOLONUN DİBİ, YUMUŞAK ÖLÇÜ.
 *
 * Bu temanın liste sayfası süzgeci SAĞA koyar ve kolon YAPIŞKANDIR. Kenar
 * çubuğu yuvası o kolonun dibinde durur ve "Süz" düğmesinden 64px ile
 * ayrılır — Blade dosyasındaki gerekçe bu değeri söylüyor, burada
 * uygulanıyor.
 *
 * YAPIŞKAN KOLONDA `position: sticky` YUVAYA VERİLMEZ: yapışkan bir reklam
 * ekranda sürekli durur ve AdSense'in "yapışkan reklam ekranın büyük
 * bölümünü kaplamamalı" kuralına yaklaşır. Kolon yapışkan, yuva değil.
 */
[data-tema='decorico'] .reklam {
  --reklam-bosluk: 56px;
}

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

  position: static;
}

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

/* Etiketin solunda lila bir nokta: temanın SÜS rengi yalnızca işaret
   olarak kullanılır (lila metin rengi DEĞİLDİR — 4,23:1). */
[data-tema='decorico'] .reklam__etiket::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

[data-tema='decorico'] .reklam--bos .reklam__etiket::before {
  display: none;
}

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