/* ==========================================================================
   MAYA — FIRIN VE PASTANE TEMASI · TAM STİL DOSYASI
   ==========================================================================

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

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

   TEMANIN GÖRSEL İMZASI (CSS tarafında nerede yaşıyor):
     • YATAY ÜRÜN KARTI ......... 5) bölüm, `.may-satir` üç sütunlu ızgara
     • ORTALANMIŞ İKİ KATMAN BAŞLIK  3) bölüm, `.may-ust__sira` 1fr auto 1fr
     • TAŞAN İKİ FOTOĞRAF KOLAJI  4) bölüm, `.may-kolaj` üst üste binen ızgara
     • ÜÇ ADIMLI SÜREÇ .......... 4) bölüm, `.may-adim`
     • ÜÇ SÜTUNLU KÜNYE BANDI ... 9) bölüm, `.may-bant`
     • TEK KOLON SONUÇ LİSTESİ .. 7) bölüm, `.may-liste-duzen`

   KONTRAST (WCAG bağıl parlaklık; sayfa zemini #fdf8f0, kart zemini #fff):
     --title  #35251a → 13,88:1 · 14,68:1      (gövde eşiği 4,5:1)
     --text   #55402f →  9,19:1 ·  9,72:1
     --muted  #7a6350 →  5,33:1 ·  5,63:1
     --accent #a55f22 →  4,66:1 ·  4,93:1
     --primary #8c3a1e →  7,25:1 ·  7,67:1   (üstünde beyaz 7,67:1)
     --control-border #8d7a63 → 3,90:1        (WCAG 1.4.11 eşiği 3:1)
   ACCENT SINIRI: bal tonu METİN olarak yalnızca #fdf8f0, #ffffff ve
   --yuzey (#faf4ea, 4,51:1) üstünde kullanılır. Daha koyu pastellerde 4,5'in
   ALTINA iniyor; oralarda --title / --text kullanılır. Bu yüzden pastel
   kategori kutularında bal tonu metin YOKTUR.
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile BİREBİR) --- */
    --primary: #8c3a1e;
    --accent: #a55f22;
    --title: #35251a;
    --text: #55402f;
    --page-bg: #fdf8f0;
    --card-bg: #ffffff;
    --border: #f0e3d0;
    --radius: 12px;
    --card-radius: 18px;
    --btn-radius: 999px;
    --font-scale: 1.02;
    --container: 1200px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #7a6350;
    /* 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: #8d7a63;

    --yuzey: #faf4ea;
    --yuzey-koyu: #f4e9da;

    /* Pastel kategori tonları. Dördü de --title ile ≥ 12:1, --text ile ≥ 8:1
       veriyor (ölçüldü). Kategoriye veriden renk ATANMAZ; ton yalnızca sıraya
       göre döner, yani renk hiçbir bilgi taşımaz — taşısaydı renk körü
       ziyaretçi o bilgiyi kaybederdi. */
    --pastel-1: #f8ead9;
    --pastel-2: #eff0e4;
    --pastel-3: #f9e9e2;
    --pastel-4: #f3ecdd;

    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;

    --primary-koyu: #73301a;  /* :hover — üstünde beyaz 9,69:1 */
    --accent-koyu: #8a4c1c;   /* :hover — üstünde beyaz 6,71:1 */

    --golge-kart: 0 1px 2px rgba(53, 37, 26, .04), 0 8px 22px rgba(53, 37, 26, .06);
    --golge-panel: 0 14px 44px rgba(53, 37, 26, .14);
    --gecis: .18s ease;

    --baslik-yazi: 'Lora', Georgia, 'Times New Roman', serif;
    --govde-yazi: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    /* Galeri küçük resimleri ÇAPADIR (#may-foto-N); yumuşak kaydırma o
       geçişin nereye gittiğini görünür kılıyor. */
    scroll-behavior: smooth;
}

/* HAREKET AZALTMA: vestibüler duyarlılığı olan ziyaretçi için animasyon ve
   yumuşak kaydırma kapanır. Çapa hâlâ çalışır, yalnız anında atlar. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

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

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

img {
    height: auto;
}

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

h1 { font-size: calc(2.4rem * var(--font-scale)); }
h2 { font-size: calc(1.8rem * var(--font-scale)); }
h3 { font-size: calc(1.25rem * var(--font-scale)); }
h4 { font-size: calc(1.0625rem * var(--font-scale)); }

p {
    margin: 0 0 1em;
}

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

a:hover {
    text-decoration: underline;
}

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

li {
    list-style: none;
}

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

button {
    cursor: pointer;
}

/* ODAK HALKASI: klavye kullanıcısı nerede olduğunu GÖRMELİ. Fare tıklamasında
   çıkmasın diye :focus değil :focus-visible. Kiremit yerine bal tonu: koyu
   düğme zemininde kiremit halka görünmüyordu. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Ekran okuyucuya görünür, göze görünmez. Odaklanılabilir bir öğeye
   verilmemeli — bu sınıf yalnız metin içindir. */
.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;
}

/* FİYATLAR: tablo rakamı + kırılmaz. Yatay kartta bütün fiyatlar aynı
   sütunda alt alta duruyor; oransal rakamlarda basamaklar kaymış görünüyordu. */
.may-satir__fiyat strong,
.may-fiyat__tutar,
.may-bant__dokum dd,
.summary__row,
.cartitem__total,
.pcard__price strong,
.pagination a,
.pagination span {
    font-variant-numeric: tabular-nums;
}

.may-satir__fiyat strong,
.may-fiyat__tutar,
.cartitem__total,
.pcard__price strong {
    white-space: nowrap;
}

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

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

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

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

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

/* Bölüm başlığı: SERİF, altında ince bal rengi kısa çizgi. Çizgi tek başına
   anlam taşımaz, yalnız başlığın altını imzalar. */
