/* ═══════════════════════════════════════════════════════════════
   canberk.tech · instrumented descent
   tokens → floor → acts → mobile art direction
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* six roles, one accent, locked for the page */
  --canvas:#05070B;
  --surface:#0B0F16;
  --surface-2:#111823;
  --ink:#EAF0F6;
  --ink-soft:#8FA0B2;
  --accent:#FF7A18;
  --accent-ink:#0A0A0A;
  --line:rgba(234,240,246,.10);
  --line-2:rgba(234,240,246,.05);

  /* 4px base */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;   --s10:8rem; --s11:12rem;

  --gutter:clamp(1.25rem, 4vw, 4.5rem);
  --section:clamp(5rem, 11vw, 11rem);
  --measure:62ch;

  --t-hero:clamp(2.85rem, 7.4vw, 7.4rem);
  --t-4xl:clamp(2.1rem, 5.2vw, 4.6rem);
  --t-3xl:clamp(1.55rem, 2.9vw, 2.5rem);
  --t-2xl:clamp(1.25rem, 1.9vw, 1.6rem);
  --t-lg:clamp(1.06rem, 1.25vw, 1.22rem);
  --t-md:1rem;
  --t-sm:.875rem;
  --t-xs:.75rem;

  --font-d:"Archivo", system-ui, -apple-system, sans-serif;
  --font-m:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --e-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-d);
  font-size:var(--t-md);
  font-weight:400;
  line-height:1.62;
  letter-spacing:.006em;          /* light-on-dark compensation */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh }

img,video{ display:block; max-width:100% }
a{ color:inherit }
::selection{ background:var(--accent); color:var(--accent-ink) }

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

.wrap{ width:min(1320px, 100% - var(--gutter)*2); margin-inline:auto }

/* ── type floor ───────────────────────────────────────────────── */
.h-display{
  font-size:var(--t-4xl);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin:0;
}
p{ text-wrap:pretty }

.eyebrow{
  font-family:var(--font-m);
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s5);
}
strong,b{ font-weight:600; color:var(--ink) }

.tags{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) 0 0 }
.tags span{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.06em;
  color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px;
  padding:.34rem .55rem;
}

.pill{
  display:inline-block;
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line);
  padding:.3rem .6rem; border-radius:2px; margin:0 0 var(--s5);
}
.pill--live{ color:var(--accent); border-color:rgba(255,122,24,.38) }
.pill--live::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-right:.5rem; vertical-align:middle;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--s5);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.02em;
  text-decoration:none; border-radius:2px;
  transition:transform .35s var(--e-out), background-color .35s, color .35s, border-color .35s;
}
.btn--solid{ background:var(--accent); color:var(--accent-ink) }
.btn--line{ border:1px solid rgba(234,240,246,.28); color:var(--ink) }
.btn:hover{ transform:translateY(-2px) }
.btn--line:hover{ border-color:var(--ink) }

/* ═══════════ boot · authored silence ═══════════ */
.boot{
  position:fixed; inset:0; z-index:200;
  background:var(--canvas);
  display:grid; place-items:center;
  transition:opacity .7s var(--e-out), visibility .7s;
}
.boot.is-done{ opacity:0; visibility:hidden }
.boot__inner{ width:min(360px, 78vw); text-align:left }
.boot__line{
  font-family:var(--font-m); font-size:var(--t-xs);
  letter-spacing:.42em; color:var(--ink); margin:0 0 var(--s4);
}
.boot__bar{ height:1px; background:var(--line); overflow:hidden }
.boot__bar i{ display:block; height:100%; width:0%; background:var(--accent) }
.boot__stat{
  font-family:var(--font-m); font-size:var(--t-xs);
  letter-spacing:.14em; color:var(--ink-soft); margin:var(--s3) 0 0;
}

/* ═══════════ navigation ═══════════ */
.rail{
  position:fixed; left:var(--gutter); top:0; height:100vh; z-index:90;
  display:none; flex-direction:column; justify-content:space-between;
  padding:var(--s6) 0;
  pointer-events:none;
  opacity:0;
}
.rail > *{ pointer-events:auto }
.rail__mark{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.2em;
  text-decoration:none; color:var(--ink);
}
.rail__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) }
.rail__list a{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.1em;
  text-decoration:none; color:var(--ink-soft);
  display:flex; align-items:center; gap:.65rem;
  opacity:.55; transition:opacity .4s, color .4s;
}
.rail__list a::before{
  content:""; width:14px; height:1px; background:currentColor;
  transition:width .45s var(--e-out);
}
.rail__list a:hover{ opacity:1; color:var(--ink) }
.rail__list a.is-now{ opacity:1; color:var(--accent) }
.rail__list a.is-now::before{ width:30px }
.rail__mail{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.08em;
  color:var(--ink-soft); text-decoration:none;
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.rail__mail:hover{ color:var(--accent) }

.topbar{
  position:fixed; inset:0 0 auto 0; z-index:95;
  display:none; align-items:center; justify-content:space-between;
  gap:var(--s4);
  padding:var(--s3) var(--gutter);
  background:rgba(5,7,11,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
  transform:translateY(-102%);
}
.topbar a{ text-decoration:none }
.topbar__mark{ font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.2em }
.topbar__now{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.14em;
  color:var(--accent); flex:1; text-align:center;
}
.topbar__cta{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.1em;
  color:var(--ink-soft);
  min-height:44px; display:inline-flex; align-items:center;
}

/* ═══════════ ACT 1 · ingress ═══════════ */
.ingress{ height:calc(var(--span) * 1vh); position:relative }
.ingress__stage{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:#020407;
}
.plane{ position:absolute; inset:0 }

.plane--video video,
.plane--video .plane__fallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
.plane--video .plane__fallback{ opacity:1; transition:opacity .6s }
.plane--video.is-live .plane__fallback{ opacity:0 }
.plane--video video{ opacity:0; transition:opacity .6s }
.plane--video.is-live video{ opacity:1 }

/* corner density where the copy sits, never a full frame overlay */
.plane--scrim{
  background:
    linear-gradient(100deg, rgba(2,4,7,.96) 0%, rgba(2,4,7,.9) 24%, rgba(2,4,7,.62) 40%, rgba(2,4,7,.16) 55%, rgba(2,4,7,0) 68%),
    linear-gradient(0deg, rgba(2,4,7,.78) 0%, rgba(2,4,7,0) 30%);
  pointer-events:none;
}
.plane--grain{
  pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,0) 1px 3px);
}

.plane--type{ display:flex; align-items:center; pointer-events:none }
.ingress__copy{
  width:min(1320px, 100% - var(--gutter)*2);
  margin-inline:auto;
  perspective:1000px;
  transform-style:preserve-3d;
}
.ingress__copy > *{ pointer-events:auto }

