/* =========================================================================
   Ada Büyük — genel arayüz
   Tasarım sistemi: koyu zemin, tek vurgu (teal) + editoryal ikinci renk
   (turuncu). Ada sinematik girişi (.ada-*) korunmuştur; geri kalan tüm
   bölümler ortak jeton/bileşen setine dayanır.
   ========================================================================= */

:root {
    color-scheme: dark;

    /* Zemin ve yüzeyler */
    --bg: #0f1216;
    --bg-deep: #0b0d0f;
    --surface: #161a1f;
    --surface-2: #1d2229;
    --surface-3: #262c34;

    /* Metin */
    --text: #f3f4f2;
    --text-2: #c9ccd1;
    /* Gri kademeler en açık yüzeyde (--surface-3) bile AA'yı geçecek şekilde
       seçildi; sınırlayıcı durum orası. Kademeler arası fark eşit tutuldu
       (text-2→muted 1.40, muted→muted-2 1.37), yoksa hiyerarşi okunmuyordu. */
    --muted: #a7adb5;
    --muted-2: #8c939c;

    /* Çizgiler */
    --line: rgba(255,255,255,.09);
    --line-2: rgba(255,255,255,.15);
    --line-strong: rgba(255,255,255,.22);

    /* Marka renkleri */
    --blue: #2bb3bf;
    --blue-soft: #7fd6de;
    --orange: #e06a2c;
    --orange-soft: #ffa869;
    /* --orange-soft küçük metinde AA'yı geçmiyor (3.71:1). Metin için açık
       ton; dolgu/aksan olarak --orange-soft kullanılmaya devam eder. */
    --orange-text: #ffc9a4;
    --ok: #4ed8a0;

    /* Anlamsal roller: teal = etkileşim, turuncu = editoryal vurgu */
    --accent: var(--blue);
    --accent-soft: var(--blue-soft);
    --accent-ink: #04171a;
    --accent-wash: rgba(43,179,191,.1);
    --focus-ring: 0 0 0 3px rgba(127,214,222,.42);

    /* Boşluk skalası */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
    --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --section-y: clamp(76px,9vw,128px);

    /* Biçim */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --pill: 999px;
    --shadow: 0 32px 90px rgba(0,0,0,.46);
    --shadow-sm: 0 14px 36px rgba(0,0,0,.3);

    /* Tipografi */
    --font-display: 'Space Grotesk','Segoe UI Variable Display',system-ui,sans-serif;
    --font-body: 'Inter','Segoe UI Variable Text','Helvetica Neue',Arial,sans-serif;
    /* Okunabilirlik tabanı: gövde metninde 12px altına inilmez. Ada girişi
       (.ada-*) kendi sabit ölçeğini kullanır ve bu jetonlara bağlı değildir. */
    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-base: .9375rem;
    --fs-lg: 1.0625rem;
    --display-1: clamp(2.6rem,5.6vw,4.6rem);
    --display-2: clamp(2rem,3.8vw,3.2rem);
    --display-3: clamp(1.35rem,2.2vw,1.85rem);
    --label: .75rem;

    --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Temel ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Belgenin gerçek genişliği: 100vw kaydırma çubuğunu da sayar, bu yüzden tam
   genişlik bölümleri taşırıp yarısı kadar sola kaydırıyordu. Fark app.js'te
   ölçülüp --scrollbar'a yazılır; JS yoksa 100vw'ye düşer ve eski davranışı
   korur (gövdedeki overflow-x: clip taşmayı yine de keser). */
html { --page-w: calc(100vw - var(--scrollbar, 0px)); }
/* overflow-x: clip, hidden'ın aksine kaydırma konteyneri OLUŞTURMAZ. Tam
   genişlik (100vw) bölümleri kaydırma çubuğu kadar (≈8-15px) taşıyordu;
   hidden bunu yalnız görsel olarak gizliyor, belge hâlâ yatay kaydırılabiliyordu
   (dokunmatikte fark edilir bir kayma). clip ile taşma tamamen kesilir.
   hidden, clip desteklemeyen eski tarayıcılar için önce yazılır. */
body { margin: 0; overflow-x: hidden; overflow-x: clip; color: var(--text); background: var(--bg); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* Sayfa geneli film grenİ. mix-blend-mode BİLEREK kullanılmıyor: sabit
   konumlu tam ekran bir karışım katmanı, her kaydırma karesinde tüm görüntünün
   yeniden derlenmesini zorluyor ve GPU hızlandırması olmayan makineleri kasıyor.
   Düşük opaklıkta düz bindirme görsel olarak neredeyse aynı, maliyeti yok. */
body::before { content: ''; position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .05; background-image: repeating-radial-gradient(circle at 17% 29%,rgba(255,255,255,.24) 0 1px,transparent 1px 4px); background-size: 7px 9px; }
::selection { color: var(--bg-deep); background: var(--blue-soft); }
a { color: inherit; }
button,input,select,textarea { font: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.container { width: min(1320px,calc(100% - (var(--gutter,32px) * 2))); --gutter: clamp(20px,4vw,44px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 120; padding: 12px 18px; color: var(--bg); background: var(--text); border-radius: var(--pill); transition: top .2s; }
.skip-link:focus { top: 16px; }
.full-bleed { width: var(--page-w); margin-inline: calc(50% - var(--page-w) / 2); padding-inline: max(var(--s5),calc((var(--page-w) - 1320px)/2)); }

/* Satır içi SVG ikonlar (icon() yardımcısı). currentColor + 1em: mevcut
   sarmalayıcıların renk ve font-size'ını miras alır, glif oklarının yazı
   tipine göre kayan hizalaması ortadan kalkar. Sarmalayıcıların display'ine
   karışmaz: inline-block + vertical-align hem düz metin akışında hem grid/flex
   kutularda doğru hizalanır. */
.icon { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; vertical-align: -.125em; }

.media-presented { object-fit: var(--media-fit,cover); object-position: var(--media-x,50%) var(--media-y,50%); }
.media-fit-cover { --media-fit: cover; }.media-fit-contain { --media-fit: contain; }.media-fit-fill { --media-fit: fill; }
.media-x-0{--media-x:0%}.media-x-10{--media-x:10%}.media-x-20{--media-x:20%}.media-x-30{--media-x:30%}.media-x-40{--media-x:40%}.media-x-50{--media-x:50%}.media-x-60{--media-x:60%}.media-x-70{--media-x:70%}.media-x-80{--media-x:80%}.media-x-90{--media-x:90%}.media-x-100{--media-x:100%}
.media-y-0{--media-y:0%}.media-y-10{--media-y:10%}.media-y-20{--media-y:20%}.media-y-30{--media-y:30%}.media-y-40{--media-y:40%}.media-y-50{--media-y:50%}.media-y-60{--media-y:60%}.media-y-70{--media-y:70%}.media-y-80{--media-y:80%}.media-y-90{--media-y:90%}.media-y-100{--media-y:100%}

/* ---------- Başlık çubuğu ---------- */
.site-announcement { position: relative; z-index: 102; padding: 9px 20px; text-align: center; color: var(--accent-ink); background: var(--accent-soft); font-size: var(--label); font-weight: 700; letter-spacing: .06em; }
.site-header { position: fixed; z-index: 90; top: 16px; left: 0; right: 0; pointer-events: none; transition: top .35s var(--ease),transform .5s var(--ease),opacity .4s var(--ease),visibility .4s; }
.site-header.is-scrolled { top: 8px; }
/* visibility: hidden — yalnız opacity:0 bırakılırsa başlıktaki backdrop-filter
   hero boyunca her karede hesaplanmaya devam ediyor. */
.site-header.is-hero-hidden { opacity: 0; visibility: hidden; transform: translateY(-140%); }
.site-header.is-hero-hidden .header-inner { pointer-events: none; }
.header-inner { height: 66px; padding: 0 var(--s2) 0 var(--s4); display: grid; grid-template-columns: 1fr minmax(200px,440px) 1fr; align-items: center; gap: var(--s5); border: 1px solid var(--line-2); border-radius: 18px; background: rgba(13,16,19,.88); box-shadow: 0 16px 44px rgba(0,0,0,.34); backdrop-filter: blur(14px); pointer-events: auto; }

.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; }
.brand-mark { position: relative; width: 34px; height: 34px; display: grid; place-items: center; color: var(--bg-deep); background: var(--text); border-radius: 11px; font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.brand-mark i { position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; background: var(--orange); border: 2px solid var(--bg-deep); border-radius: 50%; }
.brand-mark-image { overflow: hidden; padding: 0; background: transparent; }
.brand-mark-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-copy { display: grid; font-family: var(--font-display); font-size: .9rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.brand-copy small { margin-top: 2px; color: var(--muted); font-family: var(--font-body); font-size: var(--label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.header-search { position: relative; isolation: isolate; }
.header-search::before { content: ''; position: absolute; z-index: 2; left: 15px; top: 50%; width: 13px; height: 13px; border: 1.5px solid var(--muted); border-radius: 50%; box-shadow: 4px 4px 0 -1.5px var(--muted); transform: translateY(-62%); pointer-events: none; transition: border-color .25s,box-shadow .25s; }
.header-search:focus-within::before { border-color: var(--accent-soft); box-shadow: 4px 4px 0 -1.5px var(--accent-soft); }
.header-search input { width: 100%; height: 44px; padding: 0 46px 0 40px; color: var(--text); border: 1px solid var(--line); border-radius: 12px; outline: 0; background: rgba(255,255,255,.04); font-size: var(--fs-sm); transition: border-color .25s,background .25s,box-shadow .25s; }
.header-search input::placeholder { color: var(--muted-2); }
.header-search input:focus { border-color: var(--accent); background: rgba(10,13,16,.96); box-shadow: 0 0 0 3px var(--accent-wash); }
.header-search button { position: absolute; z-index: 2; right: 5px; top: 5px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--accent-ink); background: var(--accent-soft); cursor: pointer; transition: background .2s,transform .2s; }
/* Görsel kutu 34px kalır (44px'e büyütmek 44px'lik alanın içine sığmaz);
   dokunma hedefi görünmez bir katmanla 44px'e taşınır. */
.header-search button::after { content: ''; position: absolute; inset: -5px; }
.header-search button:hover { background: var(--text); transform: translateX(1px); }
.header-search button .icon,.store-direction-copy a i .icon,.brand-marquee-track a i .icon,.product-video-link > i .icon { transition: transform .85s var(--ease); }
.header-search button:hover .icon-arrow-up-right,.store-direction-copy a:hover i .icon-arrow-up-right,.brand-marquee-track a:hover i .icon-arrow-up-right,.product-video-link:hover > i .icon-arrow-up-right { transform: rotate(45deg); }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s2) 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--fs-xs); font-weight: 650; text-decoration: none; white-space: nowrap; transition: border-color .25s,background .25s; }
.header-cta:hover { border-color: var(--accent); background: var(--accent-wash); }
.header-cta i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-soft); background: linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100% / 100% 0 no-repeat; font-style: normal; font-size: .75rem; transition: color .65s,background-size .85s var(--ease); }
.header-cta i .icon { transition: transform .85s var(--ease); }
.header-cta:hover i { color: var(--accent-ink); background-size: 100% 100%; }
.header-cta:hover i .icon-arrow-up-right { transform: rotate(45deg); }

main.container { padding-top: 96px; }

/* ---------- Ortak tipografi ve aksiyonlar ---------- */
/* Tasarım sisteminin okunabilirlik tabanı 12px'tir; .eyebrow tek istisnaydı
   (9.9px). Boyut jetona çekildi, ama kilitli sinematik giriş içindeki tek
   kullanım (.ada-reveal) eski ölçüsünü koruyor: hero'nun render'ı değişmiyor. */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-soft); font-size: var(--label); font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.ada-reveal .eyebrow { font-size: .62rem; letter-spacing: .16em; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(224,106,44,.14); }
