/* ============================================================= tokens */
:root{
  --ink:#05070a;          /* page black */
  --ink-2:#0a0e12;        /* raised black */
  --bone:#dfe7e0;         /* the pale sage white of the wordmark */
  --bone-dim:#aab4ad;
  --muted:#78837c;
  --line:rgba(223,231,224,.13);
  --line-soft:rgba(223,231,224,.07);
  --vermilion:#e0231c;
  --ember:#ff5a3c;
  --gold:#c9a24a;
  /* İkinci ses. Onest markanın konuşma sesi; ölçülen her şey — kot, kod,
     tolerans, adım, sayaç — mono'da yazılır. Site tamamen self-contained
     olduğu için ikinci bir webfont indirmek yerine sistem ailesi kullanılıyor. */
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --pad:clamp(20px, 3.4vw, 56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html, body{ overflow-x:hidden !important; max-width:100% !important; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; height:100vh; }
::selection{ background:var(--vermilion); color:#fff; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============================================================= layers */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0; background:#05070a;
}
#grain{
  position:fixed; inset:-1px; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:180px 180px;
}
#vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(2,4,6,.55) 100%);
}
.page{ position:relative; z-index:10; }

/* ============================================================= type */
.eyebrow{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-dim); text-shadow:0 1px 16px rgba(3,6,8,.9);
}
.jp{ font-family:'Onest',sans-serif; font-weight:400; }
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:-.005em; }
.display{
  text-transform:uppercase; line-height:1.055; letter-spacing:-.012em;
  font-weight:500; text-shadow:0 2px 34px rgba(3,6,8,.72);
}
.h-hero{ font-size:clamp(42px,5vw,72px); font-weight:700; letter-spacing:-.026em; }
.h-sec{ font-size:clamp(32px,3.6vw,56px); font-weight:500; }
.body-lg{ font-size:clamp(14px,1.02vw,17px); line-height:1.72; color:#b4bfb7; font-weight:300; text-shadow:0 1px 20px rgba(3,6,8,.88); }
.body{ font-size:14px; line-height:1.68; color:#9aa5a0; font-weight:300; text-shadow:0 1px 18px rgba(3,6,8,.85); }
.num{ font-size:clamp(26px,2.5vw,36px); font-weight:300; letter-spacing:-.02em; color:var(--bone); font-variant-numeric:tabular-nums; }

/* ============================================================= reveal */
[data-rv]{ opacity:0; }
[data-rv="up"]{ transform:translate3d(0,var(--rise,26px),0); }
[data-rv="fade"]{ transform:none; }
[data-rv].rv-in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out); }
.mask-line{ display:block; overflow:hidden; }
.mask-line:not(.word-reveal) > span{ display:block; transform:translate3d(0,110%,0); }
.rv-in .mask-line:not(.word-reveal) > span, .mask-line:not(.word-reveal).rv-in > span{ transform:none; }
.mask-line:not(.word-reveal) > span{ transition:transform 1.05s var(--ease-out); }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:6px; margin-bottom:-6px; }
.word{
  display:inline-block; opacity:0; transform:translate3d(0,112%,0); will-change:transform,opacity;
  transition:transform .82s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay:var(--word-delay,0ms);
}
.word-reveal.rv-in .word{ opacity:1; transform:none; }

/* ============================================================= preloader */
#pre{
  position:fixed; inset:0; z-index:100; background:#05070a;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-in{ width:min(420px,74vw); text-align:center; }
.pre-mark{ margin:0 auto 26px; width:min(190px,60vw); height:44px; opacity:.92; }
/* The mark is the car silhouette alone, cut out on real alpha. It used to be
   the full car-plus-wordmark plate flattened with mix-blend-mode:screen — a
   hack for a black-boxed source. The source was never black-boxed, so all the
   blend did was screen the dark wordmark down to a grey smear that read as a
   dirty patch behind the logo. Straight alpha, no blend, no filter. */
.pre-mark .logo-img{ width:100%; height:100%; display:block; object-fit:contain; }
.pre-jp{ font-size:12px; letter-spacing:.5em; color:var(--bone-dim); margin-bottom:20px; }
.pre-bar{ position:relative; height:1px; background:rgba(223,231,224,.14); overflow:hidden; }
.pre-bar i{ position:absolute; inset:0 100% 0 0; background:var(--bone); transition:right .35s linear; }
.pre-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pre-meta b{ font-weight:500; color:var(--bone-dim); font-variant-numeric:tabular-nums; }

/* ============================================================= nav */
.nav{
  /* Width comes from --vw, not from right:0. A fixed element resolves its
     inset against the initial containing block, and the page's own horizontal
     overflow makes that block wider than the screen — 437 against a 390 phone,
     860 against a 768 tablet — which carried the burger off the right edge.
     --vw is the layout viewport, written on every resize. */
  position:fixed; top:0; left:0; width:var(--vw, 100%); height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:transform .55s var(--ease);
}
/* The sticky wash sits on its own layer rather than on the bar. A
   backdrop-filter promotes its element to the containing block for any
   position:fixed descendant, and the bar holds the mobile menu sheet — put the
   blur here and the sheet was measured against an 84px bar instead of the
   frame, for as long as the blur took to fade. */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(5,7,10,.62);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1; }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1; }
.nav.hide{ transform:translate3d(0,-101%,0); }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0; }
/* Same cut-out mark as the preloader, sized off the bar rather than a fixed
   44px: at 4.46:1 the old height pushed the silhouette to 196px and the
   lockup ran into the links on a 1024 frame. */
.brand .logo-img{ height:clamp(24px,2.2vw,32px); width:auto; display:block; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.34em; color:var(--muted); }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,46px); margin-left:auto; }
.nav-link{
  position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden;
}
.nav-link span{ display:block; height:15px; line-height:15px; transition:transform .55s var(--ease-out), color .3s; }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0); color:var(--bone); letter-spacing:.32em; }
.nav-link:hover span{ transform:translate3d(0,-100%,0); }
.nav-link:hover .alt{ transform:none; }
/* Cart count owns a bounded badge. It never participates in the navigation
   label's vertical number swap, so a quantity glyph cannot stretch into the
   burger or inherit the old .alt transform. */
.nav-cart{ display:inline-flex; align-items:center; gap:7px; height:auto; overflow:visible; }
.nav-cart > span:first-child{ display:inline; height:auto; line-height:15px; }
.nav-cart-count{
  display:inline-grid; place-items:center; flex:0 0 auto;
  min-width:18px; height:18px; padding:0 5px; border:1px solid rgba(223,231,224,.24);
  border-radius:999px; background:rgba(223,231,224,.08); color:var(--bone);
  font-size:9px; font-weight:500; line-height:1; letter-spacing:0;
  font-variant-numeric:tabular-nums; transform-origin:center;
  transition:transform .2s var(--ease-out), background-color .2s ease;
}
@keyframes cartBadgeBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-5deg); background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
  65% { transform: scale(0.92) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.nav-cart-count.badge-bounce {
  animation: cartBadgeBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-cart-count[hidden]{ display:none; }
.nav-cart:hover{
  background:rgba(223,231,224,.06);
  border-radius:999px;
  transition:background .2s var(--ease);
}
.nav-cart:hover span{ transform:none; }
.nav-link.on{ color:var(--bone); }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--vermilion); }
/* Menüde tek hedefe iki bağlantı vardı ("Paspas Oluştur" ve "Sipariş", ikisi de
   /paspas-olustur). Bölüm bağlantıları 01-03 numaralı kaldı; oluşturucu ise
   menünün içinde bir sıra değil, tek eylem düğmesi. */
.nav-cta{
  display:inline-flex; align-items:center; align-self:center; padding:9px 18px;
  border-radius:999px; background:var(--vermilion); color:#fff;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s var(--ease-out), transform .16s var(--ease-out),
    box-shadow .2s var(--ease-out);
}
.nav-cta:hover{ background:#f2453c; transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(224,35,28,.6); }
.nav-cta:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }

.sr-only{
  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;
}
.nav-burger{ display:none; margin-left:clamp(18px,2.6vw,42px); width:26px; height:16px; position:relative; flex:0 0 auto; }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone); transition:width .45s var(--ease-out), transform .45s var(--ease-out); }
.nav-burger i:nth-child(1){ top:4px; width:26px; }
.nav-burger i:nth-child(2){ top:11px; width:17px; }
.nav-burger:hover i:nth-child(2){ width:26px; }
.nav-burger:hover i:nth-child(1){ width:17px; }

/* ============================================================= hero */
.hero{ position:relative; min-height:100svh; padding:0 var(--pad); display:flex; flex-direction:column; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.5; z-index:0; pointer-events:none; contain:paint;
}
.hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:46%; pointer-events:none;
  background:linear-gradient(rgba(3,6,9,.72), rgba(3,6,9,.34) 46%, transparent); }
/* Left scrim: a horizontal veil that tightens the headline's left edge
   over the wordmark without darkening the whole hero. Fades by 38%
   from the left so the right side of the hero stays open. */
.hero::after{ content:''; position:absolute; left:0; top:0; width:38%; height:52%; pointer-events:none;
  background:linear-gradient(to right, rgba(3,6,9,.5), transparent); }
.hero-top{ padding-top:calc(var(--nav-h) + clamp(12px,2.6vh,34px)); max-width:min(560px,46vw); position:relative; z-index:2; }
.hero-copy{
  opacity:1; transform:none; filter:none;
  transition:opacity .18s var(--ease-out), transform .22s var(--ease-out), filter .22s var(--ease-out);
}
.hero-copy.is-changing{ opacity:0; transform:translate3d(0,6px,0); filter:blur(2px); }
.hero-top .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.hero-top .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--vermilion); box-shadow:0 0 10px var(--vermilion); }
.hero h1{ margin-bottom:18px;
  /* Override the .display base shadow: two layers push the headline forward
     over the wordmark — tight dark core for legibility, wide diffuse halo
     to soften the mark behind it. The brand feel stays; only the reading
     distance changes. */
  text-shadow:0 2px 24px rgba(3,6,8,.92), 0 0 60px rgba(3,6,8,.55); }
.hero-sub{ max-width:322px; text-shadow:0 1px 26px rgba(3,6,8,.95); }
.hero-cta-wrap{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
/* flex:1 already hands the spacer every pixel the copy and the index do not
   want, which is the whole point of it on a desktop frame. The 26vh floor on
   top of that only ever bound in the one case it must not: a phone, where the
   headline runs to four lines and the index is two rows, and 211px of forced
   air pushed the hero to 860 against an 812 frame — the last row of chapters
   sat under the fold with nothing below it to suggest a scroll. */
.hero-spacer{ flex:1 1 auto; min-height:clamp(28px,6vh,72px); }
.hero-foot{ padding-bottom:clamp(22px,4.2vh,42px); position:relative; z-index:2; }
.hero-cue{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:14px;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.hero-slide-count{ font-family:var(--mono); color:var(--bone-dim); font-variant-numeric:tabular-nums; }
.hero-video-toggle{
  padding:4px 9px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .18s var(--ease-out), border-color .18s var(--ease-out), transform .14s var(--ease-out);
}
.hero-video-toggle:hover{ color:var(--bone); border-color:rgba(223,231,224,.34); }
.hero-video-toggle:active{ transform:scale(.97); }
.hero-video-toggle:focus-visible,.chip:focus-visible{ outline:1px solid var(--bone); outline-offset:4px; }
/* Gezinme bağlantıları sitenin tek odak kuralsız öğesiydi; tarayıcı
   varsayılanına (turuncu auto halka) düşüyordu. */
.nav-link:focus-visible{ outline:1px solid var(--bone); outline-offset:4px; border-radius:2px; }
.hero-cue .track{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero-cue .track i{ position:absolute; inset:0; background:var(--bone); transform-origin:left;
  animation:cue 4s linear infinite; }
.chapters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,40px);
  border-top:1px solid var(--line-soft); padding-top:18px;
}
.chip{
  position:relative; display:flex; gap:14px; align-items:flex-start; width:100%; padding:0;
  text-align:left; cursor:pointer;
}
.chip::before{
  content:''; position:absolute; top:-19px; left:0; width:100%; height:1px;
  background:var(--vermilion); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.chip.on::before{ transform:scaleX(1); }
.chip .num{ line-height:1; flex:0 0 auto; transition:color .18s var(--ease-out), transform .22s var(--ease-out); }
.chip .tx{ min-width:0; padding-top:3px; }
.chip b{ display:block; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:6px; transition:color .18s var(--ease-out);
  text-shadow:0 1px 16px rgba(3,6,8,.9); }
.chip-desc{ display:block; margin:0; font-size:11px; line-height:1.5; color:#7d8781; max-width:22ch;
  transition:color .18s var(--ease-out); }
.chip:hover .num{ color:var(--ember); transform:translate3d(0,-2px,0); }
.chip:hover b{ color:var(--bone); }
.chip:hover .chip-desc{ color:var(--bone-dim); }
.chip.on .num{ color:var(--ember); }
.chip.on b{ color:var(--bone); }
/* the floating hero preview window (a live view into chapter 02); disabled with the cut-out layers */
.peek{ display:none !important; }

.hero-side{
  position:absolute; z-index:2; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none;
}
.hero-side .v{ writing-mode:vertical-rl; font-size:13px; letter-spacing:.62em; color:rgba(223,231,224,.5); }
@keyframes cue{ 0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }

/* ============================================================= sections */
/* 15vh top and bottom meets 15vh of the next chapter, so every seam in the
   page was ~270px of unbroken black on a 900 frame — the gate to the plates
   read as the end of the document rather than a breath between chapters. The
   rhythm is the point, so it is shortened rather than removed: one seam is
   now about two thirds of what it was, which still clears every band. */
.sec{ position:relative; padding:clamp(64px,10vh,140px) var(--pad); }
.sec::before{
  content:''; position:absolute; inset:-22% -4%; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 62% at 30% 50%, rgba(4,7,10,.88), rgba(4,7,10,.62) 42%, rgba(4,7,10,.18) 74%, rgba(4,7,10,0));
  /* A chapter's scrim is there to hold its own copy off the sanctuary, and it
     is inset -22% so its edges never land as a seam. That overshoot, plus the
     section's top padding, means it was washing most of a screen of scene
     above the chapter — the frame stayed masked long after the hero had let
     go of it. The mask takes the top of it back off: nothing at the very top,
     full strength by the time the chapter's own first line arrives. */
  -webkit-mask-image:linear-gradient(transparent, #000 44%);
          mask-image:linear-gradient(transparent, #000 44%);
}
#araca-ozel::before{ background:radial-gradient(108% 64% at 50% 50%, rgba(4,7,10,.70), rgba(4,7,10,.44) 50%, rgba(4,7,10,0)); }
#siparis::before{ background:radial-gradient(82% 58% at 50% 46%, rgba(4,7,10,.26), rgba(4,7,10,.66) 56%, rgba(4,7,10,.90) 82%, rgba(4,7,10,0)); }
.foot::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(4,7,10,.55), rgba(4,7,10,.94) 40%, rgba(4,7,10,.98));
}
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vh,66px); }
.sec-head .k{ font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.sec-head .k b{ color:var(--vermilion); font-weight:500; }
.rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }

/* — chapter I: the gate */
.gate-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px,5vw,90px); align-items:start; }
.gate-grid h2{ max-width:11ch; }
.gate-copy{ padding-top:6px; }
.gate-copy .lead{ font-size:clamp(15px,1.16vw,19px); line-height:1.66; color:#c2cdc5; text-shadow:0 1px 20px rgba(3,6,8,.9); }
.gate-copy .lead + p{ margin-top:20px; }
.arrowlink{ display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); }
.arrowlink .ar{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .45s var(--ease), border-color .45s, transform .5s var(--ease-out); }
.arrowlink .ar svg{ width:13px; height:13px; transition:transform .5s var(--ease-out); }
.arrowlink:hover .ar{ background:var(--bone); border-color:var(--bone); }
.arrowlink:hover .ar svg{ transform:translate3d(2px,-2px,0); }
.arrowlink:hover .ar svg path{ stroke:#05070a; }
.gate-stats{ display:flex; gap:clamp(24px,4vw,62px); margin-top:clamp(46px,8vh,96px); border-top:1px solid var(--line-soft); padding-top:24px; }
/* — how it's made: three steps (cut, sew, check) */
.craft{ margin-top:clamp(40px,7vh,72px); }
.craft-label{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:clamp(18px,3vh,30px); }
.craft-label .dot{ width:5px; height:5px; border-radius:50%; background:var(--vermilion);
  box-shadow:0 0 10px var(--vermilion); }
.craft-steps{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-soft); }
.craft-step{ --rise:26px; padding:clamp(18px,2.4vw,30px) 0 clamp(24px,3.2vw,42px); }
.craft-step:nth-child(2){ --rise:38px; }
.craft-step:nth-child(3){ --rise:50px; }
.craft-step + .craft-step{ border-left:1px solid var(--line-soft); padding-left:clamp(16px,2vw,28px); }
.craft-head{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(10px,1.4vh,14px); }
.craft-num{ display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:32px; padding:0 13px; border:1px solid rgba(224,35,28,.45); border-radius:999px;
  font-family:var(--mono); font-size:clamp(12px,.9vw,14px); font-weight:400; letter-spacing:.04em;
  color:var(--vermilion); font-variant-numeric:tabular-nums;
  transition:background .45s var(--ease-out), color .45s var(--ease-out),
    border-color .45s var(--ease-out), box-shadow .45s var(--ease-out), transform .5s var(--ease-out); }
.craft-step:hover .craft-num{ background:var(--vermilion); border-color:var(--vermilion); color:#fff;
  box-shadow:0 0 20px rgba(224,35,28,.32); transform:translateY(-2px); }
.craft-arrow{ width:16px; height:16px; color:var(--vermilion);
  opacity:0; transform:translate3d(-6px,6px,0);
  transition:opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.craft-step:hover .craft-arrow{ opacity:1; transform:none; }
.craft-step h4{ font-size:clamp(15px,1.3vw,19px); font-weight:400; color:var(--bone);
  margin:0 0 8px; letter-spacing:.01em; }
.craft-step p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--muted); max-width:34ch; }

