/* ==========================================================================
   NADİDE — KADIN GİYİM VE MODA TEMASI
   --------------------------------------------------------------------------
   TAM stil dosyası. `public/css/shop.css` bu tema etkinken YÜKLENMEZ; kendi
   sıfırlaması, kendi ızgarası ve 12. bölümde çekirdek sınıfların Nadide
   dilinde yeniden çizimi burada.

   KAYNAK FİŞ: resources/themes/referans/fis-2026-09-07.md → FİŞ 2
     kapsayıcı 1440 (1400/1300 kademeleri) · ızgara 4 kolon/30px oluk
     kart 327,5×536,5 · görsel 1:1,3 · gövde DM Sans 16/25,6
     kahraman 88/700 · DEV KELİME 200/240 w700 BÜYÜK HARF
     ara başlık 50/700 · bölüm 42/700 · ürün adı 16/700 · menü 16/700
     başlık TEK KATMAN 121px SAYDAM

   TASARIM İLKESİ: yarıçap SIFIR; yuvarlaklık yalnız ikon (50%) ve rozette
   (999px) ve ikisi de bileşen düzeyinde verilir, belirteçten DEĞİL.
   ========================================================================== */

/* ==========================================================================
   1) SIFIRLAMA, BELİRTEÇLER, HAREKET
   ========================================================================== */

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

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #111111;
    --accent: #8c6a3f;
    --title: #0d0d0d;
    --text: #4a4741;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e2ded6;
    --radius: 0px;
    --card-radius: 0px;
    --btn-radius: 0px;
    --font-scale: 1;
    --container: 1290px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #6f6b64;
    /*
     * Form denetimi kenarlığı erişilebilirlik için SABİT ve --border ile
     * karıştırılmaz: --border yalnız dekoratif çizgidir ve panelden
     * istenildiği kadar açık yapılabilir, bu ise 3:1'in altına inemez.
     */
    --control-border: #86827b;
    --yuzey: #f4f2ee;
    --yuzey-koyu: #eae6de;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;
    --gecis: .18s ease;
    /* İKİ AİLE: başlık geometrik (Outfit), gövde nötr (Manrope). */
    --baslik-yazi: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fişten gelen ölçüler; tek yerden değişebilsin diye belirteç. */
    --ndd-oluk: 24px;
    --ndd-kolon: 4;
    --ndd-basYuk: 80px;
    /* Fotoğrafın kart kenarından içeri çekilme payı — temanın imzası. */
    --ndd-kart-ici: 15px;
}

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

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--govde-yazi);
    /* ÖLÇÜ: gövde 16/25,89 → 1,618. */
    font-size: calc(1rem * var(--font-scale));
    line-height: 1.618;
    -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--baslik-yazi);
    color: var(--title);
    /* ÖLÇÜ: bütün başlıklar w700 — referans tek ağırlıkla çalışıyor. */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

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

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

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

/*
 * HAREKET DUYARLILIĞI: kayan şeritler durur. Sürekli hareket eden bir şerit,
 * hareket duyarlılığı olan ziyaretçi için okunamaz bir sayfa demektir.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   2) KAPSAYICI VE BÖLÜM
   --------------------------------------------------------------------------
   ÜÇ KADEME (fiş): 1440 dış, 1400 orta, 1300 dar içerik. Kademeler süs
   değil — dev kelime bandı 1440'ta kenarlara dayanırken okunan metin 1300'de
   kalır ve satır uzunluğu kontrolden çıkmaz.
   ========================================================================== */

.ndd-kap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 30px;
}

.ndd-kap--dar {
    max-width: 1300px;
}

.ndd-bolum {
    padding-block: 88px;
}

.ndd-bolum--dar {
    padding-block: 52px;
}

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

/* Bölüm başlığı: ÖLÇÜ 42px/700, ORTALI. */
.ndd-bolum-bas {
    margin-bottom: 44px;
    text-align: center;
}

.ndd-bolum-bas h2 {
    font-size: clamp(1.625rem, calc(1.05rem + 1.9vw), calc(2.625rem * var(--font-scale)));
    font-weight: 700;
}

.ndd-bolum-bas p {
    margin: 14px auto 0;
    max-width: 58ch;
    color: var(--muted);
    font-size: calc(1rem * var(--font-scale));
}

