/* =========================================================================
   Hangar — client landing (calisma6)
   Black stage, one chartreuse accent, monospace UI labels. A single fixed
   Three.js handheld travels through the page while the chapters scroll past.
   ========================================================================= */

:root {
  --bg: #000;
  --bg-2: #070707;
  --surface: #0d0d0d;
  --surface-2: #141414;
  --surface-3: #1c1c1c;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --line-3: rgba(255, 255, 255, .32);
  --text: #f2f2f2;
  --soft: #cfcfcf;
  --muted: #8e8e8e;
  --dim: #5e5e5e;
  --accent: #d3d86a;
  --accent-2: #e6e9ae;
  --accent-ink: #0c0d02;
  --accent-soft: rgba(211, 216, 106, .1);
  --bad: #e0776e;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wide: 'Michroma', 'Geist', sans-serif;
  --gutter: clamp(18px, 3vw, 40px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; color: var(--soft); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(211, 216, 106, .35); color: #fff; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 50; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--mono); transform: translateY(-160%); }
.skip:focus { transform: none; }

/* ---------- Stage (fixed 3D layer) ---------- */
/* studio backdrop: a soft lighter band behind the device that falls off to black, as in the reference */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 72% at 50% 42%, #141414 0%, #0b0b0b 34%, #050505 64%, #000 100%); }
/* never fully 0 while hidden: Chrome skips drawing opacity-0 layers, and the first real draw would then stall the opening */
.stage { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .001; transition: opacity .9s ease; }
.stage.is-ready { opacity: 1; }
/* soft spotlight that follows the device, like the studio glow in the reference */
.stage-glow { position: fixed; left: 0; top: 0; z-index: 0; width: 1200px; height: 900px; margin: -450px 0 0 -600px; background: radial-gradient(closest-side, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 55%, transparent); pointer-events: none; transform: translate3d(50vw, 50vh, 0); will-change: transform; }
.orbit { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.orbit-poster { position: absolute; left: 0; top: 0; width: 100px; height: 150px; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 16px 36px rgba(0, 0, 0, .7); transform: translate3d(-400px, -400px, 0); will-change: transform, opacity; }
.orbit-poster img { width: 100%; height: 100%; object-fit: cover; }
.orbit-ring { position: absolute; left: 0; top: 0; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%; transform-origin: 50% 50%; will-change: transform, opacity; }
.orbit-ring.is-front { clip-path: inset(50% 0 0 0); }
.no-webgl .orbit { display: none; }
.fliers { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.flier { position: absolute; left: 0; top: 0; width: 100px; height: 150px; border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: 0 14px 34px rgba(0, 0, 0, .65); transform-origin: 0 0; opacity: .001; transform: translate3d(-400px, -400px, 0); will-change: transform, opacity; }
.flier img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 var(--gutter); background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
.hdr-menu { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; border: 0; background: none; color: var(--soft); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; cursor: pointer; }
.hdr-menu-ic { display: grid; gap: 3px; }
.hdr-menu-ic i { display: block; width: 13px; height: 1.5px; background: currentColor; }
.hdr-menu-ic i:last-child { width: 9px; }
.hdr-brand { color: #fff; font: 400 16px/1 var(--wide); white-space: nowrap; }
.hdr-brand i { margin: 0 .34em; color: var(--muted); font-style: normal; }
.hdr-right { justify-self: end; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.hdr-lib { display: inline-flex; align-items: center; gap: 9px; padding: 8px 0; color: var(--soft); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; transition: color .2s, opacity .8s ease, transform 1s var(--ease); }
.hdr-lib:hover, .hdr-lib[aria-current] { color: #fff; }
.hdr-lib .ic-lib { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hdr-cta { display: inline-flex; align-items: center; gap: clamp(18px, 4vw, 64px); height: 40px; padding-left: 18px; border-left: 1px solid var(--line-3); color: var(--soft); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; transition: color .2s; }
.hdr-cta:hover { color: #fff; }
.hdr-cta svg { width: 14px; height: 14px; }
.hdr-cta, .hdr-lib { white-space: nowrap; }
.hdr-cta-txt { display: inline-flex; align-items: center; gap: 10px; }
.hdr-cta .ic-win { width: 13px; height: 13px; flex: none; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 2; height: 100vh; height: 100svh; }
.hud { position: absolute; top: 98px; color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; }
.hud-l { left: var(--gutter); }
.hud-r { right: var(--gutter); }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 116px; will-change: transform, opacity; display: grid; justify-items: center; gap: 14px; padding: 0 var(--gutter); text-align: center; }
.hero-title { color: var(--text); font: 300 clamp(26px, 2.8vw, 40px)/1.1 var(--sans); letter-spacing: -.03em; }
.hero-scroll { color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .16em; }

/* ANIMUS: animated, clickable hero scroll indicator. Works with the existing #nedir jump handler. */
.hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px 0;
  color: #9b9b9b;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-scroll-label { display: block; animation: animus-scroll-pulse 2.25s ease-in-out infinite; }
.hero-scroll-arrow {
  display: block;
  width: 20px;
  height: 29px;
  color: var(--accent);
  animation: animus-scroll-down 1.8s cubic-bezier(.42, 0, .58, 1) infinite;
  filter: drop-shadow(0 0 5px rgba(211,216,106,.25));
}
.hero-scroll-arrow svg { display: block; width: 100%; height: 100%; }
.hero-scroll:hover, .hero-scroll:focus-visible { color: var(--text); }
.hero-scroll:hover .hero-scroll-label, .hero-scroll:focus-visible .hero-scroll-label { animation-play-state: paused; }
.hero-scroll:hover .hero-scroll-arrow, .hero-scroll:focus-visible .hero-scroll-arrow { color: var(--accent-2); animation-duration: 1.15s; }
@keyframes animus-scroll-down {
  0%, 100% { transform: translate3d(0, -4px, 0); opacity: .55; }
  52% { transform: translate3d(0, 7px, 0); opacity: 1; }
}
@keyframes animus-scroll-pulse {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-label, .hero-scroll-arrow { animation: none !important; }
}

/* ---------- Pinned chapters ---------- */
.chapter { position: relative; z-index: 2; height: var(--len, 200vh); }
.pin { position: sticky; top: 0; display: grid; align-items: center; height: 100vh; height: 100svh; padding: 96px var(--gutter) 120px; }
.copy { position: relative; width: min(540px, 40vw); }
.copy-wide { width: min(600px, 43vw); }
.side-l .copy { justify-self: start; margin-left: clamp(0px, 2.5vw, 48px); }
.side-r .copy { justify-self: end; margin-right: clamp(0px, 2.5vw, 48px); }
.label { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--muted); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; }
.label b { color: var(--accent); font-weight: 500; }
.copy h2, .games h2, .final h2 { color: var(--text); font: 400 clamp(36px, 4.2vw, 64px)/1.03 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.soon h2 { color: var(--text); font: 400 30px/1.1 var(--sans); letter-spacing: -.035em; }
.copy h2 + p { margin-top: 22px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.tags li { padding: 7px 10px; border-radius: 6px; background: var(--surface-2); color: var(--soft); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; }
.stats { display: flex; gap: clamp(20px, 3vw, 40px); margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.stats dt { color: var(--text); font: 400 26px/1 var(--sans); letter-spacing: -.02em; }
.stats dd { margin-top: 9px; color: var(--dim); font: 500 10px/1 var(--mono); letter-spacing: .12em; }

/* install steps follow the install bar on the handheld's screen */
.install { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.install li { display: grid; gap: 10px; color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; transition: color .3s; }
.install li span { transition: color .3s; }
.install li i { position: relative; display: block; height: 2px; background: var(--line-2); overflow: hidden; }
.install li i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--f, 0)); }
.install li.is-on { color: var(--soft); }
.install li.is-done span { color: var(--accent); }
.readout { margin-top: 18px; color: var(--dim); font: 500 10.5px/1.6 var(--mono); letter-spacing: .1em; }
.readout b { color: var(--accent); font-weight: 500; }

/* tabs in the reference's style: numeral over label, active one bracketed and underlined */
.tabs { display: flex; margin-top: 26px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; flex: 1; display: grid; justify-items: center; gap: 9px; padding: 12px 6px 15px; border: 0; background: none; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .12em; cursor: pointer; transition: color .25s; }
.tabs button b { font-weight: 500; }
.tabs button:hover { color: var(--soft); }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--soft); transform: scaleX(0); transition: transform .5s var(--ease); }
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after { transform: none; }
.tabs button[aria-selected="true"] span::before { content: "• ["; }
.tabs button[aria-selected="true"] span::after { content: "]"; }

.lines { display: grid; gap: 16px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; gap: 14px; }
.line span { color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .12em; }
.line em { display: grid; font: 400 clamp(19px, 1.7vw, 25px)/1.35 var(--sans); font-style: normal; letter-spacing: -.02em; text-wrap: balance; }
.line em > i { grid-area: 1 / 1; font-style: normal; opacity: 0; transition: opacity .3s ease; }
.line-en em > i { align-self: end; color: var(--muted); }
.line-en em > i.is-on { opacity: calc(1 - var(--sw) * .6); }
.line-tr span { color: var(--accent); }
.line-tr em > i { align-self: start; color: var(--text); }
.line-tr em > i.is-on { opacity: var(--sw); transform: translate3d(0, calc((1 - var(--sw)) * 12px), 0); }
.no-webgl .lines { --sw: 1 !important; }
.line-count { margin-top: 4px; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .12em; }
.line-count b { color: var(--accent); font-weight: 500; }

/* ---------- Manifesto ---------- */
.manifesto .pin { justify-items: center; }
.manifesto-text { max-width: 1200px; color: var(--text); font: 300 clamp(32px, 4.5vw, 70px)/1.2 var(--sans); letter-spacing: -.03em; text-align: center; text-wrap: balance; will-change: opacity; }
.chip { display: inline-block; width: .74em; height: 1.08em; margin: 0 .05em; vertical-align: -.2em; border-radius: .14em; overflow: hidden; background: var(--surface-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
.chip img { width: 100%; height: 100%; object-fit: cover; }
.chip.is-away { visibility: hidden; }
.manifesto-text .w { display: inline-block; opacity: calc(var(--p, 0) * .999 + .001); will-change: transform, opacity, filter; filter: blur(calc((1 - var(--p, 0)) * 14px)); transform: translate3d(0, calc((1 - var(--p, 0)) * .55em), 0); }

/* ---------- Library cards ---------- */
.games { position: relative; z-index: 2; padding: clamp(110px, 14vw, 170px) 0 clamp(90px, 10vw, 130px); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.games-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 30px; margin-bottom: 44px; }
.games-head .tabs { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; transition: opacity .2s ease; }
.cards.is-swapping { opacity: 0; }
.card { display: grid; gap: 12px; }
.card-art { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.card-art img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) saturate(.9); transition: transform .8s var(--ease), filter .5s; }
.card:hover .card-art img { filter: none; transform: scale(1.05); }
/* HUD corner brackets instead of a border */
.card-art::before, .card-art::after { content: ""; position: absolute; z-index: 2; width: 18px; height: 18px; border: 0 solid var(--accent); opacity: 0; transition: opacity .3s, transform .45s var(--ease); pointer-events: none; }
.card-art::before { left: 10px; top: 10px; border-width: 1.5px 0 0 1.5px; transform: translate(5px, 5px); }
.card-art::after { right: 10px; bottom: 10px; border-width: 0 1.5px 1.5px 0; transform: translate(-5px, -5px); }
.card:hover .card-art::before, .card:hover .card-art::after { opacity: 1; transform: none; }
.card-badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 5px 7px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: var(--soft); font: 500 9.5px/1 var(--mono); letter-spacing: .1em; }
.card-badge.is-dub { background: var(--accent); color: var(--accent-ink); }
.card-meta { display: grid; gap: 6px; }
.card-meta span { color: var(--dim); font: 500 10px/1 var(--mono); letter-spacing: .12em; }
.card-meta strong { color: var(--text); font: 500 15px/1.3 var(--sans); letter-spacing: -.01em; }
.card-meta em { color: var(--muted); font: 500 10px/1.4 var(--mono); font-style: normal; letter-spacing: .08em; }
.card-meta em::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.card[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.card[data-reveal].is-in { opacity: 1; transform: none; }
.more { display: inline-flex; align-items: center; gap: 14px; margin-top: 50px; color: var(--soft); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; transition: color .2s, gap .3s var(--ease); }
.more:hover { color: #fff; gap: 20px; }
.more svg { width: 14px; height: 14px; }

/* ---------- Final ---------- */
.final { position: relative; z-index: 2; display: grid; align-items: end; justify-items: center; height: 115vh; height: 115svh; padding: 0 var(--gutter) 13vh; text-align: center; }
.final-copy { display: grid; justify-items: center; }
.final h2 { max-width: 620px; }
.btn-lime { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; height: 52px; margin-top: 30px; padding: 0 20px 0 24px; border: 0; border-radius: 2px; background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--mono); letter-spacing: .12em; cursor: pointer; transition: background-color .2s, gap .3s var(--ease); }
.btn-lime:hover { background: var(--accent-2); gap: 38px; }
.btn-lime svg { width: 14px; height: 14px; }
.specs { margin-top: 18px; color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; }

/* ---------- Footer ---------- */
.ftr { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px var(--gutter) 30px; border-top: 1px solid var(--line); color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; }
.ftr nav { display: flex; gap: 24px; }
.ftr a { color: var(--muted); transition: color .2s; }
.ftr a:hover { color: #fff; }

/* ---------- Docked chapter tabs ---------- */
.steps { position: fixed; left: 50%; bottom: 26px; z-index: 15; display: flex; width: min(430px, calc(100vw - 2 * var(--gutter))); border-bottom: 1px solid var(--line); transform: translateX(-50%); transition: opacity .45s ease, transform .6s var(--ease); }
.steps.is-hidden { opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }
.steps a { position: relative; flex: 1; display: grid; justify-items: center; gap: 9px; padding: 0 0 14px; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .12em; transition: color .25s; }
.steps a b { font-weight: 500; }
.steps a:hover { color: var(--soft); }
.steps a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--soft); transform: scaleX(0); transition: transform .55s var(--ease); }
.steps a.is-active { color: var(--text); }
.steps a.is-active::after { transform: none; }
.steps a.is-active span::before { content: "• ["; }
.steps a.is-active span::after { content: "]"; }

/* ---------- Dialogs ---------- */
.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 110px var(--gutter) 40px; border: 0; background: rgba(0, 0, 0, .95); color: var(--text); overflow: auto; }
.menu::backdrop { background: transparent; }
.menu[open] { animation: fade .35s ease; }
.menu-close { position: absolute; top: 30px; left: var(--gutter); padding: 8px 0; border: 0; background: none; color: var(--soft); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; cursor: pointer; }
.menu nav { display: grid; max-width: 900px; }
.menu nav a { display: flex; align-items: baseline; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); font: 300 clamp(32px, 5.4vw, 64px)/1 var(--sans); letter-spacing: -.035em; transition: color .2s, padding-left .45s var(--ease); }
.menu nav a b { width: 48px; flex: none; color: var(--accent); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; }
.menu nav a:hover { padding-left: 14px; }
.menu-discord { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; color: var(--accent); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; }
.menu-discord svg { width: 14px; height: 14px; }
.soon { width: min(470px, calc(100vw - 32px)); padding: 32px 32px 28px; border: 0; border-radius: 14px; background: #0b0b0b; color: var(--soft); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 120px rgba(0, 0, 0, .85); }
.soon::backdrop { background: rgba(0, 0, 0, .72); }
.soon[open] { animation: rise .5s var(--ease); }
.soon > p:not(.label) { margin-top: 12px; color: var(--muted); line-height: 1.6; }
.soon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.soon-actions .btn-lime { margin: 0; }
.btn-ghost { height: 52px; padding: 0 20px; border: 0; border-radius: 2px; background: var(--surface-3); color: var(--soft); font: 500 12px/1 var(--mono); letter-spacing: .1em; cursor: pointer; transition: background-color .2s; }
.btn-ghost:hover { background: #262626; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Film: the play button on the handheld's screen and the player it opens ---------- */
/* experience.js sizes the button to the handheld's screen and moves it with the device; the icon takes the screen logo's place */
.film-play { position: fixed; left: 0; top: 0; z-index: 3; width: var(--w, 0px); height: var(--h, 0px); padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; visibility: hidden; transform: translate3d(-999px, -999px, 0); -webkit-tap-highlight-color: transparent; }
.film-play:focus-visible { outline: none; }
.film-play-ic { position: absolute; left: 50%; top: var(--py, 29%); isolation: isolate; display: grid; place-items: center; width: var(--d, 60px); height: var(--d, 60px); margin: calc(var(--d, 60px) / -2) 0 0 calc(var(--d, 60px) / -2); border-radius: 50%; color: var(--accent); background: rgba(211, 216, 106, .1); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 24px rgba(211, 216, 106, .3); transition: background-color .3s, color .3s, box-shadow .3s; }
.film-play-ic svg { width: 36%; height: 36%; margin-left: 6%; fill: currentColor; }
/* the blink: a ring pings out of the icon while its glow breathes */
.film-play-ic::before, .film-play-ic::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.film-play-ic::before { inset: 0; box-shadow: inset 0 0 0 1.5px var(--accent); animation: film-ping 2.2s cubic-bezier(.2, .6, .35, 1) infinite; }
.film-play-ic::after { inset: -60%; z-index: -1; background: radial-gradient(closest-side, rgba(211, 216, 106, .34), rgba(211, 216, 106, 0)); animation: film-breathe 2.2s ease-in-out infinite; }
.film-play:hover .film-play-ic, .film-play:focus-visible .film-play-ic { color: var(--accent-ink); background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 36px rgba(211, 216, 106, .55); }
.film-play:focus-visible .film-play-ic { outline: 1.5px solid var(--accent); outline-offset: 6px; }
@keyframes film-ping { 0% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes film-breathe { 0%, 100% { opacity: .3; } 35% { opacity: 1; } }
/* without WebGL there is no handheld: the button stands on its own in the hero */
.no-webgl .film-play { position: absolute; top: 42%; left: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; visibility: visible; transform: none; }
.no-webgl .film-play-ic { --d: 76px; --py: 50%; }

/* main.js grows .film-frame out of the handheld's screen (transform + clip-path) and shrinks it back on close */
html.is-film { overflow: hidden; }
.film { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: var(--soft); overflow: hidden; }
.film[open] { display: grid; place-items: center; }
.film:focus, .film:focus-visible { outline: none; }
.film::backdrop { background: transparent; }
.film-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .94); }
.film-box { position: relative; width: min(1180px, calc(100vw - 2 * var(--gutter)), calc((100vh - 170px) * 16 / 9)); width: min(1180px, calc(100vw - 2 * var(--gutter)), calc((100svh - 170px) * 16 / 9)); }
.film-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.film-head .label { margin: 0; }
.film-close { padding: 8px 0; border: 0; background: none; color: var(--soft); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; cursor: pointer; transition: color .2s; }
.film-close:hover { color: #fff; }
.film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #050505; transform-origin: 0 0; }
.film-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.film-wait { position: absolute; left: 0; right: 0; top: 50%; margin-top: -6px; color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-align: center; opacity: 0; transition: opacity .3s; pointer-events: none; }
.film.is-waiting .film-wait { opacity: 1; transition-delay: .5s; }
.film-center { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; color: var(--accent); background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1.5px var(--accent); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .45s var(--ease); pointer-events: none; }
.film-center svg { width: 30px; height: 30px; fill: currentColor; }
.film-center .i-play { margin-left: 4px; }
.film.is-paused .film-center, .film.is-ended .film-center { opacity: 1; transform: none; }
.film.is-closing .film-center { opacity: 0; transition-duration: .15s; }
.film-bar { display: flex; align-items: center; gap: 12px; height: 48px; margin-top: 8px; }
.film-btn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--soft); cursor: pointer; transition: color .2s, background-color .2s; }
.film-btn:hover { color: #fff; background: var(--surface-3); }
.film-btn svg { width: 18px; height: 18px; fill: currentColor; }
.film-time { flex: none; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.film-track { position: relative; flex: 1; min-width: 60px; height: 28px; cursor: pointer; touch-action: none; }
.film-track:focus-visible { outline-offset: 0; }
.film-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line-2); overflow: hidden; transition: transform .2s var(--ease); }
.film-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.film-track:hover .film-line, .film-track.is-drag .film-line { transform: scaleY(2); }
/* one icon per state: playing shows pause, paused shows play, ended shows replay */
.film-btn .i-play, .film .i-again, .film .i-muted { display: none; }
.film.is-paused .film-btn .i-play, .film.is-ended .i-again, .film.is-muted .i-muted { display: block; }
.film.is-paused .i-pause, .film.is-ended .i-pause, .film.is-ended .i-play, .film.is-muted .i-sound { display: none; }

/* ---------- Loader and opening ---------- */
/* .js and .is-loading come from an inline script in <head>, so without JavaScript the page is simply shown */
html { scrollbar-gutter: stable; }
html.is-loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 40; display: none; place-content: center; justify-items: center; gap: 22px; pointer-events: none; }
.is-loading .loader, .loader.is-leaving { display: grid; }
.loader-mark { color: #fff; font: 400 clamp(20px, 5.4vw, 32px)/1 var(--wide); white-space: nowrap; will-change: transform, opacity; }
.loader-mark i { margin: 0 .34em; color: var(--muted); font-style: normal; }
.loader-line { position: relative; width: 180px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.loader-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .45s var(--ease); }
.loader-pct { color: var(--dim); font: 500 10.5px/1 var(--mono); letter-spacing: .16em; }
.loader.is-leaving .loader-line, .loader.is-leaving .loader-pct { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .3s ease, transform .6s var(--ease); }
/* the wordmark flies to the header's (main.js sets the transform) and hands over to it as it lands */
.loader.is-leaving .loader-mark { opacity: 0; transition: transform 1s var(--ease), opacity .2s linear .85s; }
.hdr-menu { transition: opacity .8s ease, transform 1s var(--ease); }
.hdr-cta { transition: color .2s, opacity .8s ease, transform 1s var(--ease); }
.hud, .hero-scroll { transition: opacity 1s ease; }
.is-loading .hdr-menu, .is-loading .hdr-lib, .is-loading .hdr-cta { opacity: 0; transform: translate3d(0, -12px, 0); }
.is-loading .hdr-brand, .is-loading .hud, .is-loading .hero-scroll { opacity: 0; }
.is-loading .steps { opacity: 0; transform: translate(-50%, 14px); }
.is-intro .hdr-brand { transition: opacity .2s linear .85s; }
.is-intro .hdr-menu { transition-delay: .95s; }
.is-intro .hdr-lib { transition-delay: 0s, 1.05s, 1.05s; }
.is-intro .hdr-cta { transition-delay: 0s, 1.05s, 1.05s; }
.is-intro .hud { transition-delay: 1.35s; }
.is-intro .hero-scroll { transition-delay: 2.1s; }
.is-intro .steps { transition-delay: 1.95s; }

/* ---------- Heading and block reveals ---------- */
/* main.js wraps each word of [data-split] headings in a mask; they rise in with the opening (hero) or when their block scrolls in */
.rise { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .04em .2em; margin: -.1em -.04em -.2em; }
.rise > span { display: inline-block; transition: transform 1.1s var(--ease); transition-delay: calc(.08s + var(--i, 0) * .07s); }
.is-loading .hero-title .rise > span, .js [data-enter]:not(.is-in) .rise > span { transform: translate3d(0, 118%, 0); }
.is-intro .hero-title .rise > span { transition-delay: calc(1.3s + var(--i, 0) * .09s); }
[data-enter] .label, .more[data-enter] { transition: opacity .8s ease, transform 1s var(--ease), color .2s, gap .3s var(--ease); }
.games-head .tabs button { transition: color .25s, opacity .8s ease, transform 1s var(--ease); }
.final-copy .btn-lime { transition: background-color .2s, gap .3s var(--ease), opacity .8s ease, transform 1s var(--ease); }
.final-copy .specs { transition: opacity .8s ease, transform 1s var(--ease); }
.js [data-enter]:not(.is-in) .label, .js .more[data-enter]:not(.is-in), .js [data-enter]:not(.is-in) .tabs button,
.js [data-enter]:not(.is-in) .btn-lime, .js [data-enter]:not(.is-in) .specs { opacity: 0; transform: translate3d(0, 16px, 0); }
.games-head .tabs button:nth-child(2) { --n: 1; }
.games-head .tabs button:nth-child(3) { --n: 2; }
.games-head.is-in .tabs button { transition-delay: 0s, calc(.35s + var(--n, 0) * .08s), calc(.35s + var(--n, 0) * .08s); }
.final-copy.is-in .btn-lime { transition-delay: 0s, 0s, .5s, .5s; }
.final-copy.is-in .specs { transition-delay: .65s; }
/* while the default list flies in from the handheld, experience.js drives each card instead of the scroll reveal */
.cards.is-flight .card[data-reveal] { opacity: 1; transform: none; transition: none; }
.flier.is-card img { filter: brightness(.88) saturate(.9); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .games-head { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hdr-right { gap: 20px; }
  .hdr-cta { gap: 22px; }
}
@media (max-width: 700px) {
  .hdr-lib { display: none; }
}
@media (max-width: 860px) {
  /* the handheld takes the top of the screen, the copy sits underneath */
  .pin { align-items: end; padding: 90px var(--gutter) 96px; }
  .pin::before { content: ""; position: absolute; inset: auto 0 0; height: 62%; background: linear-gradient(0deg, rgba(0, 0, 0, 0), #000 14%, #000 58%, rgba(0, 0, 0, 0)); pointer-events: none; }
  .copy, .copy-wide { width: auto; }
  .side-l .copy, .side-r .copy { justify-self: stretch; margin: 0; }
  .copy h2 { font-size: clamp(30px, 8vw, 40px); }
  .copy h2 + p { margin-top: 12px; font-size: 15.5px; }
  .tags, .stats { margin-top: 18px; }
  .stats { padding-top: 16px; }
  .install { margin-top: 18px; }
  .lines { margin-top: 20px; padding-top: 16px; gap: 10px; }
  .line em { font-size: 16.5px; }
  .manifesto .pin { align-items: center; }
  .hud { top: 86px; }
  .hud-r { display: none; }
  .hero-foot { bottom: 100px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .ftr { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .hdr-lib { display: none; }
  .hdr-cta { padding-left: 14px; gap: 0; }
  .hdr-cta > svg { display: none; }
  .hdr-cta-txt { gap: 8px; }
  .hdr-cta-txt span { font-size: 0; }
  .hdr-cta-txt span::before { content: "İNDİR"; font-size: 11px; }
  .hdr-brand { font-size: 13px; }
  .steps { bottom: 18px; }
  .film-frame { border-radius: 8px; }
  .film-bar { gap: 4px; }
  .film-time { font-size: 10px; letter-spacing: .04em; }
  .film-center { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .film-center svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .film-play-ic::before, .film-play-ic::after { animation: none !important; }
}

/* ---------- Cursor: a sharp arrow the browser draws itself, so it never lags and its tip is exactly where the click lands.
   It turns lime over anything clickable. Mouse only; touch keeps the system behaviour. ---------- */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 2v18.5l4.6-4.1 3.3 7.2 3.1-1.4-3.2-7H17z' fill='%23f2f2f2' stroke='%230c0d02' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto; }
  :is(a[href], button, select, summary, label, [role="tab"], [role="slider"], .film-track, .film-frame video) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 2v18.5l4.6-4.1 3.3 7.2 3.1-1.4-3.2-7H17z' fill='%23d3d86a' stroke='%230c0d02' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer !important; }
  :is(input, textarea, [contenteditable="true"]) { cursor: text !important; }
  /* full-screen video brings its own controls and pointer */
  :fullscreen, :fullscreen * { cursor: auto !important; }
}

/* Offline accessibility: keep a designed handheld visible when the browser blocks WebGL. */
.device-fallback{display:none;position:absolute;top:43%;left:50%;width:min(770px,75vw);transform:translate(-50%,-50%) rotate(-6deg);z-index:1;pointer-events:none;filter:drop-shadow(0 35px 40px rgba(0,0,0,.85))}
.no-webgl .device-fallback{display:block}.fallback-controller{position:relative;display:flex;width:100%;aspect-ratio:3/1;align-items:stretch;padding:3%;border-radius:65px;background:linear-gradient(135deg,#383b38,#080a09 24%,#1c1e1b 75%,#060807);box-shadow:inset 0 0 0 2px #313631,inset 0 0 20px #000,0 0 65px #1c251653}.fallback-screen{flex:1;overflow:hidden;border-radius:14px;border:7px solid #070a07;background:#0e110c;padding:clamp(8px,1.3vw,19px);box-shadow:inset 0 0 0 1px #454e3b;display:flex;flex-direction:column;gap:8px;min-width:0}.fallback-screen-top{font:600 clamp(6px,.8vw,11px) var(--mono);letter-spacing:.1em;color:#d3d86a;display:flex;justify-content:space-between}.fallback-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;flex:1;min-height:0;opacity:.83}.fallback-gallery img{min-width:0;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #5556}.fallback-screen-footer{color:#a2a997;font:600 clamp(5px,.7vw,9px) var(--mono);letter-spacing:.14em}.fallback-grip{width:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.fallback-stick{width:39%;aspect-ratio:1;border:5px solid #262924;border-radius:50%;background:radial-gradient(circle,#121712 35%,#333831 37%,#070807 63%);box-shadow:0 4px 10px #000}.fallback-dpad{font-size:clamp(16px,4vw,47px);line-height:1;color:#232825;text-shadow:1px 1px #576057}.fallback-buttons{display:grid;grid-template-columns:1fr 1fr;gap:4px;transform:rotate(45deg)}.fallback-buttons i{width:clamp(12px,2.1vw,21px);aspect-ratio:1;border-radius:50%;background:#242a25;box-shadow:inset 1px 1px #586259,0 2px 5px #000}.no-webgl .film-play{top:43%;z-index:4}.no-webgl .film-play-ic{--d:clamp(50px,6.5vw,76px);--py:50%}
@media(max-width:700px){.device-fallback{width:94vw;top:41%}.fallback-controller{border-radius:32px}.fallback-screen{border-width:3px;border-radius:7px}.fallback-grip{gap:4px}.fallback-stick{border-width:2px}.fallback-dpad{font-size:20px}.fallback-screen-top,.fallback-screen-footer{font-size:5px}.no-webgl .film-play{top:41%}}

/* ANIMUS offline progress fallback — visible only if the 3D renderer is unavailable. */
.fallback-progress{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;color:#d3d86a;font:500 clamp(5px,.66vw,9px)/1.25 var(--mono);letter-spacing:.06em}
.fallback-progress-track{height:clamp(3px,.42vw,6px);width:68%;background:rgba(211,216,106,.22);overflow:hidden}
.fallback-progress-fill{display:block;width:0;height:100%;background:#d3d86a;transition:width .09s linear}
.fallback-progress-pct{color:#c1c6ae}
@media(max-width:700px){.fallback-progress{gap:2px;font-size:5px}.fallback-progress-track{height:3px}}

/* The install preview lives in the KUR chapter and inside its device screen. */
#kur .install-device-fallback { left: 26%; top: 47%; width: 44vw; transform: translate(-50%, -50%) rotate(-2deg); }
#kur .install-fallback-screen { padding: 0; justify-content: center; gap: 0; }
#kur .install-fallback-screen canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
@media (max-width: 860px) {
  #kur .install-device-fallback { left: 50%; top: 26%; width: 90vw; transform: translate(-50%, -50%); }
}

/* Hardware fallback: the same catalog canvas stays inside its controller. */
#tara .scan-device-fallback{left:74%;top:47%;width:44vw;transform:translate(-50%,-50%) rotate(2deg)}
#tara .scan-fallback-screen{padding:0;justify-content:center;gap:0}
#tara .scan-fallback-screen canvas{width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
@media(max-width:700px){#tara .scan-device-fallback{left:50%;top:26%;width:90vw;transform:translate(-50%,-50%)}}