/* ==========================================================================
   NORDIKA — MOBİLYA 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/nordika/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) sayfanın
   stilsiz kalmamasının tek sebebi bu bölümdür.

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

   KONTRAST (WCAG bağıl parlaklık, #fbfaf8 zemin üstünde):
     --title #23211e 15,39:1 · --text #4c4842 8,70:1 · --muted #75706a 4,70:1
     --accent #96613c 4,94:1 · --primary #2f2c28 13,32:1 (üstünde beyaz 13,89:1)
     --control-border #8b857c 3,50:1 (WCAG 1.4.11 eşiği 3:1)
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #2f2c28;
    --accent: #96613c;
    --title: #23211e;
    --text: #4c4842;
    --page-bg: #fbfaf8;
    --card-bg: #ffffff;
    --border: #e6e1d9;
    --radius: 10px;
    --card-radius: 16px;
    --btn-radius: 8px;
    --font-scale: 1;
    --container: 1280px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #6d6862;
    /* 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: #8b857c;
    --yuzey: #f4f1ec;
    --yuzey-koyu: #ede8e0;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;
    --golge-kart: 0 1px 2px rgba(35, 33, 30, .04), 0 6px 18px rgba(35, 33, 30, .06);
    --golge-panel: 0 12px 40px rgba(35, 33, 30, .13);
    --gecis: .18s ease;
    --baslik-yazi: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    /* Çapa ile gezilen galeri ve bölümler başlığın altında kalması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);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.6;
    -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: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--title);
}

h1 { font-size: calc(2.25rem * var(--font-scale)); }
h2 { font-size: calc(1.75rem * 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örmeli. Fare tıklamasında
   görünmesin diye :focus değil :focus-visible. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    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) KAPSAYICI VE BÖLÜM
   ========================================================================== */

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

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

.nrd-bolum,
.section {
    padding-block: 64px;
}

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

.nrd-bolum__ust {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.nrd-bolum__baslik {
    margin: 0;
    font-size: calc(1.6rem * var(--font-scale));
}

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

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

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

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

/* ==========================================================================
   3) BAŞLIK — 1) ince koyu bilgi şeridi
   ========================================================================== */

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

.nrd-serit__sira {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    flex-wrap: wrap;
}

.nrd-serit__baglar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.nrd-serit a {
    color: #ded8cf;
}

.nrd-serit a:hover {
    color: #fff;
}

/* --- 2) beyaz ana satır: marka | menü | arama + ikonlar --- */

.nrd-ust {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.nrd-ust__sira {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 76px;
}

.nrd-marka {
    display: grid;
    gap: 1px;
    flex: 0 0 auto;
}

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

.nrd-marka__ad {
    font-family: var(--baslik-yazi);
    font-size: calc(1.375rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--title);
}

.nrd-marka__alt {
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: none;
    color: var(--muted);
}

.nrd-menu {
    flex: 1 1 auto;
}

.nrd-menu__sira {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.nrd-menu__bag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--title);
    white-space: nowrap;
}

.nrd-menu__bag:hover {
    background: var(--yuzey);
    text-decoration: none;
}

.nrd-menu__bag[aria-current='page'] {
    color: var(--accent);
}

/* --- kategori paneli: <details>, JavaScript yok --- */

.nrd-katalog {
    position: relative;
}

.nrd-katalog__ac {
    list-style: none;
    cursor: pointer;
}

.nrd-katalog__ac::-webkit-details-marker {
    display: none;
}

.nrd-katalog__ac svg {
    transition: transform var(--gecis);
}

.nrd-katalog[open] .nrd-katalog__ac svg {
    transform: rotate(180deg);
}

.nrd-katalog__panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    transform: translateX(-50%);
    width: 100vw;
    max-width: var(--container);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--golge-panel);
    z-index: 50;
}

.nrd-katalog__ic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px 32px;
    padding-block: 28px;
}

.nrd-katalog__kolon {
    display: grid;
    align-content: start;
    gap: 6px;
}

.nrd-katalog__kok {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--title);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.nrd-katalog__alt {
    font-size: .9375rem;
    color: var(--text);
}

.nrd-katalog__alt:hover {
    color: var(--accent);
}

/* --- arama: GÖRÜNÜR, ikonun arkasına saklanmaz --- */