.ndd-tumu {
    display: inline-block;
    margin-top: 20px;
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--title);
    border-bottom: 2px solid var(--title);
    padding-bottom: 3px;
}

.ndd-tumu:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

/* ==========================================================================
   3) BAŞLIK — TEK KATMAN 80px, SAYDAM, SOLDA MARKA + SAĞDA MENÜ
   --------------------------------------------------------------------------
   AYRIŞMA: gonca da saydam AMA 121px ve marka ORTADA; kesit üç katman opak
   ve marka ortada; ipek opak; nordika iki katman ve birincisi koyu.
   80px + SOLA YASLI marka yalnız burada.

   Kahramanı olmayan sayfalarda `ndd-bas--opak` basılır (JavaScript yok).
   ========================================================================== */

.ndd-bas {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 40;
    height: var(--ndd-basYuk);
    background: transparent;
    color: #fff;
}

.ndd-bas--opak {
    position: relative;
    background: #fff;
    color: var(--title);
    border-bottom: 1px solid var(--border);
}

.ndd-bas .ndd-kap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Marka SOLDA — kardeşlerin hepsinde ortada. */
.ndd-marka {
    flex: 0 0 auto;
    font-family: var(--baslik-yazi);
    font-size: calc(1.5rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: inherit;
}

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

.ndd-bas__sag {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.ndd-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
}

.ndd-menu > li > a,
.ndd-menu > li > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px asgari dokunma hedefi (WCAG 2.5.8). */
    min-height: 44px;
    font-family: var(--baslik-yazi);
    font-size: calc(1rem * var(--font-scale));
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
}

.ndd-menu > li > a:hover,
.ndd-menu > li > summary:hover {
    color: var(--accent);
    text-decoration: none;
}

.ndd-bas:not(.ndd-bas--opak) .ndd-menu > li > a:hover,
.ndd-bas:not(.ndd-bas--opak) .ndd-menu > li > summary:hover {
    /* Saydam başlıkta aksan koyu fotoğrafta okunmaz; beyaz kalır. */
    color: #fff;
    text-decoration: underline;
}

.ndd-bas__ikonlar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ndd-panel {
    position: relative;
}

.ndd-panel > summary {
    list-style: none;
    cursor: pointer;
}

.ndd-panel > summary::-webkit-details-marker {
    display: none;
}

.ndd-panel__ok {
    width: 9px;
    height: 9px;
    transition: transform var(--gecis);
}

.ndd-panel[open] .ndd-panel__ok {
    transform: rotate(180deg);
}

.ndd-panel__ic {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    width: min(700px, 88vw);
    padding: 26px 30px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 20px 48px rgba(13, 13, 13, .12);
}

.ndd-panel__izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 26px;
    list-style: none;
}

.ndd-panel__izgara a {
    display: block;
    padding: 6px 0;
    font-size: calc(.9375rem * var(--font-scale));
    color: var(--text);
}

.ndd-panel__izgara a:hover {
    color: var(--accent);
    text-decoration: none;
}

.ndd-ikon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    /* Yarıçap 50% — sayfadaki iki yuvarlaklıktan biri, BİLEŞEN düzeyinde. */
    border-radius: 50%;
    background: transparent;
    color: inherit;
    transition: background var(--gecis);
}

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

.ndd-bas--opak .ndd-ikon:hover {
    background: var(--yuzey);
}

.ndd-ikon svg {
    width: 20px;
    height: 20px;
}

.ndd-ikon__sayi {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    /* İkinci ve son yuvarlaklık. */
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ndd-ara {
    position: relative;
}

.ndd-ara__ic {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: min(420px, 86vw);
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 20px 48px rgba(13, 13, 13, .12);
}

.ndd-ara__satir {
    display: flex;
}

.ndd-ara__satir input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--control-border);
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: var(--title);
    font: inherit;
}

.ndd-ara__satir button {
    height: 48px;
    padding: 0 20px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-family: var(--baslik-yazi);
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ndd-ara__satir button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.ndd-mobil-ac {
    display: none;
}

#mobile-menu {
    display: none;
    position: absolute;
    inset: var(--ndd-basYuk) 0 auto 0;
    z-index: 45;
    padding: 16px 0 24px;
    background: #fff;
    color: var(--title);
    border-bottom: 1px solid var(--border);
}

