/* ==========================================================================
   BEREKET — MARKET / SÜPERMARKET TEMASI · TAM STİL DOSYASI
   --------------------------------------------------------------------------
   Bu dosya `public/css/shop.css` İLE BİRLİKTE YÜKLENMEZ, ONUN YERİNE geçer
   (bkz. themes/bereket/shop/layouts/app.blade.php). Dolayısıyla burada yalnız
   temanın kendi blokları değil, ÇEKİRDEK SINIFLAR da (btn, field, alert,
   cartitem, checkout, pagination, prose, datatable…) çizilmek zorundadır;
   eksik bir sınıf, temanın ezmediği sayfayı (sepet, ödeme, blog) sessizce
   stilsiz bırakır.

   :root bloğu, resources/themes/bereket.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 ölçer.

   ÖLÇÜ FİŞİ (Shopify Ella 7.2 "Home 04 — Super Market", 1440px'de ölçüldü):
     kapsayıcı 1360 · gövde DM Sans 16/22,4 · başlık Rubik 700
     h1 60/1,05 · bölüm başlığı 20/22/700 · "tümünü gör" 16/700 altı çizili
     ürün adı 16/22,4/400 · fiyat 14/19,6/500 · eski fiyat 13/18,2/500
     menü 14/19,6/400 · ürün ızgarası 6 kolon 20px oluk (6×210 + 5×20 = 1360)
     kart fotoğrafı 1:1,25 · düğme hap 40px / 10px 15px / ls 1px
     rozet 12/12/500, 1px 8px, r15 · başlık 90px + 74px · arama 443×47 hap
     bülten girdisi 412×56 r100 · kutu yarıçapı 10px
   Fişler: /root/screenshot-tool/referans/ella-market-{olcu,izgara,parca}.json
   Referansın CSS'i, JS'i, ikonu ve fotoğrafı KOPYALANMADI; ölçü ölçüldü,
   kod buradan sıfırdan yazıldı.

   YOĞUNLUK TEMANIN İMZASIDIR: altı kolonluk ızgara, yatay kayan raflar, her
   kartta birim fiyat ve her zaman görünür sepet düğmesi. Markette karar tek
   fotoğrafa değil, yan yana duran çok sayıda fiyata bakılarak verilir.

   RENK NİÇİN REFERANSIN TURUNCUSU DEĞİL: referansın #ff6a01 tonu beyaz metinle
   3,79:1 verir ve WCAG 1.4.3'ü geçmez. Bizim kiremit #c9410f beyazla 4,97:1.

   KONTRAST (WCAG bağıl parlaklık, #ffffff zemin üstünde):
     --title #191512 18,42:1 · --text #232323 16,10:1 · --muted #6b6b6b 5,32:1
     --accent #2f7d3f 5,15:1 · --primary #c9410f 4,97:1 (üstünde beyaz 4,97:1)
     --control-border #767676 4,54:1 (WCAG 1.4.11 eşiği 3:1)
     --hata #c0182f 6,15:1 · --yeni #0b7285 5,62:1
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #c9410f;
    --accent: #2f7d3f;
    --title: #191512;
    --text: #232323;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e6e6e6;
    --radius: 10px;
    --card-radius: 10px;
    --btn-radius: 40px;
    --font-scale: 1;
    --container: 1360px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #6b6b6b;
    /* 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: #767676;
    /* Yüzey tonları ölçüldü: referansın bölüm zemini #f5f5f5, başlığın ikinci
       katmanı #fafafa. */
    --yuzey: #f5f5f5;
    --yuzey-koyu: #ebebeb;
    --serit: #fafafa;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #c0182f;
    /* "Yeni" rozetinin mavisi: referansın #06bfe2 tonu beyaz yazıyla 1,9:1
       verirdi; koyultuldu. */
    --yeni: #0b7285;
    --gecis: .25s ease;
    /* İKİ AİLE — referansın kendi kurgusu. YEREL (public/fonts). */
    --govde-yazi: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --baslik-yazi: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    /* Galeri çapaları (ürün sayfasındaki küçük resim şeridi) yumuşak kaysın. */
    scroll-behavior: smooth;
}

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

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

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--govde-yazi);
    /* ÖLÇÜ: 16px / 22,4px (1,4) — referans gövde satır yüksekliği. */
    font-size: calc(16px * var(--font-scale));
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

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

img {
    height: auto;
}

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

a:hover {
    text-decoration: underline;
}

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

button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-weight: 700;
    line-height: 1.1;
    color: var(--title);
}

/* ÖLÇÜ: h1 60px / 1,05. Referansta kahraman başlığı büyük harftir; biz
   Türkçe için büyük harfi CSS ile DEĞİL Metin::buyuk() ile üretiyoruz. */
h1 {
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
    line-height: 1.05;
}

/* ÖLÇÜ: bölüm başlığı 20px / 22px / 700. */
h2 {
    font-size: 1.25rem;
    line-height: 1.1;
}

h3 {
    font-size: 1.0625rem;
}

p,
ul,
ol,
dl,
figure {
    margin: 0 0 12px;
}

