@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
   BAŞARI BÜRO MAKİNELERİ
   Design language: "prepress" — neutral grayscale press sheet, CMYK process
   accents lifted straight from the logo, registration marks, hairline rules,
   monospace plate annotations. Nothing decorative that isn't from a print shop.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── tokens ───────────────────────────── */
:root{
  /* paper stock */
  --paper:      #FAFAFA;
  --panel:      #F1F1F0;
  /* matched to the sequence frames' own near-white backdrop so the machine
     floats on the page with no frame and no halo around it */
  --stage-mid:  #FAFAFA;
  --stage-edge: #F4F4F4;

  /* ink */
  --ink:    #121214;
  --ink-2:  #56565C;
  /* 4.74:1 against every background it lands on (paper, panel, stage).
     The previous #8C8C93 measured 2.96–3.20:1 and failed WCAG AA on all three. */
  --ink-3:  #6A6A72;
  --on-ink: #F4F4F5;

  /* process colours — from the logo */
  --c: #00ADEE;
  --m: #EC248F;
  --y: #FFCE03;
  --k: #121214;
  --wa: #25D366;

  --rule:   rgba(18,18,20,.13);
  --rule-2: rgba(18,18,20,.07);
  --rule-i: rgba(244,244,245,.15);

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --nav-h: 72px;

  --e:    cubic-bezier(.22,.61,.36,1);
  --e-io: cubic-bezier(.65,0,.35,1);
}

/* ───────────────────────────── reset ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* a display rule on a class beats the hidden attribute's UA default, so any
   element carrying [hidden] has to be forced back out of flow explicitly */
[hidden]{display:none !important}
body,h1,h2,h3,h4,p,dl,dd,figure,ol,ul,fieldset,legend{margin:0;padding:0}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
img,svg,canvas,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input{font:inherit}

body{
  font-family:var(--sans);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Paper grain. Deliberately no mix-blend-mode: a blended full-viewport fixed
   layer forces the whole page through one compositing pass and costs frames
   on every scroll. A plain low-opacity layer is uploaded to the GPU once. */
body::before{
  content:'';position:fixed;inset:0;z-index:400;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.035;
}

.skip{
  position:fixed;top:8px;left:8px;z-index:900;padding:10px 16px;
  background:var(--ink);color:var(--on-ink);font:500 12px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;transform:translateY(-160%);
  transition:transform .25s var(--e);
}
.skip:focus-visible{transform:none}

:focus-visible{outline:2px solid var(--c);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ─────────────────────── typographic primitives ─────────────────────── */
.eyebrow{
  font:500 clamp(10px,.72vw,11.5px)/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:.6em;
}
.eyebrow .reg{width:11px;height:11px;flex:none;fill:none;stroke:var(--m);stroke-width:1.1}

.h-big{
  font-variation-settings:'wdth' 112,'wght' 760;
  font-size:clamp(2.3rem,5.4vw,4.55rem);
  line-height:.95;letter-spacing:-.036em;
}
.h-mid{
  font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.75rem,3.4vw,2.9rem);
  line-height:1.02;letter-spacing:-.028em;
}
.h-big em,.h-mid em{font-style:normal;color:var(--ink-2)}

.lead{
  font-size:clamp(1rem,1.22vw,1.18rem);line-height:1.6;
  color:var(--ink-2);max-width:56ch;
}

.sec-head{margin-bottom:clamp(44px,5.4vw,84px);display:grid;gap:18px;max-width:820px}
.sec-head--tight{margin-bottom:clamp(32px,3.6vw,52px)}

/* registration marks */
.reg-mark{
  position:absolute;width:13px;height:13px;border:1px solid currentColor;
  border-radius:50%;opacity:.32;pointer-events:none;
}
.reg-mark::before,.reg-mark::after{content:'';position:absolute;background:currentColor}
.reg-mark::before{left:50%;top:-7px;bottom:-7px;width:1px;margin-left:-.5px}
.reg-mark::after{top:50%;left:-7px;right:-7px;height:1px;margin-top:-.5px}
.reg-mark.tl{top:26px;left:26px}.reg-mark.tr{top:26px;right:26px}
.reg-mark.bl{bottom:26px;left:26px}.reg-mark.br{bottom:26px;right:26px}

/* CMYK press strip */
.foot__bar{display:flex;height:4px;width:132px}
.foot__bar i{flex:1}
.c,.foot__bar .c,.bar .c{background:var(--c)}
.m,.foot__bar .m,.bar .m{background:var(--m)}
.y,.foot__bar .y,.bar .y{background:var(--y)}
.k,.bar .k{background:var(--k)}
/* Reversed strip: on the ink-black footer a black K patch is invisible, so it
   shows the paper reference instead — which is how a press bar reads on a
   dark stock anyway. */
.foot__bar .k{background:var(--on-ink)}

/* tags */
.tag{
  font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  padding:5px 9px;border:1px solid currentColor;white-space:nowrap;
}
.tag--in{color:#0a86b8}
.tag--out{color:var(--m)}

/* ───────────────────────────── buttons ───────────────────────────── */
.btn{
  --bg:var(--ink);--fg:var(--on-ink);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 22px;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);
  font:500 13.5px/1 var(--sans);font-variation-settings:'wdth' 100,'wght' 560;
  letter-spacing:-.005em;position:relative;overflow:hidden;
  transition:color .3s var(--e),background-color .3s var(--e),border-color .3s var(--e);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .34s var(--e)}
.btn::after{
  content:'';position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity .3s var(--e);
}
.btn:hover svg{transform:translateX(3px)}
.btn--ink:hover{--bg:#000;--bd:#000}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--rule)}
.btn--ghost:hover{--bd:var(--ink)}
.btn--ghost svg{width:16px;height:16px}
.btn--ghost:hover svg{transform:none}
.btn--paper{--bg:var(--on-ink);--fg:var(--ink);--bd:var(--on-ink)}
.btn--paper:hover{--bg:#fff;--bd:#fff}
.btn--wa{--bg:var(--wa);--fg:#04301A;--bd:var(--wa)}
.btn--wa:hover{--bg:#1FBE5B;--bd:#1FBE5B}
.btn--full{width:100%}

/* ───────────────────────────── nav ───────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:300;
  background:transparent;transition:background-color .4s var(--e),backdrop-filter .4s var(--e),border-color .4s var(--e);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(250,250,250,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--rule-2);
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:var(--nav-h);display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}
.nav__brand{display:flex;align-items:center}
.nav__brand img{width:auto;height:clamp(42px,3.4vw,50px);object-fit:contain}
.nav__links{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav__links a{
  position:relative;display:flex;align-items:baseline;gap:.5em;
  font:500 12.5px/1 var(--sans);font-variation-settings:'wdth' 100,'wght' 520;
  padding:8px 0;color:var(--ink-2);transition:color .25s var(--e);
}
.nav__links a .ix{font:500 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);opacity:.7}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .34s var(--e);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-here::after{transform:none}
.nav__links a.is-here{color:var(--ink)}
.nav__links a.is-here .ix{color:var(--m);opacity:1}

.nav__end{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav__links + .nav__end{margin-left:0}
.nav__tel{
  display:flex;align-items:center;gap:7px;
  font:500 12.5px/1 var(--mono);letter-spacing:-.01em;color:var(--ink-2);
  transition:color .25s var(--e);
}
.nav__tel svg{width:14px;height:14px}
.nav__tel:hover{color:var(--ink)}
.nav__cta{padding:11px 18px;font-size:12.5px}

.nav__burger{display:none;width:38px;height:38px;place-items:center;gap:5px}
.nav__burger i{display:block;width:19px;height:1.5px;background:var(--ink);transition:transform .3s var(--e),opacity .3s var(--e)}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* CMYK scroll progress strip */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:flex;opacity:0;transition:opacity .4s var(--e)}
.nav.is-stuck .prog{opacity:1}
.prog i{flex:1;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.prog .c{background:var(--c)}.prog .m{background:var(--m)}
.prog .y{background:var(--y)}.prog .k{background:var(--k)}

/* mobile menu */
.mobmenu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:299;
  background:rgba(250,250,250,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--rule);padding:8px var(--gut) 22px;display:grid;
}
.mobmenu[hidden]{display:none}
.mobmenu a{
  display:flex;align-items:baseline;gap:.8em;padding:15px 0;
  border-bottom:1px solid var(--rule-2);
  font-variation-settings:'wdth' 104,'wght' 560;font-size:1.05rem;
}
.mobmenu a .ix{font:500 10px/1 var(--mono);color:var(--m);letter-spacing:.1em}
.mobmenu__tel{font-family:var(--mono);font-size:.95rem !important;border-bottom:0 !important;color:var(--ink-2)}

/* ═══════════════════════ §01 TEARDOWN ═══════════════════════ */
/* ── The act is a three-row grid: head / machine / caption. The machine gets a
      fixed safe box between the other two rows, so type can never land on it.
      The frames carry a baked-in grey backdrop, so the whole section sits on a
      gradient tuned to match — the canvas rectangle can never show a seam. ── */
.td{position:relative;height:760vh;background:var(--stage-edge)}
.td__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  row-gap:clamp(10px,2.2vh,28px);
  padding:calc(var(--nav-h) + 2.2vh) 0 0;
  background:radial-gradient(115% 88% at 50% 44%, var(--stage-mid) 0%, var(--stage-edge) 100%);
}
.td__pin > *{position:relative;z-index:1}

/* halftone field — a paper motif that burns off as the teardown begins */
/* held at a constant opacity on purpose — animating it would repaint a
   full-viewport pattern on every scrolled frame */
.td__pin::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--ink) .9px,transparent .9px);
  background-size:24px 24px;opacity:.035;
}