#mobile-menu.is-open {
    display: block;
}

#mobile-menu ul {
    list-style: none;
}

#mobile-menu a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--baslik-yazi);
    font-size: calc(1rem * var(--font-scale));
    font-weight: 500;
    color: var(--title);
}

/* ==========================================================================
   4) ANA SAYFA — 200px DEV KELİME BANDI
   --------------------------------------------------------------------------
   Temanın imzası. Tam genişlik, TEK KELİME, büyük harf, ürün rafının
   ÜSTÜNDE. Sayfada iki kez geçer ve iki farklı rafı ayırır.
   ========================================================================== */

/* Kahraman: saydam başlığın altına girer, üst dolgusu başlık yüksekliğidir. */
.ndd-hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: flex-end;
    padding-block: calc(var(--ndd-basYuk) + 40px) 72px;
    background: var(--yuzey);
    overflow: hidden;
}

.ndd-hero__gorsel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

/*
 * Metin okunurluğu: fotoğrafın üstüne alttan yukarı koyu bir perde. Kontrast
 * fotoğrafa bırakılmaz — açık bir fotoğraf geldiğinde başlık okunmaz olurdu.
 */
.ndd-hero__perde {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(19, 17, 20, .72), rgba(19, 17, 20, .18) 55%, rgba(19, 17, 20, .35));
}

.ndd-hero__ic {
    position: relative;
    z-index: 2;
    color: #fff;
}

/* ÖLÇÜ: kahraman 88px/700. */
.ndd-hero h1 {
    font-size: clamp(2.25rem, calc(1.1rem + 4.55vw), calc(5.5rem * var(--font-scale)));
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #fff;
    max-width: 18ch;
}

.ndd-hero p {
    margin: 20px 0 30px;
    max-width: 46ch;
    color: rgba(255, 255, 255, .88);
    font-size: calc(1.0625rem * var(--font-scale));
}

/*
 * HECELİ KIRILMIŞ KAMPANYA KELİMESİ — İMZA. ÖLÇÜ 180px/700.
 *
 * gonca'nın 200px'lik bandı TEK SATIR ve kırılmaz; bu İKİ SATIRA iner ve
 * kırılma noktasında tire durur. Kırılma CSS'e değil İŞARETLEMEYE bırakılır
 * (`<span>Kam-</span><span>panya</span>`) — otomatik heceleme Türkçe'de
 * tarayıcıdan tarayıcıya değişir ve ölçülemez bir düzen üretirdi.
 */
.ndd-kampanya {
    overflow: hidden;
    padding-block: 40px;
    text-align: center;
}

.ndd-kampanya b {
    display: block;
    font-family: var(--baslik-yazi);
    font-size: clamp(2.75rem, 12.5vw, calc(11.25rem * var(--font-scale)));
    line-height: .92;
    font-weight: 700;
    letter-spacing: -.04em;
    text-transform: uppercase;
    color: var(--title);
}

.ndd-kampanya em {
    display: block;
    margin-top: 22px;
    font-family: var(--baslik-yazi);
    font-style: normal;
    /* ÖLÇÜ: mevsim etiketi 32px/700 BÜYÜK HARF. */
    font-size: clamp(1.125rem, calc(.85rem + .9vw), calc(2rem * var(--font-scale)));
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
}

/*
 * ÜÇLÜ GÜVEN ŞERİDİ — ÖLÇÜ 24px/700. Teslimat / iade / güvenli ödeme.
 * Katalogda başka hiçbir temada yok. Butikte satın alma kararını ürün kadar
 * dükkânın vaadi verdirir; o vaat sayfanın ortasında durur.
 */
.ndd-guven {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--border);
}

.ndd-guven__oge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 24px;
    text-align: center;
}

.ndd-guven__oge + .ndd-guven__oge {
    border-left: 1px solid var(--border);
}

.ndd-guven__oge svg {
    width: 26px;
    height: 26px;
    color: var(--accent);
}

.ndd-guven__oge strong {
    font-family: var(--baslik-yazi);
    font-size: calc(1.5rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--title);
}

.ndd-guven__oge span {
    max-width: 34ch;
    font-size: calc(.9375rem * var(--font-scale));
    color: var(--muted);
}

