/* ==========================================================================
   DEMLİ — KAHVE VE KAHVE EKİPMANI TEMASI · TAM STİL DOSYASI
   ==========================================================================

   Bu dosya `public/css/shop.css` İLE BİRLİKTE YÜKLENMEZ, ONUN YERİNE geçer
   (bkz. resources/views/themes/demli/shop/layouts/app.blade.php). Yani burada
   yalnız temanın kendi sınıfları değil, ÇEKİRDEĞİN paylaşılan sınıfları da
   (btn, badge, alert, field, pagination, cartitem, checkout, prose,
   datatable…) bu temanın dilinde yeniden çizilir. Tema ezmediği bir görünüme
   düşüldüğünde (sepet, ödeme, hesabım, blog, kampanyalar, koleksiyonlar,
   karşılaştırma, statik sayfalar) sayfanın stilsiz kalmamasının tek sebebi
   12. bölümdür.

   :root DEĞERLERİ resources/themes/demli.php içindeki `tokens` dizisiyle
   BİREBİR AYNI OLMAK ZORUNDA — panel ince ayar formu başlangıç değerini
   oradan okur ve tests/Feature/ThemeTest.php bunu doğrular.

   KONTRAST (WCAG bağıl parlaklık, sayfa zemini #f7f3ee üstünde ölçüldü):
     --title #2a1d15 14,79:1 · --text #4e3d30 9,35:1 · --muted #75624f 5,26:1
     --accent #9a5a26 4,92:1 · --primary #3b2a1e 13,67:1 (üstünde beyaz aynı)
     --control-border #8a7660 3,93:1 (WCAG 1.4.11 eşiği 3:1)
   KOYU ZEMİN (espresso #3b2a1e) ÜSTÜNDE:
     #f4ece3 (ana metin) 12,0:1 · #e8ddd0 (ikincil) 9,8:1 · #d99a5e (vurgu)
     5,69:1. Bakır --accent koyu zemin üstünde 2,52:1 kaldığı için oraya
     TAŞINMAZ; başlık ve çekmecede vurgu rengi --vurgu-acik'tir.

   BÖLÜMLER
     1) sıfırlama · 2) kapsayıcı ve bölüm · 3) başlık ve menü çekmecesi
     4) ana sayfa · 5) ürün kartı · 6) liste sayfası (çip şeridi)
     7) form öğeleri · 8) ürün sayfası (tek kolon) · 9) alt bilgi
     10) reklam yuvası · 11) yardımcılar · 12) çekirdek sınıfların yeniden
     çizimi · 13) duyarlılık · 14) yazdırma
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #3b2a1e;
    --accent: #9a5a26;
    --title: #2a1d15;
    --text: #4e3d30;
    --page-bg: #f7f3ee;
    --card-bg: #fffdfa;
    --border: #e6dbcd;
    --radius: 6px;
    --card-radius: 10px;
    --btn-radius: 4px;
    --font-scale: 1;
    --container: 1200px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #75624f;
    /* Form denetimi kenarlığı: erişilebilirlik için SABİT, --border ile
       karıştırılmaz. --border yalnızca dekoratif çizgidir ve panelden
       istenildiği kadar açık yapılabilir; bu ise 3:1'in altına inemez. */
    --control-border: #8a7660;

    --yuzey: #efe7dc;
    --yuzey-koyu: #e5d9c8;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;

    /* Koyu espresso zemin (başlık, çekmece, alt bilgi) üstündeki üç ton. */
    --koyu-metin: #f4ece3;
    --koyu-ikincil: #e8ddd0;
    --vurgu-acik: #d99a5e;
    --koyu-ayrac: rgba(255, 253, 250, .16);

    --golge-cekmece: 18px 0 48px rgba(42, 29, 21, .28);
    --golge-yuzer: 0 10px 30px rgba(42, 29, 21, .12);
    --gecis: .18s ease;

    /* Başlığın yüksekliği çekmecenin üst konumunu belirliyor; iki yerde
       elle yazılmasın diye değişken. */
    --ust-yuksek: 64px;

    --baslik-yazi: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ======================================================================
       MODÜL KÖPRÜSÜ — ÖLÇÜLEN SESSİZ ARIZA
       ----------------------------------------------------------------------
       Bu tema public/css/shop.css'i HİÇ yüklemiyor, ama modüllerin yaprak
       stil dosyaları (shop-blog.css, shop-listeler.css, shop-karsilastirma.css,
       shop-oto.css, shop-koleksiyon.css, shop-stok-bildirim.css …) SAYFAYLA
       BİRLİKTE yükleniyor ve çekirdeğin köprü belirteçlerini kullanıyor.
       Tanımlı olmadıklarında `color: var(--on-primary)` GEÇERSİZ olur ve renk
       MİRAS ALINIR: /magaza/blog sayfasındaki seçili etiket çipi espresso
       zemin üstünde gövde metni rengiyle basılıyordu — ölçüldü:
       rgb(78,61,48) / rgb(59,42,30) = 1,3:1 (okunamaz).

       Bu yüzden köprü belirteçleri bu temanın kendi paletiyle burada
       tanımlanır. Hepsi ÇİFT olarak ölçüldü:
         --on-primary  #fffdfa / --primary #3b2a1e → 14,3:1
         --on-accent   #fffdfa / --accent  #9a5a26 →  5,4:1
         --accent-strong #7d4619 / --accent-soft #f3e5d6 → 7,0:1
         --primary-hover #2f2117 / --primary-soft #ece3d8 → 13,1:1
       ====================================================================== */
    --white: #fffdfa;
    --surface: var(--yuzey);
    --border-strong: #d5c6b3;
    --control-border-strong: #6b5946;

    --success: var(--basari);
    --danger: var(--hata);
    --warning: var(--uyari);

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

    --shadow-sm: 0 1px 2px rgba(42, 29, 21, .06);
    --shadow: var(--golge-yuzer);
    --shadow-lg: 0 16px 48px rgba(42, 29, 21, .18);
    --ease: cubic-bezier(.4, 0, .2, 1);

    --font-heading: var(--baslik-yazi);
    --font-body: var(--govde-yazi);

    --primary-strong: #2a1d15;
    --primary-hover: #2f2117;
    --primary-focus: #9a5a26;
    --primary-soft: #ece3d8;
    --primary-line: #e6dbcd;
    --on-primary: #fffdfa;

    --accent-strong: #7d4619;
    --accent-light: #c07d3d;
    --accent-soft: #f3e5d6;
    --on-accent: #fffdfa;

    --card-shadow: none;
    --card-hover-shadow: var(--golge-yuzer);
}

/* ==========================================================================
   1) SIFIRLAMA
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Galeri küçük resimleri ve SSS çapaları yumuşak kaysın. */
    scroll-behavior: smooth;
}

