/* ==========================================================================
   KESİT — MOBİLYA VE İÇ MEKÂN 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 Kesit
   dilinde yeniden çizimi burada.

   KAYNAK FİŞ: resources/themes/referans/fis-2026-09-07.md → FİŞ 1
     kapsayıcı 1360 · ızgara 4 kolon/4px oluk · kart 256×371 · görsel 1:1
     gövde Jost 16/25,6 ls-0,16 · kahraman 86/94,6 w600 ls-2,15 BÜYÜK HARF
     bant 66-72 w600 · bölüm 24 w600 · menü 11 w600 BÜYÜK HARF
     fiyat 14/21,7 w600 · düğme 184×52 r0 14/w700 · başlık 44+86+60=190

   TASARIM İLKESİ: yarıçap SIFIR. Yuvarlaklık yalnız iki yerde vardır ve
   ikisi de bileşen düzeyinde verilir, belirteçten DEĞİL:
     • ikon düğmeleri  → 50%
     • sayı rozetleri  → 999px
   Panelden --radius büyütülse bile kartların keskin köşesi bozulmaz.
   ========================================================================== */

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

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

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #16181a;
    --accent: #5c6b58;
    --title: #0e0f10;
    --text: #43474a;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e3e1dc;
    --radius: 0px;
    --card-radius: 0px;
    --btn-radius: 0px;
    --font-scale: 1;
    --container: 1360px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #6c7074;
    /*
     * 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: #83878b;
    --yuzey: #f3f2ef;
    --yuzey-koyu: #e9e7e2;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;
    --gecis: .18s ease;
    --baslik-yazi: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fişten gelen ölçüler; tek yerden değiştirilebilsin diye belirteç. */
    --ks-oluk: 4px;
    --ks-kolon: 4;
    --ks-basliklar: 190px;
}

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 ls-0,16px. */
    font-size: calc(1rem * var(--font-scale));
    line-height: 1.6;
    letter-spacing: -.01em;
    -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);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

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

/*
 * Odak halkası: yarıçapsız tasarımda halka da köşesizdir. Kalınlık 2px ve
 * offset 2px — sıkı ızgarada (4px oluk) komşu kartın üstüne binmesin.
 */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.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: yatay şeritler ve bant animasyonları durur.
 * Sürekli hareket eden bir bant, 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
   ========================================================================== */

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

.ks-bolum {
    padding-block: 72px;
}

.ks-bolum--dar {
    padding-block: 44px;
}

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

/* Bölüm başlığı: ÖLÇÜ 24px/600. Solda başlık, sağda "tümü" bağı. */
.ks-bolum-bas {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ks-bolum-bas h2 {
    font-size: calc(1.5rem * var(--font-scale));
    font-weight: 600;
}

.ks-bolum-bas p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: calc(.9375rem * var(--font-scale));
    max-width: 62ch;
}

.ks-tumu {
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--title);
    border-bottom: 1px solid var(--title);
    padding-bottom: 2px;
}

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

/* ==========================================================================
   3) BAŞLIK — ÜÇ KATMAN, ÜÇÜ DE BEYAZ (44 + 86 + 60 = 190px)
   --------------------------------------------------------------------------
   Kardeşlerden ayrışma buradan başlar: nordika iki katmandır ve birincisi
   KOYU; vast tek satır 64px; tunga iki katman ve ikisi de koyu; orion üç
   katmandır ama üçüncüsü tam genişlik ARAMA. Burada üç katman da beyazdır
   ve ayrımı yalnız ince çizgiler kurar.
   ========================================================================== */

