/* ==========================================================================
   İPEK — BUTİK / EDİTORYAL MODA TEMASI · TAM STİL DOSYASI
   --------------------------------------------------------------------------
   Bu dosya `public/css/shop.css` İLE BİRLİKTE YÜKLENMEZ, ONUN YERİNE geçer
   (bkz. themes/ipek/shop/layouts/app.blade.php). Dolayısıyla burada yalnız
   temanın kendi blokları değil, ÇEKİRDEK SINIFLAR da (btn, field, alert,
   cartitem, checkout, pagination, prose, datatable…) çizilmek zorundadır;
   eksik bir sınıf, temanın ezmediği sayfayı (sepet, ödeme, blog) sessizce
   stilsiz bırakır.

   :root bloğu, resources/themes/ipek.php içindeki `tokens` dizisiyle BİREBİR
   AYNI OLMAK ZORUNDA — panel ince ayar formu başlangıç değerini oradan okur
   ve tests/Feature/ThemeTest.php bunu ölçer.

   ÖLÇÜ FİŞİ (Shopify Ella 7.2 "Home 03 — High Fashion", 1440px'de ölçüldü):
     kapsayıcı 1360 · gövde 16/25,6 · h1 60/1,05/700 · h2 50/55/700
     h3 24/33,6/700 · ürün adı 16/25,6/400 · fiyat 14/22,4/500
     menü 16/600 büyük harf · ürün ızgarası 5 kolon 10px oluk
     kart fotoğrafı 1:1,25 · başlık 45px şerit + ana satır · yarıçap 0
   Fiş dosyası: /root/screenshot-tool/referans/ella-highfashion-olcu.json
   Referansın CSS'i, JS'i, ikonu ve fotoğrafı KOPYALANMADI; ölçü ölçüldü,
   kod buradan sıfırdan yazıldı.

   SIFIR YARIÇAP TEMANIN İMZASIDIR: on dokuz kardeş temanın hepsinde köşe
   yumuşaktır. Burada hiçbir öğe yuvarlatılmaz — kart, düğme, girdi, rozet,
   panel. Tek istisna odak halkasıdır (görünürlüğü için 0 bırakılmaz).

   KONTRAST (WCAG bağıl parlaklık, #ffffff zemin üstünde):
     --title #000000 21,00:1 · --text #232323 16,10:1 · --muted #6b6b6b 5,32:1
     --accent #3f7a67 4,80:1 · --primary #000000 21,00:1 (üstünde beyaz 21:1)
     --control-border #767676 4,54:1 (WCAG 1.4.11 eşiği 3:1)
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #000000;
    --accent: #3f7a67;
    --title: #000000;
    --text: #232323;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e6e6e6;
    --radius: 0px;
    --card-radius: 0px;
    --btn-radius: 0px;
    --font-scale: 1;
    --container: 1360px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #6b6b6b;
    /* Form denetimi kenarlığı: erişilebilirlik için SABİT, --border ile
       karıştırılmaz. --border yalnızca dekoratif çizgidir ve panelden
       istenildiği kadar açık yapılabilir; bu ise 3:1'in altına inemez. */
    --control-border: #767676;
    --yuzey: #f7f7f7;
    --yuzey-koyu: #efefef;
    /* Krem: kahraman panelinin ve vaat şeridinin zemini. Referansın
       #f9ede1 tonundan bir adım sıcak — bizim değerimiz. */
    --krem: #f8ece0;
    --siyah: #000000;
    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #c31f3c;
    --gecis: .25s ease;
    --yazi: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Tema tek aileyle çiziliyor; iki değişken de aynı aileyi gösterir ki
       çekirdek sınıflardaki --baslik-yazi/--govde-yazi kullanımları da
       çalışsın. */
    --baslik-yazi: var(--yazi);
    --govde-yazi: var(--yazi);
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    /* Galeri çapaları ve bölüm bağlantıları yumuşak kaysın. */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--yazi);
    /* ÖLÇÜ: 16px / 25,6px (1,6) — referans gövde satır yüksekliği. */
    font-size: calc(16px * var(--font-scale));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

img {
    height: auto;
}