/* HAREKET AZALTMA: kullanıcının işletim sistemi ayarı buysa çekmecenin
   kayması, rayın yumuşak kayması ve bütün geçişler kapanır. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--govde-yazi);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

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

img {
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--baslik-yazi);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -.015em;
    color: var(--title);
}

h1 { font-size: calc(2.125rem * var(--font-scale)); }
h2 { font-size: calc(1.625rem * var(--font-scale)); }
h3 { font-size: calc(1.1875rem * var(--font-scale)); }
h4 { font-size: calc(1.0625rem * var(--font-scale)); }

p {
    margin: 0 0 1em;
}

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

a:hover {
    text-decoration: underline;
}

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

li {
    list-style: none;
}

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

button {
    cursor: pointer;
}

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

legend {
    padding: 0;
}

/* ODAK HALKASI: klavye kullanıcısı nerede olduğunu görmeli. Fare tıklamasında
   görünmesin diye :focus değil :focus-visible. Koyu zeminde bakır halka
   kaybolduğu için orada krema renge dönüyor (aşağıda). */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.dml-ust :focus-visible,
.dml-cekmece :focus-visible,
.dml-alt :focus-visible,
.dml-kahraman :focus-visible {
    outline-color: var(--koyu-metin);
}

/* Fiyat rakamları: sütun genişliği sabit ve satır sonunda ₺ kopmaz. */
.dml-urun__fiyat strong,
.dml-fiyat__tutar,
.dml-ray__oge del,
.dml-urun__fiyat del {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

/* ==========================================================================
   2) KAPSAYICI VE BÖLÜM
   ========================================================================== */

.dml-en,
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.dml-en--dar {
    max-width: 820px;
}

.dml-bildirim:empty {
    display: none;
}

.dml-bolum,
.section {
    padding-block: 60px;
}

.dml-bolum--yuzey,
.section--surface {
    background: var(--yuzey);
}

.dml-bolum__ust {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding-bottom: 12px;
    /* Kalın değil ÇİFT ton: üstte koyu ince çizgi, altında açık gölge çizgi.
       Bölüm başlıkları bu ikilikle raf etiketine benziyor. */
    border-bottom: 1px solid var(--title);
    box-shadow: 0 2px 0 var(--border);
}

.dml-bolum__baslik {
    margin: 0;
    font-size: calc(1.5rem * var(--font-scale));
    letter-spacing: -.02em;
}

.dml-bolum__not {
    margin: 0;
    font-size: .875rem;
    color: var(--muted);
}

.dml-bolum__bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--accent);
}

.dml-bolum__bag svg {
    transition: transform var(--gecis);
}

.dml-bolum__bag:hover svg {
    transform: translateX(3px);
}

/* ==========================================================================
   3) BAŞLIK — TEK KATMAN + MENÜ ÇEKMECESİ
   --------------------------------------------------------------------------
   BU TEMANIN YAPISAL İMZASI. Tek satır, koyu espresso zemin, üç bölge:
   SOL hamburger + "MENÜ" (masaüstünde de), ORTA kelime markası, SAĞ üç ikon.
   YATAY MENÜ YOK — kategori ağacı soldan kayan çekmecededir.
   ========================================================================== */

.dml-ust {
    position: sticky;
    top: 0;
    /* Çekmeceden (45) YÜKSEK: çekmece açıkken de kendisini kapatan düğme
       görünür ve tıklanabilir kalmalı. */
    z-index: 50;
    background: var(--primary);
    color: var(--koyu-metin);
    /* transform / filter VERİLMEZ: ikisi de sabit konumlu çocuk için
       kapsayıcı blok üretir ve çekmece ekrana değil başlığa göre
       konumlanırdı. */
}

.dml-ust__sira {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: var(--ust-yuksek);
}

/* --- SOL: gezinmenin kendisi --- */

.dml-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    padding: 9px 14px 9px 11px;
    background: transparent;
    border: 1px solid var(--koyu-ayrac);
    border-radius: var(--btn-radius);
    color: var(--koyu-metin);
    transition: background var(--gecis), border-color var(--gecis);
}

.dml-menu-btn:hover {
    background: rgba(255, 253, 250, .1);
    border-color: rgba(255, 253, 250, .38);
}

.dml-menu-btn__yazi {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.dml-menu-btn__ikon {
    display: grid;
    place-items: center;
}

/*
 * AÇIK/KAPALI GÖRÜNÜMÜ BETİKSİZ: public/js/shop.js `aria-expanded` niteliğini
 * kendisi güncelliyor, ikon takası bu nitelikten okunuyor. İkinci bir betik
 * yazmaya gerek yok.
 */
.dml-menu-btn__ikon--kapa {
    display: none;
}

.dml-menu-btn[aria-expanded='true'] {
    background: var(--vurgu-acik);
    border-color: var(--vurgu-acik);
    color: #2a1d15;
}

.dml-menu-btn[aria-expanded='true'] .dml-menu-btn__ikon--ac {
    display: none;
}

.dml-menu-btn[aria-expanded='true'] .dml-menu-btn__ikon--kapa {
    display: grid;
}

/* --- ORTA: kelime markası --- */

.dml-marka {
    display: grid;
    justify-items: center;
    gap: 1px;
    text-align: center;
}

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

.dml-marka__ad {
    font-family: var(--baslik-yazi);
    font-size: calc(1.25rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--koyu-metin);
    /* Kelime markası SUNUCUDA büyütüldü (Metin::buyuk). CSS
       text-transform: uppercase KULLANILMAZ: 'istanbul' → 'ISTANBUL' olur,
       'İSTANBUL' olmalı. */
}

.dml-marka__alt {
    font-size: .6875rem;
    letter-spacing: .1em;
    color: var(--koyu-ikincil);
}

/* --- SAĞ: arama ikonu + hesap + sepet --- */

.dml-eylem {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    justify-self: end;
}

.dml-ikon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--koyu-metin);
    transition: background var(--gecis);
}

.dml-ikon-btn:hover {
    background: rgba(255, 253, 250, .12);
    text-decoration: none;
}