/*
 * MARKA HİKÂYESİ BANDI — ÖLÇÜ 62px/700. Kuruluş yılı ve tek cümlelik vaat.
 * kesit'in 66px bandı bir CÜMLEdir ve ürünle ilgilidir; bu DÜKKÂNLA ilgili.
 */
.ndd-hikaye {
    padding-block: 96px;
    background: var(--yuzey);
    text-align: center;
}

.ndd-hikaye h2 {
    font-family: var(--baslik-yazi);
    /*
     * ÖLÇÜ: 1440px'te 62px olmalı (fiş 3). 1,1rem + 3,08vw → 17,6 + 44,4 = 62.
     * 2,9vw katsayısı 59,4px'te kalıyordu; clamp'in ORTA değeri üst sınırdan
     * önce gelir, üst sınırı yazmak yetmez (kesit ve gonca'da da ölçüldü).
     */
    font-size: clamp(1.875rem, calc(1.1rem + 3.08vw), calc(3.875rem * var(--font-scale)));
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.03em;
}

.ndd-hikaye p {
    margin: 22px auto 30px;
    max-width: 52ch;
    color: var(--muted);
    font-size: calc(1.0625rem * var(--font-scale));
}

/* Üç koleksiyon kartı: ÖLÇÜ 42px/700 */
.ndd-koleksiyon {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ndd-oluk);
}

.ndd-koleksiyon__kart {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--yuzey);
}

.ndd-koleksiyon__kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.ndd-koleksiyon__kart:hover img {
    transform: scale(1.05);
}

.ndd-koleksiyon__kart:hover {
    text-decoration: none;
}

.ndd-koleksiyon__metin {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 30px;
    background: linear-gradient(to top, rgba(19, 17, 20, .74), rgba(19, 17, 20, 0));
    color: #fff;
    text-align: center;
}

.ndd-koleksiyon__metin strong {
    display: block;
    font-family: var(--baslik-yazi);
    font-size: clamp(1.375rem, calc(.95rem + 1.4vw), calc(2.625rem * var(--font-scale)));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ndd-koleksiyon__metin span {
    display: inline-block;
    margin-top: 12px;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}

/* Ürün ızgarası: 4 kolon, OLUK 30px (imza — kesit'in 4px'inin tam tersi). */
.ndd-urunler {
    display: grid;
    grid-template-columns: repeat(var(--ndd-kolon), minmax(0, 1fr));
    gap: 46px var(--ndd-oluk);
}

/* Yatay şerit: scroll-snap, JavaScript yok. */
.ndd-serit {
    /* `position: relative` ŞART — mutlak konumlu `.visually-hidden`
       çocukları kırpılmazsa belge genişler ve sayfa yatay kayar. */
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: var(--ndd-oluk);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

.ndd-serit > * {
    scroll-snap-align: start;
}

/* İfade bandı: ÖLÇÜ 50px/700, iki sütun (metin + fotoğraf). */
.ndd-ifade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

.ndd-ifade--ters .ndd-ifade__metin {
    order: 2;
}

.ndd-ifade__gorsel {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--yuzey);
}

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

.ndd-ifade__metin h2 {
    font-size: clamp(1.625rem, calc(1.05rem + 2.2vw), calc(3.125rem * var(--font-scale)));
    line-height: 1.1;
}

.ndd-ifade__metin p {
    margin: 20px 0 28px;
    max-width: 44ch;
    color: var(--muted);
}

/* Instagram şeridi — kapanış bloğu. */
.ndd-insta {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.ndd-insta a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--yuzey);
}

.ndd-insta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--gecis);
}

.ndd-insta a:hover img {
    opacity: .78;
}

/* ==========================================================================
   5) ÜRÜN KARTI — 1:1,3 DİKEY, ÇERÇEVESİZ, ZEMİNSİZ
   --------------------------------------------------------------------------
   ÖLÇÜ: kart 327,5×536,5 · görsel 1:1,3 · ad 16px/w700 · yarıçap 0.
   AYRIŞMA: ipek 1:1,25 + r2 · meniac 3/4 · comforte 3/4 · quick 3/4 ·
   kesit 1:1 KARE · tempo 1:0,831 YATAY. 1:1,3 + zeminsiz yalnız burada.
   ========================================================================== */

