/* ============================================================
   Nöbet N1 — kapı önü güvenlik armatürü
   Palet: gece mavisi zemin, vurgu = ürünün kendi ışığı.
   Kırmızı/mavi yalnızca alarm anında görünür.
   ============================================================ */

:root {
  --ink:        #070C14;
  --ink-2:      #0A1320;
  --slate:      #16202F;
  --haze:       #2B3A4F;
  --beam:       #E8F3FF;
  --window:     #F0C879;
  --alarm-red:  #FF2B45;
  /* Uyari fazi: alarmin kirmizisindan once gelen kademe. Turuncu
     ikisinin arasinda duruyor ve "henuz alarm degil ama yaklasti"
     okunuyor. */
  --warn-amber: #FF9A2E;
  --alarm-blue: #2B7BFF;

  --chalk: #D7E2F0;
  --mute:  #7C8DA6;
  /* Ucuncu bir sessiz metin seviyesi YOK. Olculdu: #4A5C76
     bu zeminde 2,88:1 / 2,74:1 veriyordu ve saf siyaha karsi ust
     siniri 3,08:1 -- hicbir zemin onu WCAG AA'nin 4,5:1'ine
     cikaramaz. Taban L>=0,204, --mute ise L=0,259; yani AA'nin
     ustunde uclu bir renk merdiveni icin yer kalmiyor. Sessizlik
     artik renkle degil PUNTO ve KALINLIKLA yapiliyor. */

  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --rule: 1px solid color-mix(in srgb, var(--haze) 55%, transparent);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--sans);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skiplink {
  position: absolute; left: 50%; top: -100px; z-index: 100;
  transform: translateX(-50%);
  background: var(--beam); color: var(--ink);
  padding: .6rem 1.1rem; font-weight: 600; text-decoration: none;
  transition: top .18s;
}
.skiplink:focus { top: .6rem; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
}

/* ---------------- üst çubuk ---------------- */

.topbar {
  /* 50: mobil menu paneli (45) uzerinde kalmali, kapatma dugmesi burada. */
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2.5rem);
  padding: .85rem var(--gut);
  background: linear-gradient(to bottom, rgba(4,7,14,.92), rgba(4,7,14,0));
  backdrop-filter: blur(2px);
}

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--chalk);
  margin-inline-end: auto;
}
.brand-mark { width: 30px; height: auto; flex: none; }
.brand-mark rect { fill: var(--haze); }
.brand-beam { fill: var(--beam); opacity: .5; }
.brand:hover .brand-beam { opacity: .9; }
.brand-name {
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 1.28rem; letter-spacing: -.025em; line-height: 1;
}

.topnav { display: flex; gap: clamp(.7rem, 2vw, 1.8rem); }
.topnav a {
  color: var(--mute); text-decoration: none; font-size: .92rem;
  font-variation-settings: "wdth" 92, "wght" 500;
  padding-block: .25rem;
  border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--chalk); border-bottom-color: var(--beam); }


/* ---------------- mobil bölüm menüsü ---------------- */
/* Telefonda .topnav gizliydi, .beats de gizli: sayfada hicbir gezinme
   yoktu. Ziyaretci 4500 px'lik sahneyi kaydirmadan urun bilgisine
   ulasamiyordu. Dugme ikon boyunda, dikey yer harcamiyor. */
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--mute);
  border: 1px solid color-mix(in srgb, var(--haze) 70%, transparent);
  cursor: pointer; flex: none;
}
.menu-ico { display: grid; gap: 4px; width: 16px; }
.menu-ico i { height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] { color: var(--beam); border-color: var(--beam); }
/* Acikken ikon X'e doner: uc cizgi ikiye dusup capraz kesisir. */
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobnav {
  /* z-index topbar'in (50) ALTINDA olmali: kapatma dugmesi topbar'in
     icinde, panel onun ustune cikarsa menu acildiktan sonra kapatilamaz. */
  position: fixed; inset: 0; z-index: 45;
  background: var(--ink);
  display: grid; align-content: center;
  padding: 5.5rem var(--gut) 2rem;
}
.mobnav[hidden] { display: none; }
/* Sadece .mobnav-in icindekiler bolum baglantisi. Alttaki e-posta bu
   olcuyu alirsa 6. bolum gibi okunuyor. */
.mobnav-in a {
  display: flex; align-items: baseline; gap: .9rem;
  color: var(--chalk); text-decoration: none; padding: .9rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--haze) 55%, transparent);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 1.55rem; letter-spacing: -.02em; line-height: 1;
}
.mobnav-foot {
  margin: 2.2rem 0 0; font-size: .88rem;
  color: var(--mute);
}
.mobnav-foot a {
  color: var(--beam); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--beam) 45%, transparent);
}

