/* Huma Film — tek sayfa, sinema dili: siyah plan, beyaz yazı, kayıt kırmızısı */
:root {
  --ink: #111110;
  --black: #000000;
  --paper: #F4F2EE;
  --soft: #C9C6C0;
  --mute: #8A8780;
  --line: #3A3833;
  --card: #ECE9E2;
  --card-ink: #1C1B19;
  --frame: #1C1C1A;
  --rec: #FE0034;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --gutter: 1.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rec); }
:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 300; text-wrap: balance; }

.cap { font-family: var(--sans); font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; }
.eyebrow { color: var(--rec); }
.red { color: var(--rec); }
.dot { display: block; flex: 0 0 auto; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rec); }
.dot-lg { width: 1rem; height: 1rem; }

.skip { position: fixed; left: var(--gutter); top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--paper); color: var(--ink); }
.skip:focus { top: 1rem; }

/* ---------- efekt katmanı ---------- */
.fx { position: relative; z-index: 30; }
.leader { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: var(--ink); pointer-events: none; animation: leaderOut .4s ease 1.55s forwards; }
@keyframes leaderOut { to { opacity: 0; visibility: hidden; } }
.leader-ring { position: relative; display: grid; place-items: center; width: 220px; height: 220px; }
.leader-ring svg { position: absolute; inset: 0; }
.sweep { transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sweep .5s linear 3; }
@keyframes sweep { to { stroke-dashoffset: 0; } }
.leader-nums { position: relative; display: grid; font-family: var(--serif); font-weight: 300; font-size: 5.5rem; line-height: 1; }
.num { grid-area: 1 / 1; opacity: 0; animation: nShow .5s linear; }
.num:nth-child(2) { animation-delay: .5s; }
.num:nth-child(3) { animation-delay: 1s; }
@keyframes nShow { 0%, 100% { opacity: 1; } }
.flash { position: fixed; inset: 0; z-index: 71; background: var(--rec); opacity: 0; pointer-events: none; animation: flash .3s ease-out 1.45s; }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: .75; } 100% { opacity: 0; } }
.dust { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 30; }
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .4;
  background-image: repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 73% 61%, rgba(0,0,0,.25) 0 1px, transparent 1px 4px);
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,1%); } 100% { transform: translate(0,0); } }

.rec { animation: rec 1.6s ease-in-out infinite; }
circle.rec, .dot-pop { transform-box: fill-box; transform-origin: center; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* imleç: yalnızca fareli cihazlarda */
.cur { display: none; position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur-in { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 10px; height: 10px; border-radius: 50%; background: var(--rec); border: 1px solid transparent; transition: width .45s cubic-bezier(.16,.84,.24,1), height .45s cubic-bezier(.16,.84,.24,1), background-color .3s, border-color .3s; }
.cur.is-link .cur-in { width: 38px; height: 38px; background: transparent; border-color: var(--rec); }
.cur.is-label .cur-in { width: 96px; height: 96px; background: rgba(17,17,16,.35); border-color: var(--paper); backdrop-filter: blur(4px); }
.cur-txt { opacity: 0; transition: opacity .3s; color: var(--paper); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }
.cur.is-label .cur-txt { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor .cur { display: block; }
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor input, html.has-cursor textarea { cursor: text !important; }
}

/* ---------- üst bar ve zaman kodu ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(1.5rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.5rem; }
.top-logo { display: block; width: 6.5rem; color: var(--paper); }
.top-logo:hover { color: var(--paper); }
.logo { width: 100%; height: auto; overflow: visible; }
.logo-dot { fill: var(--rec); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.lang { display: flex; gap: .8rem; }
.lang [aria-current] { text-decoration: underline; text-underline-offset: .4em; }
.lang a { color: var(--mute); }
.tc { position: fixed; right: var(--gutter); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; gap: .9rem; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.tc span:first-child { color: var(--mute); }

/* ---------- açılış ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 6rem var(--gutter); text-align: center; }
.hero-logo { width: clamp(15rem, 34vw, 30rem); }
.logo-draw { width: 100%; height: auto; overflow: visible; }
.logo-draw .ln { fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.6,0,.2,1) 1.9s forwards; }
.logo-draw .ln:nth-child(2n) { animation-delay: 2.1s; }
.logo-draw .ln:nth-child(3n) { animation-delay: 2.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.logo-fill { fill: var(--paper); opacity: 0; animation: fadeIn 1.2s ease 4.2s forwards; }
.dot-pop { fill: var(--rec); animation: rec 1.6s ease-in-out 5.5s infinite; }
.hero-msg { max-width: 34rem; text-wrap: balance; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.35; color: var(--soft); animation: fadeIn 1.6s ease 5.3s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hint { position: absolute; bottom: 2.5rem; left: 50%; width: 1px; height: 4rem; overflow: hidden; }
.hint-line { width: 1px; height: 100%; background: var(--paper); animation: hint 2.4s ease-in-out 6s infinite; transform: scaleY(0); }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- showreel ---------- */
.reel-wrap { height: 130vh; display: flex; align-items: center; }
.reel { position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--black); }
.reel-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame { background-color: var(--frame); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); }
.reel-label { position: absolute; left: var(--gutter); bottom: 1.5rem; display: flex; align-items: center; gap: .8rem; color: var(--mute); }

