/* ============================================================================
   BarsChair — v4 · CINEMATIC BLACK GALLERY · hand-authored, bespoke CSS.
   SELF-CONTAINED single request: v4 TOKENS (§2-8) + @font-face (self-host) +
   layout/components inlined. No Tailwind, no framework.
   v4 thesis: a dimmed BLACK gallery where 14 warm room-scenes hang like SPOTLIT
   prints — each bloomed by a warm light-halo leaking onto the cool-black wall.
   Warmth = LIGHT only (accent-glow + halo + photography); every surface, text
   and hairline is COOL near-black. Depth = layered blacks + glow + focus (NEVER
   drop-shadow). Signatures: the SPOTLIT rig (§5), glass chrome (§6), living
   atmosphere (§7). Token NAMES are unchanged (templates + /panel keep resolving);
   only VALUES are remapped warm-espresso → cinematic cool-black + 3 new primitive
   families (--glass-* / --halo-* / --ambient-*).
   ORDER: tokens → fonts → reset → type → atmosphere → spot-rig → glass → layout
          → components → utilities → responsive → reduced-motion → motion-layer.
   ========================================================================= */

:root{
  /* ─────────────  §2 · SURFACES — cool near-black elevation ladder (never #000) ───────────── */
  --canvas-deepest:#060608; /* deepest void: behind ambient blobs, footer floor, vignette sink */
  --surface-sunk:  #08080A; /* recessed wells BELOW canvas: sticky filter trough, quiet zones */
  --canvas:        #0A0A0C; /* PRIMARY floor — the cool-black gallery wall */
  --surface:       #101014; /* raised band / the lit gallery STAGE (elevation +1) */
  --studio:        #0E0E12; /* image matte behind cards while loading (dark, recessed) */
  --surface-2:     #17171B; /* elevated tier: resting card fill, contact-panel base, chips */
  --surface-3:     #202027; /* top tier: hover surface, glass base tint, raised plinth */
  --surface-4:     #2A2A33; /* highest step — used only to MIX glass top-edge highlights */
  /* v2/v3 names kept resolvable (remapped into the cool-black ladder) */
  --walnut:        #17171B; /* the ELEVATED/glowing panel */
  --walnut-2:      #0C0C10; /* recessed field well inside the panel (inputs) */
  --footer:        #060608; /* deepest bookend */

  /* ─────────────  INK — warm off-white on cool black (temperature tension; no pure white) ───────────── */
  --ink:           #F5F0E8; /* headings/wordmark — warm off-white (lit museum-label glow) */
  --body:          #BFBAC4; /* body copy — soft cool-neutral light */
  --muted:         #85818C; /* meta, captions, family tags (cool taupe-gray) — 5.2:1 AA */
  --hairline:      rgba(245,240,232,.09);  /* warm-white translucent hairline (reads on any tier) */
  --hairline-strong:rgba(245,240,232,.16);
  --on-dark:       #F7F2EA; /* a hair brighter on the elevated glass panel, for pop */
  --on-dark-body:  #BFBAC4;
  --on-dark-muted: #85818C;
  --on-light:      #14100C; /* deep ink for labels on bright accent / light pills */

  /* ─────────────  ACCENT — warm amber-terracotta GLOW (the one voltage; the spotlight colour) ───────────── */
  --accent:        #EE9A54; /* CTA fill, links, active, focus — 8.8:1 on --canvas */
  --accent-hover:  #F6B072; /* brighter → blooms on hover (dark wants MORE light) */
  --accent-active: #D97A38; /* pressed */
  --accent-ink:    #F4A968; /* small accent TEXT (AAA on dark) */
  --accent-subtle: rgba(238,154,84,.14); /* selected-chip wash, use-case icon bg */
  --accent-glow:   rgba(238,154,84,.24); /* bloom behind CTAs / focus halo */
  --accent-on-dark:var(--accent-ink);    /* links/eyebrows on the elevated glass panel */
  --cta-fg:        var(--on-light);       /* deep-ink label on the bright accent (white fails — WCAG) */

  /* ─────────────  HALO — museum-spotlight light leaking from behind a lit print (§5) ───────────── */
  --halo-warm:        rgba(238,154,84,.22);
  --halo-warm-strong: rgba(246,176,114,.36); /* hover bloom */
  --halo-ember:       rgba(201,92,48,.14);   /* deeper pool at the base of the frame */

  /* ─────────────  AMBIENT — slow drifting glow-blobs on the void (§7) ───────────── */
  --ambient-a: rgba(238,154,84,.16); /* warm amber blob */
  --ambient-b: rgba(201,92,48,.12);  /* deep ember blob */
  /* QA-fix (brown-wall): the BUG-5 4th layer — a warm vertical tonal band — plus a hot mid pool
     ACCUMULATED across the desktop 3-up gutters and warmed the whole wall into espresso. Dropped the
     linear band entirely and cooled the two corner pools + the mid pool to a near-invisible whisper.
     Warm LIGHT only, at the corners; every surface stays cool near-black (the v4 thesis, restored). */
  --ambient-mesh:
    radial-gradient(58% 48% at 16% 6%,  rgba(238,154,84,.050), transparent 60%),
    radial-gradient(52% 46% at 88% 92%, rgba(201,92,48,.042),  transparent 62%),
    radial-gradient(60% 40% at 62% 46%, rgba(238,154,84,.010), transparent 68%);

  /* ─────────────  GLASS — floating nav + panels + label pills (§6) ───────────── */
  --glass-fill:        rgba(18,18,24,.55);
  --glass-fill-top:    rgba(18,18,24,.28);   /* nav at hero-top (barely there) */
  --glass-fill-strong: rgba(12,12,16,.74);   /* drawer / contact panel base */
  --glass-blur:        blur(20px) saturate(160%);
  --glass-blur-strong: blur(34px) saturate(150%);
  --glass-hairline:    inset 0 1px 0 rgba(255,255,255,.10); /* top-edge light catch */
  --glass-ring:        inset 0 0 0 1px rgba(255,255,255,.06);
  --glass-shadow:      0 12px 48px -14px rgba(0,0,0,.72);

  /* ─────────────  SPOT rig primitives (§5) — halo bleed, inner vignette, frame glow ───────────── */
  --spot-halo:
    radial-gradient(58% 54% at 50% 40%, var(--halo-warm) 0%, transparent 70%),
    radial-gradient(92% 72% at 50% 66%, var(--halo-ember) 0%, transparent 72%);
  --spot-vignette:
    radial-gradient(120% 92% at 50% 20%, transparent 42%, rgba(6,6,8,.55) 100%),
    linear-gradient(to top, rgba(6,6,8,.34), transparent 42%);
  --spot-frame:
    inset 0 0 0 1px rgba(246,176,114,.14),   /* warm inner hairline — frame edge catches light */
    0 0 0 1px rgba(0,0,0,.6),                /* crisp cut from the wall */
    0 40px 90px -50px rgba(0,0,0,.9),        /* deep ambient — seats the print on the floor */
    0 0 62px -18px var(--halo-warm);         /* the glow ring on the wall */
  --spot-frame-hover:
    inset 0 0 0 1px rgba(246,176,114,.30),
    0 0 0 1px rgba(0,0,0,.6),
    0 50px 110px -46px rgba(0,0,0,.95),
    0 0 96px -12px var(--halo-warm-strong);

  /* ─────────────  Ceremony brass · channel · semantic (cool-neutral lift) ───────────── */
  --ceremony:#C9A15A; --ceremony-subtle:rgba(201,161,90,.16);
  --whatsapp:#25D366;
  --success:#7FBF8F; --success-bg:rgba(127,191,143,.14); --error:#E8785F; --error-bg:rgba(232,120,95,.14);

  /* ─────────────  Aliases (author against THESE) ───────────── */
  --bg:var(--canvas); --fg:var(--ink); --line:var(--hairline);
  --cta:var(--accent); --link:var(--accent); --focus-ring:var(--accent);

  /* ─────────────  §3 · TYPE SCALE ───────────── */
  --fs-display-xl: clamp(2.6rem, 6.2vw, 5.75rem); /* hero — hard-capped so a long word can never cross the scene (§3.1) */
  --fs-display:    clamp(2.25rem, 5vw, 4.25rem);
  --fs-h1:         clamp(1.9rem, 3.5vw, 3rem);
  --fs-h2:         clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-h3:         clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-lead:       clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:       1.0625rem;
  --fs-caption:    0.8125rem;
  --fs-label:      0.75rem;

  /* ─────────────  §4 · SPACE / GRID ───────────── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:5rem; --space-10:7.5rem; --space-11:10rem;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --container:1440px; --container-read:60rem; /* QA dead-CSS: --container-wide removed (never referenced) */
  --section-y:clamp(6rem, 12vw, 12rem);
  --nav-h:4.75rem;
  --nav-top:clamp(.6rem, 1.4vw, 1rem);

  /* ─────────────  §5 · RADIUS (rounded imagery — sharp banned) ───────────── */
  --radius-0:0;
  --radius-xs:8px; --radius-sm:12px; --radius-md:18px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --radius-image:var(--radius-md);

  /* ─────────────  §6 · GLOW / FOCUS ───────────── */
  --glow-cta:0 0 0 1px rgba(238,154,84,.5), 0 14px 44px -10px var(--accent-glow);
  --glow-focus:0 0 0 3px var(--accent-glow);
  --ring-elevated:inset 0 0 0 1px var(--hairline);

  /* ─────────────  §8 · MOTION ───────────── */
  --ease-out-soft:cubic-bezier(.16,1,.3,1);   /* cinema reveal */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-magnetic:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:200ms; --dur-base:400ms; --dur-slow:700ms; --dur-reveal:900ms;
}
html{color-scheme:dark;}