.muted { color: var(--muted); }
.prose { max-width: 68ch; color: var(--text-2); font-size: var(--fs-base); line-height: 1.75; }
.prose p { margin: 0 0 1.15em; }

.button { min-height: 46px; padding: 0 var(--s5); display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); border: 1px solid var(--line-2); border-radius: var(--pill); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; font-size: var(--fs-sm); font-weight: 650; transition: transform .25s var(--ease),background .25s,border-color .25s,color .25s; }
.button:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.button i { font-style: normal; }
.button-accent,.button-dark { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.button-accent:hover,.button-dark:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft); }
.button-light { color: var(--text); background: transparent; }

/* Bölüm başlığı — tüm sayfalarda tek bileşen */
.home-section,.catalog-products,.recommendation-section { padding-block: var(--section-y); }
.section-head { margin-bottom: var(--s7); padding-bottom: var(--s5); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--s5); border-bottom: 1px solid var(--line); }
.section-head h2 { margin: var(--s3) 0 0; font-family: var(--font-display); font-size: var(--display-2); font-weight: 600; letter-spacing: -.04em; line-height: 1; text-wrap: balance; }
.section-head p { max-width: 46ch; margin: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.section-index { display: block; color: var(--orange-text); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; }
.section-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; transition: color .25s,border-color .25s; }
.section-link:hover { color: var(--text); border-color: var(--accent); }
.section-link i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--accent-soft); background: linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100% / 100% 0 no-repeat; font-style: normal; transition: color .65s,background-size .85s var(--ease),border-color .65s; }
.section-link i .icon { transition: transform .85s var(--ease); }
.section-link:hover i { color: var(--accent-ink); border-color: var(--accent-soft); background-size: 100% 100%; }
.section-link:hover i .icon-arrow-up-right { transform: rotate(45deg); }

/* =========================================================================
   Ada sinematik giriş — DEĞİŞTİRİLMEDİ
   ========================================================================= */
.ada-intro { position: relative; width: var(--page-w); height: 340vh; margin: -96px 0 0 calc(50% - var(--page-w) / 2); --ada-p: 0; --ada-reveal: 0; background: var(--bg-deep); }
.ada-stage { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; }
.ada-stage::before { content: 'ADA'; position: absolute; z-index: 0; left: 50%; top: 50%; color: transparent; -webkit-text-stroke: 1px rgba(243,244,242,.08); font-family: var(--font-display); font-size: clamp(15rem,43vw,48rem); font-weight: 780; letter-spacing: -.1em; line-height: .7; transform: translate(-51%,-50%); white-space: nowrap; }
.ada-viewport { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: scale(calc(1 + (var(--ada-p) * 4.4))); transform-origin: 55% 35%; will-change: transform,filter; }
.ada-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(.9) contrast(1.04); will-change: transform; }
.ada-grain { position: absolute; inset: 0; opacity: .13; background: repeating-radial-gradient(circle at 17% 29%,rgba(255,255,255,.28) 0 1px,transparent 1px 4px); background-size: 8px 9px; mix-blend-mode: soft-light; }
.ada-vignette { position: absolute; inset: 0; opacity: var(--ada-reveal); background: rgba(11,13,15,.9); }
.ada-frameline { position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.28); opacity: calc(1 - var(--ada-p)); }
.ada-lead { position: absolute; z-index: 3; left: 6vw; top: 50%; width: min(560px,39vw); opacity: calc(1 - (var(--ada-p) * 1.75)); transform: translateY(calc(-50% + (var(--ada-p) * -70px))); will-change: opacity,transform; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-soft); font-size: .62rem; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.hero-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(224,106,44,.13); }
.ada-lead h1 { margin: 18px 0 24px; display: grid; font-family: var(--font-display); font-size: clamp(4rem,7.4vw,9rem); font-weight: 610; letter-spacing: -.085em; line-height: .76; }
.ada-accent { color: var(--orange-soft); margin-left: .48em; }
.ada-lead > p { max-width: 430px; margin: 0; color: #c5c7c9; font-size: .82rem; line-height: 1.7; }
.ada-hint { margin-top: 34px; display: inline-flex; align-items: center; gap: 13px; color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ada-hint i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--orange-soft); font-style: normal; animation: ada-bob 1.8s ease-in-out infinite; }
@keyframes ada-bob { 50% { transform: translateY(6px); } }
.ada-reveal { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(720px,calc(100% - 40px)); padding: clamp(34px,5vw,62px); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 24px; text-align: center; background: rgba(17,19,21,.96); box-shadow: 0 30px 90px rgba(0,0,0,.4); opacity: var(--ada-reveal); transform: translate(-50%,calc(-46% + ((1 - var(--ada-reveal)) * 100px))) scale(calc(.94 + (var(--ada-reveal) * .06))); pointer-events: none; will-change: opacity,transform; }
.ada-intro.is-open .ada-reveal { pointer-events: auto; }
.ada-reveal .eyebrow { justify-content: center; color: var(--orange-soft); }
.ada-quote { max-width: 620px; margin: 24px auto 0; color: var(--text); font-family: var(--font-display); font-size: clamp(2.25rem,4.8vw,4.6rem); font-weight: 560; letter-spacing: -.065em; line-height: .92; text-wrap: balance; }
.ada-stats { margin-top: 28px; padding-top: 20px; display: flex; justify-content: center; gap: clamp(28px,6vw,60px); border-top: 1px solid var(--line-strong); }
.ada-stat { display: grid; gap: 5px; }.ada-stat strong { font-family: var(--font-display); font-size: clamp(1.7rem,2.6vw,2.4rem); letter-spacing: -.05em; line-height: 1; }.ada-stat small { color: var(--muted); font-size: .46rem; font-weight: 740; letter-spacing: .14em; text-transform: uppercase; }
.ada-scrollcue { position: absolute; z-index: 5; left: 50%; bottom: 28px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); text-decoration: none; transform: translateX(-50%); }
/* Yavaş cihaz koruması (app.js): tam ekran ölçekleme ve filtre kapatılır.
   Sahnenin görünümü sabit kalır, yalnız zoom hareketi düşer. */
.ada-intro.ada-no-zoom .ada-viewport { transform: none; will-change: auto; }
.ada-intro.ada-no-zoom .ada-photo { filter: none; will-change: auto; }
/* ======================= Ada girişi sonu ======================= */

.hx-anchor { display: block; height: 0; scroll-margin-top: 90px; }