ul,
ol {
    padding-left: 18px;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

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

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    /* Odak halkası SIFIR YARIÇAPLI bırakılmaz: hap düğmelerde dikdörtgen bir
       halka düğmenin dışına taşıyor ve hangi öğenin odakta olduğu
       okunmuyordu. */
    border-radius: 4px;
}

.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) DÜZEN İLKELERİ
   ========================================================================== */

/* ÖLÇÜ: kapsayıcı 1360px (referansta 13 kez ölçüldü). */
.brk-en,
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

.brk-en--dar {
    max-width: 860px;
}

#brk-icerik {
    display: block;
    min-height: 40vh;
}

/* Bölüm ritmi: referansta bölümlerin kendi dolgusu yok, boşluk iç öğelerde.
   Biz bölüme veriyoruz — tek yerden değişsin. */
.brk-bolum {
    padding: 40px 0;
}

.brk-bolum--yuzey {
    background: var(--yuzey);
}

.brk-bolum__bas {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

.brk-bolum__bas h2 {
    margin: 0;
}

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

/* ÖLÇÜ: "tümünü gör" 16px / 22,4px / 700, ALTI ÇİZİLİ. Referansta da
   çizgilidir — bağlantı olduğu rengiyle değil çizgisiyle anlaşılıyor. */
.brk-tumu {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.brk-tumu:hover {
    color: var(--primary);
}

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

.brk-btn-metin:hover {
    color: var(--primary);
}

/* --- hap rozet ---
   ÖLÇÜ: 12px / 12px / 500, dolgu 1px 8px, yarıçap 15px. */
.brk-etiket {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 15px;
    background: var(--yuzey-koyu);
    color: var(--title);
    font-size: .75rem;
    line-height: 1;
    font-weight: 500;
    /* Rozet metni 12px; satır yüksekliği 12px olunca harfin altı kırpılıyordu.
       Dolgu 1px 8px ölçüldüğü için yükseklik dolgudan değil satırdan gelir. */
    padding-block: 4px;
}

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

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

.brk-etiket--bitti {
    background: var(--muted);
    color: #fff;
}

/* Menüdeki küçük çipler (Yeni / %25) */
.brk-cip {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 7px;
    border-radius: 15px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}

.brk-cip--yeni {
    background: var(--yeni);
    color: #fff;
}

.brk-cip--indirim {
    background: var(--hata);
    color: #fff;
}

.brk-yildiz {
    color: #d99400;
    letter-spacing: 1px;
}

.brk-reklam-alan {
    margin: 24px auto;
}

.brk-reklam {
    display: block;
}

/* ==========================================================================
   3) BAŞLIK — İKİ KATMAN: KİREMİT (90px) + AÇIK GRİ REYON ŞERİDİ (74px)
   --------------------------------------------------------------------------
   ÖLÇÜ: 1. katman 90px, 2. katman 74px, toplam 164px; arama 443×47 hap;
   menü 14px/19,6px/400.
   TEKNOMART DA İKİ KATMANLIDIR — ayrışma renk değil YAPI: aramada gömülü
   reyon seçici, DİKEY eylemler, sepette TUTAR, menüde hap rozetler.
   ========================================================================== */

.brk-bas {
    position: relative;
    z-index: 30;
}

.brk-tepe {
    background: var(--primary);
    color: #fff;
}

.brk-tepe__ic {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 90px;
}

.brk-marka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-family: var(--baslik-yazi);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

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

.brk-marka__isaret {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    font-size: 1.25rem;
    line-height: 1;
}

.brk-hat {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: 1.25;
    color: #fff;
}

.brk-hat:hover {
    text-decoration: none;
}

.brk-hat__ust {
    font-size: .8125rem;
    opacity: .88;
}

.brk-hat__no {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--baslik-yazi);
}

/* --- HAP ARAMA (443 × 47) --- */
.brk-ara {
    position: relative;
    display: flex;
    align-items: center;
    /* ÖLÇÜ: referansta kutu 443px. `max-width` de 443 — esnek bırakılınca
       1440px'de 560px'e uzuyor ve fişten sapıyordu. Taban 443, dar ekranda
       küçülür (flex-shrink 1). */
    flex: 1 1 443px;
    max-width: 443px;
    height: 47px;
    background: #fff;
    border-radius: 999px;
    padding: 0 6px 0 4px;
}

.brk-ara__reyon {
    position: relative;
    flex: 0 0 auto;
}

.brk-ara__reyon > summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: 39px;
    border-right: 1px solid var(--border);
    color: var(--text);
    font-size: .875rem;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
}

.brk-ara__reyon > summary::-webkit-details-marker {
    display: none;
}

.brk-ara__reyonlar {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.brk-ara__reyonlar a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text);
    font-size: .9375rem;
}

.brk-ara__reyonlar a:hover {
    background: var(--yuzey);
    text-decoration: none;
}

/* ÖZGÜLLÜK ZORUNLU: çekirdek bloktaki `input[type='search']` kuralı
   ile aynı ağırlıkta (0,1,1) olurdu ve dosyada SONRA geldiği için kazanırdı —
   başlıktaki arama kutusu çerçeveli, tam genişlikte bir kutuya dönüyordu. */
.brk-ara input[type='search'] {
    flex: 1 1 auto;
    min-width: 0;
    height: 39px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--text);
}

.brk-ara input::placeholder {
    color: var(--muted);
}