/* ============================================================================
   @font-face — self-hosted (§3). NO Google CDN (Turkey SSL rule). Subset-split
   (latin + latin-ext); latin-ext carries Turkish ğ ş İ, latin carries ı — BOTH
   needed; the critical faces preload both (head.php). Fraunces & Hanken variable.
   ========================================================================= */
@font-face{ font-family:"Fraunces"; src:url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight:300 640; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Fraunces"; src:url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight:300 640; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* QA dead-CSS: the two italic Fraunces @font-face blocks removed — their only consumer was
   .serif-em (also removed) and no template renders italic Fraunces. The woff2 files remain on
   disk but were never fetched; dropping the declarations trims two potential network requests. */
@font-face{ font-family:"Hanken Grotesk"; src:url("/assets/fonts/hanken-latin.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Hanken Grotesk"; src:url("/assets/fonts/hanken-latin-ext.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"JetBrains Mono"; src:url("/assets/fonts/jbmono-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"JetBrains Mono"; src:url("/assets/fonts/jbmono-latin-ext.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --fraunces-display:"opsz" 144, "SOFT" 28, "WONK" 0;  /* huge, sharper edge (lower SOFT) = cinematic */
  --fraunces-head:   "opsz" 72,  "SOFT" 35, "WONK" 0;
}

/* ───────────────────────────  RESET  ──────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark;
  scroll-padding-top:calc(var(--nav-h) + var(--nav-top) + var(--space-4)); }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
body{
  margin:0; padding-top:calc(var(--nav-h) + var(--nav-top) + var(--space-4));
  background:var(--canvas); color:var(--body);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Kill site-wide horizontal scroll — `clip` (not `hidden`) so sticky filter bar / spec rail keep working.
   Real sources also fixed at origin: hero figure removed, honeypot no longer -9999px; this contains the
   intentional §5 spot-halo bleed at the viewport edge on mobile. */
html,body{ overflow-x:clip; max-width:100%; }
/* HOME: the full-bleed hero owns the very top — the glass nav floats over it (no seam).
   Inner pages (product / 404) keep the nav-clearance top pad + a solid header. */
body.is-home{ padding-top:0; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{ margin:0; }
ul[role="list"]{ list-style:none; padding:0; }
img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--link); text-decoration:none; }
button{ font:inherit; color:inherit; }
input,select,textarea,button{ font-family:inherit; }
svg{ fill:none; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; box-shadow:var(--glow-focus); }
:focus:not(:focus-visible){ outline:none; }
.skip-link{
  position:absolute; left:var(--space-4); top:var(--space-2); transform:translateY(-160%);
  z-index:200; background:var(--accent); color:var(--cta-fg);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm);
  font-weight:600; font-size:var(--fs-caption);
  transition:transform var(--dur-fast) var(--ease-in-out);
}
.skip-link:focus{ transform:none; }

/* ─────────────────────────  TYPOGRAPHY  ────────────────────────────────── */
h1,.h1{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:460; font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.02em; color:var(--ink); }
h2,.h2{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:500; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.015em; color:var(--ink); }
h3,.h3{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:500; font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.005em; color:var(--ink); }
.display-xl{ font-family:var(--font-display); font-variation-settings:var(--fraunces-display);
  font-weight:400; font-size:var(--fs-display-xl); line-height:.98; letter-spacing:-.03em;
  color:var(--ink); text-wrap:balance; overflow-wrap:normal; word-break:keep-all; hyphens:none; max-width:22ch; } /* headline never splits mid-word (Turkish); container width now guarantees the fit */
.display{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:420; font-size:var(--fs-display); line-height:1; letter-spacing:-.022em;
  color:var(--ink); text-wrap:balance; }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--body); text-wrap:pretty; }