/* ---------- Ana sayfa arama bandı ---------- */
.home-find { padding: var(--section-y) 0 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: end; gap: var(--s5) var(--s7); }
.home-find h2 { margin: var(--s3) 0 0; font-family: var(--font-display); font-size: var(--display-2); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.home-find .page-search { max-width: none; margin-top: 0; }

/* ---------- Doğrudan mağazaya ---------- */
.store-direction { width: var(--page-w); margin: 0 0 var(--section-y) calc(50% - var(--page-w) / 2); padding: clamp(60px,7vw,96px) max(var(--s5),calc((var(--page-w) - 1320px)/2)); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); align-items: center; gap: clamp(32px,6vw,88px); overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(160deg,#0c1013,#141a1f); }
.store-direction-copy h2 { margin: var(--s4) 0 var(--s5); font-family: var(--font-display); font-size: var(--display-1); font-weight: 600; letter-spacing: -.05em; line-height: .92; }
.store-direction-copy h2 em { color: var(--accent-soft); font-style: normal; }
.store-direction-copy p { max-width: 42ch; margin: 0; color: var(--text-2); }
.store-direction-copy a { margin-top: var(--s6); display: inline-flex; align-items: center; gap: var(--s3); min-height: 46px; padding: 0 var(--s5); border-radius: var(--pill); color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; transition: transform .25s var(--ease),background .25s; }
.store-direction-copy a:hover { transform: translateY(-2px); background: var(--text); }
.store-direction-copy a i { font-style: normal; }
.store-direction-portrait { position: relative; margin: 0; display: grid; place-items: center; }
.store-direction-portrait { min-height: min(680px,76svh); grid-template-columns:1fr 1fr; align-items:end; }
.store-direction-portrait img { position: relative; z-index: 2; width: auto; max-width: 100%; max-height: min(680px,74svh); height: auto; object-fit: contain; border-radius: var(--radius-lg); filter: saturate(.95); }
.store-portrait-left { z-index:1!important; justify-self:end; margin-right:-22%; transform:translateY(4%) scale(.9); opacity:.72; }
.store-portrait-right { justify-self:start; margin-left:-18%; }
.store-direction-portrait > .store-portrait:only-of-type { grid-column:1/-1; justify-self:center; margin-inline:0; }
.store-orbit { position: absolute; z-index: 1; width: min(420px,80%); aspect-ratio: 1; border: 1px solid rgba(127,214,222,.22); border-radius: 50%; }
.store-direction-portrait figcaption { position: absolute; z-index: 3; left: var(--s5); right: var(--s5); bottom: var(--s5); display: flex; align-items: center; gap: var(--s3); color: var(--text); font-size: var(--label); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.store-direction-portrait figcaption i { height: 1px; flex: 1; background: linear-gradient(90deg,var(--blue),var(--orange)); }

/* ---------- Kategori indeksi ----------
   Burada eskiden 860px yüksekliğinde, ortasında stok bir 3B gezegen render'ı
   olan bir bölüm vardı; kategoriler de en alta sıkışmış 96px'lik bir şeride.
   Artık kategoriler bölümün kendisi: her satır adı, ürün sayısını ve hedefi
   gösterir. */
.category-index { width: var(--page-w); margin: 0 0 var(--section-y) calc(50% - var(--page-w) / 2); padding: clamp(60px,7vw,96px) max(var(--s5),calc((var(--page-w) - 1320px)/2)); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(32px,5vw,80px); align-items: start; border-block: 1px solid var(--line); background: linear-gradient(160deg,#0c1013,#141a1f); }
.category-index-head { position: sticky; top: 108px; }
.category-index-head h2 { margin: var(--s3) 0 0; font-family: var(--font-display); font-size: var(--display-2); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.category-index-head p { max-width: 34ch; margin: var(--s4) 0 0; color: var(--text-2); line-height: 1.6; }
.category-index-head .section-link { margin-top: var(--s5); }

.category-list { display: grid; border-top: 1px solid var(--line-strong); }
.category-list a { min-height: 84px; padding: var(--s4) var(--s3); display: grid; grid-template-columns: 34px minmax(0,1fr) auto 28px; align-items: center; gap: var(--s4); border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: padding-inline .35s var(--ease),background .25s,color .25s; }
.category-list a:hover { padding-inline: var(--s5) var(--s4); background: rgba(127,214,222,.055); }
.category-list small { color: var(--orange-text); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; }
.category-list strong { min-width: 0; overflow: hidden; font-family: var(--font-display); font-size: clamp(1.4rem,2.6vw,2.4rem); font-weight: 620; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.category-list span { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.category-list i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); font-style: normal; transition: color .25s,border-color .25s,transform .35s var(--ease); }
.category-list a:hover i { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); transform: translateX(3px); }

/* Ana sayfada koleksiyonlar: her biri Ada'nın bir kanalı. Eskiden çıplak üç dev
   metin satırıydı; kanal rengi kullanılmıyor, açıklama gizleniyor ve bölümün
   yarısı boş kalıyordu. Artık kanal rengini taşıyan, sayıyı ve açıklamayı
   gösteren kartlar. */
.home-collections .collection-grid { grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); gap: var(--s3); }
.home-collections .collection-card { min-height: 300px; padding: var(--s5); justify-content: flex-end; gap: var(--s3); border-color: color-mix(in srgb,var(--collection-accent) 26%,var(--line)); }
.home-collections .collection-card::before { background: linear-gradient(200deg,color-mix(in srgb,var(--collection-accent) 26%,transparent),transparent 62%); transition: opacity .45s var(--ease); }
.home-collections .collection-card:hover::before { opacity: .55; }
.home-collections .collection-card strong { margin: 0; font-size: clamp(2rem,3.4vw,3.2rem); letter-spacing: -.05em; line-height: 1; }
.home-collections .collection-count { align-self: flex-start; order: -1; margin-bottom: auto; border-color: color-mix(in srgb,var(--collection-accent) 45%,var(--line-2)); color: var(--text); }
.home-collections .collection-desc { display: block; max-width: 34ch; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.home-collections .collection-go { margin-top: var(--s2); }
.section-lead { max-width: 46ch; margin: var(--s3) 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

/* Ana sayfada hatalı/temsili ürün medyasını büyütmek yerine temiz bir editoryal
   indeks kullanılır. Ürün detayındaki galeri ve katalog kartları değişmez. */
.featured-products { position: relative; isolation: isolate; overflow: clip; }
.featured-products .section-head { position: relative; z-index: 2; }
.featured-products .product-grid { position: relative; z-index: 1; display: block; border-top: 1px solid var(--line-strong); counter-reset: radar-product; }
.featured-products .product-card { counter-increment: radar-product; min-height: 0; padding: var(--s4); display: grid; grid-template-columns: 44px 84px minmax(0,1fr); align-items: center; gap: var(--s4); border-bottom: 1px solid var(--line); transition: padding .45s var(--ease),background .3s; }
.featured-products .product-card::before { content: counter(radar-product,decimal-leading-zero); color: var(--orange-text); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; }
.featured-products .product-card:hover { padding-inline: var(--s5); background: rgba(127,214,222,.045); }
.featured-products .product-card-media { width: 84px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.featured-products .product-card-media :is(.card-badges,.card-video,.card-go) { display: none; }
.featured-products .product-card-body { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px var(--s4); }
.featured-products .card-brand-name { grid-column: 1; }
.featured-products .card-title { grid-column: 1; }
.featured-products .card-sponsor-disclosure { grid-column: 2; grid-row: 1 / span 2; }
.featured-products .card-brand-name { font-size: var(--fs-xs); }
.featured-products .card-title { font-size: clamp(1.35rem,2.2vw,2rem); letter-spacing: -.035em; line-height: 1.1; }
.featured-products .card-sponsor-disclosure { justify-self: end; }

/* ---------- Koleksiyonlar ----------
   Izgara öğe sayısına uyum sağlar: 2 koleksiyonda iki geniş kart, 6'da üç
   sütun. Sabit sütunlu ızgara az veriyle bölümü boş gösteriyordu. */
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr)); gap: var(--s4); }
.collection-card { position: relative; min-height: 260px; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--surface); transition: transform .35s var(--ease),border-color .3s; }
.collection-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(165deg,color-mix(in srgb,var(--collection-accent) 38%,transparent),transparent 60%); }
.collection-card::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px; background: var(--collection-accent); }
.collection-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.collection-card > * { position: relative; z-index: 2; }
.collection-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.collection-index { color: var(--muted); font-size: var(--label); font-weight: 700; letter-spacing: .14em; }
.collection-count { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--pill); color: var(--text); font-size: var(--label); font-weight: 650; white-space: nowrap; }
.collection-card strong { margin-top: auto; font-family: var(--font-display); font-size: var(--display-3); font-weight: 620; letter-spacing: -.03em; line-height: 1.1; }
.collection-desc { max-width: 40ch; color: var(--text-2); font-size: var(--fs-sm); }
.collection-go { margin-top: var(--s3); display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.collection-go i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--accent-soft); background: linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100% / 100% 0 no-repeat; font-style: normal; transition: color .65s,background-size .85s var(--ease),transform .8s var(--ease); }
.collection-card:hover .collection-go i { color: var(--accent-ink); border-color: var(--accent-soft); background-size: 100% 100%; transform: translateX(3px); }
.collections-index { padding-bottom: var(--section-y); }
.collections-index .page-head { max-width: 780px; }
.collections-index .collection-grid { margin-top: var(--s7); }
.js [data-auto-submit-filters] .filter-submit,
.js .catalog-quick-filter [data-auto-submit-filters] > .button[type='submit'] { display: none; }

/* ---------- Süreç: video → ürün → mağaza ---------- */
.process-steps { counter-reset: process; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s4); }
.process-step { position: relative; padding: var(--s6) var(--s5) var(--s5); display: grid; align-content: start; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.process-num { color: var(--orange-soft); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; }
.process-step h3 { margin: 0; font-family: var(--font-display); font-size: var(--display-3); font-weight: 600; letter-spacing: -.03em; }
.process-step p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.process-tag { margin-top: var(--s2); justify-self: start; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--accent-soft); font-size: var(--label); }

/* ---------- Kategoriler ---------- */
/* auto-fill (auto-fit değil): tek kategoride kart tüm satıra yayılmaz,
   normal genişliğinde kalır. */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr)); gap: var(--s3); }
.category-card { position: relative; min-height: 170px; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; background: var(--surface); overflow: hidden; transition: background .3s,border-color .3s,transform .3s var(--ease); }
.category-card small { color: var(--muted); font-size: var(--label); font-weight: 700; letter-spacing: .12em; }
.category-card strong { margin-top: auto; font-family: var(--font-display); font-size: var(--display-3); font-weight: 620; letter-spacing: -.03em; line-height: 1.1; }
.category-card > span { color: var(--muted); font-size: var(--fs-sm); }
.category-card i { position: absolute; right: var(--s4); top: var(--s4); width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); font-style: normal; transition: transform .35s var(--ease),background .3s,color .3s,border-color .3s; }
.category-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.category-card i { background: linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100% / 100% 0 no-repeat; transition: color .65s,background-size .85s var(--ease),border-color .65s; }
.category-card i .icon { transition: transform .85s var(--ease); }
.category-card:hover i { color: var(--accent-ink); border-color: var(--accent-soft); background-size: 100% 100%; }
.category-card:hover i .icon-arrow-up-right { transform: rotate(45deg); }

/* ---------- Markalar ---------- */
.brand-index { padding-block: var(--s8) var(--s9); width: var(--page-w); margin-left: calc(50% - var(--page-w) / 2); overflow: hidden; border-top: 1px solid var(--line); }
.brand-index > .eyebrow { padding-inline: max(var(--s5),calc((var(--page-w) - 1320px)/2)); }
.brand-marquee { margin-top: var(--s5); overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.brand-marquee-track { width: max-content; display: flex; align-items: center; gap: clamp(28px,4vw,56px); animation: brand-marquee 38s linear infinite; }
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
.brand-marquee-track a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted-2); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; white-space: nowrap; transition: color .25s; }
.brand-marquee-track a i { margin-left: clamp(28px,4vw,56px); color: var(--orange); font-style: normal; }
.brand-marquee-track a:hover { color: var(--text); }
@keyframes brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Ürün kartı ---------- */
/* Sabit 4 sütun yerine uyum sağlayan ızgara: tek üründe dev bir boşluk yerine
   sütun sayısı içeriğe göre daralır. --card-min ile bölüm bazında ayarlanır. */