/* Rows are pinned explicitly. Auto-placement would otherwise shift everything
   up by one whenever the head is display:none (short screens), handing the
   caption the 1fr row — where it collapses to nothing behind the dock. */
.td__head {grid-row:1}
.td__stage{grid-row:2}
.cap      {grid-row:3}

/* ROW 1 — section head */
.td__head{
  display:grid;gap:7px;justify-items:center;text-align:center;
  padding-inline:var(--gut);pointer-events:none;
  opacity:var(--tho,0);transform:translate3d(0,var(--thy,12px),0);
  will-change:transform,opacity;
}
.td__head h2{
  font-variation-settings:'wdth' 110,'wght' 720;font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.85rem);line-height:1;letter-spacing:-.028em;
}

/* ROW 2 — the machine, inside its safe box */
.td__stage{
  display:grid;place-items:center;min-height:0;
  transform:translate3d(var(--sx,0),var(--sy,0),0) scale(var(--ss,1));
  opacity:var(--stg-o,1);will-change:transform,opacity;
}
/* No frame, no border, no shadow: the machine sits directly on a stage tuned to
   its own backdrop, with the last pixels feathered away so the drift between
   frames never resolves into a visible rectangle.
   Width and height are written by JS (see sizePlate) rather than derived from
   aspect-ratio — pairing aspect-ratio with max-height lets the box go off-ratio
   the moment height is the binding constraint, and object-fit then crops. */
/* The side crop and the edge feather are the same thing: the hero slices the
   wide, empty studio backdrop off the machine so it reads bigger and sits in a
   tighter pool of light, then the slice opens out to the full frame as the
   teardown begins. Driving the mask stops (rather than clip-path) keeps that
   edge soft the whole way — a hard clip line was visible against the page.
   Resting values stay inside the tightest margin the exploded frames leave
   (~4.5% horizontal, ~9% vertical) so no outer part ever fades. */