.nrd-eylem {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.nrd-arama {
    display: flex;
    align-items: center;
    width: 260px;
    background: var(--yuzey);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: border-color var(--gecis), background var(--gecis);
}

.nrd-arama:focus-within {
    background: var(--card-bg);
    border-color: var(--control-border);
}

.nrd-arama__alan {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 4px 10px 18px;
    background: transparent;
    border: 0;
    font-size: .9375rem;
}

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

.nrd-arama__gonder {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 2px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--title);
}

.nrd-arama__gonder:hover {
    background: var(--yuzey-koyu);
}

.nrd-ikon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--title);
}

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

.nrd-sayac {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nrd-burger {
    display: none;
}

/* --- mobil çekmece (public/js/shop.js `#mobile-menu` arıyor) --- */

.nrd-mobil {
    display: none;
    padding-block: 12px 20px;
    border-top: 1px solid var(--border);
}

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

.nrd-mobil > a,
.nrd-mobil summary {
    display: block;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--title);
    cursor: pointer;
}

.nrd-mobil details a {
    display: block;
    padding: 10px 2px 10px 18px;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--text);
}

.nrd-mobil__arama {
    width: 100%;
    margin-bottom: 12px;
    background: var(--yuzey);
}

/* ==========================================================================
   4) ANA SAYFA — bölünmüş kahraman
   ========================================================================== */

.nrd-kahraman {
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}

.nrd-kahraman__ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
    padding-block: 72px;
    /* Ortadaki dikey ayraç: sözde öğe değil, kolonun kendi kenarlığı. */
    position: relative;
}

.nrd-kahraman__ic::before {
    content: '';
    position: absolute;
    left: calc(50% - 28px);
    top: 72px;
    bottom: 72px;
    width: 1px;
    background: var(--border);
}

.nrd-rozet {
    display: inline-block;
    margin: 0 0 20px;
    padding: 6px 14px;
    background: var(--yuzey);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--accent);
}

.nrd-kahraman__baslik {
    margin: 0 0 18px;
    font-size: calc(3rem * var(--font-scale));
    font-weight: 400;
    line-height: 1.06;
}

.nrd-kahraman__baslik span {
    display: block;
    margin-top: 10px;
    font-size: calc(1.25rem * var(--font-scale));
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--muted);
}

.nrd-kahraman__giris {
    max-width: 46ch;
    margin-bottom: 28px;
    font-size: calc(1.0625rem * var(--font-scale));
}

.nrd-kahraman__eylem {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

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

.nrd-guven li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9375rem;
    color: var(--text);
}

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

.nrd-kahraman__gorsel {
    margin: 0;
}

.nrd-kahraman__gorsel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--card-radius);
}

/* --- kategori ızgarası --- */

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

.nrd-kategori__oge {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis);
}

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

.nrd-kategori__resim {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Görseli olmayan kategori: boş gri kutu yerine iri baş harf. */
.nrd-kategori__harf {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    background: var(--yuzey);
    font-family: var(--baslik-yazi);
    font-size: 3rem;
    font-weight: 300;
    color: var(--accent);
}

.nrd-kategori__ad {
    display: block;
    padding: 16px 18px 18px;
    font-family: var(--baslik-yazi);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--title);
}

.nrd-kategori__alt {
    display: block;
    margin-top: 5px;
    font-family: var(--govde-yazi);
    font-size: .8125rem;
    font-weight: 400;
    color: var(--muted);
}

/* --- ürün ızgarası --- */

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

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

/* --- malzeme şeridi --- */

.nrd-malzeme {
    background: var(--yuzey);
    border-block: 1px solid var(--border);
}

.nrd-malzeme__ic {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    padding-block: 72px;
}

.nrd-malzeme__gorsel {
    margin: 0;
}

.nrd-malzeme__gorsel img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--card-radius);
}

.nrd-malzeme__gorsel figcaption {
    margin-top: 10px;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: none;
    color: var(--muted);
}

.nrd-malzeme__metin {
    text-align: center;
}

.nrd-malzeme__metin h2 {
    font-size: calc(2rem * var(--font-scale));
}

.nrd-malzeme__metin p {
    margin-inline: auto;
    max-width: 52ch;
}

/* --- açılır-kapanır (SSS) --- */

.nrd-acilir-grup {
    display: grid;
    gap: 12px;
}

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

.nrd-acilir__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-family: var(--baslik-yazi);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--title);
    cursor: pointer;
    list-style: none;
}

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

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

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

.nrd-acilir__govde {
    padding: 0 20px 18px;
    color: var(--text);
}

/* ==========================================================================
   5) ÜRÜN KARTI
   ========================================================================== */

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

.nrd-urun:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-kart);
}

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

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