.may-bolum__ust {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.may-bolum__ust--orta {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.may-bolum__baslik {
    position: relative;
    margin: 0 0 12px;
    padding-bottom: 12px;
    font-size: calc(1.7rem * var(--font-scale));
}

.may-bolum__baslik::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
}

.may-bolum__ust--orta .may-bolum__baslik::after {
    left: 50%;
    transform: translateX(-50%);
}

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

.may-bolum__bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--accent);
}

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

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

/* ==========================================================================
   3) BAŞLIK — İKİ KATMAN, HER İKİSİ DE ORTALANMIŞ
   --------------------------------------------------------------------------
   1. katman `.may-serit`  : ince bilgi şeridi (kargo eşiği + telefon)
   2. katman `.may-ust`    : ORTADA serif kelime markası, sağ üstte arama,
                             ALTINDA ortalanmış yatay menü
   Marka gerçekten ortalansın diye ana satır ÜÇ SÜTUNLU ızgaradır
   (1fr auto 1fr): sol ve sağ sütun eşit esner, orta sütun içeriği kadar yer
   kaplar. `margin: auto` ile ortalamak sağdaki üç öğe yüzünden markayı sola
   kaydırıyordu.
   ========================================================================== */

.may-serit {
    background: var(--primary);
    color: #fff;
    font-size: .8125rem;
}

.may-serit__sira {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 8px;
}

.may-serit__tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.may-ust {
    position: relative;
    z-index: 40;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.may-ust__sira {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding-block: 18px 14px;
}

.may-ust__yan {
    display: flex;
    align-items: center;
    gap: 8px;
}

.may-ust__yan--sag {
    justify-content: flex-end;
}

/* --- kelime markası: serif, harf aralıklı, ORTADA --- */

.may-marka {
    display: block;
    text-align: center;
}

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

.may-marka__ad {
    display: block;
    font-family: var(--baslik-yazi);
    font-size: calc(2rem * var(--font-scale));
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .14em;
    color: var(--title);
    /* Harf aralığı sağa boşluk bırakıyor; sola aynı kadar kaydırılmazsa
       ortalanmış metin GÖZLE sola kaymış görünüyor. */
    text-indent: .14em;
}

.may-marka__alt {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    letter-spacing: .16em;
    color: var(--muted);
    text-indent: .16em;
}

/* --- sağ üst: küçük yuvarlak arama --- */

.may-arama {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 14px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.may-arama__alan {
    width: 168px;
    padding: 6px 0;
    background: none;
    border: 0;
    font-size: .875rem;
    color: var(--text);
}

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

.may-arama__alan:focus {
    outline: none;
}

/* Odak halkası ALANIN değil, KABIN üstünde: alanın kenarlığı yok, halka
   yuvarlak kabı çevrelemeli. */
.may-arama:focus-within {
    border-color: var(--control-border);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.may-arama__gonder {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    background: var(--primary);
    border: 0;
    border-radius: 999px;
    color: #fff;
}

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

/* --- ikon düğmeleri (hesap, sepet, mobil menü) --- */

.may-ikon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--title);
}

.may-ikon-btn:hover {
    background: var(--yuzey);
    border-color: var(--border);
    text-decoration: none;
}

.may-sayac {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}

/* Mobil menü düğmesi masaüstünde yok; 1024px altında görünür (13. bölüm). */
.may-burger {
    display: none;
}

/* --- ikinci satır: ORTALANMIŞ yatay menü --- */

.may-menu {
    border-top: 1px solid var(--border);
    background: var(--card-bg);
}

.may-menu__sira {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-block: 12px;
}

.may-menu__bag {
    position: relative;
    display: inline-block;
    padding-block: 2px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--title);
}

.may-menu__bag::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--gecis);
}

.may-menu__bag:hover {
    text-decoration: none;
}

.may-menu__bag:hover::after,
.may-menu__bag[aria-current='page']::after {
    transform: scaleX(1);
}

/* Etkin sayfa YALNIZ çizgiyle işaretlenmez (renk/çizgi tek başına anlam
   taşımasın): aria-current="page" ekran okuyucuya da söyler. */
.may-menu__bag[aria-current='page'] {
    color: var(--primary);
}

/* --- mobil çekmece: js/shop.js `.is-open` sınıfını takıyor --- */

.may-mobil {
    display: none;
    padding-block: 12px 20px;
}

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

.may-mobil > a,
.may-mobil summary {
    display: block;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--title);
}

.may-mobil details a {
    display: block;
    padding: 9px 4px 9px 18px;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
    color: var(--text);
}

.may-mobil summary {
    cursor: pointer;
    font-weight: 600;
}

.may-mobil__arama {
    margin-bottom: 12px;
}

.may-mobil__arama .may-arama__alan {
    width: 100%;
}

/* ==========================================================================
   4) ANA SAYFA
   --------------------------------------------------------------------------
   4a) Kahraman + TAŞAN İKİ FOTOĞRAF KOLAJI
   4b) Üç adımlı süreç
   4c) Pastel kategori kutuları
   4d) SSS
   ========================================================================== */

/* --- 4a) kahraman --- */

.may-kahraman {
    background: linear-gradient(180deg, var(--yuzey) 0%, var(--page-bg) 100%);
    border-bottom: 1px solid var(--border);
}

.may-kahraman__ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
    padding-block: 64px 72px;
}

.may-rozet {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
}

.may-kahraman__baslik {
    margin: 0 0 18px;
    font-size: calc(3rem * var(--font-scale));
    line-height: 1.08;
}

.may-kahraman__baslik span {
    display: block;
    margin-top: 10px;
    font-family: var(--govde-yazi);
    font-size: calc(1.0625rem * var(--font-scale));
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--muted);
}

.may-kahraman__giris {
    max-width: 46ch;
    margin-bottom: 26px;
    font-size: 1.0625rem;
}

.may-kahraman__eylem {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.may-guven {
    display: grid;
    gap: 10px;
}

.may-guven li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9375rem;
}

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