.ingress__name{
  font-size:var(--t-hero);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.042em;
  margin:0 0 var(--s4);
  transform-style:preserve-3d;
}
.ingress__role{
  font-family:var(--font-m);
  font-size:clamp(.72rem,1.05vw,.94rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s6);
}
.ingress__role span{ color:var(--ink-soft) }
.ingress__lede{
  max-width:46ch;
  font-size:var(--t-lg);
  color:var(--ink-soft);
  line-height:1.68;
  margin:0 0 var(--s6);
}
.ingress__acts{ display:flex; flex-wrap:wrap; gap:var(--s3) }

/* the shatter */
.glyph{ position:relative; display:inline-block; transform-style:preserve-3d }
.glyph__sp{ visibility:hidden }
.shard{
  position:absolute; inset:0;
  display:block;
  will-change:transform, opacity, filter;
  backface-visibility:hidden;
}
.sp{ display:inline-block; width:.26em }

/* soft variant: word rise behind a mask */
[data-shatter-soft] .word{ display:inline-block; overflow:hidden; vertical-align:bottom }
[data-shatter-soft] .word i{ display:inline-block; font-style:inherit; will-change:transform }

/* hud */
.plane--hud{ pointer-events:none }
.hud__br{ position:absolute; width:16px; height:16px; opacity:.5 }
.hud__br--tl{ top:var(--s5); left:var(--s5); border-top:1px solid var(--ink); border-left:1px solid var(--ink) }
.hud__br--tr{ top:var(--s5); right:var(--s5); border-top:1px solid var(--ink); border-right:1px solid var(--ink) }
.hud__br--bl{ bottom:var(--s5); left:var(--s5); border-bottom:1px solid var(--ink); border-left:1px solid var(--ink) }
.hud__br--br{ bottom:var(--s5); right:var(--s5); border-bottom:1px solid var(--ink); border-right:1px solid var(--ink) }
.hud__read{
  position:absolute; right:var(--s6); bottom:var(--s6);
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.18em;
  color:var(--ink-soft); display:flex; gap:var(--s3); align-items:baseline;
}
.hud__read i{ font-style:normal; color:var(--accent); min-width:6.5ch; text-align:right }
.hud__rule{
  position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-2);
}
.hud__rule i{ display:block; height:100%; width:0%; background:var(--accent) }

/* ═══════════ ACT 2 · profile ═══════════ */
.profil{
  padding:calc(var(--section) * 1.35) 0 var(--section);
  background:linear-gradient(180deg, #020407 0%, var(--canvas) 22%, var(--canvas) 100%);
}
.profil__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s8) var(--s9);
}
.profil__lede{
  font-size:var(--t-2xl);
  line-height:1.4;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:24ch;
  margin:var(--s6) 0 0;
  font-weight:500;
}
.profil__body p{
  max-width:var(--measure);
  color:var(--ink-soft);
  font-size:var(--t-lg);
  margin:0 0 var(--s5);
}
.profil__body p:last-child{ margin-bottom:0 }

.profil__rail{ display:grid; gap:var(--s5); align-content:start }
.stat{ border-top:1px solid var(--line); padding-top:var(--s3) }
.stat__n{
  display:block;
  font-size:clamp(2.4rem,4.4vw,3.6rem);
  font-weight:700; line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.stat__l{
  font-family:var(--font-m); font-size:var(--t-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  display:block; margin-top:var(--s2);
}
.chips{ margin:var(--s4) 0 0; border-top:1px solid var(--line); padding-top:var(--s4) }
.chips dt{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.chips dd{ margin:var(--s1) 0 var(--s4) }
.chips dd:last-child{ margin-bottom:0 }
.chips a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px }
.chips a:hover{ color:var(--accent); border-color:var(--accent) }

/* reveal primitives */
[data-reveal]{ opacity:0; transform:translateY(18px) }
[data-words] .w{ display:inline-block; overflow:hidden; vertical-align:bottom }
[data-words] .w i{ display:inline-block; font-style:normal; transform:translateY(105%) }

/* ═══════════ ACT 3 · capability ═══════════ */
.uzmanlik{ background:var(--canvas) }
.uzmanlik__pin{ overflow:hidden; padding:var(--section) 0 }
.uzmanlik__head{ margin-bottom:var(--s8) }
.uzmanlik__note{
  max-width:56ch; color:var(--ink-soft); font-size:var(--t-lg); margin:var(--s5) 0 0;
}
.uzmanlik__prog{ height:1px; background:var(--line); margin-top:var(--s6) }
.uzmanlik__prog i{ display:block; height:100%; width:0%; background:var(--accent) }

.track{ display:flex; gap:var(--s5); padding-inline:var(--gutter); will-change:transform }
.card{
  flex:0 0 auto;
  width:min(440px, 82vw);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  padding:var(--s6);
  display:flex; flex-direction:column;
}
.card--hot{ border-color:rgba(255,122,24,.34) }
.card__tag{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.2em;
  color:var(--accent); display:block; margin-bottom:var(--s5);
}
.card h3{
  font-size:var(--t-3xl); font-weight:600; line-height:1.08; letter-spacing:-.022em;
  margin:0 0 var(--s3);
}
.card__sum{ color:var(--ink-soft); font-size:var(--t-sm); margin:0 0 var(--s5); line-height:1.6 }
.card ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) }
.card li{
  font-size:var(--t-sm); line-height:1.6; color:var(--ink-soft);
  padding-left:var(--s4); position:relative;
}
.card li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--accent); opacity:.7;
}
.card li b{ color:var(--ink); font-weight:600 }

/* ═══════════ ACT 4 · record ═══════════ */
.deneyim{ padding:var(--section) 0; background:var(--surface) }
.deneyim__head{ display:grid; gap:var(--s5); margin-bottom:var(--s9) }
.deneyim__note{ max-width:50ch; color:var(--ink-soft); font-size:var(--t-lg); margin:0 }

.tl{ position:relative }
.tl__spine{
  position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line);
}
.tl__spine i{
  display:block; width:100%; height:100%; background:var(--accent);
  transform:scaleY(0); transform-origin:top;
}
.tl__list{ list-style:none; margin:0; padding:0 0 0 var(--s6); display:grid; gap:var(--s8) }
.tl__item{ position:relative; display:grid; gap:var(--s4) }
.tl__item::before{
  content:""; position:absolute; left:calc(var(--s6) * -1); top:.55rem;
  width:7px; height:7px; border-radius:50%;
  background:var(--canvas); border:1px solid var(--ink-soft);
  transform:translateX(-3px);
  transition:background-color .5s, border-color .5s;
}
.tl__item.is-on::before{ background:var(--accent); border-color:var(--accent) }
.tl__meta{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:baseline }
.tl__when{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.14em;
  color:var(--accent); text-transform:uppercase;
}
.tl__field{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.14em;
  color:var(--ink-soft); text-transform:uppercase;
}
.tl__body h3{
  font-size:var(--t-3xl); font-weight:600; line-height:1.1; letter-spacing:-.022em; margin:0;
}
.tl__org{
  font-family:var(--font-m); font-size:var(--t-sm); color:var(--ink);
  margin:var(--s2) 0 var(--s4); letter-spacing:.04em;
}
.tl__org i{ color:var(--ink-soft); font-style:normal; margin-left:.75rem }
.tl__body ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); max-width:76ch }
.tl__body li{
  color:var(--ink-soft); font-size:var(--t-md); line-height:1.62;
  padding-left:var(--s4); position:relative;
}
.tl__body li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:1px; background:var(--ink-soft); opacity:.6;
}