.nrd-urun__bos {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    font-family: var(--baslik-yazi);
    font-size: 3rem;
    font-weight: 300;
    color: var(--muted);
}

.nrd-urun__isaret {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.nrd-urun__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

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

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

.nrd-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 12px;
    flex: 1 1 auto;
}

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

.nrd-urun__ad {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}

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

/* Özellik satırı: ürünün özellik listesindeki İLK madde (ölçü/malzeme). */
.nrd-urun__ozellik {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
    /* Uzun ölçü metni kartı üç satıra çıkarmasın. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nrd-urun__puan {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

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

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

.nrd-urun__fiyat del {
    font-size: .875rem;
    color: var(--muted);
    white-space: nowrap;
}

.nrd-urun__birim,
.nrd-urun__stok {
    margin: 0;
    font-size: .8125rem;
}

.nrd-urun__dip {
    display: grid;
    gap: 8px;
    padding: 0 18px 18px;
}

/* --- etiketler --- */

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

.nrd-etiket--indirim {
    background: var(--accent);
    color: #fff;
}

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

.nrd-etiket--bitti {
    background: var(--yuzey-koyu);
    color: var(--muted);
}

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

.nrd-yildiz {
    color: #c8963f;
    letter-spacing: .05em;
}

/* ==========================================================================
   6) DÜĞMELER
   ========================================================================== */

.nrd-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;
    text-align: center;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}

.nrd-btn:hover {
    background: #46413a;
    border-color: #46413a;
    text-decoration: none;
}

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

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

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

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

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

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

.nrd-btn--metin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    background: none;
    border: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

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

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

/* ==========================================================================
   7) LİSTE SAYFASI
   ========================================================================== */

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

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

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

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

.nrd-liste-basi h1 {
    margin-bottom: 8px;
    font-size: calc(2rem * var(--font-scale));
}

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

.nrd-suzgec {
    margin-bottom: 28px;
}

.nrd-suzgec__serit {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.nrd-suzgec__kutu {
    /* Panel bu kutunun içinden tam genişlikte açılır. */
    order: 1;
}

.nrd-suzgec__ac {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--title);
    cursor: pointer;
    list-style: none;
}

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

.nrd-suzgec__ac:hover {
    background: var(--yuzey);
}

/* Etkin süzgeç işareti: renk TEK BAŞINA anlam taşımasın diye yanında
   ekran okuyucuya görünen "(etkin süzgeç var)" metni de basılıyor. */
.nrd-suzgec__isaret {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.nrd-suzgec__panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 32px;
    margin-top: 14px;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--golge-kart);
}

.nrd-suzgec__baslik {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--title);
}

.nrd-suzgec__liste {
    display: grid;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    font-size: .9375rem;
}

.nrd-suzgec__liste ul {
    display: grid;
    gap: 4px;
    margin: 4px 0 8px 14px;
    font-size: .875rem;
    color: var(--muted);
}

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

.nrd-suzgec__liste a[aria-current='page'] {
    color: var(--accent);
    font-weight: 700;
}