.ks-bas {
    position: relative;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

/* --- 1) 44px: dil, para birimi, servis bağları --- */
.ks-bas__ust {
    height: 44px;
    border-bottom: 1px solid var(--border);
    font-size: calc(.6875rem * var(--font-scale));
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.ks-bas__ust .ks-kap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ks-bas__ust-liste {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
}

.ks-bas__ust a:hover {
    color: var(--title);
    text-decoration: none;
}

/* --- 2) 86px: kelime markası ortada, ikonlar iki yanda --- */
.ks-bas__orta {
    height: 86px;
    border-bottom: 1px solid var(--border);
}

.ks-bas__orta .ks-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 (390px'te ölçüldü: 409px).
     */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.ks-marka {
    grid-column: 2;
    justify-self: center;
    font-family: var(--baslik-yazi);
    font-size: calc(1.75rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--title);
}

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

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

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

/*
 * İkon düğmesi: yarıçap 50% — sayfadaki tek yuvarlaklıklardan biri ve
 * BİLEŞEN düzeyinde verilir, --radius'tan değil.
 * 44px asgari dokunma hedefi (WCAG 2.5.8).
 */
.ks-ikon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--title);
    transition: background var(--gecis);
}

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

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

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

/* --- 3) 60px: menü. ÖLÇÜ 11px/w600 BÜYÜK HARF — katalogdaki en küçük menü --- */
.ks-bas__menu {
    height: 60px;
}

.ks-bas__menu .ks-kap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.ks-menu > li > a,
.ks-menu > li > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 60px satırın tamamı hedef: küçük yazı, büyük hedef. */
    height: 60px;
    font-size: calc(.6875rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--title);
    white-space: nowrap;
}

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

.ks-menu a[aria-current='page'] {
    color: var(--accent);
}

/* --- kategori paneli: <details>, JavaScript yok --- */
.ks-panel {
    position: relative;
}

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

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

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

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

.ks-panel__ic {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: min(880px, 92vw);
    padding: 28px 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 0;
    box-shadow: 0 18px 44px rgba(14, 15, 16, .1);
}

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

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

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

/* --- arama: 86px satırda ikonun arkasında DEĞİL, açılır şerit --- */
.ks-ara {
    position: relative;
}

.ks-ara__ic {
    position: absolute;
    top: 100%;
    /*
     * SOLA yaslanır, sağa DEĞİL: arama düğmesi başlığın SOL sütununda
     * duruyor. `right: 0` verildiğinde panel dar ekranda kendi kabından
     * sola doğru taşıp belgeyi genişletiyordu (390px'te 231px taşma).
     */
    left: 0;
    z-index: 50;
    width: min(460px, 88vw);
    padding: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(14, 15, 16, .1);
}

.ks-ara__satir {
    display: flex;
    gap: 0;
}

.ks-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;
    font-size: calc(.9375rem * var(--font-scale));
}

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

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

/* --- mobil çekmece: public/js/shop.js `#mobile-menu` arıyor --- */
.ks-mobil-ac {
    display: none;
}

#mobile-menu {
    display: none;
    padding: 20px 0 28px;
    border-top: 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(.8125rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--title);
}

/* ==========================================================================
   4) ANA SAYFA — DEV BÜYÜK HARF İFADE BANTLARI
   --------------------------------------------------------------------------
   Temanın imzası. Ürün rafları arasına giren 86px ve 66px büyük harf
   bantlar sayfanın ritmini böler. Dört mobilya kardeşinin hiçbirinde
   raflar arasına giren dev tipografi bandı yok.
   ========================================================================== */

/* --- kahraman: ÖLÇÜ 86px/94,6 w600 ls-2,15 BÜYÜK HARF --- */
.ks-hero {
    position: relative;
    padding-block: 92px 84px;
    border-bottom: 1px solid var(--border);
}

.ks-hero__ic {
    display: grid;
    gap: 40px;
}

.ks-hero h1 {
    /* clamp: 1360px'te 86px, dar ekranda 34px. Ara değer viewport'a bağlı. */
    /*
     * ÖLÇÜ: 1440px viewport'ta 86px olmalı (fiş 1). 1,05rem + 4,81vw
     * 1440'ta 16,8 + 69,2 = 86px verir. Önceki 4,2vw katsayısı 77px'te
     * kalıyordu — ölçüldü ve düzeltildi.
     */
    font-size: clamp(2.125rem, calc(1.05rem + 4.81vw), calc(5.375rem * var(--font-scale)));
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.025em;
    text-transform: uppercase;
    max-width: 16ch;
}

