/* ==========================================================================
   QUICK — ERKEK GİYİM · TAM STİL DOSYASI (shop.css YÜKLENMEZ)
   ==========================================================================

   Bu dosya çekirdek `shop.css`'in üstüne bir yama DEĞİLDİR: kendi
   sıfırlamasını, kendi ızgarasını, kendi tipografisini ve çekirdek
   bileşen sınıflarının (.btn, .badge, .alert, .field, .panel, .pagination)
   BU TEMAYA AİT karşılıklarını taşır. Düzen dosyası
   (resources/views/themes/quick/shop/layouts/app.blade.php) `css/shop.css`
   bağlantısını hiç basmaz.

   NİÇİN BÖYLE: temanın ayırt edici özelliği renk değil YERLEŞİMDİR — masaüstünde
   yatay başlık yoktur, gezinme solda dikey bir şerittir. Çekirdek shop.css
   `.hdr`, `.catnav`, `.pgrid`, `.pcard`, `.pdetail` gibi yatay-başlık
   varsayımlarını taşıyor; onu yükleyip ezmek her kuralı iki kez yazmak olurdu.

   TÜRKÇE BÜYÜK HARF CSS'TE YAPILMAZ
   `text-transform: uppercase` bu dosyada HİÇ KULLANILMAZ. Tarayıcının büyük
   harf dönüşümü Türkçe 'i' harfini 'I' yapar ("İndirimdekiler" → "INDIRIMDEKILER").
   Büyük harfli görünüm Blade tarafında App\Support\Metin::buyuk() ile ya da
   kaynakta doğrudan büyük yazılmış sabit etiketlerle sağlanır.

   ASCII DIŞI `content` YOK: süs glifleri kaçış dizisiyle yazılır (content: "\2022").

   PALET — beyaz, siyah, iki ton gri + TEK aksan (indirim kırmızısı).
   Ölçülen kontrast oranları (WCAG 2.1):
     #000000 / #ffffff .......... 21.00:1  (başlık, kelime markası)
     #1a1a1a / #ffffff .......... 17.40:1  (gövde metni, denetim kenarlığı)
     #6b6b6b / #ffffff ...........5.33:1  (ikincil metin, ürün adı)
     #6b6b6b / #f4f4f4 ...........4.85:1  (gri zemin üzerinde ikincil metin)
     #c8102e / #ffffff ...........5.88:1  (indirimli fiyat, uyarı)
     #ffffff / #c8102e ...........5.88:1  (kırmızı daire içindeki yüzde)
     #e2e2e2 / #ffffff ...........1.30:1  KASITLI: yalnızca DEKORATİF ayırıcı;
                                          hiçbir metin ve hiçbir form denetimi
                                          kenarlığı bu değeri kullanmaz.
   ========================================================================== */

:root {
    /* ---- Panelden ince ayar yapılabilen belirteçler ----
       Bu blok resources/themes/quick.php içindeki `tokens` dizisiyle BİREBİR
       aynı olmalıdır; panel formu başlangıç değerlerini oradan okur. */
    --primary: #000000;
    --accent: #c8102e;
    --title: #000000;
    --text: #1a1a1a;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e2e2e2;
    --radius: 0px;
    --card-radius: 0px;
    --btn-radius: 0px;
    --font-scale: 1;
    --container: 1440px;

    /* ---- Panelden DEĞİŞTİRİLEMEYEN belirteçler ----
       --control-border erişilebilirlik sınırıdır (WCAG 1.4.11, ≥3:1) ve bu
       yüzden bilinçli olarak panel beyaz listesinde YOKTUR. */
    --control-border: #1a1a1a;
    --control-border-strong: #000000;

    --font-heading: Archivo, "Helvetica Neue", Arial, sans-serif;
    --qk-gri: #6b6b6b;
    --qk-zemin: #f4f4f4;
    --qk-rail: 200px;
    --qk-bar: 56px;
    --qk-harf: 0.14em;

    /* ==================================================================
       YAPRAK CSS SÖZLÜĞÜ — TAMAMLANMASI ZORUNLU
       ------------------------------------------------------------------
       DÜŞMAN DENETİMİNDE ÖLÇÜLDÜ VE DÜZELTİLDİ.

       Bu tema `css/shop.css` YÜKLEMEZ (kendi sıfırlaması var). Ama vitrinin
       yaprak stil dosyaları — shop-karsilastirma, shop-birim, shop-dijital,
       shop-teslimat, shop-sepet-zekasi, shop-blog, shop-listeler,
       shop-kuyumcu, shop-koleksiyon, shop-elektronik, shop-oto, shop-yapi,
       shop-parti, shop-abonelik, shop-bayi — HİÇBİR belirteç TANIMLAMAZ,
       yalnızca `var(--…)` OKUR. Sözlükte olmayan bir ad, o bildirimin
       tamamen DÜŞMESİNE yol açar (CSS geçersiz değer kuralı).

       ÖLÇÜLEN ZARAR (tarayıcıda, hesaplanmış renklerden):
         · .krs-serit__sayi  — `background: var(--primary); color: var(--on-primary)`
           `--on-primary` tanımsızken renk bildirimi düşüyor, metin kalıtımla
           --text (#1a1a1a) oluyordu: SİYAH ZEMİN ÜSTÜNDE SİYAH → 1,00:1.
           Karşılaştırma şeridindeki ürün sayacı OKUNAMIYORDU.
         · .krs-ekle__btn[aria-pressed="true"] "Karşılaştırmada" → 1,21:1
         · .blog-etiket.is-aktif "Tümü"                          → 1,21:1
         · .vl-cip--acik / .ky-cip--acik "Tümü"                   → 1,21:1
         · .vl-rozet--indirim "%30 indirim"                       → 1,00:1
         · .vl-rozet--one "Öne çıkan"                             → 3,57:1
         · .tarti-notu — `background: var(--surface)` ve
           `border-left: 3px solid var(--warning)` düşüyordu; tartılı ürünün
           "±%5 sapma" uyarı kutusu ZEMİNSİZ ve ÇİZGİSİZ kalıyordu.

       DEĞERLER BU TEMANIN PALETİNE GÖRE SEÇİLDİ (kurumsal'dan kopya DEĞİL):
       siyah/kırmızı, keskin köşe, gölgesiz.

       KONTRAST HESABI (WCAG bağıl parlaklık):
         --on-primary #ffffff / --primary #000000 → 21,00:1
         --on-accent  #ffffff / --accent  #c8102e →  5,88:1
         --muted      #6b6b6b / --page-bg #ffffff →  5,32:1  (gövde eşiği 4,5:1)
         --danger     #b3121f / #ffffff           →  6,08:1
         --success    #12683c / #ffffff           →  5,60:1
         --warning    #8a5a06 / #ffffff           →  5,52:1
       ================================================================== */

    /* Zemin üstü metin renkleri — DÜŞERSE metin okunmaz olur */
    --on-primary: #ffffff;
    --on-accent: #ffffff;

    /* Metin kademesi */
    --muted: #6b6b6b;
    --font-body: Archivo, "Helvetica Neue", Arial, sans-serif;

    /* Yüzeyler */
    --surface: #f4f4f4;
    --primary-soft: #f4f4f4;
    --accent-soft: #fdecee;
    --accent-light: #fdecee;

    /* Vurgu kademeleri */
    --primary-hover: #1a1a1a;
    --primary-focus: #3d3d3d;
    --primary-strong: #000000;
    --primary-line: #000000;
    --accent-strong: #8f0b20;

    /* Kenarlıklar */
    --border-strong: #b5b5b5;

    /* Durum renkleri */
    --danger: #b3121f;
    --success: #12683c;
    --warning: #8a5a06;

    /* Geometri — bu tema KESKİN KÖŞELİ, hepsi 0 (pill hariç: 0 = dikdörtgen) */
    --radius-sm: 0px;
    --radius-lg: 0px;
    --pill: 0px;

    /* Gölge — bu tema GÖLGESİZ; "none" yazmak `var()` düşmesini engeller */
    --shadow: none;
    --shadow-lg: none;
    --card-shadow: none;
    --card-hover-shadow: none;

    /* Yumuşatma eğrisi */
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ==================== SIFIRLAMA ==================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: calc(15px * var(--font-scale));
    line-height: 1.6;
    font-weight: 400;
}

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

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

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--title);
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
}