/* ---------------- kaydırma tüneli + sahne ---------------- */

/* Kaydirma yolu: bes akt, akt basina bir jest. 620vh'de akt basina
   842 px dusuyordu, yani faz basina 7-8 tekerlek turu -- baslangicta
   "Seni gordu"ye varmak icin bile cok fazla. 340vh'de akt basina
   389 px, yani 3-4 tur. Mobilde biraz daha uzun (400vh, 487 px),
   cunku telefonda tek bir kaydirma jesti momentumla daha uzun yol
   aliyor ve kisa tunelde fazlar atlanabiliyor. */
.tunnel { position: relative; height: 340vh; }

.stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: linear-gradient(to bottom, #04070E 0%, #091220 62%, #0D1A29 100%);
}

/* ---------------- sahne içi çizim ----------------
   Düz cephe. Kamera yalnızca karşıdan yaklaşıyor (dönüş yok), bu yüzden
   3D'ye gerek kalmadı: dolly = viewBox'ı daraltmak. */

.stage-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}


/* pencere dograma ve kayitlari: referanstaki ince siyah cerceveler */


/* ============================================================
   FAZ ETIKETLERI. Bilgiyi metne gommek yerine sahnenin ilgili
   yerini gosteren cizgi + kisa etiket. Her faz kendi etiketlerini
   aciyor; gorunurluk .stage[data-act] ile suruluyor, yani kopya ile
   ayni anda degisiyor.
   ============================================================ */
.anno { opacity: 0; visibility: hidden; }
/* Etiketlerin opakligi scene.js'te kendi aktinin egrisiyle
   suruluyor. Kapakta etiket yok: kapak sayfasinda kilavuz cizgisi
   yabanci duruyor ve kapagin isi genel bilgi vermek. */

/* Golge plakasi: harfin arkasini karartiyor. W3C G18 teknigi --
   arka plan desenliyse harflerin arkasi golgelenerek 4,5:1 korunur.
   Alfasi hesapla bulundu (0,72), bulanikligi kutu izlenimini siliyor. */