/* KOLAJ — ÜST ÜSTE BİNEN İKİ FOTOĞRAF.
   Mutlak konumlandırma YOK: iki fotoğraf da aynı ızgaranın hücrelerine
   yerleşiyor ve hücreleri ÇAKIŞIYOR. Böylece kap yüksekliği kendiliğinden
   doğru oluyor; mutlak konumda kapsayıcının yüksekliği 0 kalıp altındaki
   bölüm yukarı biniyordu. 900px altında ızgara tek kolona düşer ve taşma
   kendiliğinden kalkar (13. bölüm). */
.may-kolaj {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    aspect-ratio: 4 / 3;
}

.may-kolaj figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--yuzey-koyu);
}

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

.may-kolaj__buyuk {
    grid-column: 2 / 7;
    grid-row: 1 / 6;
    box-shadow: var(--golge-kart);
}

/* KÜÇÜK KARE BÜYÜĞÜN SOL ALT KÖŞESİNE TAŞAR. Beyaz çerçeve iki fotoğrafın
   sınırını ayırıyor — çerçevesiz hâlde iki kahverengi sahne birbirine
   karışıyordu. */
.may-kolaj__kucuk {
    grid-column: 1 / 4;
    grid-row: 4 / 7;
    z-index: 2;
    border: 6px solid var(--card-bg);
    box-shadow: var(--golge-panel);
}

/* --- 4b) ÜÇ ADIMLI SÜREÇ ---
   <ol> kullanılıyor: adımların sırası GERÇEKTEN anlamlı. Numara CSS sayacıyla
   değil, görünür metinle basılıyor — stil dosyası yüklenmese bile sıra okunur
   kalsın diye. */

.may-surec {
    background: var(--yuzey);
    border-block: 1px solid var(--border);
    padding-block: 60px;
}

.may-adim {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    counter-reset: none;
}

.may-adim__oge {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.may-adim__no {
    position: absolute;
    top: -16px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: #fff;
    border: 3px solid var(--yuzey);
    border-radius: 999px;
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 600;
}

.may-adim__gorsel {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--yuzey-koyu);
}

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

.may-adim__metin h3 {
    margin-bottom: 6px;
}

.may-adim__metin p {
    margin: 0;
    font-size: .9375rem;
    color: var(--muted);
}

/* --- 4c) PASTEL KATEGORİ KUTULARI ---
   Ton yalnızca SIRAYA göre döner; veriden renk atanmaz. Renk hiçbir bilgi
   taşımıyor, yalnız kutuları birbirinden ayırıyor. */

.may-kategori {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.may-kategori__oge {
    display: grid;
    gap: 6px;
    height: 100%;
    padding: 22px 20px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    color: var(--title);
    transition: transform var(--gecis), box-shadow var(--gecis);
}

.may-kategori li:nth-child(4n + 1) .may-kategori__oge { background: var(--pastel-1); }
.may-kategori li:nth-child(4n + 2) .may-kategori__oge { background: var(--pastel-2); }
.may-kategori li:nth-child(4n + 3) .may-kategori__oge { background: var(--pastel-3); }
.may-kategori li:nth-child(4n + 4) .may-kategori__oge { background: var(--pastel-4); }

.may-kategori__oge:hover {
    transform: translateY(-2px);
    box-shadow: var(--golge-kart);
    text-decoration: none;
}

.may-kategori__resim {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 6px;
}

.may-kategori__ad {
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--title);
}

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

/* --- 4d) SSS: solda fotoğraf, sağda açılır sorular --- */

.may-sss {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 44px;
    align-items: start;
}

.may-sss__gorsel {
    margin: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--yuzey-koyu);
}

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

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

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

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

/* Varsayılan üçgen işaretçi kaldırılıp yerine ikon konuyor; iki işaretçi
   birden görünmesin. */
.may-acilir__bas::-webkit-details-marker {
    display: none;
}

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

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

.may-acilir__govde {
    padding: 0 18px 16px;
    font-size: .9375rem;
    color: var(--text);
}

/* ==========================================================================
   5) YATAY ÜRÜN KARTI — TEMANIN İMZASI
   --------------------------------------------------------------------------
   [ 140px kare foto ] [ marka · ad · özellik · fiyat ] [ stok · SEPETE EKLE ]

   Kardeş temaların hepsinde kart DİKEY kutudur ve ızgaraya dizilir. Burada
   kart bir SATIRDIR, liste TEK KOLONDUR: fırın katalogunda ürün adları uzun
   ve birbirine benzer ("ekşi maya çavdar somun 750 gr"); dikey ızgarada bu ad
   sarıp kırpılıyor, gramaj fiyatla eşleşmiyordu. Yatay satırda ad tek satırda
   okunur ve FİYAT SÜTUNU BÜTÜN SATIRLARDA AYNI HİZADADIR.
   ========================================================================== */

.may-liste {
    display: grid;
    gap: 14px;
}

.may-satir {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.may-satir:hover {
    border-color: var(--yuzey-koyu);
    box-shadow: var(--golge-kart);
}

/* --- sol: 140px kare fotoğraf --- */

.may-satir__gorsel {
    position: relative;
    display: block;
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--yuzey);
}

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

/* Fotoğrafı olmayan ürün: boş gri kutu yerine adın baş harfi (serif). */
.may-satir__bos {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--baslik-yazi);
    font-size: 2.4rem;
    color: var(--muted);
    background: var(--yuzey-koyu);
}

.may-satir__isaret {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    gap: 5px;
    justify-items: start;
}

/* --- orta: bilgi --- */

.may-satir__bilgi {
    display: grid;
    gap: 4px;
    min-width: 0;
}

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

.may-satir__ad {
    margin: 0;
    font-size: calc(1.125rem * var(--font-scale));
    font-weight: 600;
    line-height: 1.3;
}

.may-satir__ad a {
    color: var(--title);
}

.may-satir__ad a:hover {
    color: var(--primary);
}