.product-grid { --card-min: 250px; display: grid; grid-template-columns: repeat(auto-fill,minmax(min(var(--card-min),100%),1fr)); gap: var(--s5) var(--s4); }
.compact-grid,.search-grid { --card-min: 220px; }
.product-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.product-card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .45s var(--ease),box-shadow .55s var(--ease),transform .55s var(--ease); }
.product-card-media > img,.image-placeholder { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.product-card-media > img { object-fit: var(--media-fit,cover); transform-origin: var(--media-origin,50% 50%); transition: transform 1.05s var(--ease),filter .55s var(--ease); }
/* Kartın üstüne gelince: kart yükselir, görsel yavaşça yaklaşır, üstüne ince
   bir perde iner. Eskiden yalnız scale(1.04)/.6s vardı; kısa mesafeyi hızlı
   bitiren hareket zıplama gibi duruyordu. */
.product-card:hover .product-card-media,.product-card:focus-within .product-card-media { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.product-card:hover .product-card-media > img,.product-card:focus-within .product-card-media > img { transform: scale(1.045); filter: saturate(1.06) contrast(1.02); }
.product-card-media::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(205deg,transparent 42%,rgba(7,9,11,.58)); transition: opacity .6s var(--ease); }
.product-card:hover .product-card-media::after,.product-card:focus-within .product-card-media::after { opacity: 1; }
/* Düşük çözünürlüklü kaynak: ölçekleyici görseli büyütmez. Kutuyu doldurmaya
   zorlamak bulanık bir leke bırakıyor, olduğu gibi ortalamak da kenarlarda gri
   boşluk. Aynı görselin bulanık, büyütülmüş bir kopyası zemine serilir: çerçeve
   kenardan kenara dolar, keskin görsel üstte doğal boyutunda durur.
   --media-backdrop'ı şablon basar; sınıf yalnız kaynak görsel küçükken düşer. */
.product-card-media.is-lowres,
.gallery-stage.is-lowres { display: grid; place-items: center; background: var(--surface-2); }
.product-card-media.is-lowres::before,
.gallery-stage.is-lowres::before { content: ''; position: absolute; z-index: 0; inset: -10%; background: var(--media-backdrop,none) center / cover no-repeat; filter: blur(32px) saturate(1.45) brightness(.6); transform: scale(1.04); transition: transform 1.05s var(--ease),filter .55s var(--ease); }
.product-card:hover .product-card-media.is-lowres::before { transform: scale(1.1); filter: blur(32px) saturate(1.6) brightness(.66); }
/* Genişlik açıkça verilir: "auto" bırakılırsa henüz yüklenmemiş (lazy) görsel
   sıfır genişlikte kalıyor ve kart boş görünüyordu. */
.product-card-media.is-lowres > img,
.gallery-stage.is-lowres > img {
    width: min(72%, calc(var(--media-natural, 100%) * var(--media-scale, 1.5)));
    height: auto;
    max-height: 72%;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
/* Ürün sayfasındaki büyük çerçevede biraz daha yer kaplayabilir. */
.gallery-stage.is-lowres { --media-scale: 2; }
.image-placeholder { display: grid; place-items: center; color: var(--muted-2); background: var(--surface-2); font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
.card-badges { position: absolute; left: var(--s3); top: var(--s3); z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.card-badge { padding: 5px 9px; border-radius: var(--pill); color: var(--accent-ink); background: var(--accent-soft); font-size: var(--label); font-weight: 700; letter-spacing: .04em; }
.card-badge.badge-new { color: #2a1206; background: var(--orange-soft); }
/* Videoda geçen ürün işareti. Rozetlerin karşı köşesinde, kartın tıklama
   alanını bölmemesi için pointer-events kapalı. */
.card-video { position: absolute; z-index: 2; right: var(--s3); top: var(--s3); width: 30px; height: 30px; display: grid; place-items: center; pointer-events: none; border-radius: 50%; color: #2a1206; background: var(--orange-soft); font-size: .8rem; box-shadow: var(--shadow-sm); }
.card-go { position: absolute; z-index: 2; right: var(--s3); bottom: var(--s3); width: 38px; height: 38px; display: grid; place-items: center; pointer-events: none; border: 1px solid var(--accent-soft); border-radius: 50%; color: var(--accent-soft); background: linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100% / 100% 0 no-repeat; font-size: 1rem; font-style: normal; opacity: 0; transform: scale(.7); box-shadow: var(--shadow-sm); transition: opacity .55s,transform .8s var(--ease),color .65s,background-size .85s var(--ease); }
.card-go .icon { transition: transform .85s var(--ease); }
.product-card:hover .card-go,.product-card:focus-within .card-go { color: var(--accent-ink); opacity: 1; transform: scale(1); background-size: 100% 100%; }
.product-card:hover .card-go .icon-arrow-up-right,.product-card:focus-within .card-go .icon-arrow-up-right { transform: rotate(45deg); }
.product-card-body { display: grid; gap: 5px; }
.card-brand-name { color: var(--accent-soft); font-size: var(--label); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.card-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--accent-soft); }
/* Başlık bağlantısı kartın tamamını kaplar; sponsor açıklaması üstte kalır. */
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.card-sponsor-disclosure { position: relative; z-index: 2; }
/* --muted-2 bu boyutta AA'yı geçmiyordu (3.98:1); --muted ile 6.5:1. */
.card-sponsor-disclosure summary { width: max-content; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; list-style: none; font-size: var(--label); }
.card-sponsor-disclosure summary::-webkit-details-marker { display: none; }
.card-sponsor-disclosure summary:hover { color: var(--muted); }
.card-sponsor-disclosure summary i { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font-style: normal; font-size: .5625rem; }
.card-sponsor-disclosure > div { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 8px); width: 250px; padding: var(--s4); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--shadow); }
.card-sponsor-disclosure > div strong { font-size: var(--fs-sm); }
.card-sponsor-disclosure p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }

/* ---------- Sayfa başlığı (katalog + arama) ---------- */
.breadcrumbs { margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--muted-2); font-size: var(--fs-xs); }
/* Yoğun satır içi gezinme: WCAG 2.5.8 için en az 24px yükseklik. */
.breadcrumbs a { min-height: 24px; display: inline-flex; align-items: center; text-decoration: none; transition: color .2s; }
.breadcrumbs a:hover { color: var(--accent-soft); }
.breadcrumbs [aria-current] { color: var(--muted); }

.page-head { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 18ch; margin: var(--s3) 0 0; font-family: var(--font-display); font-size: var(--display-1); font-weight: 600; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.page-head > p { max-width: 62ch; margin: var(--s4) 0 0; color: var(--muted); }
.page-search { position: relative; max-width: 640px; margin-top: var(--s6); }
.page-search input[type='search'] { width: 100%; height: 58px; padding: 0 124px 0 var(--s5); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); outline: 0; font-size: var(--fs-base); transition: border-color .25s,box-shadow .25s; }
.page-search input[type='search']::placeholder { color: var(--muted-2); }
.page-search input[type='search']:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.page-search > button { position: absolute; right: 6px; top: 6px; height: 46px; padding: 0 var(--s5); border: 0; border-radius: var(--radius-sm); color: var(--accent-ink); background: var(--accent-soft); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; transition: background .2s; }
.page-search > button:hover { background: var(--text); }
.search-prompts { max-width: 640px; margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.search-prompts > span { color: var(--muted); font-size: var(--fs-xs); }
.search-prompts a { min-height: 40px; padding: 6px 14px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); color: var(--muted); font-size: var(--fs-xs); text-decoration: none; transition: color .2s,border-color .2s; }
.search-prompts a:hover { color: var(--text); border-color: var(--accent); }
.search-suggestion { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.search-suggestion a { color: var(--accent-soft); }

.child-categories { margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--s5); border-top: 1px solid var(--line); }
.child-categories a { padding: var(--s4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); text-decoration: none; transition: color .2s,padding .25s var(--ease); }
.child-categories a:hover { color: var(--text); padding-left: 6px; }
.child-categories span { color: var(--accent-soft); }

.catalog-switcher { margin-top: var(--s6); display: grid; gap: var(--s3); }
.catalog-switcher > span { color: var(--muted-2); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; }
.catalog-switcher div { display: flex; flex-wrap: wrap; gap: var(--s2); }
.catalog-switcher a { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); font-size: var(--fs-sm); text-decoration: none; transition: border-color .2s,background .2s; }
.catalog-switcher a:hover { border-color: var(--line-2); background: rgba(255,255,255,.04); }
.catalog-switcher a[aria-current='page'] { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft); }