.dml-sayac {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    display: grid;
    place-items: center;
    background: var(--vurgu-acik);
    color: #2a1d15;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* --- MENÜ ÇEKMECESİ --------------------------------------------------------
   `#mobile-menu` kimliği ZORUNLU: public/js/shop.js onu arıyor ve `.is-open`
   sınıfını takıp çıkarıyor. Bu temada "mobil menü" değil, TEK gezinmedir.

   BAŞLIĞIN ALTINDAN BAŞLAR (top: --ust-yuksek): tam ekranı kaplasaydı
   kendisini açan düğmeyi de örterdi.

   KAPALIYKEN `visibility: hidden`: yalnız `transform` ile ekran dışına
   itilseydi bağlantılar sekme sırasında kalır, klavye kullanıcısı görünmeyen
   bir menüde dolaşırdı. `visibility` geçişi transform bittikten SONRA
   uygulanıyor (transition-delay), yoksa kapanış anında panel anında yok
   olurdu.
--------------------------------------------------------------------------- */

.dml-cekmece {
    /*
     * KONUM `absolute`, `fixed` DEĞİL — ve ölçülmüş bir nedeni var: sabit
     * konumda çekmece ekranın tepesinden `--ust-yuksek` kadar aşağıdan
     * başlıyordu, ama başlık her zaman ekranın tepesinde DEĞİL. Panel
     * personeline basılan tema önizleme çubuğu (`.tema-onizleme`, ~50px)
     * başlığı aşağı itince çekmece başlığın ÜSTÜNE biniyor ve kendisini
     * kapatan MENÜ düğmesini örtüyordu.
     * Başlık `position: sticky` olduğu için konumlanmış bir atadır; `top: 100%`
     * çekmeceyi her koşulda başlığın tam altına oturtur ve başlıkla birlikte
     * yapışır.
     */
    position: absolute;
    top: 100%;
    left: 0;
    height: calc(100vh - var(--ust-yuksek));
    width: min(360px, 86vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--primary);
    color: var(--koyu-ikincil);
    border-right: 1px solid var(--koyu-ayrac);
    box-shadow: var(--golge-cekmece);
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}

.dml-cekmece.is-open {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s linear 0s;
}

.dml-cekmece__ic {
    display: grid;
    gap: 2px;
    padding: 20px 20px 40px;
}

.dml-cekmece__baslik {
    margin: 22px 0 6px;
    font-family: var(--baslik-yazi);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--vurgu-acik);
}

.dml-cekmece__bag {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--koyu-metin);
}

.dml-cekmece__bag:hover {
    background: rgba(255, 253, 250, .1);
    text-decoration: none;
}

.dml-cekmece__bag--alt {
    padding-left: 26px;
    font-size: .875rem;
    color: var(--koyu-ikincil);
}

.dml-cekmece__grup > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--koyu-metin);
    cursor: pointer;
    list-style: none;
}

.dml-cekmece__grup > summary::-webkit-details-marker {
    display: none;
}

.dml-cekmece__grup > summary:hover {
    background: rgba(255, 253, 250, .1);
}

.dml-cekmece__grup[open] > summary svg {
    transform: rotate(180deg);
}

.dml-cekmece__grup summary svg {
    flex: 0 0 auto;
    transition: transform var(--gecis);
}

.dml-cekmece__not {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--koyu-ayrac);
    font-size: .8125rem;
    color: var(--koyu-ikincil);
}

.dml-cekmece__not a {
    color: var(--vurgu-acik);
}

/* --- çekmecedeki arama formu (ana satırda alan YOK, tek tam form burası) --- */

.dml-arama {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 253, 250, .08);
    border: 1px solid var(--koyu-ayrac);
    border-radius: var(--radius);
    overflow: hidden;
}

/*
 * SEÇİCİ BİLEREK İKİ SINIFLI. 7. bölümdeki `input[type='search']` kuralı da
 * (0,1,1) ağırlığında ve DOSYADA DAHA SONRA geliyor; tek sınıflı bir seçici
 * eşitlikte kaybeder ve çekmecedeki arama alanı krema zeminli, çerçeveli bir
 * kutuya dönerdi (koyu panelin içinde ölçüldü).
 */
.dml-arama .dml-arama__alan {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--koyu-metin);
    font-size: .9375rem;
}

.dml-arama__alan::placeholder {
    color: rgba(244, 236, 227, .66);
}

.dml-arama__gonder {
    display: grid;
    place-items: center;
    width: 44px;
    height: 42px;
    flex: 0 0 auto;
    background: var(--vurgu-acik);
    border: 0;
    color: #2a1d15;
}

/* ==========================================================================
   4) ANA SAYFA
   ========================================================================== */

/* --- 1) tam genişlik kahraman fotoğrafı --- */

.dml-kahraman {
    position: relative;
    display: grid;
    /* Fotoğraf, bindirme ve metin AYNI hücrede üst üste: mutlak konumlama
       yerine ızgara katmanı, metin uzayınca kahraman da uzasın diye. */
    grid-template-areas: 'kat';
    min-height: 460px;
    isolation: isolate;
}

.dml-kahraman__gorsel,
.dml-kahraman__ortu,
.dml-kahraman__metin {
    grid-area: kat;
}

.dml-kahraman__gorsel {
    margin: 0;
    overflow: hidden;
}

.dml-kahraman__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}

/*
 * KOYU BİNDİRME: metnin okunurluğu FOTOĞRAFA BIRAKILMAZ. Mağaza sahibi
 * dosyayı açık bir fotoğrafla değiştirdiğinde de beyaz metin AA eşiğinin
 * üstünde kalsın diye sabit bir espresso perde var (alttan üste hafif
 * koyulaşıyor, çünkü metin dikeyde ortalı).
 */
.dml-kahraman__ortu {
    background: linear-gradient(180deg, rgba(42, 29, 21, .58) 0%, rgba(42, 29, 21, .74) 100%);
}

.dml-kahraman__metin {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
    padding-block: 72px;
    color: #fff;
}

.dml-kahraman__baslik {
    max-width: 18ch;
    margin: 0 0 14px;
    color: #fff;
    font-size: calc(2.75rem * var(--font-scale));
    letter-spacing: -.03em;
}

.dml-kahraman__baslik span {
    display: block;
    margin-top: 8px;
    font-size: calc(1.0625rem * var(--font-scale));
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--koyu-ikincil);
}

.dml-kahraman__giris {
    max-width: 56ch;
    margin: 0 0 26px;
    color: #f4ece3;
}

.dml-kahraman__eylem {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- 2 ve 5) YATAY KAYAN ÜRÜN RAYI ---------------------------------------
   Izgara DEĞİL. `overflow-x: auto` + `scroll-snap-type: x` bir şerit; fare
   tekerleği, parmak, kaydırma çubuğu ve klavye (kap tabindex=0) ile gezilir.
   JavaScript GEREKTİRMEZ.

   Ray kapsayıcının DIŞINDA duruyor ama iç boşluğu kapsayıcı hizasında
   başlıyor: şerit ekranın sağ kenarına kadar uzanıp "devamı var" duygusunu
   versin, ilk kart yine de başlıkla hizalansın.
------------------------------------------------------------------------- */

.dml-ray {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--control-border) transparent;
    padding-block: 4px 26px;
    padding-inline: max(24px, (100% - var(--container)) / 2 + 24px);
    scroll-padding-inline: max(24px, (100% - var(--container)) / 2 + 24px);
}