/* ÖLÇÜ: başlık skalası 60 / 50 / 24. Referansta üçü de 700 ve satır
   yükseklikleri sırasıyla 1,05 · 55px · 33,6px. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--yazi);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--title);
}

h1 { font-size: calc(3.75rem * var(--font-scale)); line-height: 1.05; }
h2 { font-size: calc(3.125rem * var(--font-scale)); line-height: 1.1; }
h3 { font-size: calc(1.5rem * var(--font-scale)); line-height: 1.4; }
h4 { font-size: calc(1.125rem * var(--font-scale)); line-height: 1.45; }

p {
    margin: 0 0 1em;
}

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

a:hover {
    text-decoration: underline;
}

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

li {
    list-style: none;
}

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

button {
    cursor: pointer;
}

/* ODAK HALKASI: klavye kullanıcısı nerede olduğunu görmeli. Fare tıklamasında
   görünmesin diye :focus değil :focus-visible. Temanın sıfır yarıçap kuralı
   BURADA GEÇERSİZDİR — köşesiz bir halka öğenin sınırıyla kaynaşıyor. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

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

/* ==========================================================================
   2) DÜZEN İLKELERİ
   ========================================================================== */

/* ÖLÇÜ: kapsayıcı 1360px. Yan dolgu env() ile çentikli cihazlarda güvenli
   alanın dışına taşmaz. */
.ipk-en {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}

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

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}

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

.ipk-bolum--sik {
    padding-block: 36px;
}

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

.ipk-bolum--krem {
    background: var(--krem);
}

/* BÖLÜM BAŞLIĞI: referansta ortalı, küçük ve KALIN — 24px/700. Sol hizalı
   büyük başlık kullanılmıyor; moda vitrininde başlık fotoğrafın önüne
   geçmemeli. */
.ipk-bolum__bas {
    text-align: center;
    margin-bottom: 28px;
}

.ipk-bolum__bas h2 {
    font-size: calc(1.5rem * var(--font-scale));
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}

.ipk-bolum__bas p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .9375rem;
}

.ipk-bolum__bag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--title);
    border-bottom: 1px solid var(--title);
    padding-bottom: 2px;
}

.ipk-bolum__bag:hover {
    text-decoration: none;
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.text-danger { color: var(--hata); }
.text-success { color: var(--basari); }

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

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

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

/* ==========================================================================
   3) BAŞLIK — İKİ KATMAN: SİYAH ŞERİT + BEYAZ ANA SATIR
   --------------------------------------------------------------------------
   ÖLÇÜ: üst şerit 45px, ana satır ~91px, toplam ~136px.
   Menü ORTADA ve BÜYÜK HARFTİR (16px / 600). Büyük harfe CSS ile değil,
   Blade'de App\Support\Metin::buyuk() ile çevrilir — text-transform Türkçe
   "i" harfini "I" yapar, "İ" değil.
   ========================================================================== */

.ipk-ust {
    background: var(--siyah);
    color: #fff;
    font-size: .8125rem;
    line-height: 1;
}

.ipk-ust__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 45px;
    padding-block: 8px;
}

.ipk-ust__vaat {
    letter-spacing: .04em;
}

.ipk-ust__vaat b {
    font-weight: 600;
}

.ipk-ust__baglar {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ipk-ust__baglar a {
    color: rgba(255, 255, 255, .82);
    transition: color var(--gecis);
}

.ipk-ust__baglar a:hover {
    color: #fff;
    text-decoration: none;
}

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

.ipk-bas__ic {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 91px;
}

/* --- kelime markası --- */

.ipk-marka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--title);
}

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

.ipk-marka img {
    max-height: 34px;
    width: auto;
}

/* --- orta menü --- */

.ipk-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.ipk-menu__bag {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--title);
    padding-block: 6px;
    border-bottom: 2px solid transparent;
    transition: border-color var(--gecis), color var(--gecis);
    white-space: nowrap;
}

.ipk-menu__bag:hover,
.ipk-menu__bag[aria-current="page"] {
    text-decoration: none;
    color: var(--accent);
    border-bottom-color: var(--accent);
}

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

.ipk-katalog {
    position: relative;
}

.ipk-katalog > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--title);
    padding-block: 6px;
    border-bottom: 2px solid transparent;
}

.ipk-katalog > summary::-webkit-details-marker {
    display: none;
}

.ipk-katalog[open] > summary {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ipk-katalog > summary svg {
    transition: transform var(--gecis);
}

.ipk-katalog[open] > summary svg {
    transform: rotate(180deg);
}

.ipk-katalog__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: min(920px, 92vw);
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 28px 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    z-index: 60;
}