.anno-plate { fill: #04070D; opacity: .72; filter: url(#fPlate); }
.anno line { stroke: var(--mute); stroke-width: 1; opacity: .7; }
.anno circle { fill: var(--beam); }
.anno text {
  fill: var(--chalk); font-family: var(--mono); font-size: 12px;
  letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(4,7,14,.95), 0 0 10px rgba(4,7,14,.8);
}
/* --mute fotografin uzerinde 1,54:1 veriyordu (bagil luminansi arka
   planin parlak yerinden yuksek degil). Bu ton plakayla 4,8:1. */
.anno .anno-sub { fill: #B8C4D6; font-size: 10.5px; }
/* Alarmda etiketin ucu ve cizgisi kirmiziya donuyor: sahne kirmizi
   yanarken mavi bir nokta yabanci duruyor. */
.stage.is-alarm .anno circle { fill: var(--alarm-red); }
.stage.is-warn .anno circle { fill: var(--warn-amber); }


/* ============================================================
   FLAŞÖR — SAKİN SÜRÜM
   Gerçek acil durum çakarı ritmi (üçlü sert atım, saniyede 5-6 flaş)
   denendi ve bir web sayfası için fazla çıktı: göz yoruyor, ekranın her
   yeri parlıyormuş gibi hissettiriyor. Burada karakter korunuyor ama
   rahatsız etmeyen bir tempoya çekiliyor.

   - 1,2 s döngü, taraf başına TEK darbe
     -> renk başına 0,83 darbe/s, toplam 1,67 darbe/s (WCAG 2.3.1 altında)
   - Hızlı yükseliş (72 ms), yumuşak sönüş (384 ms): dönen bir tepe
     lambasının süpürmesi gibi, stroboskop gibi değil
   - TAM EKRAN baskı katmanı kaldırıldı. "Ekranın her yeri parlıyor"
     hissinin kaynağı oydu; renk artık yalnızca armatürün çevresinde,
     huzmede ve zeminde kalıyor.
   ============================================================ */

/* ============================================================
   CAKAR. Ayni alarm karesi iki maskeyle kirmizi ve mavi yarisina
   bolunmus (bkz. mAlmR / mAlmB); nabiz o iki katmanin opakligini
   sirayla acip kapatiyor. Ritim kasitli olarak sakin: gercek polis
   strobu saniyede 4-5 flas atar, web sayfasinda goz yoruyor ve
   WCAG 2.3.1'in saniyede 3 flas sinirini asiyor.
   ============================================================ */
/* Isik rigi eklemeli: 'screen' ile fotografin uzerine ISIK KATIYOR,
   perde gibi cokmuyor. Fark en cok kapida belli -- huzmenin altinda
   ahsabin damari okunmaya devam ediyor. */
.rig, #lWin { mix-blend-mode: screen; }
/* Tint katmani kanal bastiriyor, o yuzden multiply. Ayri grup olmak
   zorunda: opacity<1 olan grup izolasyon yaratiyor ve icindeki
   mix-blend-mode disariyi gormuyor. */
.tint { mix-blend-mode: multiply; }

.stage.is-alarm #lRed, .stage.is-alarm #lRedT { animation: pulseR 1.2s ease-out infinite; }
.stage.is-alarm #lBlue, .stage.is-alarm #lBlueT { animation: pulseB 1.2s ease-out infinite; }

@keyframes pulseR {
  0%   { opacity: 0 }
  6%   { opacity: 1 }   /* hizli yukselis */
  38%  { opacity: 0 }   /* yumusak sonus */
  100% { opacity: 0 }
}
@keyframes pulseB {
  0%,50% { opacity: 0 }
  56%    { opacity: 1 }
  88%    { opacity: 0 }
  100%   { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  /* Cakar donuyor; iki renk birlikte yarim guclu kaliyor ki alarm
     durumu yine okunsun. */
  .stage.is-alarm #lRed, .stage.is-alarm #lBlue,
  .stage.is-alarm #lRedT, .stage.is-alarm #lBlueT {
    animation: none; opacity: .5;
  }
}

/* ---------------- sahne kopyası ---------------- */

.stage-copy {
  position: absolute;
  top: clamp(5.5rem, 15vh, 11rem);
  right: var(--gut);
  width: min(44ch, 44vw);
}

/* Opaklik/gorunurluk/transform artik scene.js'te p'den suruluyor:
   gecis scrollun hiziyla oluyor. Burada CSS gecisi YOK -- olsaydi
   her karede yeni bir hedefe gecis baslatip hareketi geciktirirdi.
   Baslangic degerleri yalniz JS gelmeden onceki ilk kare icin. */
.act {
  position: absolute; top: 0; right: 0; width: 100%;
  opacity: 0; visibility: hidden;
}
/* is-on yalnizca "gecerli akt" isareti; gorunurlugu surmuyor. */
.act.is-on { }

/* ============================================================
   KOPYANIN YERI FAZA GORE DEGISIYOR.
   Bes akt da ayni noktada cikiyordu ve kaydirma monoton
   duruyordu. Yerlesim rastgele degil, hikayeyi izliyor:
   ziyaretci yaklastikca kopya asagi iniyor (0 -> 4 -> 8 -> 12vh),
   geri cekilince yukari donuyor (3vh). Genlik kasitli olarak
   kucuk: 21vh'lik inis ve yatay zikzak denendi, monotonlugu
   kiriyordu ama sayfanin butunlugunu de bozuyordu.
   top/right gecise dahil degil: her akt ayri eleman oldugu icin
   kendi yerinde beliriyor, kayarak gitmiyor.
   ============================================================ */
.act[data-act="0"] { top: 0;    right: 0; }
.act[data-act="1"] { top: 4vh;  right: 0; }
.act[data-act="2"] { top: 8vh;  right: 0; }
.act[data-act="3"] { top: 12vh; right: 0; }
.act[data-act="4"] { top: 3vh;  right: 0; }

.act h1, .act h2 {
  margin: 0 0 .7em;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.035em; line-height: .93;
  text-wrap: balance;
}
.act h1 { font-size: clamp(2.5rem, 5.6vw, 4.9rem); }
.act h2 { font-size: clamp(2rem, 3.9vw, 3.3rem); }
.act p { margin: 0 0 .9em; color: var(--mute); max-width: 44ch; }
.act p:last-child { margin-bottom: 0; }


/* Kopya gecisindeki kayma reduced-motion'da durmali; yalniz
   opaklik degisimi kalir. */
@media (prefers-reduced-motion: reduce) {
  .menu-ico i { transition: none; }
  /* Surukleme scene.js'te reduced bayragiyla kapatiliyor. */
}


.btn {
  display: inline-block; text-decoration: none;
  background: var(--beam); color: #06101C;
  padding: .72rem 1.15rem;
  font-variation-settings: "wdth" 96, "wght" 650;
  font-size: .95rem;
  border: 1px solid var(--beam);
}
.btn:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--chalk); border-color: var(--haze); }
.btn-ghost:hover { background: transparent; border-color: var(--beam); color: var(--beam); }
.act-cta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ============================================================
   KAPAK (akt 0). Acilis bir urun kapagi gibi kuruluyor: kolon
   degil, kadrajin tamamina yayilan ortalanmis bir blok.
   NEDEN ORTADA: kapi kadrajin tam merkezinde (dunya x=386,
   viewBox merkezi 386) ve fotografin parlaklik merkezi ondan
   sadece 6 birim sapiyor. Buna karsin sag kolonlu acilista
   ekrandaki yazi murekkebinin agirlik merkezi %75,6'ya
   dusuyordu ve kapi merkezden kaymis gibi okunuyordu.
   Ortalanan blok bu farki kapatiyor.
   Blok ustteki KARANLIK banda oturuyor: armatur kadrajin
   %59 yuksekliginde, yani ustteki yarim ekran bos duvar.
   ============================================================ */