.td__box{
  position:relative;
  /* pre-JS fallback size so the first paint is not a zero-height box that
     resizes a frame later — that shift is what Cumulative Layout Shift counts.
     main.js replaces both values with exact 16:9 pixels on its first measure. */
  width:min(92vw,1180px);aspect-ratio:16/9;max-height:100%;
  --m0:0%; --m1:3.4%; --m2:96.6%; --m3:100%;
  -webkit-mask-image:
    linear-gradient(to right ,transparent var(--m0),#000 var(--m1),#000 var(--m2),transparent var(--m3)),
    linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:
    linear-gradient(to right ,transparent var(--m0),#000 var(--m1),#000 var(--m2),transparent var(--m3)),
    linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.td__box > *{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;   /* belt and braces: never crop, whatever the box does */
}
/* promoted up front: an image sitting at opacity 0 is not rasterised until it
   first becomes visible, and paying for that texture mid-scroll costs a run of
   frames right at the closing transition */
.still{opacity:var(--o,0);will-change:opacity}
#still-a{--o:1}

/* ROW 3 — caption bar: the only place an annotation ever appears */
.cap{
  padding:0 var(--gut) clamp(14px,2.2vh,24px);
  opacity:var(--capo,0);will-change:opacity;
}
.cap__rail{position:relative;height:1px;background:var(--rule);margin-bottom:clamp(12px,1.6vh,18px)}
.cap__rail i{position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);background:var(--m)}
.cap__in{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.2vw,32px);align-items:start;
}
.cap__n{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--m);padding-top:5px}
.cap__txt{max-width:64ch;opacity:var(--txo,1);transition:opacity .26s var(--e)}
.cap__txt h3{
  font-variation-settings:'wdth' 106,'wght' 650;font-weight:600;
  font-size:clamp(.98rem,1.5vw,1.2rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:5px;
}
.cap__txt p{font-size:.845rem;line-height:1.5;color:var(--ink-2)}

/* the six units stay in the DOM for search and for reduced-motion readers */
.td__parts{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* OVERLAY — hero */
.hero{
  position:absolute;inset:0;z-index:3;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:grid;align-content:center;gap:clamp(16px,2vw,24px);
  transform:translate3d(0,calc(var(--hbase,0px) + var(--hy,0px)),0);opacity:var(--ho,1);
  will-change:transform,opacity;
}
.hero > *{max-width:560px}   /* mirrored by TEXT_CAP in main.js */
/* sized so both lines stay on one line each beside the machine plate —
   two clean lines read far stronger than three ragged ones */
.hero__h1{
  font-variation-settings:'wdth' 114,'wght' 800;font-weight:800;
  font-size:clamp(2.3rem,4.8vw,4.4rem);line-height:.92;letter-spacing:-.042em;
  display:grid;gap:.02em;
}
/* the press strip sits on its own line under the headline — inside it, it ate
   the width the second line needed and read as a second, competing bar */
.hero .bar{display:flex;height:5px;width:clamp(72px,8vw,116px);margin-block:-8px 0}
.hero .bar b{flex:1}
.hero__lead{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--ink-2);max-width:50ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;max-width:none}

.hero__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:clamp(10px,2vw,26px);max-width:560px;
  border-top:1px solid var(--rule);
}
.hero__stats > div{padding:32px 26px 10px 0;border-right:1px solid var(--rule-2)}
.hero__stats > div:last-child{border-right:0}
.hero__stats dt{
  font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.7rem,2.7vw,2.3rem);line-height:1;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:.45em;   /* was .22em — unit crowded the numeral */
}
.hero__stats dt small{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m)}
.hero__stats dd{margin-top:12px;font-size:.8rem;line-height:1.5;color:var(--ink-3);max-width:22ch}

/* OVERLAY — outro. No scrim over the machine: the plate itself fades back
   (see --stg-o) so the closing line lands on a clean stage instead of on a
   washed-out photograph. */
.td__outro{
  position:absolute;z-index:5;inset:0;display:grid;place-content:center;
  justify-items:center;text-align:center;gap:20px;padding-inline:var(--gut);
  opacity:var(--oo,0);transform:translate3d(0,var(--oy,20px),0);
  pointer-events:none;will-change:transform,opacity;
}
.td__outro.is-on{pointer-events:auto}
.td__outro h2{
  font-variation-settings:'wdth' 112,'wght' 760;font-weight:800;
  font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:.98;letter-spacing:-.035em;
}

/* — scroll cue — */
.cue{
  position:absolute;z-index:6;left:50%;bottom:clamp(20px,3.4vh,34px);
  transform:translateX(-50%);display:flex;align-items:center;gap:9px;
  font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);opacity:var(--cue-o,1);transition:opacity .4s var(--e);
}
.cue svg{width:11px;height:20px;animation:nudge 2.1s var(--e-io) infinite}
@keyframes nudge{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(4px);opacity:1}}

/* ═══════════════════════ §02 KAPSAM (black act) ═══════════════════════ */
.scope{
  position:relative;background:var(--ink);color:var(--on-ink);
  padding:clamp(80px,10vw,150px) 0;overflow:hidden;
}
.scope::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,244,245,.9) .9px,transparent .9px);
  background-size:26px 26px;opacity:.05;
}
.scope .reg-mark{color:var(--on-ink)}
.scope .eyebrow{color:rgba(244,244,245,.55)}
.scope .lead{color:rgba(244,244,245,.62)}
.scope .h-big em{color:var(--c)}

.scope__grid{
  position:relative;display:grid;gap:clamp(44px,5vw,84px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start;
}
.scope__say{display:grid;gap:22px;justify-items:start}

.matrix{border-top:1px solid var(--rule-i)}
.matrix__hd{
  display:flex;justify-content:space-between;padding:10px 0;
  font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,244,245,.55);border-bottom:1px solid var(--rule-i);
}
.matrix__row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--rule-i);
  font-size:.93rem;color:rgba(244,244,245,.9);
  transition:color .3s var(--e),padding-left .35s var(--e);
}
.matrix__row:hover{padding-left:10px;color:#fff}
.matrix__row .tag{border-color:currentColor}
.matrix__row.in .tag{color:var(--c)}
.matrix__row.out{color:rgba(244,244,245,.55)}
.matrix__row.out .tag{color:var(--m)}

/* ═══════════════════════ §03 HİZMETLER ═══════════════════════ */
.band{background:var(--panel);border-block:1px solid var(--rule-2)}
.svc{padding:clamp(80px,10vw,150px) 0 0}

.plates{display:grid;border-top:1px solid var(--rule)}
.plate{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,80px);
  padding:clamp(30px,4vw,52px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:background-color .4s var(--e);
}
.plate::before{
  content:'';position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);
  top:-1px;height:2px;background:var(--tint);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--e);
}
.plate:hover::before{transform:scaleX(1)}
.plate__n{
  font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--ink-3);
  padding-top:.55em;min-width:3ch;
}
.plate:hover .plate__n{color:var(--ink)}
.plate__body{display:grid;gap:14px;max-width:74ch}
.plate h3{
  font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.04;letter-spacing:-.028em;
}
.plate p{color:var(--ink-2);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.chips li{
  font:500 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--rule);color:var(--ink-2);
}