/* ═══════════ ACT 5 · proof ═══════════ */
.projeler{ padding:var(--section) 0 0; background:var(--canvas) }
.projeler__head{ margin-bottom:var(--s9) }
.projeler__note{ max-width:52ch; color:var(--ink-soft); font-size:var(--t-lg); margin:var(--s5) 0 0 }

.uav{
  position:relative;
  min-height:100vh;
  display:grid;
  align-items:center;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--s9) 0;
}
.uav__bed{ position:absolute; inset:0 }
.uav__bed video{
  width:100%; height:100%; object-fit:cover; opacity:.36;
  filter:saturate(.7) contrast(1.05);
}
.uav__bed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(94deg, rgba(5,7,11,.95) 0%, rgba(5,7,11,.8) 34%, rgba(5,7,11,.12) 62%, rgba(5,7,11,0) 78%);
}
.uav__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.uav__reticle{
  position:absolute; top:50%; left:68%;
  width:clamp(120px,15vw,200px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none; opacity:0;
}
.uav__reticle i{ position:absolute; width:18px; height:18px; border-color:var(--accent) }
.uav__reticle i:nth-child(1){ top:0; left:0; border-top:1px solid; border-left:1px solid }
.uav__reticle i:nth-child(2){ top:0; right:0; border-top:1px solid; border-right:1px solid }
.uav__reticle i:nth-child(3){ bottom:0; left:0; border-bottom:1px solid; border-left:1px solid }
.uav__reticle i:nth-child(4){ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid }
.uav__lock{
  position:absolute; left:50%; bottom:-1.9rem; transform:translateX(-50%);
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.24em;
  color:var(--accent); white-space:nowrap;
}
.uav__copy{
  position:relative; z-index:2;
  width:min(1320px, 100% - var(--gutter)*2); margin-inline:auto;
  max-width:min(640px, 100% - var(--gutter)*2);
}
.uav__copy h3{
  font-size:var(--t-4xl); font-weight:700; line-height:1; letter-spacing:-.03em;
  margin:0 0 var(--s5);
}
.uav__copy > p{ color:var(--ink-soft); font-size:var(--t-lg); margin:0 0 var(--s5); max-width:52ch }
.uav__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) }
.uav__list li{
  font-size:var(--t-sm); line-height:1.6; color:var(--ink-soft);
  padding-left:var(--s4); position:relative;
}
.uav__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:1px;
  background:var(--accent); opacity:.75;
}
.uav__list b{ color:var(--ink); font-weight:600 }

.proj__stack{ display:grid; gap:0; padding-block:var(--section) }
.proj{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s6);
  padding:var(--s8) 0;
  border-bottom:1px solid var(--line);
  clip-path:inset(0 100% 0 0);
}
.proj:first-child{ border-top:1px solid var(--line) }
.proj__l h3{
  font-size:var(--t-3xl); font-weight:600; line-height:1.08; letter-spacing:-.024em; margin:0;
}
.proj__sum{ color:var(--ink-soft); font-size:var(--t-md); margin:var(--s4) 0 0; max-width:46ch }
.proj__r{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s4) }
.proj__r li{
  font-size:var(--t-md); line-height:1.62; color:var(--ink-soft);
  padding-left:var(--s4); position:relative;
}
.proj__r li::before{
  content:""; position:absolute; left:0; top:.72em; width:6px; height:1px;
  background:var(--ink-soft); opacity:.6;
}
.proj__r b{ color:var(--ink); font-weight:600 }

/* ═══════════ ACT 6 · instrument ═══════════ */
.teknoloji{ padding:var(--section) 0; background:var(--surface-2); overflow:hidden }
.teknoloji__head{ margin-bottom:var(--s8) }
.marquee{ display:grid; gap:var(--s3); margin-bottom:var(--s9) }
.marquee__row{ overflow:hidden }
.marquee__set{
  display:flex; gap:var(--s3); width:max-content; will-change:transform;
}
.marquee__set span{
  font-family:var(--font-m); font-size:clamp(.82rem,1.2vw,1rem);
  letter-spacing:.04em; white-space:nowrap;
  color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px;
  padding:.62rem 1rem;
  background:rgba(5,7,11,.4);
}
.teknoloji__legend dl{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:var(--s5); margin:0; padding-top:var(--s6); border-top:1px solid var(--line);
}
.teknoloji__legend dt{
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2);
}
.teknoloji__legend dd{ margin:0; color:var(--ink-soft); font-size:var(--t-sm) }

/* ═══════════ ACT 7 · contact ═══════════ */
.iletisim{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--section) 0 0;
  background:var(--canvas); overflow:hidden;
}
.iletisim__still{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.2; filter:saturate(.55);
}
.iletisim::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--canvas) 0%, rgba(5,7,11,.55) 42%, var(--canvas) 100%);
}
.iletisim__inner{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center }
.iletisim__h{
  font-size:var(--t-4xl); font-weight:700; line-height:1; letter-spacing:-.03em;
  margin:0 0 var(--s5); max-width:16ch;
}
.iletisim__p{ max-width:54ch; color:var(--ink-soft); font-size:var(--t-lg); margin:0 0 var(--s7) }
.iletisim__mail{
  display:inline-block;
  font-size:clamp(1.25rem,3.2vw,2.5rem);
  font-weight:600; letter-spacing:-.02em;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(255,122,24,.35);
  padding-bottom:.25rem;
  transition:border-color .4s;
  word-break:break-word;
}
.iletisim__mail:hover{ border-color:var(--accent) }
.iletisim__meta{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); margin-top:var(--s6);
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.iletisim__meta a{ text-decoration:none; min-height:44px; display:inline-flex; align-items:center }
.iletisim__meta a:hover{ color:var(--accent) }

.foot{
  position:relative; z-index:2;
  width:min(1320px, 100% - var(--gutter)*2); margin:var(--s9) auto 0;
  padding:var(--s4) 0 var(--s6);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  font-family:var(--font-m); font-size:var(--t-xs); letter-spacing:.1em; color:var(--ink-soft);
}
.foot a{ text-decoration:none; min-height:44px; display:inline-flex; align-items:center }
.foot a:hover{ color:var(--accent) }