p {
    margin: 0 0 12px;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

del {
    color: var(--qk-gri);
    text-decoration: line-through;
}

button {
    font: inherit;
    font-size: 16px;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/*
 * KUTU/RADYO BİLEREK DIŞTA: onlara 44px'lik bir min-height vermek yerel
 * denetimi gerdirir. Dokunma hedefi onları SARAN etikettir (.qk-check,
 * .qk-opt__kutu — ikisi de min-height: 44px).
 */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font: inherit;
    /* 16px ALTINA İNMEZ: iOS Safari daha küçük bir alana odaklanınca sayfayı
       ZORLA yakınlaştırır ve kullanıcı bir daha uzaklaştıramaz. */
    font-size: 16px;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    min-height: 44px;
    width: 100%;
}

textarea {
    line-height: 1.5;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
    margin: 0;
}

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

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

/* Çekirdek parçalar (ikon, karşılaştırma düğmesi, ürün sayfası) bu adı
   kullanıyor; ezilen görünümler bile onları @include ediyor. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.qk-atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--primary);
    color: #ffffff;
    padding: 12px 18px;
    min-height: 44px;
}

.qk-atla:focus {
    left: 0;
}

/* ==================== KABUK: SOL DİKEY ŞERİT ==================== */

/*
 * İMZA YERLEŞİM. Masaüstünde (≥1040px) sayfanın SOLUNDA sabit, dar bir dikey
 * şerit durur; içerik onun sağında akar. 1040px onaylı bir kırılma noktasıdır
 * (DuyarlilikTest::KIRILMA_NOKTALARI); tasarım notundaki 1024 değeri onaylı
 * listede olmadığı için en yakın onaylı değer kullanıldı — dağınık kırılma
 * noktası "1024'te düzeldi, 1040'ta bozuk" tipi izi sürülemez hatalar üretir.
 *
 * 1040px ALTINDA şerit ekranı kaplayan bir KATMANA döner: kapalıyken
 * display:none olduğu için klavye ona hiç uğramaz, açıkken odak içine
 * kilitlenir (public/js/tema-quick.js).
 */

.qk-rail {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--page-bg);
    overflow-y: auto;
    padding: 20px clamp(20px, 6vw, 40px) 40px;
    animation: qk-goster 160ms ease-out;
}

.qk-rail.is-acik {
    display: block;
}

@keyframes qk-goster {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.qk-rail__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.qk-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: var(--qk-harf);
    color: var(--primary);
    /* Kısa bir mağaza adında ("CEA") metin genişliği 38px kalıyordu; dokunma
       hedefi HER İKİ eksende 44px olmak zorunda (tarayıcıda ölçüldü). */
    min-width: 44px;
    min-height: 44px;
    align-content: center;
    flex-wrap: wrap;
}

.qk-mark:hover {
    text-decoration: none;
}

.qk-mark__alt {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--qk-gri);
}

.qk-kapat,
.qk-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--primary);
    border: 1px solid var(--control-border);
}

.qk-rail__ara {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
}

.qk-rail__ara input {
    border-right: 0;
}

.qk-rail__ara button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    background: var(--primary);
    color: #ffffff;
    font-size: 11px;
    letter-spacing: var(--qk-harf);
    border: 1px solid var(--control-border-strong);
}

/* ---- DİKEY MENÜ ---- */

.qk-nav {
    display: block;
}

.qk-nav__i {
    display: block;
}

/*
 * İMZA AYRINTI: aktif maddenin SOLUNDA 2px siyah çizgi. Renk tek başına
 * anlam taşımaz — aktif bağlantı ayrıca aria-current="page" duyurur.
 */
.qk-nav__l {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0 6px 12px;
    border-left: 2px solid transparent;
    font-size: 11px;
    letter-spacing: var(--qk-harf);
    font-weight: 500;
    color: var(--primary);
}

.qk-nav__l:hover {
    text-decoration: none;
    border-left-color: var(--border);
}

.qk-nav__l.is-aktif {
    border-left-color: var(--primary);
    font-weight: 700;
}

.qk-nav__alt {
    padding-left: 12px;
    margin-bottom: 4px;
}

.qk-nav__alt .qk-nav__l {
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--qk-gri);
    border-left-width: 1px;
}

.qk-nav__alt .qk-nav__l.is-aktif {
    color: var(--primary);
}

.qk-nav__ara {
    height: 1px;
    background: var(--border);
    margin: 18px 0;
}

.qk-rail__sosyal {
    display: flex;
    gap: 4px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.qk-rail__sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--qk-gri);
    font-size: 10px;
    letter-spacing: 0.16em;
    font-weight: 700;
    border: 1px solid var(--border);
}

.qk-rail__sosyal a:hover {
    color: var(--primary);
}

/* ---- ÜST ÇUBUK (yalnızca kelime markası + hamburger + ikonlar) ---- */

.qk-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--qk-bar);
    padding: 6px clamp(12px, 4vw, 28px);
    background: var(--page-bg);
}