/*
 * İMZA: FOTOĞRAF KARTIN KENARINA DAYANMAZ.
 * ÖLÇÜ (fiş 3): kart 282, fotoğraf 252 → iki yanda 15px iç dolgu. Kart
 * zemini fotoğrafın etrafında ince bir çerçeve gibi görünür.
 * Katalogda tek örnek: ipek, gonca, kesit, meniac ve quick'te fotoğraf kart
 * genişliğindedir.
 */
.ndd-urun {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--ndd-kart-ici);
    background: var(--card-bg);
}

.ndd-urun:hover {
    background: var(--yuzey);
}

/*
 * Medya sarmalayıcısı ŞART: kayan sepet düğmesi `bottom: 0` ile kartın
 * DİBİNE değil FOTOĞRAFIN dibine oturmalı (ipek tuzağı 1).
 */
.ndd-urun__medya {
    position: relative;
    overflow: hidden;
    background: var(--yuzey);
}

.ndd-urun__gorsel {
    display: block;
    /* ÖLÇÜ: 252×319 = 1:1,266. ipek 1:1,25, gonca 1:1,3. */
    aspect-ratio: 1 / 1.266;
}

.ndd-urun__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.ndd-urun:hover .ndd-urun__gorsel img {
    transform: scale(1.045);
}

.ndd-urun__bos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--baslik-yazi);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--muted);
}

.ndd-urun__isaret {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.ndd-etiket {
    display: inline-block;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    background: var(--primary);
}

.ndd-etiket--indirim {
    background: var(--hata);
}

.ndd-etiket--yeni {
    background: var(--accent);
}

.ndd-urun__eylem {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity var(--gecis), transform var(--gecis);
}

.ndd-urun:hover .ndd-urun__eylem,
.ndd-urun:focus-within .ndd-urun__eylem {
    opacity: 1;
    transform: none;
}

/* Dokunmatikte hover yoktur: eylemler daima görünür. */
@media (hover: none) {
    .ndd-urun__eylem {
        opacity: 1;
        transform: none;
    }
}

.ndd-urun__eylem button,
.ndd-urun__eylem a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: #fff;
    color: var(--title);
    transition: background var(--gecis), color var(--gecis);
}

.ndd-urun__eylem button:hover,
.ndd-urun__eylem a:hover {
    background: var(--primary);
    color: #fff;
    text-decoration: none;
}

.ndd-urun__eylem svg {
    width: 17px;
    height: 17px;
}

.ndd-urun__sepet {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform var(--gecis);
}

.ndd-urun:hover .ndd-urun__sepet,
.ndd-urun:focus-within .ndd-urun__sepet {
    transform: none;
}

@media (hover: none) {
    .ndd-urun__sepet {
        position: static;
        transform: none;
        width: 100%;
    }
}

.ndd-urun__sepet:hover {
    background: var(--accent);
}

/* Kart gövdesi ORTALI — kardeşlerin çoğunda sola yaslı. */
/* Gövde SOLA yaslı — gonca ortalı, kesit sola yaslı ama zeminsiz kart. */
.ndd-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0 2px;
    text-align: left;
}