/* ═══════════════════════════════════════════════════════════════
   desktop up
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .profil__grid{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.25fr) minmax(0,.62fr);
    align-items:start;
  }
  .tl__item{ grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:var(--s6) }
  .tl__meta{ flex-direction:column; gap:var(--s2) }
  .proj{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s9) }
  .rail{ display:flex; opacity:1 }
  .ingress__copy{ padding-left:clamp(0px, 4vw, 90px) }
}
@media (min-width:1240px){
  .uav__copy{ max-width:600px; margin-left:max(calc((100vw - 1320px)/2 + var(--gutter)), var(--gutter)) }
}

/* ═══════════════════════════════════════════════════════════════
   mobile art direction · not a shrunk desktop
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:899px){
  :root{ --t-hero:clamp(2.3rem, 11vw, 3.4rem) }

  .topbar{ display:flex }

  .ingress{ height:calc(var(--span) * .62 * 1vh) }
  .ingress__name{ letter-spacing:-.03em; line-height:.96 }
  .plane--type{ align-items:flex-end; padding-bottom:var(--s9) }
  .plane--scrim{
    background:
      linear-gradient(0deg, rgba(2,4,7,.96) 0%, rgba(2,4,7,.86) 34%, rgba(2,4,7,.18) 62%, rgba(2,4,7,0) 80%);
  }
  .ingress__lede{ font-size:var(--t-md); max-width:38ch }
  .ingress__role{ letter-spacing:.2em; margin-bottom:var(--s5) }
  .ingress__acts .btn{ flex:1 1 auto }
  .hud__read{ right:var(--s5); bottom:var(--s5) }
  .hud__br{ width:12px; height:12px }

  .uzmanlik__pin{ overflow:visible }
  .track{
    flex-direction:column;
    padding-inline:0;
    gap:var(--s4);
    transform:none !important;
    width:min(1320px, 100% - var(--gutter)*2);
    margin-inline:auto;
  }
  .card{ width:100%; padding:var(--s5) }
  .uzmanlik__prog{ display:none }

  .tl__list{ padding-left:var(--s5); gap:var(--s7) }
  .tl__item::before{ left:calc(var(--s5) * -1) }

  .uav{ min-height:auto; padding:var(--s8) 0 }
  .uav__bed video{ opacity:.22 }
  .uav__bed::after{
    background:linear-gradient(180deg, rgba(5,7,11,.7) 0%, rgba(5,7,11,.9) 55%, var(--canvas) 100%);
  }
  .uav__canvas{ position:relative; height:46vh; inset:auto; margin-bottom:var(--s5) }
  .uav{ display:block }
  .uav__reticle{ left:50%; top:24% }
  .uav__copy{ max-width:100% }

  .proj{ padding:var(--s7) 0 }
  .marquee__set span{ padding:.5rem .8rem }
  .foot{ flex-direction:column; align-items:flex-start; gap:var(--s2) }
}

@media (max-width:520px){
  .ingress__acts{ flex-direction:column; align-items:stretch }
  .ingress__acts .btn{ width:100% }
}

/* ═══════════ reduced motion ═══════════ */
@media (prefers-reduced-motion:reduce){
  .ingress{ height:auto }
  .ingress__stage{ position:relative; height:100vh }
  .plane--video video{ display:none }
  .plane--video .plane__fallback{ opacity:1 !important }
  .shard{ transform:none !important; opacity:1 !important; filter:none !important }
  .glyph__sp{ visibility:visible }
  .shard{ display:none }
  [data-reveal]{ opacity:1 !important; transform:none !important }
  [data-words] .w i, [data-shatter-soft] .word i{ transform:none !important }
  .proj{ clip-path:none !important }
  .track{ transform:none !important; flex-wrap:wrap }
  .uav__reticle{ opacity:1 }
  .marquee__set{ transform:none !important }
  .tl__spine i{ transform:scaleY(1) !important }
  .rail{ opacity:1 }
}

/* ═══════════ the rack gap keywords (signature move, second wave) ═══════════ */
.gaplayer{
  position:absolute; inset:0;
  perspective:1000px;
  transform-style:preserve-3d;
  pointer-events:none;
  overflow:hidden;
}
.gapword{
  position:absolute;
  transform-style:preserve-3d;
  font-family:var(--font-m);
  font-size:clamp(.66rem, 1.05vw, .98rem);
  font-weight:500;
  letter-spacing:.26em;
  white-space:nowrap;
  color:var(--ink);
  opacity:0;
  will-change:transform, opacity, filter;
  text-shadow:0 2px 18px rgba(5,7,11,.85);
}
.gapword span{ display:block; will-change:transform }
.gapword span:nth-child(2){ position:absolute; inset:0 }

@media (max-width:899px){
  .gapword{ font-size:.62rem; letter-spacing:.2em }
}
@media (prefers-reduced-motion:reduce){
  .gaplayer{ display:none }
}

/* ═══════════ rail column: content sits beside the instrument rail ═══════════ */
@media (max-width:1179px){
  .rail{ display:none !important }
  .topbar{ display:flex }
}
@media (min-width:1180px){
  :root{ --rail-w:150px }
  .wrap,
  .ingress__copy,
  .foot{
    width:min(1180px, 100% - var(--rail-w) - var(--gutter) * 2);
    margin-left:calc(var(--rail-w) + var(--gutter));
    margin-right:auto;
    padding-left:0;
  }
  .uav__copy{
    width:min(1180px, 100% - var(--rail-w) - var(--gutter) * 2);
    margin-left:calc(var(--rail-w) + var(--gutter));
    max-width:620px;
  }
  .rail__list a{ max-width:var(--rail-w) }
}

/* ═══════════ act 3 pinned frame: head and rail share one viewport ═══════════ */
@media (min-width:900px){
  .uzmanlik__pin{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:var(--s5);
    padding:var(--s7) 0;
  }
  .uzmanlik__head{ flex:0 0 auto; margin-bottom:0 }
  .uzmanlik__head .h-display{ font-size:clamp(1.9rem, 3.3vw, 3rem) }
  .uzmanlik__note{ margin-top:var(--s4); font-size:var(--t-md) }
  .uzmanlik__prog{ margin-top:var(--s5) }
  .track{ flex:1 1 auto; align-items:stretch; min-height:0 }
  .card{ height:100%; overflow:hidden; padding:var(--s5) }
  .card h3{ font-size:clamp(1.3rem, 1.9vw, 1.72rem) }
  .card ul{ gap:.55rem }
  .card li{ font-size:.82rem; line-height:1.55 }
}
@media (min-width:900px) and (max-height:820px){
  .uzmanlik__note{ display:none }
  .card li{ font-size:.78rem }
}