p{ text-wrap:pretty; }
.eyebrow,.label{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0; }
.caption{ font-size:var(--fs-caption); color:var(--muted); }
/* QA dead-CSS: .serif-em removed (unused — no template used it; it was the only italic-Fraunces consumer) */
[data-rough]{ color:var(--accent-ink); font-weight:500; white-space:nowrap; }

/* on-dark helpers (glass contact panel) — v4: a hair brighter ink for pop on glass */
.on-dark{ color:var(--on-dark); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark .display,.on-dark .display-xl{ color:var(--on-dark); }
.on-dark .lead,.on-dark p{ color:var(--on-dark-body); }
.on-dark .eyebrow,.on-dark .label,.on-dark .caption{ color:var(--on-dark-muted); }
.on-dark a{ color:var(--accent-on-dark); }

/* ═══════════════  §7 · LIVING ATMOSPHERE — the black room with light in it  ═══════════════
   Order: .ambient (z0, void+mesh+drifting blobs) → content (z2/3) → body::before
   grain (z6, soft-light) → body::after screen-vignette (z7). All pointer-events:none. */
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:var(--canvas-deepest); background-image:var(--ambient-mesh); }
.ambient::before,.ambient::after{ content:""; position:absolute; border-radius:50%;
  filter:blur(80px); will-change:transform; }
.ambient::before{ width:54vw; height:54vw; left:-8vw; top:-8vw;
  background:radial-gradient(circle, var(--ambient-a), transparent 62%);
  animation:drift1 26s var(--ease-in-out) infinite alternate; }
.ambient::after{ width:46vw; height:46vw; right:-10vw; bottom:-12vw;
  background:radial-gradient(circle, var(--ambient-b), transparent 64%);
  animation:drift2 32s var(--ease-in-out) infinite alternate; }
@keyframes drift1{ to{ transform:translate3d(8vw,6vh,0) scale(1.12); } }
@keyframes drift2{ to{ transform:translate3d(-7vw,-5vh,0) scale(1.08); } }

/* (b) FILM-GRAIN — soft-light so it reads as lit-paper tooth on near-black */
body::before{
  content:""; position:fixed; inset:0; z-index:6; pointer-events:none;
  opacity:.062; mix-blend-mode:soft-light; /* BUG-5: nudged tooth (was .055) — a hair more lit-paper texture */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* (c) SCREEN-VIGNETTE — cinematic edge darkening across the whole viewport */
body::after{
  content:""; position:fixed; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 28%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ═══════════════  §5 · THE SPOTLIT-PRODUCT RIG (the move a color-swap can't fake)  ═══════════════
   Every scene hangs like a lit print in a black gallery: a warm halo bleeds from
   behind the frame onto the wall, the edge catches a warm glint, an inner vignette
   drops the corners to shadow so the centre pops, and on hover the spotlight swells.
   Two shapes: (A) single-image rig (hero, PDP) = one overflow-visible element with
   rounded media + halo/vignette pseudos; (B) multi-child rig (gallery card) = an
   overflow-visible wrapper (halo) + an inner clipped frame (vignette + pill + label). */

/* (A) single-image rig — PDP main (hero figure retired: the full-bleed backdrop is the hero visual now) */
.detail__main{
  position:relative; isolation:isolate; overflow:visible;
  border-radius:var(--radius-lg); background:var(--studio); box-shadow:var(--spot-frame);
  transition:box-shadow var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.detail__main::before{ /* HALO — leaks onto the wall, heavier below */
  content:""; position:absolute; z-index:-1; inset:-16% -12% -24%;
  background:var(--spot-halo); filter:blur(30px); opacity:.9; transform:translateZ(0); pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
}
.detail__main::after{ /* inner SPOTLIGHT vignette */
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:var(--spot-vignette); mix-blend-mode:multiply;
}
.detail__main .gallery__img{ border-radius:inherit; }
.detail__main:hover{ box-shadow:var(--spot-frame-hover); }
.detail__main:hover::before{ opacity:1; transform:scale(1.05); }

/* ═══════════════  §6 · GLASS — floating chrome only (nav, panels, chips, pills)  ═══════════════ */
.glass{ background:var(--glass-fill); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hairline), var(--glass-ring), var(--glass-shadow); }
.glass-strong{ background:var(--glass-fill-strong); backdrop-filter:var(--glass-blur-strong);
  -webkit-backdrop-filter:var(--glass-blur-strong); box-shadow:var(--glass-hairline), var(--glass-ring), var(--glass-shadow); }
@supports not (backdrop-filter:blur(1px)){ /* graceful fallback — opaque cool surface, never muddy see-through */
  .glass{ background:var(--surface-2); } .glass-strong{ background:var(--surface); }
}

/* ─────────────────────────  LAYOUT  ───────────────────────────────────── */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--read{ max-width:var(--container-read); }
.section{ padding-block:var(--section-y); position:relative; z-index:3; } /* content above ambient (z0) + grain */
.section--tight{ padding-block:clamp(3.5rem, 7vw, 7rem); }
/* v4 depth = layered blacks + glow + atmosphere, NOT filled section bands → sections
   are transparent so the living black breathes through; only the deep sink is tinted. */
.section--canvas{  background:transparent; color:var(--body); }
.section--surface{ background:transparent; color:var(--body); }
/* QA dead-CSS: .section--sunk removed (no template applied it) */

.section-head{ display:flex; flex-direction:column; gap:var(--space-4); max-width:52rem; }
.section-head .eyebrow{ color:var(--accent-ink); }
.section-head--split{ max-width:none; }
.section-head__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-5); }

/* ═══════════════  E1 · EDITORIAL SECTION-INDEX — mono index on a COOL ink hairline  ═══════════════
   A full-width warm-white hairline (rgba INK, NEVER amber — the brown-wall lesson) carrying
   "01 · KOLEKSİYON" left + an optional muted twin right. The index NUMBER is the one warm glint. */
.section-index{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--space-2) var(--space-5); margin-bottom:var(--space-5);
  padding-top:var(--space-4); border-top:1px solid rgba(245,240,232,.08);
}
.section-index__eyebrow,.section-index__twin{
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1;
}
.section-index__eyebrow{ display:inline-flex; align-items:baseline; gap:.7ch; }
.section-index__num{ color:var(--accent); font-variant-numeric:tabular-nums; }
.section-index__sep{ color:var(--hairline-strong); }
.section-index__twin{ text-align:right; }
/* on the glowing glass contact panel the rule reads a touch stronger + AAA accent-ink number */
.on-dark .section-index{ border-top-color:rgba(245,240,232,.14); }
.on-dark .section-index__num{ color:var(--accent-on-dark); }

/* ═══════════════  E2 · GHOST MARQUEE — full-bleed INK atmosphere strips  ═══════════════
   Two identical groups → translateX(-50%) loops seamlessly. overflow:clip kills any
   horizontal scroll. INK only (warm-white ≤ .07) — texture, not copy; aria-hidden. */