.brk-ara button {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--title);
}

.brk-ara button:hover {
    background: var(--yuzey);
}

/* --- DÖRT DİKEY EYLEM: ikon üstte, etiket altta --- */
.brk-eylem {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}

.brk-eylem__oge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
}

.brk-eylem__oge:hover {
    background: rgba(255, 255, 255, .16);
    text-decoration: none;
}

.brk-eylem__sepet .brk-eylem__yazi {
    font-weight: 700;
}

.brk-eylem__sayac {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.brk-burger {
    display: none;
}

/* --- 2. KATMAN: REYON ŞERİDİ --- */
.brk-serit {
    background: var(--serit);
    border-bottom: 1px solid var(--border);
}

.brk-serit__ic {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 74px;
}

.brk-reyonlar {
    position: relative;
    flex: 0 0 auto;
}

.brk-reyonlar > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.brk-reyonlar > summary::-webkit-details-marker {
    display: none;
}

/* Izgara ikonu: dokuz kare. Bir SVG isteği yerine tek gradyanla çiziliyor. */
.brk-reyonlar__ikon {
    width: 16px;
    height: 16px;
    background-image:
        radial-gradient(circle, #fff 1.6px, transparent 1.7px),
        radial-gradient(circle, #fff 1.6px, transparent 1.7px),
        radial-gradient(circle, #fff 1.6px, transparent 1.7px);
    background-size: 16px 5.5px;
    background-position: 0 0, 0 5.5px, 0 11px;
    background-repeat: repeat-x;
}

.brk-reyonlar__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: min(920px, 90vw);
    padding: 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .16);
}

.brk-reyonlar__izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 26px;
}

.brk-reyonlar__kok {
    display: block;
    margin-bottom: 8px;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--title);
}

.brk-reyonlar__alt {
    display: block;
    padding: 3px 0;
    color: var(--muted);
    font-size: .875rem;
}

.brk-reyonlar__alt:hover {
    color: var(--primary);
}

/* ÖLÇÜ: menü 14px / 19,6px / 400. */
.brk-menu {
    /* Aynı tuzak (bkz. .brk-raf): kaydırıcı kapsayıcı blok olmalı. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.brk-menu::-webkit-scrollbar {
    display: none;
}

.brk-menu a {
    flex: 0 0 auto;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text);
    white-space: nowrap;
}

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

.brk-serit__kargo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--text);
    font-size: .8125rem;
}

.brk-serit__kargo svg {
    color: var(--accent);
}

/* --- MOBİL ÇEKMECE --- */
.brk-mobil {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 14px 0 20px;
}

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

.brk-mobil a,
.brk-mobil summary {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--text);
    cursor: pointer;
}

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

.brk-mobil__arama {
    display: flex;
    align-items: center;
    height: 46px;
    margin-bottom: 12px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--control-border);
    border-radius: 999px;
}

/* ÖZGÜLLÜK ZORUNLU: çekirdek bloktaki `input[type='search']` kuralı
   ile aynı ağırlıkta (0,1,1) olurdu ve dosyada SONRA geldiği için kazanırdı —
   başlıktaki arama kutusu çerçeveli, tam genişlikte bir kutuya dönüyordu. */
.brk-mobil__arama input[type='search'] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
}

.brk-mobil__arama button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--yuzey);
}

/* ==========================================================================
   4) ANA SAYFA — ÜÇ KOLONLU KAHRAMAN, YATAY RAFLAR, REYON BLOKLARI
   --------------------------------------------------------------------------
   Kahramanın SOLU bir fotoğraf değil, GEZİNME LİSTESİDİR. Kardeş temaların
   hiçbirinde bu yok: ipek'te üç panelin üçü de fotoğraf/metin, teknomart'ın
   manşeti tam genişlik slayt, nordika iki sütun, eclectik bento ızgara.
   ========================================================================== */

.brk-kahraman {
    padding: 24px 0 8px;
}

.brk-kahraman__ic {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: stretch;
}

/* --- SOL: REYON DİZİNİ --- */
.brk-dizin {
    display: flex;
    flex-direction: column;
    padding: 16px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.brk-dizin__bas {
    margin: 0 0 8px;
    padding: 0 18px;
    font-family: var(--baslik-yazi);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
}

.brk-dizin ul {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}

.brk-dizin li + li {
    border-top: 1px solid var(--border);
}

.brk-dizin li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    font-size: .9375rem;
    color: var(--text);
}

.brk-dizin li a:hover {
    background: var(--yuzey);
    color: var(--primary);
    text-decoration: none;
}

.brk-dizin li a svg {
    flex: 0 0 auto;
    color: var(--muted);
}

.brk-dizin__tum {
    margin: 10px 18px 4px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- ORTA: KAMPANYA PANELİ --- */
.brk-panel {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--title);
}

.brk-panel__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SABİT PERDE: fotoğrafın üstündeki AÇIK metnin kontrastı bu katmanla
   garanti altına alınır. Fotoğraf değişse bile oran bozulmaz. */
.brk-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(24, 14, 8, .86) 0%, rgba(24, 14, 8, .68) 46%, rgba(24, 14, 8, .28) 100%);
}

.brk-panel__metin {
    position: relative;
    z-index: 1;
    max-width: 460px;
    padding: 40px;
    color: #fff;
}