.qk-bar__util {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.qk-ikon-l {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    color: var(--primary);
}

.qk-ikon-l:hover {
    text-decoration: none;
    color: var(--accent);
}

.qk-sayac {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    padding: 0 4px;
    background: var(--accent);
    color: #ffffff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
}

/* Arama: JavaScript'siz açılır (details/summary). */
.qk-ara {
    position: relative;
}

.qk-ara > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
}

.qk-ara > summary::-webkit-details-marker {
    display: none;
}

.qk-ara__kutu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 55;
    display: flex;
    width: min(320px, calc(100vw - 32px));
    background: var(--card-bg);
    border: 1px solid var(--control-border);
}

/*
 | DÜŞMAN DENETİMİNDE ÖLÇÜLDÜ VE DÜZELTİLDİ — SESSİZ BİR KIRIK.
 |
 | Panel `right: 0` ile konumlanıyor ama KAPSAYAN BLOK `.qk-ara` (44px'lik
 | arama ikonu), viewport DEĞİL. İkonun sağ kenarı üst çubuğun sağ ucundan
 | ~108px içeride durduğu için 320px'lik panel SOLA doğru viewport'un dışına
 | taşıyordu. Panel AÇIKKEN gerçek tarayıcıda ölçülen soldan taşma:
 |
 |   320px → 73px   (alan -72'de başlıyor)
 |   360px → 66px
 |   390px → 38px
 |   414px → 15px
 |   768px →  0px
 |
 | KIRIK NEDEN SESSİZ: sol taraftaki taşma `scrollWidth`i BÜYÜTMEZ; belge
 | genişliği her ölçümde görünüm genişliğine eşit kaldı, yani "yatay kaydırma
 | yok" kapısı bunu GÖREMİYOR. Kullanıcı kaydırarak da ulaşamıyor; metin
 | alanının ilk 72px'i erişilemez ve yazılan metnin başı görünmüyor.
 |
 | ÇÖZÜM: dar ekranda `.qk-ara` konumlandırmayı BIRAKIR; kapsayan blok
 | `position: fixed` olan `.qk-bar` olur ve panel iki yandan 8px boşlukla
 | viewport'a yerleşir. 641 ONAYLI kırılma noktasıdır (taşma 428px altında
 | başlıyor; 641 rahat bir pay bırakır).
 */
@media (max-width: 641px) {
    .qk-ara {
        position: static;
    }

    .qk-ara__kutu {
        top: var(--qk-bar);
        inset-inline: 8px;
        width: auto;
    }
}

.qk-ara__kutu input {
    /* min-width: 0 YAZILMAZ — alan etkileşimlidir ve 44px altına inen bir
       min ölçü dokunma hedefi denetimini düşürür. 44px hem daralmayı hem
       hedefi karşılar. */
    min-width: 44px;
    border: 0;
}

.qk-ara__kutu button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    background: var(--primary);
    color: #ffffff;
    font-size: 11px;
    letter-spacing: var(--qk-harf);
}

/* ---- İÇERİK AKIŞI ---- */

.qk-flow {
    padding-top: var(--qk-bar);
}

.qk-tel {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 40px);
}

.qk-tel--dar {
    max-width: 900px;
}

/*
 * Uyarı + karşılaştırma şeridi kabı. Kabın KENDİSİNE üst boşluk VERİLMEZ:
 * ikisi de boşken kap yine basılır (yalnızca satır sonları kalır, `:empty`
 * onları içerik saydığı için işe yaramaz) ve sayfanın tepesine görünmez bir
 * boşluk eklerdi. Boşluk çocuklara verilir; çocuk yoksa boşluk da yoktur.
 */
.qk-tel--ust > .alert,
.qk-tel--ust > .krs-serit {
    margin-top: 18px;
}

@media (min-width: 1040px) {
    .qk-rail {
        display: block;
        inset: 0 auto 0 0;
        width: var(--qk-rail);
        padding: 28px 20px 32px;
        border-right: 1px solid var(--border);
        animation: none;
    }

    .qk-rail__ust {
        margin-bottom: 40px;
    }

    /* Masaüstünde katman kapatma düğmesi ve katman içi arama YOK:
       arama sağ üstteki ikon kümesinde, şerit zaten hep açık. */
    .qk-kapat,
    .qk-rail__ara {
        display: none;
    }

    .qk-burger,
    .qk-bar__mark {
        display: none;
    }

    .qk-bar {
        left: var(--qk-rail);
        justify-content: flex-end;
        background: none;
        pointer-events: none;
    }

    .qk-bar__util {
        pointer-events: auto;
        background: var(--page-bg);
    }

    .qk-flow {
        padding-left: var(--qk-rail);
    }
}

/* ==================== BÖLÜM BAŞLIĞI (İMZA) ==================== */

/*
 * İMZA AYRINTI 2: her bölüm başlığı ORTALANMIŞ, küçük punto, harf aralıklı ve
 * ALTINDA 40px'lik ince siyah çizgi var. Çizgi süstür (content: ""), bilgi
 * başlığın kendisindedir.
 */
.qk-bolum {
    margin: 0 0 28px;
    text-align: center;
}

.qk-bolum__b {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--title);
}

.qk-bolum__b::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin: 14px auto 0;
    background: var(--primary);
}

.qk-bolum__not {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--qk-gri);
}

.qk-h1 {
    font-size: clamp(20px, 4vw, 28px);
    letter-spacing: 0.1em;
    font-weight: 600;
}

.qk-blok {
    margin: 0 0 clamp(48px, 8vw, 88px);
}

.qk-blok--ust {
    margin-top: clamp(48px, 8vw, 88px);
}

/* ==================== ANA SAYFA ==================== */

/* Tek geniş yaşam-tarzı karesi; kenarlarda İNCE boşluk. */
.qk-vitrin {
    margin: 0 0 clamp(40px, 6vw, 72px);
    padding: 0 12px;
}

.qk-vitrin img {
    width: 100%;
    height: clamp(240px, 52vw, 620px);
    object-fit: cover;
}

.qk-vitrin__alt {
    padding: 12px 0 0;
}

.qk-vitrin__b {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--title);
}

.qk-vitrin__slogan {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--qk-gri);
}

.qk-ikili {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 clamp(48px, 8vw, 88px);
    padding: 0 12px;
}

.qk-ikili__i {
    margin: 0;
}

.qk-ikili__i img {
    width: 100%;
    height: clamp(220px, 40vw, 420px);
    object-fit: cover;
}

.qk-ikili__i figcaption {
    margin-top: 10px;
}

/* min-width DA GEREKLİ — ÖLÇÜLDÜ: kategori adı kısa olduğunda (ör. "MODA")
   bağlantı 11px puntoda 40px genişliğe düşüyordu ve 390px'te dokunma hedefi
   40x44 çıkıyordu (kapı 44x44). min-height tek başına yetmez; hedefin İKİ
   ölçüsü de denetleniyor. justify-content ortalar, böylece kısa metinde de
   dokunma alanı metnin çevresinde eşit dağılır. */