/* brands ticker */
.ticker{padding:clamp(38px,5vw,64px) 0;border-top:1px solid var(--rule-2);overflow:hidden}
.ticker__lab{
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-bottom:26px;
}
.ticker__mask{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.ticker__row{display:flex;gap:clamp(34px,5vw,72px);width:max-content;animation:slide 44s linear infinite}
.ticker__row span{
  font-variation-settings:'wdth' 104,'wght' 620;
  font-size:clamp(1.1rem,2.1vw,1.7rem);letter-spacing:-.02em;color:var(--ink-3);
  white-space:nowrap;transition:color .3s var(--e);
}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span:hover{color:var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ═══════════════════════ §04 ARIZA TEŞHİSİ ═══════════════════════ */
/* Three instruments in a row: the symptom picker, the test sheet the symptom is
   rendered onto, and the diagnosis readout. The sheet is drawn entirely in CSS —
   no images, no canvas — so switching defects costs a class attribute and a few
   composited transitions, and the whole act adds nothing to the network. */
/* The act is staged as a light table: a pool of lamp light under the middle
   column with the page floating in it, and a vignette pulling the edges down so
   the sheet reads as an object on a bench rather than a div on a background.
   Both layers are static paint — no compositing cost on scroll. */
.diag{position:relative;padding:clamp(80px,10vw,150px) 0;background:var(--paper);overflow:hidden}
.diag::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 46% at 50% 58%,#FFFFFF 0%,rgba(255,255,255,0) 72%),
    radial-gradient(128% 94% at 50% 50%,rgba(18,18,20,0) 44%,rgba(18,18,20,.055) 100%);
}
.diag::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--ink) .8px,transparent .8px);
  background-size:27px 27px;opacity:.03;
}
.diag > .wrap{position:relative;z-index:1}
/* The three columns are stretched, not start-aligned, and each one carries its
   own bottom edge — the picker a rule, the bench its caption, the readout its
   own ground. Whatever the content does inside them, the act closes on one
   line. Track widths are tuned so the three natural heights land within ~20px
   of each other, and the sheet — the thing worth looking at — gets the widest
   column instead of the narrowest. */
.diag__grid{
  display:grid;gap:clamp(24px,2.6vw,40px);
  grid-template-columns:minmax(0,.91fr) minmax(0,1.21fr) minmax(0,.88fr);
  align-items:stretch;
}

/* ── 1 · belirti seçimi ── */
.panel{display:grid;gap:0;border-top:1px solid var(--rule);align-content:start}
/* the symptom rows spread to fill whatever height the row settles at, so the
   list closes exactly on the panel's bottom rule instead of trailing off */
.diag__pick{border-bottom:1px solid var(--rule);grid-template-rows:auto minmax(0,1fr);align-content:stretch}
.fld--sym{display:grid;grid-template-rows:auto minmax(0,1fr)}
.fld--sym .syms{align-content:space-between}
.fld{padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid var(--rule)}
.fld:last-child{border-bottom:0;padding-bottom:0}
.fld legend{
  display:flex;align-items:baseline;gap:.85em;margin-bottom:16px;
  font-variation-settings:'wdth' 104,'wght' 580;font-size:.98rem;letter-spacing:-.012em;
}
.fld__ix{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--m)}

/* Segmented control. The indicator is sized to exactly one slot, so a
   translateX of 100% of *itself* lands on the next option — the maths holds at
   any option count, unlike a hard-coded calc(50% - 3px). */
.seg{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border:1px solid var(--rule);padding:3px;
}
.seg button{
  position:relative;z-index:1;padding:11px 10px;text-align:center;
  font-variation-settings:'wdth' 102,'wght' 540;font-size:.87rem;
  color:var(--ink-2);transition:color .3s var(--e);
}
.seg button[aria-pressed="true"]{color:var(--on-ink)}
.seg__ind{
  position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px) / var(--n,2));background:var(--ink);
  transition:transform .38s var(--e);
}
.seg--3{--n:3}
.seg[data-at="1"] .seg__ind{transform:translateX(100%)}
.seg[data-at="2"] .seg__ind{transform:translateX(200%)}

.syms{display:grid;border-top:1px solid var(--rule-2)}
.syms button{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:13px;padding:11px 2px;text-align:left;
  border-bottom:1px solid var(--rule-2);transition:padding-left .34s var(--e);
}
.syms button:last-child{border-bottom:0}
.syms button::before{
  content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--m);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .38s var(--e);
}
.syms button:hover{padding-left:9px}
.syms button[aria-pressed="true"]{padding-left:13px}
.syms button[aria-pressed="true"]::before{transform:none}
.syms__ix{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);transition:color .3s var(--e)}
.syms button[aria-pressed="true"] .syms__ix{color:var(--m)}
.syms__t b{
  display:block;font-variation-settings:'wdth' 102,'wght' 550;font-size:.9rem;
  letter-spacing:-.014em;color:var(--ink-2);transition:color .3s var(--e);
}
/* Nine two-line rows made this column 170px taller than either of the other
   two. The description only matters for the row you are on, so it opens with
   the selection — the list keeps one constant height whichever row is active. */
.syms__t small{
  display:block;font:400 10.5px/1.4 var(--mono);color:var(--ink-3);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--e),opacity .28s var(--e),margin-top .4s var(--e);
}
.syms button[aria-pressed="true"] .syms__t small{max-height:3em;opacity:1;margin-top:3px}
.syms button:hover .syms__t b,.syms button[aria-pressed="true"] .syms__t b{color:var(--ink)}
.syms__d{
  width:29px;height:20px;flex:none;color:var(--ink-3);opacity:.5;
  transition:opacity .3s var(--e),color .3s var(--e);
}
.syms button[aria-pressed="true"] .syms__d{opacity:1;color:var(--ink)}

/* ── 2 · test sayfası ── */
/* The caption is pinned to its own row so it lands on the column's bottom edge
   next to the picker's rule; the sheet floats centred in whatever is left, with
   equal air above and below rather than hanging from the top. */
.bench{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;justify-items:center}

/* Crop marks. Eight hairlines set 13px outside the trim, drawn as background
   slices on two pseudo-elements so the corners cost no markup. They sit on
   .proof, not on .sheet: registration belongs to the press, so it holds still
   while the paper skews and tears. */
.proof{position:relative;width:100%;max-width:460px;aspect-ratio:1/1.414;align-self:center}
.proof::before,.proof::after{
  content:'';position:absolute;left:-18px;top:-18px;pointer-events:none;
  width:calc(100% + 36px);height:calc(100% + 36px);opacity:.8;
  --cm:linear-gradient(var(--ink-2),var(--ink-2));
  background-repeat:no-repeat;
  /* 12px arms set 18px out, so each corner leaves a 6px gap at the trim —
     a mark that touches the paper is a border, not a crop mark */
  background-size:12px 1px,1px 12px,12px 1px,1px 12px;
}
.proof::before{
  background-image:var(--cm),var(--cm),var(--cm),var(--cm);
  background-position:0 18px,18px 0,100% 18px,calc(100% - 18px) 0;
}
.proof::after{
  background-image:var(--cm),var(--cm),var(--cm),var(--cm);
  background-position:0 calc(100% - 18px),18px 100%,100% calc(100% - 18px),calc(100% - 18px) 100%;
}