/* ---------- Hüma ---------- */
.huma-pin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; padding: 6rem var(--gutter) 4rem; text-align: center; }
.bird { width: clamp(17rem, 36vw, 32rem); height: auto; stroke: var(--paper); stroke-width: .9; }
.bird .tail-red { stroke: var(--rec); }
.huma-stack { display: flex; flex-direction: column; gap: 2.5rem; max-width: 38rem; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.25; }

/* ---------- storyboard ---------- */
.sb-wrap { position: relative; overflow-x: auto; padding-block: 2rem; }
.sb-head { padding: 6rem var(--gutter) 0; }
.sb-title { margin-top: .8rem; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--soft); }
.sb-track { display: flex; align-items: center; gap: 5vw; width: max-content; padding: 4rem 10vw 2rem; }
.paper { flex: 0 0 auto; width: clamp(16rem, 36vw, 34rem); margin: 0; padding: 1.2rem 1.2rem 1rem; background-color: var(--card); color: var(--card-ink); box-shadow: 0 2rem 4rem -1rem rgba(0,0,0,.7); background-image: repeating-linear-gradient(0deg, rgba(28,27,25,.03) 0 1px, transparent 1px 3px); transform: rotate(var(--tilt)) translateY(var(--lift)); }
.paper-frame { border: 1px solid var(--card-ink); aspect-ratio: 16 / 10; }
.sbd { width: 100%; height: 100%; fill: none; stroke: var(--card-ink); stroke-width: 1.3; stroke-linecap: round; }
.sbd .ink-red { stroke: var(--rec); stroke-width: 1.6; }
.paper figcaption { margin-top: .9rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.sb-cap { font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.sb-end { flex: 0 0 auto; width: clamp(14rem, 30vw, 26rem); display: flex; align-items: center; gap: 1.2rem; }
.sb-end p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.1; }

/* ---------- uçuş rotası ---------- */
.route { padding: 9rem var(--gutter); }
.route-in { max-width: 82rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4rem 5rem; }
.route-text { flex: 1 1 18rem; max-width: 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.route-title { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; }
.route-lead { font-size: 1.05rem; color: var(--soft); }
.route-list { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.route-list li { display: flex; align-items: baseline; gap: 1.2rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; transition: color .3s, padding-left .4s cubic-bezier(.16,.84,.24,1); }
.route-list .n { color: var(--mute); }
.route-list li.on { color: var(--rec); padding-left: .6rem; }
.route-list li.on .n { color: var(--rec); }
.route-map { position: relative; flex: 999 1 24rem; min-width: 0; max-width: 46rem; aspect-ratio: 731 / 650; }
.route-map img, .route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-svg { overflow: visible; }
.route-line { fill: none; stroke: var(--rec); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; }
.lens-link { stroke: var(--paper); stroke-width: .8; stroke-dasharray: 3 4; opacity: .35; }
.pin { fill: var(--rec); transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.16,.84,.24,1); }
.halo { fill: none; stroke: var(--rec); stroke-width: 1; opacity: .45; }
.pin-start circle { fill: none; stroke: var(--paper); stroke-width: 1.2; }
.pin-label, .pin-start text { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--soft); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; transition: fill .3s; }
.pin-g.on .pin { transform: scale(1.7); }
.pin-g.on .pin-label { fill: var(--rec); }
.lens-bg { fill: var(--ink); }
.lens-ring { fill: none; stroke: var(--paper); stroke-width: 1.2; opacity: .7; }
.lens-ring2 { fill: none; stroke: var(--paper); stroke-width: .6; opacity: .3; }
.pin-coord { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .06em; fill: var(--mute); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; }

/* Bölüm görününce: harita bulanıktan netleşip Afrika'ya yaklaşır, rota çizilir, adlar odaklanır */
.route-map { transform-origin: 56% 72%; transition: transform 8s cubic-bezier(.2,.6,.1,1), filter 1.8s ease, opacity 1.4s ease; }
.route.in .route-map { transform: scale(1.1); }
.route-line { transition: stroke-dashoffset 2.6s cubic-bezier(.6,0,.2,1) 1.3s; }
.route .pin, .route .halo, .pin-start circle { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.2,1.6,.4,1) var(--d, 0s); }
.route .pin-g.on .pin { transition-delay: 0s; }
.route .pin-label, .route .pin-coord { transition: opacity 1s ease calc(var(--d, 0s) + .25s), filter 1.2s ease calc(var(--d, 0s) + .25s), fill .3s; }
.route .pin-coord { transition-delay: calc(var(--d, 0s) + .7s); }
.route-title { transition: opacity 1.4s ease, filter 1.6s ease, letter-spacing 2.2s cubic-bezier(.2,.7,.1,1); }
.route-lead, .route-text .eyebrow { transition: opacity 1.2s ease .6s, filter 1.4s ease .6s; }
.trail circle { fill: var(--paper, #f2f0eb); opacity: .6; transform-box: fill-box; transform-origin: center; transition: opacity 1.2s ease var(--d, 0s), transform 1.2s ease var(--d, 0s); }
.js .route:not(.in) .trail circle { opacity: 0; transform: scale(3); }
.js .route:not(.in) .route-map { transform: scale(.94); filter: blur(10px); opacity: .25; }
.js .route:not(.in) .route-line { stroke-dashoffset: 1; }
.js .route:not(.in) .pin, .js .route:not(.in) .halo, .js .route:not(.in) .pin-start circle { transform: scale(0); }
.js .route:not(.in) .pin-label, .js .route:not(.in) .pin-coord { opacity: 0; filter: blur(6px); }
.js .route:not(.in) .route-title { opacity: 0; filter: blur(12px); letter-spacing: .14em; }
.js .route:not(.in) .route-lead, .js .route:not(.in) .route-text .eyebrow { opacity: 0; filter: blur(8px); }

@media (max-width: 40rem) {
  .route { padding-block: 6rem; }
  .pin-label, .pin-start text { font-size: 15px; letter-spacing: .1em; }
  .pin-coord { font-size: 13px; }
  .route-map { transform-origin: 56% 60%; }
  .top { background: linear-gradient(var(--ink) 55%, rgba(17,17,16,0)); padding-bottom: 2.2rem; }
}

/* ---------- hakkında ---------- */
.about { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 8rem var(--gutter); }
.about-in { width: 100%; max-width: 64rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4rem 6rem; }
.portrait { position: relative; flex: 1 1 16rem; max-width: 24rem; aspect-ratio: 4 / 5; overflow: hidden; background-color: #9A968E; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-label { position: absolute; left: 1rem; bottom: 1rem; color: var(--line); }
.about-text { flex: 999 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; max-width: 34rem; color: var(--soft); font-size: 1.05rem; }
.about-text .eyebrow { margin-bottom: .3rem; }
.about-name { margin-bottom: .8rem; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; color: var(--paper); }
.about-person { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.about-person-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: var(--paper); }
.about-person-name .cap { color: var(--rec); }
.about-quote { margin-top: 1.3rem; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; color: var(--paper); }

/* ---------- iletişim: jenerik ---------- */
.contact { padding: 14vh var(--gutter) 0; text-align: center; }
.roll-win { max-width: 50rem; margin: 0 auto; }
.roll { padding-block: 2rem; }
.contact-title { margin-bottom: 7rem; font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.15; }
.credit { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2.5rem; padding-block: 1.4rem; }
.credit .role { flex: 1 1 12rem; text-align: right; color: var(--mute); }
.credit .who { flex: 1 1 12rem; text-align: left; min-width: 0; overflow-wrap: anywhere; font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; }
.contact-cta { margin-top: 7rem; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.mail { background-image: linear-gradient(var(--rec), var(--rec)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .9s cubic-bezier(.16,.84,.24,1), color .4s; }
.mail:hover { background-size: 100% 1px; color: var(--paper); }
@media (max-width: 40rem) { .credit .role, .credit .who { text-align: center; } }

.js .roll-win { height: min(80vh, 44rem); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.js .roll { animation: roll 24s linear infinite; animation-play-state: paused; }
.js .roll-win.rolling .roll { animation-play-state: running; }
.js .roll-win:hover .roll, .js .roll-win:focus-within .roll { animation-play-state: paused; }
@keyframes roll { from { transform: translateY(min(80vh, 44rem)); } to { transform: translateY(-100%); } }

/* ---------- iletişim: form ---------- */
.form-wrap { max-width: 40rem; margin: 6rem auto 0; }
.form-intro { margin-bottom: 4rem; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.4; color: var(--soft); }
.form { display: flex; flex-direction: column; gap: 2.5rem; text-align: left; }
.form-row { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.form-row .field { flex: 1 1 14rem; }
.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.field .cap, .types legend { color: var(--mute); }
.field input, .field textarea { width: 100%; padding: .5rem 0; min-height: 2.75rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--paper); font-family: var(--serif); font-size: 1.35rem; outline: none; transition: border-color .4s; }
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.4; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--rec); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--rec); }
.types { margin: 0; padding: 0; border: 0; }
.types legend { padding: 0; margin-bottom: 1rem; }
.pills { display: flex; flex-wrap: wrap; gap: .7rem; letter-spacing: .2em; color: var(--soft); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.2rem; border: 1px solid var(--line); border-radius: 999px; transition: border-color .3s, background-color .3s, color .3s; cursor: pointer; }
.pill:hover span { border-color: var(--mute); }
.pill input:checked + span { border-color: var(--rec); color: var(--paper); background: rgba(254,0,52,.12); }
.pill input:focus-visible + span { outline: 1px solid var(--paper); outline-offset: 3px; }
.send { display: inline-flex; align-items: center; gap: .9rem; min-height: 3.25rem; padding: 0 2.2rem; border: 1px solid var(--paper); background: transparent; color: var(--paper); font-family: var(--sans); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; cursor: pointer; transition: background-color .5s, color .5s; }
.send:hover { background: var(--paper); color: var(--ink); }
.send[disabled] { opacity: .5; cursor: progress; }
.form-status { padding-block: 3rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; text-align: left; }

.end { min-height: 70vh; padding: 8rem 0 2rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.end::before { content: ""; }
.end-logo { width: clamp(10rem, 18vw, 15rem); color: var(--paper); }
.end-meta { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.end-copy { display: flex; align-items: center; gap: .9rem; color: var(--mute); }
.end-phone { color: var(--line); letter-spacing: .24em; font-variant-numeric: tabular-nums; }
.end-phone:hover { color: var(--mute); }

.meet { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; text-align: left; }
.meet-text { flex: 1 1 16rem; min-width: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; color: var(--soft); }
a.send:hover { color: var(--ink); }

/* ---------- kaydırmaya bağlı koreografi (destekleyen tarayıcılarda) ---------- */
@supports (animation-timeline: view()) {
  .reel { animation: slit linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
  @keyframes slit { from { clip-path: inset(49.6% 0 49.6% 0); } to { clip-path: inset(0 0 0 0); } }
  .reel-media { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes settle { from { transform: scale(1.25); } to { transform: scale(1); } }
  .soft { animation: softIn linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  @keyframes softIn { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

  .huma { height: 420vh; view-timeline-name: --huma; view-timeline-axis: block; }
  .huma-pin { position: sticky; top: 0; height: 100vh; }
  .huma-stack { display: grid; gap: 0; }
  .hl { grid-area: 1 / 1; animation: swap linear both; animation-timeline: --huma; }
  @keyframes swap { 0% { opacity: 0; filter: blur(10px); transform: translateY(1.5rem); } 22%, 78% { opacity: 1; filter: blur(0); transform: none; } 100% { opacity: 0; filter: blur(10px); transform: translateY(-1.5rem); } }
  .h1l { animation-range: contain 2% contain 26%; }
  .h2l { animation-range: contain 24% contain 48%; }
  .h3l { animation-range: contain 46% contain 72%; }
  .h4l { animation-name: stay; animation-range: contain 70% contain 85%; }
  @keyframes stay { from { opacity: 0; filter: blur(10px); transform: translateY(1.5rem); } to { opacity: 1; filter: blur(0); transform: none; } }
  .bird path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw linear forwards; animation-timeline: --huma; animation-range: contain 0% contain 65%; }

  .sb { height: 420vh; view-timeline-name: --sb; view-timeline-axis: block; }
  .sb-wrap { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .sb-head { position: absolute; top: 6rem; left: 0; z-index: 2; padding-top: 0; }
  .sb-track { animation: pan linear both; animation-timeline: --sb; animation-range: contain 0% contain 100%; }
  @keyframes pan { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
  .sbd path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw linear forwards; animation-timeline: --sb; }
  .p1 path { animation-range: contain 0% contain 12%; }
  .p2 path { animation-range: contain 14% contain 30%; }
  .p3 path { animation-range: contain 32% contain 48%; }
  .p4 path { animation-range: contain 50% contain 66%; }
  .p5 path { animation-range: contain 68% contain 84%; }

  .develop { animation: develop linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  @keyframes develop { from { filter: invert(1) sepia(1) saturate(4) hue-rotate(-40deg) brightness(.55) contrast(1.4); } to { filter: none; } }
}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .leader, .flash, .grain, .dust, .hint { display: none; }
  .logo-draw .ln, .bird path, .sbd path { stroke-dashoffset: 0 !important; }
  .logo-fill { opacity: 1; }
  .js .roll-win { height: auto; -webkit-mask-image: none; mask-image: none; }
}