.dml-ray__oge {
    flex: 0 0 264px;
    scroll-snap-align: start;
}

.dml-ray::-webkit-scrollbar {
    height: 8px;
}

.dml-ray::-webkit-scrollbar-thumb {
    background: var(--control-border);
    border-radius: 999px;
}

.dml-ray::-webkit-scrollbar-track {
    background: var(--yuzey-koyu);
    border-radius: 999px;
}

/* --- 3) demleme yöntemleri: üç kart --- */

.dml-yontem {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.dml-yontem__kart {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.dml-yontem__gorsel {
    margin: 0;
}

.dml-yontem__gorsel img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.dml-yontem__govde {
    padding: 20px 22px 24px;
}

.dml-yontem__govde h3 {
    margin-bottom: 8px;
}

.dml-yontem__govde p {
    margin: 0;
    font-size: .9375rem;
    color: var(--text);
}

/* --- 4) kategori şeridi --- */

.dml-kategori {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.dml-kategori__oge {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    transition: border-color var(--gecis), transform var(--gecis);
}

.dml-kategori__oge:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
}

.dml-kategori__resim {
    width: 100%;
    aspect-ratio: 22 / 15;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Görseli olmayan kategori: boş gri kutu yerine iri baş harf. Harf SUNUCUDA
   büyütülüyor (Metin::buyuk), CSS dönüşümü kullanılmıyor. */
.dml-kategori__harf {
    display: grid;
    place-items: center;
    aspect-ratio: 22 / 15;
    background: var(--yuzey);
    border-radius: var(--radius);
    font-family: var(--baslik-yazi);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
}

.dml-kategori__ad {
    display: grid;
    gap: 3px;
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title);
}

.dml-kategori__alt {
    font-family: var(--govde-yazi);
    font-size: .8125rem;
    font-weight: 400;
    color: var(--muted);
}

/* --- 6) SSS: açılır kapanır --- */

.dml-acilir-grup {
    display: grid;
    gap: 10px;
}

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

.dml-acilir__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title);
    cursor: pointer;
    list-style: none;
}

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

.dml-acilir__bas svg {
    flex: 0 0 auto;
    transition: transform var(--gecis);
}

.dml-acilir[open] .dml-acilir__bas svg {
    transform: rotate(180deg);
}

.dml-acilir__govde {
    padding: 0 18px 18px;
    font-size: .9375rem;
}

/* ==========================================================================
   5) ÜRÜN KARTI — ÇERÇEVESİZ RAF SATIRI
   --------------------------------------------------------------------------
   Çerçeve YOK, gölge YOK, yumuşak köşe YOK. Kart rengi bir zemin ve ALTINDA
   ince ayraç çizgi; ızgarada yan yana dizilince bu çizgiler bir raf ritmi
   kuruyor. Ad ve fiyat SOLA yaslı, sepet düğmesi TAM GENİŞLİK ve köşesiz.
   ========================================================================== */

.dml-urun {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 16px;
    background: var(--card-bg);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.dml-urun__gorsel {
    position: relative;
    display: block;
    background: var(--yuzey);
    overflow: hidden;
}

.dml-urun__gorsel img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .3s ease;
}

.dml-urun:hover .dml-urun__gorsel img {
    transform: scale(1.03);
}

.dml-urun__bos {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    font-family: var(--baslik-yazi);
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
}

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

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

.dml-fav-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 253, 250, .93);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

.dml-fav-btn.is-secili {
    color: var(--hata);
    border-color: var(--hata);
}

.dml-urun__govde {
    display: grid;
    gap: 4px;
    padding: 14px 14px 12px;
    flex: 1 1 auto;
}

.dml-urun__marka {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--muted);
}

.dml-urun__ad {
    margin: 0;
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.dml-urun__ad a {
    color: var(--title);
}

/* Özellik listesinin İLK maddesi. Mağaza oraya kavrum/öğütüm yazdığı anda
   kartta görünür; veri yoksa Blade satırı hiç basmaz. */
.dml-urun__ozellik {
    margin: 2px 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.dml-urun__puan {
    margin: 2px 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.dml-urun__puan-adet {
    color: var(--muted);
}

/* ÖLÇÜLEN KONTRAST ARIZASI: yıldızlar #b8791f iken kart zemini (#fffdfa)
   üstünde 3,57:1 çıkıyordu — bunlar SVG değil METİN karakteri (★/☆), yani
   WCAG 1.4.3 gövde eşiği 4,5:1 geçerli. --accent (#9a5a26) ile kart zemininde
   5,34:1, sayfa zemininde 4,92:1. Puanın sayısal karşılığı yanında ayrıca
   yazılıyor; renk tek başına anlam taşımıyor. */
.dml-yildiz {
    color: var(--accent);
    letter-spacing: .04em;
}

.dml-urun__fiyat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 0;
}

.dml-urun__fiyat strong {
    font-family: var(--baslik-yazi);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--title);
}

.dml-urun__fiyat del {
    font-size: .8125rem;
    color: var(--muted);
}

.dml-urun__birim {
    margin: 0;
    font-size: .75rem;
    color: var(--muted);
}

.dml-urun__stok {
    margin: 2px 0 0;
    font-size: .75rem;
    font-weight: 600;
}

.dml-urun__dip {
    display: grid;
    gap: 8px;
    padding-inline: 14px;
}

.dml-urun__dip form {
    margin: 0;
}

/* --- etiketler --- */

.dml-etiket {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--btn-radius);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.4;
}

.dml-etiket--indirim {
    background: var(--hata);
    color: #fff;
}

.dml-etiket--yeni {
    background: var(--accent);
    color: #fff;
}

.dml-etiket--bitti {
    background: var(--yuzey-koyu);
    color: var(--title);
}

.dml-etiket--onay {
    background: #e4efe8;
    color: var(--basari);
}

/* ==========================================================================
   6) LİSTE SAYFASI — YATAY ÇİP ŞERİDİ
   --------------------------------------------------------------------------
   Panel yok, çekmece yok, yan kolon yok: süzgeçlerin hepsi HEP AÇIK ve yatay
   sarıyor. Izgara 3 kolon.
   ========================================================================== */

.dml-iz {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 20px 6px;
    font-size: .8125rem;
    color: var(--muted);
}

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

.dml-iz__ayrac {
    color: var(--border);
}

.dml-liste-basi {
    padding-block: 6px 20px;
}

.dml-liste-basi h1 {
    margin-bottom: 6px;
}

.dml-liste-basi p {
    margin: 0;
    max-width: 70ch;
    color: var(--muted);
}

/* --- kök kategori bağlantıları (form DIŞINDA: adresi değiştirirler) --- */