.ipk-katalog__izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 26px;
}

.ipk-katalog__kok {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--title);
    margin-bottom: 9px;
}

.ipk-katalog__alt {
    display: block;
    font-size: .875rem;
    color: var(--muted);
    padding-block: 3px;
}

.ipk-katalog__alt:hover {
    color: var(--accent);
    text-decoration: none;
}

/* --- sağ blok: arama + ikonlar --- */

.ipk-bas__sag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.ipk-arama {
    display: flex;
    align-items: center;
    border: 1px solid var(--control-border);
    background: var(--card-bg);
    height: 40px;
    max-width: 240px;
    flex: 1 1 auto;
}

/* ÖZGÜLLÜK ZORUNLU: çekirdek bloktaki `input[type='search']` kuralı
   ile aynı ağırlıkta (0,1,1) olurdu ve dosyada SONRA geldiği için kazanırdı —
   başlıktaki arama kutusu çerçeveli, tam genişlikte bir kutuya dönüyordu. */
.ipk-arama input[type='search'] {
    border: 0;
    background: none;
    padding: 0 12px;
    height: 100%;
    width: 100%;
    min-width: 0;
    font-size: .875rem;
}

.ipk-arama input:focus {
    outline: none;
}

.ipk-arama:focus-within {
    border-color: var(--title);
}

.ipk-arama button {
    border: 0;
    background: var(--siyah);
    color: #fff;
    height: 100%;
    width: 42px;
    display: grid;
    place-items: center;
}

.ipk-ikon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--title);
    transition: color var(--gecis);
}

.ipk-ikon-btn:hover {
    color: var(--accent);
    text-decoration: none;
}

.ipk-sepet__adet {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    background: var(--hata);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.ipk-burger {
    display: none;
    border: 0;
    background: none;
    padding: 8px;
    color: var(--title);
}

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

.ipk-mobil {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    padding: 18px 20px 26px;
}

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

.ipk-mobil a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
}

.ipk-mobil details > summary {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 600;
}

.ipk-mobil details a {
    padding-left: 16px;
    color: var(--muted);
}

.ipk-mobil__arama {
    max-width: none;
    margin-bottom: 14px;
}

/* ==========================================================================
   4) ANA SAYFA
   ========================================================================== */

/* --- 4a) krem vaat şeridi: iki sütun, ortada dikey çizgi --- */

.ipk-vaat {
    background: var(--krem);
}

.ipk-vaat__ic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
}

.ipk-vaat__oge {
    padding: 20px 16px;
}

.ipk-vaat__oge + .ipk-vaat__oge {
    border-left: 1px solid rgba(0, 0, 0, .1);
}

.ipk-vaat__bas {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--title);
}

.ipk-vaat__alt {
    display: block;
    font-size: .8125rem;
    color: #5c5346;
    margin-top: 3px;
}

/* --- 4b) dört ikonlu hizmet satırı --- */

.ipk-hizmet {
    border-bottom: 1px solid var(--border);
}

.ipk-hizmet__ic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ipk-hizmet__oge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--title);
}

.ipk-hizmet__oge + .ipk-hizmet__oge {
    border-left: 1px solid var(--border);
}

.ipk-hizmet__oge svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* --- 4c) ÜÇ PANELLİ KAHRAMAN — temanın imzası --- */

.ipk-kahraman {
    display: grid;
    grid-template-columns: 1fr 1.06fr 1fr;
    min-height: 520px;
}

.ipk-kahraman__foto {
    position: relative;
    overflow: hidden;
    background: var(--yuzey);
}

.ipk-kahraman__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.ipk-kahraman:hover .ipk-kahraman__foto img {
    transform: scale(1.04);
}

.ipk-kahraman__panel {
    background: var(--accent);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 40px;
    gap: 6px;
}

.ipk-kahraman__ustluk {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .85);
    margin: 0;
}

.ipk-kahraman__baslik {
    color: #fff;
    margin: 4px 0 0;
    letter-spacing: .04em;
}

.ipk-kahraman__ozet {
    max-width: 34ch;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
}

.ipk-kahraman__eylem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

/* --- 4d) siyah kupon şeridi: yayındaki kampanyalardan --- */

.ipk-kupon {
    background: var(--siyah);
    color: #fff;
}

.ipk-kupon__ic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: center;
}