/* Kapak .stage-copy'nin DISINDA duruyor. Onceden kapsayici akt 0'da
   ortalanip sonra dar kolona doniyordu; cozunme sirasinda iki akt
   birden gorundugu icin kapak fade olurken aniden kolon genisligine
   sicriyordu. Simdi kapagin kendi kutusu var, kolon hep kolon. */
.act.act-cover {
  left: var(--gut); right: var(--gut); width: auto;
  /* Eyebrow kalktigi icin blok kisaldi; ust bosluk buyudu ki
     baslik ustteki karanlik bandin ortasina otursun. */
  top: clamp(5.5rem, 13vh, 9.5rem);
  text-align: center; z-index: 2;
}
.act-cover > * { margin-inline: auto; }
.act-cover p { max-width: none; }
/* Kapak basligi kolon basligindan buyuk, ama iki satirda kalsin:
   <br> zaten satiri boluyor, max-width uzun ekranda ucuncu satiri
   engelliyor. */
.act-cover h1 {
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  margin: 0 auto 1rem;
  max-width: 21ch;
}
.act-cover .cover-lede {
  color: var(--chalk); max-width: 62ch;
  font-size: clamp(1rem, 1.28vw, 1.18rem); line-height: 1.5;
  margin: 0 auto 1.6rem;
}

/* Dort deger: kapsayici bilgiyi tek bakista veren serit. Sayi
   iri, etiketi altinda kucuk -- teknik tablonun kapak ozeti. */
.cover-spec {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .9rem 2.5rem;
}
.cover-spec li { display: flex; flex-direction: column; gap: .2rem; }
.cover-spec b {
  font-variation-settings: "wdth" 104, "wght" 680;
  font-size: 1.32rem; letter-spacing: -.02em; color: var(--chalk);
}
/* Sayinin altindaki SOZ etiketi. Mono degil: ustundeki sayi sans
   ile dizili, etiketin mono olmasi tersti. Hiyerarsi renkle degil
   punto ve kalinlikla: 11,8 px normal vs 21 px yari kalin.
   Olculen esik L>=0,482 (bu satir kadrajin parlak bolgesine denk
   geliyor); bu ton 5,03:1. */
.cover-spec span {
  font-size: .74rem; letter-spacing: .005em;
  color: #B8C4D6;
}

/* Beat listesinin kapakta gizlenmesi de scene.js'te. */



/* Kopya kolonunun arkasindaki perde. Kapi kadrajin merkezinde oldugu ve
   aydinlatildigi icin metin herhangi bir anda parlak zemine denk gelebilir. */
.copy-scrim {
  position: absolute; inset: 0; pointer-events: none;
}
/* fazla koyu olunca garaji yutuyordu: daha gec basla, daha hafif */
/* sag ust pencere yaninca kopya onun uzerine dusuyor: perde guclendi */
.scrim-side {
  background: linear-gradient(to right,
    rgba(7,12,20,0) 46%, rgba(7,12,20,.64) 68%, rgba(7,12,20,.86) 100%);
}
/* Kapakta metin ortada: sag perde asimetri yaratiyor, perde
   yukaridan iniyor. Koyuluk olculdu -- bkz. asagidaki not. */
.scrim-cover {
  opacity: 0;
  background: linear-gradient(to bottom,
    rgba(6,10,17,.80) 0%, rgba(6,10,17,.72) 30%,
    rgba(6,10,17,.50) 46%, rgba(6,10,17,.16) 60%,
    rgba(6,10,17,0) 72%);
}
/* Opaklik scene.js'te p'den suruluyor; burada gecis yok. */

/* ---------------- bölüm göstergesi ---------------- */