.brk-panel__ustluk {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #ffd9c6;
}

.brk-panel__baslik {
    margin: 0 0 10px;
    color: #fff;
}

.brk-panel__ozet {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

.brk-panel__vaat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .92);
}

/* --- SAĞ: 2×2 KATEGORİ KUTUSU --- */
.brk-kutular {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
}

.brk-kutu {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 130px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--yuzey);
}

.brk-kutu img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gecis);
}

.brk-kutu:hover img {
    transform: scale(1.05);
}

.brk-kutu__harf {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--baslik-yazi);
    font-size: 3rem;
    color: var(--border);
}

.brk-kutu__ad {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    color: var(--title);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.3;
}

.brk-kutu:hover {
    text-decoration: none;
}

/* --- YATAY KAYAN RAF ---
   scroll-snap + overflow-x. JavaScript YOK. Klavye kullanıcısı da kaydırabilsin
   diye rafın kendisi odaklanabilir (tabindex="0" + role="group"). */
.brk-raf {
    /* ÖLÇÜLMÜŞ TUZAK — KONUMLANDIRMA ZORUNLU, SÜS DEĞİL.
       Ürün kartındaki `.visually-hidden` metinler `position: absolute` ve
       kartın hiçbir atası konumlandırılmamışken kapsayıcı blokları SAYFANIN
       KENDİSİ oluyor. Mutlak konumlu bir kutu, kapsayıcı blok zincirinde
       olmayan bir atanın `overflow` kırpmasından ETKİLENMEZ: rafın
       `overflow-x: auto` değeri onları kırpmıyordu ve sondaki karttaki 1px'lik
       gizli metin belgeyi 1440px yerine 1776px genişletiyordu (ölçüldü —
       ekranda GÖRÜNEN hiçbir öğe taşmıyordu, bu yüzden gözle bulunamaz).
       `position: relative` rafı kapsayıcı blok yapar ve kırpma çalışır. */
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 210px;
    gap: 20px;
    margin: 0;
    padding: 4px 0 14px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.brk-raf > li {
    scroll-snap-align: start;
}

.brk-raf:focus-visible {
    outline-offset: 4px;
}

/* --- REYON BLOĞU: TEMANIN İMZASI ---
   Tek satır: solda dikey kampanya kutusu | ortada üç ürün | sağda alt
   kategori paneli. Yirmi kardeşin hiçbirinde bu satır yok. */
.brk-reyon {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: stretch;
}

.brk-reyon__afis {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
}

.brk-reyon__afis img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brk-reyon__afis::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(24, 14, 8, .12) 0%, rgba(24, 14, 8, .82) 100%);
}

.brk-reyon__afis:hover {
    text-decoration: none;
}

.brk-reyon__afisMetin {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .8125rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .92);
}

.brk-reyon__oran {
    font-family: var(--baslik-yazi);
    font-size: 2.5rem;
    line-height: 1;
    color: #fff;
}

.brk-reyon__urunler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.brk-reyon__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 0;
    padding: 14px 16px;
    color: var(--text);
}

.brk-reyon__satir + .brk-reyon__satir {
    border-top: 1px solid var(--border);
}

.brk-reyon__satir:hover {
    background: var(--yuzey);
    text-decoration: none;
}

.brk-reyon__satirAd {
    font-family: var(--baslik-yazi);
    font-size: .875rem;
    font-weight: 700;
    color: var(--title);
}

.brk-reyon__satirBag {
    font-size: .8125rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.brk-reyon__satir--tum {
    background: var(--yuzey);
    font-weight: 700;
    font-size: .875rem;
    color: var(--primary);
}

/* --- HİZMET BANDI --- */
.brk-hizmet {
    padding: 34px 0;
    background: var(--yuzey);
    border-top: 1px solid var(--border);
}

.brk-hizmet__ic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.brk-hizmet__oge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 18px 12px;
    border-radius: var(--radius);
    background: var(--card-bg);
    text-align: center;
}

.brk-hizmet__oge svg {
    color: var(--primary);
}

.brk-hizmet__oge b {
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
}

.brk-hizmet__oge span {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--muted);
}

/* ==========================================================================
   5) ÜRÜN IZGARASI VE KARTI — ALTI KOLON, ÇERÇEVELİ KUTU
   --------------------------------------------------------------------------
   ÖLÇÜ: 1360 = 6 × 210 + 5 × 20. Kart fotoğrafı 1:1,25. Kart bir KUTUDUR:
   beyaz zemin, 1px çerçeve, 10px yarıçap — çerçeve raf ayracıdır, altı
   kolonluk sık ızgarada kartların nerede bittiği onunla okunuyor.
   (ipek'in kartı çerçevesiz/gölgesiz bir fotoğraftır; nordika'nınki gölgeli.)
   ========================================================================== */

.brk-izgara {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

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

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

.brk-urun {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.brk-urun:hover {
    border-color: var(--control-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

.brk-urun__medya {
    position: relative;
    /* ÖLÇÜ: 1 : 1,25 (4:5 dikey). */
    aspect-ratio: 4 / 5;
    background: var(--yuzey);
}

.brk-urun__gorsel {
    display: block;
    width: 100%;
    height: 100%;
}

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

.brk-urun__bos {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--baslik-yazi);
    font-size: 2.75rem;
    color: var(--border);
}

.brk-urun__isaret {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.brk-urun__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
}

.brk-fav-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--muted);
}

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

.brk-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    padding: 12px;
}