.ipk-kupon__oge {
    padding: 22px 20px;
    text-align: center;
}

.ipk-kupon__oge + .ipk-kupon__oge {
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.ipk-kupon__bas {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
}

.ipk-kupon__alt {
    display: block;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
    margin-top: 2px;
}

.ipk-kupon__kod {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    border: 1px dashed rgba(255, 255, 255, .5);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

/* --- 4e) kategori ikon ızgarası: iki satır, altı kolon --- */

.ipk-kategori {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.ipk-kategori__oge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--yuzey);
    transition: background var(--gecis), color var(--gecis);
    min-width: 0;
}

.ipk-kategori__oge:hover {
    text-decoration: none;
    background: var(--krem);
    color: var(--title);
}

.ipk-kategori__gorsel {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--card-bg);
}

.ipk-kategori__harf {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--card-bg);
    color: var(--accent);
    font-size: 1.125rem;
    font-weight: 700;
}

.ipk-kategori__ad {
    font-size: .875rem;
    font-weight: 500;
    color: var(--title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 4f) çip şeridi (kategori süzgeci ve etiketler) --- */

.ipk-cipler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
}

.ipk-cip {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--border);
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    background: var(--card-bg);
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

.ipk-cip:hover {
    text-decoration: none;
    border-color: var(--title);
}

.ipk-cip--acik {
    background: var(--siyah);
    border-color: var(--siyah);
    color: #fff;
}

.ipk-cip--yuvarlak {
    border-color: var(--krem);
    background: var(--krem);
    color: #5c5346;
    font-size: .8125rem;
    padding: 6px 16px;
}

.ipk-cip--yuvarlak:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ==========================================================================
   5) ÜRÜN IZGARASI VE KARTI
   --------------------------------------------------------------------------
   ÖLÇÜ: 5 kolon, 10px oluk, kart fotoğrafı 1:1,25 (4:5).
   Kart ÇERÇEVESİZ, GÖLGESİZ ve ZEMİNSİZDİR. Sepet düğmesi fotoğrafın altından
   KAYARAK çıkar — JavaScript yok, yalnız transform + hover/focus-within.
   ========================================================================== */

.ipk-izgara {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

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

.ipk-urun {
    position: relative;
    min-width: 0;
    background: var(--card-bg);
}

/* Oran ve taşma sarmalayıcıda: kayan düğme, rozetler ve favori düğmesi de
   fotoğrafla AYNI kutuda konumlanmalı (bkz. product-card.blade.php). */
.ipk-urun__medya {
    position: relative;
    aspect-ratio: 1 / 1.25;
    overflow: hidden;
    background: var(--yuzey);
}

.ipk-urun__gorsel {
    position: absolute;
    inset: 0;
    display: block;
}

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

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

.ipk-urun__bos {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--border);
}

/* Rozetler SOL ÜSTTE (referansta da öyle) — sağ üst favori düğmesine ayrılı. */
.ipk-urun__isaret {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 2;
}

.ipk-etiket {
    display: inline-block;
    padding: 3px 9px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.5;
    color: #fff;
}

.ipk-etiket--indirim { background: var(--hata); }
.ipk-etiket--yeni { background: var(--accent); }
.ipk-etiket--bitti { background: #4a4a4a; }

.ipk-urun__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
}

.ipk-fav-btn {
    border: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    color: var(--text);
    transition: color var(--gecis), background var(--gecis);
}

.ipk-fav-btn:hover,
.ipk-fav-btn.is-secili {
    color: var(--hata);
    background: #fff;
}

/* KAYARAK ÇIKAN SEPET DÜĞMESİ — fotoğrafın alt kenarında gizli durur.
   `focus-within` ile klavye kullanıcısı için de açılır; dokunmatikte hover
   olmadığı için düğme kalıcı görünür (aşağıdaki `hover: none` sorgusu). */
.ipk-urun__hizli {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    transform: translateY(100%);
    transition: transform var(--gecis);
}

.ipk-urun:hover .ipk-urun__hizli,
.ipk-urun:focus-within .ipk-urun__hizli {
    transform: translateY(0);
}

.ipk-urun__hizli .ipk-btn {
    width: 100%;
    justify-content: center;
    height: 44px;
}

.ipk-urun__govde {
    padding: 12px 2px 4px;
    text-align: center;
}

