/* Nasıl çalışıyoruz — chapter styles. Shared rules live in ../shared/site.css */

/* 1 · Process: one tall canvas. In motion the section is pinned and the canvas (.track) is moved by the pen. */
.process {
  display: block; padding: 0; text-align: center;
  --lw: clamp(6px, .72vw, 10px);
  --lane: clamp(26px, 7vw, 132px);
  --nd: clamp(32px, 3.6vw, 58px);
  --tfs: var(--t-h2);
  --gap: clamp(150px, 18vw, 280px);
}
.motion .process { height: 100svh; }
.track { position: relative; }
.motion .track { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.still .track { padding-bottom: 96px; }
.path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pen { fill: none; stroke: var(--cobalt); stroke-width: var(--lw); stroke-linecap: round; stroke-linejoin: round; }
.nib-o { fill: var(--cobalt); }
.nib-i { fill: var(--paper); }
.motion:not(.ready) .nib { opacity: 0; }
.ride { fill: none; stroke: none; }
.ride-mask { fill: none; stroke: #fff; stroke-width: 150px; stroke-linecap: butt; stroke-linejoin: round; }
.ride-text { fill: var(--cobalt); font-size: var(--t-lead); font-variation-settings: "wght" 620, "wdth" 108; letter-spacing: .02em; }

/* Hero, at the top of the canvas */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 88px var(--gut) 20svh;
}
.hero-type {
  font-size: var(--t-display); line-height: 1; letter-spacing: -.02em;
  font-variation-settings: "wght" 820, "wdth" 92;
}
.hl-line { display: block; width: fit-content; margin-inline: auto; padding-bottom: .07em; }
.hl-line.masked { clip-path: inset(-40% -50vw 0 -50vw); }
.hero-type .lt { font-variation-settings: "wght" 240, "wdth" 92; }
.hero-type .hv { font-variation-settings: "wght" 860, "wdth" 92; }
.hero-type .c { --s: 92; }
.hero-type .lt .c { --w: 240; }
.hero-type .hv .c { --w: 860; }
.hero-sub {
  margin-top: clamp(18px, 3.4svh, 40px);
  max-width: 34ch; font-size: var(--t-lead); line-height: 1.45;
  font-variation-settings: "wght" 440, "wdth" 100;
  color: color-mix(in srgb, var(--ink) 76%, var(--paper));
  text-wrap: balance;
}
.pen-start { display: block; height: 0; margin-top: clamp(34px, 7svh, 80px); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  position: relative; z-index: 1;
  margin-top: var(--gap);
  padding-inline: calc(var(--lane) + var(--nd) / 2 + 14px);
}
.step:first-child { margin-top: clamp(110px, 12vw, 190px); }
.n {
  position: absolute; z-index: 2;
  top: calc(var(--tfs) * .5 - var(--nd) / 2); left: calc(var(--lane) - var(--nd) / 2);
  width: var(--nd); height: var(--nd); border-radius: 50%;
  display: grid; place-items: center;
  border: max(3px, calc(var(--lw) * .5)) solid var(--cobalt); background: var(--paper); color: var(--ink);
  font-size: calc(var(--nd) * .42); line-height: 1; font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" 720, "wdth" 110;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.step:nth-child(even) .n { left: auto; right: calc(var(--lane) - var(--nd) / 2); }
.step.on .n, .still .n { background: var(--cobalt); color: var(--paper); }
.t {
  font-size: var(--tfs); line-height: 1; letter-spacing: -.02em;
  font-variation-settings: "wght" 820, "wdth" 92; text-wrap: balance;
}
.t .c { --w: 820; --s: 92; }
.tl { clip-path: inset(-45% -50vw 0 -50vw); padding-bottom: .1em; }
.ds { margin-top: clamp(14px, 2vw, 30px); display: grid; gap: .55em; justify-items: center; }
.d {
  max-width: 44ch; font-size: var(--t-lead); line-height: 1.48;
  font-variation-settings: "wght" 440, "wdth" 100; text-wrap: pretty;
}
.d a { text-underline-offset: .22em; text-decoration-thickness: 1.5px; white-space: nowrap; }
.d a:hover { color: var(--cobalt); }
.pen-end { display: block; height: 0; margin-top: clamp(130px, 14vw, 230px); }

/* 2 · Terms: the quiet chapter */
.terms { align-content: center; gap: clamp(36px, 7svh, 80px); padding-block: clamp(96px, 16svh, 160px); }
.terms-h {
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em;
  font-variation-settings: "wght" 800, "wdth" 100; text-wrap: balance;
}
.terms-h .c { --w: 800; --s: 100; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(40px, 6vw, 96px); width: min(100%, 1080px); margin-inline: auto; }
.col { display: grid; gap: clamp(18px, 3svh, 30px); align-content: start; }
.col-h {
  font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.01em; color: var(--red);
  font-variation-settings: "wght" 760, "wdth" 115;
}
.col-h .c { --w: 760; --s: 115; }
.col dl { margin: 0; display: grid; gap: clamp(16px, 2.6svh, 26px); }
.col dt { font-size: clamp(.95rem, 1.1vw, 1.05rem); font-variation-settings: "wght" 680, "wdth" 112; color: color-mix(in srgb, var(--paper) 74%, var(--ink)); }
.col dd {
  margin: 4px auto 0; max-width: 32ch;
  font-size: var(--t-lead); line-height: 1.45; font-variation-settings: "wght" 440, "wdth" 100; text-wrap: pretty;
}
.extra {
  max-width: 34ch; margin-inline: auto;
  font-size: var(--t-lead); line-height: 1.45; font-variation-settings: "wght" 440, "wdth" 100;
  color: color-mix(in srgb, var(--paper) 82%, var(--ink)); text-wrap: balance;
}
.pay {
  max-width: 20ch; margin-inline: auto;
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em;
  font-variation-settings: "wght" 780, "wdth" 112; text-wrap: balance;
}
.pay .c { --w: 780; --s: 112; }

/* 3 · Close */
.close { align-content: center; gap: clamp(24px, 4.4svh, 48px); }
.close-h {
  max-width: 16ch;
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em;
  font-variation-settings: "wght" 840, "wdth" 100; text-wrap: balance;
}
.close-h .c { --w: 840; --s: 100; }
.close-p { font-size: var(--t-lead); font-variation-settings: "wght" 520, "wdth" 104; }
.mail { font-size: var(--t-lead); font-variation-settings: "wght" 600, "wdth" 104; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }

@media (max-width: 640px) {
  .process { --lane: 24px; --nd: 32px; }
  .step { padding-inline: calc(var(--lane) + var(--nd) / 2 + 12px); }
}
@media (prefers-contrast: more) { .hero-sub, .col dt, .extra { color: inherit; } }