.sheet{
  position:absolute;inset:0;
  transform:rotate(var(--rot,0deg));transition:transform .55s var(--e);
}
.sheet__back{
  position:absolute;inset:0;z-index:0;background:#fff;opacity:0;
  box-shadow:0 1px 0 rgba(18,18,20,.12),0 14px 30px -16px rgba(18,18,20,.4);
  transition:opacity .5s var(--e),transform .5s var(--e);
}
/* Three shadows, not one: a tight contact line where the sheet meets the bench,
   a short mid falloff, and a wide ambient. That stack is the difference between
   paper lying on a surface and a white rectangle drawn on one. */
.page{
  position:absolute;inset:0;z-index:1;overflow:hidden;background:#fff;
  box-shadow:
    0 1px 2px rgba(18,18,20,.17),
    0 10px 18px -8px rgba(18,18,20,.13),
    0 34px 58px -28px rgba(18,18,20,.33);
  transition:clip-path .5s var(--e);
}
/* stock: a raking light down the left edge and a fibre tooth over everything */
.page::before{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 13%),
    linear-gradient(-100deg,rgba(18,18,20,.045) 0%,rgba(18,18,20,0) 9%);
}
.page::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23p)'/></svg>");
}

/* the print head — see .pass below */
.bench__cap{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  font:400 10.5px/1.4 var(--mono);letter-spacing:.05em;color:var(--ink-3);text-align:center;
}
.bench__cap::before,.bench__cap::after{content:'';height:1px;flex:1;max-width:44px;background:var(--rule)}

/* the printed content */
.pg{
  position:absolute;inset:0;padding:9.5% 9% 8%;
  display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:5.2%;
  transition:opacity .45s var(--e),transform .5s var(--e),filter .45s var(--e);
}
.pg__hd,.pg__ft{
  display:flex;justify-content:space-between;
  font:500 8px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9a9aa1;
}
/* Patch labels and density figures. Too small to read as information and that
   is the point — at this size they are the fine print every real test form
   carries, and they are what makes the page read as printed rather than drawn. */
.pg__bar{display:flex;gap:2px;height:15px}
.pg__bar i{flex:1;transition:transform .45s var(--e),opacity .45s var(--e)}
.pg__lab,.pg__den{display:flex;gap:2px;margin-top:3px}
.pg__lab span,.pg__den span{
  flex:1;text-align:center;color:#a6a6ad;
  font:500 6.5px/1 var(--mono);letter-spacing:.14em;
}
.pg__den span{letter-spacing:.02em}
.pg__ramp{display:flex;height:7px}
.pg__ramp i{flex:1;background:var(--ink)}
.pg__ramp i:nth-child(1){opacity:.06}.pg__ramp i:nth-child(2){opacity:.14}
.pg__ramp i:nth-child(3){opacity:.24}.pg__ramp i:nth-child(4){opacity:.36}
.pg__ramp i:nth-child(5){opacity:.5} .pg__ramp i:nth-child(6){opacity:.66}
.pg__ramp i:nth-child(7){opacity:.84}.pg__ramp i:nth-child(8){opacity:1}
/* space-between, not a fixed gap: the block of type then fills the page at any
   sheet size instead of stopping half way down and leaving it looking unprinted */
.pg__lines{display:grid;align-content:space-between}
.pg__lines i{height:4px;width:100%;background:rgba(18,18,20,.74)}
.pg__lines i:nth-child(3n){width:84%}
.pg__lines i:nth-child(4n){width:66%}
.pg__lines i:nth-child(5n){width:92%}
.pg__lines i:nth-child(7n){width:77%}
.pg__lines i:nth-child(9){width:41%}    /* paragraph ends */
.pg__lines i:nth-child(19){width:34%}
/* the last two stay short so the registration mark in the corner never lands
   on top of a line of type */
.pg__lines i:nth-last-child(2){width:62%}
.pg__lines i:nth-last-child(1){width:43%}
.pg__reg{position:absolute;right:6.5%;bottom:10.5%;width:16px;height:16px;color:var(--m);opacity:.5}

/* Every defect is one or both of these two overlays plus a transform on the
   page itself — nothing is added or removed from the DOM when the symptom
   changes, so the swap is a pure compositor job. */
.fx{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .45s var(--e)}

/* THE PRINT HEAD. Picking a symptom does not fade one state into another — it
   runs a new test print. A lit bar with a CMYK fringe trailing it sweeps the
   page top to bottom, and the new defect resolves behind it while it travels.
   One element, one keyframe, no JS beyond a class toggle. */
.pass{
  position:absolute;left:0;right:0;top:0;height:100%;z-index:5;
  opacity:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 44%,
    rgba(255,255,255,.96) 49.2%,
    #FFFFFF 50%,
    rgba(0,173,238,.34) 50.5%,
    rgba(236,36,143,.26) 51.2%,
    rgba(255,206,3,.22) 52%,
    rgba(255,255,255,.5) 55%,
    rgba(255,255,255,0) 72%);
}
.sheet.is-print .pass{animation:pass .62s cubic-bezier(.36,0,.2,1) forwards}
@keyframes pass{
  0%  {opacity:1;transform:translateY(-100%)}
  100%{opacity:1;transform:translateY(100%)}
}
.pg--ghost{z-index:0;opacity:0;transform:translate(1.4%,3.4%)}

/* 01 · yatay çizgi ve bantlar */
[data-defect="band"] .fx{
  opacity:1;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,0) 0 12px,rgba(255,255,255,.97) 12px 19px,
    rgba(255,255,255,0) 19px 24px,rgba(255,255,255,.66) 24px 27px);
  animation:bandDrift 6s linear infinite;
}
@keyframes bandDrift{to{transform:translateY(27px)}}   /* exactly one period */

/* 02 · soluk, açık baskı */
[data-defect="fade"] .pg{filter:contrast(.5) saturate(.4)}
[data-defect="fade"] .fx{
  opacity:1;
  background:linear-gradient(102deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.7) 55%,rgba(255,255,255,.9) 100%);
}