.dml-kok-serit {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* --- süzgeç şeridi --- */

.dml-suzgec {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    margin-bottom: 20px;
}

.dml-suzgec__satir {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.dml-suzgec__etiket {
    display: block;
    margin-bottom: 5px;
    font-family: var(--baslik-yazi);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--title);
}

/*
 * Şeritteki her denetim KENDİ kutusunda: etiket üstte, alan altta. Etiketi
 * alanla aynı satıra koymak (ilk denemede öyleydi) esnek kutunun genişliğini
 * içeriğe göre hesaplattırıyor ve fiyat grubu bütün satırı yiyip aramayı alt
 * satıra itiyordu.
 */
.dml-suzgec__oge {
    display: grid;
    align-content: end;
}

.dml-suzgec__oge--ara {
    flex: 1 1 240px;
    min-width: 200px;
    /* Üst sınır: arama tek başına şeridin tamamını yutup öteki denetimleri
       sağ kenara itmesin. */
    max-width: 360px;
}

.dml-suzgec__ara {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    color: var(--muted);
}

/* Seçicide tip niteliği VAR: 7. bölümdeki `input[type='search']` kuralıyla
   ağırlık eşitliğinde kalmamak için (o kural daha sonra geliyor ve kutunun
   içine ikinci bir çerçeve çiziyordu). */
.dml-suzgec__ara input[type='search'] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 10px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.dml-suzgec__ara input:focus-visible {
    outline-offset: -2px;
}

/* Fiyat grubu: etiket satırı + [alan][tire][alan]. Genişliği SABİT, esnek
   kutunun artan boşluğunu almaz. */
.dml-suzgec__fiyat {
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0 6px;
    flex: 0 0 auto;
}

.dml-suzgec__fiyat .dml-suzgec__etiket {
    grid-column: 1 / -1;
}

.dml-suzgec__fiyat input[type='number'] {
    width: 94px;
    padding: 10px;
}

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

.dml-suzgec__sirala {
    flex: 0 0 auto;
}

.dml-suzgec__sirala select {
    width: auto;
    min-width: 190px;
}

.dml-suzgec__dip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.dml-suzgec__grup {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.dml-cip-serit {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/*
 * ÇİP = GERÇEK ONAY KUTUSU. <input> `.visually-hidden` ile gizli ama odak
 * alıyor, klavyeyle işaretleniyor ve durumu ekran okuyucuya native olarak
 * duyuruluyor. Görünen kutu, kutunun KARDEŞ <span>'idir.
 */
.dml-cip {
    display: inline-flex;
    cursor: pointer;
}

.dml-cip > span,
.dml-cip--bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--page-bg);
    border: 1px solid var(--control-border);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--text);
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}

.dml-cip:hover > span,
.dml-cip--bag:hover {
    border-color: var(--title);
    text-decoration: none;
}

/*
 * SEÇİLİ ÇİP RENKLE YETİNMİYOR: başına bir onay işareti geliyor. Renk tek
 * başına anlam taşımamalı (WCAG 1.4.1) ve renk körü bir kullanıcı hangi
 * markayı işaretlediğini yalnız koyulaşan zeminden çıkaramaz.
 */
.dml-cip input:checked + span::before,
.dml-cip--bag[aria-current='page']::before {
    content: '✓';
    font-weight: 800;
    line-height: 1;
}

.dml-cip input:checked + span,
.dml-cip--bag[aria-current='page'] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.dml-cip input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dml-liste-sayi {
    margin: 0 0 16px;
    font-size: .875rem;
    color: var(--muted);
}

.dml-liste-sayi strong {
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.dml-liste-sayi__not {
    color: var(--accent);
    font-weight: 700;
}

/* --- sonuç ızgarası: 3 kolon --- */

.dml-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
}

.dml-bos {
    padding: 60px 24px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.dml-bos p {
    color: var(--muted);
}

/* ==========================================================================
   7) FORM ÖĞELERİ (tema + çekirdek `.field` ortak görünümü)
   ========================================================================== */

.dml-alan,
.field {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.dml-alan > span,
.field > label,
.field > span {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--title);
}

.dml-alan input,
.dml-alan select,
.dml-alan textarea,
.field input,
.field select,
.field textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='date'],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--text);
}

textarea {
    resize: vertical;
}

.dml-onay {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
    cursor: pointer;
}

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

.field-error,
.hint {
    font-size: .8125rem;
}

.field-error {
    color: var(--hata);
}

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

/* --- düğmeler (tema adları; çekirdek `.btn` ailesi 12. bölümde) --- */

.dml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    /* KÖŞESİZ: --btn-radius 4px. Kartın sepet düğmesi de bu değeri alıyor. */
    border-radius: var(--btn-radius);
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background var(--gecis), border-color var(--gecis);
}

.dml-btn:hover {
    background: #4d382a;
    border-color: #4d382a;
    text-decoration: none;
}

.dml-btn:disabled,
.dml-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

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

.dml-btn--bos:hover {
    background: var(--yuzey);
    border-color: var(--title);
}

/* Kahraman fotoğrafının üstünde: koyu perde üzerinde açık düğme. */
.dml-btn--acik {
    background: rgba(255, 253, 250, .12);
    color: #fff;
    border-color: rgba(255, 253, 250, .7);
}

.dml-btn--acik:hover {
    background: rgba(255, 253, 250, .24);
    border-color: #fff;
}

.dml-btn--tam {
    width: 100%;
}

.dml-btn--sm {
    padding: 8px 14px;
    font-size: .8125rem;
}

.dml-btn--lg {
    padding: 14px 26px;
    font-size: 1rem;
}

.dml-btn--metin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    background: none;
    border: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dml-btn--metin:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ==========================================================================
   8) ÜRÜN SAYFASI — TEK KOLON, ORTALANMIŞ, DAR
   --------------------------------------------------------------------------
   Yapışkan kolon YOK. Sayfa en çok 760px genişler ve ortalanır: üstte yatay
   fotoğraf şeridi, altında ortalanmış satın alma bloğu, sonra ardışık bilgi
   bölümleri.
   ========================================================================== */

.dml-sayfa {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 24px;
    padding-block: 0 56px;
}

/* --- üstteki yatay fotoğraf şeridi (JavaScript GEREKTİRMEZ) --- */

.dml-galeri {
    display: grid;
    gap: 10px;
    margin-bottom: 32px;
}