.marquee{ overflow:clip; width:100%; padding-block:var(--space-6); pointer-events:none; user-select:none; }
.marquee__track{ display:flex; width:max-content; will-change:transform; animation:marquee-x 60s linear infinite; }
.marquee__group{
  flex:0 0 auto; white-space:nowrap; padding-right:.25em;
  font-family:var(--font-display); font-variation-settings:var(--fraunces-display); font-weight:400;
  font-size:clamp(3.5rem,8vw,7rem); line-height:1; letter-spacing:-.02em;
  color:rgba(245,240,232,.06);
}
.marquee--hero .marquee__group{ color:rgba(245,240,232,.07); }
@keyframes marquee-x{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ─────────────────────────  BUTTONS / LINKS (§9.8)  ─────────────────────── */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-caption);
  background:var(--accent); color:var(--cta-fg);
  padding:var(--space-4) var(--space-6); min-height:46px;
  border:0; border-radius:var(--radius-sm); cursor:pointer; text-align:center;
  transition:background var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-primary:hover{ background:var(--accent-hover); box-shadow:var(--glow-cta); color:var(--cta-fg); }
.btn-primary:active{ background:var(--accent-active); transform:scale(.98); } /* E5 tactile press */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-caption);
  background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent);
  padding:var(--space-4) var(--space-6); min-height:46px; border-radius:var(--radius-sm); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-in-out), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-ghost:hover{ background:var(--accent-subtle); color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--accent-hover); }
.on-dark .btn-ghost{ color:var(--accent-on-dark); box-shadow:inset 0 0 0 1.5px var(--accent-on-dark); }
.on-dark .btn-ghost:hover{ background:var(--accent-subtle); color:var(--accent-on-dark); }
/* amber-FILLED buttons keep deep-ink labels even inside .on-dark — the `.on-dark a`
   tint must NOT reach them (an <a class="btn-whatsapp"> would go amber-on-amber, ~1.3:1). */
.on-dark .btn-primary,.on-dark .btn-whatsapp{ color:var(--cta-fg); }
.on-dark .btn-primary:hover,.on-dark .btn-whatsapp:hover{ color:var(--cta-fg); }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.btn-full{ width:100%; }
/* WhatsApp CTA — amber fill, WA-green glyph tint only (§9.7) */
.btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-caption);
  background:var(--accent); color:var(--cta-fg);
  padding:var(--space-4) var(--space-6); min-height:46px; border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-whatsapp:hover{ background:var(--accent-hover); box-shadow:var(--glow-cta); color:var(--cta-fg); }
.btn-whatsapp:active{ transform:scale(.98); }
.btn-whatsapp svg{ color:var(--whatsapp); width:20px; height:20px; }

/* E5 · button icon nudge on hover + tactile press — transform only on the changed elements (no transition:all) */
.btn-primary svg,.btn-ghost svg,.btn-whatsapp svg{ transition:transform var(--dur-fast) var(--ease-out-soft); }
.btn-primary:hover svg,.btn-ghost:hover svg,.btn-whatsapp:hover svg{ transform:translateX(3px); }
.btn-ghost:active{ transform:scale(.98); }

.link-arrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-weight:600; font-size:var(--fs-caption); color:var(--accent);
  transition:color var(--dur-fast) var(--ease-in-out);
}
.link-arrow svg{ width:1.1em; height:1.1em; transition:transform var(--dur-fast) var(--ease-out-soft); }
.link-arrow:hover{ color:var(--accent-hover); }
.link-arrow:hover svg{ transform:translateX(3px); } /* E5 arrow nudge (transform, no reflow) */
.on-dark .link-arrow{ color:var(--accent-on-dark); }

.tag{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--surface-2);
}
.tag--accent{ background:var(--accent-subtle); color:var(--accent-ink); }

/* ─────────────────────  NAV — FLOATING GLASS PILL (§6)  ───────────────── */
.nav{ position:fixed; inset-block-start:var(--nav-top); inset-inline:0; z-index:50;
  display:flex; justify-content:center; pointer-events:none; }
.nav__inner{
  pointer-events:auto; width:min(100% - 2*var(--gutter), var(--container)); height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-4);
  padding-inline:clamp(1rem,2vw,1.5rem); border-radius:var(--radius-lg);
  background:var(--glass-fill-top); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hairline);
  transition:background var(--dur-base) var(--ease-in-out), box-shadow var(--dur-base) var(--ease-in-out);
}
/* barely-there at the hero top → firm glass after the sentinel scrolls out (main.js: .is-scrolled) */
.nav.is-scrolled .nav__inner{ background:var(--glass-fill); box-shadow:var(--glass-hairline), var(--glass-ring), var(--glass-shadow); }
/* inner pages (product / 404) keep a solid header from the top — the transparent-overlay is home-only */
body:not(.is-home) .nav__inner{ background:var(--glass-fill); box-shadow:var(--glass-hairline), var(--glass-ring), var(--glass-shadow); }
@supports not (backdrop-filter:blur(1px)){
  .nav__inner{ background:var(--surface); } .nav.is-scrolled .nav__inner{ background:var(--surface); }
}
.nav-sentinel{ position:absolute; top:0; left:0; width:1px; height:var(--nav-h); pointer-events:none; }

.wordmark{
  justify-self:start;
  font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:500; letter-spacing:-.01em; font-size:1.25rem; line-height:1; color:var(--ink); white-space:nowrap;
}
.wordmark:hover{ color:var(--ink); }
.nav__links{ justify-self:center; display:flex; align-items:center; gap:var(--space-6); list-style:none; padding:0; margin:0; }
.nav__link{
  position:relative; font-size:var(--fs-caption); font-weight:600; letter-spacing:.01em; color:var(--ink);
  padding:var(--space-2) 0;
  /* E5 · underline draw-in, left→right (background-image so it never affects layout) */
  background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;
  background-position:0 100%; background-size:0% 2px;
  transition:color var(--dur-fast) var(--ease-in-out), background-size 300ms var(--ease-out-soft);
}
.nav__link:hover{ color:var(--accent); background-size:100% 2px; }
.nav__link[aria-current="true"]{ background-image:none; } /* active keeps its solid ::after underline */
.nav__link[aria-current="true"]{ color:var(--accent); }
.nav__link[aria-current="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
}
.nav__cta{ justify-self:end; }
.nav__toggle{
  justify-self:end; display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:var(--ink); border-radius:var(--radius-sm);
}
.nav__toggle svg{ width:26px; height:26px; }