.ks-hero__alt {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.ks-hero__alt p {
    margin: 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: calc(1rem * var(--font-scale));
}

.ks-hero__gorsel {
    margin-top: 8px;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--yuzey);
}

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

/* --- ifade bandı: raflar ARASINA girer. ÖLÇÜ 66-72px/600 --- */
.ks-bant {
    padding-block: 88px;
    border-block: 1px solid var(--border);
    text-align: center;
}

.ks-bant--yuzey {
    background: var(--yuzey);
}

/*
 * ÖZGÜLLÜK TUZAĞI — ÖLÇÜLDÜ: bu kural `.ks-bant p` (0,2,1) olarak yazılınca
 * altındaki `.ks-bant__aciklama` (0,1,0) sınıfını EZİYORDU ve açıklama da
 * dev büyük harf çiziliyordu. Kural artık yalnız bandın DOĞRUDAN başlık
 * çocuğuna uygulanıyor.
 */
.ks-bant > .ks-kap > h2,
.ks-bant > h2 {
    margin: 0 auto;
    max-width: 22ch;
    font-family: var(--baslik-yazi);
    font-size: clamp(1.75rem, calc(.9rem + 3.2vw), calc(4.125rem * var(--font-scale)));
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--title);
    text-transform: uppercase;
}

.ks-bant__alt {
    margin-top: 26px;
}

/*
 * Bant altındaki açıklama: bandın kendisi BÜYÜK HARF ve devasa; açıklama
 * gövde diliyle yazılır. Satır içi stil YERİNE sınıf — satır içi stil
 * temanın panelden ayarlanan --font-scale değerini görmez.
 */
.ks-bant .ks-bant__aciklama {
    margin: 26px auto 0;
    max-width: 52ch;
    font-family: var(--govde-yazi);
    font-size: calc(1rem * var(--font-scale));
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--muted);
}

/* --- üç ifade kartı: ÖLÇÜ 32px/500 yan yana --- */
.ks-ifade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

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

.ks-ifade__kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ks-ifade__kart:hover img {
    transform: scale(1.04);
}

.ks-ifade__kart:hover {
    text-decoration: none;
}

.ks-ifade__metin {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 26px;
    background: linear-gradient(to top, rgba(14, 15, 16, .68), rgba(14, 15, 16, 0));
    color: #fff;
}

.ks-ifade__metin strong {
    display: block;
    font-family: var(--baslik-yazi);
    font-size: calc(1.5rem * var(--font-scale));
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ks-ifade__metin span {
    display: inline-block;
    margin-top: 10px;
    font-size: calc(.6875rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* --- promo şeridi: ÖLÇÜ 22px/800 --- */
.ks-promo {
    background: var(--primary);
    color: #fff;
    padding-block: 26px;
    text-align: center;
}

.ks-promo strong {
    font-family: var(--baslik-yazi);
    font-size: calc(1.375rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: -.01em;
}

.ks-promo span {
    display: inline-block;
    margin-left: 14px;
    font-size: calc(.75rem * var(--font-scale));
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .82;
}

/* --- kategori ızgarası: KARTLAR ÜRÜN SAYISI TAŞIR --- */
/*
 * Fişten gelen imza: "Living Room 6", "Accessories 14". Kardeş temaların
 * hiçbirinde kategori kartı ürün sayısı göstermiyor. Sayı BİLGİDİR:
 * ziyaretçi tıklamadan önce rafın dolu olup olmadığını görür.
 */
.ks-kategori {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 4px;
}

.ks-kategori__kart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--yuzey);
    transition: background var(--gecis);
}

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

.ks-kategori__gorsel {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

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

/* Görseli olmayan kategori: kare kutuyu adın baş harfi doldurur. */
.ks-kategori__harf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--baslik-yazi);
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--muted);
}

.ks-kategori__ad {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px 22px;
    font-family: var(--baslik-yazi);
    font-size: calc(1.125rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--title);
    text-align: center;
}