.qk-ikili__i figcaption a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    font-size: 11px;
    letter-spacing: var(--qk-harf);
    font-weight: 600;
    border-bottom: 1px solid var(--primary);
}

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

/* ==================== ÜRÜN IZGARASI ==================== */

.qk-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 32px) clamp(10px, 2vw, 22px);
}

@media (min-width: 641px) {
    .qk-izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .qk-izgara {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---- ÜRÜN KARTI: ÇERÇEVE YOK, GÖLGE YOK ---- */

.qk-urun {
    position: relative;
    margin: 0;
    background: var(--card-bg);
}

.qk-urun__gorsel {
    display: block;
    position: relative;
    background: var(--qk-zemin);
}

/* Portre 3:4 — fotoğrafın ÜSTÜNE indirim dairesi dışında hiçbir şey basılmaz. */
.qk-urun__gorsel img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.qk-urun__bos {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    color: var(--qk-gri);
    font-size: 11px;
    letter-spacing: var(--qk-harf);
}

/* İMZA AYRINTI 3: sağ üst köşede küçük KIRMIZI daire. */
.qk-daire {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.qk-urun__govde {
    padding: 12px 2px 0;
}

.qk-urun__marka {
    display: block;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--qk-gri);
    margin-bottom: 4px;
}

/* Ürün adı EN FAZLA İKİ SATIR: küçük, gri. */
.qk-urun__ad {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--qk-gri);
}

.qk-urun__ad:hover {
    color: var(--primary);
}

.qk-urun__fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
}

.qk-urun__fiyat strong {
    color: var(--primary);
    font-weight: 700;
}

.qk-urun__fiyat--ind strong {
    color: var(--accent);
}

.qk-urun__fiyat del {
    font-size: 12px;
}

.qk-urun__stok {
    margin: 6px 0 0;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--qk-gri);
}

.qk-urun__stok--yok {
    color: var(--accent);
}

.qk-urun__eylem {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 10px;
}

.qk-urun__eylem form {
    flex: 1 1 auto;
    min-width: 0;
}

.qk-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--control-border);
    background: var(--card-bg);
    color: var(--primary);
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.qk-mini:hover {
    background: var(--primary);
    color: #ffffff;
    text-decoration: none;
}

.qk-mini[disabled] {
    border-color: var(--border);
    color: var(--qk-gri);
    cursor: not-allowed;
}

.qk-mini--ikon {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    padding: 0;
}

/* ==================== KATEGORİ / LİSTE ==================== */

/*
 * SÜZGEÇ YAN KOLONDA DEĞİL, ÜSTTE. Sol dikey şerit zaten solu tutuyor; ikinci
 * bir sol kolon 1040px'de içeriğe 3 kolonluk kırıntı bırakırdı. Süzgeçler bu
 * yüzden ızgaranın ÜSTÜNDE yatay bir şerittir ve <details> ile katlanır
 * (JavaScript gerekmez).
 */
.qk-yol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Bağlantılar 44px'lik hedefe genişletildiği için aradaki boşluk kısıldı:
       yoksa sayfa yolu gereksiz yayılıyordu. */
    gap: 2px;
    padding: 18px 0 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--qk-gri);
}

/*
 * SAYFA YOLU BİR GEZİNME LİSTESİDİR, cümle içi bağlantı DEĞİL — dolayısıyla
 * WCAG 2.5.5'in "satır içi" istisnası burada geçerli olmaz. Ölçüldü: metin
 * yüksekliği 18px, "Moda" gibi kısa bir düğümde genişlik 31px kalıyordu.
 * Görsel punto değişmiyor; yalnızca tıklanabilir alan büyüyor.
 */
.qk-yol a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--qk-gri);
}

.qk-yol a:hover {
    color: var(--primary);
}

.qk-liste-ust {
    padding: 0 0 18px;
    border-bottom: 1px solid var(--primary);
    margin-bottom: 18px;
}

.qk-liste-ust__aciklama {
    margin: 10px 0 0;
    max-width: 70ch;
    font-size: 13px;
    color: var(--qk-gri);
}

.qk-suz {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.qk-suz > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 11px;
    letter-spacing: var(--qk-harf);
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.qk-suz__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    padding: 4px 0 20px;
}

.qk-suz__grup {
    flex: 1 1 200px;
    min-width: 0;
}

.qk-suz__b {
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--qk-gri);
}

.qk-suz__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    max-height: 220px;
    overflow-y: auto;
}

.qk-suz__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--qk-gri);
    border: 1px solid var(--border);
}

.qk-suz__liste a:hover,
.qk-suz__liste a.is-active {
    color: var(--primary);
    border-color: var(--primary);
    text-decoration: none;
}

/* Marka listesi çok uzayabilir: onay kutuları tek kolonda ve kendi içinde
   kayar (sayfa değil, KAP kayar). */
.qk-suz__liste--kolon {
    display: block;
}

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

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

.qk-alan label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--qk-gri);
}

.qk-suz__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1 1 100%;
}

.qk-sirala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.qk-sirala__sayi {
    margin: 0;
    font-size: 12px;
    color: var(--qk-gri);
}

.qk-sirala__sayi strong {
    color: var(--primary);
}

.qk-sirala__form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qk-sirala__form label {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--qk-gri);
}

.qk-sirala__form select {
    width: auto;
    min-width: 160px;
}

.qk-bos {
    padding: 56px 0;
    border-top: 1px solid var(--border);
    text-align: center;
}

.qk-bos h2 {
    font-size: 15px;
    letter-spacing: 0.16em;
}

.qk-bos p {
    margin: 10px 0 18px;
    font-size: 13px;
    color: var(--qk-gri);
}

/* ==================== ÜRÜN SAYFASI ==================== */

.qk-urun-sayfa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 40px;
}

@media (min-width: 900px) {
    .qk-urun-sayfa {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-items: start;
    }
}

.qk-kare {
    background: var(--qk-zemin);
}

.qk-kare img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Küçük resim şeridi: büyük karenin ALTINDA, yatay. */
.qk-serit {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.qk-serit__t {
    flex: 0 0 auto;
    width: 64px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    background: none;
}

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

.qk-serit__t img {
    width: 100%;
    height: auto;
}

.qk-sag {
    min-width: 0;
}

.qk-sag__marka {
    display: inline-flex;
    align-items: center;
    /* Kısa marka adında genişlik 36px'e düşüyordu (ölçüldü). */
    min-width: 44px;
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--qk-gri);
}

.qk-sag__ad {
    font-size: clamp(19px, 3vw, 26px);
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 10px;
}