/* ---------- Filtreler ---------- */
.filter-panel { position: sticky; top: 96px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
/* Çekmece başlığı yalnız dar ekranda görünür; geniş ekranda panel hep açıktır. */
.filter-drawer-toggle { display: none; }

/* Etkin filtreler sonuçların hemen üstünde, tek tek kaldırılabilir. */
.active-filters { margin: calc(var(--s5) * -1 + var(--s2)) 0 var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.active-filter-chip { min-height: 34px; padding: 0 var(--s2) 0 var(--s3); display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--accent-soft); border-radius: var(--pill); color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; font-size: var(--fs-xs); font-weight: 650; transition: background .2s,border-color .2s; }
.active-filter-chip i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(4,23,26,.18); font-style: normal; font-size: .75rem; }
.active-filter-chip:hover { background: var(--text); border-color: var(--text); }
.active-filter-clear { min-height: 34px; display: inline-flex; align-items: center; padding-inline: var(--s2); color: var(--muted); font-size: var(--fs-xs); }
.active-filter-clear:hover { color: var(--text); }
.filter-head { padding-bottom: var(--s4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); border-bottom: 1px solid var(--line); }
.filter-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.filter-head a { min-height: 32px; display: inline-flex; align-items: center; color: var(--accent-soft); font-size: var(--fs-xs); }
.filter-panel fieldset,.catalog-filter-box fieldset { min-width: 0; margin: var(--s5) 0 0; padding: 0; border: 0; }
.filter-panel legend,.catalog-filter-box legend { margin-bottom: var(--s2); padding: 0; color: var(--text); font-size: var(--label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.filter-options,.catalog-filter-options { max-height: 232px; padding-right: 4px; display: grid; gap: 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.filter-options label,.catalog-filter-options label { min-width: 0; padding: 8px 12px; display: flex; align-items: center; gap: var(--s3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; transition: color .2s,background .2s,border-color .2s; }
.filter-options label:hover,.catalog-filter-options label:hover { color: var(--text); background: rgba(255,255,255,.05); }
.filter-options label:has(input:checked),.catalog-filter-options label:has(input:checked) { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft); }
.filter-options label:has(input:checked) small,.catalog-filter-options label:has(input:checked) small { color: rgba(4,23,26,.65); }
.filter-options input,.catalog-filter-options input,.filter-new input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.filter-options label > span,.catalog-filter-options label > span { min-width: 0; flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); font-size: var(--fs-sm); }
.filter-options small,.catalog-filter-options small { min-width: 24px; color: var(--muted); font-size: var(--fs-xs); text-align: right; }
.filter-new { margin-top: var(--s5); padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); border: 1px solid rgba(224,106,44,.28); border-radius: var(--radius-sm); color: var(--orange-soft); background: rgba(224,106,44,.08); cursor: pointer; font-size: var(--fs-sm); font-weight: 650; }
.filter-submit { width: 100%; margin-top: var(--s5); }

.catalog-quick-filter { position: relative; margin-top: var(--s7); padding: var(--s5); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg,rgba(127,214,222,.08),rgba(255,255,255,.025) 48%,rgba(224,106,44,.055)); }
.catalog-quick-filter::after { content: ''; position: absolute; right: -90px; top: -130px; width: 280px; aspect-ratio: 1; border: 1px solid rgba(127,214,222,.12); border-radius: 50%; pointer-events: none; }
.catalog-quick-filter-head { position: relative; z-index: 1; padding-bottom: var(--s4); display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.55fr); align-items: end; gap: var(--s5); border-bottom: 1px solid var(--line); }
.catalog-quick-filter-head .eyebrow { margin-bottom: var(--s2); }
.catalog-quick-filter-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem,2.2vw,2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.catalog-quick-filter-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.catalog-quick-filter > form { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s5); }
.catalog-quick-filter fieldset { min-width: 0; margin: var(--s5) 0 0; padding: 0; border: 0; }
.catalog-quick-filter legend { width: 100%; margin: 0 0 var(--s3); padding: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.catalog-quick-filter legend span { color: var(--text); font-size: var(--label); font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.catalog-quick-filter legend small { color: var(--muted-2); font-size: var(--label); }
.catalog-quick-filter-options { display: flex; flex-wrap: wrap; gap: var(--s2); }
.catalog-quick-filter-options label { position: relative; min-height: 42px; padding: 7px 8px 7px 15px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-2); border-radius: var(--pill); color: var(--text-2); background: rgba(11,13,15,.34); cursor: pointer; font-size: var(--fs-xs); font-weight: 650; transition: color .2s,border-color .2s,background .2s,transform .2s var(--ease); }
.catalog-quick-filter-options label:hover { color: var(--text); border-color: var(--accent); background: rgba(127,214,222,.08); transform: translateY(-1px); }
.catalog-quick-filter-options input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.catalog-quick-filter-options label:has(input:focus-visible) { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.catalog-quick-filter-options label:has(input:checked) { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
.catalog-quick-filter-options label small { min-width: 26px; height: 26px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--pill); color: var(--muted); background: rgba(255,255,255,.07); font-size: var(--label); }
.catalog-quick-filter-options label:has(input:checked) small { color: var(--accent-ink); background: rgba(4,23,26,.15); }
.catalog-quick-filter form > button { grid-column: 1/-1; justify-self: start; margin-top: 0; }

.results-head { margin-bottom: var(--s5); padding-bottom: var(--s4); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4); border-bottom: 1px solid var(--line); }
.results-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.results-head strong { color: var(--text); font-family: var(--font-display); font-size: var(--fs-lg); }
.results-head a { min-height: 40px; display: inline-flex; align-items: center; color: var(--accent-soft); font-size: var(--fs-sm); }
.search-layout { padding: var(--s7) 0 var(--section-y); display: grid; grid-template-columns: 264px minmax(0,1fr); gap: var(--s7); align-items: start; }

/* ---------- Ürün detayı ---------- */
/* Alt boşluk sonraki bölümün kendi üst boşluğuyla toplanıp iki ekranlık bir
   boşluğa dönüşüyordu; ayırmayı çizgili bölüm başlangıcı yapsın. */
.product-detail { padding: var(--s7) 0 var(--s8); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(32px,5vw,80px); align-items: start; }
.product-gallery { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr); gap: var(--s3); align-items: start; }
.product-gallery:only-child,.product-gallery:has(> .gallery-stage:first-child) { grid-template-columns: minmax(0,1fr); }
.gallery-thumbs { grid-column: 1; display: flex; flex-direction: column; gap: var(--s2); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb { position: relative; flex: 0 0 auto; width: 76px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; opacity: .55; transition: opacity .2s,border-color .2s; }
.gallery-thumb:hover { opacity: .9; }
.gallery-thumb.is-active { border-color: var(--accent-soft); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; }

/* Sahne bir düğme: tık tam ekranı açar, klavyeyle de erişilir. */
.gallery-stage { grid-column: 2; position: relative; width: 100%; padding: 0; aspect-ratio: .92; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: zoom-in; }
.gallery-stage > img { position: relative; z-index: 1; width: 100%; height: 100%; }
.gallery-stage.is-zooming { cursor: crosshair; }
/* Büyütecin gezdiği kutu: içini karartmaz, yalnız sınırını gösterir. */
.gallery-lens { position: absolute; z-index: 3; left: 0; top: 0; display: none; border: 1px solid rgba(255,255,255,.85); border-radius: 4px; background: rgba(255,255,255,.18); box-shadow: 0 0 0 9999px rgba(8,10,12,.28); pointer-events: none; }
.gallery-stage.is-zooming .gallery-lens { display: block; }
.gallery-hint { position: absolute; z-index: 4; left: var(--s4); bottom: var(--s4); display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--pill); color: var(--text); background: rgba(10,12,14,.72); backdrop-filter: blur(10px); font-size: var(--label); transition: opacity .25s; }
.gallery-stage.is-zooming .gallery-hint { opacity: 0; }

/* Büyüteç paneli sağdaki özetin üstüne biner. Sahne kadar uzun, özet sütunu
   kadar geniş: Trendyol'daki gibi kırpılan alan tam olarak burada açılır. */
.gallery-zoom { position: absolute; z-index: 60; left: calc(100% + clamp(32px,5vw,80px)); top: 0; width: min(46vw,560px); height: 100%; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s linear; }
.gallery-zoom.is-visible { opacity: 1; visibility: visible; }
.gallery-zoom img { position: absolute; left: 0; top: 0; max-width: none; }

/* ---------- Tam ekran görüntüleyici ---------- */
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; z-index: 220; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(4,6,8,.95); backdrop-filter: blur(12px); }
.lightbox-top { position: relative; z-index: 2; padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s4); }
.lightbox-count { color: var(--text); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.lightbox-title { flex: 1; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.lightbox-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--text); background: rgba(20,24,29,.9); cursor: pointer; font-size: 1.1rem; transition: background .2s,border-color .2s; }
.lightbox-button:hover { border-color: var(--accent-soft); background: var(--surface-2); }
.lightbox-stage { position: relative; z-index: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; }
.lightbox-stage.is-zoomed { cursor: grab; }
.lightbox-stage.is-zoomed:active { cursor: grabbing; }
.lightbox-stage img { width: 100%; height: 100%; max-width: min(1240px,92vw); object-fit: contain; user-select: none; will-change: transform; transition: transform .16s ease-out; }
.lightbox-stage.is-zoomed img { transition: none; }
/* Oklar sahnenin kenarında, dikey ortada durur: geri tuşu hep solda görünür. */
.lightbox-nav { position: absolute; z-index: 3; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--text); background: rgba(20,24,29,.92); cursor: pointer; font-size: 1.2rem; transform: translateY(-50%); transition: background .2s,border-color .2s; }
.lightbox-nav:hover { border-color: var(--accent-soft); background: var(--surface-2); }
.lightbox-prev { left: clamp(10px,2vw,28px); }
.lightbox-next { right: clamp(10px,2vw,28px); }
.lightbox-bottom { position: relative; z-index: 2; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.lightbox-thumbs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.lightbox-thumbs::-webkit-scrollbar { display: none; }
.lightbox-thumb { flex: 0 0 auto; width: 58px; height: 58px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; opacity: .5; transition: opacity .2s,border-color .2s; }
.lightbox-thumb.is-active { border-color: var(--accent-soft); opacity: 1; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); }
.lightbox-scale { min-width: 52px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: center; }

.product-summary { position: sticky; top: 96px; }
.product-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--accent-soft); font-size: var(--label); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.product-meta-line a { min-height: 24px; display: inline-flex; align-items: center; text-decoration: none; }
.product-meta-line a:hover { color: var(--text); }
.product-summary > h1 { margin: var(--s3) 0 var(--s4); font-family: var(--font-display); font-size: var(--display-2); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.product-lead { max-width: 56ch; margin: 0; color: var(--text-2); font-size: var(--fs-lg); line-height: 1.6; }
/* Güven rozetleri ve sponsor etiketi tek satırda: üçü de aynı biçimde durur,
   yalnız sponsor etiketi tıklanabilir. */
.product-badges { margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.product-badge { min-height: 34px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--muted); background: transparent; font-size: var(--fs-xs); }
.product-badge i { display: inline-flex; color: var(--accent-soft); font-style: normal; }
.product-badge-button { min-height: 44px; cursor: pointer; transition: color .2s,border-color .2s; }
.product-badge-button i { color: var(--muted-2); }
.product-badge-button:hover { color: var(--text); border-color: var(--line-2); }
.product-video-link { margin-top: var(--s5); padding: var(--s3) var(--s4); display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; transition: border-color .25s,background .25s; }
.product-video-link:hover { border-color: var(--line-2); background: var(--surface-2); }
.product-video-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #2a1206; background: var(--orange-soft); border-radius: 50%; }
.product-video-link small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.product-video-link strong { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 600; }

.purchase-panel { margin-top: var(--s6); padding: var(--s5); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); }
.purchase-panel-head { display: flex; align-items: start; justify-content: space-between; gap: var(--s4); }
.purchase-panel-head > small { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--muted); font-size: var(--label); white-space: nowrap; }
.purchase-panel h2 { margin: var(--s2) 0 var(--s5); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.03em; }
.purchase-links { display: grid; gap: var(--s2); }
.purchase-button { min-height: 58px; padding: 0 var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); background: rgba(255,255,255,.03); text-decoration: none; font-size: var(--fs-sm); transition: transform .25s var(--ease),border-color .25s,background .25s; }
.purchase-button:hover { transform: translateX(3px); border-color: var(--accent); background: var(--accent-wash); }
.purchase-button > span { display: flex; align-items: center; gap: var(--s3); }
.purchase-button img { width: 28px; height: 28px; object-fit: contain; }
.purchase-button.recommended { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); font-weight: 650; }
.purchase-button.recommended:hover { background: var(--text); border-color: var(--text); }
.purchase-note { margin: var(--s4) 0 0; color: var(--muted-2); font-size: var(--fs-xs); line-height: 1.55; }
/* ---------- Fiyat ----------
   Fiyat, mağaza adının karşısında sağ hizalı durur; en ucuz seçenek adın
   yanındaki küçük etiketle işaretlenir. Renk tek başına taşıyıcı değil: etiket
   metni "En ucuz" yazar, böylece renk ayrımı olmadan da okunur. */