.brk-urun__marka {
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--muted);
}

/* ÖLÇÜ: ürün adı 16px / 22,4px / 400. İKİ SATIRA kırpılır: altı kolonluk
   ızgarada üçüncü satır kartların yüksekliğini bozuyordu. */
.brk-urun__ad {
    margin: 0;
    font-family: var(--govde-yazi);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* MARKET İMZASI: birim fiyat AD ile FİYAT ARASINDA, kendi satırında ve
   VURGU RENGİNDE. Kardeş temalarda fiyatın altında bir dipnottur. */
.brk-urun__birim {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--accent);
}

.brk-urun__puan {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: .75rem;
    color: var(--muted);
}

/* ÖLÇÜ: fiyat 14px / 19,6px / 500, eski fiyat 13px / 18,2px / 500 %75.
   BİLEREK AYRIŞMA: güncel fiyat 15px/700'e çıkarıldı. Referansın kartında
   birim fiyat satırı YOK; bizde var ve ikisi aynı ağırlıkta olduğunda gözün
   hangisinin ödenecek tutar olduğunu ayırması yavaşlıyordu. */
.brk-urun__fiyat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* FİYAT VE DÜĞME KARTIN DİBİNE YAPIŞIR. Ad bir satır mı iki satır mı
       olduğu ürüne göre değişiyor; `margin-top: auto` olmadan aynı satırdaki
       kartların "Sepete ekle" düğmeleri farklı yüksekliklerde duruyordu ve
       altı kolonluk ızgarada bu ritmi görünür biçimde bozuyordu (ölçüldü). */
    margin: auto 0 0;
    font-size: .875rem;
    line-height: 1.4;
}

.brk-urun__fiyat strong {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--title);
}

.brk-urun__fiyat del {
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(35, 35, 35, .75);
}

.brk-urun__stok {
    margin: 0;
    font-size: .75rem;
}

/* HER ZAMAN GÖRÜNÜR: markette karar hızlıdır ve müşteri tek oturumda
   onlarca kalem ekler. Gizli bir düğme her kalem için fazladan bir
   hareket demektir. */
.brk-urun__ekle {
    margin: 8px 0 0;
    display: block;
}

.brk-urun__ekle .brk-btn,
a.brk-urun__ekle {
    width: 100%;
    padding: 9px 12px;
    font-size: .875rem;
}

.brk-urun__dip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--muted);
}

/* ==========================================================================
   6) LİSTE / KATEGORİ SAYFASI — ÜSTTE YAPIŞKAN YATAY SÜZGEÇ ÇUBUĞU
   --------------------------------------------------------------------------
   Kardeş temalardan ayrışma: ipek SOLDA 260px kalıcı kolon, nordika tek
   <details>, vast ayrı çekmece, orion SAĞDA yapışkan kolon. Burada çubuk
   ÜSTTE, YATAY ve YAPIŞKANDIR — ekranın hiçbir kolonunu yemez ve ızgara
   tam genişlikte altı kolon çalışır.
   ========================================================================== */

.brk-baslik-blok {
    margin: 18px 0 20px;
}

.brk-baslik-blok p {
    margin: 8px 0 0;
    max-width: 70ch;
    color: var(--muted);
}

.brk-cubuk {
    position: sticky;
    /* Başlığın ikinci katmanı (74px) sayfayla birlikte kayıyor; çubuk en
       üste yapışır. */
    top: 0;
    z-index: 20;
    margin-bottom: 20px;
    padding: 12px 0;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
}