/* 03 · leke, gölge, tekrar eden iz */
[data-defect="ghost"] .pg--ghost{opacity:.26}
[data-defect="ghost"] .fx{
  opacity:1;
  background:
    radial-gradient(115% 40% at 24% 97%,rgba(18,18,20,.17) 0%,transparent 62%),
    repeating-linear-gradient(180deg,transparent 0 52px,rgba(18,18,20,.05) 52px 57px);
}

/* 04 · renk kayması, eksik renk */
[data-defect="color"] .pg__bar .c{transform:translateX(-4px);opacity:.26}
[data-defect="color"] .pg__bar .m{transform:translateX(5px)}
[data-defect="color"] .pg__bar .y{transform:translateY(3px)}
[data-defect="color"] .pg--ghost{opacity:.2;transform:translate(1.6%,.6%)}
[data-defect="color"] .fx{
  opacity:1;
  background:linear-gradient(158deg,rgba(236,36,143,.1) 0%,rgba(0,173,238,.04) 62%,transparent 100%);
}

/* 05 · kağıt sıkışması — the sheet comes out crooked and torn */
[data-defect="jam"]{--rot:-3.4deg}
[data-defect="jam"] .page{
  clip-path:polygon(0 0,100% 0,100% 68%,84% 73%,93% 78%,72% 83%,82% 88%,56% 92%,66% 97%,0 100%);
}
[data-defect="jam"] .pg{transform:skewY(-1.5deg) scale(1.03)}
[data-defect="jam"] .fx{
  opacity:1;
  /* two near-parallel creases, the way a sheet comes out of a roller — the old
     pair crossed at 45° and read as a scribbled X rather than damage */
  background:
    linear-gradient(107deg,transparent 32%,rgba(18,18,20,.12) 33%,rgba(255,255,255,.88) 34.4%,transparent 36%),
    linear-gradient(101deg,transparent 63%,rgba(18,18,20,.09) 64%,rgba(255,255,255,.7) 65.2%,transparent 67%);
}

/* 06 · çift kağıt çekiyor */
[data-defect="feed"] .sheet__back{opacity:1;transform:translate(5%,-3.4%) rotate(2.8deg)}
[data-defect="feed"] .pg{transform:scaleX(.985) skewX(.9deg)}
[data-defect="feed"] .fx{
  opacity:1;
  background:linear-gradient(96deg,transparent 28%,rgba(18,18,20,.1) 31%,rgba(255,255,255,.92) 33.5%,transparent 37%);
}

/* 07 · ağda görünmüyor — nothing gets printed at all. The page is left as a
   faint neutral remnant rather than pure white: an empty rectangle reads as a
   missing asset, a ghost of the unprinted job reads as the fault. */
[data-defect="net"] .pg,[data-defect="panel"] .pg{filter:grayscale(1)}
[data-defect="net"] .pg{opacity:.07}
.crt{
  position:absolute;z-index:3;left:0;right:0;top:36%;padding:15px 9%;
  background:var(--ink);color:var(--on-ink);display:grid;gap:6px;opacity:0;
  transform:translateY(10px);transition:opacity .42s var(--e),transform .42s var(--e);
}
.crt b{
  display:flex;align-items:center;gap:8px;
  font:500 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.crt b::before{content:'';width:6px;height:6px;flex:none;background:var(--m);animation:blip 1.4s steps(1) infinite}
.crt span{font:400 9.5px/1.3 var(--mono);color:rgba(244,244,245,.55)}
@keyframes blip{50%{opacity:.15}}
[data-defect="net"] .crt{opacity:1;transform:none}

/* 08 · panelde hata kodu */
[data-defect="panel"] .pg{opacity:.07}
.perr{
  position:absolute;z-index:3;left:13%;right:13%;top:32%;padding:20px;
  background:#17171A;border:1px solid rgba(244,244,245,.16);
  display:grid;justify-items:center;gap:9px;text-align:center;opacity:0;
  transform:translateY(10px) scale(.97);
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.perr svg{width:26px;height:26px;color:var(--y)}
.perr b{font-variation-settings:'wdth' 106,'wght' 700;font-size:1.45rem;letter-spacing:.02em;color:var(--on-ink)}
.perr span{font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,245,.55)}
[data-defect="panel"] .perr{opacity:1;transform:none}

/* 09 · kopyada dikey çizgi — the scan path, not the print path */
[data-defect="scan"] .pg{transform:rotate(.8deg) scale(1.02)}
[data-defect="scan"] .fx{
  opacity:1;
  background:
    linear-gradient(90deg,transparent 0 26.4%,rgba(18,18,20,.86) 26.4% 27.2%,transparent 27.2%),
    linear-gradient(90deg,transparent 0 61%,rgba(18,18,20,.3) 61% 61.5%,transparent 61.5%);
}

/* ── 3 · ön teşhis paneli ── */
/* The body takes the slack (1fr) and spreads it between its own blocks, rather
   than the panel dumping it all into one hole above the button — the readout
   reads as a set of instrument rows breathing, and the call to action still
   lands on the panel's bottom edge, level with the other two columns. */
.rx{
  position:relative;background:var(--ink);color:var(--on-ink);
  padding:clamp(22px,2.4vw,28px);
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;overflow:hidden;
}
.rx::before{
  content:'';position:absolute;z-index:2;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--on-ink) 75% 100%);
}
/* the same halftone field the black act in §02 carries, so the two dark
   surfaces on the page read as one material */
.rx::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(244,244,245,.9) .9px,transparent .9px);
  background-size:26px 26px;
}
.rx > *{position:relative;z-index:1}
.rx .eyebrow{color:rgba(244,244,245,.55)}
.rx__body{display:grid;gap:16px;align-content:space-between;opacity:var(--rxo,1);transition:opacity .22s var(--e)}
.rx__foot{display:grid;gap:13px;align-content:end}
.rx__top{display:grid;gap:11px}
.rx__h{
  font-variation-settings:'wdth' 104,'wght' 620;font-weight:600;
  font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.4;letter-spacing:-.016em;
}
.rx__unit{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:14px;border:1px solid var(--rule-i);
}
.rx__ix{font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--m);border:1px solid currentColor;padding:7px 8px}
.rx__unit b{display:block;font-variation-settings:'wdth' 104,'wght' 600;font-size:.93rem;letter-spacing:-.015em}
.rx__unit small{display:block;font:400 10.5px/1.4 var(--mono);color:rgba(244,244,245,.55);margin-top:4px}