/* Özellik satırı: özellik listesinin İLK maddesi (gramaj, içerik, üretim
   notu). Veri yoksa Blade tarafında satır HİÇ basılmıyor — burada bir
   "boş hâl" görünümü tanımlanmasının anlamı yok. */
.may-satir__ozellik {
    margin: 0;
    font-size: .875rem;
    color: var(--muted);
}

.may-satir__puan {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.may-satir__puan-adet {
    color: var(--muted);
}

.may-yildiz {
    color: var(--accent);
    letter-spacing: .06em;
}

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

.may-satir__fiyat strong {
    font-family: var(--baslik-yazi);
    font-size: calc(1.3rem * var(--font-scale));
    font-weight: 600;
    color: var(--title);
}

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

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

/* --- sağ uç: stok + sepet --- */

.may-satir__sag {
    display: grid;
    gap: 8px;
    justify-items: stretch;
    align-content: center;
    min-width: 170px;
    text-align: center;
}

.may-satir__stok {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
}

.may-satir__sag form {
    margin: 0;
}

.may-satir__sag .may-btn {
    width: 100%;
}

.may-satir__mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.may-fav-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

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

.may-fav-btn.is-secili {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* --- etiketler --- */

.may-etiket {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.5;
}

.may-etiket--indirim {
    background: var(--primary);
    color: #fff;
}

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

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

.may-etiket--onay {
    background: #e8f0e9;
    color: var(--basari);
}

/* ==========================================================================
   6) DÜĞMELER (temanın kendi `.may-btn` ailesi)
   --------------------------------------------------------------------------
   --btn-radius 999px: hap biçimi. Fırın vitrinin yuvarlak hatları temanın
   bütün kenarlarında tekrar ediyor.
   ========================================================================== */

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

.may-btn:hover {
    background: var(--primary-koyu);
    border-color: var(--primary-koyu);
    text-decoration: none;
}

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

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

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

.may-btn--bal {
    background: var(--accent);
    border-color: var(--accent);
}

.may-btn--bal:hover {
    background: var(--accent-koyu);
    border-color: var(--accent-koyu);
}

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

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

.may-btn--tam,
.may-btn--genis {
    width: 100%;
}

/* Metin düğmesi: form gönderen ama düğme gibi görünmeyen eylemler
   (favori, "sepete ekle ve sepete git"). ALTI ÇİZİLİ — rengi tek başına
   "bu tıklanabilir" demiyor. */
.may-btn--metin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    background: none;
    border: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.may-btn--metin:hover {
    color: var(--accent-koyu);
}

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

/* ==========================================================================
   7) LİSTE SAYFASI — SOLDA KALICI SÜZGEÇ (240px), SAĞDA TEK KOLON LİSTE
   ========================================================================== */

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

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

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

.may-liste-basi {
    padding-block: 8px 24px;
}

.may-liste-basi h1 {
    margin-bottom: 8px;
}

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

.may-liste-duzen {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 48px;
}

/* --- sol kolon --- */

.may-suzgec {
    position: sticky;
    top: 20px;
}

/* "Ürünlere geç" — YALNIZ DAR EKRANDA görünür (13. bölüm). Masaüstünde
   süzgeç 240px'lik kolonda durur, ürünler zaten aynı ekrandadır; orada bu
   bağlantı gereksiz bir sekme durağı olurdu, o yüzden `display: none`
   (görsel gizleme DEĞİL — gizli kalıp odak alan bir bağlantı tuzaktır). */
.may-suzgec__atla {
    display: none;
}

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

/* Masaüstünde <summary> GİZLİ: kolon zaten açık duruyor, açma düğmesi
   gereksiz bir tık olurdu. 1024px altında geri gelir (13. bölüm).
   `display: none` yerine görsel gizleme KULLANILMIYOR: gizlenen summary
   klavye odağı alırdı ve kullanıcı görünmez bir düğmeye takılırdı. */
.may-suzgec__ac {
    display: none;
}

/* Arama artık AYRI bir form (süzgeç formu `q`'yu okumayan adrese gidiyordu,
   bkz. category.blade.php). Bloklar arası boşluğu `.may-suzgec__form`'un
   `gap` değeri veriyordu; dışarı çıkan blok kendi alt boşluğunu taşımalı. */
.may-suzgec__ara {
    display: grid;
    gap: 8px;
    justify-items: start;
    margin-bottom: 20px;
}

.may-suzgec__ara .may-alan {
    width: 100%;
}

.may-suzgec__form {
    display: grid;
    gap: 20px;
}

.may-suzgec__baslik {
    margin: 0 0 8px;
    font-family: var(--baslik-yazi);
    font-size: .875rem;
    font-weight: 600;
    color: var(--title);
}

.may-suzgec__liste {
    display: grid;
    gap: 6px;
    font-size: .9375rem;
}

.may-suzgec__liste ul {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    font-size: .875rem;
}

.may-suzgec__liste a {
    color: var(--text);
}

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

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

/* Etkin kategori: kalın + kiremit + `aria-current` (üçü birlikte; renk tek
   başına anlam taşımasın). */
.may-suzgec__liste a[aria-current='page'] {
    font-weight: 700;
    color: var(--primary);
}

.may-suzgec__onaylar {
    display: grid;
    gap: 7px;
    max-height: 240px;
    overflow-y: auto;
}

.may-suzgec__dip {
    display: grid;
    gap: 8px;
}

/* --- sağ kolon --- */

.may-sonuc {
    min-width: 0;
}

.may-sonuc__serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 18px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.may-sonuc__sayi {
    margin: 0;
    font-size: .9375rem;
    color: var(--muted);
}

.may-sonuc__sayi strong {
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.may-sonuc__sirala {
    display: flex;
    align-items: center;
    gap: 8px;
}

.may-sonuc__sirala select {
    width: auto;
    min-width: 180px;
    padding-block: 8px;
}

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

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

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

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

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

.may-alan input,
.may-alan select,
.may-alan textarea,
.field input,
.field select,
.field textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='date'],
select,
textarea {
    width: 100%;
    padding: 10px 13px;
    background: var(--card-bg);
    /* --control-border SABİT 3:1 üstü. --border burada KULLANILMAZ: o
       dekoratif çizgi rengidir ve panelden 1,2:1'e kadar açılabiliyor. */
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--text);
}

/* BAŞLIKTAKİ YUVARLAK ARAMA KABI BU KURALIN DIŞINDA: kenarlık ve zemin
   alanın değil, KABIN üstünde (odak halkası da öyle). Genişlik burada
   yeniden yazılmak ZORUNDA: yukarıdaki `input[type='search']` seçicisi
   (0,1,1) 3. bölümdeki `.may-arama__alan` kuralından (0,1,0) daha güçlü ve
   alanı %100'e çekip düğmeyi kabın dışına itiyordu. */
.may-arama .may-arama__alan {
    width: 168px;
    padding: 6px 0;
    border: 0;
    background: none;
    border-radius: 0;
}

/* Mobil çekmecedeki arama tam genişlik. Aynı özgüllükte ve DAHA SONRA
   geldiği için yukarıdaki 168px'i ezer. */
.may-mobil__arama .may-arama__alan {
    width: 100%;
}

textarea {
    resize: vertical;
}

.may-ikili-alan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.may-ikili-alan .may-alan {
    margin-bottom: 0;
}

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

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

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

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

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

/* ==========================================================================
   9) ÜRÜN SAYFASI — solda galeri, sağda satın alma, ALTINDA KÜNYE BANDI
   ========================================================================== */

.may-detay {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding-block: 12px 40px;
}

/* --- galeri: büyük kare + ALTINDA küçük şerit ---
   Büyük alan yatay `scroll-snap` şerididir; küçük resimler `#may-foto-N`
   ÇAPALARIDIR. JavaScript gerekmez, dokunmatikte parmakla da kayar. */

.may-galeri__sahne {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--card-radius);
    background: var(--yuzey);
    border: 1px solid var(--border);
}