.brk-cubuk__cipler {
    /* Aynı tuzak (bkz. .brk-raf): kaydırıcı kapsayıcı blok olmalı. */
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.brk-cubuk__cipler::-webkit-scrollbar {
    display: none;
}

.brk-cip-bag {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    font-size: .875rem;
    color: var(--text);
    white-space: nowrap;
}

.brk-cip-bag:hover {
    border-color: var(--control-border);
    text-decoration: none;
}

.brk-cip-bag.is-secili {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.brk-cubuk__satir {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.brk-cubuk__ara {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 320px;
}

.brk-cubuk__ara .field {
    width: 100%;
}

.brk-cubuk__aralik {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brk-cubuk__aralik .field {
    width: 108px;
}

.brk-cubuk__sirala .field {
    width: 190px;
}

/* Marka süzgeci açılır panelde: yatay çubukta on beş markalık liste yer
   kaplayamaz. <details> JavaScript kapalıyken de açılır. */
.brk-acilir {
    position: relative;
    flex: 0 0 auto;
}

.brk-acilir > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    background: var(--card-bg);
    font-size: .875rem;
    list-style: none;
    cursor: pointer;
}

.brk-acilir > summary::-webkit-details-marker {
    display: none;
}

.brk-acilir__sayac {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}

.brk-acilir__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 25;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.brk-acilir__panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: .875rem;
}

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

.brk-anahtar:has(input:checked) {
    border-color: var(--accent);
    background: #eef5ef;
}

.brk-liste__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

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

.brk-liste__sayac strong {
    color: var(--title);
}

/* ==========================================================================
   7) ÜRÜN SAYFASI — SOLDA DİKEY ŞERİT + YATAY RAY, SAĞDA SATIN ALMA KUTUSU
   --------------------------------------------------------------------------
   Küçük resimler ÇAPA bağlantısıdır (<a href="#brk-foto-N">): tıklanınca
   tarayıcı rayı hedefe kaydırır. JavaScript YOK. Ray kendisi de kaydırılabilir
   olduğu için çapa çalışmasa bile bütün fotoğraflara erişiliyor.
   ========================================================================== */

.brk-urun-sayfa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

.brk-galeri {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

/* Şerit yoksa (tek fotoğraf) ray tek kolonu kaplar. */
.brk-galeri:not(:has(.brk-galeri__serit)) {
    grid-template-columns: minmax(0, 1fr);
}

.brk-galeri__serit {
    /* Aynı tuzak (bkz. .brk-raf): kaydırıcı kapsayıcı blok olmalı. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 620px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.brk-galeri__kucuk {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--yuzey);
}

.brk-galeri__kucuk:hover,
.brk-galeri__kucuk:focus-visible {
    border-color: var(--primary);
}

.brk-galeri__kucuk img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.brk-galeri__ray {
    /* Aynı tuzak (bkz. .brk-raf): kaydırıcı kapsayıcı blok olmalı. */
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--yuzey);
    scrollbar-width: none;
}

.brk-galeri__ray::-webkit-scrollbar {
    display: none;
}

.brk-galeri__kare,
.brk-galeri__bos {
    margin: 0;
    scroll-snap-align: start;
}

.brk-galeri__kare img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.brk-galeri__bos {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    font-family: var(--baslik-yazi);
    font-size: 4rem;
    color: var(--border);
}

/* --- SAĞ: ÇERÇEVELİ SATIN ALMA KUTUSU ---
   Fiyat + birim fiyat + stok + adet tek kutuda toplanır; kutu yüzey zeminli
   olduğu için uzun sayfada gözle bulunması kolay. */
.brk-satin {
    position: sticky;
    top: 20px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--yuzey);
}

.brk-satin__marka {
    display: inline-block;
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--primary);
}

.brk-satin h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 10px;
}

.brk-satin__kod {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: .8125rem;
    color: var(--muted);
}

.brk-satin__fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 4px;
}

.brk-satin__fiyat strong {
    font-family: var(--baslik-yazi);
    font-size: 2rem;
    line-height: 1.1;
    color: var(--title);
}

.brk-satin__fiyat del {
    font-size: 1rem;
    color: rgba(35, 35, 35, .75);
}

.brk-satin__indirim {
    padding: 3px 10px;
    border-radius: 15px;
    background: var(--hata);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.brk-satin__ozet {
    margin: 12px 0;
    font-size: .9375rem;
    line-height: 1.5;
}

.brk-secim {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.brk-secim legend {
    padding: 0;
    margin-bottom: 7px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
}

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

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

.brk-secim__oge:has(input:checked) {
    border-color: var(--primary);
    background: #fdf1eb;
}

.brk-secim__oge input {
    margin: 0;
}

.brk-stok {
    margin: 0 0 12px;
    font-size: .875rem;
}

.brk-adet-sira {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 14px 0 10px;
}

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

.brk-urun-eylem {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.brk-urun-eylem form {
    margin: 0;
}

.brk-guven {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.brk-guven li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: .8125rem;
    color: var(--text);
}

.brk-guven svg {
    flex: 0 0 auto;
    color: var(--accent);
}

/* --- İKİ KOLONLU BİLGİ IZGARASI --- */
.brk-bilgi {
    padding: 34px 0;
    border-top: 1px solid var(--border);
}

.brk-bilgi__ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}

.brk-bilgi__bas {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.brk-bilgi__sol > .brk-bilgi__bas + .prose {
    margin-bottom: 26px;
}

.brk-bilgi__sol .brk-bilgi__bas:not(:first-child) {
    margin-top: 26px;
}

.brk-bilgi__sag {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--yuzey);
}

.brk-detay {
    margin: 0 0 14px;
}

.brk-detay__satir {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}

.brk-detay__satir dt {
    color: var(--muted);
}

.brk-detay__satir dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
    color: var(--title);
}

.brk-madde {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: .875rem;
}

.brk-madde li {
    padding: 3px 0;
}

/* --- DEĞERLENDİRMELER --- */
.brk-yorum {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.brk-yorum__bas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;
    font-size: .875rem;
}

.brk-yorum__ad {
    font-weight: 700;
    color: var(--title);
}

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

.brk-yorum-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.brk-yorum-form > label:nth-child(5),
.brk-yorum-form > div {
    grid-column: 1 / -1;
}

/* ==========================================================================
   8) ALT BİLGİ — DÖRT BAĞLANTI KOLONU + SAĞDA MARKA KOLONU
   --------------------------------------------------------------------------
   ipek'in alt bilgisi SİYAH zeminli ve marka kolonu EN SOLDA; burada zemin
   AÇIK GRİ yüzey ve marka kolonu EN SAĞDA — okuma sırası "önce ne satıyoruz,
   sonra kim satıyor" market vitrininde doğrudur.
   ========================================================================== */

.brk-alt {
    margin-top: 40px;
    padding-top: 34px;
    background: var(--yuzey);
    border-top: 1px solid var(--border);
}

.brk-alt__izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
    gap: 28px;
    padding-bottom: 30px;
}