.dml-galeri__sahne {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

.dml-galeri__kare {
    /* %86: bir sonraki fotoğrafın kenarı görünür kalsın — şeridin devam
       ettiği tek fotoğrafta bile anlaşılsın diye. */
    flex: 0 0 86%;
    margin: 0;
    scroll-snap-align: center;
    /* Çapa tıklaması sayfayı yapışkan başlığın altına hizalasın. */
    scroll-margin-top: calc(var(--ust-yuksek) + 20px);
    background: var(--yuzey);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.dml-galeri__kare img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.dml-galeri__kare--bos {
    display: grid;
    place-items: center;
    gap: 8px;
    aspect-ratio: 1 / 1;
    flex: 0 0 100%;
    color: var(--muted);
}

.dml-galeri__kare--bos span {
    font-family: var(--baslik-yazi);
    font-size: 4rem;
    font-weight: 700;
    color: var(--accent);
}

.dml-galeri__serit {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.dml-galeri__kucuk {
    display: block;
    width: 62px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--yuzey);
}

.dml-galeri__kucuk:hover {
    border-color: var(--accent);
}

.dml-galeri__kucuk img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* --- ortalanmış satın alma bloğu --- */

.dml-satin {
    display: grid;
    justify-items: center;
    text-align: center;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
}

.dml-satin__marka {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--accent);
}

.dml-satin__ad {
    margin: 8px 0 8px;
    font-size: calc(2rem * var(--font-scale));
}

.dml-satin__kod {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 14px;
    font-size: .8125rem;
    color: var(--muted);
}

.dml-satin__ozet {
    max-width: 58ch;
    margin: 0 0 18px;
    font-size: 1.0625rem;
}

.dml-fiyat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.dml-fiyat__tutar {
    font-family: var(--baslik-yazi);
    font-size: calc(2rem * var(--font-scale));
    font-weight: 700;
    color: var(--title);
}

.dml-fiyat del {
    font-size: 1rem;
    color: var(--muted);
}

.dml-fiyat__kdv {
    flex: 0 0 100%;
    font-size: .75rem;
    color: var(--muted);
}

.dml-not {
    margin: 0 0 12px;
    font-size: .8125rem;
    color: var(--muted);
}

.dml-stok {
    margin: 12px 0;
    font-size: .9375rem;
    font-weight: 700;
}

.dml-satin form {
    width: 100%;
    max-width: 460px;
}

.dml-secim {
    margin-bottom: 16px;
}

.dml-secim__ad {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-family: var(--baslik-yazi);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--title);
}

.dml-secim__liste {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.dml-secim__oge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: 999px;
    font-size: .875rem;
    cursor: pointer;
}

.dml-secim__oge input {
    accent-color: var(--accent);
}

.dml-secim__oge:has(input:checked) {
    border-color: var(--primary);
    background: var(--yuzey);
}

/* Renk lekesi SÜSTÜR: yanındaki metin zaten rengin adını yazıyor. */
.dml-boya {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
}

.dml-adet-sira {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-block: 4px 8px;
}

.dml-adet {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    overflow: hidden;
    background: var(--card-bg);
}

.dml-adet button {
    width: 40px;
    align-self: stretch;
    background: transparent;
    border: 0;
    font-size: 1.125rem;
    color: var(--title);
}

.dml-adet button:hover {
    background: var(--yuzey);
}

.dml-adet button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.dml-adet input {
    width: 58px;
    padding: 10px 0;
    border: 0;
    border-inline: 1px solid var(--border);
    border-radius: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dml-adet-sira .dml-btn {
    flex: 1 1 auto;
}

.dml-satin__yan-eylem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.dml-satin__yan-eylem form {
    width: auto;
    margin: 0;
}

/* --- ardışık bilgi bölümleri (sekme YOK, açılır kutu YOK) --- */

.dml-bilgi {
    display: grid;
    gap: 40px;
    padding-block: 40px 8px;
    text-align: left;
}

.dml-bilgi__blok > h2 {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: calc(1.25rem * var(--font-scale));
}

.dml-yazi {
    max-width: none;
}

.dml-dokum {
    display: grid;
    gap: 0;
    margin: 0 0 18px;
}

.dml-dokum > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding-block: 9px;
    border-bottom: 1px solid var(--border);
}

.dml-dokum dt {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
}

.dml-dokum dd {
    margin: 0;
    color: var(--title);
}

.dml-madde {
    display: grid;
    gap: 7px;
    margin: 0 0 14px;
}

.dml-madde li {
    position: relative;
    padding-left: 20px;
    font-size: .9375rem;
}

.dml-madde li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
}

/* --- değerlendirmeler --- */

.dml-yorum {
    padding-block: 16px;
    border-bottom: 1px solid var(--border);
}

.dml-yorum__bas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.dml-yorum__kisi {
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
}

.dml-yorum__tarih {
    font-size: .75rem;
    color: var(--muted);
}

.dml-yorum-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin-top: 24px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.dml-alan--genis {
    grid-column: 1 / -1;
}

/* ==========================================================================
   9) ALT BİLGİ — başlığın ikizi: koyu espresso zemin
   ========================================================================== */

.dml-alt {
    margin-top: 60px;
    background: var(--primary);
    color: var(--koyu-ikincil);
    font-size: .9375rem;
}

.dml-alt a {
    color: var(--koyu-ikincil);
}

.dml-alt a:hover {
    color: #fff;
}

.dml-hizmet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding-block: 28px;
    border-bottom: 1px solid var(--koyu-ayrac);
}

.dml-hizmet li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dml-hizmet svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--vurgu-acik);
}

.dml-hizmet span {
    display: grid;
    gap: 2px;
}

.dml-hizmet strong {
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--koyu-metin);
}

.dml-hizmet a {
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dml-alt__sira {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    padding-block: 40px 32px;
}

.dml-alt__marka {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--koyu-metin);
}

.dml-alt__metin {
    max-width: 46ch;
    font-size: .875rem;
}

.dml-alt__baslik {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--vurgu-acik);
}

.dml-alt__kolon ul {
    display: grid;
    gap: 8px;
    font-size: .875rem;
}

/* Seçici `.dml-alt ul.dml-sosyal`: yukarıdaki `.dml-alt__kolon ul` kuralı
   (0,2,1) ağırlığında ve bağlantı listelerini ızgaraya alıyor; tek sınıflı bir
   seçici kaybeder ve sosyal ikonlar ALT ALTA dizilirdi (ölçüldü). */
.dml-alt ul.dml-sosyal {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.dml-sosyal a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--koyu-ayrac);
    border-radius: 999px;
}

.dml-sosyal a:hover {
    border-color: var(--vurgu-acik);
}

.dml-alt__dip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 20px;
    border-top: 1px solid var(--koyu-ayrac);
    font-size: .8125rem;
    color: var(--koyu-ikincil);
}