.purchase-price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-flag { padding: 3px 8px; border-radius: var(--pill); color: #06231f; background: #6fe3c4; font-size: var(--label); font-style: normal; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.purchase-button.is-cheapest { border-color: rgba(111,227,196,.45); background: rgba(111,227,196,.08); }
.purchase-button.is-cheapest:hover { border-color: #6fe3c4; background: rgba(111,227,196,.14); }
.purchase-button.recommended .price-flag { color: #06231f; background: rgba(6,35,31,.14); }
/* Not tek akışta kalmalı: flex kullanılınca <time> ayrı bir öğe olup satırı
   ortasından bölüyordu. İkon satır içi hizalanır. */
.price-note .icon { margin-right: 5px; vertical-align: -2px; }
.price-note time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.share-actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.share-note { flex: 1 0 100%; margin-top: var(--s1); color: var(--muted-2); font-size: var(--fs-xs); line-height: 1.5; }
.share-actions button[disabled] { opacity: .6; cursor: progress; }

/* Mobil satın alma çubuğu. Masaüstünde .product-summary zaten sticky olduğu
   için paneli hep görünür tutuyor; çubuk yalnız düzen tek sütuna düştüğünde
   devreye girer. */
.buy-bar { display: none; }
.buy-bar-action i { font-style: normal; }

/* Ürün hakkında: solda metin, sağda künye. Eski düzende dev bir başlık ve
   altında iki satırlık yazı vardı, bölümün yarısı boş kalıyordu. */
.product-about { padding-block: var(--s6); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: clamp(28px,4vw,64px); align-items: start; }
.product-about-text { display: grid; gap: var(--s3); }
.product-about .prose { max-width: 68ch; }
.product-explore { display: grid; gap: var(--s2); }
.product-explore-link { padding: var(--s3) var(--s4); display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text); background: var(--surface); text-decoration: none; transition: border-color .2s, transform .2s; }
.product-explore-link:hover { border-color: var(--accent-soft); transform: translateX(3px); }
.product-explore-link > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.product-explore-link small { color: var(--muted-2); font-size: var(--fs-xs); }
.product-explore-link strong { overflow: hidden; font-size: var(--fs-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.product-explore-link > i { display: grid; color: var(--muted-2); font-style: normal; transition: color .2s; }
.product-explore-link:hover > i { color: var(--accent-soft); }
.product-explore-link .icon { width: 18px; height: 18px; }
.product-explore-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 14%, transparent); font-weight: 750; }
.product-explore-mark.is-category { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.product-explore-date { margin: var(--s2) 0 0; color: var(--muted-2); font-size: var(--fs-xs); }

/* ---------- Yasal, hata, boş durumlar ---------- */
.legal-page { width: 100%; padding: var(--s7) 0 var(--section-y); }
.legal-hero { padding: var(--s6) 0 var(--s7); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: var(--s7); align-items: end; }
.legal-hero h1 { margin: var(--s3) 0 0; font-family: var(--font-display); font-size: clamp(4rem,9vw,8rem); font-weight: 600; letter-spacing: -.07em; line-height: .82; }
.legal-hero > p { max-width: 38ch; margin: 0; color: var(--text-2); font-size: clamp(1.05rem,2vw,1.35rem); line-height: 1.55; }
.legal-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line-2); }
.legal-summary > span { min-height: 132px; padding: var(--s5); display: grid; align-content: center; gap: var(--s2); border-right: 1px solid var(--line); }
.legal-summary > span:first-child { padding-left: 0; }
.legal-summary > span:last-child { padding-right: 0; border-right: 0; }
.legal-summary strong { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.legal-summary small { max-width: 30ch; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.legal-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.legal-sections section { min-height: 260px; padding: var(--s7) var(--s6) var(--s7) 0; border-bottom: 1px solid var(--line); }
.legal-sections section:nth-child(odd) { border-right: 1px solid var(--line); }
.legal-sections section:nth-child(even) { padding-left: var(--s6); padding-right: 0; }
.legal-index,.legal-labels section > span { color: var(--orange-soft); font-size: var(--label); font-weight: 700; letter-spacing: .12em; }
.legal-sections h2,.legal-labels h2 { margin: var(--s4) 0 var(--s3); font-family: var(--font-display); font-size: var(--display-3); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.legal-sections p,.legal-labels p,.legal-note p { max-width: 48ch; margin: 0; color: var(--text-2); line-height: 1.65; }
.legal-labels { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line-2); }
.legal-labels section { min-height: 220px; padding: var(--s6) var(--s5); border-right: 1px solid var(--line); }
.legal-labels section:first-child { padding-left: 0; }
.legal-labels section:last-child { padding-right: 0; border-right: 0; }
.legal-labels h2 { font-size: clamp(1.35rem,2vw,2rem); }
.legal-note { padding: var(--s7) 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s7); border-bottom: 1px solid var(--line); }
.legal-note strong { display: block; margin-bottom: var(--s2); color: var(--text); }
.legal-footer { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.legal-footer a { display: inline-flex; align-items: center; gap: var(--s3); color: var(--accent-soft); font-weight: 700; text-decoration: none; }
.legal-footer a i { font-style: normal; }
.legal-footer p { margin: 0; color: var(--muted-2); font-size: var(--fs-sm); }

.error-page { min-height: 60vh; padding: var(--s9) 0; display: grid; place-items: center; align-content: center; gap: var(--s4); text-align: center; }
.error-page h1 { margin: 0; color: var(--orange); font-family: var(--font-display); font-size: clamp(5rem,16vw,12rem); font-weight: 620; letter-spacing: -.08em; line-height: .8; }
.error-page h2 { margin: 0; font-family: var(--font-display); font-size: var(--display-2); font-weight: 600; letter-spacing: -.035em; }
.error-page p { max-width: 46ch; margin: 0; color: var(--muted); }
.error-actions { margin-top: var(--s4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.empty-public { padding: var(--s9) var(--s5); display: grid; justify-items: center; gap: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; }
.empty-public h3 { margin: 0; font-family: var(--font-display); font-size: var(--display-3); font-weight: 600; letter-spacing: -.03em; }
.empty-public p { max-width: 44ch; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.empty-public .button { margin-top: var(--s3); }

/* ---------- Katman bileşenleri ---------- */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--s5); }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(480px,100%); padding: var(--s6); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.modal-card h2 { margin: var(--s3) 0 var(--s3); font-family: var(--font-display); font-size: var(--display-3); font-weight: 600; letter-spacing: -.03em; }
.modal-card p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.65; }
.modal-close { position: absolute; right: var(--s3); top: var(--s3); width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: transparent; cursor: pointer; transition: border-color .2s,background .2s; }
.modal-close:hover { border-color: var(--line-2); background: rgba(255,255,255,.05); }
.modal-open { overflow: hidden; }

.toast { position: fixed; z-index: 130; left: 50%; top: 50%; min-width: min(340px,calc(100% - 34px)); padding: var(--s5) var(--s6); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--accent-ink); background: var(--accent-soft); box-shadow: var(--shadow); transform: translate(-50%,-50%); text-align: center; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.02em; }

.search-suggest-box { position: absolute; z-index: 100; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow); }
.search-suggest-box a { padding: 8px; display: flex; align-items: center; gap: var(--s3); border-radius: var(--radius-sm); text-decoration: none; }
.search-suggest-box a:hover { background: rgba(255,255,255,.06); }
.search-suggest-box img,.suggest-placeholder { flex: 0 0 auto; width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }
.suggest-placeholder { display: grid; place-items: center; color: var(--muted-2); background: var(--bg); font-size: var(--fs-xs); }
.search-suggest-box strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.search-suggest-box small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.search-suggest-box .suggest-all { color: var(--accent-soft); font-size: var(--fs-sm); }

/* ---------- Alt bilgi ---------- */
.site-footer { position: relative; margin-top: var(--s9); overflow: hidden; background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer-lead { padding: var(--s9) 0 var(--s8); display: grid; gap: var(--s6); }
.footer-cta { display: flex; align-items: end; justify-content: space-between; gap: var(--s5); color: var(--text); font-family: var(--font-display); font-size: clamp(2.6rem,7vw,6rem); font-weight: 600; letter-spacing: -.05em; line-height: .9; text-decoration: none; }
.footer-cta span { flex: 0 0 auto; width: clamp(56px,7vw,88px); height: clamp(56px,7vw,88px); display: grid; place-items: center; color: var(--orange-soft); border: 1px solid var(--orange-soft); background: linear-gradient(var(--orange-soft),var(--orange-soft)) 0 100% / 100% 0 no-repeat; border-radius: 50%; font-family: var(--font-body); font-size: 1.4rem; transition: color .7s,background-size .9s var(--ease); }
.footer-cta span .icon { transition: transform .9s var(--ease); }
.footer-cta:hover span { color: #2a1206; background-size: 100% 100%; }
.footer-cta:hover span .icon-arrow-up-right { transform: rotate(45deg); }
.footer-bottom { padding: var(--s6) 0 var(--s7); display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,.8fr)); gap: var(--s6) var(--s5); align-items: start; border-top: 1px solid var(--line); }
.footer-about { display: grid; gap: var(--s3); }
.footer-about > p { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--fs-sm); }
.footer-note { color: var(--muted-2) !important; font-size: var(--fs-xs) !important; line-height: 1.65; }
/* min-width olmadan "X" gibi tek harfli sosyal bağlantılar ~9px genişliğinde
   kalıyordu: yükseklik 44 olsa da dokunma hedefi kullanılamıyordu. */