.bd{display:grid;border-top:1px solid var(--rule-i)}
.bd__row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--rule-i);
}
.bd__row dt{font-size:.85rem;color:rgba(244,244,245,.62)}
.bd__row dd{font:500 12px/1.3 var(--mono);text-align:right}

/* a three-segment gauge rather than three dashes: empty cells stay outlined so
   the scale is always legible, and the level reads at a glance */
.urg{display:flex;align-items:center;gap:9px}
.urg i{
  width:15px;height:7px;background:transparent;
  border:1px solid rgba(244,244,245,.22);transition:background-color .3s var(--e),border-color .3s var(--e);
}
.urg[data-lv="1"] i:nth-child(1),
.urg[data-lv="2"] i:nth-child(-n+2),
.urg[data-lv="3"] i:nth-child(-n+3){background:var(--m);border-color:var(--m)}
.urg em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.1em}
.urg[data-lv="3"] em{color:var(--m)}

.rx__dont{display:grid;gap:6px;padding:12px 13px;background:rgba(244,244,245,.05)}
.rx__dont b{font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--y)}
.rx__dont span{font-size:.82rem;line-height:1.5;color:rgba(244,244,245,.72)}
.rx__note{font-size:.72rem;line-height:1.5;color:rgba(244,244,245,.55)}

/* ═══════════════════════ §05 SÜREÇ ═══════════════════════ */
.flow{padding:clamp(70px,8vw,120px) 0}
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.steps li{padding:26px 22px 0 0;border-right:1px solid var(--rule-2);position:relative}
.steps li:last-child{border-right:0}
.steps li::before{
  content:'';position:absolute;top:-1px;left:0;width:26px;height:2px;background:var(--ink);
}
.steps__n{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--m);display:block;margin-bottom:14px}
.steps h3{font-variation-settings:'wdth' 106,'wght' 640;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:8px}
.steps p{font-size:.85rem;line-height:1.55;color:var(--ink-2)}

/* ═══════════════════════ §06 SIKÇA SORULANLAR ═══════════════════════ */
.faq{padding:clamp(70px,8vw,120px) 0;background:var(--paper)}
.qa{display:grid;border-top:1px solid var(--rule)}
.qa > div{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(18px,3.6vw,60px);padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--rule-2);
}
.qa dt{
  font-variation-settings:'wdth' 106,'wght' 620;font-weight:600;
  font-size:clamp(.98rem,1.45vw,1.16rem);line-height:1.25;letter-spacing:-.02em;
}
.qa dd{font-size:.9rem;line-height:1.62;color:var(--ink-2);max-width:64ch}
.qa dd a{border-bottom:1px solid var(--rule);transition:border-color .25s var(--e)}
.qa dd a:hover{border-color:var(--ink)}

/* ═══════════════════════ §07 İLETİŞİM ═══════════════════════ */
.contact{padding:clamp(80px,10vw,150px) 0;background:var(--paper);border-top:1px solid var(--rule-2)}
.contact__grid{
  display:grid;gap:clamp(24px,2.6vw,40px);
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
}
.colophon__t{
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:14px;border-bottom:1px solid var(--ink);
  margin-bottom:6px;
}
.colophon,.sla,.reach{display:grid;gap:18px;align-content:start}
.colophon dl{display:grid}
.colophon dl > div{padding:13px 0;border-bottom:1px solid var(--rule-2);display:grid;gap:4px}
.colophon dt{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.colophon dd{font-size:.93rem;line-height:1.5}
.colophon dd a{border-bottom:1px solid var(--rule);transition:border-color .25s var(--e)}
.colophon dd a:hover{border-color:var(--ink)}

.sla ol{display:grid}
.sla li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule-2)}
.sla li span{font:500 10px/1.7 var(--mono);letter-spacing:.14em;color:var(--m)}
.sla li p{font-size:.87rem;line-height:1.55;color:var(--ink-2)}

.reach{
  background:var(--ink);color:var(--on-ink);padding:clamp(24px,2.6vw,32px);
  position:relative;overflow:hidden;
}
.reach::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--on-ink) 75% 100%);
}
.reach .eyebrow{color:rgba(244,244,245,.55)}
.reach__big{
  font-variation-settings:'wdth' 110,'wght' 720;
  font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1;letter-spacing:-.03em;
}
.reach__p{font-size:.87rem;line-height:1.55;color:rgba(244,244,245,.62)}
.reach__mini{font:400 11px/1.45 var(--mono);color:rgba(244,244,245,.55)}

/* ═══════════════════════ FOOTER ═══════════════════════ */
.foot{background:var(--ink);color:var(--on-ink);padding:clamp(56px,7vw,92px) 0 26px}
.foot__top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,56px);padding-bottom:44px;border-bottom:1px solid var(--rule-i);
}
.foot__brand{display:grid;gap:16px;align-content:start;max-width:36ch}
/* one-colour reversed lockup — inverting would flip the CMYK marks to their
   complements, so knock the logo out to solid white instead */
.foot__brand img{width:auto;height:64px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.foot__brand p{font-size:.85rem;line-height:1.6;color:rgba(244,244,245,.55)}
.foot__col{display:grid;gap:11px;align-content:start}
.foot__col h4{
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,244,245,.55);margin-bottom:4px;
}
.foot__col a{font-size:.87rem;color:rgba(244,244,245,.72);transition:color .25s var(--e);width:fit-content}
.foot__col a:hover{color:#fff}
.foot__bot{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:22px;
  font:400 11px/1.5 var(--mono);letter-spacing:.03em;color:rgba(244,244,245,.55);
}

/* ═══════════════════════ mobile dock ═══════════════════════ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:290;display:none;
  grid-template-columns:auto 1fr;gap:1px;background:var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 var(--rule),0 -14px 26px rgba(18,18,20,.06);
}
.dock a{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 20px;
  font-variation-settings:'wdth' 100,'wght' 560;font-size:.87rem;
}
.dock a svg{width:15px;height:15px}
.dock__a{background:var(--paper);color:var(--ink)}
.dock__b{background:var(--wa);color:#04301A}

/* ═══════════════════════ reveals ═══════════════════════ */
html.js .r{opacity:0;transform:translate3d(0,16px,0)}
html.js .r.is-in{
  opacity:1;transform:none;
  transition:opacity .78s var(--e),transform .78s var(--e);
}
html.js .d1.is-in{transition-delay:.09s}
html.js .d2.is-in{transition-delay:.18s}
html.js .d3.is-in{transition-delay:.27s}

/* ═══════════════════════ responsive ═══════════════════════ */
/* Three instruments no longer fit: the picker takes the full width above the
   sheet and the readout, and its nine symptoms fall into two columns. */
@media (max-width:1180px){
  .diag__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .diag__pick{grid-column:1/-1;border-bottom:0}
  .syms{grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,44px)}
  .syms button:last-child{border-bottom:1px solid var(--rule-2)}
  /* the sheet now has a whole half-width column: cap it so its height does not
     drag the readout beside it into a tall, half-empty panel */
  .proof{max-width:380px}
}