.gate-video{ position:relative; margin-top:clamp(34px,6vh,64px); border:1px solid var(--line-soft);
  border-radius:16px; overflow:hidden; background:#05070a; contain:paint; }
.gate-video video{ display:block; width:100%; height:auto; max-height:min(62svh,560px); object-fit:cover; }
.gate-video-cap{ position:absolute; left:14px; bottom:12px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-dim); background:rgba(3,6,9,.6); padding:7px 12px;
  border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@media (max-width:820px){
  .gate-video video{ max-height:52svh; }
  .craft-steps{ grid-template-columns:1fr; }
  .craft-step + .craft-step{ border-left:0; padding-left:0; }
}
.gate-stats div b{ display:block; font-family:var(--mono); font-size:clamp(20px,1.9vw,29px); font-weight:400; letter-spacing:-.02em; }
.gate-stats div span{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* — dikey tanıtım videosu
   Kaynak 9:16. Oranı kırpmak yerine koruyoruz: masaüstünde dar bir sütunda
   metnin yanında durur, mobilde tam genişliğe geçer. Yüksekliği svh ile
   sınırlanır ki uzun ekranlarda bölümü tek başına doldurmasın. */
/* Satır kendi içeriği kadar geniş. Tam genişlikte iki 240 piksellik dikey
   panel ile 46ch'lik bir paragraf, sağda 470 piksellik boş bir alan
   bırakıyordu — bölüm dolu değil, yarım görünüyordu. */
.promo-row{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(20px,3vw,56px); align-items:center; max-width:1080px;
}
.promo-stages{ display:flex; gap:clamp(8px,1vw,14px); }
.promo-stage{
  position:relative; border:1px solid var(--line-soft); border-radius:16px;
  overflow:hidden; background:#05070a; contain:paint;
  width:min(262px,32vw); aspect-ratio:9/16; max-height:min(64svh,560px);
}
.promo-stage video{ display:block; width:100%; height:100%; object-fit:cover; }
.promo-copy h3{
  margin:0 0 12px; font-size:clamp(20px,2.4vw,32px); font-weight:300;
  letter-spacing:-.02em; line-height:1.2; color:var(--bone);
}
.promo-copy p{
  margin:0 0 22px; max-width:46ch; font-size:14px; line-height:1.6; color:var(--muted);
}
@media (max-width:820px){
  /* İki 9:16 paneli mobilde alt alta koymak bölümü aşırı uzatırdı;
     yan yana kalıp küçülüyorlar, metin altlarına iniyor. */
  .promo-row{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .promo-stage{ width:min(170px,42vw); }
  .promo-copy p{ margin-inline:auto; }
}

/* — chapter II: pathways cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); align-items:start; }
.card{ position:relative; cursor:pointer; overflow:hidden; border-radius:16px; transform:none !important;
  scale:1; transition:scale .55s var(--ease-out); }
.card.rv-in{ transition:opacity .9s var(--ease-out), scale .55s var(--ease-out); }
.card:hover{ scale:1.035; z-index:3; }
.card-fr{
  position:relative; aspect-ratio:16/10; background:transparent;
  outline:1px solid var(--line-soft); outline-offset:-1px;
  border-radius:16px; overflow:hidden;
  transition:outline-color .5s var(--ease);
}
.card:hover .card-fr{ outline-color:rgba(223,231,224,.30); }
.card:nth-child(1) .card-fr{
  background:
    linear-gradient(180deg,rgba(3,6,9,.04) 36%,rgba(3,6,9,.72) 100%),
    url('../assets/mercedes-incar-1.webp') center / cover no-repeat;
}
.card:nth-child(2) .card-fr{
  background:
    linear-gradient(180deg,rgba(3,6,9,.06) 36%,rgba(3,6,9,.74) 100%),
    url('../assets/subaru-incar-1.webp') center / cover no-repeat;
}
.card:nth-child(3) .card-fr{
  background:
    linear-gradient(180deg,rgba(3,6,9,.05) 36%,rgba(3,6,9,.74) 100%),
    url('../assets/products/paspas-krem-yan.webp') center / cover no-repeat;
}
.card-fr::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 46%, rgba(4,6,9,.80)); pointer-events:none; }
.cloth-out{ display:none !important; }
.on-cloth{ overflow:hidden !important; }

/* ------------------------------------------------- the lights in the stills
   The three plates each have one source in them — two blood moons and a lit
   stone lantern — and they are the only warm thing in an otherwise cold set of
   images. A glow laid over each one, screened so it adds light rather than
   painting over it, is enough to make a flat still look like it is burning.

   Two tracks per light, at durations that do not divide into each other: the
   wrapper swells, the gradient inside it pulses. One track on its own reads as
   a loop within a couple of seconds; two beating against each other do not
   come back around inside the time anyone looks at a card.

   The moon and the lantern are not the same event. A flame gutters — short,
   irregular, deep — so the lantern's track is written unevenly by hand. A moon
   only breathes through moving air, so the moons get a slow, shallow swell and
   nothing more. Giving them both a flicker is what makes this kind of thing
   look like a novelty; the difference is the whole effect. */
.card-fr{ isolation:isolate; }        /* keep the screen blend inside the card */
.glow{
  position:absolute; z-index:1; pointer-events:none;
  left:var(--gx); top:var(--gy); width:calc(var(--gr) * 2); aspect-ratio:1;
  translate:-50% -50%;                /* leaves transform free for the swell */
  mix-blend-mode:screen;
  animation:glow-swell var(--gt2) var(--ease-io) infinite alternate;
}
.glow::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(closest-side, var(--gc1), var(--gc2) 40%, transparent 72%);
  animation:glow-pulse var(--gt) var(--ease-io) infinite;
}
@keyframes glow-swell{ from{ transform:scale(.93); } to{ transform:scale(1.07); } }
@keyframes glow-pulse{ from{ opacity:.78; } 50%{ opacity:1; } to{ opacity:.78; } }
/* a flame does not breathe, it gutters */
@keyframes glow-flame{
  0%{ opacity:.74 }   6%{ opacity:.97 }  12%{ opacity:.63 }  19%{ opacity:.90 }
  27%{ opacity:.55 }  34%{ opacity:.94 } 42%{ opacity:.71 }  51%{ opacity:1 }
  58%{ opacity:.60 }  66%{ opacity:.88 } 74%{ opacity:.67 }  83%{ opacity:.96 }
  91%{ opacity:.72 } 100%{ opacity:.74 }
}
.glow--flame::before{ animation-name:glow-flame; }
.glow--flame{ animation-duration:var(--gt2); }
@media (prefers-reduced-motion:reduce){
  .glow, .glow::before{ animation:none; }
}
.no-webgl .card-fr{ background:linear-gradient(150deg,#101a1d,#0a0d10 62%,#1a0c0b); }
/* If WebGL will not start, the page stays a page: the scene simply becomes a
   still, and the wordmark moves from the 3-D layer into the document. */
.word-fb{ display:none; }
.no-webgl #gl, .no-webgl .peek-play{ display:none; }
/* fixed, or the gradient is measured against a 6000-pixel body box and the
   moon ends up somewhere around the curriculum table */
.no-webgl body{ background:
  radial-gradient(11vw 11vw at 73% 17%, rgba(232,52,28,.95), rgba(158,20,16,.62) 44%, rgba(96,12,12,.20) 64%, transparent 72%),
  radial-gradient(38vw 32vw at 50% 46%, rgba(228,104,24,.40), rgba(122,42,10,.18) 54%, transparent 74%),
  radial-gradient(120% 80% at 50% 0%, rgba(120,150,158,.16), transparent 60%), #05070a;
  background-attachment:fixed; }
.no-webgl .peek-fr{ background:linear-gradient(160deg,#162326,#0b1013 55%,#241010); }
.no-webgl .word-fb{
  display:block; position:absolute; left:0; right:0; bottom:16%; z-index:1;
  font-family:'Onest',sans-serif; font-weight:600; font-size:21.4vw; line-height:.78;
  letter-spacing:.052em; text-align:center; pointer-events:none;
  background:linear-gradient(#e2ece5, #97a89c); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* The live hero has no foot scrim, but the fallback still needs one: there it
   stands on a bright CSS sky rather than a night scene, and the chips and the
   wordmark have nothing else holding them off it. So this carries the whole
   declaration now rather than re-colouring one it used to inherit. */
.no-webgl .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  pointer-events:none; background:linear-gradient(transparent, rgba(3,5,8,.72) 52%, rgba(3,5,8,.96)); }
.no-webgl .sec::before, .no-webgl #araca-ozel::before, .no-webgl #siparis::before{ background:none; }
.card-lab{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.card-lab b{ font-size:clamp(13px,1.15vw,17px); font-weight:400; letter-spacing:.02em; text-transform:uppercase;
  color:var(--bone); transition:color .45s var(--ease-out); }
.card:hover .card-lab b{ color:var(--vermilion); }
.card-lab .jp{ font-size:11px; letter-spacing:.3em; color:rgba(223,231,224,.62); }
.card-ar{ position:absolute; top:14px; right:14px; z-index:2; width:26px; height:26px;
  opacity:0; transform:translate3d(-4px,4px,0); transition:.5s var(--ease-out); }
.card:hover .card-ar{ opacity:1; transform:none; }
.card-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }

/* — chapter III: curriculum */
.cur-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(28px,5vw,90px); align-items:end; margin-bottom:clamp(34px,6vh,72px); }
.cur-head h2{ max-width:13ch; }
.cur{ border-top:1px solid var(--line-soft); }
.les{
  position:relative; display:grid; align-items:center;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.25fr) 86px auto;
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:padding .5s var(--ease-out);
}
.les-add{
  position:relative; z-index:2; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone); background:transparent; border:1px solid var(--line-soft);
  padding:10px 18px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease-out), border-color .18s var(--ease-out),
    color .18s var(--ease-out), transform .14s var(--ease-out);
}
.les-add:hover{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; }
.les-add:active{ transform:scale(.97); }
.les-add:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }
.les-add.added{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; }
.cur-note{ margin-top:18px; font-size:12px; letter-spacing:.02em; color:var(--muted);
  text-shadow:0 1px 16px rgba(3,6,8,.9); }
.cur-note::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--vermilion); margin-right:9px; vertical-align:1px; }

/* ============================================================== the shelf
   Everything below this band argues for the product — the material, the hand
   cutting, the fitment. All of it earns its place, but it meant the first
   price sat five screens down and the first Add button with it, so a customer
   who arrived already sold had to read the case anyway.

   The shelf is not a second hero and must not compete with the one above it:
   no scene, no video, no display type. Three prices on a ruled band, in the
   same hairline grammar as the stats and trust rows, and then the story
   resumes exactly where it did before. */
.shelf{
  position:relative; z-index:2;
  padding:clamp(26px,3.4vw,44px) var(--pad) clamp(30px,4vw,52px);
  border-bottom:1px solid var(--line-soft); background:var(--ink);
}
.shelf-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px clamp(14px,2vw,26px);
  padding-bottom:clamp(16px,2vw,24px);
}
.shelf-head h2{ font-size:clamp(17px,1.6vw,22px); font-weight:400; letter-spacing:-.005em; }
.shelf-head p{
  margin:0; font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.shelf-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-soft);
}
.shelf-card{ display:flex; flex-direction:column; min-width:0; padding-top:20px; }
.shelf-card + .shelf-card{ border-left:1px solid var(--line-soft); padding-left:clamp(16px,2.2vw,32px); }
.shelf-card:not(:last-child){ padding-right:clamp(16px,2.2vw,32px); }
.shelf-shot{
  margin:0 0 14px; overflow:hidden; background:var(--ink-2);
  border-radius:8px; border:1px solid var(--line-soft);
}
.shelf-shot img{
  display:block; width:100%; height:clamp(96px,10vw,132px); object-fit:cover;
  object-position:50% 52%; filter:saturate(.92) contrast(1.02);
  transition:transform .6s var(--ease-out);
}
.shelf-card:hover .shelf-shot img{ transform:scale(1.03); }
.shelf-body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.shelf-name{ font-size:14px; font-weight:500; letter-spacing:.01em; color:var(--bone); }
/* The price is the reason this band exists, so it is the loudest thing on it. */
.shelf-price{ margin:8px 0 16px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.shelf-price b{
  font-size:clamp(20px,1.9vw,27px); font-weight:300; letter-spacing:-.02em;
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.shelf-price span{ font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* Rafta hangi kombinasyonun sepete gideceği yazılı durur; numune küçülür ama
   dikişin rengi yine kendi rengiyle çizilir. */
.shelf-combo{
  display:flex; align-items:center; gap:9px; margin:0 0 16px;
  font-size:11px; color:var(--bone-dim); min-width:0;
}
.shelf-add,.shelf-go{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid var(--line-soft); border-radius:999px; background:transparent;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim);
  cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease-out), border-color .2s var(--ease-out),
    color .2s var(--ease-out), transform .14s var(--ease-out);
}
.shelf-add:hover,.shelf-go:hover{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; }
.shelf-add:active,.shelf-go:active{ transform:scale(.97); }
.shelf-add:focus-visible,.shelf-go:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }
.shelf-add.added{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; }
@media (max-width:820px){
  .shelf-grid{ grid-template-columns:1fr; }
  .shelf-card{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 16px; align-items:start; }
  .shelf-card + .shelf-card{
    border-left:0; border-top:1px solid var(--line-soft);
    padding-left:0; margin-top:18px; padding-top:18px;
  }
  .shelf-card:not(:last-child){ padding-right:0; }
  .shelf-shot{ margin-bottom:0; }
  .shelf-shot img{ height:76px; }
  .shelf-price{ margin:6px 0 12px; }
}

/* ================================================= vehicle-first quick order
   This desk replaces the old three-card shelf directly below the hero. Its
   short ruled rows borrow from a cutting bench: the small tick rail across the
   top is functional visual language for a product made to a measured vehicle
   template, while all actual controls retain the site's pill grammar. */
