/* ==========================================================================
   GONCA — 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 Gonca
   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: #1a181b;
    --accent: #8a4b63;
    --title: #131114;
    --text: #494349;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e6e0dc;
    --radius: 0px;
    --card-radius: 0px;
    --btn-radius: 0px;
    --font-scale: 1;
    --container: 1440px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #736c72;
    /*
     * 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: #8a848a;
    --yuzey: #f6f3f1;
    --yuzey-koyu: #ece7e3;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;
    --gecis: .18s ease;
    --baslik-yazi: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fişten gelen ölçüler; tek yerden değişebilsin diye belirteç. */
    --gnc-oluk: 30px;
    --gnc-kolon: 4;
    --gnc-basYuk: 121px;
}

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,6. */
    font-size: calc(1rem * var(--font-scale));
    line-height: 1.6;
    -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.
   ========================================================================== */

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

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

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

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

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

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

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

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

/* Rafın ALTINDAKİ "tümü" bloğu: üstte başlık yok, yalnız bağ. */
.gnc-bolum-bas--alt {
    margin: 44px 0 0;
}

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

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

/* ==========================================================================
   3) BAŞLIK — TEK KATMAN 121px, SAYDAM
   --------------------------------------------------------------------------
   İMZA: başlık kahramanın ÜSTÜNE biner; sayfa başlığın altından başlamaz.
   AYRIŞMA: kesit üç katman ve üçü de opak beyaz; ipek opak; nordika iki
   katman ve birincisi koyu; tempo ortada kelime markası ama opak.
   Saydam başlık katalogda yalnız burada.

   KAYDIRINCA OPAKLAŞIR: `body` üstüne `is-kaydi` sınıfı EKLENMEZ (JavaScript
   yok); bunun yerine kahraman DIŞINDAKİ sayfalarda `.gnc-bas--opak`
   basılır. Ana sayfada saydam, diğer sayfalarda beyaz.
   ========================================================================== */

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

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

.gnc-bas .gnc-kap {
    height: 100%;
    display: grid;
    /*
     * minmax(0, 1fr) — çıplak 1fr'in tabanı min-content'tir ve yan sütunlar
     * kabından geniş olup belgeyi genişletir.
     */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.gnc-marka {
    grid-column: 2;
    justify-self: center;
    font-family: var(--baslik-yazi);
    font-size: calc(1.625rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: inherit;
}

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

.gnc-bas__sol {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 26px;
}

.gnc-bas__sag {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Menü: ÖLÇÜ 16px/w700 — katalogdaki en BÜYÜK menü (kesit 11px). */
.gnc-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
}

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

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

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

.gnc-panel {
    position: relative;
}

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

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

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

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

.gnc-panel__ic {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    width: min(760px, 88vw);
    padding: 30px 34px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(19, 17, 20, .12);
}

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

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

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

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

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

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

.gnc-ikon svg {
    width: 21px;
    height: 21px;
}

/* Sayı rozeti: 999px — ikinci ve son yuvarlaklık. */
.gnc-ikon__sayi {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    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;
}

/* Arama: SOLA yaslı açılır panel (sağa yaslanırsa dar ekranda taşar). */
.gnc-ara {
    position: relative;
}

.gnc-ara__ic {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: min(440px, 86vw);
    padding: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(19, 17, 20, .12);
}

.gnc-ara__satir {
    display: flex;
}

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

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

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

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

#mobile-menu {
    display: none;
    position: absolute;
    inset: var(--gnc-basYuk) 0 auto 0;
    z-index: 45;
    padding: 18px 0 26px;
    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-size: calc(1rem * var(--font-scale));
    font-weight: 700;
    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. */
.gnc-hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: flex-end;
    padding-block: calc(var(--gnc-basYuk) + 40px) 72px;
    background: var(--yuzey);
    overflow: hidden;
}

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

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

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

/* ÖLÇÜ: kahraman 88px/700. */
.gnc-hero h1 {
    /*
     * ÖLÇÜ: 1440px viewport'ta 88px olmalı (fiş 2). 1,1rem + 4,89vw
     * 1440'ta 17,6 + 70,4 = 88px verir. 4,55vw katsayısı 83px'te kalıyordu —
     * clamp'in ORTA değeri üst sınırdan önce gelir, üst sınırı yazmak yetmez.
     */
    font-size: clamp(2.25rem, calc(1.1rem + 4.89vw), calc(5.5rem * var(--font-scale)));
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #fff;
    max-width: 18ch;
}

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

/*
 * DEV KELİME BANDI — İMZA. ÖLÇÜ 200px/240 w700 BÜYÜK HARF.
 * Kelime kabın iki kenarına dayanır; `clamp` üst sınırı 200px'te durur ama
 * dar ekranda viewport'a göre küçülür.
 * `overflow: hidden` ŞART: harf kenarları (özellikle negatif harf aralığıyla)
 * kaptan taşıp belgeyi genişletir.
 */
.gnc-kelime {
    overflow: hidden;
    padding-block: 24px;
    text-align: center;
}

.gnc-kelime span {
    display: block;
    font-family: var(--baslik-yazi);
    font-size: clamp(2.5rem, 13.9vw, calc(12.5rem * var(--font-scale)));
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--title);
    white-space: nowrap;
}