/* ÖLÇÜ: marka satırı küçük ve büyük harf; ad 16/25,6/400; fiyat 14/22,4/500. */
.ipk-urun__marka {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 4px;
}

.ipk-urun__ad {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--title);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.ipk-urun__puan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--muted);
    margin: 0 0 4px;
}

.ipk-yildiz {
    color: var(--accent);
    letter-spacing: .04em;
}

.ipk-urun__fiyat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-size: .875rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--title);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

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

.ipk-urun__birim,
.ipk-urun__stok {
    font-size: .75rem;
    margin: 4px 0 0;
    color: var(--muted);
}

.ipk-urun__dip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

@media (hover: none) {
    /*
     * Dokunmatikte hover yok: gizli düğme hiç açılmazdı, o yüzden akışa döner.
     * Sarmalayıcının sabit oranı ve `overflow: hidden` özelliği de kaldırılır —
     * yoksa akışa dönen düğme kutunun dışında kalıp KIRPILIRDI.
     */
    .ipk-urun__medya {
        aspect-ratio: auto;
        overflow: visible;
    }

    .ipk-urun__gorsel {
        position: relative;
        inset: auto;
        aspect-ratio: 1 / 1.25;
        overflow: hidden;
    }

    .ipk-urun__hizli {
        position: static;
        transform: none;
        margin-top: 10px;
    }
}

/* ==========================================================================
   6) LİSTE / KATEGORİ SAYFASI — SOLDA KALICI 260px SÜZGEÇ KOLONU
   --------------------------------------------------------------------------
   Kardeş temalardan ayrışma: nordika süzgeçleri tek bir <details> paneline
   toplar, vast her süzgeci ayrı çekmece yapar. Burada kolon KALICIDIR ve
   sonuç ızgarası beş kolondur — moda vitrininde süzgeç sürekli kullanılır,
   her açışta panel açtırmak tıklama sayısını ikiye katlıyor.
   ========================================================================== */

.ipk-liste {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.ipk-suzgec {
    position: sticky;
    top: 20px;
    border: 1px solid var(--border);
    padding: 20px;
    background: var(--card-bg);
}

.ipk-suzgec__bas {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--title);
    margin: 0 0 14px;
}

.ipk-suzgec__grup + .ipk-suzgec__grup {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ipk-suzgec__baslik {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 0 0 10px;
}

.ipk-suzgec__kok {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--title);
    padding-block: 4px;
}

.ipk-suzgec__alt {
    display: block;
    font-size: .875rem;
    color: var(--muted);
    padding: 3px 0 3px 12px;
}

.ipk-suzgec__kok:hover,
.ipk-suzgec__alt:hover {
    color: var(--accent);
    text-decoration: none;
}

.ipk-suzgec label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    padding-block: 4px;
    cursor: pointer;
}

.ipk-liste__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

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

.ipk-liste__sirala {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--muted);
}

.ipk-baslik-blok {
    padding-block: 28px 20px;
}

.ipk-baslik-blok h1 {
    font-size: calc(2.25rem * var(--font-scale));
    line-height: 1.15;
    margin: 0 0 8px;
}

.ipk-baslik-blok p {
    margin: 0;
    color: var(--muted);
    max-width: 70ch;
}

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

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

/* ==========================================================================
   7) ÜRÜN SAYFASI — SOLDA IZGARA GALERİ, SAĞDA YAPIŞKAN SATIN ALMA
   ========================================================================== */

.ipk-urun-sayfa {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 48px;
    align-items: start;
    padding-block: 24px 56px;
}

/* GALERİ IZGARADIR, KAYDIRICI DEĞİL: iki kolon, ilk fotoğraf iki kolonu
   kaplar. JavaScript yok — büyütme çapa (:target) ile yapılır. */
.ipk-galeri {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ipk-galeri__kare {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.25;
    overflow: hidden;
    background: var(--yuzey);
}

.ipk-galeri__kare:first-child {
    grid-column: span 2;
    aspect-ratio: 1 / .78;
}

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

.ipk-galeri__bos {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.25;
    background: var(--yuzey);
    color: var(--border);
    font-size: 4rem;
    font-weight: 700;
    grid-column: span 2;
}

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

.ipk-satin {
    position: sticky;
    top: 20px;
}

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

.ipk-satin h1 {
    font-size: calc(2rem * var(--font-scale));
    line-height: 1.2;
    margin: 0 0 12px;
}

.ipk-satin__fiyat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 6px;
    font-variant-numeric: tabular-nums;
}