.ndd-urun__ad {
    font-family: var(--govde-yazi);
    /* ÖLÇÜ: ad 15px/w400 GÖVDE ailesiyle — gonca 16/700 başlık ailesiyle. */
    font-size: calc(.9375rem * var(--font-scale));
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ndd-urun__ad:hover {
    color: var(--accent);
    text-decoration: none;
}

.ndd-urun__fiyat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: calc(1rem * var(--font-scale));
    font-weight: 500;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.ndd-urun__fiyat del {
    color: var(--muted);
    font-weight: 400;
}

.ndd-urun__yok {
    font-size: calc(.8125rem * var(--font-scale));
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ==========================================================================
   6) LİSTE SAYFASI — SOLDA KALICI 300px SÜZGEÇ KOLONU
   --------------------------------------------------------------------------
   AYRIŞMA: kesit üstte yapışkan şerit · ipek solda 260px · tempo tam
   genişlik katlanır blok · quick üstte · vast ayrı çekmeceler.
   ipek'e en yakın olan bu; ayrım kolon genişliği (300 ≠ 260), süzgeçlerin
   AÇIK gelmesi ve sonuç ızgarasının 3 kolon olmasıdır.
   ========================================================================== */

.ndd-liste-bas {
    padding-block: 56px 34px;
    text-align: center;
}

.ndd-liste-bas h1 {
    font-size: clamp(1.75rem, calc(1.1rem + 2.4vw), calc(3.25rem * var(--font-scale)));
}

.ndd-liste-bas p {
    margin: 16px auto 0;
    max-width: 62ch;
    color: var(--muted);
}

.ndd-kirinti {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    list-style: none;
    font-size: calc(.8125rem * var(--font-scale));
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.ndd-kirinti li + li::before {
    content: '/';
    margin-right: 8px;
    color: var(--border);
}

/*
 * ÜSTTE TAM GENİŞLİK KATLANIR SÜZGEÇ BLOĞU.
 * AYRIŞMA: kesit üstte yapışkan ŞERİT hapları · gonca solda 300px KALICI
 * kolon · ipek solda 260px · vast her süzgeç ayrı çekmece. Burada TEK
 * <details> bloğu tam genişlikte iner ve içinde dört kolon açılır; sonuç
 * ızgarası 4 kolondur (gonca 3).
 */
.ndd-liste {
    display: block;
}

.ndd-suzgec-blok {
    border-block: 1px solid var(--border);
    margin-bottom: 40px;
}

.ndd-suzgec-blok > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    font-family: var(--baslik-yazi);
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--title);
    cursor: pointer;
}

.ndd-suzgec-blok > summary::-webkit-details-marker {
    display: none;
}

.ndd-suzgec__ok {
    width: 11px;
    height: 11px;
    transition: transform var(--gecis);
}

.ndd-suzgec-blok[open] .ndd-suzgec__ok {
    transform: rotate(180deg);
}

.ndd-suzgec__panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 8px 0 32px;
}

.ndd-suzgec__grup > strong {
    display: block;
    margin-bottom: 12px;
    font-family: var(--baslik-yazi);
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.ndd-suzgec__grup label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: calc(.9375rem * var(--font-scale));
    color: var(--text);
    cursor: pointer;
}

.ndd-suzgec__liste {
    max-height: 220px;
    overflow-y: auto;
}

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

.ndd-suzgec__uygula {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 158px;
    min-height: 48px;
    padding: 0 34px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-family: var(--baslik-yazi);
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ndd-suzgec__uygula:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.ndd-liste-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
}

.ndd-liste-sayi {
    font-size: calc(.875rem * var(--font-scale));
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Liste ızgarası ana sayfayla AYNI: 4 kolon. gonca burada 3'e iner. */
.ndd-liste .ndd-urunler {
    --ndd-kolon: 4;
}

.ndd-bos {
    padding: 90px 0;
    text-align: center;
    color: var(--muted);
}

.ndd-bos h2 {
    margin-bottom: 14px;
    font-size: calc(1.5rem * var(--font-scale));
}

/* ==========================================================================
   7) ÜRÜN SAYFASI — SOLDA İKİLİ FOTOĞRAF IZGARASI, SAĞDA YAPIŞKAN KOLON
   --------------------------------------------------------------------------
   AYRIŞMA: kesit galeriyi ÜSTE yatay şerit yapar · nordika solda YAPIŞKAN
   galeri + sağda akan içerik · vast fotoğraflar solda AKAR + sağda yapışkan
   satın alma. Bu tema vast'a en yakın olan; ayrım fotoğrafların İKİLİ
   IZGARADA akmasıdır (vast tek kolonda alt alta dizer).
   ========================================================================== */

.ndd-urun-sayfa {
    padding-block: 40px 90px;
}

/*
 * SATIN ALMA SOLDA, FOTOĞRAFLAR SAĞDA — katalogda tek örnek.
 * vast ve gonca fotoğrafı solda akıtıp satın almayı sağda yapıştırır;
 * nordika solda YAPIŞKAN galeri kurar; kesit galeriyi üste alır.
 */
.ndd-detay {
    display: grid;
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    gap: 56px;
    align-items: start;
}

/* TEK KOLON akış — gonca ikili ızgara kurar. */
.ndd-galeri__sahne {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.ndd-galeri__kare {
    margin: 0;
    aspect-ratio: 1 / 1.3;
    overflow: hidden;
    background: var(--yuzey);
}

/* Tek fotoğraflı üründe kare daha yatay durur. */
.ndd-galeri__sahne > .ndd-galeri__kare:only-child {
    aspect-ratio: 4 / 3;
}

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

.ndd-galeri__kare--bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
}

.ndd-galeri__kare--bos span {
    font-family: var(--baslik-yazi);
    font-size: 3.5rem;
    font-weight: 700;
}

.ndd-galeri__serit {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    list-style: none;
    overflow-x: auto;
}

.ndd-galeri__kucuk {
    display: block;
    width: 84px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--yuzey);
    border: 1px solid transparent;
}

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

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