/* mobile drawer — full-screen glass-strong (§6) */
.drawer{
  position:fixed; inset:0; z-index:150; color:var(--on-dark);
  background:var(--glass-fill-strong); backdrop-filter:var(--glass-blur-strong); -webkit-backdrop-filter:var(--glass-blur-strong);
  display:flex; flex-direction:column; padding:var(--gutter);
  transform:translateY(-100%); visibility:hidden;
  transition:transform var(--dur-base) var(--ease-in-out), visibility var(--dur-base);
}
@supports not (backdrop-filter:blur(1px)){ .drawer{ background:var(--canvas-deepest); } }
.drawer.is-open{ transform:none; visibility:visible; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.drawer__top .wordmark{ color:var(--on-dark); }
.drawer__close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--on-dark); cursor:pointer; border-radius:var(--radius-sm); }
.drawer__close svg{ width:26px; height:26px; }
.drawer__links{ list-style:none; padding:0; margin:auto 0; display:flex; flex-direction:column; gap:var(--space-4); }
.drawer__link{
  font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:500; font-size:var(--fs-h2); color:var(--on-dark); letter-spacing:-.01em;
}
.drawer__link--cta{ color:var(--accent-on-dark); }
.drawer__foot{ display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-6); }
.drawer__foot a{ font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--on-dark-body); }
body.no-scroll{ overflow:hidden; }

/* ─────────────────────  HERO — full-bleed cinematic editorial (home)  ─────────────────────
   The armchair lives in the full-bleed backdrop (.hero-bg). Massive type sits LEFT over a
   directional legibility scrim; the section owns the very top (nav floats over it) and its
   base dissolves into the collection's near-black. No figure card, no 2-track — §3.1's
   no-overlap contract is retired here on purpose (director-sanctioned hero redesign). */
.hero{ display:flex; flex-direction:column; gap:var(--space-6); width:100%; }
.hero__text{ z-index:2; min-width:0; display:flex; flex-direction:column; gap:var(--space-5); max-width:40rem; }
.hero__eyebrow{ color:var(--accent-ink); }
.hero__lead{ max-width:32rem; }
.hero__cta .btn-row{ gap:var(--space-3); }
.hero__stats{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-7); margin-top:var(--space-2); }
.stat{ display:flex; flex-direction:column-reverse; gap:var(--space-1); } /* QA-fix: DOM is now dt(label)→dd(num) for a valid <dl>; column-reverse keeps the big number visually ABOVE the label */
.stat__num{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:460; font-size:var(--fs-h2); color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.stat__label{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@media (min-width:1024px){
  .hero__text{ max-width:38rem; }   /* headline block hugs the left; the chair breathes on the right of the frame */
}

/* ─────────────  HERO cinematic full-bleed BG — the spotlit chair IS the hero visual  ─────────────
   .hero-bg covers the section edge-to-edge and reaches the VERY TOP behind the transparent floating
   nav (body.is-home drops the top pad) → no seam under the header. A DIRECTIONAL scrim keeps the LEFT
   (headline / eyebrow / CTA) AAA while the spotlit chair reads on the right; the base FADES to
   --canvas-deepest (the exact tone the collection reveals) so scrolling down is a soft LAYERED
   dissolve, not a hard edge. Fallback: base floor = --canvas + the <img> self-removes onerror. */
.hero-section{ position:relative; isolation:isolate; overflow:clip;
  min-height:100svh; display:grid; align-items:center;
  padding-block:calc(var(--nav-h) + var(--nav-top) + var(--space-7)) var(--space-10); }
.hero-section > .container{ position:relative; z-index:1; }      /* hero content sits above the bg layer */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--canvas); }
.hero-bg__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 50%; opacity:.98; outline:0; }             /* the chair frames on the right; dark-left kept for text */
.hero-bg__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,6,8,.95) 0%, rgba(6,6,8,.82) 26%, rgba(7,7,9,.5) 48%, rgba(10,10,12,.14) 70%, rgba(10,10,12,0) 100%),
    linear-gradient(to bottom, transparent 60%, rgba(6,6,8,.5) 82%, var(--canvas-deepest) 100%); }
@media (max-width:1023px){ /* mobile: ONE cohesive frame — chair up top, headline emerging from the dark base */
  .hero-section{ align-items:end;
    padding-block:calc(var(--nav-h) + var(--nav-top) + var(--space-6)) var(--space-9); }
  .hero-bg__img{ object-position:64% 38%; opacity:.94; }
  .hero-bg__scrim{ background:
    linear-gradient(180deg, rgba(6,6,8,.24) 0%, rgba(6,6,8,.4) 38%, rgba(6,6,8,.72) 64%, rgba(6,6,8,.92) 85%, var(--canvas-deepest) 100%),
    radial-gradient(150% 66% at 62% 22%, transparent 44%, rgba(6,6,8,.4) 100%); }
}

/* E6 · hero scroll cue — 1px × 44px INK line + KAYDIR label, bottom-left, desktop + tall
   viewports only. Clipped by .hero-section{overflow:clip}; animation-specialist pulses
   [data-scroll-cue]. INK line only (never amber). */
.scroll-cue{ display:none; }
@media (min-height:700px) and (min-width:1024px){
  .scroll-cue{
    position:absolute; left:var(--gutter); bottom:var(--space-7); z-index:1;
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); pointer-events:none;
  }
}
.scroll-cue__label{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.scroll-cue__line{ width:1px; height:44px; background:rgba(245,240,232,.30); transform-origin:top center; }

/* ─────────────────────  GALLERY — the centerpiece (§4.1, §9.3/9.4)  ───── */
.gallery-head{ display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-6); }
.gallery-head .eyebrow{ color:var(--accent-ink); }

/* filter chips (§9.4) — sticky glass bar in a sunk trough, under the floating nav */
.filterbar{
  position:sticky; top:calc(var(--nav-h) + var(--nav-top) + var(--space-3)); z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  padding:var(--space-3); margin-bottom:var(--space-6);
  border-radius:var(--radius-md); /* v4-fix: was --radius-pill(999px) → a wrapped multi-row bar rendered as a giant oval BLOB. 18px = an intentional glass toolbar, not a pill. Chips stay pills. */
  background:var(--glass-fill); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hairline), var(--glass-ring);
}
@supports not (backdrop-filter:blur(1px)){ .filterbar{ background:var(--surface-2); } }
.filterbar__label{ flex:0 0 auto; font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 var(--space-2); }
.filterbar .chip{ flex:0 0 auto; } /* keep chip size → tidy wrap on desktop, horizontal-scroll on mobile (never squish) */
.chip{
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem 1.1rem; min-height:44px; border-radius:var(--radius-pill); /* QA-fix: 40→44px (AAA tap target); mobile override below also 44px */
  background:var(--surface-2); color:var(--body); box-shadow:var(--glass-ring); border:0; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast), background var(--dur-fast);
}
.chip:hover{ color:var(--fg); box-shadow:inset 0 0 0 1px rgba(238,154,84,.4); }
.chip[aria-pressed="true"]{ background:var(--accent); color:var(--on-light); box-shadow:var(--glow-cta); } /* lit amber pill — glows */
.gallery__count{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--muted); margin-bottom:var(--space-6); }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.8vw,2.5rem); }
/* gallery-wall cascade — desktop only; margin (not transform) so GSAP Flip stays correct */
@media (min-width:1024px){
  .gallery__item:nth-child(3n+2){ margin-block-start:var(--space-7); }
  .gallery__item:nth-child(3n+3){ margin-block-start:var(--space-9); }
}
.gallery__item.is-hidden{ display:none; }