.beats {
  /* %50'de sicak pencerenin uzerine biniyordu; biraz asagi */
  position: absolute; left: var(--gut); top: 58%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .1rem;
  z-index: 3;
  isolation: isolate;
}
/* Arka plan artik fotograf: aydinlik ahsabin uzerinde mono etiketler
   kayboluyordu. Soldan gelen yumusak radyal perde -- dikdortgen bir
   kutu fotografin uzerinde hemen goze batiyor, radyal batmiyor. */
.beats::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--gut) * -1); right: -2.2rem;
  top: -1.4rem; bottom: -1.4rem;
  background: radial-gradient(120% 104% at 0% 50%,
              rgba(4,7,14,.84) 0%, rgba(4,7,14,.5) 46%, rgba(4,7,14,0) 76%);
}
.beats button {
  appearance: none; background: none; border: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--mute); cursor: pointer;
  /* sahne arkasi fotograf: golge sart, perde de yetmiyor */
  text-shadow: 0 1px 4px rgba(4,7,14,.95), 0 0 12px rgba(4,7,14,.75);
  padding: .32rem 0 .32rem 1.4rem;
  text-align: left; position: relative;
  transition: color .25s;
}
.beats button::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: .7rem; height: 1px; margin-top: -.5px;
  background: currentColor;
  transition: width .25s;
}
.beats button:hover { color: var(--mute); }
/* aktif asama: koseli parantez, referanstaki etiket dili */
.beats button[aria-current="true"] {
  color: var(--beam);
}
.beats button[aria-current="true"]::before { width: 1.1rem; }
.hud.is-alarm ~ .beats button[aria-current="true"],
.stage.is-alarm .beats button[aria-current="true"] { color: var(--alarm-red); }
/* Uyari fazinda aktif asama turuncu. Cizgisi de renkle gelsin,
   yoksa yazi renk degistirirken tire mavi kaliyor. */
.stage.is-warn .beats button[aria-current="true"] { color: var(--warn-amber); }

/* ---------------- telemetri ---------------- */

/* zemin çizgisi sahnenin en alt ~%18'ini kaplar; panel onun üstünde kalmalı
   ki mesafe etiketleriyle çakışmasın */
.hud {
  position: absolute; right: var(--gut); bottom: clamp(1rem, 24%, 14rem);
  width: min(19rem, 62vw);
  font-family: var(--mono); font-size: .78rem;
  border-top: 1px solid color-mix(in srgb, var(--haze) 80%, transparent);
  padding-top: .6rem;
}
.hud-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .2rem 0;
}
.hud-k { color: var(--mute); }
.hud-v { color: var(--chalk); font-variation-settings: "wght" 500; }
.hud.is-alarm .hud-v { color: var(--alarm-red); }
.hud-bar {
  margin-top: .55rem; height: 2px;
  background: color-mix(in srgb, var(--haze) 70%, transparent);
}
.hud-bar i { display: block; height: 100%; width: 0; background: var(--beam); }
.hud.is-alarm .hud-bar i { background: var(--alarm-red); }

/* ---------------- ortak bölüm iskeleti ---------------- */

.band { padding: clamp(4.5rem, 12vh, 9rem) 0; position: relative; z-index: 1; background: var(--ink); }
.band-alt { background: var(--ink-2); }
.wrap { width: min(78rem, 100% - var(--gut) * 2); margin-inline: auto; }
.wrap.narrow { width: min(46rem, 100% - var(--gut) * 2); }

.band-h {
  margin: 0 0 .5em;
  font-variation-settings: "wdth" 108, "wght" 750;
  font-size: clamp(1.8rem, 3.3vw, 2.9rem);
  letter-spacing: -.03em; line-height: 1; text-wrap: balance;
}
.band-lede {
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
  color: var(--mute); max-width: 52ch; font-size: 1.08em;
}

/* ---------------- kademe merdiveni ---------------- */

.ladder {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}
.ladder::before {
  content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 1px;
  background: linear-gradient(to right, var(--haze), color-mix(in srgb, var(--alarm-red) 60%, var(--haze)));
}
.step { position: relative; padding-top: 0; }