/* ═══════════════════════════════════════════════════════════════
   video beds · every act carries its own world
   each act uses the footage differently: scrub, window, lateral,
   curtain, story crossfade, push, rest
   ═══════════════════════════════════════════════════════════════ */
.act{ position:relative; isolation:isolate }
.act > .wrap,
.act > .story,
.act > .uav,
.act > .marquee,
.act > .uzmanlik__pin,
.act > .foot{ position:relative; z-index:1 }

.bed{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
  background:var(--canvas);
}
.bed video,
.bed > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s var(--e-out);
  will-change:transform, opacity;
}
.bed.is-live video{ opacity:var(--bed-op, .34) }
.bed__scrim{ position:absolute; inset:0; pointer-events:none }
.bed__scrim--lead{
  background:linear-gradient(100deg,
    rgba(5,7,11,.97) 0%, rgba(5,7,11,.93) 26%, rgba(5,7,11,.66) 46%,
    rgba(5,7,11,.2) 70%, rgba(5,7,11,0) 86%);
}
.bed__scrim--band{
  background:linear-gradient(180deg,
    rgba(5,7,11,.97) 0%, rgba(5,7,11,.7) 30%, rgba(5,7,11,.7) 62%, rgba(5,7,11,.97) 100%);
}
.bed__scrim--full{
  background:radial-gradient(125% 95% at 50% 42%, rgba(5,7,11,.6) 0%, rgba(5,7,11,.94) 72%);
}

/* act 3 · the bed travels against the card rail */
.bed--lateral{ --bed-op:.26 }
/* act 4 · the world is drawn open as the spine draws */
.bed--curtain{ --bed-op:.3; clip-path:inset(var(--cut, 100%) 0 0 0) }
/* act 6 · the board pushes toward the reader */
.bed--push{ --bed-op:.3 }
/* act 7 · everything stops */
.bed--rest{ --bed-op:.2 }
.bed--rest > img{ opacity:.2 }
.bed--rest.is-live > img{ opacity:0 }

/* act 5b · three worlds, one at a time */
.story{ position:relative }
.story__beds{
  position:sticky; top:0; height:100vh; z-index:0;
  overflow:hidden; background:var(--canvas);
}
.story .proj__stack{ position:relative; z-index:1; margin-top:-100vh }
.bed--story{ opacity:0; transition:opacity 1.1s var(--e-out) }
.bed--story.is-on{ opacity:1 }
.bed--story{ --bed-op:.38 }

/* act 2 · a framed window rather than a full bleed */
.window{
  position:relative; margin:0 0 var(--s6);
  aspect-ratio:4 / 5;
  border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--surface-2);
}
.window video,
.window__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.window video{ opacity:0; transition:opacity 1s var(--e-out) }
.window.is-live video{ opacity:1 }
.window.is-live .window__poster{ opacity:0; transition:opacity 1s var(--e-out) }
.window figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s5) var(--s4) var(--s4);
  font-family:var(--font-m); font-size:var(--t-xs); line-height:1.5;
  letter-spacing:.04em; color:var(--ink-soft);
  background:linear-gradient(0deg, rgba(5,7,11,.94) 30%, rgba(5,7,11,0) 100%);
}

/* ═══════════ the rail, minimal, on the right ═══════════ */
@media (min-width:1180px){
  :root{ --col:min(1240px, 100% - var(--gutter) * 2 - 72px) }

  .rail{
    left:auto; right:var(--gutter);
    align-items:flex-end; justify-content:center;
    padding:0;
  }
  .rail__list{ gap:var(--s4) }
  .rail__list a{
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:.7rem;
    min-height:20px;
  }
  .rail__list a::before{ width:10px; opacity:.8 }
  .rail__list a.is-now::before{ width:26px }
  .rail__list a span{
    opacity:0; transform:translateX(8px);
    transition:opacity .4s var(--e-out), transform .4s var(--e-out);
    white-space:nowrap;
  }
  .rail__list a:hover span,
  .rail__list a.is-now span{ opacity:1; transform:none }

  /* content is centred again now that nothing sits on the left */
  .wrap, .foot{
    width:var(--col);
    margin-left:auto; margin-right:auto;
    padding-left:0;
  }
  .ingress__copy{
    width:var(--col);
    margin-left:auto; margin-right:auto;
  }
  .uav__copy{
    width:var(--col);
    margin-left:auto; margin-right:auto;
    max-width:none;
  }
  .uav__copy > *{ max-width:620px }
}

/* ═══════════ act 2 layout with the window ═══════════ */
@media (min-width:900px){
  .profil__grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr) }
  .profil__col{ display:grid; gap:var(--s8) }
  .profil__col .profil__head{ max-width:44ch }
  .profil__rail{ position:sticky; top:var(--s6); align-self:start }
}
@media (max-width:899px){
  .window{ aspect-ratio:16 / 10; margin-bottom:var(--s5) }
  .profil__col{ display:grid; gap:var(--s6) }
}