/* (B) multi-child spot rig — the photo IS the card (§9.3) */
.gcard{ position:relative; isolation:isolate; display:block; border-radius:var(--radius-md); }
.gcard::before{ /* HALO bleeds onto the wall behind the card */
  content:""; position:absolute; z-index:-1; inset:-10% -7% -16%; /* QA-fix: tightened spread so 14 halos stop pooling into espresso in the desktop 3-up gutters */
  background:var(--spot-halo); filter:blur(28px); opacity:.55; transform:translateZ(0); pointer-events:none; /* QA-fix: .85→.55 — the spotlit glow survives, the accumulation doesn't */
  transition:opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
}
.gcard__frame{ display:block; position:relative; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden;
  background:var(--studio); box-shadow:var(--spot-frame);
  transition:box-shadow var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
/* v4-fix (BUG-2): the frame was a bare inline <span> (display:inline) → overflow:clip
   + border-radius did NOT clip the block <img>, so the spot-frame hairline read as a
   RECTANGLE around the photo. display:block + overflow:hidden + img border-radius:inherit
   makes the clip concentric & reliable; the §5 halo still bleeds from .gcard (overflow:visible). */
.gcard__frame::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:var(--spot-vignette); mix-blend-mode:multiply; }
.gcard img{ width:100%; height:100%; object-fit:cover; border-radius:inherit;
  outline:1px solid rgba(255,255,255,.10); outline-offset:-1px; /* neutral inset edge so the print doesn't blur into the wall — NOT brand-tinted */
  transition:transform var(--dur-slow) var(--ease-out-soft); }
/* HOVER/focus — spotlight swells, print lifts off the wall */
.gcard:hover .gcard__frame,.gcard:focus-visible .gcard__frame{ transform:translateY(-6px); box-shadow:var(--spot-frame-hover); }
.gcard:hover::before,.gcard:focus-visible::before{ opacity:1; transform:scale(1.06); }
.gcard:hover img,.gcard:focus-visible img{ transform:scale(1.045); }
.gcard:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.gcard__tag{ /* glass over-image label pill (real backdrop-blur) */
  position:absolute; top:var(--space-3); left:var(--space-3); z-index:2;
  background:var(--glass-fill); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  color:var(--ink); box-shadow:var(--glass-hairline), var(--glass-ring);
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500; line-height:1;
  letter-spacing:.12em; text-transform:uppercase; padding:.5rem .75rem; border-radius:var(--radius-pill);
}
@supports not (backdrop-filter:blur(1px)){ .gcard__tag{ background:color-mix(in srgb, var(--surface-3) 90%, transparent); } }
.gcard__reveal{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:var(--space-7) var(--space-4) var(--space-4);
  background:linear-gradient(to top, rgba(6,6,8,.9), transparent); color:var(--on-dark);
  opacity:0; transform:translateY(8px); transition:opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.gcard:hover .gcard__reveal,.gcard:focus-visible .gcard__reveal{ opacity:1; transform:none; }
.gcard__variant{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-body); display:block; }

/* E3 · curated caption UNDER the frame (inside the <a>, so GSAP-Flip carries it with the card):
   model name (left) + 2-digit catalog index (right). Always visible → mobile needs no hover.
   Hover/focus lifts name→ink, index→accent. Colour transitions live on the children (the JS
   neutralises .gcard's own transition for the magnetic drift — these are unaffected). */
.gcard__caption{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-3); }
.gcard__caption-name{
  font-family:var(--font-body); font-weight:500; font-size:.95rem; line-height:1.3; color:var(--body); text-wrap:pretty;
  transition:color var(--dur-base) var(--ease-out-soft);
}
.gcard__caption-index{
  flex:0 0 auto; font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.1em;
  color:var(--muted); font-variant-numeric:tabular-nums; line-height:1.3;
  transition:color var(--dur-base) var(--ease-out-soft);
}
.gcard:hover .gcard__caption-name,.gcard:focus-visible .gcard__caption-name{ color:var(--ink); }
.gcard:hover .gcard__caption-index,.gcard:focus-visible .gcard__caption-index{ color:var(--accent); }

/* ─────────  E4 · USE-CASE — editorial split (sticky intro + index rows), replaces the icon grid  ─────────
   Left: sticky headline + lead + big Fraunces stats (data-countup hooks; static text stays for no-JS).
   Right: 7 full-width index rows (mono number · Fraunces name · one-line descriptor · slide-in arrow),
   each a link to the quote section. Depth via a surface-lift on hover, not 1px dividers. */
.usecase-split{ display:grid; grid-template-columns:1fr; gap:var(--space-8); }
.usecase-intro{ display:flex; flex-direction:column; gap:var(--space-5); }
.usecase-intro .lead{ max-width:32rem; }
.usecase-stats{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-7); margin-top:var(--space-4); }
.ustat{ display:flex; flex-direction:column-reverse; gap:var(--space-1); } /* valid <dl>: dt→dd; reverse keeps the big number visually above the label */
.ustat__num{ font-family:var(--font-display); font-variation-settings:var(--fraunces-display); font-weight:400;
  font-size:clamp(2.75rem,5vw,4.25rem); line-height:.9; color:var(--ink); font-variant-numeric:tabular-nums; }