/* her kademe, zemin çizgisi üstünde bir ışık havuzu — sahnedeki havuzun minyatürü */
.step-viz { height: 110px; position: relative; overflow: hidden; }
.step-viz::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--haze);
}
.v-glow {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 74%; height: 58px;
  background: radial-gradient(50% 108% at 50% 100%, rgba(232,243,255,.24), rgba(232,243,255,0) 72%);
}
.v-glow.v-full {
  width: 96%; height: 84px;
  background: radial-gradient(50% 104% at 50% 100%, rgba(232,243,255,.66), rgba(232,243,255,0) 74%);
}
.v-flash { position: absolute; bottom: 0; width: 62%; height: 84px; }
.v-r { left: 0;  background: radial-gradient(54% 104% at 46% 100%, rgba(255,43,69,.78), rgba(255,43,69,0) 72%); }
.v-b { right: 0; background: radial-gradient(54% 104% at 54% 100%, rgba(43,123,255,.78), rgba(43,123,255,0) 72%); }
/* demo gercek cakarla ayni deseni kullanir */
.step-3:hover .v-r, .step-3:focus-within .v-r { animation: pulseR 1.2s ease-out infinite; }
.step-3:hover .v-b, .step-3:focus-within .v-b { animation: pulseB 1.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .step-3:hover .v-r, .step-3:hover .v-b { animation: none }
}

.step h3 {
  margin: 1.1rem 0 .2rem;
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 1.3rem; letter-spacing: -.02em;
}
/* Mono degil: "Kirmizi-mavi -- telefona aninda" duz metin, veri degil. */
.step-meta { margin: 0 0 .7rem; font-size: .82rem; color: var(--mute); }
.step p:last-child { margin: 0; color: var(--mute); }
.step-3 .step-meta { color: color-mix(in srgb, var(--alarm-red) 80%, var(--mute)); }

/* ---------------- algılama geometrisi ---------------- */

.geo {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.geo-text > p { color: var(--mute); max-width: 48ch; }

.slider { display: block; margin: 2.2rem 0 1.8rem; max-width: 26rem; }
.slider-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .55rem;
}
.slider-name { font-size: .92rem; color: var(--chalk); }
.slider output {
  font-family: var(--mono); font-size: 1.05rem; color: var(--beam);
  font-variation-settings: "wght" 500;
}
/* Kutunun kendisi 44 px: onceden 2 px'ti ve telefonda tutulamiyordu.
   Gorunen 2 px'lik cizgi artik ray (track); kutu seffaf ve buyuk. */
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
  margin: -.7rem 0;   /* buyuyen kutu dikey ritmi bozmasin */
}
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--haze);
}
.slider input[type="range"]::-moz-range-track {
  height: 2px; background: var(--haze);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--beam); border: 0; cursor: grab;
  margin-top: -8px;   /* 2 px'lik rayin uzerinde ortalanir */
}
.slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--beam); border: 0; cursor: grab;
}

.geo-figs {
  margin: 0; display: grid; grid-template-columns: repeat(3, auto);
  gap: 1.6rem; justify-content: start;
}
.geo-figs div { border-top: var(--rule); padding-top: .55rem; }
.geo-figs dt { font-size: .8rem; color: var(--mute); }
.geo-figs dd {
  margin: .15rem 0 0; font-family: var(--mono);
  font-size: 1.3rem; color: var(--chalk); font-variation-settings: "wght" 500;
}

.geo-art { width: 100%; height: auto; overflow: visible; }
.geo-grid line { stroke: #16202F; stroke-width: 1; }
.geo-grid text {
  /* 9 px idi: 520 birimlik viewBox ~400 px genislikte cizildigi
     icin etkin boyut 7 px'e dusuyordu. */
  fill: var(--mute); font-family: var(--mono); font-size: 11px;
}
.geo-wedge { fill: rgba(232,243,255,.09); }
.geo-edge { stroke: var(--haze); stroke-width: 1; stroke-dasharray: 4 5; fill: none; }
.geo-arc { stroke: var(--beam); stroke-width: 1.5; fill: none; }
.geo-blind { fill: rgba(255,43,69,.14); stroke: rgba(255,43,69,.5); stroke-width: 1; stroke-dasharray: 3 4; }
.geo-house rect { fill: var(--slate); }
.geo-sensor { fill: var(--beam); }
.geo-label { fill: var(--mute); font-family: var(--mono); font-size: 10px; text-anchor: middle; }
.geo-dim { fill: var(--beam); font-family: var(--mono); font-size: 11px; text-anchor: middle; }

/* ---------------- teknik tablo ---------------- */

.spec { width: 100%; border-collapse: collapse; text-align: left; }
.spec tr { border-bottom: var(--rule); }
.spec tr:first-child { border-top: 1px solid color-mix(in srgb, var(--haze) 90%, transparent); }
.spec th, .spec td { padding: .95rem 0; vertical-align: baseline; }
.spec th {
  font-variation-settings: "wdth" 96, "wght" 500;
  color: var(--mute); font-size: .95rem; width: 34%; padding-right: 1.5rem;
}
.spec td { color: var(--chalk); }

/* ---------------- modeller ---------------- */

.models { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, 1fr); }
.model { border-top: 1px solid var(--haze); padding-top: 1.1rem; }
.model-lead { border-top-color: var(--beam); }
.model h3 {
  margin: 0 0 .1rem; font-family: var(--mono);
  font-size: 1.5rem; letter-spacing: -.01em; color: var(--chalk);
  font-variation-settings: "wght" 500;
}
.model-lead h3 { color: var(--beam); }
.model-what {
  margin: 0 0 .8rem;
  font-variation-settings: "wdth" 100, "wght" 650; font-size: 1.02rem;
}
.model p { color: var(--mute); margin: 0 0 .8rem; }
.model-power {
  /* Mono KALIYOR: "12 V DC" / "802.3at PoE+" besleme degeri. */
  margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--mute);
  border-top: var(--rule); padding-top: .6rem;
}