.qk-sag__kod {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 18px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--qk-gri);
}

.qk-fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.qk-fiyat strong {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: var(--primary);
}

.qk-fiyat--ind strong {
    color: var(--accent);
}

.qk-fiyat__kdv {
    flex: 1 1 100%;
    font-size: 11px;
    color: var(--qk-gri);
}

.qk-ozet {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--text);
}

/* ---- BEDEN / VARYANT: KUTU DÜĞMELER, SEÇİLİ OLAN SİYAH DOLGU ---- */

.qk-opt {
    margin-bottom: 18px;
}

.qk-opt__b {
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--qk-gri);
}

.qk-opt__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qk-opt__kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 52px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--control-border);
    background: var(--card-bg);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.qk-opt__kutu input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Seçili beden SİYAH DOLGU. Odak halkası ayrıca görünür.
   İki seçici BİLEREK ayrı yazıldı: `:has()` desteklemeyen tarayıcı tüm kuralı
   atardı, o yüzden JS'in eklediği .is-secili sınıfı KENDİ kuralında durur. */
.qk-opt__kutu.is-secili {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--control-border-strong);
}

.qk-opt__kutu:has(input:checked) {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--control-border-strong);
}

.qk-opt__kutu:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.qk-renk {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--control-border);
}

.qk-stok-not {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--qk-gri);
}

/* ---- ADET + SATIN ALMA ---- */

.qk-adet-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 10px;
}

.qk-adet {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--control-border);
}

.qk-adet button {
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    color: var(--primary);
}

.qk-adet button[disabled] {
    color: var(--qk-gri);
    cursor: not-allowed;
}

.qk-adet input {
    width: 60px;
    min-width: 44px;
    border: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    padding: 0 4px;
}

.qk-btn-ana {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--control-border-strong);
    border-radius: var(--btn-radius);
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 700;
}

.qk-btn-ana:hover {
    background: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

/* Süzgeç şeridi ve boş liste gibi yerlerde düğme tam genişlik OLMAZ. */
.qk-btn-ana--auto,
.qk-mini--auto {
    width: auto;
    display: inline-flex;
}

.qk-btn-ana[disabled] {
    background: var(--qk-zemin);
    color: var(--qk-gri);
    border-color: var(--control-border);
    cursor: not-allowed;
}

.qk-btn-ikinci {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    background: var(--card-bg);
    color: var(--primary);
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-bottom: 8px;
}

.qk-btn-ikinci:hover {
    background: var(--primary);
    color: #ffffff;
    text-decoration: none;
}

.qk-not {
    margin: 0 0 14px;
    font-size: 11px;
    color: var(--qk-gri);
}

.qk-vaat {
    margin: 18px 0 0;
    border-top: 1px solid var(--border);
}

.qk-vaat li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}

/* ---- AKORDEON (JavaScript yok) ---- */

.qk-akordeon {
    margin: clamp(32px, 6vw, 64px) 0 0;
    border-top: 1px solid var(--primary);
}

.qk-kat {
    border-bottom: 1px solid var(--border);
}

.qk-kat > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    font-size: 11px;
    letter-spacing: var(--qk-harf);
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.qk-kat > summary::after {
    content: "+";
    font-size: 16px;
    font-weight: 400;
    color: var(--qk-gri);
}

.qk-kat[open] > summary::after {
    content: "\2212";
}

.qk-kat__ic {
    padding: 4px 0 26px;
    max-width: 80ch;
    font-size: 14px;
}

.qk-beden-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.qk-beden-liste li {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
}

/* ---- YORUMLAR ---- */

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

.qk-yorum__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12px;
}

.qk-yorum__ad {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.qk-form-yorum {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--primary);
    max-width: 520px;
}

.stars {
    color: var(--primary);
    letter-spacing: 1px;
}

/* ==================== ALT BİLGİ ==================== */

/*
 * SOLA HİZALI, ÜÇ KOLON, ÇOK KÜÇÜK PUNTO, sonda ödeme işaretleri.
 * Ödeme işaretleri MAĞAZANIN GERÇEK AYARLARINDAN gelir (kapıda ödeme, havale,
 * kredi kartı, taksit); kapalı bir yöntemin işareti BASILMAZ — çalışmayan bir
 * ödeme yolunu vitrinde göstermek yanlış vaattir.
 */
.qk-alt {
    margin-top: clamp(48px, 8vw, 96px);
    border-top: 1px solid var(--primary);
    background: var(--page-bg);
}

.qk-alt__ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 40px clamp(12px, 4vw, 40px);
    max-width: var(--container);
    margin: 0 auto;
    text-align: left;
}

@media (min-width: 641px) {
    .qk-alt__ic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.qk-alt__b {
    margin: 0 0 12px;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--qk-gri);
    font-weight: 600;
}

/*
 * ALT BİLGİ BAĞLANTILARI SATIRIN TAMAMINI KAPLAR. `inline-flex` bırakılınca
 * kısa etiketler ("Blog" 25px, "Moda" 30px) 44px'lik genişliğe ulaşmıyordu
 * (tarayıcıda ölçüldü). `flex` ile bağlantı kolonun genişliğini alır: hedef
 * her iki eksende 44px'i geçer ve liste görünümü değişmez.
 */
.qk-alt li a {
    display: flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
    color: var(--text);
}

.qk-alt__iletisim a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
    color: var(--text);
}

.qk-alt li a:hover {
    color: var(--accent);
}

.qk-alt__slogan {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--qk-gri);
    max-width: 34ch;
}

.qk-odeme {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 clamp(12px, 4vw, 40px) 18px;
    max-width: var(--container);
    margin: 0 auto;
}

.qk-odeme li {
    padding: 6px 10px;
    border: 1px solid var(--border);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--qk-gri);
}

.qk-alt__son {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 14px clamp(12px, 4vw, 40px);
    max-width: var(--container);
    margin: 0 auto;
    border-top: 1px solid var(--border);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--qk-gri);
}

/* ==================== ÇEKİRDEK PARÇALARIN SINIFLARI ====================
   Aşağıdaki adlar shop.css'te tanımlıydı; bu tema shop.css YÜKLEMEDİĞİ için
   kendi karşılıklarını taşımak zorunda. @includeIf ile bağlanan modül
   parçaları (ek hizmet formu, abonelik kutusu, kombin, araç uyumluluk,
   parti/SKT, garanti) bu sınıfları kullanıyor — tanımsız kalsalar modül
   görünür ama BİÇİMSİZ olurdu. */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 40px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    background: var(--card-bg);
    color: var(--primary);
    font-size: 11px;
    letter-spacing: 0.14em;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover {
    background: var(--primary);
    color: #ffffff;
    text-decoration: none;
}