.ks-kategori__sayi {
    font-size: calc(.8125rem * var(--font-scale));
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --- ürün ızgarası: 4 KOLON, OLUK 4px (imza) --- */
.ks-urunler {
    display: grid;
    grid-template-columns: repeat(var(--ks-kolon), minmax(0, 1fr));
    gap: var(--ks-oluk);
}

/*
 * Yatay raf: scroll-snap, JavaScript yok.
 * `position: relative` ŞART — mutlak konumlu `.visually-hidden` çocukları
 * kırpılmazsa belge genişler ve sayfa yatay kayar (bereket tuzağı 1).
 */
.ks-raf {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--ks-oluk);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
}

.ks-raf > * {
    scroll-snap-align: start;
}

/* --- koleksiyon afişi: ÖLÇÜ 26px/500 --- */
.ks-afis {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
}

.ks-afis__gorsel {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--yuzey);
}

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

.ks-afis__metin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 48px;
    background: var(--yuzey);
}

.ks-afis__metin h2 {
    font-size: calc(1.625rem * var(--font-scale));
    font-weight: 500;
    letter-spacing: -.02em;
}

.ks-afis__metin p {
    margin: 0;
    max-width: 44ch;
    color: var(--muted);
}

/* ==========================================================================
   5) ÜRÜN KARTI — KARE FOTOĞRAF, ÇERÇEVESİZ, GÖLGESİZ
   --------------------------------------------------------------------------
   ÖLÇÜ: kart 256×371, görsel 1:1, yarıçap 0.
   AYRIŞMA: nordika 4/3 + gölge + çerçeve; vast 4/5; decorico 1:1 AMA r6 ve
   2px çerçeve; eclectik 1:1 bento kutusunda. Kare + çerçevesiz + gölgesiz
   üçlüsü yalnız burada.
   ========================================================================== */

.ks-urun {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

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

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

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

.ks-urun:hover .ks-urun__gorsel img {
    transform: scale(1.05);
}

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

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

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

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

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

/* Kart eylemleri: sağ üstte dikey sütun, hover'da görünür. */
.ks-urun__eylem {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--gecis), transform var(--gecis);
}

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

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

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

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

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

/* Sepete ekle: fotoğrafın ALTINDAN kayarak çıkar, saf CSS. */
.ks-urun__sepet {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: calc(.6875rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform var(--gecis);
}

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

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

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

/* Kart gövdesi: ad + fiyat. ÖLÇÜ fiyat 14/21,7 w600 ls-0,28. */
.ks-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 2px 20px;
}