/* ═══════════ beds on small screens: lighter, calmer ═══════════ */
@media (max-width:899px){
  .bed.is-live video{ opacity:var(--bed-op-m, .24) }
  .bed--lateral{ --bed-op-m:.18 }
  .bed--curtain{ --bed-op-m:.2; clip-path:none }
  .bed--story{ --bed-op-m:.28 }
  .story__beds{ height:70vh }
  .story .proj__stack{ margin-top:-70vh }
  .bed__scrim--lead{
    background:linear-gradient(180deg,
      rgba(5,7,11,.82) 0%, rgba(5,7,11,.9) 40%, rgba(5,7,11,.97) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .bed video, .window video{ display:none }
  .bed > img, .window__poster{ opacity:.24 !important }
  .bed--curtain{ clip-path:none !important }
  .bed--story{ opacity:0 }
  .bed--story[data-story="0"]{ opacity:1 }
  .story__beds{ position:relative; height:auto }
  .story .proj__stack{ margin-top:0 }
}

/* the pinned frame's own children must sit above its bed */
.uzmanlik__pin > *:not(.bed){ position:relative; z-index:1 }
.bed--lateral{ --bed-op:.4 }
.bed__scrim--band{
  background:linear-gradient(180deg,
    rgba(5,7,11,.93) 0%, rgba(5,7,11,.55) 26%, rgba(5,7,11,.5) 60%, rgba(5,7,11,.93) 100%);
}
.card{ background:rgba(11,15,22,.82); backdrop-filter:blur(6px) }

/* phone: the copy column becomes the full width, so the density has to climb with it */
@media (max-width:899px){
  .plane--scrim{
    background:linear-gradient(0deg,
      rgba(2,4,7,.97) 0%, rgba(2,4,7,.93) 40%, rgba(2,4,7,.78) 62%,
      rgba(2,4,7,.4) 78%, rgba(2,4,7,.08) 92%, rgba(2,4,7,0) 100%);
  }
  .ingress__lede{ font-size:.95rem; line-height:1.6 }
}

/* every bed keeps a still under the clip: shown until the video is live,
   and the only thing shown when motion is off or data is saved */
.bed__poster{
  opacity:var(--bed-op, .34);
  transition:opacity 1s var(--e-out);
}
.bed.is-live .bed__poster{ opacity:0 }
@media (max-width:899px){ .bed__poster{ opacity:var(--bed-op-m, .24) } }
@media (prefers-reduced-motion:reduce){
  .bed__poster{ opacity:var(--bed-op, .3) !important }
}

/* ═══════════════════════════════════════════════════════════════
   TYPE, TAKE TWO
   Archivo plus JetBrains Mono is the pairing every generated page
   reaches for. Bricolage Grotesque carries the voice, Instrument
   Sans carries the prose, Martian Mono carries the instrument chrome.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --font-d:"Bricolage Grotesque", Georgia, serif;
  --font-t:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-m:"Martian Mono", ui-monospace, SFMono-Regular, monospace;
}

body{
  font-family:var(--font-t);
  letter-spacing:.004em;
}

.h-display,
.ingress__name,
.iletisim__h,
.card h3,
.tl__body h3,
.uav__copy h3,
.proj__l h3,
.stat__n,
.profil__lede{
  font-family:var(--font-d);
  font-variation-settings:"wdth" 92;
}

.h-display{ font-weight:800; letter-spacing:-.022em; line-height:.95 }
.ingress__name{ font-weight:800; letter-spacing:-.034em }
.iletisim__h{ font-weight:800; letter-spacing:-.024em }
.card h3, .tl__body h3, .proj__l h3{ font-weight:700; letter-spacing:-.014em }
.uav__copy h3{ font-weight:800; letter-spacing:-.024em }
.stat__n{ font-weight:700; letter-spacing:-.03em }
.profil__lede{ font-weight:500; letter-spacing:-.008em }

/* Martian Mono is already wide, so the old tracking would blow the labels apart */
.eyebrow{ letter-spacing:.1em; font-weight:500; font-size:.68rem }
.tags span{ letter-spacing:0; font-size:.68rem; padding:.36rem .6rem }
.pill{ letter-spacing:.05em; font-size:.66rem }
.card__tag{ letter-spacing:.08em; font-size:.66rem }
.tl__when, .tl__field{ letter-spacing:.04em; font-size:.66rem }
.stat__l{ letter-spacing:.06em; font-size:.66rem }
.chips dt{ letter-spacing:.06em; font-size:.66rem }
.hud__read{ letter-spacing:.08em; font-size:.66rem }
.rail__list a{ letter-spacing:.04em; font-size:.66rem }
.boot__line{ letter-spacing:.24em }
.boot__stat{ letter-spacing:.06em; font-size:.66rem }
.topbar__mark, .topbar__now, .topbar__cta{ letter-spacing:.06em; font-size:.66rem }
.foot{ letter-spacing:.04em; font-size:.66rem }
.iletisim__meta{ letter-spacing:.06em; font-size:.66rem }
.teknoloji__legend dt{ letter-spacing:.06em; font-size:.66rem }
.window figcaption{ letter-spacing:.01em; font-size:.68rem }
.gapword{ letter-spacing:.12em }
.ingress__role{ letter-spacing:.16em; font-weight:400 }
.tl__org{ font-family:var(--font-m); letter-spacing:.01em; font-size:.8rem }
.uav__lock{ letter-spacing:.14em; font-size:.66rem }

/* ═══════════════════════════════════════════════════════════════
   the worlds were too far back. Bring every bed forward.
   ═══════════════════════════════════════════════════════════════ */
.bed.is-live video{ opacity:var(--bed-op, .62) }
.bed__poster{ opacity:var(--bed-op, .62) }
.bed--lateral{ --bed-op:.58 }
.bed--curtain{ --bed-op:.6 }
.bed--push{ --bed-op:.52 }
.bed--story{ --bed-op:.66 }
.bed--rest{ --bed-op:.38 }
.bed--rest > img{ opacity:.38 }
.uav__bed video{ opacity:.6 }

.bed__scrim--lead{
  background:linear-gradient(100deg,
    rgba(5,7,11,.95) 0%, rgba(5,7,11,.86) 28%, rgba(5,7,11,.5) 48%,
    rgba(5,7,11,.12) 72%, rgba(5,7,11,0) 88%);
}
.bed__scrim--band{
  background:linear-gradient(180deg,
    rgba(5,7,11,.9) 0%, rgba(5,7,11,.34) 28%, rgba(5,7,11,.3) 62%, rgba(5,7,11,.9) 100%);
}
.bed__scrim--full{
  background:radial-gradient(130% 100% at 50% 40%, rgba(5,7,11,.38) 0%, rgba(5,7,11,.88) 76%);
}
.uav__bed::after{
  background:linear-gradient(94deg, rgba(5,7,11,.94) 0%, rgba(5,7,11,.76) 32%, rgba(5,7,11,.1) 64%, rgba(5,7,11,0) 82%);
}
.card{ background:rgba(8,11,17,.9) }
.iletisim::after{
  background:linear-gradient(180deg, rgba(5,7,11,.9) 0%, rgba(5,7,11,.45) 42%, rgba(5,7,11,.92) 100%);
}
@media (max-width:899px){
  .bed.is-live video, .bed__poster{ opacity:var(--bed-op-m, .5) }
  .bed--lateral{ --bed-op-m:.4 }
  .bed--curtain{ --bed-op-m:.42 }
  .bed--story{ --bed-op-m:.55 }
}

/* ═══════════════════════════════════════════════════════════════
   ACT 6, TAKE TWO
   The stack was a field of small grey chips, which reads as a tag
   cloud. It is an inventory of things he has actually run, so it is
   set at display size and allowed to be loud.
   ═══════════════════════════════════════════════════════════════ */
.teknoloji{ padding:var(--section) 0 }
.teknoloji__head{ margin-bottom:var(--s7) }
.marquee{ gap:0; margin-bottom:var(--s8) }
.marquee__row{
  border-top:1px solid var(--line);
  padding:clamp(.5rem, 1vw, .85rem) 0;
}
.marquee__row:last-child{ border-bottom:1px solid var(--line) }

.marquee__set{ gap:0; align-items:center }
.marquee__set span{
  font-family:var(--font-d);
  font-variation-settings:"wdth" 90;
  font-size:clamp(1.35rem, 3.4vw, 2.9rem);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.16;
  color:var(--ink-soft);
  border:0; background:none;
  padding:0 .34em 0 0;
  margin-right:.34em;
  display:inline-flex; align-items:center; gap:.7em;
  white-space:nowrap;
  transition:color .35s var(--e-out);
}
.marquee__set span::after{
  content:"";
  width:.2em; height:.2em;
  background:var(--accent);
  opacity:.55;
  transform:rotate(45deg);
  flex:0 0 auto;
}
.marquee__row:nth-child(even) .marquee__set span{ color:rgba(234,240,246,.45) }
.marquee__set span:hover{ color:var(--ink) }

.teknoloji__legend dl{
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:var(--s6) var(--s5);
  padding-top:var(--s7);
}
.teknoloji__legend dt{ color:var(--accent); margin-bottom:var(--s3) }
.teknoloji__legend dd{
  font-size:var(--t-md); line-height:1.55; color:var(--ink-soft);
  max-width:34ch;
}

@media (max-width:899px){
  .marquee__set span{ font-size:clamp(1.15rem, 6.4vw, 1.7rem); gap:.55em }
  .marquee__row{ padding:.42rem 0 }
  .teknoloji__legend dd{ font-size:.92rem }
}

/* ═══════════════════════════════════════════════════════════════
   BRIGHTER WORLDS
   The beds were being held back by broad darkening. Lift every bed
   and protect the type locally instead, so the footage stays legible
   as footage and the copy stays legible as copy.
   ═══════════════════════════════════════════════════════════════ */
.bed.is-live video, .bed__poster{ opacity:var(--bed-op, .78) }
.bed--lateral{ --bed-op:.76 }
.bed--curtain{ --bed-op:.8 }
.bed--push{ --bed-op:.82 }
.bed--story{ --bed-op:.82 }
.bed--rest{ --bed-op:.5 }
.bed--rest > img{ opacity:.5 }
.uav__bed video{ opacity:.78 }
.window video, .window__poster{ opacity:1 }

.bed__scrim--lead{
  background:linear-gradient(100deg,
    rgba(5,7,11,.92) 0%, rgba(5,7,11,.76) 26%, rgba(5,7,11,.36) 46%,
    rgba(5,7,11,.06) 70%, rgba(5,7,11,0) 86%);
}
.bed__scrim--band{
  background:linear-gradient(180deg,
    rgba(5,7,11,.86) 0%, rgba(5,7,11,.18) 26%, rgba(5,7,11,.16) 64%, rgba(5,7,11,.86) 100%);
}
.bed__scrim--full{
  background:radial-gradient(135% 105% at 50% 40%, rgba(5,7,11,.14) 0%, rgba(5,7,11,.78) 78%);
}
.uav__bed::after{
  background:linear-gradient(94deg, rgba(5,7,11,.9) 0%, rgba(5,7,11,.6) 30%, rgba(5,7,11,.04) 62%, rgba(5,7,11,0) 80%);
}
.iletisim::after{
  background:linear-gradient(180deg, rgba(5,7,11,.86) 0%, rgba(5,7,11,.3) 42%, rgba(5,7,11,.9) 100%);
}
.plane--scrim{
  background:
    linear-gradient(100deg, rgba(2,4,7,.93) 0%, rgba(2,4,7,.8) 22%, rgba(2,4,7,.44) 40%,
      rgba(2,4,7,.1) 60%, rgba(2,4,7,0) 74%),
    linear-gradient(0deg, rgba(2,4,7,.72) 0%, rgba(2,4,7,0) 26%);
}

/* local protection: invisible on its own, decisive under a bright frame */
.ingress__name, .ingress__role, .ingress__lede,
.uzmanlik__head h2, .uzmanlik__note,
.deneyim__head h2, .deneyim__note,
.tl__body h3, .tl__body li, .tl__org, .tl__when, .tl__field,
.projeler__head h2, .projeler__note,
.uav__copy h3, .uav__copy > p, .uav__list li,
.proj__l h3, .proj__sum, .proj__r li,
.teknoloji__head h2, .marquee__set span, .teknoloji__legend dd, .teknoloji__legend dt,
.iletisim__h, .iletisim__p, .iletisim__mail, .iletisim__meta{
  text-shadow:0 1px 2px rgba(2,4,7,.8), 0 8px 30px rgba(2,4,7,.65);
}
.marquee__row:nth-child(even) .marquee__set span{ color:rgba(234,240,246,.62) }
.marquee__set span{ color:rgba(234,240,246,.92) }
.marquee__row{ border-top-color:rgba(234,240,246,.16) }

@media (max-width:899px){
  .bed.is-live video, .bed__poster{ opacity:var(--bed-op-m, .6) }
  .bed--lateral{ --bed-op-m:.55 }
  .bed--curtain{ --bed-op-m:.58 }
  .bed--story{ --bed-op-m:.66 }
  .bed--push{ --bed-op-m:.62 }
}

/* the closing address rule should hug the address, not the column */
.iletisim__inner{ align-items:flex-start }
.iletisim__mail{ align-self:flex-start }
.iletisim__h, .iletisim__p{ align-self:flex-start }

/* the closing meta row: one baseline, and it stacks before it collides */
.iletisim__meta{ align-items:center; row-gap:var(--s2) }
@media (max-width:620px){
  .iletisim__meta{ flex-direction:column; align-items:flex-start; gap:var(--s1) }
  .iletisim__meta a{ min-height:40px }
}

/* Martian Mono is wide: the role line has to be sized so it does not
   wrap into itself between the headline and the lede */
.ingress__role{
  font-size:clamp(.58rem, 1.15vw, .82rem);
  letter-spacing:.14em;
  line-height:1.9;
  max-width:100%;
}
[data-shatter-soft] .word{ line-height:1.9 }
@media (max-width:1100px){
  .ingress__role{ font-size:.62rem; letter-spacing:.1em }
}
@media (max-width:899px){
  .ingress__role{ font-size:.6rem; letter-spacing:.08em; line-height:1.8 }
  [data-shatter-soft] .word{ line-height:1.8 }
}

/* ═══════════════════════════════════════════════════════════════
   the hero cue
   Two buttons in the hero were asking for a decision before the
   visitor had any reason to make one. The act only needs one
   instruction, and the instruction is: keep going.
   ═══════════════════════════════════════════════════════════════ */
.cue{
  display:inline-flex; align-items:center; gap:var(--s4);
  text-decoration:none;
  min-height:48px;
  color:var(--ink-soft);
  transition:color .4s var(--e-out);
}
.cue__rule{
  position:relative;
  width:clamp(52px, 7vw, 92px); height:1px;
  background:rgba(234,240,246,.22);
  overflow:hidden; flex:0 0 auto;
}
.cue__rule i{
  position:absolute; inset:0;
  background:var(--accent);
  transform:translateX(-100%);
  animation:cueRun 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cueRun{
  0%   { transform:translateX(-100%) }
  55%  { transform:translateX(0) }
  100% { transform:translateX(100%) }
}
.cue__txt{
  font-family:var(--font-m);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.cue:hover{ color:var(--ink) }
.cue:hover .cue__rule{ background:rgba(234,240,246,.4) }

@media (max-width:520px){
  .cue{ gap:var(--s3) }
  .cue__txt{ font-size:.6rem; letter-spacing:.1em; white-space:normal }
}
@media (prefers-reduced-motion:reduce){
  .cue__rule i{ animation:none; transform:none; opacity:.7 }
}

/* the act is shorter now; the phone needs a little more of it, not less,
   because the keyword run has a narrower frame to cross */
@media (max-width:899px){
  .ingress{ height:calc(var(--span) * .8 * 1vh) }
}


/* the record act is the only one whose copy runs the full width of the frame,
   so it gets a band rather than a corner: density where the lines are, and the
   corridor still reading as a corridor top and bottom */
.bed__scrim--read{
  background:linear-gradient(180deg,
    rgba(5,7,11,.92) 0%, rgba(5,7,11,.66) 16%,
    rgba(5,7,11,.62) 84%, rgba(5,7,11,.94) 100%);
}
.bed--curtain{ --bed-op:.62; --bed-op-m:.42 }

/* ═══════════════════════════════════════════════════════════════
   HERO KEYWORDS · louder, and in the colour of the trade
   A second hue on the page, scoped to one job: the terms that come
   out of the racks read as live terminal output, not as captions.
   ═══════════════════════════════════════════════════════════════ */
:root{ --cyber:#1CFF8E; --cyber-deep:rgba(28,255,142,.42) }
.gapword{
  font-family:var(--font-m);
  font-size:clamp(1.05rem, 2.3vw, 2.05rem);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--cyber);
  text-shadow:
    0 0 1px rgba(28,255,142,.95),
    0 0 14px var(--cyber-deep),
    0 0 42px rgba(28,255,142,.18),
    0 3px 22px rgba(2,4,7,.9);
}
.gapword span:first-child::before{
  content:"> ";
  opacity:.55;
}
.gapword span:nth-child(2)::before{ content:"> "; opacity:.55 }
@media (max-width:899px){
  .gapword{ font-size:clamp(.92rem, 4.4vw, 1.2rem); letter-spacing:.04em }
}

/* ═══════════════════════════════════════════════════════════════
   ACT 3 ON A PHONE · the deck
   ═══════════════════════════════════════════════════════════════ */
.card__in{ will-change:transform }

@media (max-width:899px){
  .uzmanlik.is-deck .uzmanlik__pin{
    height:100vh; height:100svh;
    display:flex; flex-direction:column;
    overflow:hidden;
    padding:calc(var(--s8) + 6px) 0 var(--s5);
    gap:var(--s4);
    perspective:1100px;
  }
  .uzmanlik.is-deck .uzmanlik__head{ flex:0 0 auto; margin-bottom:0 }
  .uzmanlik.is-deck .uzmanlik__head .h-display{ font-size:clamp(1.8rem, 8.4vw, 2.4rem) }
  .uzmanlik.is-deck .uzmanlik__note{ font-size:.84rem; line-height:1.5; margin-top:var(--s2); max-width:34ch }
  .uzmanlik.is-deck .uzmanlik__prog{ display:block; margin-top:var(--s4); height:2px }

  .uzmanlik.is-deck .track{
    position:relative; display:block;
    flex:1 1 auto; min-height:0;
    width:min(1320px, 100% - var(--gutter) * 2);
    margin-inline:auto;
    padding:0;
    transform-style:preserve-3d;
  }
  .uzmanlik.is-deck .card{
    position:absolute; inset:0;
    width:100%; height:100%;
    overflow:hidden;
    padding:var(--s5) var(--s5) 0;
    transform-origin:50% 0%;
    border-radius:6px;
    border:1px solid rgba(234,240,246,.14);
    background:linear-gradient(180deg, rgba(10,14,21,.66) 0%, rgba(6,9,14,.8) 100%);
    backdrop-filter:blur(16px) saturate(1.25);
    -webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 -24px 60px rgba(2,4,7,.55), inset 0 1px 0 rgba(234,240,246,.08);
    will-change:transform, opacity;
  }
  .uzmanlik.is-deck .card--hot{ border-color:rgba(255,122,24,.45) }
  /* a long card fades at its lower edge so the read-through reads as intentional */
  .uzmanlik.is-deck .card::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:56px;
    background:linear-gradient(0deg, rgba(6,9,14,.95), rgba(6,9,14,0));
    pointer-events:none;
  }
  .uzmanlik.is-deck .card__in{ padding-bottom:var(--s7) }
  .uzmanlik.is-deck .card h3{ font-size:1.42rem; margin-bottom:var(--s2) }
  .uzmanlik.is-deck .card__sum{ font-size:.84rem; margin-bottom:var(--s4) }
  .uzmanlik.is-deck .card ul{ gap:.55rem }
  .uzmanlik.is-deck .card li{ font-size:.8rem; line-height:1.52 }

  /* the corridor is the point of this act on a phone: let it be seen */
  .uzmanlik.is-deck .bed--lateral{ --bed-op-m:.95 }
  .uzmanlik.is-deck .bed__scrim--band{
    background:linear-gradient(180deg,
      rgba(5,7,11,.82) 0%, rgba(5,7,11,.3) 30%, rgba(5,7,11,.12) 60%, rgba(5,7,11,.6) 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   phones: every bed further forward
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:899px){
  .bed.is-live video, .bed__poster{ opacity:var(--bed-op-m, .72) }
  .bed--curtain{ --bed-op-m:.6 }
  .bed--story{ --bed-op-m:.78 }
  .bed--push{ --bed-op-m:.78 }
  .bed--rest{ --bed-op-m:.55 }
  .uav__bed video{ opacity:.7 }
  .bed__scrim--lead{
    background:linear-gradient(180deg,
      rgba(5,7,11,.6) 0%, rgba(5,7,11,.72) 45%, rgba(5,7,11,.9) 100%);
  }
}

/* the deck keeps a 16px shelf at the top of its own frame: the card beneath
   sinks back into it and shows only its edge, never reaching the heading */
@media (max-width:899px){
  .uzmanlik.is-deck .card{ inset:16px 0 0 0; height:calc(100% - 16px) }
}
@media (max-width:899px){
  /* denser glass: the corridor still shows around the card and through its
     blur, but the card beneath no longer reads through the one on top */
  .uzmanlik.is-deck .card{
    background:linear-gradient(180deg, rgba(9,13,20,.84) 0%, rgba(6,9,14,.92) 100%);
  }
}