.btn[disabled] {
    background: var(--qk-zemin);
    color: var(--qk-gri);
    cursor: not-allowed;
}

.btn--navy,
.btn--gold,
.btn--primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--control-border-strong);
}

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

.btn--outline,
.btn--ghost {
    background: var(--card-bg);
    color: var(--primary);
}

.btn--sm {
    min-height: 44px;
    padding: 0 12px;
    font-size: 10px;
}

.btn--lg {
    min-height: 52px;
    padding: 0 24px;
    font-size: 12px;
}

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

.badge {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid var(--primary);
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--primary);
}

.badge--gold,
.badge--danger {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.badge--info,
.badge--success {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.alert {
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid var(--control-border);
    border-left-width: 3px;
    font-size: 13px;
    background: var(--card-bg);
}

.alert ul {
    margin: 0;
    padding-left: 16px;
    list-style: disc;
}

/*
 * Uyarı kutusundaki bağlantı cümlenin İÇİNDE ("… zaten üyeyseniz giriş yapın")
 * olduğu için WCAG 2.5.5'in satır içi istisnası teknik olarak geçerli; ama
 * ölçüldü: yükseklik 14px. `inline-flex` satır akışını bozmadan hedefi 44px'e
 * çıkarıyor, kutunun metni kısa olduğu için tıklama çakışması olmuyor.
 */
.alert a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
}

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

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

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

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

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

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

.nowrap {
    white-space: nowrap;
}

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

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--qk-gri);
}

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

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

.panel__desc {
    font-size: 12px;
    color: var(--qk-gri);
}

.prose {
    font-size: 14px;
    line-height: 1.7;
}

.prose h2,
.prose h3 {
    margin: 20px 0 8px;
    font-size: 13px;
    letter-spacing: 0.16em;
}

.prose ul,
.prose ol {
    margin: 0 0 12px;
    padding-left: 18px;
    list-style: disc;
}

.prose a {
    border-bottom: 1px solid var(--primary);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 32px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--primary);
}

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

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

.pagination .is-disabled {
    color: var(--qk-gri);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--qk-gri);
}

/* SAYFA YOLU BAĞLANTISI — ÖLÇÜLDÜ VE DÜZELTİLDİ: bu tema `css/shop.css`
   yüklemediği için EZİLMEYEN çekirdek sayfalardaki (/iletisim, /blog,
   /kampanyalar, sözleşmeler) sayfa yolu yalnızca bu uyumluluk katmanına
   dayanıyor. Kural yalnızca `.breadcrumb` kabını biçimlendiriyordu; bağlantı
   satır içi bir metin olarak kalıp 46x18 px dokunma hedefi üretiyordu
   (9 genişlikte 9 bulgu). Blok/esnek yapıp min ölçü verildi. */
.breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
}

/* Karşılaştırma parçaları kendi CSS dosyasını yüklüyor; burada yalnızca bu
   temanın çizgisine (köşesiz, siyah-beyaz) çekiliyor. */
.krs-ekle__btn {
    border-radius: 0;
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.krs-serit {
    border-radius: 0;
    border: 1px solid var(--border);
}

/* Tema önizleme şeridi (panel personeli görür). Ekranın ALTINA kilitli
   olduğu için çentikli cihazın alt tutamağı düğmeleri örtmesin diye
   güvenli alan eki ZORUNLU. */
.tema-onizleme {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px clamp(12px, 4vw, 24px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--primary);
    color: #ffffff;
    font-size: 12px;
}

.tema-onizleme a,
.tema-onizleme strong {
    color: #ffffff;
}

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

.tema-onizleme__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #ffffff;
    background: none;
    color: #ffffff;
    font-size: 10px;
    letter-spacing: 0.14em;
}

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

/* ==================== HAREKETİ AZALT ====================
   WCAG 2.3.3. Süreleri sıfırlamak yetmez: yumuşak kaydırma da harekettir. */

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

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   EZİLMEYEN VİTRİN SAYFALARININ ORTAK SINIFLARI
   ==========================================================================

   Bu tema yalnızca yedi çekirdek görünümü eziyor (düzen, başlık, alt bilgi,
   ürün kartı, ana sayfa, liste, ürün). Sepet, ödeme, hesap, bayi, koleksiyon,
   blog, kampanya ve içerik sayfaları ÇEKİRDEK görünümlerden geliyor ve onların
   sınıfları shop.css'te tanımlıydı. Tema shop.css'i YÜKLEMEDİĞİ için bu
   sınıfların karşılığı BURADA olmak zorunda; olmasa sepet ve ödeme adımı
   BİÇİMSİZ kalırdı — yani "tema değişti, ödeme akışı bozuldu" olurdu.

   Kapsam ÖLÇÜLEREK belirlendi: ezilmeyen bütün çekirdek vitrin şablonlarındaki
   sınıf adları toplandı, shop.css'te tanımlı olup ne bu dosyada ne de modül
   CSS dosyalarında (shop-*.css) karşılığı olanlar listelendi.
   ========================================================================== */

/* ---- Bölüm ve başlık ---- */

.section {
    padding: clamp(32px, 6vw, 64px) 0;
}

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

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--primary);
}

.section-head h2,
.section-head h3 {
    font-size: 13px;
    letter-spacing: 0.2em;
}

.eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--qk-gri);
}

.center {
    text-align: center;
}

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

/*
 * Sipariş kodu, IBAN, seri no gibi hizalanması gereken sayılar.
 * FONT AİLESİ DEĞİŞTİRİLMEZ: tema tek aile kullanıyor (Archivo); ikinci bir
 * aile getirmek "tek aile" kararını sessizce bozardı. Hizalama tabular
 * rakamlarla sağlanır.
 */
.mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

/* ---- Ürün ve kategori ızgaraları (bloklar, koleksiyon, favoriler) ---- */

.pgrid,
.pgrid--4,
.pgrid--5,
.pgrid--3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 32px) clamp(10px, 2vw, 22px);
}

.catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
}

.catcard {
    display: block;
    padding: 16px;
    border: 1px solid var(--border);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--primary);
}

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

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

@media (min-width: 1040px) {
    .pgrid,
    .pgrid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

/* ---- Kahraman alanı (ana sayfa bloğu). Bu tema kendi vitrinini kullanıyor
       ama blok başka bir sayfadan da çağrılabilir. ---- */

.hero {
    padding: clamp(28px, 5vw, 56px) 0;
    border-bottom: 1px solid var(--border);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.hero__badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--primary);
    font-size: 10px;
    letter-spacing: 0.18em;
}

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

.hero__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 10px;
}

.hero__card {
    padding: 14px;
    border: 1px solid var(--border);
    font-size: 12px;
}

.hero__card-icon {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
}