.may-galeri__kare {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

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

.may-galeri__kare--bos {
    display: grid;
    place-items: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    color: var(--muted);
}

.may-galeri__kare--bos span {
    font-family: var(--baslik-yazi);
    font-size: 4rem;
}

.may-galeri__kare--bos figcaption {
    font-size: .875rem;
}

.may-galeri__serit {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

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

.may-galeri__kucuk:hover {
    border-color: var(--primary);
}

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

/* --- satın alma kolonu --- */

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

.may-satin__ad {
    margin: 0 0 10px;
    font-size: calc(2.1rem * var(--font-scale));
}

.may-satin__puan {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: .875rem;
}

.may-satin__ozet {
    max-width: 56ch;
    margin-bottom: 20px;
    color: var(--text);
}

.may-fiyat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

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

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

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

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

.may-stok {
    margin: 14px 0;
    font-size: .9375rem;
    font-weight: 600;
}

/* --- varyant seçimi --- */

.may-secim {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.may-secim__ad {
    padding: 0;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--title);
}

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

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

/* RADYO DÜĞMESİ GÖRÜNÜR KALIR — bilerek. Onu gizleyip seçimi yalnızca
   `:has(input:checked)` ile boyamak, `:has()` desteklemeyen bir tarayıcıda
   ZERO GERİ BİLDİRİM bırakıyor: ziyaretçi hangi gramajı seçtiğini göremiyor
   ve bu SESSİZ bir arıza (hata yok, uyarı yok, yanlış varyant sepete gider).
   Görünür radyo her koşulda çalışır; aşağıdaki kural yalnızca bir GELİŞTİRME. */
.may-secim__oge input {
    accent-color: var(--primary);
}

/* Seçili hâl üç işaretle anlatılıyor (renk TEK BAŞINA anlam taşımasın):
   koyu kenarlık + açık zemin + KALIN yazı. Zemin --yuzey-koyu; üstünde
   --title 12,24:1. */
.may-secim__oge:has(input:checked) {
    background: var(--yuzey-koyu);
    border-color: var(--primary);
    font-weight: 700;
}

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

/* --- adet + sepete ekle --- */

.may-adet-sira {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 8px 12px;
}

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

.may-adet button {
    width: 40px;
    height: 46px;
    background: var(--card-bg);
    border: 0;
    font-size: 1.125rem;
    color: var(--title);
}

.may-adet button:hover:not(:disabled) {
    background: var(--yuzey);
}

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

.may-adet input {
    width: 56px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--card-bg);
}

.may-satin__yan-eylem {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.may-satin__yan-eylem form {
    margin: 0;
}

/* --- ÜÇ SÜTUNLU KÜNYE BANDI (imza) ---
   İçerik / saklama / tazelik yan yana. Boş sütun Blade tarafında hiç
   basılmıyor; kaç sütun basıldığı `.may-bant--1/2/3` sınıfıyla BURAYA
   BİLDİRİLİYOR.

   NİÇİN `auto-fit` DEĞİL — ÖLÇÜLDÜ, SATIŞ SAYFASINI ÇİRKİNLEŞTİRİYORDU:
   `repeat(auto-fit, minmax(240px, 1fr))` 1150px'lik kapta DÖRT iz açar, boş
   izleri söndürür ve ayakta kalan TEK sütunu 1150px'e yayar (canlı ölçüm:
   grid-template-columns → "1150px 0px 0px 0px"). Demo üründe yalnız "İçerik
   ve ölçü" sütunu doluydu ve "Net ağırlık" etiketiyle "3 kg" değeri arasında
   bir ekran boyu boşluk kalıyordu. Sütun sayısı sunucuda zaten bilindiği için
   izler AÇIKÇA yazılıyor; `:has()` desteğine bağlı kalınmıyor. */

.may-bant {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: 40px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

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

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

/* TEK SÜTUN KALDIĞINDA: sütun kabın tamamını kaplar ama DÖKÜM içeride kendi
   sütunlarına ayrılır — etiketle değer yan yana kalır, arada ekran boyu
   boşluk oluşmaz. Kesikli ayraç çizgileri burada kalkıyor: yan yana duran
   satırlarda çizgiler sütunları değil, hayalî bir tabloyu çiziyordu. */
/* `auto-fill`, `auto-fit` DEĞİL: auto-fit boş izleri söndürüp kalan iki
   satırı 532px'e yayıyordu (ölçüldü) — düzeltilmek istenen kusurun aynısı bir
   kat içeride. auto-fill izleri ayakta tutar, satırlar 210-230px'te kalır. */
.may-bant--1 .may-bant__dokum {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px 36px;
}

.may-bant--1 .may-bant__dokum > div {
    padding-bottom: 0;
    border-bottom: 0;
}

.may-bant__sutun {
    padding: 22px 24px;
    border-left: 1px solid var(--border);
}

/* İlk sütunun sol çizgisi kabın kenarlığıyla çakışırdı. */
.may-bant__sutun:first-child {
    border-left: 0;
}

.may-bant__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--title);
}

.may-bant__baslik svg {
    color: var(--accent);
}

.may-bant__dokum {
    display: grid;
    gap: 9px;
    margin: 0;
}

.may-bant__dokum > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

.may-bant__dokum > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.may-bant__dokum dt {
    font-size: .8125rem;
    color: var(--muted);
}

.may-bant__dokum dd {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--title);
    text-align: right;
}