.ustat__label{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.usecase-rows{ display:flex; flex-direction:column; }
.usecase-row__link{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline;
  gap:var(--space-2) var(--space-5); padding:var(--space-5) var(--space-3);
  border-bottom:1px solid var(--hairline); border-radius:var(--radius-sm); color:var(--body);
  transition:background var(--dur-base) var(--ease-out-soft), padding var(--dur-base) var(--ease-out-soft);
}
.usecase-rows li:first-child .usecase-row__link{ border-top:1px solid var(--hairline); }
.usecase-row__num{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.1em;
  color:var(--muted); font-variant-numeric:tabular-nums; transition:color var(--dur-base) var(--ease-out-soft); }
.usecase-row__body{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.usecase-row__name{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head); font-weight:500;
  font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.08; letter-spacing:-.01em; color:var(--ink);
  text-wrap:balance; transition:color var(--dur-base) var(--ease-out-soft); }
.usecase-row__desc{ font-family:var(--font-body); font-size:var(--fs-caption); line-height:1.4; color:var(--muted); text-wrap:pretty; }
.usecase-row__arrow{ display:inline-flex; align-items:center; justify-content:center; align-self:center; color:var(--accent);
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
.usecase-row__arrow svg{ width:20px; height:20px; }
.usecase-row__link:hover,.usecase-row__link:focus-visible{ background:var(--surface); padding-inline:var(--space-5); }
.usecase-row__link:hover .usecase-row__name,.usecase-row__link:focus-visible .usecase-row__name{ color:var(--ink); }
.usecase-row__link:hover .usecase-row__num,.usecase-row__link:focus-visible .usecase-row__num{ color:var(--accent); }
.usecase-row__link:hover .usecase-row__arrow,.usecase-row__link:focus-visible .usecase-row__arrow{ opacity:1; transform:none; }
.usecase-row__link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
/* touch devices have no hover → show a faint static arrow so the row still reads as a link (qa note) */
@media (hover:none){ .usecase-row__arrow{ opacity:.45; transform:none; } }
@media (min-width:1024px){
  .usecase-split{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2.5rem,5vw,5.5rem); align-items:start; }
  .usecase-intro{ position:sticky; top:calc(var(--nav-h) + var(--nav-top) + var(--space-6)); }
}

/* ─────────────────  CONTACT — glass-strong panel, the one lifted/glowing moment (§9.7)  ─────────── */
.contact{
  background:var(--glass-fill-strong); backdrop-filter:var(--glass-blur-strong); -webkit-backdrop-filter:var(--glass-blur-strong);
  color:var(--on-dark); border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,4.5rem); display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr; align-items:start;
  /* lifting into light: hairline top-edge + inset ring + deep seat + accent-glow ring */
  box-shadow:var(--glass-hairline), var(--glass-ring), 0 40px 100px -50px rgba(0,0,0,.85), 0 0 90px -28px var(--accent-glow);
}
@supports not (backdrop-filter:blur(1px)){ .contact{ background:var(--surface-2); } }
.contact__copy{ display:flex; flex-direction:column; gap:var(--space-4); }
.contact__copy .eyebrow{ color:var(--accent-on-dark); }
.contact__statement{ color:var(--on-dark); }
.contact__direct{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2); }
.contact__tel{ display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.04em; color:var(--on-dark-body); font-variant-numeric:tabular-nums; }
.contact__tel svg{ width:18px; height:18px; color:var(--accent-on-dark); }
@media (min-width:900px){ .contact{ grid-template-columns:1.05fr .95fr; align-items:center; } }

/* form */
.form{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field--full{ grid-column:1 / -1; }
.field__label{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-muted); }
.field__label .req{ color:var(--accent-on-dark); }
.field input,.field select,.field textarea{
  width:100%; background:var(--walnut-2); color:var(--on-dark); border:0;
  border-bottom:1.5px solid var(--hairline-strong); border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  padding:var(--space-3) var(--space-4); font:inherit; min-height:46px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea{ min-height:6.5rem; resize:vertical; line-height:1.55; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2385818C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--space-4) center; padding-right:var(--space-8); }
.field input::placeholder,.field textarea::placeholder{ color:var(--on-dark-muted); }
.field :is(input,select,textarea):focus{ outline:none; border-bottom-color:var(--accent); box-shadow:var(--glow-focus); }
.field--error :is(input,select,textarea){ border-bottom-color:var(--error); }
.field__msg{ font-size:var(--fs-caption); color:#F0B7AE; min-height:1em; }
.field__hint{ font-size:var(--fs-caption); color:var(--on-dark-muted); }
.form__submit{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.form__privacy{ font-size:var(--fs-caption); color:var(--on-dark-muted); max-width:26rem; }
.hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.formnote{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm); margin-bottom:var(--space-5); font-size:var(--fs-caption); grid-column:1 / -1; }
.formnote svg{ width:20px; height:20px; flex:0 0 20px; margin-top:1px; }
.formnote--ok{ background:var(--success-bg); color:#CDE9D4; }
.formnote--ok svg{ color:var(--success); }
.formnote--err{ background:var(--error-bg); color:#F5CFC6; }
.formnote--err svg{ color:var(--error); }

.form-success{ display:flex; flex-direction:column; gap:var(--space-3); }
.form-success__icon{ width:44px; height:44px; color:var(--accent-on-dark); }
.form-success h2{ color:var(--on-dark); }

/* ─────────────────────────  PDP — lean spotlit detail (§9.6)  ─────────────────── */
.pdp{ display:grid; grid-template-columns:1fr; gap:var(--space-7); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.06em; color:var(--muted); margin-bottom:var(--space-6); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb__sep{ color:rgba(245,240,232,.28); }
.breadcrumb [aria-current="page"]{ color:var(--ink); }

.detail__main{ aspect-ratio:5/8; }  /* portrait frame ≈ real photo ratio (~0.6) so contain leaves almost no letterbox */
.detail__main .gallery__img{ position:absolute; inset:0; opacity:0; transition:opacity 300ms var(--ease-out-soft); }
.detail__main .gallery__img.is-active{ opacity:1; position:relative; }
/* v4-fix (BUG-3): the frame stays overflow:visible (the §5 halo must bleed), so clip
   the photo at the IMG level via border-radius:inherit — image can never exceed the
   rounded bounds. + neutral inset edge. */
/* v4-fix (PDP zoom, 4th report): the source angle photos are PORTRAIT (~0.56–0.63) but the frame
   was 4/5 (0.8) → object-fit:cover zoomed/cropped the chair to fill. contain shows the WHOLE chair,
   never zoomed; the dark --studio frame bg makes any thin letterbox blend into the photo's own black. */
.detail__main img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:inherit; }
.detail__thumbs{ display:flex; gap:var(--space-3); margin-top:var(--space-4); }
.detail__thumb{
  flex:1; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  background:var(--studio); border:0; padding:0;
  box-shadow:var(--glass-ring); transition:box-shadow var(--dur-fast) var(--ease-in-out); position:relative;
}
.detail__thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
  outline:1px solid rgba(255,255,255,.10); outline-offset:-1px; }
.detail__thumb[aria-current="true"]{ box-shadow:inset 0 0 0 2px var(--accent), 0 0 26px -8px var(--halo-warm); }
.detail__thumb:hover{ box-shadow:inset 0 0 0 2px var(--accent-hover); }

.spec{ position:sticky; top:calc(var(--nav-h) + var(--nav-top) + var(--space-5)); align-self:start; }
.spec__head{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); }
.spec__name{ font-size:var(--fs-h1); }
.spec__lede{ color:var(--body); font-size:var(--fs-caption); }
.spec__swatches{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5); }
.swatch{ width:1.15rem; height:1.15rem; border-radius:var(--radius-pill); box-shadow:inset 0 0 0 1px rgba(245,240,232,.22); }
.spec__list{ margin:0 0 var(--space-6); }
.spec__row{ display:flex; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-3); border-bottom:1px solid var(--hairline); }
.spec__key{ color:var(--muted); font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.spec__val{ color:var(--ink); font-size:var(--fs-caption); font-weight:500; text-align:right; font-variant-numeric:tabular-nums; }
.spec__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); }
.mat-chip{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--body);
  background:var(--surface-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-xs); box-shadow:var(--glass-ring); }