.nrd-suzgec__onaylar {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.nrd-suzgec__dip {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.nrd-suzgec__sirala {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    order: 3;
}

.nrd-suzgec__sirala select {
    padding: 9px 12px;
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    font-size: .875rem;
}

.nrd-liste-sayi {
    order: 2;
    margin: 0;
    font-size: .875rem;
    color: var(--muted);
}

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

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

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

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

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

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

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

textarea {
    resize: vertical;
}

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

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

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

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

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

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

/* ==========================================================================
   9) ÜRÜN SAYFASI — solda yapışkan galeri, sağda akan içerik
   ========================================================================== */

.nrd-detay {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding-block: 8px 56px;
}

.nrd-galeri {
    position: sticky;
    /* Yapışkan başlık 76px + şerit 38px; 24px nefes payı. */
    top: 138px;
    display: grid;
    gap: 12px;
}

/*
 * Büyük alan yatay bir scroll-snap şerididir; küçük resimler bu şeridin
 * içindeki `#nrd-foto-N` çapalarına gider. JavaScript YOK.
 */
.nrd-galeri__sahne {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    border-radius: var(--card-radius);
    background: var(--yuzey);
}

.nrd-galeri__kare {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    /* Çapa tıklaması sayfayı başlığın altına hizalasın. */
    scroll-margin-top: 150px;
}

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

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

.nrd-galeri__kare--bos span {
    font-family: var(--baslik-yazi);
    font-size: 5rem;
    font-weight: 300;
}

.nrd-galeri__kare--bos figcaption {
    font-size: .8125rem;
}

.nrd-galeri__serit {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.nrd-galeri__kucuk {
    display: block;
    width: 84px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

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

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

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

.nrd-satin__marka {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--accent);
}

.nrd-satin__ad {
    margin: 0 0 10px;
    font-size: calc(2rem * var(--font-scale));
    font-weight: 400;
}

.nrd-satin__kod {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: .8125rem;
    color: var(--muted);
}

.nrd-satin__ozet {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.nrd-fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 18px;
}

.nrd-fiyat__tutar {
    font-family: var(--baslik-yazi);
    font-size: calc(2rem * var(--font-scale));
    font-weight: 600;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.nrd-fiyat__kdv {
    flex-basis: 100%;
    font-size: .8125rem;
    color: var(--muted);
}

.nrd-secim {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.nrd-secim__ad {
    padding: 0;
    margin-bottom: 8px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--title);
}

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

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

.nrd-secim__oge:has(input:checked) {
    border-color: var(--title);
    background: var(--yuzey);
    font-weight: 600;
}

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

.nrd-boya {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .15);
}

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

.nrd-adet-sira {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

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

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

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

.nrd-adet input {
    width: 62px;
    padding: 11px 6px;
    border: 0;
    border-inline: 1px solid var(--control-border);
    border-radius: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.nrd-satin__yan-eylem {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: 14px;
    border-top: 1px solid var(--border);
}

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

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

.nrd-bilgi {
    display: grid;
    gap: 40px;
    padding-block: 40px;
    border-top: 1px solid var(--border);
}

.nrd-bilgi__blok h2 {
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    font-size: calc(1.375rem * var(--font-scale));
}

.nrd-dokum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 32px;
    margin: 0 0 20px;
}

.nrd-dokum > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.nrd-dokum dt {
    color: var(--muted);
    font-size: .875rem;
}

.nrd-dokum dd {
    margin: 0;
    font-weight: 600;
    color: var(--title);
    font-size: .9375rem;
    text-align: right;
}

.nrd-madde {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.nrd-madde li {
    position: relative;
    padding-left: 20px;
}

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

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

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

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

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

.nrd-yorum-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

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

/* ==========================================================================
   10) ALT BİLGİ
   ========================================================================== */

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

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

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

.nrd-hizmet svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--accent);
}

.nrd-hizmet strong {
    display: block;
    font-family: var(--baslik-yazi);
    font-weight: 500;
    color: var(--title);
}

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

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

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

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

.nrd-alt__baslik {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--title);
}

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

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

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

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

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

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

.nrd-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
   ========================================================================== */

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

.nrd-reklam-alan--liste {
    padding-block: 0 24px;
}

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

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

/* --- düğmeler: çekirdek adları, 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: #46413a;
    border-color: #46413a;
    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: #7d5031;
    border-color: #7d5031;
}

.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: 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: #e4efe8;
    color: var(--basari);
}

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

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

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

.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: #f1f7f3;
}

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

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

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

.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(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: #c8963f;
}

.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,
.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: #c8963f;
}

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

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

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

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

@media (max-width: 1024px) {
    .nrd-menu {
        display: none;
    }

    .nrd-burger {
        display: grid;
    }

    .nrd-kahraman__ic {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-block: 48px;
    }

    .nrd-kahraman__ic::before {
        display: none;
    }

    .nrd-malzeme__ic {
        grid-template-columns: 1fr;
        padding-block: 48px;
    }

    /* Yapışkan galeri tek kolonda anlamsız: sayfa akışına döner. */
    .nrd-detay {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nrd-galeri {
        position: static;
    }

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

    .filters {
        position: static;
    }

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

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

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

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

    .nrd-bolum,
    .section {
        padding-block: 44px;
    }

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

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

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

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

    .nrd-katalog__panel {
        display: none;
    }
}

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

    .nrd-izgara,
    .nrd-izgara--liste,
    .pgrid,
    .pgrid--3,
    .pgrid--4,
    .ikili {
        grid-template-columns: 1fr;
    }

    .nrd-suzgec__panel {
        grid-template-columns: 1fr;
    }

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

/* Yazdırma: gezinme, süzgeç ve satın alma denetimleri kâğıda basılmaz. */
@media print {
    .nrd-serit,
    .nrd-ust,
    .nrd-suzgec,
    .nrd-alt,
    .nrd-reklam-alan,
    .tema-onizleme {
        display: none !important;
    }

    body {
        background: #fff;
    }
}