/* --- ardışık bilgi bölümleri --- */

.may-bilgi {
    display: grid;
    gap: 36px;
    padding-bottom: 20px;
}

.may-bilgi__blok h2 {
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--yuzey-koyu);
    font-size: calc(1.4rem * var(--font-scale));
}

.may-yazi {
    max-width: 72ch;
}

.may-madde {
    display: grid;
    gap: 7px;
    max-width: 72ch;
    margin-top: 16px;
}

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

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

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

.may-yorum {
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

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

.may-yorum__kisi {
    font-weight: 700;
    color: var(--title);
}

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

.may-yorum p:last-child {
    margin-bottom: 0;
}

.may-yorum-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    margin-top: 24px;
    padding: 22px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

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

/* ==========================================================================
   10) ALT BİLGİ — ORTALANMIŞ HİZMET ŞERİDİ + DÖRT KOLON
   ========================================================================== */

.may-alt {
    margin-top: 60px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
}

.may-hizmet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-block: 32px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.may-hizmet li {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.may-hizmet svg {
    color: var(--accent);
}

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

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

.may-alt__sira {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding-block: 44px;
}

.may-alt__marka {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--title);
}

.may-alt__metin {
    max-width: 44ch;
    font-size: .875rem;
    color: var(--muted);
}

.may-alt__baslik {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--title);
}

.may-alt__kolon ul {
    display: grid;
    gap: 8px;
}

.may-alt__kolon a {
    font-size: .875rem;
    color: var(--text);
}

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

.may-sosyal {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

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

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

.may-alt__dip {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 20px;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    color: var(--muted);
}

/* ==========================================================================
   11) REKLAM YUVASI
   --------------------------------------------------------------------------
   Yuva her zaman ürün listesinin DIŞINDA duruyor (Blade tarafında da öyle):
   `may-liste` içinde bir <li> olsaydı reklam bir ürün satırı gibi okunurdu ve
   bu AdSense'in "içerik gibi görünen yerleşim" yasağına girer.
   ========================================================================== */

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

.may-reklam-alan--liste {
    padding-block: 0 20px;
}

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

/* ==========================================================================
   12) ÇEKİRDEK SINIFLARIN MAYA DİLİNDE YENİDEN ÇİZİMİ
   --------------------------------------------------------------------------
   Tema `shop.css` yüklemediği için, tema EZMEDİĞİ görünümlerde (sepet, ödeme,
   hesabım, blog, kampanyalar, koleksiyonlar, karşılaştırma, statik sayfalar)
   çekirdek sınıf adları YALNIZCA 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
   ve bu hata sessizdir (log yok, uyarı yok).
   ========================================================================== */

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

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

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

.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 16px;
    font-size: .8125rem;
}

.btn--lg {
    padding: 14px 28px;
    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-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
}

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

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

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

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

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

/* --- rozetler ve durum metinleri ---
   Rozet rengi TEK BAŞINA anlam taşımaz: çekirdek görünümlerde rozetin içinde
   her zaman metin vardır ("Kargolandı", "İptal"). --- */

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    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: #e8f0e9;
    color: var(--basari);
}

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

.badge--danger {
    background: #f8e8e5;
    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 17px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--muted);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: .9375rem;
}

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

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

.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: 22px;
}

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

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

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

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

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

.statcard strong,
.statcard b {
    font-family: var(--baslik-yazi);
    font-variant-numeric: tabular-nums;
    color: var(--title);
}

/* ADIM ÇUBUĞU (sepet → teslimat/ödeme → onay). YATAY BİR ŞERİTTİR, dikey
   liste DEĞİL: çekirdek sepet/ödeme/onay sayfaları üç adımı yan yana basıyor
   ve `.is-active` ile o anki adımı işaretliyor. Adım numaralarının HEPSİNİ
   koyu boyamak (kolay hata) etkin adımı görünmez kılar — bu yüzden varsayılan
   numara AÇIK yüzey, yalnız etkin olan kiremittir. Etkin adım ayrıca KALIN
   yazılır: renk tek başına anlam taşımasın. */
.steps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

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

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

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

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

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

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

/* SEÇİM KARTI (ödeme yöntemi, teslimat slotu, abonelik sıklığı).
   `.radio-card` bir <label>'dir ve içinde radyo düğmesi VARDIR; radyo görünür
   bırakılıyor ki `:has()` desteklenmeyen bir tarayıcıda da hangi seçeneğin
   işaretli olduğu görülsün (ödeme adımında bu sessiz bir arıza olurdu). */