.ipk-satin__fiyat strong {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--title);
}

.ipk-satin__fiyat del {
    color: var(--muted);
    font-size: 1.0625rem;
}

.ipk-satin__indirim {
    background: var(--hata);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    letter-spacing: .04em;
}

.ipk-satin__ozet {
    color: var(--text);
    margin: 14px 0 20px;
}

.ipk-satin__grup {
    margin-bottom: 18px;
}

.ipk-satin__grup > span {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: 8px;
}

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

.ipk-guven {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: .875rem;
    color: var(--muted);
}

.ipk-guven li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ipk-guven svg {
    color: var(--accent);
    flex-shrink: 0;
}

.ipk-eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* --- ardışık bilgi şeritleri: her şerit zemin rengini değiştirir --- */

.ipk-serit {
    padding-block: 48px;
    border-top: 1px solid var(--border);
}

.ipk-serit:nth-of-type(even) {
    background: var(--yuzey);
}

.ipk-serit__bas {
    font-size: calc(1.5rem * var(--font-scale));
    line-height: 1.4;
    margin: 0 0 18px;
}

.ipk-detay {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 32px;
    font-size: .9375rem;
}

.ipk-detay__satir {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.ipk-detay__satir dt {
    color: var(--muted);
}

.ipk-detay__satir dd {
    margin: 0;
    color: var(--title);
    font-weight: 500;
    text-align: right;
}

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

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

.ipk-yorum__ad {
    font-weight: 600;
    color: var(--title);
}

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

.ipk-yorum-form {
    display: grid;
    gap: 14px;
    max-width: 640px;
    margin-top: 22px;
}

/* ==========================================================================
   8) ALT BİLGİ — BEŞ SÜTUN
   ========================================================================== */

.ipk-alt {
    background: var(--siyah);
    color: rgba(255, 255, 255, .78);
    padding-block: 56px 0;
    margin-top: 64px;
    font-size: .875rem;
}

.ipk-alt__izgara {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: 36px;
}

.ipk-alt__marka {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: #fff;
    margin: 0 0 14px;
    display: inline-block;
}

.ipk-alt__adres {
    margin: 0 0 14px;
    line-height: 1.8;
}

.ipk-alt h3 {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #fff;
    margin: 0 0 14px;
}

.ipk-alt li {
    margin-bottom: 8px;
}

.ipk-alt a {
    color: rgba(255, 255, 255, .78);
    transition: color var(--gecis);
}

.ipk-alt a:hover {
    color: #fff;
    text-decoration: none;
}

.ipk-alt__iletisim {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.ipk-alt__iletisim svg {
    color: var(--accent);
    flex-shrink: 0;
}

.ipk-alt__dip {
    margin-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-block: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .6);
}

.ipk-alt__dip p {
    margin: 0;
}

/* Bülten parçası çekirdekten geliyor; koyu zeminde okunur kalsın. */
.ipk-alt .bulten,
.ipk-alt form {
    color: rgba(255, 255, 255, .78);
}

.ipk-alt input[type="email"],
.ipk-alt input[type="text"] {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

.ipk-alt input::placeholder {
    color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   9) ÇEKİRDEK SINIFLARIN İPEK 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 STİLSİZ görünür — minik
   temasında tam olarak bu yaşandı.

   Bu blok nordika.css'teki eşinden TÜRETİLDİ (aynı sınıf listesi, aynı yapı)
   ve İpek'in diline çevrildi: bütün köşe yarıçapları sıfırlandı (999px'lik hap
   rozetler dâhil), vurgu rengi yeşile, düğme hover'ı siyahtan yeşile alındı.
   Renklerin geri kalanı zaten belirteçlerden geliyor.
   ========================================================================== */
/* --- düğmeler: çekirdek adları, Nordika görünümü --- */

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

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

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

.btn--primary,
.btn--navy {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn--gold {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn--gold:hover {
    background: var(--accent);
    border-color: var(--accent);
}

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

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

.badge--danger {
    background: #f7dfe4;
    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: #eef5f2;
}

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

.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: 0;
    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: 0;
    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: var(--accent);
}

.pcard__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.pcard__price strong {
    font-family: var(--baslik-yazi);
    font-size: 1.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,
/* --- FORM DENETİMLERİ ---
   ÖLÇÜLMÜŞ AÇIK: bu blok ipek.css'te YOKTU ve blok ondan türetildiği için
   burada da yoktu. Sonuç: temanın ezmediği her form sayfasında (giriş, üyelik,
   ödeme, iletişim, yorum) girdiler TARAYICI VARSAYILANIYLA çiziliyordu —
   ölçüldü: `2px inset #767676`, dolgu `1px 2px`, genişlik 196px. Hata yok,
   uyarı yok, yalnız çirkin ve dar bir kutu. nordika.css'te blok var, o yüzden
   sorun yalnız bu iki temada görünüyordu.

   `.field` bu depoda İKİ ANLAMDA kullanılıyor: bazı görünümlerde SARMALAYICI
   <div class="field">, bazılarında doğrudan <input class="field">. Sarmalayıcı
   kuralı bu yüzden `div.field`/`label.field` ile sınırlandı — düz `.field`
   olsaydı girdiye de `display: grid` uygulanırdı. */

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

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

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

textarea {
    resize: vertical;
}

.hint {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.field-error {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--hata);
}

.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: 0;
    border: 1px solid rgba(0, 0, 0, .15);
}

.stars {
    color: var(--accent);
}

.check {
    color: var(--basari);
}

/* --- tablolar: KABI kaydırılır, tabloya display:block VERİLMEZ
       (display:block satır/sütun anlamını ekran okuyucudan siler) --- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.datatable,
.kargo-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
    padding: 11px 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);
}

/* ==========================================================================
   10) DUYARLILIK
   --------------------------------------------------------------------------
   Kırılımlar ürün ızgarasının kolon sayısına göre seçildi: beş kolon 1360px
   kapsayıcıda 258px'lik karta denk geliyor, kart 220px'in altına indiğinde
   ad ve fiyat aynı satıra sığmıyor. Sıra: 5 → 4 → 3 → 2 → 1.
   ========================================================================== */

@media (max-width: 1280px) {
    .ipk-izgara {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

@media (max-width: 1080px) {
    /* Menü ana satırdan düşer, çekmeceye geçer. */
    .ipk-menu {
        display: none;
    }

    .ipk-burger {
        display: grid;
        place-items: center;
    }

    .ipk-bas__ic {
        grid-template-columns: auto 1fr;
        min-height: 72px;
    }

    .ipk-bas__sag {
        justify-self: end;
    }

    /* ÜÇ PANELLİ KAHRAMAN İKİ SATIRA DÜŞER: metin paneli üstte tam genişlik,
       fotoğraflar altta yan yana. Üç paneli 1080px'in altında yan yana
       tutmak metin panelini okunmaz bir şerite indiriyordu (ölçüldü). */
    .ipk-kahraman {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    .ipk-kahraman__panel {
        grid-column: 1 / -1;
        order: -1;
        padding-block: 44px;
    }

    .ipk-kahraman__foto {
        aspect-ratio: 3 / 4;
    }

    .ipk-liste {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ipk-suzgec {
        position: static;
    }

    .ipk-urun-sayfa {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ipk-satin {
        position: static;
    }

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

    .filters {
        position: static;
    }
}

/* IZGARA 3 KOLONA BURADA DÜŞER, 860px'te DEĞİL — ÖLÇÜLDÜ: 900px genişlikte
   dört kolon kart başına ~207px bırakıyor ve ad iki satıra taşıp fiyatı
   aşağı itiyordu. Alt sınır ~220px. */
@media (max-width: 1024px) {
    .ipk-izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 860px) {
    .ipk-hizmet__ic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ipk-hizmet__oge:nth-child(3) {
        border-left: 0;
    }

    .ipk-arama {
        display: none;
    }

    h1 { font-size: calc(2.5rem * var(--font-scale)); }
    h2 { font-size: calc(2rem * var(--font-scale)); }
}

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

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

    .ipk-vaat__ic {
        grid-template-columns: 1fr;
    }

    .ipk-vaat__oge + .ipk-vaat__oge {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, .1);
    }

    .ipk-kupon__oge + .ipk-kupon__oge {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .ipk-alt__izgara {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .ipk-galeri__kare:first-child {
        aspect-ratio: 1 / 1;
    }

    .ipk-bolum,
    .section {
        padding-block: 40px;
    }

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

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

    .ipk-katalog__panel {
        display: none;
    }

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

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

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

    .ipk-ust__baglar {
        display: none;
    }
}

/* Yazdırma: gezinme, süzgeç ve satın alma denetimleri kâğıda basılmaz;
   bilgi şeritleri (`.ipk-serit`) BASILIR — ürün açıklaması onlarda. */
@media print {
    .ipk-ust,
    .ipk-bas,
    .ipk-suzgec,
    .ipk-alt,
    .ipk-urun__hizli,
    .ipk-eylem,
    .tema-onizleme {
        display: none !important;
    }

    body {
        background: #fff;
    }
}

/* ==========================================================================
   11) TEMANIN KENDİ DÜĞMESİ
   --------------------------------------------------------------------------
   `.ipk-btn` çekirdek `.btn` ile BİRLİKTE yazılır (class="ipk-btn btn"):
   taban görünüm .btn'den gelir, İpek'e özgü ölçüler buradan. Ayrı bir taban
   yazmak iki düğme dilini çatallandırırdı.
   ========================================================================== */

.ipk-btn {
    letter-spacing: .1em;
    text-transform: none;
    padding-inline: 26px;
}

.ipk-btn--beyaz {
    background: #fff;
    border-color: #fff;
    color: var(--title);
}

.ipk-btn--beyaz:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.ipk-btn--cerceve {
    background: transparent;
    border-color: currentColor;
    color: #fff;
}

.ipk-btn--cerceve:hover {
    background: #fff;
    border-color: #fff;
    color: var(--title);
}

/* --- ana sayfa koleksiyon şeridi: tam genişlik fotoğraf + üstünde metin --- */

.ipk-koleksiyon {
    position: relative;
    isolation: isolate;
}

.ipk-koleksiyon img {
    width: 100%;
    height: clamp(320px, 38vw, 520px);
    object-fit: cover;
}

.ipk-koleksiyon__metin {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    /* Fotoğrafın üstündeki metin HER FOTOĞRAFTA okunmalı: karartma katmanı
       sabit, fotoğraf değişse de kontrast korunur (beyaz metin 21:1'den
       düşmez). */
    background: rgba(0, 0, 0, .38);
    color: #fff;
    padding: 24px;
}

.ipk-koleksiyon__metin h2 {
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: .06em;
}

/* --- reklam yuvası: ızgaranın DIŞINDA, kendi boşluğuyla --- */

.ipk-reklam-alan {
    margin-block: 4px 22px;
    display: flex;
    justify-content: center;
}

.ipk-reklam {
    max-width: 100%;
}

/* --- liste sayfasındaki süzgeç eylem satırı --- */

.ipk-suzgec .ipk-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ipk-suzgec .field {
    width: 100%;
}

.ipk-suzgec .ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.ipk-suzgec .field-row {
    display: grid;
    gap: 4px;
    font-size: .8125rem;
    color: var(--muted);
}

/* --- ürün sayfası: seçenek grupları, stok metni, metin düğmesi --- */

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

.ipk-secim legend {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted);
    padding: 0;
    margin-bottom: 8px;
}

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

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

.ipk-secim__oge:hover {
    border-color: var(--title);
}

/* Seçili seçenek KENARLIKLA değil ZEMİNLE gösterilir: kenarlık kalınlığı
   değişince komşu etiketler kayıyordu (ölçüldü). */
.ipk-secim__oge:has(input:checked) {
    background: var(--siyah);
    border-color: var(--siyah);
    color: #fff;
}

.ipk-secim__oge input {
    /* Radyo düğmesi görünmez ama ODAKLANABİLİR kalır — klavye kullanıcısı
       seçenekler arasında ok tuşlarıyla gezer. `display: none` bunu bozardı. */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ipk-secim__oge:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ipk-stok {
    font-size: .875rem;
    font-weight: 500;
    margin: 0 0 14px;
}

.ipk-btn-metin {
    border: 0;
    background: none;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: color var(--gecis), border-color var(--gecis);
}

.ipk-btn-metin:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ipk-satin__kod {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: .8125rem;
    color: var(--muted);
    margin: 0 0 14px;
}

.ipk-madde {
    display: grid;
    gap: 7px;
    margin-top: 18px;
    font-size: .9375rem;
}

.ipk-madde li {
    position: relative;
    padding-left: 18px;
}

.ipk-madde li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .7em;
    width: 6px;
    height: 6px;
    background: var(--accent);
}