.footer-social { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.footer-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; transition: color .2s; }
.footer-social a:hover { color: var(--accent-soft); }
.footer-col { display: grid; gap: var(--s3); align-content: start; }
.footer-col h3 { margin: 0; color: var(--muted); font-size: var(--label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-col nav { display: grid; }
.footer-col nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-col a { color: var(--muted); font-size: var(--fs-sm); text-decoration: none; width: max-content; transition: color .2s; }
.footer-col a:hover { color: var(--accent-soft); }
.footer-col .footer-more { color: var(--accent-soft); font-weight: 650; }
.footer-legal { padding: var(--s5) 0 var(--s6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); }
.footer-legal p { margin: 0; }
.footer-legal p + p { color: var(--muted-2); }

/* ---------- Hareket ---------- */
.js .reveal-target { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease),transform .8s var(--ease); }
.js .reveal-target.is-visible { opacity: 1; transform: none; }
/* Kademeli beliriş. app.js her karta --reveal-i yazıyordu ama hiçbir kural onu
   okumuyordu; ızgaralar tek blok hâlinde belirdiği için hareket düz kalıyordu.
   Gecikme yalnız kartlara verilir, bölüm gövdesi tek parça gelir. */
.js .reveal-target :is(.product-card,.category-card,.collection-card,.process-step,.child-categories a) {
    opacity: 0; transform: perspective(900px) rotateX(-16deg) translateY(22px);
    transform-origin: center bottom;
    transition: opacity .5s var(--ease),transform .6s var(--ease);
    transition-delay: calc(var(--reveal-i,0) * 45ms);
}
.js .reveal-target.is-visible :is(.product-card,.category-card,.collection-card,.process-step,.child-categories a) { opacity: 1; transform: none; }

/* ---------- Kaydırmaya bağlı 3B bölüm geçişleri ---------- */
[data-scroll-depth] { --scroll-depth: 0; --scroll-abs: 0; --scroll-x: 0px; --scroll-x-reverse: 0px; --scroll-y: 0px; --scroll-y-reverse: 0px; --scroll-tilt: 0deg; --scroll-reveal: 1; --reveal-opacity: 1; --reveal-y: 0px; --reveal-clip: 0%; }
.js [data-scroll-reveal] { opacity: var(--reveal-opacity); clip-path: inset(0 0 var(--reveal-clip) 0 round 22px); transform: translate3d(0,var(--reveal-y),0); transform-origin: center top; transition: opacity .1s linear,clip-path .14s linear,transform .14s linear; will-change: opacity,clip-path,transform; }
.js [data-scroll-reveal].reveal-target.is-visible { opacity: var(--reveal-opacity); transform: translate3d(0,var(--reveal-y),0); }
.js [data-scroll-reveal].is-scroll-revealed { will-change: auto; }
.js [data-scroll-depth].is-depth-active { perspective: 1200px; }
.js .store-direction[data-scroll-depth] .store-direction-portrait { transform: perspective(1200px) translate3d(var(--scroll-x),var(--scroll-y),0) rotateY(var(--scroll-tilt)); transform-origin: center; transition: transform .14s linear; will-change: transform; }
/* Bölüm merkezden uzaklaştıkça (yukarı doğru geçmişte kalırken ya da aşağıdan
   henüz gelirken) --scroll-depth -1..1 arası sürekli günceller. Her bölüme
   ayrı bir "sahne" hareketi verilir ki art arda aynı hareket tekrarlanmasın;
   girişte (--reveal-i kademesi) ayrı, burada sürekli kaydırmaya bağlı katman
   var — ikisi çakışmaz çünkü bu kurallar yalnız .is-visible olduktan sonra
   devreye girer.

   Koleksiyonlar: alttan menteşeli kitap sayfası gibi devrilir. */
.js .home-collections.reveal-target.is-visible .section-head,
.js .home-collections.reveal-target.is-visible .collection-card {
    transform: perspective(1300px) rotateX(calc(var(--scroll-depth,0) * -22deg)) translateY(calc(var(--scroll-depth,0) * 52px)) translateZ(calc(var(--scroll-abs,0) * -60px));
    transform-origin: center bottom;
    opacity: calc(1 - (var(--scroll-abs,0) * .6));
    transition: transform .16s linear,opacity .16s linear;
    will-change: transform,opacity;
}
/* Öne çıkan ürünler: kaydırma yalnız çok hafif bir nefes verir (metin hep
   okunur kalır); asıl sağ-sola 3B eğim fare imlecinin yatay konumuna göre
   app.js'te --mouse-tilt-y olarak yazılır. */
.js .featured-products.reveal-target.is-visible .section-head > div {
    transform: perspective(1600px) rotateY(calc(var(--mouse-tilt-y,0deg) + (var(--scroll-depth,0) * -3deg)));
    transform-origin: left center;
    opacity: 1;
    transition: transform .12s linear;
    will-change: transform;
}
.js .featured-products.reveal-target.is-visible .product-card {
    transform: perspective(1600px) rotateY(calc(var(--mouse-tilt-y,0deg) + (var(--scroll-depth,0) * -3deg)));
    transform-origin: center center;
    opacity: 1;
    transition: transform .12s linear;
    will-change: transform;
}
/* Marka bandı: hafifçe küçülüp geriye gömülür ama her zaman okunur kalır. */
.js .brand-index[data-scroll-depth] > .eyebrow,
.js .brand-index[data-scroll-depth] .brand-marquee {
    transform: perspective(1300px) scale(calc(1 - (var(--scroll-abs,0) * .05))) translateZ(calc(var(--scroll-abs,0) * -24px)) rotateX(calc(var(--scroll-depth,0) * -4deg));
    transform-origin: center center;
    opacity: calc(1 - (var(--scroll-abs,0) * .2));
    transition: transform .16s linear,opacity .16s linear;
    will-change: transform,opacity;
}

/* ---------- Duyarlılık ---------- */
@media (max-width: 1080px) {
    .header-inner { grid-template-columns: auto minmax(160px,1fr) auto; gap: var(--s4); }
    .header-cta { justify-self: end; }
    .header-cta span { display: none; }
    .header-cta { padding-inline: 5px; }
    .ada-lead { width: 44vw; left: 4vw; }
    .child-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .process-steps { grid-template-columns: 1fr; }
    .store-direction { grid-template-columns: 1fr; }
    .store-direction-portrait { order: -1; }
    .store-direction-portrait img { max-width: 100%; max-height: none; }
    .search-layout { grid-template-columns: 1fr; gap: var(--s6); }
    /* Filtreler tek sütunda sonuçları aşağı itiyordu; çekmeceye alınır. */
    .filter-panel { position: static; padding: 0; }
    .filter-drawer-toggle { min-height: 56px; padding: 0 var(--s4) 0 var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; }
    .filter-drawer-toggle::-webkit-details-marker { display: none; }
    .filter-drawer-toggle b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 7px; padding: 0 5px; border-radius: var(--pill); color: var(--accent-ink); background: var(--accent-soft); font-size: var(--label); }
    .filter-drawer-toggle i { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font-style: normal; transition: transform .3s var(--ease); }
    .filter-panel[open] .filter-drawer-toggle i { transform: rotate(45deg); }
    .filter-panel > form { padding: 0 var(--s5) var(--s5); }
    .filter-panel[open] .filter-head { display: none; }
    .product-detail { grid-template-columns: 1fr; gap: var(--s7); }
    .product-about { grid-template-columns: 1fr; gap: var(--s5); }
    .product-summary { position: static; }
    /* Tek sütunda büyüteç panelinin yeri yok: sahne tıklanıp tam ekran açılır. */
    .product-gallery { grid-template-columns: minmax(0,1fr); }
    .gallery-stage { grid-column: 1; grid-row: 1; }
    .gallery-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
    .gallery-thumb { width: 66px; }
    .gallery-zoom { display: none; }
    .legal-labels { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .legal-labels section { border-bottom: 1px solid var(--line); }
    .legal-labels section:nth-child(2) { padding-right: 0; border-right: 0; }
    .legal-labels section:nth-child(3) { padding-left: 0; border-bottom: 0; }
    .legal-labels section:last-child { padding-left: var(--s5); border-bottom: 0; }

    /* Tek sütuna düşen düzende satın alma paneli katlamanın çok altında kalır. */
    .buy-bar { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: rgba(13,16,19,.92); backdrop-filter: blur(14px); }
    .buy-bar-info { min-width: 0; display: grid; gap: 1px; }
    .buy-bar-info small { color: var(--muted); font-size: var(--label); letter-spacing: .06em; }
    .buy-bar-info strong { overflow: hidden; font-size: var(--fs-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .buy-bar-action { flex: 0 0 auto; min-height: 48px; padding: 0 var(--s5); display: inline-flex; align-items: center; gap: var(--s2); border-radius: var(--pill); color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; transition: background .2s; }
    .buy-bar-action:active { background: var(--text); }
    body:has([data-buy-bar]) { padding-bottom: 88px; }
}

@media (max-width: 760px) {
    .container { --gutter: 18px; }
    .site-header { top: 8px; }
    /* Arama mobilde de başlıkta kalır: sitenin tek işi "videoda gördüğünü bul".
       Yer açmak için marka yazısı ve CTA metni gizlenir, ikonlar korunur. */
    .header-inner { height: 58px; padding-left: var(--s3); grid-template-columns: auto minmax(0,1fr) auto; gap: var(--s3); }
    .brand-copy { display: none; }
    .header-search input { padding: 0 42px 0 36px; }
    .header-search::before { left: 13px; }
    .header-cta { padding: 0 5px; }
    .header-cta span { display: none; }
    main.container { padding-top: 78px; }

    /* Ada girişi — mobilde tam ekran fotoğraf ve kaydırmaya bağlı hafif yüz yakınlaşması. */
    .ada-intro { height: 220svh; margin-top: -78px; }.ada-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }.ada-stage::before { top: 30%; font-size: 45vw; }.ada-viewport { inset: 0; width: 100%; height: 100%; transform: scale(calc(1 + (var(--ada-p) * .38))); transform-origin: 50% 30%; }.ada-photo { object-position: 50% 35%; transform: none; }.ada-frameline { opacity: calc(1 - var(--ada-p)); }.ada-vignette { opacity: calc(.12 + (var(--ada-reveal) * .7)); background: linear-gradient(180deg,transparent 42%,rgba(11,13,15,.86)); }.ada-lead { left: 28px; right: 28px; top: 54%; width: auto; opacity: calc(1 - (var(--ada-p) * 1.65)); transform: translateY(calc(-50% + (var(--ada-p) * -30px))); }.ada-lead h1 { margin-block: 14px; font-size: clamp(3.4rem,16vw,5.2rem); text-shadow: 0 5px 30px rgba(0,0,0,.7); }.ada-lead > p { font-size: .72rem; text-shadow: 0 2px 12px #000; }.ada-hint { display: none; }.ada-reveal { left: 20px; right: 20px; top: auto; bottom: 38px; width: auto; padding: 28px 22px; display: block; border-radius: 20px; opacity: var(--ada-reveal); transform: translateY(calc((1 - var(--ada-reveal)) * 36px)); }.ada-stats { margin-top: 24px; padding-top: 18px; justify-content: space-between; gap: 10px; }.ada-stat { display: grid; gap: 3px; }.ada-stat strong { font-size: 1.65rem; }.ada-stat small { font-size: .4rem; }.ada-scrollcue { display: none; }

    .home-find { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s7); }
    .section-head { grid-template-columns: 1fr; align-items: start; gap: var(--s4); }
    .category-index { grid-template-columns: 1fr; gap: var(--s6); padding-inline: 18px; }
    .category-index-head { position: static; }
    .category-list a { min-height: 68px; padding: var(--s3) 0; grid-template-columns: 26px minmax(0,1fr) auto; gap: var(--s3); }
    .category-list a:hover { padding-inline: 0; }
    .category-list i { display: none; }
    .home-collections .collection-card { min-height: 232px; padding: var(--s4); }
    .home-collections .collection-card strong { font-size: clamp(1.65rem,8vw,2.5rem); }
    .home-collections .collection-go { font-size: 0; }
    .featured-products .product-card { min-height: 0; padding-inline: 0; grid-template-columns: 30px 64px minmax(0,1fr); gap: var(--s3); }
    .featured-products .product-card-media { width: 64px; border-radius: 10px; }
    .featured-products .product-card:hover { padding-inline: var(--s2); }
    .featured-products .product-card-body { grid-template-columns: 1fr auto; gap: 4px var(--s3); }
    .featured-products .card-brand-name { grid-column: 1/-1; }
    .featured-products .card-title { font-size: clamp(1.1rem,5vw,1.4rem); }
    .featured-products .card-sponsor-disclosure { align-self: end; }
    .collection-card { min-height: 220px; }
    .gallery-stage { cursor: zoom-in; }
    .lightbox-stage img { max-width: var(--page-w); }
    .lightbox-nav { width: 44px; height: 44px; }
    .lightbox-thumb { width: 48px; height: 48px; }
    .lightbox-title { display: none; }
    /* Tek sütunda alt kategoriler ürünleri ~200px aşağı itiyordu. */
    .child-categories { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 var(--s4); margin-top: var(--s5); }
    .child-categories a { padding: var(--s3) 0; font-size: var(--fs-xs); }
    .product-grid,.compact-grid,.search-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s5) var(--s3); }
    /* Mobilde başlık bloğu ürünleri katlamanın altına itiyordu; sıkılaştırılır. */
    .page-head { padding: var(--s5) 0 var(--s5); }
    .page-search { margin-top: var(--s4); }
    .page-search input[type='search'] { height: 52px; padding: 0 100px 0 var(--s4); }
    .page-search > button { height: 42px; padding-inline: var(--s4); }
    .search-prompts { margin-top: var(--s3); }
    .search-layout { padding-top: var(--s5); }
    .catalog-quick-filter { margin-top: var(--s5); padding: var(--s4); }
    .catalog-quick-filter-head { grid-template-columns: 1fr; gap: var(--s2); }
    .catalog-quick-filter-head p { max-width: 46ch; }
    .catalog-quick-filter > form { grid-template-columns: 1fr; gap: 0; }
    .catalog-quick-filter form > button { grid-column: 1; margin-top: var(--s4); }
    .catalog-quick-filter-options { margin-right: calc(var(--s4) * -1); padding-right: var(--s4); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
    .catalog-quick-filter-options::-webkit-scrollbar { display: none; }
    .catalog-quick-filter-options label { flex: 0 0 auto; }
    .legal-page { padding-top: var(--s5); }
    .legal-hero { padding: var(--s5) 0 var(--s6); grid-template-columns: 1fr; gap: var(--s4); }
    .legal-hero h1 { font-size: clamp(3.8rem,20vw,6rem); }
    .legal-hero > p { font-size: var(--fs-base); }
    .legal-summary,.legal-sections,.legal-labels,.legal-note { grid-template-columns: 1fr; }
    .legal-summary > span { min-height: 0; padding: var(--s4) 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .legal-summary > span:last-child { border-bottom: 0; }
    .legal-sections section,.legal-sections section:nth-child(even) { min-height: 0; padding: var(--s6) 0; border-right: 0; }
    .legal-labels section,.legal-labels section:nth-child(2),.legal-labels section:nth-child(3),.legal-labels section:last-child { min-height: 0; padding: var(--s5) 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .legal-labels section:last-child { border-bottom: 0; }
    .legal-note { padding: var(--s6) 0; gap: var(--s5); }
    .legal-footer { min-height: 0; padding-top: var(--s6); align-items: flex-start; flex-direction: column; gap: var(--s4); }
    .footer-bottom { grid-template-columns: 1fr; gap: var(--s6); }
    .footer-legal { flex-direction: column; }
}

/* Dört sütun 1100px'in altında sıkışıyor; marka bloğu ve bağlantı sütunları
   ikişerli düzene geçer. */
@media (max-width: 1100px) and (min-width: 761px) {
    .footer-bottom { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .footer-about { grid-column: 1/-1; }
}

@media (max-width: 430px) {
    .header-cta span { display: none; }
    .product-grid,.compact-grid,.search-grid { grid-template-columns: 1fr 1fr; }
    .card-badges { left: var(--s2); top: var(--s2); }
    .share-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .js [data-scroll-reveal] { opacity: 1 !important; clip-path: none !important; transform: none !important; will-change: auto !important; }
    .js [data-scroll-depth] :is(.store-direction-copy,.store-direction-portrait,.category-index-head,.category-list,.section-head,.featured-products .section-head > div,.collection-card,.product-card,.eyebrow,.brand-marquee) { transform: none !important; will-change: auto !important; }
    .js .reveal-target,
    .js .reveal-target :is(.product-card,.category-card,.collection-card,.process-step,.child-categories a) { opacity: 1; transform: none; transition-delay: 0s; }
    /* Kart üstü hareketi tamamen kalkar; perde ve kenarlık vurgusu kalır. */
    .product-card:hover .product-card-media,
    .product-card:focus-within .product-card-media,
    .product-card:hover .product-card-media > img,
    .product-card:focus-within .product-card-media > img,
    .product-card:hover .product-card-media.is-lowres::before { transform: none !important; }
}

/* Donanım hızlandırması olmayan/düşük kaynaklı cihazlar için otomatik hafif mod.
   Ağır kompozit katmanlar kapanır; içerik ve bütün etkileşimler korunur. */
html.perf-lite { scroll-behavior: auto; }
.perf-lite [data-scroll-reveal] { opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important; will-change: auto !important; }
.perf-lite [data-scroll-depth] :is(.store-direction-copy,.store-direction-portrait,.category-index-head,.category-list,.section-head,.featured-products .section-head > div,.collection-card,.product-card,.eyebrow,.brand-marquee) { transform: none !important; transition: none !important; will-change: auto !important; }
.perf-lite body::before,.perf-lite .ada-grain { display: none; }
.perf-lite .header-inner,.perf-lite .buy-bar { backdrop-filter: none; background: #101419; box-shadow: none; }
.perf-lite .gallery-hint,.perf-lite .modal-backdrop { backdrop-filter: none; }
.perf-lite .lightbox-backdrop { backdrop-filter: none; background: #05070a; }
.perf-lite .lightbox-stage img { will-change: auto; }
.perf-lite .ada-intro { height: 100svh; min-height: 620px; --ada-p: 0; --ada-reveal: 0; }
.perf-lite .ada-stage { position: relative; height: 100svh; min-height: 620px; background:linear-gradient(145deg,#0b0e11 35%,#132024); }
.perf-lite .ada-stage::after { content:''; position:absolute; right:8vw; bottom:10vh; width:clamp(110px,18vw,240px); aspect-ratio:1; border:1px solid rgba(127,214,222,.22); border-radius:50%; box-shadow:0 0 0 28px rgba(127,214,222,.025),0 0 0 58px rgba(224,106,44,.018); animation:lite-breathe 5s ease-in-out infinite; }
.perf-lite .ada-viewport { transform: none; filter: none; box-shadow: none; will-change: auto; }
.perf-lite .ada-viewport { left:auto; right:5vw; top:12vh; bottom:8vh; width:min(46vw,680px); height:auto; border:1px solid var(--line-2); border-radius:28px; opacity:.68; }
.perf-lite .ada-photo,.perf-lite .store-direction-portrait img { filter: none; will-change: auto; }
.perf-lite .ada-lead { opacity: 1; transform: translateY(-50%); will-change: auto; }
.perf-lite .ada-reveal { display: none; }
.perf-lite .ada-lead .hero-kicker i { animation:lite-dot 2.4s ease-in-out infinite; }
@keyframes lite-breathe { 0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.04);opacity:1} }
@keyframes lite-dot { 0%,100%{box-shadow:0 0 0 4px rgba(224,106,44,.1)}50%{box-shadow:0 0 0 9px rgba(224,106,44,.02)} }
@media (prefers-reduced-motion: reduce) { .perf-lite .ada-stage::after,.perf-lite .ada-lead .hero-kicker i { animation:none; } }
.perf-lite .ada-hint i,.perf-lite .brand-marquee-track { animation: none; }
/* Yazılım tabanlı çizimde kayan şerit yerine tek kopyalı, statik bir marka
   dizini kullanılır. Marquee için üretilen tekrarlar gizlenir; böylece GPU kapalıyken
   aynı isimler ve yatay kaydırma çubuğu görünmez. */
.perf-lite .brand-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.perf-lite .brand-marquee-track {
    width: auto;
    padding-inline: max(var(--s5),calc((var(--page-w) - 1320px)/2));
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
    gap: 0 var(--s5);
    border-top: 1px solid var(--line-strong);
}
.perf-lite .brand-marquee-track a {
    min-width: 0;
    min-height: 72px;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    font-size: clamp(1.25rem,2vw,1.8rem);
}
.perf-lite .brand-marquee-track a i { margin-left: var(--s4); }
.perf-lite .brand-marquee-track a[aria-hidden="true"] { display: none; }
.perf-lite :is(.product-card,.category-card,.collection-card,.process-step,.child-categories a),
.perf-lite .reveal-target,.perf-lite .reveal-target :is(.product-card,.category-card,.collection-card,.process-step,.child-categories a) { opacity: 1; transform: none; transition: none; }
.perf-lite .product-card:hover .product-card-media > img { transform: none; }
.perf-lite :is(.product-card-media,.collection-card,.category-card,.modal-card,.search-suggest-box,.card-sponsor-disclosure > div,.toast) { box-shadow: none; }
.perf-lite :is(.home-section,.catalog-products,.recommendation-section,.store-direction,.category-index,.brand-index) { content-visibility: auto; contain-intrinsic-size: auto 700px; }

@media (max-width: 760px) {
    .perf-lite .ada-intro { height: 100svh; margin-top: -78px; }
    .perf-lite .ada-stage { position: relative; height: 100svh; }
    .store-direction-portrait { min-height:420px; }
    .perf-lite .ada-viewport { left:18px; right:18px; top:14vh; bottom:12vh; width:auto; height:auto; transform:none; opacity:.42; }
    .perf-lite .ada-stage::after { right:-20px; bottom:8vh; }
}