.ks-urun__ad {
    font-family: var(--baslik-yazi);
    font-size: calc(.9375rem * var(--font-scale));
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.ks-urun__fiyat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: calc(.875rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.ks-urun__fiyat del {
    color: var(--muted);
    font-weight: 400;
    text-decoration: line-through;
}

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

/* ==========================================================================
   6) LİSTE SAYFASI — ÜSTTE YAPIŞKAN SÜZGEÇ ŞERİDİ
   --------------------------------------------------------------------------
   AYRIŞMA: nordika tek <details> panel açar; vast her süzgeci ayrı çekmece
   yapar; tunga ve çekirdek solda 240px kalıcı kolon kullanır; orion sağda
   yapışkan kolon. Burada şerit ÜSTTE YAPIŞIR ve süzgeçler yan yana
   <details> hapları hâlinde durur.
   ========================================================================== */

.ks-liste-bas {
    padding-block: 44px 28px;
    border-bottom: 1px solid var(--border);
}

.ks-liste-bas h1 {
    font-size: clamp(1.75rem, calc(1.1rem + 2.2vw), calc(3rem * var(--font-scale)));
    text-transform: uppercase;
    letter-spacing: -.025em;
}

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

.ks-kirinti {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    list-style: none;
    font-size: calc(.75rem * var(--font-scale));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.ks-suzgec-serit {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 14px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.ks-suzgec {
    position: relative;
}

.ks-suzgec > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--title);
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

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

.ks-suzgec[open] > summary,
.ks-suzgec > summary:hover {
    border-color: var(--title);
}

.ks-suzgec__ic {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: max(260px, 100%);
    max-height: 340px;
    overflow-y: auto;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(14, 15, 16, .1);
}

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

.ks-suzgec__uygula {
    margin-top: 12px;
    width: 100%;
    height: 40px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: calc(.6875rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Şerit içi kap: süzgeç hapları + sıralama + sayaç tek satırda akar. */
.ks-suzgec-serit__ic {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/*
 * Sıralama seçicisi şerit yüksekliğine oturur (40px) ve tam genişlik ALMAZ —
 * genel `select` kuralı width:100% verir, şeritte o kural bozar.
 */
.ks-sirala {
    width: auto;
    min-height: 40px;
    padding: 0 40px 0 14px;
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
}

.ks-liste-sayi {
    margin-left: auto;
    font-size: calc(.75rem * var(--font-scale));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

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

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

/* ==========================================================================
   7) ÜRÜN SAYFASI — GALERİ ÜSTTE TAM GENİŞLİK ŞERİT
   --------------------------------------------------------------------------
   AYRIŞMA: nordika solda yapışkan galeri + sağda akan içerik; vast tam
   tersi (fotoğraflar solda akar, satın alma sağda yapışır); çekirdek tek
   büyük görsel + küçük resim şeridi + sekmeler. Burada galeri ÜSTTE yatay
   bir şerittir ve satın alma kolonu ALTINDA iki sütuna açılır — mobilya
   mekân fotoğrafı geniş çekilir, dikey kolonda kırpılır.
   ========================================================================== */

.ks-urun-sayfa {
    padding-block: 32px 80px;
}

/*
 * DÜZEN AYRIŞMASI: galeri ÜSTTE tam genişlik yatay şerit, satın alma alanı
 * ALTINDA iki sütun. nordika solda yapışkan galeri + sağda akan içerik
 * kurar; vast tam tersini yapar. Mobilya mekân fotoğrafı GENİŞ çekilir ve
 * dikey bir kolonda kırpılır — bu yüzden burada fotoğraf yatay akar.
 */
.ks-detay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
}

/*
 * Sahne: scroll-snap ile yatay akan kareler, JavaScript yok.
 * `position: relative` ŞART — mutlak konumlu `.visually-hidden` çocukları
 * kırpılmazsa belge genişler ve sayfa yatay kayar (bereket tuzağı 1).
 */
.ks-galeri {
    position: relative;
}

.ks-galeri__sahne {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(680px, 86vw), 1fr);
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.ks-galeri__kare {
    margin: 0;
    scroll-snap-align: start;
    /* Mekân fotoğrafı yatay: 4/3. Kart 1:1'dir, sayfa 4/3 — ikisi ayrı iş. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--yuzey);
}

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

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

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

.ks-galeri__kare--bos figcaption {
    font-size: calc(.8125rem * var(--font-scale));
}

/* Küçük resimler ÇAPADIR: :target ile büyük alan ilgili kareye kayar. */
.ks-galeri__serit {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    list-style: none;
    overflow-x: auto;
}

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

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

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

.ks-satin {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: start;
}

.ks-satin h1 {
    font-size: clamp(1.625rem, calc(1.1rem + 1.8vw), calc(2.5rem * var(--font-scale)));
    letter-spacing: -.025em;
}

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

.ks-satin__fiyat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 20px 0 24px;
    font-family: var(--baslik-yazi);
    font-size: calc(1.75rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

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

.ks-satin__kutu {
    padding: 28px;
    background: var(--yuzey);
}

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

.ks-varyant__baslik {
    display: block;
    margin-bottom: 10px;
    font-size: calc(.6875rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.ks-varyant__secenek {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

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

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

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

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

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

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

/* Ana eylem: ÖLÇÜ 184×52 r0 14/w700 BÜYÜK HARF. */
.ks-ana-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 184px;
    height: 52px;
    padding: 0 26px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: calc(.875rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background var(--gecis), border-color var(--gecis);
}

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

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

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

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

/* Ardışık bilgi bölümleri: açılır-kapanır DEĞİL, başlıklı bloklar. */
.ks-bilgi {
    margin-top: 64px;
    display: grid;
    gap: 44px;
}

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

.ks-bilgi h2 {
    margin-bottom: 14px;
    font-size: calc(1.125rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

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

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

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

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

.ks-alt {
    margin-top: 96px;
    border-top: 1px solid var(--border);
    background: var(--yuzey);
    padding-block: 64px 0;
}

.ks-alt__izgara {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 44px;
    padding-bottom: 56px;
}

.ks-alt__marka {
    font-family: var(--baslik-yazi);
    font-size: calc(1.5rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--title);
}

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

.ks-alt h3 {
    margin-bottom: 16px;
    font-size: calc(.6875rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--title);
}

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

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

.ks-alt ul a:hover {
    color: var(--accent);
}

.ks-alt__serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: 24px;
    border-top: 1px solid var(--border);
    font-size: calc(.8125rem * var(--font-scale));
    color: var(--muted);
}

.ks-alt__sosyal {
    display: flex;
    gap: 4px;
    list-style: none;
}

.ks-alt__sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--title);
}

.ks-alt__sosyal a:hover {
    background: #fff;
}

/* ==========================================================================
   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 (2px inset, dolgu 1px 2px).
   Yeni temada bu blok nordika.css ile KARŞILAŞTIRILMALIDIR.
   ========================================================================== */

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

.field > label,
.field-label,
label.field-label {
    display: block;
    margin-bottom: 7px;
    font-size: calc(.75rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: .1em;
    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);
}

/*
 * `.hint` ÇEKİRDEK sınıftır: ödeme, şifre sıfırlama, sipariş takip ve ürün
 * sayfası bu adı kullanıyor. Tema ezmediği için burada 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. Kesit dilinde seçim ZEMİNLE değil SOL KENAR ÇİZGİSİYLE
 * verilir — yarıçapsız tasarımda dolgu bir kutu üretirdi.
 */
.is-secili {
    box-shadow: inset 3px 0 0 var(--accent);
    background: var(--yuzey);
}

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

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

/* ==========================================================================
   10) DUYARLILIK
   --------------------------------------------------------------------------
   Kırılım noktaları içeriğe göre seçildi: dört kolonluk sıkı ızgara 1100px
   altında üçe, 820px altında ikiye iner. Oluk 4px'te kalır — imza odur.
   ========================================================================== */

@media (max-width: 1180px) {
    :root {
        --ks-kolon: 3;
    }

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

@media (max-width: 980px) {
    .ks-bas__menu,
    .ks-bas__ust {
        display: none;
    }

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

    .ks-bas__orta {
        height: 72px;
    }

    .ks-satin {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

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

    .ks-bolum {
        padding-block: 52px;
    }

    .ks-bant {
        padding-block: 60px;
    }
}

@media (max-width: 820px) {
    :root {
        --ks-kolon: 2;
    }

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

    .ks-hero {
        padding-block: 56px 48px;
    }

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

    .ks-afis__metin {
        padding: 32px 24px;
    }
}

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

    /* Marka 28px + .18em harf aralığıyla dar ekranda orta sütunu şişiriyordu. */
    .ks-marka {
        font-size: calc(1.125rem * var(--font-scale));
        letter-spacing: .12em;
    }

    .ks-bas__orta .ks-kap {
        gap: 4px;
    }

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

    .ks-galeri {
        grid-auto-columns: minmax(88vw, 1fr);
    }
}

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

@media print {
    .ks-bas,
    .ks-alt,
    .ks-suzgec-serit,
    .ks-urun__eylem,
    .ks-urun__sepet {
        display: none !important;
    }
}

/* ==========================================================================
   12) ÇEKİRDEK SINIFLARIN KESİT 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ı, Kesit 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: #2a2d31;
    border-color: #2a2d31;
    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: #48543f;
    border-color: #48543f;
}

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

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

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