.gnc-kelime--acik span {
    color: var(--yuzey-koyu);
}

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

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

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

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

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

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

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

.gnc-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). */
.gnc-urunler {
    display: grid;
    grid-template-columns: repeat(var(--gnc-kolon), minmax(0, 1fr));
    gap: 46px var(--gnc-oluk);
}

/* Yatay şerit: scroll-snap, JavaScript yok. */
.gnc-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(--gnc-oluk);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

.gnc-urun {
    position: relative;
    display: flex;
    flex-direction: column;
    /* ZEMİNSİZ: kart bölüm zeminini gösterir, kendi kutusu yoktur. */
    background: transparent;
}

/*
 * 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).
 */
.gnc-urun__medya {
    position: relative;
    overflow: hidden;
    background: var(--yuzey);
}

.gnc-urun__gorsel {
    display: block;
    aspect-ratio: 1 / 1.3;
}

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

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

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

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

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

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

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

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

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

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

.gnc-urun__eylem button,
.gnc-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);
}

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

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

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

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

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

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

/* Kart gövdesi ORTALI — kardeşlerin çoğunda sola yaslı. */
.gnc-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 4px 0;
    text-align: center;
}

.gnc-urun__ad {
    font-family: var(--baslik-yazi);
    /* ÖLÇÜ: ad 16px/w700 — kardeşlerde ad genellikle w400/500. */
    font-size: calc(1rem * var(--font-scale));
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

.gnc-liste {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.gnc-suzgec-kolon {
    position: sticky;
    top: 24px;
}

.gnc-suzgec {
    border-bottom: 1px solid var(--border);
    padding-block: 18px;
}

.gnc-suzgec > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--title);
    cursor: pointer;
}

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

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

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

.gnc-suzgec__ic {
    padding-top: 14px;
    max-height: 300px;
    overflow-y: auto;
}

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

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

.gnc-suzgec__uygula {
    margin-top: 16px;
    width: 100%;
    height: 46px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

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

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

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

/* Liste ızgarası: 3 kolon (ana sayfada 4). */
.gnc-liste .gnc-urunler {
    --gnc-kolon: 3;
}

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

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

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

.gnc-detay {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 60px;
    align-items: start;
}

.gnc-galeri__sahne {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

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

/* Tek fotoğraflı üründe kare iki kolonu birden kaplar. */
.gnc-galeri__sahne > .gnc-galeri__kare:only-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gnc-ana-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    height: 54px;
    padding: 0 28px;
    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);
}

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

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

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

.gnc-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). */
.gnc-bilgi {
    margin-top: 72px;
    display: grid;
    gap: 44px;
}

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

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

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

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

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

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

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

.gnc-alt__izgara {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-bottom: 60px;
}

.gnc-alt__marka {
    font-family: var(--baslik-yazi);
    font-size: calc(1.625rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}

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

.gnc-alt h3 {
    margin-bottom: 18px;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
}

.gnc-alt ul {
    list-style: none;
    display: grid;
    gap: 2px;
}

.gnc-alt ul a {
    /* 44px asgari hedef: altbilgi bağları tek başına duran gezinti hedefidir. */
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: calc(.9375rem * var(--font-scale));
    color: rgba(255, 255, 255, .74);
}

.gnc-alt ul a:hover,
.gnc-alt a:hover {
    color: #fff;
}

.gnc-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 {
        --gnc-kolon: 3;
    }

    .gnc-liste {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 36px;
    }

    .gnc-liste .gnc-urunler {
        --gnc-kolon: 2;
    }

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

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

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

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

    .gnc-satin {
        position: static;
    }

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

    .gnc-suzgec-kolon {
        position: static;
    }

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

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

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

@media (max-width: 760px) {
    :root {
        --gnc-kolon: 2;
        --gnc-oluk: 16px;
        --gnc-basYuk: 78px;
    }

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

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

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

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

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

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

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

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

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

@media print {
    .gnc-bas,
    .gnc-alt,
    .gnc-suzgec-kolon,
    .gnc-urun__eylem,
    .gnc-urun__sepet,
    .gnc-kelime {
        display: none !important;
    }
}

/* ==========================================================================
   12) ÇEKİRDEK SINIFLARIN GONCA 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ı, Gonca 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: #2f2b30;
    border-color: #2f2b30;
    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: #6d3a4d;
    border-color: #6d3a4d;
}

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

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

.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 o sayfalarda ipucu metni gövde
 * boyunda ve gövde renginde 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 uyumlu araç tablosu ve garaj listesinde seçili
 * satırı işaretler. Gonca dilinde seçim SOL KENAR ÇİZGİSİYLE verilir.
 */
.is-secili {
    box-shadow: inset 3px 0 0 var(--accent);
    background: var(--yuzey);
}

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