.ndd-satin {
    position: sticky;
    top: 24px;
}

.ndd-satin h1 {
    font-size: clamp(1.5rem, calc(1.05rem + 1.5vw), calc(2.25rem * var(--font-scale)));
}

.ndd-satin__marka {
    display: inline-block;
    margin-bottom: 12px;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.ndd-satin__fiyat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 20px 0 26px;
    font-size: calc(1.625rem * var(--font-scale));
    font-weight: 700;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.ndd-satin__fiyat del {
    font-size: calc(1.125rem * var(--font-scale));
    font-weight: 400;
    color: var(--muted);
}

.ndd-satin__kutu {
    padding: 26px;
    background: var(--yuzey);
}

.ndd-varyant {
    margin-bottom: 22px;
}

.ndd-varyant__baslik {
    display: block;
    margin-bottom: 10px;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.ndd-varyant__secenek {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ndd-varyant__secenek label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 46px;
    padding: 0 15px;
    border: 1px solid var(--control-border);
    background: #fff;
    font-size: calc(.9375rem * var(--font-scale));
    cursor: pointer;
    transition: border-color var(--gecis), background var(--gecis);
}

.ndd-varyant__secenek input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ndd-varyant__secenek label:has(input:checked) {
    border-color: var(--title);
    background: var(--primary);
    color: #fff;
}

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

.ndd-adet button {
    width: 46px;
    border: 0;
    background: #fff;
    color: var(--title);
    font-size: 1.125rem;
}

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

.ndd-adet input {
    width: 60px;
    border: 0;
    border-inline: 1px solid var(--control-border);
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

/* ÖLÇÜ (fiş 3): 158×48, dolgu 17px 63px, SİYAH, yarıçapsız. */
.ndd-ana-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 158px;
    min-height: 48px;
    padding: 0 34px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background var(--gecis), border-color var(--gecis);
}

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

.ndd-ana-dugme--bos {
    background: transparent;
    color: var(--title);
    border-color: var(--control-border);
}

.ndd-ana-dugme--bos:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ndd-ana-dugme[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Bilgi bölümleri: ardışık başlıklı bloklar (açılır-kapanır değil). */
.ndd-bilgi {
    margin-top: 72px;
    display: grid;
    gap: 44px;
}

.ndd-bilgi section {
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

.ndd-bilgi h2 {
    margin-bottom: 16px;
    font-size: calc(1.25rem * var(--font-scale));
}

.ndd-ozellik {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0 44px;
    list-style: none;
}

.ndd-ozellik li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: calc(.9375rem * var(--font-scale));
}

.ndd-ozellik b {
    color: var(--muted);
    font-weight: 500;
}

/* ==========================================================================
   8) ALTBİLGİ
   ========================================================================== */

.ndd-alt {
    margin-top: 110px;
    background: var(--primary);
    color: rgba(255, 255, 255, .74);
    padding-block: 76px 0;
}

/* Üst blok: marka + iletişim yan yana. Dört kolonluk liste ızgarası YOK. */
.ndd-alt__ust {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 46px;
}

.ndd-alt__marka-blok p {
    margin-top: 16px;
    max-width: 44ch;
    font-size: calc(.9375rem * var(--font-scale));
}

.ndd-alt__iletisim {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-style: normal;
    font-size: calc(.9375rem * var(--font-scale));
}

.ndd-alt__iletisim a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/*
 * TEK gezinti listesi: bağlar tek satırda akar ve sarar.
 * `column-gap` küçük, `row-gap` büyük — sarılan satırlar birbirine
 * yapışmasın ama aynı satırdaki bağlar bir arada okunsun.
 */
.ndd-alt__gezinti ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    padding-block: 30px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ndd-alt__gezinti a {
    display: inline-flex;
    align-items: center;
    /* 44px asgari hedef (WCAG 2.5.8). */
    min-height: 44px;
    font-size: calc(.9375rem * var(--font-scale));
}

.ndd-alt__serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: calc(.8125rem * var(--font-scale));
}

/* ==========================================================================
   9) FORM ALANLARI
   --------------------------------------------------------------------------
   BU BÖLÜM ATLANMAZ. ipek.css'te `.field` ve girdi stilleri HİÇ YOKTU; blok
   ondan türetilen bereket de aynı açıkla doğdu ve her form sayfasında
   girdiler tarayıcı varsayılanıyla çizildi.
   ========================================================================== */

.field {
    display: block;
    margin-bottom: 18px;
}

.field > label,
.field-label,
label.field-label {
    display: block;
    margin-bottom: 8px;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--title);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='date'],
select,
textarea,
.input,
.form-control {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--control-border);
    border-radius: 0;
    background: #fff;
    color: var(--title);
    font: inherit;
    font-size: calc(.9375rem * var(--font-scale));
    transition: border-color var(--gecis);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--title) 50%),
        linear-gradient(135deg, var(--title) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--title);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