/* ---------------- kurulum (gerçek sıra) ---------------- */

.howto { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.howto li {
  counter-increment: s;
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem;
  padding: 1.6rem 0; border-bottom: var(--rule);
}
.howto li:first-child { border-top: var(--rule); }
/* sayaç iki satırı da kaplar, yoksa <p> ilk sütuna düşüp kelime kelime sarar */
.howto li::before {
  content: counter(s);
  grid-row: 1 / span 2;
  font-family: var(--mono); font-size: 1.5rem; color: var(--mute);
  line-height: 1.1;
}
.howto h3 {
  margin: 0 0 .25rem;
  font-variation-settings: "wdth" 102, "wght" 700; font-size: 1.2rem;
}
.howto p { margin: 0; color: var(--mute); }

/* ---------------- alt ---------------- */

.foot { padding: clamp(3rem, 8vh, 6rem) 0; background: var(--ink); border-top: var(--rule); }
.foot-in { display: grid; gap: .6rem; }
.foot-brand {
  margin: 0; font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 1.6rem; letter-spacing: -.03em;
}
.foot-note { margin: 0; color: var(--mute); }
.foot-mail { margin: 0; }
.foot-mail a {
  /* Mono degil: e-posta adresi makine okumasi degil, iletisim metni. */
  color: var(--beam); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--beam) 45%, transparent);
}
.foot-mail a:hover { border-bottom-color: var(--beam); }

/* ============================================================
   MOBİL / TABLET
   Sahne: çizim alta sığdırılır, kopya üstte durur.
   ============================================================ */

@media (max-width: 1080px) {
  .geo { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: 1fr; gap: 2.2rem; }
  .ladder::before { display: none; }
  .step { border-top: 1px solid var(--haze); padding-top: 1rem; }
  .step-3 { border-top-color: color-mix(in srgb, var(--alarm-red) 70%, var(--haze)); }
  .step-viz { height: 72px; }
  .models { grid-template-columns: 1fr; }
  .stage-copy { width: min(40ch, 52vw); }
}

/* MOBIL SAHNE. Cizim alt serit olarak dururken ana konu ekranin sadece
   %26'sini aliyor, ortada %26 olu bosluk kaliyordu. Simdi sahne tum
   ekrani kapliyor; kopya ve HUD onun uzerine biniyor. Kadraj girise
   odakli (scene.js MVB_FAR/MVB_NEAR), yanlar kirpiliyor. */
@media (max-width: 760px), (min-width: 761px) and (max-aspect-ratio: 13/10) {
  .stage-art { inset: 0; height: 100%; }
  .hud { bottom: 1rem; }
}

