/* Olympos Web — shared system. Pages add their own page.css on top. */
@import url(palettes.css);
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap;
  src: url(fonts/anybody-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap;
  src: url(fonts/anybody-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0E0E12;
  --paper: #E8EAEE;
  --cobalt: #2B2BF0;
  --red: #FF4A1C;
  --gut: clamp(16px, 4vw, 72px);
  /* Type scale. Headings stop at 6rem: big motion, readable letters (owner, 2026-10-24). */
  --t-display: clamp(2.6rem, 1.5rem + 4.2vw, 6rem);
  --t-h2: clamp(2rem, 1.25rem + 3vw, 4.5rem);
  --t-h3: clamp(1.45rem, 1.05rem + 1.6vw, 2.6rem);
  --t-figure: clamp(3.4rem, 1.9rem + 6vw, 8rem);
  --t-lead: clamp(1.12rem, 1rem + .45vw, 1.4rem);
  --t-text: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

/* Story pages (home and the four subpages): a middle ground between poster letters and reading sizes (owner,
   2026-10-24). Content pages (Ürünler) and the gallery keep the reading sizes above. */
html:is([data-page="home"], [data-page="biz"], [data-page="ne"], [data-page="nasil"], [data-page="neden"]) {
  --t-display: clamp(3rem, 1.6rem + 6.2vw, 8.5rem);
  --t-h2: clamp(2.2rem, 1.3rem + 4vw, 6rem);
  --t-h3: clamp(1.6rem, 1.1rem + 2.2vw, 3.4rem);
  --t-figure: clamp(3.8rem, 2rem + 8vw, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scrollbar-color: var(--red) var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 1rem/1.5 'Anybody', system-ui, sans-serif; font-variation-settings: "wdth" 100;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: var(--ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 4px; }
[data-theme="red"] :focus-visible, [data-theme="red"]:focus-visible { outline-color: var(--ink); }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Fields: each owns whole regions */
[data-theme="ink"] { background: var(--ink); color: var(--paper); }
[data-theme="paper"] { background: var(--paper); color: var(--ink); }
[data-theme="cobalt"] { background: var(--cobalt); color: var(--paper); }
[data-theme="red"] { background: var(--red); color: var(--ink); }
/* Contrast (2026-10-24, computed from palettes.css and checked with axe): text on a red button is black, 4.56:1 or more
   on every palette's red, except light calm on ink and paper (4.09:1), where white reads at 5.14:1. On cobalt and red
   fields secondary text is not dimmed: the page mixes fell under 4.5:1 in the calm palettes. */
[data-theme] { --on-red: #000; }
html[data-scheme="light"][data-tone="calm"] :is([data-theme="ink"], [data-theme="paper"]) { --on-red: #fff; }
[data-theme="cobalt"] :is(.hero-sub, .cue), [data-theme="red"] :is(.hero-sub, .cue) { color: inherit; }

/* Split characters read their axes from custom properties so separate motions can add up.
   --w weight, --s width, --pw pointer width boost, --wq / --sq scroll reductions. Tween them with fromTo only. */
.c {
  display: inline-block;
  font-variation-settings:
    "wght" calc(var(--w, 800) - var(--wq, 0)),
    "wdth" calc(var(--s, 100) + var(--pw, 0) - var(--sq, 0));
  /* Rounded to steps too small to see (10 weight, 2 width): every distinct value is a new font instance to shape
     and rasterise, so a continuous tween otherwise misses the glyph cache on every frame. */
  font-variation-settings:
    "wght" round(calc(var(--w, 800) - var(--wq, 0)), 10),
    "wdth" round(calc(var(--s, 100) + var(--pw, 0) - var(--sq, 0)), 2);
}

/* Chapters */
.ch {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  padding: 96px var(--gut); text-align: center; overflow: clip;
  /* letters re-shaping inside a chapter relayout only that chapter */
  contain: layout style;
}
.ch > .pin { width: 100%; min-height: calc(100svh - 192px); display: grid; place-items: center; align-content: center; grid-template-columns: minmax(0, 1fr); }
.motion .ch:has(> .pin) { padding: 0; }
.motion .ch > .pin { min-height: 100svh; padding: 72px var(--gut); }
.mask { display: block; clip-path: inset(-25% -50vw 0 -50vw); padding-bottom: .08em; }

.skip {
  position: fixed; left: var(--gut); top: 12px; z-index: 60; padding: .6em 1em;
  background: var(--red); color: var(--ink); font-variation-settings: "wght" 700, "wdth" 100;
  text-decoration: none; border-radius: 999px; transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gut) 22px; color: var(--bar-fg, var(--paper));
  transition: color .45s var(--ease); pointer-events: none;
}
.bar > * { pointer-events: auto; }
/* In normal scrolling (gentle, still) text passes under the bar: a short fade in the field's own colour keeps it
   readable. Full mode pins its chapters and colours change sideways there, so it stays clear. */
.still .bar { background: linear-gradient(var(--bar-bg, transparent) 55%, transparent); }
.mark { color: inherit; text-decoration: none; font-size: 1.05rem; font-variation-settings: "wght" 800, "wdth" 125; letter-spacing: -.01em; white-space: nowrap; }
.mark span { font-variation-settings: "wght" 300, "wdth" 125; margin-left: .25em; }
.tools { display: flex; gap: 6px; }
.tool {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  font: inherit; font-size: .9rem; font-variation-settings: "wght" 650, "wdth" 110;
  color: inherit; background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background .3s var(--ease);
}
.tool:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.tool > span, .tool > i { pointer-events: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; transition: background .3s; }
#motion[data-mode="full"] .dot { background: currentColor; }
#motion[data-mode="gentle"] .dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.tool.icon { width: 40px; padding: 0; justify-content: center; }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tool .moon { fill: currentColor; stroke: none; display: none; }
html[data-scheme="dark"] .tool .moon { display: block; }
html[data-scheme="dark"] .tool .sun, html[data-scheme="dark"] .tool .rays { display: none; }
.swatch { display: inline-grid; grid-template-columns: repeat(3, 5px); gap: 2px; }
.swatch b { width: 5px; height: 12px; border-radius: 2px; background: currentColor; }
.swatch b:nth-child(2) { opacity: .6; } .swatch b:nth-child(3) { opacity: .3; }
.burger { display: inline-grid; gap: 4px; width: 16px; }
.burger::before, .burger::after { content: ""; height: 2px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease); }
.menu-open .burger::before { transform: translateY(3px) rotate(45deg); }
.menu-open .burger::after { transform: translateY(-3px) rotate(-45deg); }
/* Press feedback lives on pointer-down; springs in site.js scale the element, this is the CSS fallback */
.still .tool:active, .still .btn:active .btn-in { transform: scale(.96); }

/* ---------- Menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 45; display: none;
  background: var(--ink); color: var(--paper);
  padding: 96px var(--gut) 40px;
  grid-template-rows: 1fr auto; align-items: center; justify-items: center; text-align: center;
}
.menu-open .menu { display: grid; }
.motion .menu { display: grid; visibility: hidden; clip-path: circle(0px at 100% 0%); }
.motion.menu-open .menu { visibility: visible; }
.menu ol { list-style: none; padding: 0; display: grid; gap: clamp(2px, 1svh, 10px); }
.menu nav a {
  display: inline-block; text-decoration: none;
  font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.02em;
  font-variation-settings: "wght" 780, "wdth" 100;
}
.menu nav a[aria-current="page"] { color: var(--red); }
.menu nav a .c { --w: 780; }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: .95rem; font-variation-settings: "wght" 500, "wdth" 110; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.menu-foot a { text-underline-offset: .25em; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; text-decoration: none; color: var(--ink); border-radius: 999px; touch-action: manipulation; }
.btn-in {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1.05em 1.7em; border-radius: 999px; background: var(--red); color: var(--on-red);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-variation-settings: "wght" 720, "wdth" 112;
  transition: background .3s var(--ease);
}
[data-theme="red"] .btn-in { background: var(--ink); color: var(--paper); }
.btn:hover .btn-in { background: var(--paper); color: var(--ink); }
[data-theme="paper"] .btn:hover .btn-in { background: var(--ink); color: var(--paper); }
.btn svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* ---------- Next page ---------- */
.next { gap: clamp(18px, 3svh, 32px); align-content: center; }
.next-link {
  display: block; text-decoration: none; width: 100%;
  /* sized by the destination name's length (--n, set in site.js) so it never clips */
  font-size: min(calc(88vw / (var(--n, 8) * 0.66)), var(--t-display)); line-height: .95; letter-spacing: -.03em; white-space: nowrap;
  font-variation-settings: "wght" 850, "wdth" 100;
}
.next-link .nl-t { display: inline-block; }
.next-note { display: inline-flex; align-items: center; gap: .5em; font-size: clamp(1rem, 1.5vw, 1.3rem); font-variation-settings: "wght" 560, "wdth" 112; }
.next-note svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pin cue: there is more below ---------- */
.pin-cue {
  position: fixed; right: var(--gut); bottom: clamp(16px, 3svh, 28px); z-index: 48;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--bar-fg, var(--paper)); background: transparent;
  visibility: hidden; opacity: 0; transition: color .45s var(--ease);
}
.still .pin-cue { display: none; }
.pin-cue svg { width: 100%; height: 100%; overflow: visible; }
.pin-cue circle { fill: none; stroke-width: 3; }
.cue-track { stroke: color-mix(in srgb, currentColor 22%, transparent); }
.cue-ring { stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.cue-arrow { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pin-cue:hover .cue-track { stroke: color-mix(in srgb, currentColor 40%, transparent); }

/* ---------- Gentle mode: normal scrolling, things fade and rise once as they appear ---------- */
.gentle .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--rvd, 0ms), transform .9s var(--ease) var(--rvd, 0ms); }
.gentle .rv.in { opacity: 1; transform: none; }
html.gentle { scroll-behavior: smooth; }

/* ---------- First-visit chooser ---------- */
.chooser {
  position: fixed; inset: 0; z-index: 65; overflow: auto; overscroll-behavior: contain;
  display: grid; align-content: safe center; justify-items: center; gap: clamp(18px, 3svh, 32px);
  padding: 72px var(--gut) 28px; text-align: center;
}
.chooser[hidden] { display: none; }
.ch-step { display: grid; justify-items: center; gap: clamp(18px, 3.5svh, 36px); width: min(100%, 1200px); }
.ch-step[hidden] { display: none; }
.ch-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }
.ch-h { font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -.025em; font-variation-settings: "wght" 820, "wdth" 100; text-wrap: balance; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); width: 100%; }
.ccard {
  appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left;
  display: grid; grid-template-rows: 1fr auto auto; gap: 10px; min-height: clamp(220px, 38svh, 360px);
  padding: clamp(18px, 2.2vw, 28px); border-radius: 16px; overflow: hidden;
  transition: transform .5s var(--ease);
}
.ccard:hover { transform: translateY(-4px); }
.ccard:active { transform: scale(.98); }
.cc-t { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -.015em; font-variation-settings: "wght" 800, "wdth" 104; }
.cc-d { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.4; font-variation-settings: "wght" 460, "wdth" 100; }
.cc-art { display: grid; place-items: center; min-height: 120px; }
/* more movement: the word never sits still */
.cm-full .cc-art { display: flex; justify-content: center; align-items: center; font-size: clamp(2.2rem, 4.4vw, 4rem); font-variation-settings: "wght" 900, "wdth" 120; letter-spacing: -.02em; }
.cm-full .cc-art i { display: inline-block; font-style: normal; animation: cc-wave 1.1s cubic-bezier(.45, 0, .55, 1) calc(var(--i) * -0.12s) infinite alternate; }
@keyframes cc-wave { from { transform: translateY(14%) rotate(-7deg) scaleY(.9); } to { transform: translateY(-14%) rotate(7deg) scaleY(1.08); } }
/* easier to read: three lines settle once, then rest */
.cm-gentle .cc-art { display: grid; gap: 12px; justify-items: start; align-content: center; place-items: center start; }
.cm-gentle .cc-art i { display: block; height: 12px; border-radius: 6px; background: currentColor; opacity: .85; animation: cc-settle 1.4s var(--ease) both; }
.cm-gentle .cc-art i:nth-child(1) { width: 90%; } .cm-gentle .cc-art i:nth-child(2) { width: 76%; animation-delay: .25s; } .cm-gentle .cc-art i:nth-child(3) { width: 58%; animation-delay: .5s; }
@keyframes cc-settle { from { opacity: 0; transform: translateY(10px); } }
/* reduced: nothing moves */
.cm-still .cc-art svg { width: 72px; height: 72px; fill: currentColor; }
/* colour cards: each one is drawn in its own palette */
.tc { padding: 0; display: block; }
.tc-in { display: grid; grid-template-rows: 1fr auto auto; gap: 10px; height: 100%; min-height: inherit; padding: clamp(18px, 2.2vw, 28px); border-radius: 16px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.mini { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 120px; }
.mini > span { border-radius: 10px; position: relative; overflow: hidden; }
/* the accent each palette keeps, drawn as a stripe on its quiet field */
.mini > span:last-child::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 22%; height: 6px; border-radius: 3px; background: var(--red); }
.mini > span:first-child { grid-row: span 2; display: grid; place-items: center; font-size: clamp(2.4rem, 4vw, 3.6rem); font-variation-settings: "wght" 850, "wdth" 100; }
.ch-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; font-size: .95rem; color: color-mix(in srgb, currentColor 78%, transparent); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
.seg span { padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-variation-settings: "wght" 650, "wdth" 110; transition: background .3s var(--ease), color .3s var(--ease); }
.seg[aria-pressed="false"] span:first-child, .seg[aria-pressed="true"] span:last-child { background: currentColor; }
.seg[aria-pressed="false"] span:first-child > b, .seg[aria-pressed="true"] span:last-child > b { color: var(--ink); }
.seg b { font-weight: inherit; font-variation-settings: inherit; }
.ch-skip { appearance: none; border: 0; background: none; color: inherit; font: inherit; font-variation-settings: "wght" 700, "wdth" 108; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; padding: 8px 4px; }
.choosing .pin-cue { visibility: hidden !important; }
@media (max-width: 760px) {
  .chooser { align-content: start; }
  .cards { grid-template-columns: 1fr; }
  .ccard { min-height: 0; grid-template-rows: auto auto auto; }
  .cc-art, .mini { min-height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-full .cc-art i, .cm-gentle .cc-art i { animation: none; }
  .ccard { transition: none; }
}

/* ---------- Footer ---------- */
.foot {
  padding: clamp(48px, 9svh, 96px) var(--gut) 28px;
  display: grid; gap: 40px; text-align: left;
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px 40px; }
.foot h2 { font-size: .9rem; font-variation-settings: "wght" 700, "wdth" 115; margin-bottom: 12px; color: inherit; }   /* red at this size was 3.94–4.25:1 in the light palettes */
.foot ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.foot li, .foot p { font-size: 1rem; line-height: 1.5; font-variation-settings: "wght" 420, "wdth" 100; }
.foot a { text-underline-offset: .25em; text-decoration-thickness: 1px; }
.foot a:hover { color: var(--red); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .85rem; color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }

/* ---------- Wipe (page and language transitions) ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 70; visibility: hidden;
  display: grid; place-items: center; padding: 0 var(--gut);
  background: var(--red); color: var(--ink); clip-path: inset(100% 0 0 0);
}
.arriving .wipe { visibility: visible; clip-path: inset(0 0 0 0); }
.wipe-word { font-size: var(--t-display); line-height: 1; letter-spacing: -.02em; white-space: nowrap; clip-path: inset(-20% -50vw 0 -50vw); padding-bottom: .06em; }
.wipe-word .c { --w: 860; }

/* Before the first split, hide only what is about to animate in (with a fallback if scripts fail) */
.motion:not(.ready) [data-intro] { visibility: hidden; animation: shown 0s 2.5s forwards; }
@keyframes shown { to { visibility: visible; } }

@media (max-width: 640px) {
  .tool { padding: 0 11px; font-size: .82rem; }
  .tool .lbl { display: none; }
  .mark { font-size: .95rem; }
}
@media (prefers-contrast: more) {
  .menu-foot, .foot-base { color: inherit; }
}