.spec__actions{ display:flex; flex-direction:column; gap:var(--space-3); }
@media (min-width:900px){
  .pdp{ grid-template-columns:1.15fr .85fr; gap:var(--space-8); align-items:start; }
  .pdp__crumb{ grid-column:1 / -1; }
}
/* MOBILE PDP fix: angle photos are tall portraits (~0.63) — the 4/5 box cropped heads & legs and
   read oversized. Match the photography (5/8 ≈ 0.62) so the WHOLE chair reads, and contain the
   "print" (capped width, centered) so main + thumbs sit inside comfortable negative space. */
@media (max-width:900px){
  .pdp__gallery{ max-width:min(90%, 19rem); margin-inline:auto; }
  .detail__main{ aspect-ratio:5/8; }
}

/* ─────────────────────────  FOOTER — deepest void bookend (§9.9)  ──────────── */
.footer{ position:relative; z-index:3; background:var(--footer); color:var(--on-dark); padding-block:var(--space-9) var(--space-7); }
.footer__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-4) var(--space-6); }
.footer__sign{ font-family:var(--font-display); font-variation-settings:var(--fraunces-head);
  font-weight:500; letter-spacing:-.01em; font-size:clamp(2.25rem,6vw,4.5rem); line-height:1; color:var(--on-dark); display:inline-block; }
/* E7 · back-to-top — mono link, arrow lifts on hover; smooth-scroll via the Lenis anchor handler (href="#main") */
.footer__totop{ display:inline-flex; align-items:center; gap:.6ch; font-family:var(--font-mono);
  font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted);
  padding-block:var(--space-4); margin-block:calc(-1 * var(--space-4)); /* ≥44px hit area, zero layout shift */
  transition:color var(--dur-fast) var(--ease-in-out); }
.footer__totop:hover{ color:var(--accent-on-dark); }
.footer__totop-arrow{ display:inline-block; transition:transform var(--dur-base) var(--ease-out-soft); }
.footer__totop:hover .footer__totop-arrow{ transform:translateY(-3px); }
.footer__rule{ height:1px; background:var(--ceremony); opacity:.5; margin:var(--space-6) 0 var(--space-7); border:0; }
.footer__cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-7); }
.footer__col h4{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:var(--space-4); font-weight:500; }
.footer__col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.footer__col a{ color:var(--on-dark-body); font-size:var(--fs-caption);
  background-image:linear-gradient(var(--accent-on-dark),var(--accent-on-dark)); background-repeat:no-repeat;
  background-position:0 100%; background-size:0% 1px; /* E5 · underline draw-in */
  transition:color var(--dur-fast) var(--ease-in-out), background-size 300ms var(--ease-out-soft); }
.footer__col a:hover{ color:var(--accent-on-dark); background-size:100% 1px; }
.footer__note{ color:var(--on-dark-body); font-size:var(--fs-caption); max-width:26rem; }
.footer__num{ font-family:var(--font-mono); color:var(--on-dark); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.footer__soon{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.06em; color:var(--on-dark-muted); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-8); color:var(--on-dark-muted); font-size:var(--fs-caption); }

/* ─────────────────────────  UTILITIES  ────────────────────────────────── */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.stack{ display:flex; flex-direction:column; }
.gap-3{ gap:var(--space-3); } .gap-4{ gap:var(--space-4); } .gap-5{ gap:var(--space-5); }

/* reveal hooks — hidden ONLY under the armed JS layer (progressive enhancement).
   No JS / reduced-motion / GSAP-fail → .js-anim never added → content visible. */
.js-anim [data-reveal]{ opacity:0; transform:translateY(28px); }
.js-anim [data-reveal].is-visible{ opacity:1; transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out-soft), transform var(--dur-reveal) var(--ease-out-soft); }

/* ─────────────────────────  RESPONSIVE  ───────────────────────────────── */
@media (max-width:1024px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .chip{ min-height:44px; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  /* v4-fix (BUG-1): premium mobile filter = ONE horizontal-scroll row. Kills the
     wrapping blob AND the overlap onto the scene above / first card below (a short
     ~64px bar can't bleed into siblings). Hidden scrollbar, gentle snap, momentum. */
  .filterbar{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--space-3); scrollbar-width:none; /* Firefox */
  }
  .filterbar::-webkit-scrollbar{ display:none; }               /* WebKit/Blink */
  .filterbar .chip{ scroll-snap-align:start; }
  /* QA-fix: hide the decorative "AİLE" prefix on the mobile scroll-row (it clipped at the
     rounded start-corner and stole width from the chips). The group keeps aria-label
     "Aileye göre filtrele" so the affordance stays for assistive tech. */
  .filterbar__label{ display:none; }
}
@media (max-width:600px){
  .gallery{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr; }
  .btn-primary,.btn-ghost,.btn-whatsapp{ width:100%; }
  .hero__cta .btn-row{ flex-direction:column; align-items:stretch; }
}
/* (removed 2K-hero bug) an ultra-wide .container padding override added (100vw−container)/2 of padding
   ON TOP of the already max-width:1440 + margin-inline:auto container → at 2560px the content box
   collapsed to ~224px, breaking the hero headline mid-word ("Otur/manın") and marooning the text in
   the centre. .container already centres correctly at every width; no ≥1441 override is needed. */

/* ─────────────────  REDUCED MOTION (§8/§10 fallback)  ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
  html{ scroll-behavior:auto; }
  .ambient::before,.ambient::after{ animation:none; }       /* blobs freeze, stay lit */
  body::before{ opacity:.045; }
  .js-anim [data-reveal]{ opacity:1; transform:none; }       /* scenes stay fully visible & lit */
}

/* ════════  MOTION LAYER (animation-specialist) — armed states only  ════════
   `.js-anim` is added by JS ONLY after GSAP is confirmed, so these hidden
   states never trap content when JS/GSAP is absent. Cursor + headline split
   live here; JS owns the choreography (see main.js HOOK CONTRACT). */
.js-anim [data-split]{ opacity:0; }
.split-line{ will-change:transform; }

/* custom cursor styles removed on request → the native OS pointer is used everywhere */

@media (prefers-reduced-motion:reduce){
  .js-anim [data-split]{ opacity:1; }
  .split-line{ will-change:auto; }
}