/* --- bülten bandı: KOYU ALT BİLGİYE UYARLAMA (kontrast düzeltmesi) ---------
   `shop.partials.bulten` modülünün kendi yaprak CSS'i (public/css/
   shop-stok-bildirim.css) AÇIK zemin varsayıyor: başlığı `--title` (#2a1d15),
   açıklamayı `--muted` (#75624f), alanı `--surface` ile boyuyor. Bu temanın
   alt bilgisi ESPRESSO olduğu için ölçülen sonuç okunamayan bir banttı
   (başlık 1,1:1). Kardeş temaların çoğunda alt bilgi açık olduğu için bu
   düzeltme onlarda gerekmiyor — koyu alt bilgi bu temanın tercihi, bedelini de
   bu dosya ödüyor.
   SEÇİCİLER İKİ SINIFLI: modül dosyası <head>'de bu dosyadan SONRA geliyor,
   tek sınıflı bir seçici eşitlikte kaybederdi. */

.dml-alt .bulten {
    border-top-color: var(--koyu-ayrac);
}

.dml-alt .bulten__ic {
    max-width: var(--container);
    padding-inline: 24px;
}

.dml-alt .bulten__baslik {
    font-family: var(--baslik-yazi);
    color: var(--koyu-metin);
}

.dml-alt .bulten__aciklama {
    color: var(--koyu-ikincil);
}

.dml-alt .bulten__form input[type='email'] {
    background: rgba(255, 253, 250, .08);
    border-color: var(--koyu-ayrac);
    border-radius: var(--radius);
    color: var(--koyu-metin);
}

.dml-alt .bulten__form input[type='email']::placeholder {
    color: rgba(244, 236, 227, .66);
}

/* Hata metni koyu zeminde okunur bir gül tonuna çekilir: --hata (#a33131)
   espresso üstünde 1,9:1 kalıyor. */
.dml-alt .bulten__hata {
    color: #f2b8b8;
}

@media (max-width: 480px) {
    .dml-alt .bulten__ic {
        padding-inline: 16px;
    }
}

/* ==========================================================================
   10) REKLAM YUVASI
   ========================================================================== */

.dml-reklam-alan {
    padding-block: 32px;
}

.dml-reklam-alan--liste {
    padding-block: 0 22px;
}

.dml-reklam-alan--urun {
    padding-block: 28px 0;
}

.dml-reklam {
    display: block;
    margin-inline: auto;
    max-width: 970px;
}

/* ==========================================================================
   11) YARDIMCI SINIFLAR (çekirdek görünümler de kullanıyor)
   ========================================================================== */

.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.text-danger { color: var(--hata); }
.text-success { color: var(--basari); }

/* ==========================================================================
   12) ÇEKİRDEK SINIFLARIN DEMLİ DİLİNDE YENİDEN ÇİZİMİ
   --------------------------------------------------------------------------
   Tema `shop.css` yüklemediği için, tema ezmediği görünümlerde (sepet, ödeme,
   hesabım, blog, kampanyalar, koleksiyonlar, karşılaştırma, statik sayfalar)
   çekirdek sınıf adları buradan stil alır. Ad listesi çekirdek görünümlerden
   çıkarılmıştır; bir sınıf burada YOKSA o sayfa stilsiz görünür.
   ========================================================================== */

/* --- düğmeler: çekirdek adları, Demli görünümü --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: var(--btn-radius);
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background var(--gecis), border-color var(--gecis);
}

.btn:hover {
    background: #4d382a;
    border-color: #4d382a;
    text-decoration: none;
}

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

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

.btn--gold {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn--gold:hover {
    background: #814819;
    border-color: #814819;
}

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

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

.btn--sm {
    padding: 8px 14px;
    font-size: .8125rem;
}

.btn--lg {
    padding: 14px 26px;
    font-size: 1rem;
}

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

/* --- yüzeyler --- */

.panel,
.statcard,
.success-box,
.summary,
.radio-card,
.coupon,
.optgroup {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 20px;
}

.panel__desc {
    color: var(--muted);
    font-size: .875rem;
}

.panel--sss summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--title);
}

.section-head {
    margin-bottom: 26px;
}

.section-head h2 {
    margin-bottom: 6px;
}

.section-head p {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--baslik-yazi);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--accent);
}

/* --- rozetler --- */

.badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--btn-radius);
    background: var(--yuzey-koyu);
    color: var(--title);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.badge--gold {
    background: var(--accent);
    color: #fff;
}

.badge--info {
    background: var(--primary);
    color: #fff;
}

.badge--success {
    background: #e4efe8;
    color: var(--basari);
}

.badge--warning {
    background: #f6ecd8;
    color: var(--uyari);
}

.badge--danger {
    background: #f6e2e2;
    color: var(--hata);
}

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

/* --- uyarı kutuları --- */

.alert {
    padding: 13px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: .9375rem;
}

.alert--success {
    border-left-color: var(--basari);
    background: #f0f6f2;
}

.alert--error {
    border-left-color: var(--hata);
    background: #fbf1f1;
}

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

/* --- ızgaralar ve listeler --- */

.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 26px 22px;
}

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

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

.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.statcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

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

/* ÖLÇÜLEN ARIZA: `display: grid` tek kolonluk ızgara demekti; /magaza/sepet
   adımları (Sepet → Teslimat & ödeme → Onay) ALT ALTA diziliyor, üstelik alt
   boşluğu olmadığı için hemen ardından gelen <h1> adımlara yapışıyordu. Adım
   göstergesi YATAY bir ilerleme çubuğudur; dar ekranda sarar.
   AYRICA `.is-active` hiç tanımlı değildi: hangi adımda olunduğu HİÇBİR
   şekilde belirtilmiyordu. Etkin adım yalnız renkle değil, KALIN yazı ve dolu
   madalyonla da ayrılır (renk tek başına anlam taşımaz). */
.steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 28px;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--baslik-yazi);
    font-size: .875rem;
    color: var(--muted);
}

.steps__no {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    background: var(--yuzey);
    border: 1px solid var(--control-border);
    color: var(--text);
    border-radius: 999px;
    font-weight: 700;
    font-size: .8125rem;
}

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

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

.optlist {
    display: grid;
    gap: 10px;
}

.optgroup__title {
    font-weight: 700;
    color: var(--title);
    margin-bottom: 8px;
}

/* --- çekirdek ürün kartı (tema ezmediği yerler: koleksiyon, karşılaştırma) ---
       Tema kartıyla AYNI dilde: çerçevesiz, altında ayraç çizgi. --- */

.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 16px;
    background: var(--card-bg);
    border: 0;
    border-bottom: 1px solid var(--border);
}

.pcard__media {
    position: relative;
    display: block;
    background: var(--yuzey);
    overflow: hidden;
}

.pcard__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

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

.pcard__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 253, 250, .93);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

.pcard__body {
    display: grid;
    gap: 4px;
    padding: 14px 14px 10px;
    flex: 1 1 auto;
}