@media (max-width:1080px){
  .scope__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr 1fr}
  .reach{grid-column:1/-1}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1;max-width:52ch}
  .steps{grid-template-columns:1fr 1fr}
  .steps li{padding-bottom:26px}
  .steps li:nth-child(2){border-right:0}
}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__cta{display:none}
  /* must match the desktop `.nav__links + .nav__end` selector's specificity —
     display:none does not stop the sibling combinator from matching, so a
     plain `.nav__end` rule loses here no matter where it sits in the file */
  .nav__links + .nav__end{margin-left:auto}
  .dock{display:grid}
  .foot{padding-bottom:88px}
  /* Reserve the dock's height on the pin itself rather than as padding inside
     the caption row: on a short screen the grid squeezes that row and clips the
     padding away, which is how the dock ended up over the caption in landscape.
     --dock-h is measured in JS, so this is exact including the safe-area inset. */
  .td__pin{padding-bottom:calc(var(--dock-h,58px) + 10px)}
  .cap{padding-bottom:6px}
  .cue{bottom:calc(var(--dock-h,58px) + 12px)}

  /* Thumb-sized hit areas. Text links default to their line box — around 23px —
     which is well under the ~44px a finger needs. */
  .foot__col a{padding:10px 0}
  .colophon dd a{display:inline-block;padding:9px 0}
  .nav__tel{padding:12px 0}
  .skip{padding:14px 18px}
  .ticker__row span{padding:6px 0}
  .hero__stats{max-width:none}
  .hero__stats > div{padding-right:14px}
}

@media (max-width:760px){
  :root{--nav-h:62px}
  .td{height:640vh}
  /* a 16:9 machine on a 9:19.5 screen is inherently small — give it every
     pixel of width that's going, and tighten the rows around it */
  .td__box{width:96vw}
  .td__pin{padding-top:calc(var(--nav-h) + 1.2vh)}
  .cap__txt p{font-size:.79rem}
  /* the phone hero is tight: every block is trimmed so the whole pitch fits
     one screen without the machine having to share it */
  .hero{--hbase:-2vh;align-content:center;gap:14px}
  .hero__h1{font-size:clamp(2.2rem,9.6vw,3.2rem);line-height:.95}
  .hero__h1 .bar{width:56px;height:4px;margin-bottom:.24em}
  .hero__lead{font-size:.92rem;line-height:1.5}
  .hero__cta{gap:9px}
  .hero__cta .btn{flex:1 1 100%;padding:13px 18px}
  .hero__stats{grid-template-columns:1fr;border-top:1px solid var(--rule);margin-top:4px}
  .hero__stats > div{border-right:0;border-bottom:1px solid var(--rule-2);padding:16px 0;display:flex;align-items:baseline;gap:16px}
  .hero__stats dt{font-size:1.22rem;min-width:5.4em;gap:.5em}
  .hero__stats dd{margin-top:0;max-width:none;font-size:.78rem;line-height:1.4}
  .plate{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0;border-bottom:1px solid var(--rule-2);padding:22px 0}
  .steps li::before{width:20px}
  .qa > div{grid-template-columns:1fr;gap:9px}
  .contact__grid,.foot__top{grid-template-columns:1fr}
  .diag__grid{grid-template-columns:1fr}
  .syms{grid-template-columns:1fr}
  .proof{max-width:320px}
  .seg--3 button{padding-inline:4px;font-size:.8rem}
  .matrix__row{font-size:.87rem}
  .td__head h2{font-size:1.18rem}
}

@media (max-width:400px){
  .hero__h1{font-size:2.15rem}
  .proof{max-width:274px}
  .syms__t small{font-size:10px}
}

/* short viewports — keep the hero from colliding with the machine */
@media (max-height:720px) and (min-width:761px){
  .hero__stats{display:none}
  .hero{gap:14px}
}

/* A phone held sideways leaves almost no height: drop the section head and
   compress the caption so the machine keeps the room instead of being
   squeezed down to a couple of hundred pixels. */
@media (max-height:520px){
  .td__pin{padding-top:calc(var(--nav-h) + 4px);row-gap:6px}
  .td__head{display:none}
  .cap__rail{margin-bottom:8px}
  .cap__txt p{display:none}
  .cue{display:none}
  .hero__stats{display:none}
  .hero{gap:10px}
  .hero__lead{font-size:.88rem}
}

/* ═══════════════════════ reduced motion ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html.js .r{opacity:1;transform:none}
  .td{height:auto}
  .td__pin{position:static;height:auto;padding:calc(var(--nav-h) + 40px) 0 60px;display:grid;gap:clamp(28px,4vw,48px)}
  .td__stage,.hero,.td__head,.td__outro{position:static;transform:none;opacity:1}
  .cue,.cap{display:none}
  .td__head,.td__outro{background:none;padding-inline:var(--gut)}
  .td__outro{place-content:center;justify-items:center}
  .td__box{max-height:none}
  #seq{display:none}                       /* no scrubbing — show the sharp still */
  #still-b{--o:1}
  /* the six units become a plain, readable list */
  .td__parts{
    position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    white-space:normal;display:grid;gap:0;counter-reset:part;
    max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
    border-top:1px solid var(--rule);
  }
  .td__parts li{padding:14px 0;border-bottom:1px solid var(--rule-2);counter-increment:part}
  .td__parts li::before{
    content:counter(part,decimal-leading-zero);
    font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--m);
    display:block;margin-bottom:6px;
  }
  .td__parts b{display:block;font-weight:600;font-size:1rem;margin-bottom:4px}
  .td__parts span{font-size:.87rem;color:var(--ink-2)}
  .ticker__row{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
}

/* print */
@media print{
  .nav,.dock,.cue,.hud,.td__annos,.mobmenu,body::before{display:none !important}
  body{background:#fff;color:#000}
  .td{height:auto}.td__pin{position:static;height:auto}
}