.brk-alt__izgara h3 {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 500;
    color: var(--title);
}

.brk-alt__izgara ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brk-alt__izgara li {
    padding: 4px 0;
}

/* ÖLÇÜ: alt bilgi bağlantıları 14px / 19,6px / 400. */
.brk-alt__izgara a {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text);
}

.brk-alt__izgara a:hover {
    color: var(--primary);
}

.brk-alt__marka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--baslik-yazi);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--title);
}

.brk-alt__marka:hover {
    text-decoration: none;
}

.brk-alt__marka .brk-marka__isaret {
    background: var(--primary);
    color: #fff;
}

.brk-alt__satir {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 9px;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text);
}

.brk-alt__satir svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--muted);
}

.brk-alt__dip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    color: var(--muted);
}

.brk-alt__dip p {
    margin: 0;
}

/* ==========================================================================
   9) ÇEKİRDEK SINIFLARIN BEREKET 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 STİLSİZ görünür — minik
   temasında tam olarak bu yaşandı.

   Bu blok ipek.css'teki eşinden TÜRETİLDİ (aynı sınıf listesi, aynı yapı).
   Renklerin ve yarıçapların TAMAMI belirteçlerden geliyor, o yüzden blok
   olduğu gibi Bereket'in paletiyle çiziliyor. Elle değiştirilen tek şey
   ipek'in SIFIR yarıçap imzası için sabitlenmiş DÖRT değerdi — burada hepsi
   hap/daire: `.badge` 15px (ölçülen rozet yarıçapı), `.steps__no`,
   `.pcard__fav` ve `.swatch` 999px.
   ========================================================================== */
/* --- düğmeler: çekirdek adları, Nordika 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-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background var(--gecis), border-color var(--gecis);
}

.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    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: var(--accent);
    border-color: var(--accent);
}

.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--surface {
    background: var(--yuzey);
}

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

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

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

.eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
}

/* --- rozetler ve durum metinleri --- */

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

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

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

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

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

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

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

.text-danger { color: var(--hata); }
.text-success { color: var(--basari); }
.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; }

/* --- 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: #eef5f2;
}

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

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

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

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

.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));
}

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

.steps__item {
    display: flex;
    gap: 14px;
}

.steps__no {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .875rem;
}

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

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

/* --- çekirdek ürün kartı (tema ezmediği yerlerde: koleksiyon, karşılaştırma) --- */

.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

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

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

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

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

.pcard__body {
    display: grid;
    gap: 6px;
    padding: 16px 18px 10px;
    flex: 1 1 auto;
}

.pcard__brand {
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--muted);
}

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

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

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

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

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

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

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

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

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

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

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

.filters__title {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    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: 500;
    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: 600;
    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: 600;
    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,
/* --- FORM DENETİMLERİ ---
   ÖLÇÜLMÜŞ AÇIK: bu blok ipek.css'te YOKTU ve blok ondan türetildiği için
   burada da yoktu. Sonuç: temanın ezmediği her form sayfasında (giriş, üyelik,
   ödeme, iletişim, yorum) girdiler TARAYICI VARSAYILANIYLA çiziliyordu —
   ölçüldü: `2px inset #767676`, dolgu `1px 2px`, genişlik 196px. Hata yok,
   uyarı yok, yalnız çirkin ve dar bir kutu. nordika.css'te blok var, o yüzden
   sorun yalnız bu iki temada görünüyordu.

   `.field` bu depoda İKİ ANLAMDA kullanılıyor: bazı görünümlerde SARMALAYICI
   <div class="field">, bazılarında doğrudan <input class="field">. Sarmalayıcı
   kuralı bu yüzden `div.field`/`label.field` ile sınırlandı — düz `.field`
   olsaydı girdiye de `display: grid` uygulanırdı. */

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

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

.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;
}

.hint {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.field-error {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--hata);
}

.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, .15);
}

.stars {
    color: var(--accent);
}

.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: 600;
    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, açıklama) --- */

.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;
}

/* --- 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: .9;
}

.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, .5);
    border-radius: var(--btn-radius);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
}

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

/* ==========================================================================
   10) TEMANIN KENDİ DÜĞMESİ
   --------------------------------------------------------------------------
   `.brk-btn` çekirdek `.btn` ile BİRLİKTE yazılır (class="brk-btn btn"):
   taban görünüm .btn'den gelir, Bereket'e özgü ölçüler buradan. Bu blok
   DOSYANIN SONUNDA durmak ZORUNDA — 2. bölümde dursaydı eşit belirginlikteki
   `.btn` kuralları onu ezerdi ve hap düğme dolu kiremit bir dikdörtgene
   dönerdi (ölçüldü).
   ========================================================================== */

/* --- temanın hap düğmesi ---
   ÖLÇÜ: yarıçap 40px, dolgu 10px 15px, harf aralığı 1px, 1px kenar,
   16px/400. Referansın "Choose options" düğmesinden okundu. */