.pcard__brand {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--muted);
}

.pcard__name {
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title);
}

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

.pcard__stars {
    color: #b8791f;
}

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

.pcard__price strong {
    font-family: var(--baslik-yazi);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pcard__price del {
    font-size: .8125rem;
    color: var(--muted);
}

.pcard__foot {
    display: grid;
    gap: 8px;
    padding: 0 14px;
}

.pcard__stock {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
}

/* --- liste sayfası çekirdek düzeni (tema ezmediği listeler) --- */

.listlayout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.filters {
    display: grid;
    gap: 20px;
    padding: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.filters__title {
    font-family: var(--baslik-yazi);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--title);
    margin-bottom: 8px;
}

.filters__list {
    display: grid;
    gap: 7px;
    font-size: .9375rem;
}

.listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 20px 8px;
    font-size: .8125rem;
    color: var(--muted);
}

.empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--muted);
}

/* --- sayfalama --- */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-block: 40px;
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    font-size: .875rem;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

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

.pagination .is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

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

/* --- sepet / ödeme / hesap --- */

.cartlayout,
.acclayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}

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

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

.accnav a {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--text);
}

.accnav a:hover,
.accnav a[aria-current='page'] {
    background: var(--yuzey);
    color: var(--title);
    text-decoration: none;
}

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

.cartitem {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.cartitem__img img {
    width: 92px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
}

.cartitem__name {
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
}

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

.cartitem__right {
    text-align: right;
}

.cartitem__total {
    font-family: var(--baslik-yazi);
    font-weight: 700;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.summary__row--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--title);
}

.summary__note {
    font-size: .8125rem;
    color: var(--muted);
}

.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}

.addr-grid,
.contact-grid,
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}

.qty,
.qtyrow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qty input {
    width: 62px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
}

.stars {
    color: #b8791f;
}

.check {
    color: var(--basari);
}

/* --- tablolar: KABI kaydırılır, tabloya display:block VERİLMEZ
       (display:block satır/sütun anlamını ekran okuyucudan siler) --- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

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

.datatable th,
.kargo-tablo th {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--title);
    background: var(--yuzey);
}

.responsive {
    max-width: 100%;
}

/* --- sekmeler (çekirdek ürün sayfası tema ezmediğinde kullanır) --- */

.tabs__nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.tabs__btn {
    padding: 11px 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    color: var(--muted);
}

.tabs__btn[aria-selected='true'] {
    color: var(--title);
    border-bottom-color: var(--accent);
}

.tabs__panel[hidden] {
    display: none;
}

/* --- düz metin (blog, sözleşmeler, ürün açıklaması) --- */

.prose {
    max-width: 72ch;
}

.prose h2,
.prose h3 {
    margin-top: 1.6em;
}

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

.prose ul,
.prose ol {
    margin: 0 0 1em 1.2em;
}

.prose ul li {
    list-style: disc;
}

.prose ol li {
    list-style: decimal;
}

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

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

.prose blockquote {
    margin: 1.2em 0;
    padding-left: 18px;
    border-left: 3px solid var(--accent);
    color: var(--muted);
}

/* --- karşılaştırma modülü (çekirdek yaprak CSS'i ile birlikte) --- */

.krs-ekle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--title);
}

.krs-ekle__btn[aria-pressed='true'] {
    background: var(--yuzey);
    border-color: var(--title);
}

.krs-tablo-kap {
    overflow-x: auto;
}

/* --- bayi paneli --- */

.bayi-panel {
    padding: 18px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    margin-block: 16px;
    text-align: left;
}

/* --- tema önizleme çubuğu (yalnız panel personeline basılır) --- */

.tema-onizleme {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 16px;
    background: var(--accent);
    color: #fff;
    font-size: .875rem;
}

.tema-onizleme__ayrinti {
    opacity: .92;
}

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

.tema-onizleme__btn {
    padding: 5px 12px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--btn-radius);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
}

.tema-onizleme__btn--birincil {
    background: #fff;
    color: var(--accent);
}

/* ==========================================================================
   13) DUYARLILIK
   ========================================================================== */

@media (max-width: 1100px) {
    .dml-alt__sira {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .dml-yontem {
        grid-template-columns: 1fr;
    }

    .listlayout,
    .cartlayout,
    .checkout,
    .acclayout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .dml-kahraman {
        min-height: 400px;
    }

    .dml-kahraman__baslik {
        font-size: calc(2.25rem * var(--font-scale));
    }

    .dml-suzgec__dip {
        margin-left: 0;
    }

    .dml-hizmet {
        grid-template-columns: 1fr;
    }

    .dml-dokum > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

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

    .dml-bolum,
    .section {
        padding-block: 40px;
    }

    .dml-yorum-form {
        grid-template-columns: 1fr;
    }

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

    .cartitem__right {
        grid-column: 1 / -1;
        text-align: left;
    }

    /* Dar ekranda çekmece tam genişliğe yakın açılır. */
    .dml-cekmece {
        width: min(400px, 92vw);
    }
}

@media (max-width: 620px) {
    /* "MENÜ" yazısı düşer, hamburger kalır: marka ortada sıkışmasın.
       Düğmenin erişilebilir adı `aria-label` ile zaten var. */
    .dml-menu-btn__yazi {
        display: none;
    }

    .dml-menu-btn {
        padding: 9px 11px;
    }

    .dml-marka__ad {
        font-size: calc(1.0625rem * var(--font-scale));
        letter-spacing: .12em;
    }

    .dml-marka__alt {
        display: none;
    }

    .dml-satin__ad {
        font-size: calc(1.625rem * var(--font-scale));
    }

    .dml-galeri__kare {
        flex: 0 0 92%;
    }
}

@media (max-width: 480px) {
    .dml-en,
    .container,
    .dml-sayfa {
        padding-inline: 16px;
    }

    .dml-izgara,
    .pgrid,
    .pgrid--3,
    .pgrid--4,
    .ikili,
    .statcards--3,
    .dml-kategori {
        grid-template-columns: 1fr;
    }

    .dml-ray__oge {
        flex: 0 0 78%;
    }

    .dml-adet-sira {
        flex-wrap: wrap;
    }

    .dml-adet-sira .dml-btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   14) YAZDIRMA — gezinme, süzgeç ve satın alma denetimleri kâğıda basılmaz.
   ========================================================================== */

@media print {
    .dml-ust,
    .dml-cekmece,
    .dml-suzgec,
    .dml-kok-serit,
    .dml-alt,
    .dml-reklam-alan,
    .dml-adet-sira,
    .tema-onizleme {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .dml-ray,
    .dml-galeri__sahne {
        overflow: visible;
        flex-wrap: wrap;
    }
}