#hizli-siparis.quick-order,
.quick-order{
  position:relative; z-index:2; isolation:isolate; min-width:0;
  padding:clamp(30px,3.8vw,52px) var(--pad) clamp(38px,4.8vw,66px);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(70% 105% at 84% 18%,rgba(224,35,28,.075),transparent 58%),
    linear-gradient(180deg,#070a0e 0%,var(--ink) 100%);
  scroll-margin-top:calc(var(--nav-h) + 14px);
}
#hizli-siparis.quick-order::before,
.quick-order::before{
  content:''; position:absolute; z-index:-1; top:0; left:var(--pad); right:var(--pad); height:7px;
  opacity:.56; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(223,231,224,.34) 0 1px,transparent 1px 28px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 72%); mask-image:linear-gradient(90deg,#000,transparent 72%);
}
.quick-order > *,
.quick-order-grid > *,
.quick-flow > *,
.quick-order-flow > *{ min-width:0; }

.quick-order-head{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(280px,1.18fr);
  align-items:end; gap:16px clamp(28px,5vw,84px); max-width:1220px;
  margin:0 auto clamp(18px,2.2vw,28px);
}
.quick-order-head .eyebrow{ display:block; margin-bottom:10px; color:var(--vermilion); }
.quick-order-kicker{
  display:block; margin-bottom:10px; color:var(--vermilion);
  font-size:9px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
}
.quick-order-head h2{
  max-width:15ch; font-size:clamp(30px,3.6vw,52px); line-height:1.02;
  font-weight:500; letter-spacing:-.025em; text-transform:uppercase;
}
.quick-order-head p{
  max-width:58ch; justify-self:end; margin:0; font-size:clamp(12px,1vw,15px);
  line-height:1.65; color:#9aa59f;
}

/* Three states mirror the real flow: choose a vehicle, configure and add a
   product, then complete the order. */
.quick-order-progress{
  list-style:none; max-width:1220px; margin:0 auto clamp(24px,2.8vw,36px); padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.quick-order-progress > *{
  position:relative; min-width:0; min-height:42px; display:flex; align-items:center; gap:9px;
  padding:10px clamp(8px,1.2vw,16px); color:#68736d;
  font-size:9px; font-weight:500; line-height:1.25; letter-spacing:.11em; text-transform:uppercase;
}
.quick-order-progress > * + *{ border-left:1px solid var(--line-soft); }
.quick-order-progress > * > span:first-child,
.quick-order-progress .quick-progress-number{
  flex:0 0 auto; color:#89948e; font-size:10px; font-weight:500; font-variant-numeric:tabular-nums;
}
.quick-order-progress b{ min-width:0; font-size:9px; font-weight:500; color:inherit; }
.quick-order-progress > .active,
.quick-order-progress > .is-current,
.quick-order-progress > [aria-current="step"],
.quick-order-progress > .is-done,
.quick-order-progress > .is-complete{ color:var(--bone); }
.quick-order-progress > .active::after,
.quick-order-progress > .is-current::after,
.quick-order-progress > [aria-current="step"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--vermilion);
}
.quick-order-progress > .is-done b,
.quick-order-progress > .is-done span,
.quick-order-progress > .is-complete b,
.quick-order-progress > .is-complete .quick-progress-number{ color:var(--vermilion); }
.quick-order-progress > .is-current > span:first-child,
.quick-order-progress > [aria-current="step"] > span:first-child,
.quick-order-progress > .is-complete > span:first-child{ color:var(--vermilion); }


/* ------------------------------------------------ exact local configurator */
.configurator-card{
  width:100%; max-width:1220px; min-width:0; margin:0 auto clamp(28px,3.4vw,44px);
  overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:20px;
  background:#f4f4f0; color:#151515;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.configurator-stage[hidden],
.configurator-color-layout[hidden],
.config-empty-state[hidden],
.config-family-back[hidden]{ display:none !important; }
.configurator-stage{
  min-height:480px; padding:clamp(28px,4vw,52px);
  background:
    linear-gradient(rgba(18,18,18,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,18,18,.035) 1px,transparent 1px),
    #f4f4f0;
  background-size:32px 32px;
}
.configurator-stage-head{
  max-width:660px; margin:0 auto 20px; text-align:center;
}
.configurator-stage-head h3{
  margin:0; color:#121212; font-size:clamp(25px,3vw,40px); line-height:1.04;
  font-weight:650; letter-spacing:-.035em;
}
.configurator-stage-head p{
  margin:9px auto 0; color:#666963; font-size:13px; line-height:1.55;
}
.config-search{
  position:relative; display:block; width:min(100%,620px); margin:0 auto 22px;
}
.config-search > span{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.config-search input{
  width:100%; min-width:0; height:54px; padding:0 17px;
  border:1px solid #d5d6d1; border-radius:12px; outline:0;
  background:#fff; color:#151515; font:inherit; font-size:14px;
  box-shadow:0 6px 18px rgba(16,18,17,.045);
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.config-search input::placeholder{ color:#8a8c87; opacity:1; }
.config-search input:focus{
  border-color:#d82720; box-shadow:0 0 0 3px rgba(216,39,32,.11),0 8px 24px rgba(16,18,17,.06);
}
.config-brand-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
  width:min(100%,1040px); margin:0 auto;
}
.config-brand-card,
.config-model-card{
  position:relative; min-width:0; border:1px solid #ddded9; border-radius:12px;
  background:#fff; color:#20211f; box-shadow:0 5px 14px rgba(18,20,19,.035);
  transition:transform .16s var(--ease-out),border-color .16s var(--ease-out),box-shadow .16s var(--ease-out);
}
.config-brand-card{
  min-height:108px; display:grid; grid-template-rows:58px auto; place-items:center;
  gap:7px; padding:12px 8px 11px; font-size:12px; font-weight:650; line-height:1.2;
}
.config-brand-media{
  width:76px; height:56px; display:grid; place-items:center; border-radius:9px;
  background:#fafaf8;
}
.config-brand-media img{
  width:68px; height:44px; object-fit:contain; filter:brightness(0) saturate(100%); opacity:.82;
}
.config-brand-fallback,
.config-model-fallback{
  display:grid; place-items:center; color:#555852; font-weight:700; letter-spacing:.04em;
}
.config-brand-fallback{ width:46px; height:46px; border:1px solid #d8d9d4; border-radius:50%; }
.config-brand-card:hover,
.config-model-card:hover{
  transform:translateY(-2px); border-color:#b8bab4; box-shadow:0 10px 24px rgba(18,20,19,.08);
}
.config-brand-card.is-selected,
.config-brand-card[aria-pressed="true"],
.config-model-card:focus-visible{ border-color:#d82720; box-shadow:0 0 0 2px rgba(216,39,32,.1); }
.config-missing-action,
.config-family-back{
  display:block; min-height:44px; margin:18px auto 0; padding:9px 14px;
  border:0; color:#5f625c; font-size:12px; font-weight:600; text-decoration:underline;
  text-underline-offset:4px;
}
.config-missing-action:hover,
.config-family-back:hover{ color:#d82720; }
.config-empty-state{
  width:min(100%,620px); margin:0 auto 16px; padding:12px;
  border:1px solid #d9dad5; border-radius:10px; color:#676a64; background:#fff;
  font-size:12px; text-align:center;
}
.config-selected-vehicle{
  width:min(100%,720px); min-height:62px; display:grid;
  grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px;
  margin:0 auto 28px; padding:8px 10px;
  border:1px solid #dedfda; border-radius:13px; background:#fff;
}
.config-selected-logo{
  position:relative; width:44px; height:42px; display:grid; place-items:center;
  overflow:hidden; border-radius:9px; background:#f4f4f0;
  color:#686b65; font-size:11px; font-weight:700;
}
.config-selected-logo::before{ content:attr(data-initial); }
.config-selected-logo img{
  position:absolute; inset:0; width:100%; height:100%; padding:5px; object-fit:contain;
  background:#f4f4f0; filter:brightness(0) saturate(100%); opacity:.78;
}
.config-selected-logo img[hidden]{ display:none; }
.config-selected-vehicle > span:nth-child(2){ min-width:0; display:grid; gap:3px; }
.config-selected-vehicle small{
  color:#858781; font-size:8px; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
}
.config-selected-vehicle b{
  overflow:hidden; color:#20211f; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap;
}
.config-selected-vehicle button{
  min-height:40px; padding:8px 11px; border:0; color:#d82720; font-size:11px; font-weight:700;
}
.config-model-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  width:min(100%,940px); margin:0 auto;
}
.config-model-card{
  min-height:164px; display:grid; grid-template-rows:110px auto; padding:8px; text-align:left;
}
.config-model-media{
  min-width:0; display:grid; place-items:center; overflow:hidden; border-radius:9px; background:#f7f7f4;
}
.config-model-media img{ width:100%; height:104px; object-fit:contain; }
.config-model-media img.is-brand-logo{
  width:68%; height:68%; filter:brightness(0) saturate(100%); opacity:.78;
}
.config-model-fallback{ width:58px; height:58px; border:1px solid #d7d8d3; border-radius:50%; }
.config-model-copy{ min-width:0; display:grid; gap:3px; padding:9px 5px 3px; }
.config-model-copy b{
  overflow:hidden; font-size:12px; font-weight:700; line-height:1.25; text-overflow:ellipsis; white-space:nowrap;
}
.config-model-copy small{ color:#858781; font-size:9px; line-height:1.3; }
.config-manual-stage{ display:grid; align-content:center; }
.config-manual-actions{
  width:min(100%,620px); display:flex; justify-content:flex-end; gap:10px; margin:0 auto;
}
.config-manual-actions button{
  min-height:46px; padding:11px 17px; border:1px solid #d4d5d0; border-radius:10px;
  background:#fff; color:#323430; font-size:12px; font-weight:700;
}
.config-manual-actions #configManualContinue{ border-color:#d82720; background:#d82720; color:#fff; }
.config-manual-actions #configManualContinue:disabled{ opacity:.45; cursor:not-allowed; }

.configurator-color-layout{
  min-width:0; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  align-items:start; background:#eeefeb;
}
.config-preview-card{
  min-width:0; align-self:start; display:grid; grid-template-rows:auto auto auto;
  margin:0; padding:clamp(22px,3vw,38px);
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.92),rgba(255,255,255,.15) 54%,transparent 72%),
    #e5e6e1;
}
.config-preview-card header h3{
  margin:0; color:#161716; font-size:clamp(22px,2.6vw,34px); font-weight:700; letter-spacing:-.03em;
}
.config-preview-card header p{ margin:6px 0 0; color:#6e716b; font-size:12px; }
.config-preview-stage{
  position:relative; width:min(100%,620px); aspect-ratio:1; align-self:start; justify-self:center;
  margin:10px 0; overflow:hidden;
}
.config-preview-stage > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
}
.config-preview-stage > img.is-swapping{ opacity:.55; transform:scale(.995); }
.config-preview-error{
  position:absolute; z-index:3; left:50%; bottom:10px; width:max-content; max-width:calc(100% - 24px);
  margin:0; padding:8px 11px; transform:translateX(-50%);
  border:1px solid rgba(216,39,32,.2); border-radius:8px; background:rgba(255,255,255,.94);
  color:#aa221c; font-size:10px; text-align:center;
}
.config-preview-card figcaption{
  display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid rgba(20,22,20,.1);
}
.config-preview-card figcaption span{
  min-width:112px; display:grid; gap:3px; padding:8px 10px;
  border:1px solid rgba(20,22,20,.1); border-radius:9px; background:rgba(255,255,255,.55);
}
.config-preview-card figcaption small{
  color:#777a74; font-size:8px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.config-preview-card figcaption b{ color:#212320; font-size:10px; font-weight:700; }
.configurator-colors{
  min-width:0; padding:clamp(22px,3vw,36px); border-left:1px solid #d9dad5; background:#fafaf8;
}
.configurator-colors .config-selected-vehicle{ width:100%; margin-bottom:24px; background:#f4f4f0; }
.configurator-colors .configurator-stage-head{ margin:0 0 22px; text-align:left; }
.configurator-colors .configurator-stage-head h3{ font-size:clamp(25px,2.5vw,34px); }
.configurator-colors .configurator-stage-head p{ margin-left:0; }
.config-color-group{ min-width:0; margin:0 0 24px; padding:0; border:0; }
.config-color-group legend{
  width:100%; margin:0 0 10px; color:#3f423d; font-size:10px; font-weight:750;
  letter-spacing:.11em; text-transform:uppercase;
}
.config-color-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.config-color-option{
  position:relative; min-width:0; min-height:104px; display:grid; grid-template-rows:50px auto;
  gap:6px; padding:7px; overflow:hidden; border:1px solid #dedfda; border-radius:10px;
  background:#fff; color:#2b2d2a; text-align:left;
  transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out),transform .16s var(--ease-out);
}
.config-color-option:hover{ transform:translateY(-1px); border-color:#b9bbb5; }
/* Seçim halkası --wz-pick: seçilen rengin okunur hali. Siyah gibi koyu
   seçimlerde readableAccent tonu yükselttiği için koyu kartta da görünür.
   NOT: bu blok aşağıdaki koyu tema bloğuyla birlikte okunmalı, orası
   border/box-shadow'u yeniden tanımlıyor. */
.config-color-option.active{
  border-color:var(--wz-pick); box-shadow:0 0 0 1px var(--wz-pick),0 7px 18px rgba(0,0,0,.28);
}
.config-color-option.active::after{
  content:'✓'; position:absolute; top:5px; right:5px; width:18px; height:18px;
  display:grid; place-items:center; border-radius:50%; background:var(--wz-pick); color:#0a0e12;
  font-size:10px; font-weight:800;
}
.config-color-strip{
  min-width:0; display:grid; place-items:center; overflow:hidden; border-radius:7px; background:#f5f5f2;
}
.config-color-strip img{ width:100%; height:50px; object-fit:cover; }
.config-color-copy{ min-width:0; display:grid; gap:2px; padding:0 2px 2px; }
/* pb-4120 gerçek bir ürün kodu; mono'da kod gibi okunur, Onest'te etiket gibi. */
.config-color-copy small{
  overflow:hidden; color:#999b95; font-size:7px; line-height:1.2; letter-spacing:.04em;
  font-family:var(--wz-mono,ui-monospace,Menlo,Consolas,monospace);
  text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;
}
.config-color-copy b{
  overflow:hidden; color:#333531; font-size:9px; font-weight:700; line-height:1.25;
  text-overflow:ellipsis; white-space:nowrap;
}
.config-color-summary{
  margin:2px 0 0; padding:12px 0 0; border-top:1px solid #dedfda;
  color:#71746e; font-size:10px; line-height:1.5;
}
.config-color-summary b{ color:#343632; font-weight:700; }
.quick-purchase-grid{ margin-top:clamp(24px,3vw,40px); }

@media (prefers-reduced-motion:reduce){
  .config-brand-card,.config-model-card,.config-color-option,.config-preview-stage > img{ transition:none; }
}

.quick-order-grid{
  width:100%; max-width:1220px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.85fr);
  gap:clamp(24px,3.2vw,52px); align-items:start;
}
.quick-flow,
.quick-order-flow{ border-top:1px solid var(--line); }
.quick-step{
  position:relative; min-width:0; padding:clamp(18px,2.15vw,27px) 0;
  border-bottom:1px solid var(--line-soft);
}
.quick-step[hidden]{ display:none; }
.quick-step-head{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:0 14px; align-items:start;
  margin-bottom:15px;
}
.quick-step-head > :first-child:not(div){
  padding-top:3px; color:var(--vermilion); font-size:10px; font-weight:500;
  letter-spacing:.15em; font-variant-numeric:tabular-nums;
}
.quick-step-head > div{ min-width:0; }
.quick-step-head h3{
  font-size:clamp(16px,1.45vw,21px); line-height:1.25; font-weight:500; color:var(--bone);
}
.quick-step-head p{
  margin:4px 0 0; max-width:64ch; font-size:11px; line-height:1.55; color:var(--muted);
}

.quick-field{ display:grid; min-width:0; gap:7px; text-align:left; }
.quick-field-wide,
.quick-field.wide{ grid-column:1 / -1; }
.quick-field > span:first-child,
.quick-field > label{
  font-size:9px; font-weight:500; line-height:1.25; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
}
.quick-field select,
.quick-field input,
select.quick-field,
input.quick-field{
  width:100%; min-width:0; min-height:44px; padding:10px 38px 10px 13px;
  border:1px solid rgba(223,231,224,.15); border-radius:0; background-color:#090d11;
  color:var(--bone); font:inherit; font-size:13px; line-height:1.25;
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),opacity .2s;
}
.quick-field input,
input.quick-field{ padding-right:13px; }
.quick-field select{
  color-scheme:dark; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--bone-dim) 50%),
    linear-gradient(135deg,var(--bone-dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.quick-field select:disabled,
.quick-field input:disabled,
select.quick-field:disabled,
input.quick-field:disabled{ opacity:.46; cursor:not-allowed; color:#7e8983; }
.quick-field select:focus-visible,
.quick-field input:focus-visible,
select.quick-field:focus-visible,
input.quick-field:focus-visible{
  outline:1px solid var(--vermilion); outline-offset:2px; border-color:var(--vermilion); background-color:#0c1116;
}
.quick-field input::placeholder,
input.quick-field::placeholder{ color:#77827c; opacity:1; }
.quick-field input[type="search"]{ appearance:none; -webkit-appearance:none; }
#quickVehicleSummary b{ color:var(--bone); font-weight:500; }

.quick-products,
.quick-extras{ min-width:0; }
.quick-product-grid,
.quick-products-grid,
.quick-extra-grid{
  list-style:none; margin:0 0 0 50px; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.quick-product-card,
.quick-extra-card{
  position:relative; min-width:0; display:flex; flex-direction:column; align-items:stretch;
  padding:13px; border:1px solid var(--line-soft); border-radius:0;
  background:rgba(223,231,224,.018);
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),opacity .2s;
}
.quick-product-card{
  display:grid; grid-template-columns:23px minmax(0,1fr); gap:7px 8px; align-content:start;
}
.quick-product-index{
  grid-column:1; grid-row:1 / span 2; padding-top:2px; color:var(--vermilion);
  font-size:9px; font-weight:500; letter-spacing:.12em; font-variant-numeric:tabular-nums;
}
.quick-product-copy{ grid-column:2; min-width:0; }
.quick-product-foot{
  grid-column:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:9px; margin-top:auto; padding-top:7px;
}
.quick-product-foot b{
  font-size:11px; font-weight:400; color:var(--bone-dim); font-variant-numeric:tabular-nums;
}
.quick-product-card::before,
.quick-extra-card::before{
  content:''; position:absolute; top:-1px; left:-1px; width:24px; height:1px; background:rgba(223,231,224,.34);
}
.quick-product-card:hover,
.quick-extra-card:hover{ border-color:rgba(223,231,224,.24); background:rgba(223,231,224,.032); }
.quick-product-card.is-selected,
.quick-product-card:has(.quick-product-add.added),
.quick-extra-card.is-selected{ border-color:rgba(224,35,28,.6); background:rgba(224,35,28,.045); }
.quick-product-card.is-disabled,
.quick-product-card[aria-disabled="true"],
.quick-extra-card.is-disabled,
.quick-extra-card[aria-disabled="true"]{ opacity:.42; }
.quick-order[data-vehicle-state="empty"] .quick-product-card{ opacity:.62; }
.quick-product-card img,
.quick-extra-card img{
  width:100%; height:72px; margin:0 0 10px; object-fit:cover; object-position:center;
  border-bottom:1px solid var(--line-soft); filter:saturate(.86) contrast(1.04);
}
.quick-product-card h4,
.quick-extra-card h4,
.quick-product-name{
  margin:0; font-size:12px; line-height:1.35; font-weight:500; color:var(--bone);
}
.quick-product-card p,
.quick-extra-card p{
  margin:5px 0 0; font-size:10px; line-height:1.45; color:var(--muted);
}
.quick-product-price,
.quick-extra-price{
  display:block; margin:8px 0 10px; color:var(--bone-dim); font-size:12px;
  font-variant-numeric:tabular-nums;
}
.quick-product-add,
.quick-extra-add{
  align-self:flex-start; min-height:34px; margin-top:auto; padding:7px 13px;
  border:1px solid var(--line-soft); border-radius:999px; background:transparent;
  color:var(--bone-dim); font-size:9px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  transition:background-color .2s,border-color .2s,color .2s,transform .14s;
}
/* On a phone these six are the buy action, and they were 34px tall with 9px
   type — under every touch-target guideline, on the one control the whole
   block exists to get pressed. The desktop sizing is left alone; a pointer
   does not need the room. */
@media (max-width:820px){
  .quick-product-add,
  .quick-extra-add{
    min-height:44px; padding:11px 18px; font-size:10px; letter-spacing:.1em;
  }
}
/* Bu düğmeler bölümün varış noktasıdır: araç seçilince etkinleşen CTA dolu
   vermilyon taşır, hayalet çerçeveli hâli karanlık zeminde ikincil bir
   bilgi gibi okunuyordu. Sepetteki ürün (.added) dolgu yerine vermilyon
   çerçeveye geçer ki "zaten sepette" durumu ilk bakışta ayrılsın. */
.quick-product-add:not(:disabled),
.quick-extra-add:not(:disabled){
  border-color:var(--vermilion); background:var(--vermilion); color:#fff;
}
.quick-product-add:hover:not(:disabled),
.quick-extra-add:hover:not(:disabled){ background:#f42720; }
.quick-product-add.added,
.quick-extra-add.added{
  border-color:rgba(224,35,28,.65); background:rgba(224,35,28,.1); color:var(--bone);
}
.quick-product-add:active:not(:disabled),
.quick-extra-add:active:not(:disabled){ transform:scale(.97); }
.quick-product-add:disabled,
.quick-extra-add:disabled{
  opacity:.55; cursor:not-allowed; border-color:var(--line-soft); background:transparent; color:var(--muted);
}
.quick-empty{
  grid-column:1 / -1; margin:0; padding:18px; border:1px solid var(--line-soft);
  color:var(--muted); font-size:11px; text-align:center;
}

.quick-extras .quick-product-grid,
.quick-extras .quick-products-grid,
.quick-extra-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.quick-extra-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px 12px;
}
.quick-extra-card > div{ min-width:0; }

.quick-checkout,
.quick-order-cart{
  position:sticky; top:calc(var(--nav-h) + 16px); min-width:0; overflow:hidden;
  padding:clamp(18px,2vw,26px); border:1px solid rgba(223,231,224,.15); border-radius:0;
  background:rgba(8,12,16,.92); box-shadow:0 24px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.quick-checkout::before,
.quick-order-cart::before{
  content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px;
  background:linear-gradient(90deg,var(--vermilion),rgba(224,35,28,0) 76%);
}
.quick-checkout-head,
.quick-order-cart-head{
  display:block;
  padding-bottom:13px; border-bottom:1px solid var(--line-soft);
}
.quick-checkout-head h3,
.quick-order-cart-head h3{
  margin:7px 0 0; max-width:22ch; font-size:clamp(17px,1.5vw,21px);
  line-height:1.2; font-weight:500; color:var(--bone);
}
.quick-checkout-head span,
.quick-order-cart-head span{
  color:var(--muted); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
}
.quick-checkout #quickVehicleSummary,
.quick-order-cart #quickVehicleSummary{
  margin:12px 0 0; padding:9px 11px 9px 14px; border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); color:var(--bone-dim); font-size:10px; line-height:1.45;
}
.quick-checkout .cart-panel,
.quick-order-cart .cart-panel{ max-width:none; margin:0; }
.quick-checkout .cart-list,
.quick-order-cart .cart-list{
  max-height:min(30vh,260px); overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(223,231,224,.24) transparent;
}
.quick-checkout .cart-empty,
.quick-order-cart .cart-empty{ padding:20px 0; font-size:12px; }
.quick-checkout .cart-item,
.quick-order-cart .cart-item{
  grid-template-columns:minmax(0,1fr) auto auto auto; gap:8px; padding:11px 0; font-size:11px;
}
.quick-checkout .cart-item .cart-qty,
.quick-order-cart .cart-item .cart-qty{ gap:5px; }
.quick-checkout .cart-item .cart-qty button,
.quick-order-cart .cart-item .cart-qty button{ width:24px; height:24px; }
.quick-checkout .cart-total,
.quick-order-cart .cart-total{ padding:14px 0; font-size:12px; }
.quick-checkout .cart-total b,
.quick-order-cart .cart-total b{ font-size:20px; }
.quick-checkout .cart-form,
.quick-order-cart .cart-form{ gap:9px; margin-top:16px; }
.quick-checkout .cart-field,
.quick-order-cart .cart-field{ display:grid; min-width:0; gap:6px; }
.quick-checkout .cart-field > label,
.quick-order-cart .cart-field > label{
  color:var(--bone-dim); font-size:9px; font-weight:500; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase;
}
.quick-checkout .cart-form input,
.quick-order-cart .cart-form input{ min-height:42px; padding:10px 12px; font-size:12px; }
.quick-checkout .cart-form .field-error,
.quick-order-cart .cart-form .field-error{ margin:-3px 0 1px; }
.quick-checkout .cart-form .field-hint,
.quick-order-cart .cart-form .field-hint{ margin:-2px 0 1px; font-size:10px; }
.quick-checkout .cta-cart,
.quick-order-cart .cta-cart{ min-height:45px; margin-top:4px; padding:12px 18px; font-size:10px; }
.quick-checkout .cart-note,
.quick-order-cart .cart-note{ margin-top:10px; font-size:10px; }

.quick-order button:focus-visible,
.quick-order a:focus-visible,
.quick-order .quick-variant-select:focus-visible{
  outline:1px solid var(--bone); outline-offset:3px;
}

@media (max-width:980px){
  .configurator-color-layout{ grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); }
  .config-brand-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .quick-order-grid{ grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:24px; }
  .quick-product-grid,.quick-products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .quick-order-head{ grid-template-columns:1fr; align-items:start; gap:10px; }
  .quick-order-head p{ justify-self:start; }
  .config-brand-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .config-model-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .configurator-color-layout{ grid-template-columns:minmax(0,1fr); }
  .config-preview-stage{ width:min(100%,540px); }
  .configurator-colors{ border-top:1px solid #d9dad5; border-left:0; }
  .quick-order-grid{ grid-template-columns:minmax(0,1fr); }
  .quick-checkout,.quick-order-cart{ position:relative; top:auto; }
  .quick-checkout .cart-list,.quick-order-cart .cart-list{ max-height:none; overflow:visible; }
}
@media (max-width:620px){
  #hizli-siparis.quick-order,.quick-order{ padding-left:var(--pad); padding-right:var(--pad); }
  /* Mobilde numara yerine adım adı görünür: yalnızca "01 02 03" taşıyan
     gösterge hangi aşamada olunduğunu anlatmıyordu. */
  .quick-order-progress > *{ min-height:38px; justify-content:center; gap:0; padding:8px 4px; font-size:0; }
  .quick-order-progress > * > :first-child{ display:none; }
  .quick-order-progress b{ display:block; font-size:9px; letter-spacing:.09em; }
  .configurator-card{ border-radius:14px; }
  .configurator-stage{ min-height:0; padding:28px 14px; background-size:24px 24px; }
  .configurator-stage-head{ margin-bottom:17px; }
  .configurator-stage-head h3{ font-size:27px; }
  .config-search{ margin-bottom:16px; }
  .config-search input{ height:50px; }
  .config-brand-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .config-brand-card{ min-height:99px; padding:9px 5px; font-size:10px; }
  .config-brand-media{ width:64px; height:50px; }
  .config-brand-media img{ width:58px; height:40px; }
  .config-selected-vehicle{ grid-template-columns:42px minmax(0,1fr) auto; gap:8px; margin-bottom:20px; }
  .config-selected-logo{ width:40px; height:40px; }
  .config-model-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .config-model-card{ min-height:146px; grid-template-rows:92px auto; padding:6px; }
  .config-model-media img{ height:88px; }
  .config-manual-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .config-manual-actions button{ padding:10px 8px; }
  .config-preview-card{ padding:20px 14px; }
  .config-preview-stage{ margin:2px 0 8px; }
  .configurator-colors{ padding:24px 14px; }
  .configurator-colors .config-selected-vehicle{ margin-bottom:20px; }
  .config-color-grid{ gap:6px; }
  .config-color-option{ min-height:96px; grid-template-rows:45px auto; padding:5px; }
  .config-color-strip img{ height:45px; }
  .quick-step-head{ grid-template-columns:26px minmax(0,1fr); gap:0 9px; }
  .quick-product-grid,
  .quick-products-grid,
  .quick-extra-grid,
  .quick-extras .quick-product-grid,
  .quick-extras .quick-products-grid{ grid-template-columns:minmax(0,1fr); margin-left:35px; }
  .quick-field-wide,.quick-field.wide{ grid-column:auto; }
  .quick-product-card{ grid-template-columns:22px minmax(0,1fr); }
  .quick-extra-card{ grid-template-columns:minmax(0,1fr); align-items:stretch; }
  .quick-extra-add{ justify-self:start; }
}
@media (max-width:380px){
  .quick-order-head h2{ font-size:28px; }
  .config-brand-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .config-color-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .config-selected-vehicle{ grid-template-columns:38px minmax(0,1fr) auto; padding-left:7px; }
  .config-selected-logo{ width:36px; height:36px; }
  .config-selected-vehicle button{ padding:7px 5px; font-size:10px; }
  .config-preview-card figcaption span{ min-width:0; flex:1 1 110px; }
  .quick-step-head{ grid-template-columns:22px minmax(0,1fr); gap:0 7px; }
  .quick-product-grid,
  .quick-products-grid,
  .quick-extra-grid,
  .quick-extras .quick-product-grid,
  .quick-extras .quick-products-grid{ margin-left:29px; }
  .quick-checkout,.quick-order-cart{ padding:16px 14px; }
  .quick-checkout .cart-item,.quick-order-cart .cart-item{
    grid-template-columns:minmax(0,1fr) auto auto; row-gap:8px;
  }
  .quick-checkout .cart-item b,.quick-order-cart .cart-item b{ grid-column:1 / -1; }
}

/* ===================================================== the colourway card
   Nine trunk organizers where one thing changes: the colour. Two shapes were
   tried before this one and both got the proportion wrong. Nine full product
   rows repeated the name, the description and the price nine times. The board
   that replaced them was shorter but blind — nine 16:9 tiles of CSS-drawn
   quilting, so the section that sells a colour range never showed the object
   in it, and it still ran 1881px for one ₺950 accessory.

   The nine photographs were in the repository the whole time. So the family is
   one card the size of the others: the chosen colourway photographed, and nine
   swatches under it. Picking a swatch swaps the photograph, the name and what
   the Add button puts in the cart — the comparison the range needs, in a
   quarter of the height, with the product actually visible. */
.board{
  grid-column:1 / -1; display:grid; align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--ink);
}
.board-media{ position:relative; margin:0; overflow:hidden; background:#080b0f; }
.board-stage{
  position:relative; width:100%; height:100%; min-height:100%; overflow:hidden;
  background:radial-gradient(ellipse at 50% 46%,#1a2027 0%,#0b0e13 62%,#05070a 100%);
}
.board-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -40px 70px rgba(2,4,7,.30);
}
.board-stage img{
  display:block; width:100%; height:100%; object-fit:contain;
  padding:clamp(20px,3vw,44px);
  filter:saturate(.95) contrast(1.05) drop-shadow(0 18px 30px rgba(0,0,0,.55));
  transition:opacity .22s var(--ease-out);
}
.board-stage img.is-swapping{ opacity:.35; }

.board-body{
  display:flex; flex-direction:column; gap:clamp(16px,2vw,24px);
  padding:clamp(24px,3vw,40px) 24px clamp(24px,3vw,34px);
  border-left:1px solid var(--line-soft);
}
.board-head .k{
  display:block; margin-bottom:9px;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.board-name{ margin:0; font-size:clamp(20px,2vw,30px); font-weight:400; letter-spacing:-.005em; }
.board-desc{ margin:12px 0 0; font-size:13px; line-height:1.6; color:#909b95; max-width:42ch; }

.board-colors{ margin-top:auto; }
.board-colors-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.board-colors-head span{
  font-size:9px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.board-colors-head b{ font-size:13px; font-weight:400; color:var(--bone); }
.board-swatches{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
/* Dört organizerde gövde aynı siyah deri; ayıran yalnızca dikiş ipliği. Dokuzu
   da düz boyamak, o dördünü sahip olmadıkları bir gövde rengiyle tarif etmek
   olurdu — bu yüzden `iplik` numunesi siyah zemin üstünde o iplikten bir
   çapraz çizgi taşır, `deri` numunesi ise derinin kendisidir. */
.bsw{
  position:relative; width:34px; height:34px; padding:0; cursor:pointer;
  border:1px solid var(--line-soft); border-radius:50%; overflow:hidden;
  background:var(--thread,var(--bone-dim));
  transition:transform .18s var(--ease-out), border-color .18s var(--ease-out),
    box-shadow .18s var(--ease-out);
}
.bsw[data-swatch="iplik"]{
  background:
    linear-gradient(135deg,transparent calc(50% - 1.6px),var(--thread) calc(50% - 1.6px),
      var(--thread) calc(50% + 1.6px),transparent calc(50% + 1.6px)),
    #15181c;
}
.bsw::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.16),inset 0 -4px 8px rgba(0,0,0,.34);
}
.bsw.is-on{
  border-color:var(--bone);
  box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--bone);
}
.bsw:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .bsw:hover{ transform:translateY(-2px); border-color:var(--bone-dim); }
}

.board-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.board-price{
  display:flex; flex-direction:column; gap:3px;
  font-size:clamp(18px,1.6vw,22px); font-weight:300; letter-spacing:-.02em;
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.board-price small{
  font-size:9px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px){
  .board{ grid-template-columns:minmax(0,1fr); }
  .board-stage{ aspect-ratio:4/3; min-height:0; }
  .board-body{ border-left:0; border-top:1px solid var(--line-soft); }
}
@media (max-width:520px){
  .board-body{ padding:22px 18px 24px; }
  .board-foot{ flex-wrap:wrap; }
}
/* Dokuz numune telefonda sabit genişlikte sarıp sekiz + bir oluyordu; dokuzuncu
   renk kendi satırında öksüz kalıyordu. Izgara satırı bölerse bile eşit böler,
   numune de ekran genişliğine göre ölçeklenir. */
@media (max-width:459px){
  .board-swatches{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; }
  .bsw{ width:100%; height:auto; aspect-ratio:1; }
}
/* En dar telefonlarda dokuz sütun numuneyi 24 pikselin altına indiriyor —
   dokunma hedefi olarak fazla küçük. Beş + dört daha az sıkışık. */
@media (max-width:359px){
  .board-swatches{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* — cart / checkout panel
   Çekmece kapalıyken sayfadan tamamen çıkar. `--open` sınıfı olmadan panelin
   yalnızca konumu sıradandı, görünürlüğü değil: footer'ın altında 536 piksellik
   boş bir "Sepetin şu an boş" + ad/telefon formu duruyordu, yani anasayfanın
   son ekranı çalışmayan ikinci bir sipariş formuydu. Oluşturucu sayfasındaki
   gömülü sepet bağlamları panelin akış içindeki hâlini kullanmaya devam eder. */
.cart-panel{ display:none; width:100%; max-width:560px; margin:40px auto 0; text-align:left; }
.cart-panel--open,
.quick-checkout .cart-panel,
.quick-order-cart .cart-panel{ display:block; }
.cart-list{ border-top:1px solid var(--line-soft); }
.cart-empty{ padding:22px 0; color:var(--muted); font-size:14px; text-align:center; }
@keyframes cartItemSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cart-item{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px;
  padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:14px;
  animation: cartItemSlide .24s cubic-bezier(.16,1,.3,1);
}
.cart-item b{ font-weight:400; }
.cart-item .cart-qty{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); }
.cart-item .cart-qty button{
  position:relative; width:26px; height:26px; border:1px solid var(--line-soft); background:none;
  color:var(--bone); border-radius:50%; cursor:pointer; font-size:14px; line-height:1;
  display:inline-grid; place-items:center; transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.cart-item .cart-qty button:hover{ border-color:var(--bone); background:rgba(223,231,224,.1); }
.cart-item .cart-qty button:active{ transform:scale(.92); }
.cart-item .cart-qty button::before{ content:''; position:absolute; top:-8px; bottom:-8px; left:-8px; right:-8px; }
.cart-item .cart-price{ font-variant-numeric:tabular-nums; color:var(--bone-dim); }
.cart-item .cart-remove{
  position:relative; background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:18px; line-height:1; padding:4px; transition:color .16s ease, transform .16s ease;
}
.cart-item .cart-remove:hover{ color:var(--vermilion); transform:scale(1.2); }
.cart-item .cart-remove::before{ content:''; position:absolute; top:-8px; bottom:-8px; left:-8px; right:-8px; }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; padding:20px 0;
  border-bottom:1px solid var(--line-soft); font-size:15px; }
.cart-total b{ font-size:22px; font-weight:400; font-variant-numeric:tabular-nums; }
.cart-form{ display:grid; gap:12px; margin-top:24px; }
/* Form fields are sharp-ruled like the page's bands — transparent, hairline
   border, no radius. Buttons stay pills: that is the page's one documented
   radius split (interactive controls pill, fields and structure sharp). */
.cart-form input{
  width:100%; background:transparent; border:1px solid var(--line-soft);
  border-radius:0; padding:14px 16px; font:inherit; font-size:14px; color:var(--bone);
  transition:border-color .2s ease, background-color .2s ease;
}
.cart-form input::placeholder{ color:#a4b0a8; opacity:.85; }
.cart-form input:focus-visible{ outline:1px solid var(--vermilion); outline-offset:2px; border-color:var(--vermilion); }
.cart-form input.is-invalid{ border-color:var(--vermilion) !important; background:rgba(224,35,28,.04); }
.cart-form input.is-valid{ border-color:rgba(62,180,102,.55); }
.cart-form .field-error{
  margin:-6px 0 2px; font-size:11px; color:var(--vermilion);
  letter-spacing:.01em; text-align:left; display:none;
}
.cart-form .field-error.show{ display:block; animation:cartItemSlide .2s ease-out; }
.cta-cart{ width:100%; justify-content:center; margin-top:6px; border:none; background:var(--vermilion); color:#fff; cursor:pointer; }
.cta-cart i{ background:#fff; }
.cta-cart:hover{ color:var(--vermilion); }
.cta-cart:disabled{ opacity:.45; cursor:not-allowed; }
/* The hint under the vehicle field carries a rule that changes with the cart —
   required for anything cut to a template, optional for the accessories — so
   it has to read as guidance attached to the field, not as body copy: the
   field's own scale, hung directly under it, inside the form's gap.

   Scoped to the form rather than written bare, because the closing chapter
   already styles `.fin p` at 26px auto. That outranks a lone class, and the
   hint came out centred under a left-aligned field with a paragraph's worth
   of air above it. */
.cart-form .field-hint{
  margin:-4px 0 0; max-width:none; font-size:11px; line-height:1.45;
  color:var(--muted); letter-spacing:.01em; text-align:left;
}
.brand-chips.is-optional .bc-label{ color:#5f6a64; }

.cart-note{ margin-top:14px; font-size:12px; line-height:1.6; color:var(--muted); text-align:center; }
.cart-note.warn{ color:var(--vermilion); }
.cart-note.warn::before{ content:'⚠ '; }
.cart-note.done{ color:var(--bone-dim); }
.cart-note.done::before{ content:'✓ '; color:var(--vermilion); }
/* Emptying the basket after the handoff is a real action with a real cost, so
   it is a control rather than a link — small, ruled like the other pills, and
   never mistaken for the note it sits in. */
.cart-clear{
  display:inline-block; margin-left:8px; padding:5px 13px;
  border:1px solid var(--line-soft); border-radius:999px; background:transparent;
  font-size:11px; letter-spacing:.06em; color:var(--bone-dim); cursor:pointer;
  transition:border-color .2s var(--ease-out), color .2s var(--ease-out), transform .14s var(--ease-out);
}
.cart-clear:hover{ border-color:var(--vermilion); color:var(--bone); }
.cart-clear:active{ transform:scale(.97); }
.cart-clear:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }

/* — vehicle picker (Ürünler bölümü, adım 1) */
.vehicle-picker{ border:1px solid var(--line-soft); padding:clamp(18px,2.6vw,28px);
  margin-bottom:clamp(28px,4vw,44px); background:rgba(223,231,224,.02); }
.vp-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.vp-step{ flex:0 0 auto; display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--vermilion); color:#fff; font-size:12px; font-weight:500; }
.vp-copy b{ display:block; font-weight:400; font-size:16px; color:var(--bone); margin-bottom:3px; }
.vp-copy p{ margin:0; font-size:13px; color:var(--muted); }
.vp-head--step2{ margin-bottom:18px; }
.vp-input-row{ margin-bottom:14px; }
.vp-input-row input{ width:100%; background:transparent; border:1px solid var(--line-soft);
  border-radius:0; padding:14px 16px; font:inherit; font-size:14px; color:var(--bone); }
.vp-input-row input::placeholder{ color:var(--muted); }
.vp-input-row input:focus-visible{ outline:1px solid var(--vermilion); outline-offset:2px; border-color:var(--vermilion); }

/* — global sepet: yüzen buton, drawer, backdrop, toast */
.cart-fab{ position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:90;
  display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line); color:var(--bone);
  box-shadow:0 8px 28px rgba(0,0,0,.45); transition:background .25s var(--ease), transform .2s var(--ease); }
.cart-fab:hover{ background:var(--vermilion); border-color:var(--vermilion); }
.cart-fab.has-items{ border-color:var(--vermilion); }
.cart-fab-count{ position:absolute; top:-4px; right:-4px; display:inline-grid; place-items:center;
  min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--vermilion);
  color:#fff; font-size:11px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
  border:2px solid var(--ink); }
.cart-fab-count[hidden]{ display:none; }
.cart-backdrop{ position:fixed; inset:0; z-index:85; background:rgba(2,4,6,.6);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.cart-backdrop.show{ opacity:1; pointer-events:auto; }
/* Drawer açıkken arka plan sayfası kaydırılamaz; body.is-locked ile aynı
   kilit (ayrı sınıf — açılış akışının is-locked yaşam döngüsüne karışmaz). */
body.cart-locked{ overflow:hidden; height:100vh; }
/* .page z-index:10'luk kendi stacking context'inde; içindeki hiçbir şey sabit
   nav'ın (z50) üstüne çıkamaz. Çekmece açıkken .page nav ve vinyetin üzerine
   kaldırılır: kapat butonu (drawer top:0) masaüstünde nav'ın altında kalmaktan
   kurtulur, backdrop nav'ı da karartır. Film greni (z60) en üstte kalır. */
body.cart-locked .page{ z-index:62; }
/* FAB (z90) açık çekmeceden (z88) yukarıda — drawer açıkken gizlenir, yoksa
   mobil alttan açılan panelin sağ alt köşesinin üzerinde yüzer. */
body.cart-locked .cart-fab{ display:none; }
.cart-panel-head{ display:none; align-items:center; justify-content:space-between; padding-bottom:14px;
  border-bottom:1px solid var(--line-soft); margin-bottom:4px; }
.cart-panel-head b{ font-weight:400; font-size:16px; }
.cart-close{ font-size:22px; line-height:1; color:var(--muted); cursor:pointer; background:none; border:0; }
.cart-close:hover{ color:var(--vermilion); }
/* .sec > *:not(.fg) elsewhere forces position:relative/z-index:2 on direct
   children of a .sec section; div.cart-panel.cart-panel--open (0,2,1) must
   out-specificity that (0,2,0) rule regardless of source order. */
div.cart-panel.cart-panel--open{ opacity:1; }
@media (min-width:769px){
  div.cart-panel.cart-panel--open{ position:fixed; top:0; right:0; z-index:88; height:100vh; max-width:420px;
    width:min(420px,92vw); margin:0; padding:32px 28px; background:var(--ink-2);
    border-left:1px solid var(--line); overflow-y:auto; transform:translateX(0);
    box-shadow:-16px 0 40px rgba(0,0,0,.5); animation:cartSlideIn .32s var(--ease-out); }
}
@media (max-width:768px){
  /* width:100% + max-width:none: base .cart-panel{ max-width:560px } açıkken
     iki kenara da yaslı tam genişliği bozardı — 561-768px aralığında panel
     iki kenardan değil soldan hizalanmış 560px kalırdı. */
  div.cart-panel.cart-panel--open{ position:fixed; left:0; right:0; bottom:0; z-index:88; max-height:86vh; margin:0;
    width:100%; max-width:none; padding:22px 20px 28px; background:var(--ink-2); border-top:1px solid var(--line);
    overflow-y:auto; animation:cartSlideUp .32s var(--ease-out); transform:translateY(0); }
}
.cart-panel--open .cart-panel-head{ display:flex; }
@keyframes cartSlideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes cartSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.toast{ position:fixed; left:50%; bottom:clamp(88px,10vw,110px); z-index:95; transform:translate(-50%,10px);
  background:var(--ink-2); border:1px solid var(--line); color:var(--bone); padding:12px 20px;
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
  box-shadow:0 8px 24px rgba(0,0,0,.4); white-space:nowrap; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
@media (max-width:520px){ .toast{ white-space:normal; max-width:88vw; text-align:center; } }
.les::before{ content:''; position:absolute; left:calc(var(--pad) * -1); right:0; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(224,35,28,.09), transparent 46%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.les:hover::before{ opacity:1; }
.les:hover{ padding-left:clamp(8px,1.2vw,18px); }
.les .k{ font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); transition:color .4s; }
.les:hover .k{ color:var(--vermilion); }
.les h3{ font-size:clamp(16px,1.5vw,23px); font-weight:400; letter-spacing:-.005em; }
.les h3 em{ font-style:normal; font-family:'Onest',sans-serif; font-size:.72em; color:var(--muted); margin-left:12px; letter-spacing:.24em; }
.les p{ margin:0; font-size:13px; line-height:1.6; color:#909b95; text-shadow:0 1px 16px rgba(3,6,8,.92); }
.les .t{ text-align:right; font-size:11px; letter-spacing:.14em; color:#8b958f; font-variant-numeric:tabular-nums; text-shadow:0 1px 16px rgba(3,6,8,.92); }
.les .bar{ position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--vermilion);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out); }
.les:hover .bar{ transform:scaleX(1); }

/* Product atlas media. Every card uses one dark 4:3 stage; labels remain in
   their own ruled strip instead of sitting over the product. */
.les-media{
  position:relative; width:100%; margin:0; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:radial-gradient(ellipse at 52% 42%,#171d24 0%,#090c10 64%,#05070a 100%);
}
.les-stage{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(43,52,63,.72),rgba(9,12,16,.92) 56%,#05070a 100%);
}
.les-stage::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -32px 56px rgba(2,4,7,.24);
}
.les-media-photo .les-stage::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(4,6,9,.40) 100%);
}
.les-media img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  filter:saturate(.90) contrast(1.04);
  transition:transform .65s var(--ease-out),filter .25s var(--ease-out);
}
.les-media figcaption{
  position:relative; z-index:3;
  padding:9px 24px; border-top:1px solid var(--line-soft);
  font-size:9px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  background:rgba(4,6,9,.76);
}

.les[data-product="ithal-mat"] .les-media img{ object-position:50% 48%; }
.les[data-product="topukluk"] .les-media img{ object-position:50% 34%; transform:scale(1.08); }
.les[data-product="yerli-mat"] .les-media img{
  object-fit:contain; padding:clamp(12px,1.8vw,22px);
  filter:saturate(.92) contrast(1.08) drop-shadow(0 14px 24px rgba(0,0,0,.55));
}

/* Fotoğrafı olmayan iki üründe sahne bir teknik çizim taşır. Önceki panel
   ürün adını görsel alanında ikinci kez, üstelik kartın kendi başlığından
   büyük puntoyla yazıyordu; altı fotoğraflı karenin arasında iki kare metin
   bloğu, boş bir yer tutucu gibi duruyordu. Çizim ürünün biçimini gösterir ve
   fotoğraf taklidi etmez. */
.media-draw{
  position:absolute; inset:0; width:100%; height:100%;
  padding:clamp(18px,2.4vw,34px);
  stroke-linecap:round; stroke-linejoin:round;
}
.media-draw .md-fill{ fill:rgba(20,26,32,.72); }
.media-draw .md-line{ stroke:var(--bone-dim); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.media-draw .md-thin{ stroke:rgba(223,231,224,.42); stroke-width:1.1; }
.media-draw .md-dash{ stroke-dasharray:5 4; }
.media-draw .md-quilt path{ stroke:rgba(223,231,224,.16); stroke-width:1; }

@media (hover:hover) and (pointer:fine){
  .les:hover .les-media-photo img{ filter:saturate(1) contrast(1.06); transform:scale(1.025); }
  .les[data-product="topukluk"]:hover .les-media img{ transform:scale(1.10); }
  .les[data-product="yerli-mat"]:hover .les-media img{ transform:scale(1.018); }
  .les:hover .media-draw .md-line{ stroke:var(--bone); }
}

/* Renk seçimi oluşturucuya taşındı; kalıba özel kart oraya giden yolu taşır. */
.les-hint{
  display:inline-flex; align-items:center; gap:8px; margin:0 24px; align-self:start;
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .2s var(--ease-out);
}
.les-hint svg{ transition:transform .2s var(--ease-out); }
.les-hint:hover{ color:var(--bone); }
.les-hint:hover svg{ transform:translate(2px,-2px); }
.les-hint:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }

/* — chapter IV: sipariş */
/* Basligi ortalanmis, altindaki guven kartlari ve yorumlar sola hizaliydi:
   tek bolum icinde iki eksen. Sayfanin geri kalani da sola hizali oldugu icin
   baslik da o eksene alindi; farkli duran tek yer hero kaliyor. */
.fin{ min-height:auto; display:flex; flex-direction:column; justify-content:center; }
/* Tighten the gap between products and order: the double .sec padding
   (bottom of #urunler + top of #siparis) was ~380px and the 100svh
   min-height added empty dark space even when the content was shorter.
   Content-driven height keeps the rhythm without the void. */
#siparis{ padding-top:clamp(40px,7vh,72px); padding-bottom:clamp(60px,10vh,100px); }
#urunler{ padding-bottom:clamp(40px,7vh,72px); }
.fin .eyebrow{ margin-bottom:26px; }
.fin h2{ font-size:clamp(38px,5vw,72px); font-weight:500; line-height:.94; letter-spacing:-.03em; text-transform:uppercase; }
.fin p{ max-width:44ch; margin:26px 0 0; }
.cta{
  position:relative; display:inline-flex; align-items:center; gap:14px; margin-top:44px;
  padding:17px 30px; border:1px solid var(--line); border-radius:100px; overflow:hidden;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  transition:color .45s var(--ease), border-color .45s;
}
.cta i{ position:absolute; inset:0; background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform .62s var(--ease-out); z-index:-1; }
.cta span,.cta svg{ position:relative; z-index:1; }
.cta:hover{ color:#05070a; border-color:var(--bone); }
.cta:hover i{ transform:none; }
.cta:hover svg path{ stroke:#05070a; }

/* — high-conversion sales components */
.cta-hero{
  display:inline-flex; align-items:center; gap:12px; padding:15px 30px; margin-top:0;
  background:var(--vermilion); color:#fff; border-radius:999px; text-decoration:none;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:background .18s var(--ease-out), color .18s var(--ease-out),
    transform .18s var(--ease-out), box-shadow .22s var(--ease-out);
  box-shadow:0 6px 20px -6px rgba(224,35,28,.45);
}
.cta-hero:hover{
  background:#f42720; transform:translate3d(0,-2px,0);
  box-shadow:0 10px 26px -8px rgba(224,35,28,.55); color:#fff;
}
.cta-hero:active{ transform:scale(.97); }
.cta-hero:focus-visible{ outline:1px solid var(--bone); outline-offset:4px; }

/* Sepet gönderimi ve oluşturucunun ekleme düğmesi (.cta-cart / .wiz-add)
   sınıfı taşımasına rağmen hiç stillenmemişti — sayfanın en kritik iki
   düğmesi tarayıcı varsayılanıyla kalıyordu. .cta-hero ile aynı dolu
   vermilyon birincil eylem diline bağlanır. */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--vermilion); color:#fff;
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:background .18s var(--ease-out), transform .18s var(--ease-out),
    box-shadow .22s var(--ease-out), opacity .18s var(--ease-out);
  box-shadow:0 6px 20px -6px rgba(224,35,28,.45);
}
.cta:hover:not(:disabled){
  background:#f42720; transform:translate3d(0,-2px,0);
  box-shadow:0 10px 26px -8px rgba(224,35,28,.55); color:#fff;
}
.cta:active:not(:disabled){ transform:scale(.97); }
.cta:focus-visible{ outline:1px solid var(--bone); outline-offset:4px; }
.cta:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.cta-cart{ width:100%; }
.cta-cart i{ display:none; }


.trust-grid{
  display:grid; grid-template-columns:repeat(3,1fr); margin:36px 0 24px;
  border-top:1px solid var(--line-soft); text-align:left;
}
@media (max-width:768px){
  .trust-grid{ grid-template-columns:1fr; }
}
.trust-card{ padding:22px 0 0; }
.trust-card + .trust-card{ border-left:1px solid var(--line-soft); padding-left:clamp(18px,2.4vw,34px); }
@media (max-width:768px){
  .trust-card + .trust-card{ border-left:0; border-top:1px solid var(--line-soft); padding-left:0; margin-top:18px; }
}
.trust-icon{ margin-bottom:12px; }
.trust-icon svg{ width:26px; height:26px; display:block; }
.trust-card h4{ font-size:14px; font-weight:500; color:var(--bone); margin:0 0 4px; }
.trust-card p{ font-size:12px; line-height:1.5; color:var(--muted); margin:0; }

.brand-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; margin-top:14px; }
.bc-label{ font-size:11px; color:var(--muted); width:100%; margin-bottom:4px; letter-spacing:.08em; text-transform:uppercase; text-align:left; }
/* Quick-vehicle tags join the chip family: transparent hairline pill like the
   color picker, vermilion ring on hover instead of a tinted fill. */
.bc-tag{
  background:transparent; border:1px solid var(--line-soft);
  border-radius:999px; padding:6px 14px; font-size:11px; color:var(--bone-dim);
  cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.bc-tag:hover{ border-color:var(--vermilion); color:var(--bone); }

.reviews-box{ margin:60px auto 0; max-width:1100px; text-align:left; }
.reviews-header{ display:flex; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.stars{ display:inline-flex; gap:3px; color:var(--gold); }
.stars svg{ width:15px; height:15px; display:block; }
.reviews-header h3{ font-size:20px; color:var(--bone); font-weight:400; }
.reviews-header h3 b{ font-family:var(--mono); color:var(--vermilion); }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-soft); }
@media (max-width:820px){
  .reviews-grid{ grid-template-columns:1fr; }
}
.rev-card{ padding:22px 0 0; font-size:13px; line-height:1.65; color:#a2ad9f; }
.rev-card + .rev-card{ border-left:1px solid var(--line-soft); padding-left:clamp(16px,2vw,26px); }
@media (max-width:820px){
  .rev-card + .rev-card{ border-left:0; border-top:1px solid var(--line-soft); padding-left:0; margin-top:20px; }
}
.rev-card b{ display:block; margin-top:14px; font-size:12px; color:var(--bone); font-weight:400; }
.rev-card b span{ font-family:var(--mono); color:var(--muted); font-size:10px; }

/* — footer */
.foot{ position:relative; padding:clamp(50px,8vh,96px) var(--pad) clamp(26px,4vh,40px);
  border-top:1px solid var(--line-soft); }
.foot-grid,.foot-base,.foot-contact-head,.contact-actions{ position:relative; }
/* Bölüm başlığı sayfanın kendi eksenine oturur. İki sütunlu düzende eyebrow
   solda, başlık 200 piksel içeride başlıyordu; altındaki her şey (marka bloğu,
   üç sütunlu dizin, rozetler, telif) sol kenarda duruyordu, yani tek footer'da
   iki eksen vardı. #siparis bölümü de eyebrow'u başlığın üstüne alıyor. */
.foot-contact-head .eyebrow{ margin-bottom:22px; }
.foot-contact-head h2{ max-width:20ch; text-transform:none; }
.contact-actions{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:10px;
  margin-top:clamp(30px,5vh,54px); padding-top:20px; border-top:1px solid var(--line-soft);
}
.contact-link{
  min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; border:1px solid var(--line); border-radius:999px;
  color:var(--bone-dim); font-size:11px; font-weight:500; letter-spacing:.08em;
  transition:color .2s var(--ease-out), border-color .2s var(--ease-out),
    background .2s var(--ease-out), transform .16s var(--ease-out);
}
.contact-link span{ color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:9px; }
.contact-link b{ color:var(--bone); font-weight:500; }
.contact-link:hover{ color:var(--bone); border-color:rgba(223,231,224,.42); transform:translateY(-2px); }
.contact-link:focus-visible{ outline:1px solid var(--bone); outline-offset:4px; }
.contact-link-primary{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; text-transform:uppercase; letter-spacing:.14em; }
.contact-link-primary:hover{ background:#f42720; border-color:#f42720; color:#fff; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr)); gap:clamp(22px,4vw,60px); }
.foot h4{ margin:0 0 16px; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:13px; color:#8f9a93; transition:color .35s; }
.foot li a:hover{ color:var(--bone); }
.foot-base a{ color:#8f9a93; text-decoration:none; transition:color .35s; }
.foot-base a:hover{ color:var(--bone); }
.foot-brand p{ margin:16px 0 0; max-width:34ch; font-size:13px; color:#79847e; }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(38px,6vh,74px); padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================= progress rail */
.rail{ position:fixed; right:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:12px; align-items:center; }
.rail button{ width:22px; height:10px; display:grid; place-items:center; }
.rail i{ display:block; width:14px; height:1px; background:rgba(223,231,224,.26); transition:.5s var(--ease-out); }
.rail button.on i{ width:22px; background:var(--bone); }
.rail button:hover i{ width:22px; background:var(--bone-dim); }

/* ============================================================= cursor */
.cur-dot{ position:fixed; z-index:80; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(223,231,224,.42); border-radius:50%; pointer-events:none;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
             background .35s, border-color .35s, opacity .3s; opacity:0; }
.cur-dot.act{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(223,231,224,.07); border-color:rgba(223,231,224,.6); }
@media (hover:hover) and (pointer:fine){ .cur-dot{ opacity:1 } }

/* ============================================================= responsive */
@media (max-width:1080px){
  .hero-top{ max-width:none; }
  .gate-grid{ grid-template-columns:1fr; gap:26px; }
  .cur-head{ grid-template-columns:1fr; gap:18px; }
  .les{ grid-template-columns:44px minmax(0,1fr) 74px auto; }
  .les p{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav-links{
    display:flex; position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px);
    padding:calc(var(--nav-h) + 28px) var(--pad) 34px; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(3,6,9,.98); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .65s var(--ease-out), opacity .4s, visibility 0s linear .65s;
    overscroll-behavior:contain;
  }
  .nav.menu-open .nav-links{
    transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  .nav-links .nav-link{
    width:100%; height:auto; padding:17px 0; overflow:visible; border-bottom:1px solid var(--line-soft);
    font-size:17px; line-height:1.2;
  }
  .nav-links .nav-link span{ height:auto; line-height:1.2; transform:none !important; }
  .nav-links .nav-link .alt{ position:static; margin-top:6px; font-size:10px; color:var(--muted); }
  .nav-links .nav-cart-count{ display:inline-grid; margin:0 0 0 7px; font-size:10px; line-height:1; }
  .nav-links .nav-cart-count[hidden]{ display:none; }
  .nav-links .nav-cta{ align-self:stretch; justify-content:center; margin-top:24px; padding:15px 20px; font-size:12px; }
  /* The links panel leaves the flow to become the slide-in sheet, taking its
     margin-left:auto with it, so without this the burger sits tucked against
     the wordmark instead of out at the edge where a thumb reaches. */
  /* A transform *or* a backdrop-filter makes an element the containing block
     for its position:fixed descendants. This panel is a child of the bar, so
     once the bar went sticky and started hiding on scroll the open panel was
     measured against the bar instead of the viewport: 146px tall, dragged off
     the top, with the page showing through beside it. Neither may apply while
     the sheet is open — it covers the frame, so there is nothing left to blur. */
  /* A hide transform still promotes the bar, so drop it the instant the sheet
     opens. Without transition:none it eases out over .55s and the sheet spends
     that whole time measured against the bar. */
  .nav.menu-open{ transform:none; transition:none; }
  .nav-burger{ display:flex; margin-left:auto; }
  .nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg); }
  .nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
  html.nav-open,html.nav-open body{ overflow:hidden; }
  .rail{ display:none; }
  .hero-side{ display:none; }
  .chapters{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .chip-desc{ font-size:10px; }
  .cards{ grid-template-columns:1fr; gap:14px; }
  .card:nth-child(2),.card:nth-child(3){ transform:none; }
  .gate-stats{ flex-wrap:wrap; gap:20px 34px; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cue{ display:flex; justify-content:flex-start; }
  .hero-slide-count,.hero-cue .track{ display:none; }
}
/* ================================================== section layouts (B set)
   The six sections ship their B compositions — hero split, story spread,
   gardens mosaic, chapter atlas, gallery closing, manifesto footer. They are
   keyed off stable body data attributes so the rules above keep reading as
   the plain grammar of the page and every B override stays in one block.   */

/* — hero B · split: an editorial reading column holds the left, a compact
     numbered index sits under it, and the live scene window becomes a low,
     right-hand counterweight. The scene itself remains untouched.

     The column carried a 90° scrim over the left three-quarters of the frame.
     It has gone: the sanctuary is already near-black behind the reading, and
     measured against it the copy loses almost nothing without it — the
     headline 15.98:1 to 15.47:1, the standfirst 7.94:1 to 7.75:1, the index
     16.11:1 to 16.08:1, all far past what either needs. It was darkening the
     approach, the gate and the lower steps to buy half a point of contrast
     nobody was short of. */
body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:min(590px,46vw); }
body[data-layout-hero="b"] .hero-foot{ width:min(620px,54vw); margin-left:0; }
body[data-layout-hero="b"] .hero-cue{ justify-content:flex-start; }
body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body[data-layout-hero="b"] .chip{ position:relative; flex-direction:column; gap:7px; }
body[data-layout-hero="b"] .chip .num{ font-size:clamp(29px,3.1vw,48px); }
body[data-layout-hero="b"] .chip .tx{
  position:static; width:auto; height:auto; overflow:visible; clip:auto;
  clip-path:none; white-space:normal; padding-top:0;
}
body[data-layout-hero="b"] .chip .chip-desc{ display:none; }
/* the live window drops into the open right corner, away from the reading
   column and the oversized 3-D wordmark */
body[data-layout-hero="b"] .peek{
  left:auto; right:var(--pad); top:auto; bottom:clamp(38px,7vh,96px);
}
body[data-layout-hero="b"] .peek-cap b.jp{ font-size:clamp(20px,2.2vw,34px); letter-spacing:.18em; }
/* The Japanese title reads down the right edge, hung under the navigation —
   the one mark on that side of the frame now that the romanization has gone. */
body[data-layout-hero="b"] .hero-side{
  left:auto; right:var(--pad); top:calc(var(--nav-h) + clamp(14px,3vh,42px));
  bottom:auto; transform:none; display:block;
}
body[data-layout-hero="b"] .hero-side .v{
  position:static; transform:none;
  font-size:clamp(30px,3.2vw,54px); letter-spacing:.12em; color:rgba(223,231,224,.62);
}

/* — story B · spread: the title crosses two columns, the reading column is
     held to the right, and the figures become a ruled band. */
body[data-layout-story="b"] .gate-grid{
  grid-template-columns:minmax(120px,.38fr) minmax(0,1.08fr) minmax(280px,.88fr);
  gap:clamp(20px,3vw,54px);
}
body[data-layout-story="b"] .gate-grid h2{ grid-column:1 / 3; max-width:13ch; }
body[data-layout-story="b"] .gate-copy{ grid-column:3; }
body[data-layout-story="b"] .gate-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
body[data-layout-story="b"] .gate-stats div{ min-height:108px; padding:18px; border-left:1px solid var(--line-soft); }
body[data-layout-story="b"] .gate-stats div:last-child{ border-right:1px solid var(--line-soft); }

/* — gardens B · mosaic: one immersive live window beside two stacked ones.
     The cards stretch to their rows and the frames flex, so the two small
     viewports meet the tall one exactly instead of drifting apart. */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.card{ transform:none !important; display:flex; flex-direction:column; min-height:0; overflow:hidden; border-radius:16px; }
.card-fr{ aspect-ratio:16/10; width:100%; border-radius:16px; overflow:hidden; }
.card:first-child{ grid-row:auto; }
.card:first-child .card-fr{ height:auto; }
.card:not(:first-child) .card-fr{ min-height:0; }

/* — chapters B · atlas: a two-then-three plate grid instead of a syllabus.
     Number and title sit at the top of each plate, the running time drops to
     the foot of it. */
body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:minmax(0,.72fr) minmax(0,1.2fr); align-items:start; }
/* The atlas keeps its two-then-three plate grid, but the plates are no longer
   filled boxes inside a bordered frame — they are transparent cells held by
   hairline rules (the 1px gap over the line-soft background), the same
   grammar as the stats, trust and review bands. The vermilion wash on hover
   is now the only fill on the plate. */
body[data-layout-curriculum="b"] .cur{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-soft); border-top:1px solid var(--line-soft);
}
body[data-layout-curriculum="b"] .les{
  display:flex; flex-direction:column; align-items:flex-start; align-self:stretch; min-height:0; height:100%;
  padding:0 0 24px; gap:14px; border:0; background:var(--ink); overflow:hidden;
}
/* Two plates across was a syllabus of six. The catalogue is fifteen rows now —
   nine of them one organizer each, differing only by colour — and at half the
   frame apiece that is eight screens of scrolling to compare two colourways
   that never share a viewport. Three across on a wide frame turns the colour
   range into something you can look at, which is the only way a range sells;
   the plate is still 430-odd pixels, wide enough for the photograph and the
   price to keep their weight. */
body[data-layout-curriculum="b"] .les{ grid-column:span 2; }
@media (max-width:1240px){
  body[data-layout-curriculum="b"] .les{ grid-column:span 3; }
}
body[data-layout-curriculum="b"] .les::before{ left:0; background:linear-gradient(145deg,rgba(224,35,28,.11),transparent 58%); }
body[data-layout-curriculum="b"] .les:hover{ padding-left:0; }
body[data-layout-curriculum="b"] .les h3{ font-size:clamp(20px,2vw,30px); }
body[data-layout-curriculum="b"] .les p{ display:block; max-width:38ch; }
body[data-layout-curriculum="b"] .les-desc{ min-height:3.2em; }
body[data-layout-curriculum="b"] .les-foot{ margin-top:auto; }
body[data-layout-curriculum="b"] .les .t{ text-align:left; margin-top:0; }

/* — closing B · order desk.
     This chapter was a gallery closing once: a chapter mark, one last line and
     a call to action, so standing the title on its edge down the right and
     running the three left in a .7fr column was a composition. It is a
     checkout now. The grid it inherited had no track for a trust band, a cart
     or a review wall, so all three auto-placed into that same .7fr — 429px of
     a 1425px frame — while a 68px-wide vertical headline held the other 900,
     and the review wall spilled sideways into column two on its own.

     The title lies back down and the section returns to the plain stack
     .fin already describes: header, trust band, the cart column, the
     reviews. Every band gets the full measure it was written for.

     Baslik once ortalanmisti, ama altindaki guven kartlari ve yorum duvari
     sola hizali gridler; tek bolum icinde iki eksen olusuyordu. Sayfanin
     butunu de sola hizali, o yuzden baslik da ayni eksene alindi. Kartlari
     ortalamak alternatifti; o yol jenerik "3 ortalanmis ikon" kalibina
     dusurur ve taramayi zorlastirirdi. */
body[data-layout-closing="b"] .fin{
  display:flex; flex-direction:column; align-items:stretch;
}
body[data-layout-closing="b"] .fin > .eyebrow{ margin:0 0 26px; }
body[data-layout-closing="b"] .fin > h2{
  writing-mode:horizontal-tb; font-size:clamp(38px,5vw,72px); align-self:start;
}
body[data-layout-closing="b"] .fin > p{ margin:26px 0 0; }

/* — footer B · manifesto: the statement leads, the navigation becomes a
     compact ruled index beneath it. */
body[data-layout-footer="b"] .foot-grid{ grid-template-columns:repeat(3,1fr); }
/* Marka bloğu 70 piksellik bir kare logo yuvası için yazılmıştı; oraya 2000×448
   oranında bir kelime-logosu kondu ve logo ezildi, yanındaki cümle de 30 punto
   kaldığı için hemen üstündeki bölüm başlığıyla yarışan ikinci bir manifesto
   oluyordu. Logo kendi satırına alındı, cümle footer'ın kendi ölçeğine indi. */
body[data-layout-footer="b"] .foot-brand{
  grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding-bottom:30px; margin-bottom:6px; border-bottom:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-brand p{
  margin:0; max-width:56ch; font-size:14px; line-height:1.65; color:#79847e;
}
body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){
  padding-left:clamp(18px,2.2vw,34px); border-left:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-base{ display:grid; grid-template-columns:1fr auto 1fr; }
body[data-layout-footer="b"] .foot-base span:last-child{ text-align:right; }

/* ================================================= foreground cut-out layers
   The per-chapter foreground cut-out system (the .fg boxes, #fg-sky, and
   wireForegroundStages) was removed from the Otopolik build. The rule below
   is kept because it also layers every ordinary section child above the
   WebGL canvas.
   ============================================================= */
.sec > *:not(.fg), .foot > *:not(.fg){ position:relative; z-index:2; }

@media (max-width:1080px){
  body[data-layout-hero="b"] .chapters{ gap:16px 20px; }
  body[data-layout-story="b"] .gate-grid{ grid-template-columns:1fr; }
  body[data-layout-story="b"] .gate-grid h2,
  body[data-layout-story="b"] .gate-copy{ grid-column:auto; }
  body[data-layout-story="b"] .gate-grid h2{ max-width:16ch; }
  body[data-layout-curriculum="b"] .les{ grid-column:span 3; }
}
@media (max-width:820px){
  /* the split collapses and the copy takes the page back */
  body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:none; }
  body[data-layout-hero="b"] .hero-foot{ width:100%; }
  /* The four-column strip is set on a selector specific enough to survive the
     plain .chapters override below 820, so it has to be unset here by name or
     the chips stay four across on a phone and wrap a word to a line. */
  body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  body[data-layout-hero="b"] .chip{ flex-direction:row; gap:14px; }
  /* Same shape of bug: the layout selector outranks the plain single-column
     rule, so the heading kept a 37% column while its words are set at 30px —
     "CHAPTERS." alone is wider than that, and it spilled over the paragraph. */
  body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(26px,8vw,36px); }
  body[data-layout-hero="b"] .chip .tx{
    position:static; width:auto; height:auto; overflow:visible; clip:auto;
    clip-path:none; white-space:normal;
  }
  body[data-layout-hero="b"] .chip .chip-desc{ display:block; }

  body[data-layout-story="b"] .gate-stats{ grid-template-columns:repeat(2,1fr); border-right:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div{ min-height:86px; padding:14px; }
  body[data-layout-story="b"] .gate-stats div:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div:last-child{ border-right:0; }

  /* the mosaic unstacks, but the rhythm survives: the lead window stays the
     tall one and the two field notes stay letterbox */
  body[data-layout-gallery="b"] .cards{ grid-template-columns:1fr; gap:18px; }
  body[data-layout-gallery="b"] .card-fr{ aspect-ratio:16/10; height:auto; }

  body[data-layout-curriculum="b"] .cur{ grid-template-columns:1fr; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:auto; min-height:0; height:auto; padding:0 0 20px; }
  body[data-layout-curriculum="b"] .les-desc{ min-height:0; }
  body[data-layout-curriculum="b"] .les:hover{ padding-left:0; }

  body[data-layout-closing="b"] .fin > h2{ font-size:clamp(38px,10vw,42px); }

  body[data-layout-footer="b"] .foot-grid{ grid-template-columns:1fr; }
  body[data-layout-footer="b"] .foot-brand{ grid-column:auto; }
  body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){ padding-left:0; border-left:0; }
  body[data-layout-footer="b"] .foot-base{ display:flex; }
  body[data-layout-footer="b"] .foot-base span:last-child{ text-align:left; }

  .foot-contact-head .eyebrow{ margin-bottom:14px; }
  .contact-actions{ flex-direction:column; align-items:stretch; }
  .contact-link{ width:100%; justify-content:space-between; text-align:left; }
  .contact-link-primary{ justify-content:center; }
}

/* On a phone two columns leave the chip's copy about 110px once the numeral
   and its gutter are taken out, which is narrow enough to wrap a single word
   to a line. Standing the numeral above the label gives the copy the whole
   column back. */
@media (max-width:560px){
  body[data-layout-hero="b"] .chip{ flex-direction:column; gap:4px; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(22px,7.4vw,30px); }
  body[data-layout-hero="b"] .chip .tx{ padding-top:0; }
  body[data-layout-hero="b"] .chip .chip-desc{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .mask-line > span,.word{ opacity:1 !important; transform:none !important; }
  /* Sepet çekmecesi ve toast, genel * kuralından bağımsız olarak açıkça
     hareketsizleştirilir: çekmece anında görünür, toast anında belirir. */
  div.cart-panel.cart-panel--open{ animation:none !important; }
  .cart-backdrop, .toast{ transition:none !important; }
}

/* ================================================== paspas oluştur sihirbazı
   Ana sinematik motoru hiç yüklemeyen, sade ve doğrusal bir konfigüratör.
   Aynı tokenleri (--ink, --vermilion, Onest) ve .cs-btn / .cta-cart gibi
   bileşenleri paylaşır — ayrı bir görsel dil icat edilmez. */
.wiz{
  min-height:100vh; background:var(--ink); padding:calc(var(--nav-h) + 24px) var(--pad) 80px;
  max-width:1220px; margin:0 auto;
  /* React her adımda günceller: marka seçilmeden Otopolik kırmızısı, sonra
     markanın rengi, renk adımında paspasın rengi. Geçiş yok — değişim
     kullanıcının tıklamasına bağlı, anında olması daha okunur. */
  --wz-pick:var(--vermilion);
  /* Teknik ikinci ses: ürün kodları, adım numaraları, ölçü etiketleri.
     İkinci bir webfont indirmek yerine sistemin mono ailesi kullanılıyor. */
  --wz-mono:var(--mono);
}
/* Üst Bar & Canlı Rozet */
.wiz-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:28px;
}
.wiz-topbar .wiz-back{ margin-bottom:0; }
.wiz-meta-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  border:1px solid rgba(46,204,113,.25); border-radius:999px;
  background:rgba(46,204,113,.06);
  font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--bone-dim);
}
.wiz-pulse-dot{
  width:6px; height:6px; border-radius:50%; background:#2ecc71;
  box-shadow:0 0 10px #2ecc71, 0 0 4px #2ecc71;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.85); }
}

/* Adım numaraları gerçekten sıra bildiriyor (marka → model → renk), o yüzden
   numaralandırma dekor değil; teknik sesle mono'da set ediliyor. */
.wiz-tracker{ display:flex; align-items:center; gap:10px; margin-bottom:32px; }
.wiz-step{ display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.wiz-step i{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); font-style:normal; flex:0 0 auto;
  font-family:var(--wz-mono); font-size:11px; letter-spacing:0; }
.wiz-step.on{ color:var(--bone); }
.wiz-step.on i{ background:var(--wz-pick); border-color:var(--wz-pick); color:#0a0e12; }
.wiz-tracker em{ flex:1 1 auto; height:1px; background:var(--line); max-width:64px; }
.wiz-step.is-done{ color:var(--muted); }
.wiz-step.is-done i{ background:transparent; border-color:color-mix(in srgb, var(--wz-pick) 55%, transparent); color:var(--wz-pick); }
.wiz-step.is-current{ color:var(--bone); }

.wiz-summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid rgba(223,231,224,.15); padding:16px 20px; margin-bottom:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%), var(--ink-2);
  border-radius:12px;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.6), 0 0 20px -10px var(--wz-pick);
}
.wiz-summary span{ display:block; font-family:var(--wz-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.wiz-summary b{ font-weight:500; font-size:16px; color:var(--bone); }
.wiz-summary button{ color:var(--wz-pick); font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Panel Başlığı & Kategori Sekmeleri */
.wiz-panel-head{ margin-bottom:22px; }
.wiz-panel-eyebrow{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family:var(--wz-mono); font-size:10px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.wiz-tag{
  padding:2px 8px; border-radius:4px;
  background:color-mix(in srgb, var(--wz-pick) 16%, transparent);
  color:var(--wz-pick); font-size:10px; font-weight:600;
}
.wiz-h{ font-size:clamp(24px,3.4vw,36px); font-weight:400; margin-bottom:8px; }
.wiz-h:focus{ outline:none; }
.wiz-configure-head .wiz-h{ margin-bottom:6px; }
.wiz-sub{ color:var(--muted); font-size:14px; margin-bottom:0; }

/* Arama kutusu */
.wiz-search-wrap{ position:relative; width:100%; margin:20px 0 16px; }
.wiz-search-icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.wiz-search{
  width:100%; background:var(--ink-2); border:1px solid var(--line-soft); border-radius:10px;
  padding:14px 44px 14px 46px; font:inherit; font-size:14px; color:var(--bone);
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.wiz-search::placeholder{ color:var(--muted); }
.wiz-search:focus{
  outline:none; border-color:var(--vermilion);
  box-shadow:0 0 0 3px rgba(224,35,28,.15), 0 8px 24px -6px rgba(0,0,0,.5);
}
.wiz-search-clear{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:rgba(223,231,224,.1); color:var(--bone); border:0; border-radius:50%;
  width:22px; height:22px; display:grid; place-items:center; font-size:14px; cursor:pointer;
  transition:background .18s;
}
.wiz-search-clear:hover{ background:var(--wz-pick); color:#0a0e12; }

/* Kategori Sekmeleri */
.wiz-cat-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
}
.wiz-cat-tab{
  padding:7px 14px; border:1px solid var(--line-soft); border-radius:999px;
  background:var(--ink-2); color:var(--muted); font-size:12px; font-weight:500;
  cursor:pointer; transition:all .2s var(--ease-out);
}
.wiz-cat-tab:hover{
  border-color:rgba(223,231,224,.3); color:var(--bone);
  background:rgba(223,231,224,.04);
}
.wiz-cat-tab.active{
  border-color:var(--vermilion); color:#fff;
  background:linear-gradient(135deg, rgba(224,35,28,.25), rgba(224,35,28,.06));
  box-shadow:0 0 16px -4px rgba(224,35,28,.4);
}

/* Popüler markalar çipleri */
.wiz-popular{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin-bottom:24px; padding:12px 14px; border:1px solid var(--line-soft); border-radius:10px;
  background:rgba(223,231,224,.015);
}
.wiz-popular-label{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.wiz-popular-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.wiz-popular-chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1px solid var(--line-soft); border-radius:999px; background:var(--ink-2);
  color:var(--bone-dim); font-size:12px; cursor:pointer;
  transition:border-color .18s, color .18s, transform .14s, box-shadow .18s;
}
.wiz-popular-chip img{ filter:brightness(0) invert(1); opacity:.75; object-fit:contain; }
.wiz-popular-chip:hover{
  border-color:var(--accent, var(--vermilion)); color:var(--bone);
  transform:translateY(-1px);
  box-shadow:0 4px 12px -3px var(--accent, rgba(224,35,28,.3));
}
.wiz-popular-chip:hover img{ opacity:1; }

/* Marka Izgarası */
.wiz-grid{ display:grid; gap:12px; }
.wiz-grid-brand{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
.wiz-grid-model{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
@media (min-width:1100px){ .wiz-grid-model{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1099px) and (min-width:860px){ .wiz-grid-model{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:859px) and (min-width:600px){ .wiz-grid-model{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:599px){ .wiz-grid-model{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.wiz-card{
  border:1px solid var(--line-soft); padding:18px 12px 14px; text-align:center;
  background:linear-gradient(145deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.005) 100%), var(--ink-2);
  border-radius:12px; color:var(--bone); cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.wiz-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--brand-accent, var(--vermilion)); opacity:0;
  transition:opacity .25s var(--ease-out);
}
.wiz-card:hover{
  border-color:rgba(223,231,224,.35); transform:translateY(-3px);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.7), 0 0 24px -8px var(--brand-accent, rgba(224,35,28,.35));
}
.wiz-card:hover::after{ opacity:1; }

/* — Dikey Marka Kartı */
.wiz-card-brand{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:114px; gap:8px;
}
.wiz-brand-media{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:46px;
}
.wiz-brand-spotlight{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--brand-accent, rgba(224,35,28,.3)) 0%, transparent 70%);
  opacity:0; transition:opacity .3s var(--ease-out); pointer-events:none;
}
.wiz-card-brand:hover .wiz-brand-spotlight{ opacity:.4; }
.wiz-brand-media img{
  position:relative; z-index:1;
  max-width:64px; max-height:40px; width:auto; height:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.75;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.wiz-card-brand:hover .wiz-brand-media img{ opacity:1; transform:scale(1.06); }
.wiz-brand-name{
  font-size:13px; font-weight:500; color:var(--bone); line-height:1.2;
  text-align:center; max-width:100%; word-break:normal;
}
.wiz-brand-fallback{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); font-size:13px; font-weight:500; color:var(--bone);
}

/* — Model Kartı & Rozet */
.wiz-card-model{
  display:flex; flex-direction:column; justify-content:space-between; text-align:left;
  padding:18px 14px 14px; min-height:160px; border-radius:12px;
  background:var(--ink-2); border:1px solid rgba(223,231,224,.1);
}
.wiz-card-model:hover{
  border-color:var(--brand-accent, var(--vermilion)); transform:translateY(-3px);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.7), 0 0 20px -8px var(--brand-accent, rgba(224,35,28,.35));
}
.wiz-model-media{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:76px; margin-bottom:10px;
}
.wiz-model-media img,
.wiz-2d-car{
  max-width:100%; max-height:72px; width:auto; height:auto; object-fit:contain;
}

/* Marka imza kaporta rengi: 2D çizimin beyaz gövdesi boyanır,
   cam ve lastikler siyah kalır. Kaynak PNG'ler değişmez. */
.wiz-model-media[data-paint]{ position:relative; isolation:isolate; }
.wiz-model-media[data-paint]::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:72px;
  transform:translateY(-50%); pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paint) 74%, #ffffff) 0%,
    color-mix(in srgb, var(--paint) 94%, #ffffff) 18%,
    var(--paint) 46%,
    color-mix(in srgb, var(--paint) 82%, #000000) 62%,
    color-mix(in srgb, var(--paint) 88%, #ffffff) 76%,
    color-mix(in srgb, var(--paint) 58%, #000000) 100%);
  -webkit-mask-image:var(--model-src); mask-image:var(--model-src);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.wiz-model-media[data-paint] img{
  position:relative; z-index:1;
  width:100%; height:72px; max-width:100%; max-height:72px;
  object-fit:contain; mix-blend-mode:multiply;
}
.wiz-model-copy{ display:flex; flex-direction:column; gap:6px; }
.wiz-model-copy b{ font-size:13px; font-weight:500; color:var(--bone); line-height:1.25; }
.wiz-model-badge{
  display:inline-block; align-self:flex-start;
  padding:2px 7px; border-radius:4px; font-size:9px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  background:rgba(223,231,224,.08); color:var(--muted);
}
/* Paket listesi: ızgara yerine alt alta satırlar. Her satırda başlık + sağda
   fiyat, altında ✓ özellik rozetleri; öne çıkan paket altın çerçeveli. */
.wiz-pkg-list{ display:flex; flex-direction:column; gap:10px; }
.wiz-pkg{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line-soft); border-radius:12px; padding:15px 17px;
  background:var(--ink-2); color:var(--bone);
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out),
    background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.wiz-pkg:hover{ border-color:rgba(223,231,224,.32); transform:translateY(-2px); }
.wiz-pkg.active{
  border-color:var(--vermilion); background:rgba(224,35,28,.06);
  box-shadow:0 0 0 1px var(--vermilion), 0 8px 24px -6px rgba(224,35,28,.35);
}
.wiz-pkg-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.wiz-pkg-head b{ font-size:15px; font-weight:500; line-height:1.3; }
.wiz-pkg-price{
  flex:0 0 auto; font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.wiz-pkg-feats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.wiz-pkg-feat{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:6px; font-size:11px; line-height:1.35;
  background:rgba(223,231,224,.06); color:var(--bone-dim);
}
.wiz-pkg-feat::before{ content:'✓'; font-size:10px; color:var(--verdant, #4c9a6a); }
.wiz-pkg-desc{ margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.5; }
.wiz-pkg-badge{
  display:inline-block; margin-top:10px;
  font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}

/* Öne çıkan paket */
.wiz-pkg.is-featured{
  border-color:rgba(224,169,60,.55); background:rgba(224,169,60,.05);
  box-shadow:0 0 22px -12px rgba(224,169,60,.55);
}
.wiz-pkg.is-featured:hover{ border-color:rgba(224,169,60,.8); }
.wiz-pkg.is-featured .wiz-pkg-price{ color:#E0A93C; }
.wiz-pkg.is-featured.active{
  border-color:#E0A93C; background:rgba(224,169,60,.09);
  box-shadow:0 0 0 1px #E0A93C, 0 8px 24px -6px rgba(224,169,60,.4);
}
.wiz-pkg-ribbon{
  display:inline-block; margin-bottom:9px;
  padding:3px 9px; border-radius:999px;
  background:#E0A93C; color:#1a1205;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
}
/* Renk ailesi satırı: aile bir kez tanıtılır, altında yalnızca ayıran
   numuneler durur. Kart tıklanabilir değil — seçim numunelerin kendisinde. */
.wiz-pkg-family{ cursor:default; }
.wiz-pkg-family:hover{ transform:none; border-color:var(--line-soft); }
.wiz-swatches{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.wiz-swatch{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 6px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-soft); background:rgba(223,231,224,.03);
  color:var(--bone-dim); font-family:inherit; font-size:11px; line-height:1.3;
  transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out),
    color .18s var(--ease-out);
}
.wiz-swatch:hover{ border-color:rgba(223,231,224,.34); color:var(--bone); }
.wiz-swatch:focus-visible{ outline:1px solid var(--wz-pick); outline-offset:2px; }

/* Klavye odağı sihirbazın hiçbir öğesinde tanımlı değildi. Aksan koyu zeminde
   okunur olacak şekilde üretiliyor, o yüzden odak halkası da onu kullanabilir. */
.wiz-card:focus-visible,
.wiz-pkg:focus-visible,
.config-color-option:focus-visible,
.wiz-summary button:focus-visible,
.wiz-search-clear:focus-visible,
.wiz-cat-tab:focus-visible,
.wiz-popular-chip:focus-visible,
.wiz-back:focus-visible{
  outline:2px solid var(--wz-pick); outline-offset:2px;
}
.wiz-swatch.on{
  border-color:var(--vermilion); background:rgba(224,35,28,.1); color:var(--bone);
}
.wiz-swatch small{ color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
/* Numunenin biçimi neyin ayırdığını söyler: gövde derisi farklıysa düz bant,
   gövde aynı ve yalnızca dikiş farklıysa iplik adımında kesikler. */
.wiz-swatch-chip{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(5,7,10,.45); background:var(--thread, #888);
}
.wiz-swatch.is-iplik .wiz-swatch-chip{
  background:
    repeating-linear-gradient(135deg,
      var(--thread, #888) 0 2.5px, transparent 2.5px 5px),
    #1c1c1c;
}
.wiz-pkg-note{
  display:flex; gap:8px; margin:14px 0 0; padding:11px 13px;
  border:1px solid rgba(76,154,106,.25); border-radius:9px;
  background:rgba(76,154,106,.06);
  font-size:11.5px; line-height:1.45; color:var(--bone-dim);
}
.wiz-pkg-note::before{ content:'🛡️'; flex:0 0 auto; font-size:12px; line-height:1.35; }

/* Adım 03 düzeni: başlık tam genişlik, önizleme solda, seçimler sağda.
   Taban kural hiç yazılmamıştı; bu yüzden 820px altındaki
   grid-template-columns geçersiz kılması da etkisiz kalıyordu. */
.wiz-configure{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px; align-items:start;
}
.wiz-configure-head{ grid-column:1 / -1; }
.wiz-config-right{ min-width:0; }

/* Önizleme Başlığı */
/* Not: body'de overflow-y:auto olduğu için sticky burada çalışmıyor
   (hiç kaymayan bir scrollport'a göre sabitleniyor); kart normal akışta. */
.wiz-preview-card{
  margin:0; padding:0; overflow:hidden; background:var(--ink-2);
  border-radius:14px; border:1px solid var(--line-soft);
  box-shadow:0 16px 48px -12px rgba(0,0,0,.8), 0 0 30px -15px var(--brand-accent, rgba(224,35,28,.2));
}
.wiz-preview-header{ padding:16px 18px 13px; border-bottom:1px solid var(--line-soft); }
.wiz-preview-header h3{ margin:0 0 2px; font-size:15px; font-weight:400; color:var(--bone); }
.wiz-preview-header p{ margin:0; font-size:12px; color:var(--muted); }

/* Taban ve kenar dikişi tek kompozit olarak üst üste binmeli.
   .wiz-preview-stage / .wiz-preview-layer hiç tanımlanmadığı için iki
   1200px'lik görsel normal akışta alt alta diziliyordu. */
/* Kesim altlığı: paspas bir kalıptan kesiliyor, zemin de ölçü ızgarası taşısın.
   Izgara seçilen renge çok hafif boyanır — parlaklık değil, ima. */
.wiz-preview-stage{
  position:relative; width:100%; aspect-ratio:1/1;
  background-color:#070b09;
  background-image:
    linear-gradient(to right, rgba(223,231,224,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(223,231,224,.045) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px;
}
.wiz-preview-layer,
.wiz-preview-single{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:contain;
}
.wiz-preview-edge{ pointer-events:none; }
.wiz-preview-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center; font-size:12px; color:var(--muted);
}
.wiz-preview-cap{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:14px 18px; border-top:1px solid var(--line-soft);
}
.wiz-preview-kicker{
  display:block; font-family:var(--wz-mono); font-size:9px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wz-pick); margin-bottom:5px;
}
.wiz-cap-pill{
  display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--bone);
}
.wiz-cap-pill small{ font-family:var(--wz-mono); font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.wiz-cap-divider{ font-size:16px; font-weight:300; color:var(--wz-pick); }
.wiz-color-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.wiz-colors{ border:0; padding:0; margin:0 0 22px; }
.wiz-colors legend{ font-family:var(--wz-mono); font-size:10px; font-weight:400; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:12px; padding:0; }
.wiz-colors legend small{ color:var(--muted); }

.wiz-packages{ margin-bottom:22px; }
.wiz-packages-label{ display:block; font-weight:400; font-size:15px; margin-bottom:12px; }

.wiz-add{ width:100%; justify-content:center; }
.wiz-add:disabled{ opacity:.4; cursor:not-allowed; }

/* Renk seçenekleri: .cs-btn hiç tanımlanmamıştı, 38 renk tarayıcı
   varsayılan düğmesiyle alt alta diziliyordu. Kompakt chip ızgarası hem
   masaüstünde düzeni kurar hem mobildeki renk/ürün akışını belirgin kısaltır. */
.cs-options{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 13px; min-height:36px;
  border:1px solid var(--line-soft); border-radius:999px; cursor:pointer;
  background:rgba(223,231,224,.02); color:var(--bone-dim);
  font-size:12px; line-height:1.2; font-family:inherit;
  transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out),
    color .18s var(--ease-out);
}
.cs-btn:hover{ border-color:rgba(223,231,224,.3); color:var(--bone); }
.cs-btn:focus-visible{ outline:1px solid var(--vermilion); outline-offset:2px; }
.cs-btn .dot-color{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(5,7,10,.4);
}
.cs-btn.active{ border-color:var(--vermilion); background:rgba(224,35,28,.1); color:var(--bone); }

@media (max-width:820px){
  .wiz-configure{ grid-template-columns:1fr; padding-bottom:88px; }
  .cs-options{ gap:6px; }
  .cs-btn{ padding:7px 11px; font-size:11px; }
  /* Ekleme CTA'sı renk ve paket ızgaralarının altında kaybolmasın: mobilde
     ekranın altında yüzen görünür bir bar olarak sabit durur. */
  .wiz-add{
    position:fixed; bottom:14px; left:var(--pad); right:var(--pad); z-index:20;
    width:auto; margin:0 auto;
    box-shadow:0 8px 28px rgba(0,0,0,.7), 0 0 0 1px rgba(223,231,224,.12);
  }
}

@media (max-width:560px){
  .wiz-tracker{ gap:8px; margin-bottom:24px; }
  .wiz-step span{ display:none; }
  .wiz-step.is-current span{ display:inline; }
}


/* ============================================ configurator · house style
   The configurator arrived carrying its own design system: a #f4f4f0 card
   with white tiles, 20px corners, drop shadows, a graph-paper ground and a
   red of its own (#d82720). Dropped into this page it read as a light island
   pasted onto a dark document — the one place on the site that looked like it
   came from somewhere else.

   Only the surface is restated here. Every grid, size and spacing rule above
   is left exactly as it is, so this re-skins without re-laying-out, and it
   survives the block above being rewritten.

   The house grammar it joins: ink ground, hairline rules instead of shadows,
   one vermilion, and the documented radius split — structure and fields
   sharp, interactive controls pill. */
.configurator-card{
  border:1px solid var(--line-soft); border-radius:0;
  background:var(--ink); color:var(--bone);
  box-shadow:none;
}
.configurator-stage{
  background:var(--ink);          /* no graph paper; the page has no such texture */
}
.configurator-stage-head h3{
  color:var(--bone); font-weight:500; letter-spacing:-.012em;
  text-transform:uppercase;
}
.configurator-stage-head p{ color:var(--muted); }

/* Fields are sharp and transparent, like the checkout's. */
.config-search input{
  border:1px solid var(--line-soft); border-radius:0;
  background:transparent; color:var(--bone); box-shadow:none;
}
.config-search input::placeholder{ color:var(--muted); }
.config-search input:focus{
  border-color:var(--vermilion); box-shadow:none;
  outline:1px solid var(--vermilion); outline-offset:2px;
}

/* The tiles become the page's hairline cells rather than floating cards. */
.config-brand-card,
.config-model-card{
  border:1px solid var(--line-soft); border-radius:0;
  background:var(--ink-2); color:var(--bone-dim); box-shadow:none;
}
.config-brand-card:hover,
.config-model-card:hover{
  transform:none; border-color:rgba(223,231,224,.3); box-shadow:none; color:var(--bone);
}
.config-brand-card.is-selected,
.config-brand-card[aria-pressed="true"],
.config-model-card:focus-visible,
.config-brand-card:focus-visible{
  border-color:var(--vermilion); box-shadow:none; color:var(--bone);
  outline:none;
}
.config-brand-media,
.config-model-media{ background:transparent; border-radius:0; }
/* brightness(0) painted the marks black — invisible here. Invert lands them
   on the page's bone, and they lift to full strength on hover. */
.config-brand-media img,
.config-model-media img.is-brand-logo,
.config-selected-logo img{
  filter:brightness(0) invert(1); opacity:.62;
  transition:opacity .2s var(--ease-out);
}
.config-brand-card:hover .config-brand-media img,
.config-brand-card[aria-pressed="true"] .config-brand-media img{ opacity:1; }
.config-brand-fallback,
.config-model-fallback{ border-color:var(--line-soft); color:var(--muted); }

.config-empty-state{
  border:1px solid var(--line-soft); border-radius:0;
  background:transparent; color:var(--muted);
}
.config-missing-action,
.config-family-back{ color:var(--bone-dim); }
.config-missing-action:hover,
.config-family-back:hover{ color:var(--vermilion); }

.config-selected-vehicle{
  border:1px solid var(--line-soft); border-radius:0; background:var(--ink-2);
}
.config-selected-logo{ background:transparent; border-radius:0; color:var(--muted); }
.config-selected-logo img{ background:transparent; }
.config-selected-vehicle small{ color:var(--muted); font-weight:500; }
.config-selected-vehicle b{ color:var(--bone); font-weight:400; }
.config-selected-vehicle button{ color:var(--vermilion); font-weight:500; }

.config-model-copy b{ color:var(--bone); font-weight:400; }
.config-model-copy small{ color:var(--muted); }

.config-color-copy b{ color:var(--bone-dim); font-weight:400; }
.config-color-summary{ border-top-color:var(--line-soft); color:var(--muted); }
.config-color-summary b{ color:var(--bone); font-weight:400; }

/* — configurator step 02, the colour stage.
   The preview art is a 1000px transparent cut-out, so the plate under it can
   go to ink without the mats landing on a bright rectangle. The white radial
   that lit them becomes a dark one doing the same job from the other side. */
.configurator-color-layout{ background:var(--ink); }
.config-preview-card{
  background:
    radial-gradient(circle at 50% 45%, rgba(223,231,224,.09), rgba(223,231,224,.02) 54%, transparent 72%),
    var(--ink-2);
}
.config-preview-card header h3{
  color:var(--bone); font-weight:500; letter-spacing:-.012em; text-transform:uppercase;
}
.config-preview-card header p{ color:var(--muted); }
.config-preview-card figcaption{ border-top-color:var(--line-soft); }
.config-preview-card figcaption span{
  border:1px solid var(--line-soft); border-radius:0; background:transparent;
}
.config-preview-card figcaption small{ color:var(--muted); font-weight:500; }
.config-preview-card figcaption b{ color:var(--bone); font-weight:400; }
.config-preview-error{
  border:1px solid rgba(224,35,28,.4); border-radius:0;
  background:rgba(5,7,10,.92); color:var(--vermilion);
}
.configurator-colors{ border-left-color:var(--line-soft); background:var(--ink); }
/* Written with the wrapper because the light rule is scoped the same way and
   would otherwise win on order. */
.configurator-colors .config-selected-vehicle{ background:var(--ink-2); }
.config-color-group legend{
  color:var(--bone-dim); font-weight:500; letter-spacing:.22em;
}
.config-color-option{
  border:1px solid var(--line-soft); border-radius:0;
  background:var(--ink-2); color:var(--bone-dim);
}
.config-color-option:hover{ transform:none; border-color:rgba(223,231,224,.3); color:var(--bone); }
.config-color-option.active{
  border-color:var(--wz-pick); box-shadow:0 0 0 1px var(--wz-pick); color:var(--bone);
}
.config-color-option.active::after{ background:var(--wz-pick); color:#0a0e12; font-weight:700; }
.config-color-strip{ background:transparent; border-radius:0; }
.config-color-copy small{ color:var(--muted); }

/* — the manual-entry actions, the last light pair. They only appear once
     "Aracım listede yok" is opened, which is why they survived the sweep. */
.config-manual-actions button{
  border:1px solid var(--line-soft); border-radius:999px;
  background:transparent; color:var(--bone-dim); font-weight:500;
}
.config-manual-actions button:hover{ border-color:rgba(223,231,224,.34); color:var(--bone); }
.config-manual-actions #configManualContinue{
  border-color:var(--vermilion); background:var(--vermilion); color:#fff;
}
.config-manual-actions #configManualContinue:hover{ background:#f42720; border-color:#f42720; }
.config-manual-stage input,
.config-manual-stage textarea{
  border:1px solid var(--line-soft); border-radius:0;
  background:transparent; color:var(--bone);
}
.config-manual-stage input::placeholder{ color:var(--muted); }

/* ============================================================= commerce polish
   Modern e-commerce animations, social proof, mobile shop bar, footer grid. */
/* Şerit sayfayı takip etmez. `fixed` iken nav'ın hemen altına çakılıydı ve
   aşağı inen her bölümün — hero başlığının, ürün kartlarının, footer'ın —
   üzerinden geçiyordu: altı iddianın sonsuz döngüsü, sayfanın tamamı boyunca
   okunan metnin üstünde. Absolute olarak yalnızca hero'nun tepesinde durur ve
   ilk ekranla birlikte yukarı kayar. */
.social-ticker{
  position:absolute; top:var(--nav-h); left:0; width:var(--vw,100%); z-index:49;
  height:32px; overflow:hidden; pointer-events:none;
  border-bottom:1px solid var(--line-soft);
  background:rgba(5,7,10,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.social-ticker-track{
  display:flex; align-items:center; gap:clamp(28px,4vw,56px);
  height:100%; width:max-content; padding:0 var(--pad);
  animation:tickerScroll 38s linear infinite;
}
.social-ticker-track span{
  flex:0 0 auto; font-size:9px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-dim); white-space:nowrap;
}
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.hero-top{ padding-top:calc(var(--nav-h) + 32px + clamp(12px,2.6vh,34px)); }

.hero-scroll-cue{
  position:absolute; left:50%; bottom:clamp(18px,3.5vh,36px); z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:9px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.hero-scroll-cue svg{
  animation:scrollBounce 2.2s var(--ease-io) infinite;
  opacity:.85;
}
.hero-scroll-cue:hover{ color:var(--bone); }
.hero-scroll-cue.is-hidden{ opacity:0; transform:translate(-50%,12px); pointer-events:none; }
@keyframes scrollBounce{
  0%,100%{ transform:translateY(0); opacity:.7; }
  50%{ transform:translateY(6px); opacity:1; }
}

.trust-card{
  transition:transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
  transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}
.trust-card:hover{
  transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px);
  background:rgba(223,231,224,.03);
  box-shadow:0 16px 40px -20px rgba(224,35,28,.25);
}
.trust-icon svg{ transition:transform .35s var(--ease-out), filter .35s; }
.trust-card:hover .trust-icon svg{ transform:scale(1.08); filter:drop-shadow(0 0 8px rgba(224,35,28,.35)); }

.rev-card{
  position:relative; padding:22px clamp(16px,2vw,26px) 0 0;
  transition:color .3s var(--ease-out), transform .3s var(--ease-out);
}
.rev-card::before{
  content:'"'; position:absolute; top:0; left:0;
  font-size:42px; line-height:1; color:rgba(224,35,28,.22); font-family:Georgia,serif;
}
.rev-card:hover{ color:var(--bone); transform:translateY(-2px); }
.rev-who{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.rev-who b{ margin-top:0 !important; }
.rev-avatar{
  flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(224,35,28,.35);
  background:linear-gradient(145deg, rgba(224,35,28,.22), rgba(224,35,28,.05));
  color:var(--bone); font-size:10px; font-weight:600; letter-spacing:.06em;
}
.rev-card:hover .rev-avatar{
  border-color:var(--vermilion);
  box-shadow:0 0 12px -2px rgba(224,35,28,.4);
  transition:border-color .3s, box-shadow .3s;
}

/* — SSS akordeonu */
.faq{ margin-top:clamp(44px,7vh,80px); border-top:1px solid var(--line-soft); padding-top:clamp(26px,4vh,44px); }
/* Eyebrow başlığın üstünde. Yan yana durduklarında başlık, bölümün geri
   kalanından ~200 piksel içeride başlıyordu: aynı bölümde biri "04 — Güvence"
   üstte, biri yanda iki farklı eyebrow düzeni ve iki sol kenar vardı. */
.faq-head{ margin-bottom:clamp(18px,2.6vh,30px); }
.faq-head .eyebrow{ margin-bottom:14px; }
.faq-head .eyebrow{ display:flex; align-items:center; gap:9px; }
.faq-head .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--vermilion); box-shadow:0 0 10px var(--vermilion); }
.faq-head h3{ margin:0; font-size:clamp(18px,1.9vw,26px); font-weight:400; letter-spacing:-.01em; max-width:none; }
.faq-list{ border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(16px,2vh,22px) 4px; cursor:pointer; list-style:none;
  font-size:clamp(14px,1.2vw,16px); font-weight:400; color:var(--bone-dim);
  transition:color .25s var(--ease-out), padding-left .35s var(--ease-out);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--bone); padding-left:12px; }
.faq-item[open] summary{ color:var(--bone); }
.faq-item summary:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }
.faq-chev{
  flex:0 0 auto; position:relative; width:22px; height:22px;
  border:1px solid var(--line); border-radius:50%;
  transition:transform .4s var(--ease-out), border-color .3s, background .3s;
}
.faq-chev::before,.faq-chev::after{
  content:''; position:absolute; top:50%; left:50%; background:currentColor;
  transition:transform .35s var(--ease-out), opacity .3s;
}
.faq-chev::before{ width:10px; height:1.4px; transform:translate(-50%,-50%); }
.faq-chev::after{ width:1.4px; height:10px; transform:translate(-50%,-50%); }
.faq-item[open] .faq-chev{ transform:rotate(135deg); border-color:var(--vermilion); background:rgba(224,35,28,.12); }
.faq-item summary:hover .faq-chev{ border-color:rgba(223,231,224,.4); }
/* .fin p'nin 26px üst marjı ve 44ch sınırı gövdeyi bozmasın diye yerelde eziliyor. */
.faq-body{ overflow:hidden; }
.faq-body p{
  margin:0 0 clamp(16px,2vh,22px); padding:0 4px; max-width:72ch;
  font-size:13px; line-height:1.7; color:#9aa5a0;
}
.faq-item[open] .faq-body p{ animation:faqReveal .45s var(--ease-out) both; }
@keyframes faqReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

.craft-step{
  transition:transform .35s var(--ease-out), border-color .35s;
  border-radius:8px; padding:4px 8px 4px 0;
}
.craft-step:hover{ transform:translateX(6px); }
.craft-step:hover .craft-num{ color:var(--vermilion); }

.card{
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) !important;
}
.card.rv-in{
  transition:opacity .9s var(--ease-out), scale .55s var(--ease-out), transform .35s var(--ease-out) !important;
}

.les-add{ overflow:hidden; }
.les-add::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%), rgba(255,255,255,.35), transparent 58%);
  opacity:0; transform:scale(.4); transition:opacity .35s, transform .45s var(--ease-out);
  pointer-events:none;
}
.les-add:active::after{ opacity:1; transform:scale(1.6); transition:opacity .12s, transform .35s; }

.foot-grid{ margin-top:clamp(36px,6vh,64px); }
.foot-brand-mark{ display:inline-flex; align-items:center; gap:12px; }
.foot-brand-mark .logo-img{ height:clamp(26px,2.2vw,32px); width:auto; }
.foot-brand-mark b{
  font-size:15px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone);
}
.foot-pay{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin-top:clamp(28px,4vh,44px); padding-top:20px; border-top:1px solid var(--line-soft);
}
.foot-pay-item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.foot-pay-item svg{ width:18px; height:18px; opacity:.75; }

.cart-fab.has-items{
  animation:fabPulse 2.8s var(--ease-io) infinite;
}
@keyframes fabPulse{
  0%,100%{ box-shadow:0 8px 28px rgba(0,0,0,.45); }
  50%{ box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 6px rgba(224,35,28,.18); }
}

.toast{
  border-radius:999px; font-weight:500; letter-spacing:.04em;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(10,14,18,.92);
}
.toast.show{
  animation:toastPop .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastPop{
  0%{ opacity:0; transform:translate(-50%,16px) scale(.92); }
  100%{ opacity:1; transform:translate(-50%,0) scale(1); }
}

.mobile-shop-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:88;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(5,7,10,.94);
  border-top:1px solid var(--line-soft);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  gap:10px; align-items:center;
}
.mobile-shop-cta{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 20px; border-radius:999px;
  background:var(--vermilion); color:#fff;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 6px 20px -6px rgba(224,35,28,.5);
  transition:transform .16s var(--ease-out), background .18s;
}
.mobile-shop-cta:active{ transform:scale(.97); }
.mobile-shop-cart{
  position:relative; flex:0 0 auto; width:48px; height:48px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--bone); background:var(--ink-2);
}
.mobile-shop-count{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px;
  display:grid; place-items:center; padding:0 5px; border-radius:999px;
  background:var(--vermilion); color:#fff; font-size:10px; font-weight:600;
  border:2px solid var(--ink);
}
.mobile-shop-count[hidden]{ display:none; }

/* — scroll ilerleme çubuğu: nav'ın hemen üstünde 2px'lik hat */
.scroll-progress{
  position:fixed; top:0; left:0; width:var(--vw,100%); height:2px; z-index:96;
  background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--vermilion), var(--ember));
  transform-origin:left; transform:scaleX(var(--scroll-p,0));
  box-shadow:0 0 8px rgba(224,35,28,.5);
}

/* — yukarı dön butonu: sepet FAB'ının sol simetriği */
.back-top{
  position:fixed; left:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:87;
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line); color:var(--bone-dim);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out),
    background .2s, border-color .2s, color .2s;
}
.back-top.show{ opacity:1; transform:none; pointer-events:auto; }
.back-top:hover{ background:rgba(223,231,224,.08); border-color:rgba(223,231,224,.34); color:var(--bone); }
.back-top:active{ transform:scale(.94); }
.back-top:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }
body.cart-locked .back-top{ display:none; }

/* — boş sepet: yönlendiren durum */
.cart-empty{ display:grid; justify-items:center; gap:12px; padding:32px 0 26px; }
.cart-empty svg{ color:var(--muted); opacity:.55; }
.cart-empty p{ margin:0; font-size:13px; color:var(--muted); }
.cart-empty-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:11px 22px; border-radius:999px;
  background:var(--vermilion); color:#fff;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:background .18s var(--ease-out), transform .16s var(--ease-out);
}
.cart-empty-cta:hover{ background:#f42720; transform:translateY(-1px); }
.cart-empty-cta:active{ transform:scale(.97); }

/* — sepet çapraz satış önerileri */
.cart-upsell{ padding:16px 0 4px; border-top:1px solid var(--line-soft); }
.cart-upsell[hidden]{ display:none; }
.cart-upsell-label{
  display:block; margin-bottom:10px;
  font-size:9px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.cart-upsell-list{ display:grid; gap:8px; }
.cart-upsell-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border:1px solid var(--line-soft); border-radius:10px;
  background:rgba(223,231,224,.02); color:var(--bone-dim); font-size:12px;
  cursor:pointer;
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out),
    color .2s var(--ease-out), transform .16s var(--ease-out);
}
.cart-upsell-item:hover{
  border-color:rgba(224,35,28,.45); background:rgba(224,35,28,.05);
  color:var(--bone); transform:translateY(-1px);
}
.cart-upsell-item:active{ transform:scale(.98); }
.cart-upsell-item:focus-visible{ outline:1px solid var(--bone); outline-offset:2px; }
.cu-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cu-price{ flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--bone); }
.cu-plus{
  flex:0 0 auto; display:inline-grid; place-items:center; width:22px; height:22px;
  border:1px solid var(--line); border-radius:50%; font-size:13px; line-height:1;
  color:var(--bone-dim); transition:background .2s, border-color .2s, color .2s;
}
.cart-upsell-item:hover .cu-plus{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; }

/* — ürün hızlı görünüm modalı */
.qv-backdrop{
  position:fixed; inset:0; z-index:85; background:rgba(2,4,6,.66);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.qv-backdrop.show{ opacity:1; pointer-events:auto; }
body.qv-locked{ overflow:hidden; height:100vh; }
body.qv-locked .page{ z-index:62; }
body.qv-locked .cart-fab,
body.qv-locked .back-top,
body.qv-locked .mobile-shop-bar{ display:none; }
.qv{
  position:fixed; left:50%; top:50%; z-index:89;
  width:min(920px,94vw); max-height:88vh; overflow-y:auto;
  transform:translate(-50%,-50%);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--ink-2); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  animation:qvIn .38s var(--ease-out);
}
.qv[hidden]{ display:none; }
@keyframes qvIn{
  from{ opacity:0; transform:translate(-50%,calc(-50% + 18px)) scale(.97); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.qv-close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:rgba(5,7,10,.72); border:1px solid var(--line); color:var(--bone-dim);
  font-size:20px; line-height:1;
  transition:color .2s, border-color .2s, transform .16s var(--ease-out);
}
.qv-close:hover{ color:var(--vermilion); border-color:rgba(224,35,28,.5); }
.qv-close:active{ transform:scale(.92); }
.qv-media{ min-width:0; border-right:1px solid var(--line-soft); }
.qv-media .les-media{ border-bottom:0; height:100%; }
.qv-media .les-stage{ aspect-ratio:auto; min-height:100%; }
.qv-body{
  min-width:0; display:flex; flex-direction:column; gap:12px;
  padding:clamp(24px,3vw,40px);
}
.qv-kicker{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vermilion);
}
.qv h3{ margin:0; font-size:clamp(20px,2.2vw,30px); font-weight:400; letter-spacing:-.01em; }
.qv-desc{ margin:0; font-size:13px; line-height:1.7; color:#9aa5a0; }
.qv-foot{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.qv-price{
  font-size:clamp(20px,2vw,26px); font-weight:300; letter-spacing:-.02em;
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.qv-add{ padding:12px 24px; }
@media (max-width:768px){
  .qv{
    left:0; right:0; top:auto; bottom:0; transform:none;
    width:100%; max-height:88vh; border-radius:16px 16px 0 0;
    grid-template-columns:1fr;
    animation:qvUp .38s var(--ease-out);
  }
  .qv-media{ border-right:0; border-bottom:1px solid var(--line-soft); }
  .qv-media .les-stage{ aspect-ratio:16/10; min-height:0; }
  @keyframes qvUp{
    from{ opacity:0; transform:translateY(40px); }
    to{ opacity:1; transform:none; }
  }
}
@media (prefers-reduced-motion:reduce){
  .qv{ animation:none; }
}

.wiz-enter{
  animation:wizEnter .7s var(--ease-out) both;
}
@keyframes wizEnter{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.wiz-card-brand{
  transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}

@media (max-width:820px){
  .mobile-shop-bar{ display:flex; }
  body:not(.cart-locked) .cart-fab{ bottom:calc(78px + env(safe-area-inset-bottom,0px)); }
  body:not(.cart-locked) .back-top{ bottom:calc(78px + env(safe-area-inset-bottom,0px)); width:40px; height:40px; }
  .toast{ bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
  .hero-scroll-cue{ display:none; }
  .social-ticker{ height:28px; }
  .hero-top{ padding-top:calc(var(--nav-h) + 28px + clamp(12px,2.6vh,34px)); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .foot-brand{ grid-column:1 / -1; }
  /* Sabit alışveriş çubuğu sayfanın son satırının üstünde duruyordu — telif
     satırı ve son "Sepete Ekle" düğmesi kaydırma bitse de altında kalıyordu. */
  .foot{ padding-bottom:calc(clamp(26px,4vh,40px) + 62px + env(safe-area-inset-bottom,0px)); }
}

@media (prefers-reduced-motion:reduce){
  .social-ticker-track{ animation:none; }
  .hero-scroll-cue svg{ animation:none; }
  .cart-fab.has-items{ animation:none; }
  .wiz-enter{ animation:none; }
  .faq-item[open] .faq-body p{ animation:none; }
}