input[type='checkbox'],
input[type='radio'] {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--accent);
}

.field-error,
.error-text,
.invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: calc(.8125rem * var(--font-scale));
    color: var(--hata);
}

.field-hint,
.help-text {
    display: block;
    margin-top: 6px;
    font-size: calc(.8125rem * var(--font-scale));
    color: var(--muted);
}

/* ==========================================================================
   10) DUYARLILIK
   ========================================================================== */

@media (max-width: 1220px) {
    :root {
        --ndd-kolon: 3;
    }

    .ndd-liste .ndd-urunler {
        --ndd-kolon: 3;
    }

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

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

@media (max-width: 1000px) {
    .ndd-menu,
    .ndd-bas__sol .ndd-panel {
        display: none;
    }

    .ndd-mobil-ac {
        display: inline-flex;
    }

    .ndd-detay {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .ndd-satin {
        position: static;
    }

    .ndd-ifade {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ndd-ifade--ters .ndd-ifade__metin {
        order: 0;
    }

    .ndd-bolum {
        padding-block: 56px;
    }
}

@media (max-width: 760px) {
    .ndd-galeri__sahne {
        grid-template-columns: minmax(0, 1fr);
    }

    .ndd-suzgec__panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

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

    .ndd-guven__oge + .ndd-guven__oge {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    :root {
        --ndd-kolon: 2;
        --ndd-oluk: 16px;
        --ndd-basYuk: 78px;
    }

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

    .ndd-alt__izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

}

@media (max-width: 520px) {
    .ndd-kap {
        padding-inline: 18px;
    }

    /* Marka dar ekranda orta sütunu şişirmesin. */
    .ndd-marka {
        font-size: calc(1.125rem * var(--font-scale));
        letter-spacing: .06em;
    }

    .ndd-bas .ndd-kap {
        gap: 6px;
    }

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

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

/* ==========================================================================
   11) YAZDIRMA
   ========================================================================== */

@media print {
    .ndd-bas,
    .ndd-alt,
    .ndd-suzgec-blok,
    .ndd-urun__eylem,
    .ndd-urun__sepet,
    .ndd-kampanya {
        display: none !important;
    }
}

/* ==========================================================================
   12) ÇEKİRDEK SINIFLARIN NADİDE 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ı, Nadide 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: #2b2b2b;
    border-color: #2b2b2b;
    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: #70532f;
    border-color: #70532f;
}

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

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

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

/*
 * `.hint` ÇEKİRDEK sınıftır: ödeme, şifre sıfırlama, sipariş takip ve ürün
 * sayfası bu adı kullanıyor. Tanımlanmazsa ipucu metni gövde boyunda kalır.
 */
.hint {
    display: block;
    margin-top: 6px;
    font-size: calc(.8125rem * var(--font-scale));
    color: var(--muted);
}

/* `.is-secili` oto modülünün tablo ve garaj listesinde seçili satırı işaretler. */
.is-secili {
    box-shadow: inset 3px 0 0 var(--accent);
    background: var(--yuzey);
}

.ndd-urun__eylem button.is-secili,
.ndd-urun__eylem a.is-secili {
    box-shadow: none;
    background: var(--primary);
    color: #fff;
}