.radio-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.radio-card input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: 0 0 20px;
    accent-color: var(--primary);
}

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

.radio-card strong {
    display: block;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    color: var(--title);
}

.radio-card span {
    font-size: .8125rem;
    color: var(--muted);
}

/* Tutar satırın SAĞ UCUNA itilir; ödeme ekranında bütün tutarlar aynı
   hizada okunsun. */
.radio-card__price {
    margin-left: auto;
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

/* Sipariş sonucu / abonelik onayı ekranındaki büyük onay dairesi. */
.success-box__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: #e8f0e9;
    color: var(--basari);
}

/* --- ÇEKİRDEK ürün kartı (tema ezmediği yerlerde: koleksiyon sayfası,
       karşılaştırma, kombin bloğu). Bu kart DİKEYDİR ve öyle kalmalı:
       o görünümler kartı ızgaraya diziyor; yatay satıra çevirmek onların
       ızgarasını bozardı. Temanın kendi yatay kartı `.may-satir`dır. --- */

.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: 1 / 1;
    object-fit: cover;
}

.pcard__flags {
    position: absolute;
    top: 10px;
    left: 10px;
    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, .93);
    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: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--muted);
}

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

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

.pcard__stars {
    color: 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.2rem;
    font-weight: 600;
    color: var(--title);
}

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

/* --- çekirdek liste düzeni (tema ezmediği listeler: arama sonucu, marka,
       koleksiyon) --- */

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

/* Süzgeçsiz liste (bayi başvurusu gibi): tek kolon. */
.listlayout--tek {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

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

.filters__title {
    font-family: var(--baslik-yazi);
    font-size: .875rem;
    font-weight: 600;
    color: var(--title);
    margin-bottom: 8px;
}

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

/* Etkin süzgeç bağlantısı: renk + KALINLIK birlikte (renk tek başına
   anlam taşımasın). */
.filters__list a.is-active {
    color: var(--primary);
    font-weight: 700;
}

.listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 18px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.breadcrumb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 20px 6px;
    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: 36px;
}

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

.pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
    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 13px;
    border-radius: var(--btn-radius);
    font-size: .9375rem;
    color: var(--text);
}

/* Çekirdek hesap menüsü etkin bağlantıyı iki farklı biçimde işaretliyor
   (`aria-current` ve `.is-active`); ikisi de yakalanır, yoksa hesabım
   ekranında hangi sayfada olunduğu görünmez olur. */
.accnav a:hover,
.accnav a[aria-current='page'],
.accnav a.is-active {
    background: var(--yuzey);
    color: var(--title);
    font-weight: 600;
    text-decoration: none;
}

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

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

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

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

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

.cartitem__right {
    text-align: right;
}

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

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

.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,
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}

/* Adres defterindeki kart ızgarası: satırlar arasında da boşluk ister. */
.addr-grid--bosluklu {
    gap: 16px;
    margin-bottom: 24px;
}

/* --- adet kutusu (çekirdek sepet satırı) --- */

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

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

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

.stars {
    color: 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 13px;
    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;
    color: var(--title);
    background: var(--yuzey);
}

.responsive {
    max-width: 100%;
}

/* --- sekmeler ---
   Bu tema ürün sayfasını EZDİĞİ için kendi ürün sayfasında sekme yoktur.
   Sekme ve galeri sınıfları yine de çiziliyor: tema dosyası bir gün
   kaldırılır ya da adı değişirse `shop/product.blade.php` ÇEKİRDEKTEN
   çözülür ama sayfa hâlâ BU stil dosyasını yükler (düzen dosyası ayrı bir
   ezmedir). O durumda sekmeler ve küçük resimler stilsiz kalır — küçük
   resimler `width`/`height` niteliği yüzünden ekranı dolduran devasa
   görsellere döner. Ucuz sigorta. --- */

.tabs {
    margin-top: 48px;
}

.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: 700;
    color: var(--muted);
}

/* Çekirdek sekme düğmesi etkin hâli İKİ ADLA işaretliyor
   (`aria-selected` ve `.is-active`); ikisi de yakalanmazsa etkin sekme
   diğerlerinden ayırt edilemez. */
.tabs__btn[aria-selected='true'],
.tabs__btn.is-active {
    color: var(--title);
    border-bottom-color: var(--accent);
}

.tabs__panel[hidden] {
    display: none;
}

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

/* --- ÇEKİRDEK GALERİ (aynı sigorta; yukarıdaki nota bakınız) --- */

.gallery__main img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--card-radius);
    background: var(--yuzey);
}

.gallery__thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.gallery__thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

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

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

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

.prose {
    max-width: 72ch;
}

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

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

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

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

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

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

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

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

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

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

/* Seçili durum YALNIZ renkle anlatılmaz: çekirdek parça aria-pressed ile
   durumu ekran okuyucuya da söylüyor. */
.krs-ekle__btn[aria-pressed='true'] {
    background: var(--yuzey);
    border-color: var(--primary);
    color: var(--primary);
}

.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(--primary);
    color: #fff;
    font-size: .875rem;
}

/* min-width:0 ZORUNLU: esnek kutu çocuğu varsayılan olarak içeriğinden
   daha dar olamaz ve uzun tema adı çubuğu ekrandan taşırıyordu. */
.tema-onizleme__metin {
    min-width: 0;
}

.tema-onizleme__ayrinti {
    opacity: .92;
}

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

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

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

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