@media (min-width: 900px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

/* ---- SEPET ---- */

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

.cartlist {
    border-top: 1px solid var(--primary);
}

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

.cartitem__img {
    grid-row: span 2;
}

.cartitem__img img {
    width: 72px;
    height: auto;
}

/* Sepet satırındaki ürün adı bir bağlantıdır; metin yüksekliği 22px'te
   kalıyordu (tarayıcıda ölçüldü). */
.cartitem__name {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

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

.cartitem__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    grid-column: 2;
}

.cartitem__total {
    font-size: 14px;
    font-weight: 700;
}

.coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 18px 0;
}

.summary {
    padding: 18px;
    border: 1px solid var(--primary);
}

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}

.summary__row--total {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--primary);
    font-size: 16px;
    font-weight: 700;
}

.summary__note {
    font-size: 11px;
    color: var(--qk-gri);
}

/*
 * Çekirdek adet kutusu (sepet satırı, bayi hızlı sipariş). Ürün sayfası temanın
 * kendi .qk-adet kutusunu kullanır; ikisi de AYNI JS kancasına ([data-qty])
 * bağlıdır, yani adet kümesi kuralı tek yerden gelir.
 */
.qty {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--control-border);
}

.qty button {
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    color: var(--primary);
}

.qty input {
    width: 56px;
    min-width: 44px;
    padding: 0 4px;
    border: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
}

@media (min-width: 900px) {
    .cartlayout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    }
}

/* ---- ÖDEME AKIŞI ---- */

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

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--qk-gri);
}

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

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

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

/*
 * Yerel radyo düğmesi küçük kalır (appearance:none ile yeniden çizmek yüksek
 * kontrast kipini bozar); dokunma hedefi SARAN karttır.
 */
.radio-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--control-border);
    font-size: 13px;
    cursor: pointer;
}

.radio-card__price {
    margin-left: auto;
    font-weight: 700;
}

/* Aynı gerekçe: yerel onay kutusu küçük kalır, hedef saran etikettir. */
.check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 13px;
    cursor: pointer;
}

.field-error {
    margin-top: 4px;
    font-size: 11px;
    color: var(--accent);
}

.success-box {
    padding: 22px;
    border: 1px solid var(--primary);
    text-align: center;
}

.success-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border: 1px solid var(--primary);
    color: var(--primary);
}

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

.addr-grid--bosluklu {
    gap: 18px;
}

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

@media (min-width: 900px) {
    .checkout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    }
}

/* ---- HESAP VE LİSTE DÜZENLERİ ---- */

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

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

.accnav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--primary);
}

.accnav a.is-active,
.accnav a:hover {
    border-color: var(--primary);
    text-decoration: none;
}

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

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

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

.filters {
    padding: 16px;
    border: 1px solid var(--border);
}

.filters__group {
    margin-bottom: 18px;
}

.filters__title {
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--qk-gri);
}

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

.filters__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    color: var(--qk-gri);
}

.filters__list a.is-active,
.filters__list a:hover {
    color: var(--primary);
}

@media (min-width: 1100px) {
    .acclayout,
    .listlayout {
        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    }

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

/* ---- TABLOLAR ----
   Tabloya display:block VERİLMEZ (satır-sütun ilişkisi erişilebilirlik
   ağacından düşer, ekran okuyucu "sütun 3: Tutar" diyemez). Dar ekranda KAP
   kayar: .table-scroll. */

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

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

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

.datatable th,
.kargo-tablo th {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--qk-gri);
    border-bottom-color: var(--primary);
}

/* ---- KUTULAR VE DİĞER ---- */

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

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

.statcard {
    padding: 14px;
    border: 1px solid var(--border);
    font-size: 12px;
}

.empty {
    padding: 48px 0;
    border-top: 1px solid var(--border);
    text-align: center;
}

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

.panel--sss {
    padding: 0;
    border: 0;
}

.badge--muted {
    background: var(--qk-zemin);
    border-color: var(--border);
    color: var(--qk-gri);
}

/* Varyant örnekleri ve seçenek listeleri (ezilmeyen sayfalarda da geçer). */
.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--control-border);
}

.optgroup {
    margin-bottom: 16px;
}

.optgroup__title {
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--qk-gri);
}

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

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

.pfeatures {
    margin: 18px 0 0;
    border-top: 1px solid var(--border);
}

.pfeatures li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

/* Çekirdek ürün galerisi (ezilmeyen bir sayfa onu kullanırsa). */
.gallery__main {
    background: var(--qk-zemin);
}

.gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
}

.gallery__thumb {
    flex: 0 0 auto;
    width: 64px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border);
}

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

.tema-onizleme__metin {
    flex: 1 1 auto;
    min-width: 44px;
}

.tema-onizleme__ayrinti {
    color: #ffffff;
}

@media (min-width: 641px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   GENİŞLETME NOKTASI MODÜLLERİNİN QUICK'E ÇEVİRİSİ
   --------------------------------------------------------------------------
   Bu temaya dört modül bağlanıyor:
     shop.partials.bulten        → alt bilgi, çift opt-in bülten
     shop.partials.stok-bildirim → ürün kolonu, "gelince haber ver"
     shop.partials.dealer-price  → ürün kolonu, B2B bayi fiyat şeridi
     shop.partials.exit-offer    → kabuk sonu, çıkış teklifi katmanı

   ÇIKIŞ TEKLİFİ İÇİN TEK SATIR YAZILMADI: shop-sepet-zekasi.css tamamen
   belirteçlerle çiziliyor (--card-bg, --border, --card-radius, --title,
   --text, --muted, --accent-strong, --accent-soft, --pill, --shadow-lg,
   --ease) ve bu tema hepsini tanımlıyor. Kardeş temalar (teknomart, comforte,
   meniac) da onun için tek satır yazmıyor.

   AŞAĞIDAKİ KURALLAR ÜÇ ÖLÇÜLEN SORUNU ÇÖZER — SÜS DEĞİL:

   1) BÜLTEN ALANININ SINIRI GÖRÜNMÜYOR (WCAG 1.4.11, eşik 3:1).
      Modül CSS'i `.bulten__form input[type="email"]` alanına
      `border: 1px solid var(--border)` veriyor. Bu temada --border #e2e2e2
      ve alt bilgi zemini beyaz: sınır kontrastı 1,19:1. Temanın kendi
      alanları bu yüzden --control-border (#1a1a1a, 21,00:1) kullanıyor;
      modülün kuralı temanın genel `input` kuralıyla AYNI özgüllükte
      (0,2,1) ama gövdeden SONRA yüklendiği için onu eziyordu.

   2) ALAN 16px ALTINA DÜŞÜYOR. Modül `font: inherit` veriyor; alt bilgi
      punto ölçeği bu temada küçük, yani alan 13px'e iniyor ve iOS Safari
      odaklanınca sayfayı ZORLA yakınlaştırıyor (kullanıcı geri
      uzaklaştıramaz). Temanın genel kuralı 16px'i açıkça yazıyor, modül
      onu eziyordu.

   3) İKİ ÇİZGİ ÜST ÜSTE. `.qk-alt` zaten siyah bir üst çizgiyle başlıyor;
      modülün `.bulten` bandı da kendi `border-top` çizgisini basıyordu.
   ========================================================================== */