@media (max-width: 760px) {
  .topnav { display: none; }
  .menu-btn { display: inline-flex; }
  /* mobilde kopya tam genislikte, perde de yukaridan asagi */
  .copy-scrim {
    background: linear-gradient(to bottom,
      rgba(7,12,20,.92) 0%, rgba(7,12,20,.80) 28%,
      rgba(7,12,20,.40) 48%, rgba(7,12,20,0) 64%);
  }
  /* dar ekranda kopya ve HUD ile cakisiyor, alani da yok */
  .beats { display: none; }
  /* Etiketler dar kadrajda soldan kirpilip bozuk metin gibi duruyordu;
     telefonda bilgi zaten kopyada. Bildirim karti kaliyor -- o sahnenin
     parcasi degil, arayuz ogesi ve kirpilmiyor. */
  .anno { display: none; }
  .menu-btn { margin-left: auto; }

  .tunnel { height: 400vh; }

  /* Yazi mobilde cok yer kapliyordu: tip kuculdu, satir araligi sikildi,
     paragraf daraltildi. Amac ana konunun (giris + isik) one gecmesi. */
  .stage-copy {
    top: clamp(4.2rem, 10vh, 6rem);
    left: var(--gut); right: var(--gut);
    width: auto;
  }
  .act h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); line-height: .96; }
  .act h2 { font-size: clamp(1.65rem, 7.4vw, 2.2rem); line-height: .98; }
  .act p {
    font-size: .86rem; line-height: 1.5; margin-bottom: .6em;
    max-width: 30ch;
  }
  .act p:not(.act-cta) { max-width: 28ch; }
  /* Telefonda kopya tam genislikte: yatay kaydirma yok, dusey de
     daha kisik (ekran kisa, sahne hemen altta). */
  .act[data-act="0"] { top: 0;    right: 0; }
  .act[data-act="1"] { top: 3vh;  right: 0; }
  .act[data-act="2"] { top: 6vh;  right: 0; }
  .act[data-act="3"] { top: 9vh;  right: 0; }
  .act[data-act="4"] { top: 2vh;  right: 0; }

  /* Kapak telefonda: ust bant kisa, blok armaturun ustunde
     kalmali. Masaustu clamp'inin 2,5rem tabani 375 px'te
     basligi satirdan cikariyordu, o yuzden burada ayri clamp. */
  .act.act-cover {
    top: clamp(6rem, 13vh, 8.5rem);
    left: var(--gut); right: var(--gut); width: auto;
  }
  .act-cover h1 {
    font-size: clamp(1.62rem, 7.1vw, 2.1rem);
    margin-bottom: .8rem; max-width: none;
  }
  .act-cover .cover-lede {
    font-size: .84rem; line-height: 1.45;
    max-width: 34ch; margin-bottom: 1.2rem;
  }
  /* Dar ekranda dort hucre tek satira sigmiyor: 2x2 izgara.
     Hucre icinde sola dayali, cunku ortalanmis iki satirli
     hucreler izgarada dagilmis gibi duruyor. */
  .cover-spec {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .75rem 1rem; max-width: 20rem; text-align: left;
  }
  .cover-spec b { font-size: 1.04rem; }
  .cover-spec span { font-size: .68rem; letter-spacing: .005em; }

  /* Perde mobilde tek katman. Yukaridaki mobil .copy-scrim kurali
     iki katmani da yakaliyor; ikisi yarim opaklikta ust uste
     binince perde HAFIFLIYOR (1-(1-a/2)^2 < a), yani capraz
     gecisin ortasinda metin daha az korunuyordu. */
  .scrim-cover { display: none; }

  .hud {
    /* bottom'i BURADA verme: ustteki kural seridin yuksekligini hesaplayip
       HUD'u onun ustune koyuyor, buradaki sabit deger onu eziyordu. */
    left: var(--gut); right: var(--gut); width: auto;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .1rem .8rem; font-size: .74rem;
    background: linear-gradient(to top, rgba(4,7,14,.85), rgba(4,7,14,.35));
    padding: .5rem .6rem;
  }
  .hud-row { flex-direction: column; gap: 0; padding: 0; }
  .hud-bar { grid-column: 1 / -1; margin-top: .35rem; }

  .geo-figs { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .spec th, .spec td { display: block; width: auto; padding-right: 0; }
  .spec th { padding-bottom: .1rem; font-size: .82rem; }
  .spec td { padding-top: 0; padding-bottom: 1rem; }
  .howto li { grid-template-columns: 2.2rem 1fr; gap: .8rem; }
}

@media (max-width: 420px) {
  .act p:not(.act-cta) { max-width: 30ch; }
}

/* yatay mobil: kopya ile çizim çakışmasın */
@media (max-height: 560px) and (min-width: 761px) {
  .stage-copy { top: 4.5rem; }
  .act h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
  .act p { font-size: .9rem; }
  .hud { bottom: .8rem; }
}

/* ============================================================
   DOKUNMATIK. Fare ile 20 px'lik bir baglanti sorun degil, parmakla
   degil: olculen hedefler marka 106x20, e-posta 218x20 idi.
   Hepsi >= 44 px. Sadece (hover: none) altinda, ki masaustu
   ritmi degismesin.
   ============================================================ */
@media (hover: none) {
  .brand { min-height: 44px; }
  .topnav a { padding-block: .85rem; }
  .foot-mail a { display: inline-block; padding-block: .75rem; }
  .slider input[type="range"]::-webkit-slider-thumb {
    width: 26px; height: 26px; margin-top: -12px;
  }
  .slider input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
}