@media (max-width: 1180px) {
    .may-detay {
        gap: 32px;
    }

    .may-alt__sira {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    /* Ortalanmış menü şeridi dar ekranda satır satır sarıyordu; tek gezinme
       yolu mobil çekmece olur. */
    .may-menu {
        display: none;
    }

    .may-burger {
        display: grid;
    }

    .may-kahraman__ic {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-block: 44px 52px;
    }

    /* KOLAJ TEK KOLONDA YAN YANA İKİ KAREYE DÖNER: taşma kalkar. Üst üste
       binme dar ekranda küçük fotoğrafı büyüğün yarısını kapatır hâle
       getiriyordu. */
    .may-kolaj {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: auto;
        aspect-ratio: auto;
        gap: 12px;
    }

    .may-kolaj__buyuk,
    .may-kolaj__kucuk {
        grid-column: auto;
        grid-row: auto;
    }

    .may-kolaj__kucuk {
        border: 0;
        box-shadow: var(--golge-kart);
        /* Dar hücre 4/3 oranında daha alçak kalıyor; ortalanınca iki kare
           kasıtlı bir kolaj gibi okunuyor, tepeye yapışınca altında
           açıklanamayan bir boşluk varmış gibi duruyordu. */
        align-self: center;
    }

    /* ORANI FOTOĞRAFA DEĞİL KUTUYA VERİYORUZ — ÖLÇÜLEN KUSUR.
       Önceki hâlde oran `img` üstündeydi: iki hücre farklı genişlikte
       (1.4fr / 1fr) olduğu için iki fotoğraf farklı yükseklikte çıkıyor,
       satırı geniş olan belirliyor ve DAR olan `figure` esneyip altında
       çıplak bir zemin şeridi bırakıyordu (390px'te ölçüldü: sağdaki kutunun
       alt ~28px'i boş kalıyordu). Oran kutuda, fotoğraf kutuyu `cover` ile
       dolduruyor: iki kare de tepeden tırnağa fotoğraf. */
    .may-kolaj figure {
        aspect-ratio: 4 / 3;
    }

    .may-kolaj img {
        aspect-ratio: auto;
        height: 100%;
    }

    .may-adim {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .may-sss {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .may-sss__gorsel img {
        aspect-ratio: 16 / 9;
    }

    /* SÜZGEÇ KOLONU KATLANIR KUTUYA DÖNER: <summary> geri gelir, panel
       tam genişlik olur ve yapışkanlık kalkar. */
    .may-liste-duzen {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .may-suzgec {
        position: static;
    }

    /* Panel dar ekranda AÇIK açılıyor (bkz. category.blade.php) ve 1400px'i
       aşabiliyor. Bu bağlantı ziyaretçiyi tek dokunuşla sonuç listesine
       indirir; süzgeci kapatmak zorunda kalmaz. */
    .may-suzgec__atla {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 10px;
        padding: 8px 16px;
        background: var(--yuzey);
        border: 1px solid var(--control-border);
        border-radius: var(--btn-radius);
        color: var(--title);
        font-size: .875rem;
        font-weight: 600;
    }

    .may-suzgec__atla:hover {
        background: var(--yuzey-koyu);
        text-decoration: none;
    }

    .may-suzgec__ac {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-family: var(--baslik-yazi);
        font-weight: 600;
        color: var(--title);
        list-style: none;
    }

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

    .may-suzgec__kutu[open] .may-suzgec__ac {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

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

    .may-suzgec__dip {
        grid-column: 1 / -1;
        grid-auto-flow: column;
        justify-content: start;
    }

    .may-detay {
        grid-template-columns: 1fr;
    }

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

    .filters {
        position: static;
    }
}

@media (max-width: 900px) {
    /* Arama ana satırdan düşer; tek yolu mobil çekmecedeki formdur. */
    .may-ust__yan--sag > .may-arama {
        display: none;
    }

    .may-marka__ad {
        font-size: calc(1.6rem * var(--font-scale));
    }
}

@media (max-width: 760px) {
    .may-bolum,
    .section {
        padding-block: 40px;
    }

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

    .may-hizmet,
    .may-alt__sira,
    .statcards--3,
    .pgrid--3,
    .pgrid--4 {
        grid-template-columns: 1fr;
    }

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

    /* YATAY KART DAR EKRANDA: fotoğraf küçülür, satın alma sütunu ALTA iner
       ve sola hizalanır. Kart hâlâ YATAYDIR (foto solda, bilgi sağda) —
       dikey kutuya dönüşmez, imza korunur. */
    .may-satir {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .may-satir__gorsel {
        width: 96px;
        height: 96px;
    }

    .may-satir__sag {
        grid-column: 1 / -1;
        grid-auto-flow: column;
        justify-content: start;
        align-items: center;
        gap: 12px;
        min-width: 0;
        text-align: left;
        padding-top: 12px;
        border-top: 1px dashed var(--border);
    }

    .may-satir__sag .may-btn {
        width: auto;
    }

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

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

    /* Bant TEK KOLONA iner. İzler artık açıkça yazıldığı için (auto-fit
       kaldırıldı, bkz. 9. bölüm) daralmayı bu kural yapmak ZORUNDA: aksi
       hâlde üç sütun 390px'te 119px'lik şeritlere sıkışırdı. */
    .may-bant,
    .may-bant--2,
    .may-bant--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .may-bant__sutun {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .may-bant__sutun:first-child {
        border-top: 0;
    }
}

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

    .may-serit__sira {
        justify-content: center;
        text-align: center;
    }

    .may-suzgec__form {
        grid-template-columns: 1fr;
    }

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

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

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

    .may-satir__sag {
        grid-auto-flow: row;
        justify-items: stretch;
    }

    .may-satir__mini {
        justify-content: flex-start;
    }
}

/* Yazdırma: gezinme, süzgeç ve satın alma denetimleri kâğıda basılmaz —
   basılan sayfa bir SİPARİŞ ya da ÜRÜN künyesi olarak okunmalı. */
@media print {
    .may-serit,
    .may-ust,
    .may-menu,
    .may-suzgec,
    .may-alt,
    .may-reklam-alan,
    .may-adet-sira,
    .tema-onizleme {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .may-satir,
    .may-bant {
        break-inside: avoid;
    }
}