/* -------------------- ALT BİLGİ: BÜLTEN ŞERİDİ -------------------- */

/*
 | SEÇİCİLERİN ÖNÜNDE `.tema-quick` VAR — SÜS DEĞİL, ÖLÇÜLMÜŞ ZORUNLULUK.
 |
 | Modülün kendi stili (public/css/shop-stok-bildirim.css) `.bulten__aciklama`
 | gibi TEK SINIFLI seçiciler kullanıyor ve GÖVDEDEN yükleniyor
 | (shop.partials.bulten kendi <link> etiketini basıyor), yani temanın stil
 | dosyasından SONRA geliyor. Eşit özgüllükte SONRAKİ kural kazanır: ilk turda
 | buradaki kuralların HİÇBİRİ uygulanmadı.
 |
 | GERÇEK TARAYICIDA ÖLÇÜLDÜ (9 genişlik): `.bulten__aciklama` modülün
 | `var(--muted)` rengiyle çiziliyordu ve koyu yeşil bant üstünde kontrast
 | 1,90:1 çıkıyordu (eşik 4,5:1). Düzeltilmiş hâlde 8,34:1.
 |
 | Gövde sınıfı (`<body class="{{ $tema->bodyClass() }}">`) özgüllüğü
 | (0,2,0)'a çıkarır ve modülün (0,1,0) kuralını yener. `!important`
 | KULLANILMADI: o, sıradaki her ezmeyi de imkânsız kılar.
 */

.tema-quick .bulten {
    padding-block: 26px;
    border-top: 0;
    border-bottom: 1px solid var(--border);
}

/* Alt bilginin üç kolonuyla AYNI kap: modül 1200px + 16px kullanıyor,
   bu temanın alt bilgisi 1440px + clamp(12px, 4vw, 40px). */
.tema-quick .bulten__ic {
    max-width: var(--container);
    padding-inline: clamp(12px, 4vw, 40px);
    gap: 16px clamp(16px, 4vw, 40px);
}

/* Bu temanın başlık dili: küçük punto, geniş harf aralığı, KALIN.
   BÜYÜK HARFE CSS İLE ÇEVRİLMEZ — `text-transform: uppercase` Türkçe'de
   'i' harfini 'I' yapar; buradaki metin çekirdek modül parçasından geliyor,
   yani sunucuda App\Support\Metin::buyuk() ile üretilemiyor. */
.tema-quick .bulten__baslik {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--title);            /* beyaz üstünde 21,00:1 */
}

.tema-quick .bulten__aciklama {
    font-size: 12.5px;
    color: var(--qk-gri);           /* #6b6b6b · beyaz üstünde 5,33:1 */
}

.tema-quick .bulten__aciklama strong { font-weight: 700; color: var(--text); }

.tema-quick .bulten__form input[type="email"] {
    min-height: 44px;
    border: 1px solid var(--control-border); /* 21,00:1 — bkz. (1) */
    border-radius: var(--radius);            /* 0px */
    background: var(--card-bg);
    color: var(--text);
    font-size: 16px;                         /* bkz. (2) */
}

.tema-quick .bulten__form input[type="email"]::placeholder { color: var(--qk-gri); }

.tema-quick .bulten__hata {
    max-width: var(--container);
    padding-inline: clamp(12px, 4vw, 40px);
    color: var(--accent-strong);    /* #8f0b20 · beyaz üstünde 9,04:1 */
}

/* ---------------- ÜRÜN KOLONU: BAYİ ŞERİDİ + STOK FORMU ---------------- */

/*
 | KUTU SINIRI SİYAH HAT: bu temada her kutu (adet kümesi, beden kutusu,
 | ikincil düğme, ödeme etiketi) --control-border ile çiziliyor; modülün
 | --border grisi tek başına yabancı bir kutu üretirdi. Köşe yarıçapı zaten
 | 0 (--card-radius), gölge zaten yok — o iki değer belirteçten geliyor.
 */
.qk-sag .bayi-panel,
.qk-sag .stokbildirim {
    border: 1px solid var(--control-border);
    border-radius: 0;
    background: var(--card-bg);
}

.qk-sag .bayi-panel { margin: 14px 0 0; }

.qk-sag .bayi-panel__head {
    border-bottom: 1px solid var(--control-border);
}

.qk-sag .bayi-panel__head h2,
.qk-sag .stokbildirim__baslik {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.qk-sag .stokbildirim { margin-bottom: 14px; }

/*
 | KVKK ONAY ETİKETİ EN AZ 44px — ÖLÇÜLEREK EKLENDİ.
 | Onay kutusunun dokunma hedefi kutunun kendisi (18x18) değil, onu saran
 | ETİKETTİR. Etiketin yüksekliği metnin kaç satıra sardığına bağlı; gerçek
 | tarayıcıda 768px'te 42px ölçüldü (eşik 44). Kardeş temalarda da aynı ölçüm
 | çıktı, düzeltme üçüne birden yazıldı.
 */
.qk-sag .stokbildirim__onay {
    min-height: 44px;
    align-items: center;
}

/* Bu temanın birincil eylemi TAM GENİŞLİK siyah düğmedir; modülün
   `.btn--outline` düğmesi de aynı kolonda tam genişlikte durmalı, yoksa
   satır sonunda asılı kalır. */
.qk-sag .stokbildirim__form .btn { width: 100%; }


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

/*
 * QUICK — BRÜT MİNİMALİZM: ORTALANMIŞ ETİKET, ÇİFT TEL ÇİZGİ.
 *
 * Bu temada bölümler 40px'lik ince bir çizgiyle ayrılıyor ve etiketler
 * ORTALANMIŞ. Yuva aynı dili kullanır: etiket ORTADA ve altında temanın
 * imzası olan kısa tel çizgi. Zemin ve çerçeve YOK — bu tema hiçbir yerde
 * kutu kullanmıyor.
 */
[data-tema='quick'] .reklam {
  --reklam-bosluk: 48px;
}

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

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

[data-tema='quick'] .reklam__etiket::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--border-strong);
}

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

@media (max-width: 641px) {
  [data-tema='quick'] .reklam {
    --reklam-bosluk: 32px;
  }
}