.brk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid var(--title);
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--title);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.4;
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

.brk-btn:hover {
    background: var(--title);
    color: #fff;
    border-color: var(--title);
    text-decoration: none;
}

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

.brk-btn--dolu:hover {
    background: #a83409;
    border-color: #a83409;
    color: #fff;
}

.brk-btn--beyaz {
    background: #fff;
    border-color: #fff;
    color: var(--title);
}

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

/* ==========================================================================
   11) DUYARLILIK
   --------------------------------------------------------------------------
   Altı kolonluk ızgara dar ekrana tek adımda inmez: 1280 → 5, 1080 → 4,
   900 → 3, 640 → 2. Market vitrininde kolon sayısını erken düşürmek kartı
   gereksiz büyütüyor ve ekranda üç ürün kalıyordu.
   ========================================================================== */

@media (max-width: 1280px) {
    .brk-izgara {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

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

    /* 2×2 kutu kolonu kahramanın ALTINA tam genişlik dört kutu olarak iner. */
    .brk-kutular {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }

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

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

    .brk-alt__marka-kolon {
        grid-column: 1 / -1;
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }
}

/* ÖLÇÜLDÜ: 1024px'te üst katman satırı 1132px'e taşıyordu — marka + 7/24
   hattı + 443px'lik arama + BEŞ eylem aynı satıra sığmıyor. Eşik 1180px:
   ikincil eylemler ve telefon bloğu burada düşer, arama daralır. Gizlenen
   üç öğenin üçü de (telefon, favoriler/kampanyalar, karşılaştırma) mobil
   çekmecede ve alt bilgide duruyor — hiçbir yol kapanmıyor. */
@media (max-width: 1180px) {
    .brk-hat {
        display: none;
    }

    .brk-eylem__oge--kis {
        display: none;
    }

    .brk-ara {
        flex: 1 1 300px;
    }
}

@media (max-width: 1080px) {
    /* Menü ve arama çekmeceye düşer; hamburger görünür. */
    .brk-menu {
        display: none;
    }

    .brk-burger {
        display: flex;
    }

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

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

    .brk-panel {
        min-height: 340px;
    }

    .brk-panel__metin {
        max-width: none;
        padding: 28px;
    }

    /* Reyon bloğu üç satıra iner: afiş üstte tam genişlik, ürünler ortada,
       kategori paneli altta. */
    .brk-reyon {
        grid-template-columns: minmax(0, 1fr);
    }

    .brk-reyon__afis {
        min-height: 180px;
    }

    .brk-urun-sayfa,
    .brk-bilgi__ic {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .brk-satin {
        position: static;
    }

    .brk-hizmet__ic {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- çekirdek düzenler --- */
    .listlayout,
    .cartlayout,
    .checkout,
    .acclayout {
        grid-template-columns: 1fr;
    }

    .filters {
        position: static;
    }
}

@media (max-width: 900px) {
    /* 900px altında üst katmandaki arama gizleniyor; aramanın TEK yolu mobil
       çekmecedeki formdur (bkz. header.blade.php). */
    .brk-ara {
        display: none;
    }

    .brk-eylem__yazi {
        /* Etiket GÖRSEL OLARAK gizlenir ama DOM'da KALIR: adsız düğme
           oluşmasın (WCAG 4.1.2). */
        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;
    }

    /* Kargo eşiği şeridi de dar ekranda gizlenir (390px'te 188px yer kaplıyor
       ve şeridi taşırıyordu). Aynı vaat ana sayfada kahraman panelinde ve ürün
       sayfasında `.brk-guven` listesinde YAZILI KALIYOR — bilgi kaybolmuyor,
       yalnız başlıktan çıkıyor. */
    .brk-serit__kargo {
        display: none;
    }

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

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

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

    .brk-galeri__serit {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        order: 2;
    }

    .brk-galeri__kucuk {
        width: 78px;
        flex: 0 0 auto;
    }
}

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

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

    .brk-kutular {
        grid-template-columns: repeat(2, 1fr);
    }

    .brk-hizmet__ic {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .brk-reyonlar__izgara {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .brk-bolum,
    .section {
        padding-block: 28px;
    }

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

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

    .ikili {
        grid-template-columns: 1fr;
    }

    .brk-cubuk {
        /* Dar ekranda çubuk yapışkan DEĞİL: altı denetim iki satıra taşıyor ve
           yapışkan bir blok ekranın üçte birini kaplıyordu (ölçüldü). */
        position: static;
    }
}

@media (max-width: 560px) {
    .brk-marka {
        font-size: 1.125rem;
    }

    .brk-marka__isaret {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .brk-tepe__ic {
        gap: 10px;
        min-height: 72px;
    }
}

@media (max-width: 420px) {
    .brk-en,
    .container {
        padding-inline: 16px;
    }

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

    .brk-satin__fiyat strong {
        font-size: 1.625rem;
    }
}

/* Dokunmatik cihazda kart gölgesi ANLAMSIZ: fare yok, :hover hiç
   tetiklenmiyor ya da tıklamada takılı kalıyor. */
@media (hover: none) {
    .brk-urun:hover {
        box-shadow: none;
        border-color: var(--border);
    }

    .brk-kutu:hover img {
        transform: none;
    }
}