/* ==========================================================================
   Deck landing
   Design package: docs/plan/design-package-v1.md
   Her token ve her bilesen o paketten geliyor. Kopya birebir.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Zemin. Saf siyah degil: hafif grafit mavi, filmin gradesine dogru. */
  --canvas: #08090b;
  --canvas-deep: #050608;
  --panel: #101318;
  --panel-soft: #0d0f13;
  --panel-lift: #151920;

  --line: #1e232c;
  --line-soft: #171b22;
  --line-strong: #2b3240;

  /* Aksan. Marka isaretinin kendi uc rengi. */
  --accent: #a8ff3e;
  --accent-hover: #bdff6c;
  --accent-mid: #4fdd7e;
  --accent-deep: #16a887;
  --accent-muted: #2c3d19;
  --accent-ink: #0b1400;

  /* Kacan para. Sadece kacak bolumunde. */
  --leak: #f0a94a;

  --text-primary: #eceef2;
  --text-secondary: #98a0ae;
  --text-faint: #6a7383;

  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Iki egri, her yerde. Hicbir sey sicramaz. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --shell artik icerigin kendi genisligi, kenar boslugu bunun disinda.
     Onceden max-width olarak kullaniliyordu ve padding iceriden yiyordu:
     1180'lik kutuda gercek icerik 1068px kaliyordu. */
  --shell: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --navH: 68px;

  /* Hero metni icin uc katmanli golge. */
  --tshadow: 0 1px 2px rgba(5, 5, 10, 0.95), 0 3px 12px rgba(5, 5, 10, 0.78),
    0 10px 44px rgba(5, 5, 10, 0.8);

  --radius: 14px;
  --radius-lg: 20px;
}

/* ------------------------------------------------------------------ base */

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

html,
body {
  /* hidden once, clip after: clip yoksa tek bir capa linki sayfayi yana kaydirabiliyor */
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  /*
   * scroll-behavior: smooth BURAYA GERI YAZILMAYACAK.
   *
   * "Yenileyince kaydirirken zikzak, baska yere isinlanma" sorununun kaynagi
   * buydu. Chrome, yenilemede ve geri tusunda kaydirma konumunu geri
   * yuklerken bu ozelligi dinliyor. Konum ilk yerlesimde sigmiyorsa (hero'nun
   * altindaki her yer; ilk yerlesimde belge daha kisa) geri yukleme load
   * anina kaliyor ve o anda sayfa 0'dan eski konuma 700 ms boyunca
   * ANIMASYONLA kayiyor. Ziyaretci o sirada tekerlege dokunursa girdisi
   * ezilir: once ters yone suruklenir, sonra eski konuma isinlanir.
   * Konum hero'nun icindeyse geri yukleme ilk yerlesimde ve aninda oluyor,
   * o yuzden sorun "rastgele" gorunuyordu.
   *
   * Olculdu ve dogrulandi: tools/jump-probe.mjs. auto ile alti senaryoda
   * sifir ters kare, smooth ile 74.
   *
   * Capa baglantilarinin yumusak kaymasi site.js'te, sadece tiklamada.
   */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  /* Basili tutup surukleyince tarayici gorseli koparip hayalet bir kopya
     tasiyor; panel kareleri ve marka isareti boyle disari suruklenebiliyordu.
     Surukleme kapali, secim de kapali: ikisi de sadece kaza uretiyordu. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Yukaridaki display:block, tarayicinin [hidden] kuralini eziyor. Geri aliyoruz. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip:focus {
  left: 0;
}

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

/* --------------------------------------------------- sabit cevre katmani */
/* Tek katman, cok yavas suzuluyor. Sayfa yigin degil, tek bir yer gibi okunsun. */

.env {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 12%, rgba(22, 168, 135, 0.1), transparent 62%),
    radial-gradient(44vmax 34vmax at 84% 42%, rgba(168, 255, 62, 0.055), transparent 66%),
    radial-gradient(50vmax 40vmax at 46% 92%, rgba(79, 221, 126, 0.05), transparent 68%);
  animation: envdrift 96s linear -18s infinite;
  will-change: transform;
}

@keyframes envdrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.2%, -1.8%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Ince gren. Sayfanin her yerinde, fisilti seviyesinde. */
.env::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 160px'lik doku butun ekranda tekrar edince goz tekrari cizgi gibi
     okuyordu. Desen 420px'e cikti, siddeti dustu: doku kaldi, izi gitti. */
  /* mix-blend-mode kalkti: tam ekran sabit katmanda blend, her kaydirma
     karesinde butun ekrani yeniden karistirtiyordu. Doku duz dusuk
     opaklikla ayni isi goruyor, GPU'ya maliyeti yok. */
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ shell */

html {
  /* Capaya kayarken sabit nav'in payi: hedef basligin ustu acikta kalir. */
  scroll-padding-top: calc(var(--navH) + 22px);
}

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

main {
  position: relative;
  z-index: 1;
  /* Nav akistan cikti, icerik onun altina kaymasin. */
  padding-top: var(--navH);
}

/* -------------------------------------------------------------------- nav */

/* Sabit, akis disi. Sticky iken nav hero'dan once 68px yer kapliyordu ve
   ilk 68px kaydirmada film hic ilerlemiyordu: sayfa kayiyor, kare duruyordu.
   Simdi hero belgenin en tepesinden basliyor, nav filmin uzerinde duruyor. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.stuck {
  background: rgba(8, 9, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line-soft);
}

.navIn {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
}

/* Marka kilidi. Yazi ve formlar tek bir butun, aralarina bosluk girmez.
   Kilavuzun bos alan kurali: dort yanda en az form yuksekliginin yarisi. */
.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding-right: 12px;
}

.brand img {
  height: 22px;
  width: auto;
  display: block;
}

.brandLg img {
  height: 26px;
}

.navLinks {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navLinks a {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.navLinks a:hover,
.navLinks a[aria-current="page"] {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.045);
}

/* .navLinks a (0,1,1) .btnMain'i (0,1,0) yeniyordu ve buton etiketi
   gri kaliyordu. Butonlari nav icinde acikca geri aliyoruz.

   Ayni carpisma yerlesimde de var ve daha kotu sonucu var: .navLinks a
   display'i inline-block yapiyor, .btn ise inline-flex istiyor. Flex
   gidince buton icindeki ikon metnin yanina degil altina dusuyor ve buton
   iki satir yuksekliginde oluyor. Ikon eklenene kadar kimse fark etmemisti,
   cunku "See it live"in nib'i konumlandirilmis bir sus. */
.navLinks .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navLinks .btnMain,
.navLinks .btnMain:hover {
  color: var(--accent-ink);
  background: var(--accent);
}

.navLinks .btnMain:hover {
  background: var(--accent-hover);
}

.navLinks .btnOutline {
  color: var(--accent);
  background: transparent;
}

.navLinks .btnOutline:hover {
  color: var(--accent-hover);
  background: rgba(168, 255, 62, 0.1);
}

.navToggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------------- button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease),
    border-color 0.3s var(--ease), color 0.3s var(--ease);
  text-shadow: none;
}

.btn:active {
  transform: translateY(1px);
}

.btnMain {
  background: var(--accent);
  color: var(--accent-ink);
}

.btnMain::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: var(--accent);
  filter: blur(16px);
  opacity: 0.28;
  z-index: -1;
  transition: opacity 0.35s var(--ease);
}

.btnMain:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btnMain:hover::before {
  opacity: 0.5;
}

.btnGhost {
  border-color: var(--line-strong);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.btnGhost:hover {
  border-color: var(--accent-muted);
  background: rgba(168, 255, 62, 0.06);
  transform: translateY(-1px);
}

/*
 * Aksan cerceveli buton. Dolgusu yok, siniri marka renginde.
 *
 * Nav'daki giris butonu icin var. Yanindaki "See it live" dolu lime, bu
 * bos: ikisi de marka renginde duruyor ama hangisinin birincil oldugu
 * bakisla okunuyor. Ayni zamanda Fleet, Pricing, Guides gibi duz metin
 * baglantilardan da ayriliyor, ki giris bir gezinme baglantisi degil,
 * uygulamanin kapisi.
 */
.btnOutline {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
  /* Etiket ve ikon tek parca dursun: .btn'in 9px'i burada genis kaliyor. */
  gap: 7px;
}

.btnOutline:hover {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  background: rgba(168, 255, 62, 0.1);
  transform: translateY(-1px);
}

.btnSm {
  padding: 10px 17px;
  font-size: 14.5px;
}

/* Buton icindeki marka isareti. .btn zaten inline-flex ve 9px bosluklu,
   ikonun tek isi metnin boyuna oturmak. */
.btn .glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Kucuk butonda cizgi ikonu: dolgu isaretlerden optik olarak buyuk okunur,
   bir tik kuculuyor ve bosluk daraliyor ki etiketle tek parca dursun. */
.btnSm .glyph {
  width: 16px;
  height: 16px;
}


/* CTA'nin altina cizilen kisa vurus: imza kalemi. currentColor bazi
   baglamlarda acik renge dusup lime zeminde kayboluyordu; vurus her
   zaman siyah. */
.btnMain .nib {
  width: 0;
  height: 1.5px;
  background: var(--accent-ink);
  opacity: 0.9;
  transition: width 0.42s var(--ease-out);
}
.btnMain:hover .nib {
  width: 14px;
}

/* ------------------------------------------------------------------- hero */

/* 275vh: 15 saniyelik film icin kaydirma mesafesi. 450vh'de ayni film iki
   katı kaydirma istiyordu, bolum surunuyordu. Referans olcu TheONE'da
   olculdu: saniyede yaklasik 100px kaydirma dogru hizi veriyor. */
.hero {
  position: relative;
  /*
   * Boy piksel olarak dondurulmus, 360vh degil. Sebebi site.js icinde
   * setHeroLength yaninda yaziyor. 360vh geri dusus: JS calismazsa
   * davranis eskisiyle ayni.
   */
  height: var(--heroH, 360vh);
  /* Hero nav'in altindan degil, tam tepeden basliyor: film ilk pikselden
     itibaren surulsun. main'in nav payini geri aliyoruz. */
  margin-top: calc(var(--navH) * -1);
}

.hero.static {
  height: auto;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hero.static .stage {
  position: relative;
  height: auto;
  min-height: 86vh;
  padding: clamp(64px, 12vh, 120px) 0 clamp(48px, 9vh, 96px);
}

/* Canvas: isik iplikleri alani. Film gelene kadar hero'nun kendisi,
   film geldiginde telefonun ve reduced motion'in kalici hero'su. */
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Video kendi olceginde duruyor. Buyutmek isik cizgisini kalinlastirip
   parlatiyordu; onun yerine duruş bandi yukari alindi ve cizgi yazinin
   altinda ufuk olarak kaliyor. */
#hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  will-change: transform;
  transform: translateZ(0);
  z-index: 1;
}

.stage.video-ready #hero {
  opacity: 1;
}

/* 1. katman: kuresel taban scrim. Hicbir kare ham kalmaz. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse 120% 90% at 50% 45%,
    rgba(10, 10, 18, 0) 35%,
    rgba(10, 10, 18, 0.62) 100%
  );
}

/* 1b. katman: sol serit. Yazinin arkasi her karede garanti siyah; sag yari
   filme acik kaliyor. Ortaya varmadan seffaflasiyor. */
.scrimLeft {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(8, 9, 11, 0.95) 0%,
    rgba(8, 9, 11, 0.84) 16%,
    rgba(8, 9, 11, 0.52) 32%,
    rgba(8, 9, 11, 0.16) 44%,
    rgba(8, 9, 11, 0) 55%
  );
}

/* Aksam katmani: --dusk 0'dan 1'e giderken sahne kararir. Sag taraf daha
   cok kararir cunku kapanis yazisi orada duruyor. */
.dusk {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--dusk, 0);
  background: radial-gradient(
    ellipse 120% 90% at 30% 45%,
    rgba(4, 5, 7, 0.66) 0%,
    rgba(4, 5, 7, 0.9) 55%,
    rgba(4, 5, 7, 0.97) 100%
  );
}

/* Acilis posteri: filmin ilk karesi. Video blob'u inene kadar sahne bu;
   video hazir olunca usta binen film icine karisarak aliyor. */
.posterStart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}

.stage.video-ready .posterStart {
  opacity: 0;
}

.hero.static .posterStart {
  display: none;
}

/* Yazi golgesi: bant gorunurken sol yari derinlesir, bant cikinca cekilir.
   Tam ekran oldugu icin kenari yok; film bantlar arasindaki boslukta
   tamamen geri gelir. */
.textShade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--ts, 0);
  background: linear-gradient(
    to right,
    rgba(4, 5, 7, 0.92) 0%,
    rgba(4, 5, 7, 0.85) 30%,
    rgba(4, 5, 7, 0.62) 48%,
    rgba(4, 5, 7, 0.24) 62%,
    rgba(4, 5, 7, 0) 72%
  );
}

/* Alt kenardan sayfaya gecis. */
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--canvas) 92%);
}

/* Hero yazisi icerik seridinden cikiyor: sinemada altyazi kadraja yaslanir,
   ortalanmis dar bir kutuya sikismaz. Bant kenardan sadece gutter kadar
   iceride, tipki referans aldigimiz duzende oldugu gibi. */
.bands {
  position: relative;
  z-index: 4;
  width: 100%;
}

/* Bantlar mutlak konumlu, dolayisiyla .bands'in kendi yuksekligi sifirdi ve
   yuzdeli top degerleri hicbir seye cozulmuyordu. Sahnenin tam yuksekligini
   veriyoruz ki yuzde gercekten sahneye gore hesaplansin. Statik hero'da bant
   akista oldugu icin bu kural orada gecerli degil. */
.hero:not(.static) .bands {
  height: 100%;
}

/* Scrub hero'da yazi sagdaki kartlarla yarismasin diye daralıyor. Statik
   hero'da kart yok, orada bu sinir metni bosuna sikistiriyordu. */
.hero:not(.static) .band {
  max-width: min(820px, 52vw);
}

/* Statik hero'da bant akista: orada icerik seridine geri donuyor, yoksa
   telefonda yazi kenara yapisir. */
.hero.static .bands {
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  max-width: 820px;
  opacity: 0;
  text-shadow: var(--tshadow);
  pointer-events: none;
}

/* Statik hero yolculugun uc bandini ust uste yigmiyor: tasarlanmis tek blok
   gosteriliyor, scroll bantlari gizleniyor. */
.band[data-static] {
  display: none;
}

.hero.static .band:not([data-static]) {
  display: none;
}

.hero.static .band[data-static] {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.hero.static .band[data-static] h2 {
  font-size: clamp(2.6rem, 9vw, 4.4rem);
}

.band.on {
  pointer-events: auto;
}

/* Son band karsi tarafa geciyor. Yolculuk boyunca yazi solda, kartlar
   sagdaydi; kapanista kartlar biter ve soz sag tarafa gecer. Kadrajin
   yon degistirmesi bitisi bir durak gibi okutuyor. */
/* Kapanis: yazi SAG ORTADA, birlesme karti ortada. Yazi dar sutunda
   duruyor ki ortadaki kartla hicbir genislikte cakismasin; kartlar da
   1120 altinda zaten gizli. */
.band[data-last="1"] {
  top: 50%;
  left: auto;
  right: var(--gutter);
  /* Sag kenara yasli blok sagdan hizalanir; soldan hizali hali kenarda
     asili duruyordu. */
  text-align: right;
}

.band[data-last="1"] .sub {
  margin-left: auto;
}

.band[data-last="1"] .cta {
  justify-content: flex-end;
}

.hero:not(.static) .band[data-last="1"] {
  max-width: min(440px, 31vw);
}



.band[data-last="1"] h2 {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
}

.band[data-last="1"] .sub {
  margin-top: 18px;
  font-size: clamp(1rem, 1.85vw, 1.2rem);
}

.band[data-last="1"] .cta {
  margin-top: 26px;
}

/* Bant basina kutu scrim yok. Yazinin zemini .textShade: tam ekran,
   kenarsiz, bantla birlikte nefes alan sol gradient. Kutu tabanli her
   scrim koyulasan zeminde kenarini belli ediyordu. */

/* Statik hero filmin durus karesini poster olarak kullaniyor: telefonda ve
   reduced motion'da ayni dunya, hareketsiz. */
.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: none;
}

.hero.static .poster,
.stage.video-failed .poster {
  display: block;
}

/* ------------------------------------------------- suzulen dijital kartlar */
/* Iki perde: her uclu tek merkezden cikar. Merkez once belirir, isinlar
   merkezden kartlara dogru cizilir, kartlar sirayla takip eder. Butun
   hareket transform ve opacity, surus scroll'da. */

.floaters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.cluster {
  position: absolute;
  right: 2%;
  top: 16%;
  width: min(560px, 39vw);
  height: 66%;
}

/* Merkez dugum. */
.hub {
  position: absolute;
  left: 8%;
  top: 50%;
  width: 66px;
  height: 66px;
  transform: translate(calc(-50% + var(--hx, 0px)), calc(-50% + var(--hy, 0px)))
    scale(calc(0.78 + var(--hub, 0) * 0.22));
  opacity: var(--hub, 0);
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(7, 9, 8, 0.82);
  border: 1px solid rgba(236, 238, 242, 0.16);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62), 0 0 34px rgba(168, 255, 62, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform, opacity;
}

.hub {
  border-color: rgba(168, 255, 62, 0.32);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62), 0 0 40px rgba(168, 255, 62, 0.16);
}

.hub img {
  width: 32px;
  height: 32px;
}



/* Isinlar: merkezden kartlara. dashoffset kartin kendi ilerlemesiyle
   sifira iner, cizgi merkezden disari dogru cizilir. */
.spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Noktali kisa isinlar: cizgi degil iz. Kartla birlikte belirip
   kaybolurlar, cizim animasyonu yok. */
.spokes line {
  fill: none;
  stroke-width: 2;
  /* pathLength kalkti: o, non-scaling-stroke ile birleskende dash desenini
     buzup cizgiyi kesintisiz gosteriyordu. Desen viewBox biriminde. */
  stroke-dasharray: 0.1 5.4;
  stroke-linecap: round;
}

.spokes line:nth-of-type(1) {
  stroke: color-mix(in srgb, var(--accent) 72%, transparent);
  opacity: min(calc(var(--f0, 0) * 1.6), 1);
}
.spokes line:nth-of-type(2) {
  stroke: color-mix(in srgb, var(--accent-mid) 72%, transparent);
  opacity: min(calc(var(--f1, 0) * 1.6), 1);
}
.spokes line:nth-of-type(3) {
  stroke: color-mix(in srgb, var(--accent-deep) 82%, transparent);
  opacity: min(calc(var(--f2, 0) * 1.6), 1);
}

/* Kartlar: sol kenarlari isin uclariyla ayni noktada, dikeyde uc noktaya
   ortalanir. Ic sallanti .fcard uzerinde, giris floater uzerinde. */
.floater {
  position: absolute;
  width: 320px;
  opacity: var(--fk, 0);
  transform: translate3d(0, calc(-50% + (1 - var(--fk, 0)) * 36px), 0);
  will-change: transform, opacity;
}

.floater[data-slot="0"] { --fk: var(--f0, 0); left: 27%; top: 10%; }
.floater[data-slot="1"] { --fk: var(--f1, 0); left: 35%; top: 46%; }
.floater[data-slot="2"] { --fk: var(--f2, 0); left: 27%; top: 82%; }

.fcard {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 20px;
  border-radius: 16px;
  background: rgba(7, 9, 8, 0.86);
  border: 1px solid rgba(168, 255, 62, 0.2);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Yuzme JS fizik dongusunde: ayni sinusler hem bu transformu hem isin
     uclarini besliyor, cizgi karttan hic kopmuyor. */
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
  will-change: transform;
}

/* Ton: konu esli renkler, markanin uc yesili. */
.floater[data-tone="lime"] { --ft: var(--accent); }
.floater[data-tone="mint"] { --ft: var(--accent-mid); }
.floater[data-tone="teal"] { --ft: var(--accent-deep); }

.fcard svg {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--ft, #a8ff3e);
}

.fcard {
  border-color: color-mix(in srgb, var(--ft, #a8ff3e) 34%, transparent);
}

/* Imza cizgisi kartla birlikte ciziliyor. */
.fcard .sig-path {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--fk, 0) * 100);
}


.fcard b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink, #eceef2);
}

.fcard span {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: rgba(236, 238, 242, 0.62);
}

/* ------------------------------------------------------ kapanis birlesmesi */
/* Eski duzenin uc hayaleti ortada bulusup tek temiz kayda donusuyor.
   --tm varis ilerlemesi: hayaletler yaklasirken gorunur, varinca kart
   dogar, imza cizilir, onay duser. */

/* Birlesme sayfanin tam ortasinda; kapanis yazisi sag ustte durdugu
   icin kart hicbir seye binmiyor. */
.merge {
  position: absolute;
  left: 47%;
  top: 50%;
  width: 400px;
  height: 360px;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  --tm: min(calc(var(--mk, 0) / 0.62), 1);
  /* Hayalet renkleri: markanin uc yesili ve notr murekkep. */
  --gLime: color-mix(in srgb, var(--accent) 72%, transparent);
  --gMint: color-mix(in srgb, var(--accent-mid) 72%, transparent);
  --gTeal: color-mix(in srgb, var(--accent-deep) 82%, transparent);
  --gInk: rgba(236, 238, 242, 0.48);
}

/* On bes hayalet, her biri kendi yonunden merkeze suzulur. Konum, aci,
   boy ve renk elementin kendi degiskenlerinde. */
.merge .ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--gs, 52px);
  color: var(--gc, rgba(236, 238, 242, 0.48));
  opacity: calc(min(calc(var(--mk, 0) * 2.6), 1) * clamp(0, calc((0.68 - var(--mk, 0)) * 5), 1));
  transform: translate(calc(-50% + (1 - var(--tm)) * var(--gx, 0px)), calc(-50% + (1 - var(--tm)) * var(--gy, 0px)))
    rotate(calc((1 - var(--tm)) * var(--gr, 0deg)));
  will-change: transform, opacity;
}

.merge .ghost svg {
  width: 100%;
  height: auto;
}

/* Hayaletler varinca dogan kart. */
.merge .mcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  padding: 20px 22px 16px;
  border-radius: 18px;
  background: rgba(8, 10, 8, 0.96);
  border: 1px solid rgba(168, 255, 62, 0.28);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62), 0 0 44px rgba(168, 255, 62, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: clamp(0, calc((var(--mk, 0) - 0.55) * 3.4), 1);
  transform: translate(-50%, -50%) scale(calc(0.92 + clamp(0, calc((var(--mk, 0) - 0.55) * 2.4), 1) * 0.08));
  will-change: transform, opacity;
  /* Kart dokunulabilir: uzerine gelince hafifce dogrulur. */
  pointer-events: auto;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.merge .mcard:hover {
  border-color: rgba(168, 255, 62, 0.55);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.7), 0 0 64px rgba(168, 255, 62, 0.2);
}

.merge .mcard:hover .mdone {
  transform: scale(1.12) rotate(8deg);
}

/* Satirlar: kart dogduktan sonra sirayla dusuyor. */
.merge .mrows {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(236, 238, 242, 0.1);
  display: grid;
  gap: 10px;
}

.merge .mrows li {
  --rk: clamp(0, calc((var(--mk, 0) - 0.68 - var(--ri, 0) * 0.055) * 7), 1);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: var(--rk);
  transform: translateY(calc((1 - var(--rk)) * 10px));
}

.merge .mrows li > svg:first-child {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--text-secondary);
}

.merge .mrows span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.merge .mrows i {
  font-style: normal;
  font-size: 0.78rem;
  color: rgba(236, 238, 242, 0.55);
  margin-left: auto;
  text-align: right;
}

.merge .mrows .mtick {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}

/* Imza: gercek bir karalama, altinda susleme cizgisi, sagda etiket. */
.merge .msigwrap {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(236, 238, 242, 0.1);
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.merge .msiglabel {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 238, 242, 0.45);
  padding-bottom: 4px;
}

.merge .mhead {
  display: flex;
  align-items: center;
  gap: 14px;
}

.merge .mhead img {
  width: 34px;
  height: 34px;
  flex: none;
}

.merge .mhead b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.merge .mhead span {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: rgba(236, 238, 242, 0.62);
}

.merge .mdone {
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex: none;
  color: var(--accent);
  opacity: clamp(0, calc((var(--mk, 0) - 0.86) * 8), 1);
  transform: scale(calc(0.6 + clamp(0, calc((var(--mk, 0) - 0.86) * 8), 1) * 0.4));
}

.merge .msig {
  display: block;
  flex: 1;
  height: 44px;
  color: var(--accent);
}

.merge .msig .sig-main {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - clamp(0, calc((var(--mk, 0) - 0.8) * 7), 1) * 100);
}

.merge .msig .sig-flourish {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - clamp(0, calc((var(--mk, 0) - 0.92) * 16), 1) * 100);
}

/* Kart cevresindeki rozetler: kayit olustuktan sonra beliriyor, her biri
   kendi ritminde suzuluyor. */
.merge .orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  display: grid;
  place-items: center;
  /* Ciplak ikon: kutu yok, cerceve yok. Sadece isik. */
  color: var(--oc, rgba(236, 238, 242, 0.5));
  opacity: calc(clamp(0, calc((var(--mk, 0) - 0.82) * 6), 1) * 0.9);
  transform: translate(var(--ox, 0px), var(--oy, 0px));
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}

/* Derinlik: rozetlerin yarisi kartin arkasindan yuzer, yarisi onunden. */
.merge .mcard { z-index: 2; }
.merge .orb.back { z-index: 1; }
.merge .orb.front { z-index: 3; }

.merge .orb svg {
  width: 46px;
  height: 46px;
  animation: orbBob var(--od, 7s) ease-in-out var(--op, 0s) infinite alternate;
}

@keyframes orbBob {
  0%   { transform: translate3d(-22px, -26px, 0) rotate(-4deg); }
  100% { transform: translate3d(22px, 28px, 0) rotate(4deg); }
}

/* Dar ekranda kartlar yaziyla yarisir; scrub zaten genis ekran isi. */
@media (max-width: 1120px) {
  .floaters,
  .merge {
    display: none;
  }
}

.hero.static .floaters,
.hero.static .merge {
  display: none;
}

.bandKick {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.band h1,
.band h2 {
  font-size: clamp(2.6rem, 7.4vw, 5.2rem);
  margin-bottom: 0;
}

/* Ilk bandin cumlesi uzun: 5.2rem'de dort satira cikip kadraji boguyordu.
   Kendi olcegi var, digerleri buyuk kalmaya devam ediyor. */
.band[data-first="1"] h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.06;
}

.band .sub {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  color: var(--text-primary);
  opacity: 0.88;
  margin-top: 22px;
  max-width: 46ch;
  line-height: 1.5;
}

.band .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.band .btn {
  text-shadow: none;
}

/* Karakter ve kelime kutulari: giris efektlerinin tasiyicisi. */
.w {
  display: inline-block;
  white-space: pre;
}
.c {
  display: inline-block;
  will-change: transform, opacity;
}

/* Giris eden kelimeler kendi katmanlarinda kalsin, bulanikligin kenari
   temiz cizilsin. */
.e-lift .w {
  will-change: transform, opacity, filter;
}

/* Vurgulu kelime: cumlede tek renkli isaret. */
.band h1 .w.acc,
.band h2 .w.acc {
  color: var(--accent);
}

/* Marka adi logo olarak: yazi boyuna oturur, kelimelerle ayni girisle
   gelir ama tek parca halinde. */
.band h2 .h2logo {
  height: 0.74em;
  width: auto;
  display: inline-block;
  vertical-align: -0.04em;
  margin-right: 0.16em;
  --kl: clamp(0, calc(var(--k, 0) * 2.6), 1);
  opacity: var(--kl);
  transform: translateY(calc((1 - var(--kl)) * -26px));
  will-change: transform, opacity;
}

/* (a) lift: kelimeler soldan saga, netlesen bir odakla yerine oturur.
   Once harfler rastgele yonlerden donerek geliyordu; konfeti gibi duruyor
   ve filmin sakinligiyle catisiyordu. Simdi tek yon, tek ritim. */
.e-lift .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.2, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 0.38em));
  filter: blur(calc((1 - var(--kc)) * 7px));
}

.e-lift .sub {
  --ks: clamp(0, (var(--k, 0) - 0.42) * 2.4, 1);
  opacity: calc(var(--ks) * 0.88);
  transform: translateY(calc((1 - var(--ks)) * 12px));
}

/* (f) drift-down: kelimeler inisle birlikte yerine iner */
.e-drift .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -26px));
}

/* (e) word-by-word rise, uc varisli settle */
.e-rise .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.4, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 30px));
}
.e-rise .sub {
  --ks: clamp(0, (var(--k, 0) - 0.66) * 4, 1);
  opacity: var(--ks);
  transform: translateY(calc((1 - var(--ks)) * 16px));
}
.e-rise .cta {
  --kb: clamp(0, (var(--k, 0) - 0.78) * 5, 1);
  opacity: var(--kb);
  transform: translateY(calc((1 - var(--kb)) * 14px));
}

/* Scroll ipucu */
.cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  transform: translateX(-50%);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: opacity 0.5s var(--ease);
}

.cue span {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cuedrop 2.6s var(--ease) -0.4s infinite;
}

@keyframes cuedrop {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* Yukleme halkasi: video geldiginde kullanilir. */
.ring {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 5;
  width: 30px;
  height: 30px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.ring.on {
  opacity: 0.85;
}
.ring circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.16s linear;
}

/* ------------------------------------------------------------- fiyat bandi */

.priceband {
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(to bottom, rgba(168, 255, 62, 0.028), transparent);
}

.pricebandIn {
  padding: 20px 0;
  text-align: center;
  font-size: 15.5px;
  color: var(--text-secondary);
}

.pricebandIn b {
  color: var(--text-primary);
  font-weight: 600;
}

.pricebandIn a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(168, 255, 62, 0.28);
  transition: border-color 0.3s var(--ease);
}

.pricebandIn a:hover {
  border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------- section */

.sec {
  position: relative;
  padding-block: clamp(78px, 11vw, 152px);
}

.sec + .sec {
  padding-top: 0;
}

/* Kapanis bolumu kendi genis boslugunu getiriyor, onceki bolumun alt boslugu
   ustune binmesin. */
.sec:has(+ .close) {
  padding-bottom: clamp(36px, 5vw, 72px);
}

.kick {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}

.kick::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.h2 {
  font-size: clamp(2rem, 4.5vw, 3.35rem);
}

.lede {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-secondary);
  max-width: 58ch;
  line-height: 1.68;
}

.sub2 {
  margin-top: 16px;
  color: var(--text-secondary);
  max-width: 60ch;
}

/* --------------------------------------------------------- ekran cercevesi */
/* Cihaz cercevesi CSS ile ciziliyor, hazir mockup gorseli yok. */

.shot {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.035) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

.shot img {
  width: 100%;
  height: auto;
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 60px -18px rgba(168, 255, 62, 0.16) inset;
}

.shotCap {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* ------------------------------------------------------- 8.1 kacak bolumu */

/* Panel goruntusu sutunun tamamini kaplamiyor: bir tik kucuk, saga yasli
   ve katmanli golgeyle zeminden ayrik duruyor. */
.leak figure {
  width: 90%;
  justify-self: end;
}

.leak .shot {
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(168, 255, 62, 0.07);
}

.leak {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.leakNums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 40px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.leakNum {
  background: var(--canvas);
  padding: 20px 18px;
}

.leakNum b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2.1vw, 1.42rem);
  font-weight: 700;
  color: var(--leak);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.leakNum span {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-faint);
}

.leakClose {
  margin-top: 26px;
  font-size: 1.06rem;
  color: var(--text-primary);
  max-width: 40ch;
}

/* ------------------------------------------------ kendini yazan sozlesme */
/*
 * Metin solda, belge sagda.
 *
 * Donen bir animasyon, kaydirmaya bagli degil: bolumun anlattigi sey bir
 * sozlesmenin dolup imzalanmasi, o yuzden gorsel de bunu surekli yapiyor.
 * Sekme gizlendiginde body.paused hepsini durduruyor, o zaten sitenin
 * kurali.
 *
 * Butun koreografi tek bir 9 saniyelik cevrimde ve her ogenin kendi
 * keyframe'i var, animation-delay ile kaydirilmis DEGIL. Gecikmeyle
 * yapilsaydi her oge kendi cevrim sinirinda sifirlanirdi ve belge hicbir
 * an tam dolu gorunmezdi; boyle hepsi ayni anda sifirlaniyor ve o sifirlama
 * opacity 0 olan olu araliga denk geliyor, yani goz hic gormuyor.
 */

.whyRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.whyRow > .rv {
  max-width: 44rem;
}

.sheetWrap {
  position: relative;
  display: grid;
  place-items: center;
  /* Yuzu hafifce sola donuk, fiyat kutusuyla ayni dil. Suzulme de onunki. */
  animation: sheetFloat 8s var(--ease) infinite alternate;
}

@keyframes sheetFloat {
  from {
    transform: perspective(1200px) rotateY(-11deg) rotateX(1.5deg)
      translateY(0);
  }
  to {
    transform: perspective(1200px) rotateY(-11deg) rotateX(1.5deg)
      translateY(14px);
  }
}

/* Belgenin arkasindaki isik, cevrimle ayni nefeste. */
.sheetGlow {
  position: absolute;
  inset: 12% 6%;
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(168, 255, 62, 0.14),
    transparent 70%
  );
  filter: blur(26px);
  animation: sheetBreathe 9s var(--ease) infinite;
}

@keyframes sheetBreathe {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.94);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  86% {
    opacity: 0.7;
  }
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Her cizgi 100 birime normalize: dashoffset matematigi hepsinde ayni. */
.sheet [pathLength] {
  stroke-dasharray: 100;
}

.shEdge {
  stroke: var(--line-strong);
  stroke-width: 1.4;
  animation: shEdge 9s linear infinite;
}

.shHead {
  stroke: var(--accent);
  stroke-width: 3.4;
  animation: shHead 9s linear infinite;
}

.shRow {
  stroke: var(--text-faint);
  stroke-width: 2.4;
}

.shVal {
  stroke: var(--text-secondary);
  stroke-width: 2.4;
}

.shRow1 { animation: shR1 9s linear infinite; }
.shVal1 { animation: shR1 9s linear infinite; }
.shRow2 { animation: shR2 9s linear infinite; }
.shVal2 { animation: shR2 9s linear infinite; }
.shRow3 { animation: shR3 9s linear infinite; }
.shVal3 { animation: shR3 9s linear infinite; }
.shRow4 { animation: shR4 9s linear infinite; }
.shVal4 { animation: shR4 9s linear infinite; }

/* Para satirinin uzerinden gecen vurgu. Soldan aciliyor. */
.shMark {
  fill: rgba(168, 255, 62, 0.1);
  stroke: rgba(168, 255, 62, 0.34);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: shMark 9s var(--ease-out) infinite;
}

.shSign {
  stroke: var(--accent);
  stroke-width: 2.6;
  animation: shSign 9s linear infinite;
}

/*
 * Cevrim, yuzde olarak. Ciz, bekle, sol, olu aralikta sifirla.
 * Sifirlama her zaman opacity 0 iken oluyor, o yuzden hicbir sicrama
 * gorunmuyor.
 */
@keyframes shEdge {
  0%, 100% { stroke-dashoffset: 100; opacity: 0; }
  2% { opacity: 1; }
  11% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes shHead {
  0%, 8%, 100% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  18% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes shR1 {
  0%, 16%, 100% { stroke-dashoffset: 100; opacity: 0; }
  18% { opacity: 1; }
  26% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes shR2 {
  0%, 22%, 100% { stroke-dashoffset: 100; opacity: 0; }
  24% { opacity: 1; }
  32% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes shR3 {
  0%, 28%, 100% { stroke-dashoffset: 100; opacity: 0; }
  30% { opacity: 1; }
  38% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes shR4 {
  0%, 34%, 100% { stroke-dashoffset: 100; opacity: 0; }
  36% { opacity: 1; }
  44% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes shMark {
  0%, 48%, 100% { transform: scaleX(0); opacity: 0; }
  50% { opacity: 1; }
  60% { transform: scaleX(1); }
  86% { transform: scaleX(1); opacity: 1; }
  95% { transform: scaleX(1); opacity: 0; }
}

@keyframes shSign {
  0%, 62%, 100% { stroke-dashoffset: 100; opacity: 0; }
  64% { opacity: 1; }
  80% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
}

/* Belge sagda yer bulamayinca metnin altina geciyor ve kucuyor. */
@media (max-width: 900px) {
  .whyRow {
    grid-template-columns: minmax(0, 1fr);
  }
  .sheet {
    max-width: 340px;
  }
}

/* Hareket tercihi kapaliysa belge dolu ve imzali duruyor: donus yok, ama
   anlatilan sey yine ekranda. */
@media (prefers-reduced-motion: reduce) {
  .sheetWrap,
  .sheetGlow,
  .sheet * {
    animation: none;
  }
  .sheetWrap {
    transform: perspective(1200px) rotateY(-11deg) rotateX(1.5deg);
  }
  .sheet [pathLength] {
    stroke-dashoffset: 0;
  }
  .shMark {
    transform: scaleX(1);
  }
}

/* ------------------------------------------------------ 8.2 sozlesme adimlari */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  margin-top: clamp(40px, 6vw, 66px);
  counter-reset: step;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step .shot {
  border-radius: var(--radius);
}

.stepNo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.stepNo i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent-muted);
  background: rgba(168, 255, 62, 0.07);
  font-style: normal;
  font-size: 11px;
}

.step h3 {
  font-size: 1.24rem;
  letter-spacing: -0.025em;
}

.step p {
  color: var(--text-secondary);
  font-size: 15.2px;
  line-height: 1.62;
}

/* Govde solgun; vurgulanan sure ana murekkeple one cikiyor. */
.step p b {
  color: var(--text-primary);
  font-weight: 600;
}

/* ------------------------------------------------------- 8.3 imza anı */

.signWrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, var(--panel), var(--panel-soft));
  padding: clamp(26px, 4.4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

.signSay {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.28;
  max-width: 22ch;
}

.signList {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signList li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  color: var(--text-secondary);
  font-size: 15.4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}

.signWrap.done .signList li {
  opacity: 1;
  transform: none;
}
.signWrap.done .signList li:nth-child(1) {
  transition-delay: 0.05s;
}
.signWrap.done .signList li:nth-child(2) {
  transition-delay: 0.19s;
}
.signWrap.done .signList li:nth-child(3) {
  transition-delay: 0.33s;
}

.signList i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-2px);
}

.pad {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--canvas-deep);
  padding: 22px;
  user-select: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease);
}

.signWrap.done .pad {
  border-color: var(--accent-muted);
}

.padHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.padState {
  color: var(--text-faint);
  transition: color 0.4s var(--ease);
}

.signWrap.done .padState {
  color: var(--accent);
}

.padInk {
  margin-top: 14px;
  height: 96px;
  position: relative;
}

.padInk svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.padInk path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(168, 255, 62, 0.4));
}

.padRule {
  margin-top: 6px;
  height: 1px;
  background: var(--line-strong);
}

.padHint {
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.4px;
  color: var(--text-faint);
}

.padBar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.padBar b {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ------------------------------------------------------------ oynatici */
/* Tasarlanmis oynatici: otomatik oynatma yok, ses yok, oynatma ziyaretcinin
   elinde. Reduced motion'da poster kaliyor. */

.player {
  margin-top: clamp(34px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-soft);
  overflow: hidden;
}

.playerTabs {
  display: flex;
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.playerTab {
  flex: 1;
  min-width: 0;
  background: var(--panel-soft);
  border: 0;
  padding: 15px 18px;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--body);
  font-size: 14.6px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.playerTab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}

.playerTab:hover {
  color: var(--text-primary);
  background: var(--panel);
}

.playerTab[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--panel);
}

.playerTab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.playerTab i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--text-faint);
}

/* Tek klipli surum: sekme satiri yok, kare daha buyuk. Urun sayfalarinda
   kullaniliyor, cunku orada kucuk goruntu ise yaramiyor. */
.player.solo .playerTabs {
  display: none;
}

.player.solo {
  margin-top: 0;
}

.playerStage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--canvas-deep);
}

.playerStage video,
.playerStage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playerStage video {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.player.playing .playerStage video {
  opacity: 1;
}

.player.playing .playerStage img {
  opacity: 0;
}

.playerStage img {
  transition: opacity 0.45s var(--ease);
}

.playBtn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.35s var(--ease), opacity 0.35s var(--ease);
}

.playBtn:hover {
  background: rgba(8, 9, 11, 0.28);
}

.player.playing .playBtn {
  opacity: 0;
  pointer-events: none;
}

.playBtn span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 12px rgba(168, 255, 62, 0.1), 0 18px 44px -12px rgba(0, 0, 0, 0.9);
  transition: transform 0.4s var(--ease-out);
}

.playBtn:hover span {
  transform: scale(1.07);
}

.playBtn svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.playerBar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-soft);
}

.playerBar button {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.playerBar button:hover {
  border-color: var(--accent-muted);
  color: var(--accent);
}

.playerBar svg {
  width: 13px;
  height: 13px;
}

.playerTrack {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.playerTrack b {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

.playerTime {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.playerCap {
  margin-top: 16px;
  font-size: 14.6px;
  color: var(--text-secondary);
  max-width: 72ch;
}

@media (max-width: 720px) {
  .playerTabs {
    flex-direction: column;
  }
  .playerTab {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .playerTab::after {
    height: 100%;
    width: 2px;
    right: auto;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  .playerTab[aria-selected="true"]::after {
    transform: scaleY(1);
  }
  .playerStage {
    aspect-ratio: 16 / 11;
  }
  .playBtn span {
    width: 56px;
    height: 56px;
  }
}

/* ---------------------------------------------------- 8.4 yakaladiklari */

/* Bolum kendi zemininde: sayfadan bir tik daha koyu, kartlar bu
   karanligin uzerinde ayri ayri duruyor. */
.catchSec {
  background: #030405;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* Kendi zemini olan bolum simetrik bosluk ister. ".sec + .sec" kurali ust
   boslugu sifirliyor; bu, arka plani olmayan bolumlerde dogru ama burada
   bandin ustunde 32px, altinda 153px birakip kutuyu yamuk gosteriyordu.
   Ust boslugu geri veriyor, sonra bolumu yukari cekerek onceki bolumun
   alt boslugunu bandin icine aliyoruz: sayfa uzamiyor, band simetrik. */
.sec + .catchSec {
  --cpad: clamp(58px, 8vw, 112px);
  /* Ust tarafta etiketin kendi satir boslugu 31px ekliyor; murekkepten
     kenara olan mesafe iki tarafta esitlensin diye o kadari dusuluyor. */
  padding-top: calc(var(--cpad) - 31px);
  padding-bottom: var(--cpad);
  /* Onceki bolumun alt boslugu artik calinmiyor: bandin ustunde de
     altinda da tam bir bolum boslugu var, band nefes aliyor. */
  margin-top: 0;
}

/* Banddan sonraki bolum ust boslugunu geri aliyor; ".sec + .sec" onu
   sifirliyordu ve The fleet etiketi siyah kenara yapisik kaliyordu. */
.catchSec + .sec {
  padding-top: clamp(78px, 11vw, 152px);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(38px, 5.5vw, 62px);
}

/* Her kart kendi rengini tasiyor: cerceve, ikon ve ustteki ince cizgi
   ayni tondan. Renk kartin kendi degiskeninde, tek yerden donuyor. */
.card[data-tone="lime"] { --ct: var(--accent); }
.card[data-tone="mint"] { --ct: var(--accent-mid); }
.card[data-tone="teal"] { --ct: var(--accent-deep); }

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--ct, #a8ff3e) 7%, #0a0d10) 0%,
    #080a0d 58%
  );
  border: 1px solid color-mix(in srgb, var(--ct, #a8ff3e) 20%, transparent);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.8vw, 34px);
  transition: border-color 0.42s var(--ease), transform 0.42s var(--ease),
    box-shadow 0.42s var(--ease);
}

/* Ust kenardaki renkli vurus: hover'da kenardan kenara uzuyor. */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 34%;
  background: linear-gradient(to right, var(--ct, #a8ff3e), transparent);
  opacity: 0.75;
  transition: width 0.52s var(--ease), opacity 0.42s var(--ease);
}

.card:hover {
  border-color: color-mix(in srgb, var(--ct, #a8ff3e) 52%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6),
    0 0 46px color-mix(in srgb, var(--ct, #a8ff3e) 12%, transparent);
}

.card:hover::before {
  width: 100%;
  opacity: 1;
}

/* Ikon sag ust kosede, akisin disinda: hover'da buyudugunde kart
   yeniden olculmuyor, kutu boyu sabit kaliyor. */
.card svg {
  position: absolute;
  top: clamp(22px, 2.5vw, 30px);
  right: clamp(22px, 2.5vw, 30px);
  width: 28px;
  height: 28px;
  color: var(--ct, var(--accent));
  /* Buyume yonu: sagi ustu sabit, dolayisiyla sol alta dogru aciliyor. */
  transform-origin: 100% 0;
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
}

.card:hover svg,
.card:active svg,
.card:focus-within svg {
  transform: rotate(-20deg) scale(1.85);
  opacity: 0.9;
}

/* Baslik buyuyen ikonun altina girmesin diye sag tarafta pay birakiliyor. */
.card h3,
.card p {
  padding-right: 46px;
}

.card h3 {
  font-size: 1.09rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.card p {
  margin-top: 9px;
  color: var(--text-secondary);
  font-size: 14.8px;
  line-height: 1.6;
}

/* ------------------------------------------------------- 8.5 genis kanit */

.wide {
  position: relative;
  border-block: 1px solid var(--line-soft);
  /* Ust kenardaki sert cizgi yerine yumusak bir gecis: sayfa yigin degil,
     tek bir yer gibi okunmali. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--canvas-deep) 0%, var(--canvas)) 0%,
    var(--canvas-deep) 22%,
    var(--canvas-deep) 78%,
    var(--canvas) 100%
  );
  padding-block: clamp(58px, 7.5vw, 100px);
  margin-block: 0;
}

/* Soldan hizali. Ortali durup sayfanin geri kalanindan kopuyordu; tek
   ortali blok kapanis, o da en altta kendi basina duran bir banner. */
.wideHead {
  /*
   * 640px idi ve baslik iki satira boluniyordu; bolum basligi gereksiz
   * uzuyordu. Bu bileseni kullanan uc baslik da otuz karakter civari ve
   * en genisi tek satirda 760px istiyor, o yuzden 860px hepsini tek
   * satirda tutuyor ve elde pay birakiyor. Kabin 1385px, yer bol.
   *
   * Metin olcusu ayri tutuluyor: kap genisledi diye satirlar uzamasin,
   * lede kendi 56ch'inde kaliyor.
   */
  max-width: 860px;
}

.wideHead .lede {
  max-width: 56ch;
}

/*
 * Gorsel de sol kenardan basliyor.
 *
 * 940px'e sabitlenip ortalaniyordu: ustundeki yazi soldan basladigi icin
 * sol kenarlari tutmuyor ve gorsel yamuk oturmus gorunuyordu. Simdi kabin
 * genisligini aliyor, yani hem sol hem sag kenari metin sutunuyla ayni.
 */
.wideShot {
  margin-top: clamp(34px, 5vw, 58px);
  margin-inline: 0;
}

/* ------------------------------------------------------------ 8.6 filo */

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(38px, 5.5vw, 60px);
}

/* -------------------------------------------------------- 8.7 roadmap */

.road {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.roadRow {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
  align-items: start;
}

.roadRow + .roadRow {
  border-top: 1px solid var(--line-soft);
}

.roadRow h3 {
  font-size: 1.14rem;
  letter-spacing: -0.024em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.roadRow h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent-deep);
  flex: none;
}

.roadRow p {
  color: var(--text-secondary);
  font-size: 15.2px;
}

/* -------------------------------------------------------- teslim yollari */
/*
 * Sozlesmenin cikis kanallari. Onceden .road ile uc satirlik duz bir liste
 * idi: sayfanin tum genisligi bostayken uc baslik ust uste sikismisti.
 * Bunlar bir sira degil, ayni anda acik duran uc paralel yol, o yuzden yan
 * yana duruyorlar ve her birinin kendi isareti var.
 *
 * Kurallar .stagger'dan SONRA geliyor: .stagger.in > * transform'u none'a
 * cekiyor ve ayni ozgullukte, dolayisiyla kaynak sirasi belirliyor. Sonra
 * gelmezse karta gelince kalkma hareketi hic olmuyordu.
 */

.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.ways .way {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-soft);
  overflow: hidden;
  transition:
    border-color 0.45s var(--ease),
    transform 0.5s var(--ease-out),
    background 0.45s var(--ease);
}

/* Alttan yukselen isik. Uzerine gelince kalkiyor, cikinca geri iniyor:
   sitenin kurali, her sey girdigi gibi cikiyor. */
.ways .way::after {
  content: "";
  position: absolute;
  inset: auto -25% -55% -25%;
  height: 68%;
  background: radial-gradient(
    58% 100% at 50% 100%,
    rgba(168, 255, 62, 0.16),
    transparent 72%
  );
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out);
  pointer-events: none;
}

/* Isik katmaninin uzerinde kalsinlar. Ikon disarida: onun konumu absolute
   ve bu kural (0,2,0) onu ezerdi. */
.ways .way > :not(.wayIcon) {
  position: relative;
  z-index: 1;
}

.ways .way:hover {
  border-color: var(--accent-muted);
  background: var(--panel);
  transform: translateY(-4px);
}

.ways .way:hover::after {
  opacity: 1;
  transform: none;
}

/*
 * Ikon sag ust kosede ve akisin disinda, arka plan karosu yok.
 *
 * Kare bir karo icinde oturuyordu ve hover'da sadece rengi degisiyordu.
 * Sitede bu isin zaten bir dili var (.card svg): isaret kartin sag ust
 * kosesinde duruyor, akisin disinda oldugu icin buyudugunde kart yeniden
 * olculmuyor, ve transform-origin sag ust oldugu icin sol alta dogru
 * aciliyor. Ayni deseni burada da kullaniyoruz, ayni aciyla.
 */
.wayIcon {
  position: absolute;
  z-index: 1;
  top: clamp(22px, 2.5vw, 30px);
  right: clamp(22px, 2.5vw, 30px);
  display: block;
  color: var(--accent);
  /* Buyume yonu: sagi ustu sabit, dolayisiyla sol alta dogru aciliyor. */
  transform-origin: 100% 0;
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
}

.wayIcon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.ways .way:hover .wayIcon,
.ways .way:active .wayIcon,
.ways .way:focus-within .wayIcon {
  transform: rotate(-20deg) scale(1.85);
  opacity: 0.9;
}

/* Buyuyen ikonun altina girmesin diye baslikta ve metinde sag pay. */
.ways .way h3 {
  font-size: 1.2rem;
  letter-spacing: -0.024em;
  padding-right: 46px;
}

.ways .way p {
  color: var(--text-secondary);
  font-size: 15.2px;
  line-height: 1.6;
  padding-right: 46px;
}

/* Uc kart 900px'in altinda dar kaliyor, alt alta geciyorlar. */
@media (max-width: 900px) {
  .ways {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wayIcon {
    transition: none;
  }
}

/* ------------------------------------------------------------ referans */
/* Komsularindan farkli iskelet: kart degil, buyuk bir alinti ve altina
   imza kaleminden cikan bir vurus. */

.quote {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
  position: relative;
}

.quoteMark {
  position: absolute;
  left: -18px;
  top: -34px;
  width: 88px;
  height: 88px;
  color: var(--accent);
  opacity: 0.14;
  pointer-events: none;
}

.quoteText {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.32rem, 2.9vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -0.026em;
  color: var(--text-primary);
  text-wrap: pretty;
}

.quoteRule {
  height: 2px;
  margin-top: clamp(22px, 3vw, 34px);
  background: linear-gradient(to right, var(--accent-deep), var(--accent) 62%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) 0.18s;
}

.qwrap.in .quoteRule {
  transform: scaleX(1);
}

.quoteWho {
  padding-bottom: 4px;
}

/* Musteri logosu kendi renginde duruyor: kanit olmasi icin gercek
   gorunmesi gerek, o yuzden markanin yesiline cevrilmiyor. Zemini yok,
   sadece isaret. */
.quoteLogo {
  width: auto;
  height: 74px;
  margin-bottom: 16px;
  opacity: 0.95;
}

.quoteWho b {
  display: block;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.quoteWho span {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 860px) {
  .quote {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .quoteMark {
    left: -8px;
    top: -26px;
    width: 62px;
    height: 62px;
  }
}

/* ----------------------------------------------------------- 8.8 demo */

.demo {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(38px, 6vw, 74px) clamp(22px, 4vw, 56px);
  background: radial-gradient(120% 140% at 50% 0%, rgba(168, 255, 62, 0.055), transparent 62%),
    var(--panel-soft);
  position: relative;
  overflow: hidden;
}

.demo .lede {
  margin-inline: auto;
}

.demo .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.demoNote {
  margin-top: 18px;
  font-size: 14.2px;
  color: var(--text-faint);
}

/* --------------------------------------------------------- 8.9 fiyat */

/* ------------------------------------------------------- veri aktarimi */
/* Renkli serit degil, sitenin kendi paneli. Yuzey ve cerceve fiyat
   kutusuyla ayni token'lardan, ustteki lime vurus kartlardaki ile ayni
   dil. Yesil burada da zemin degil, aksan: cizgi, ok ve sirayla yanan
   haplar. Uc denemede yesil zemin hep yabanci durdu; sitede hicbir yuzey
   yesil degil, o yuzden. */

.importSec {
  /* .sec + .sec ust boslugu sifirliyor; panel siyah bandin hemen
     dibine yapismasin diye yarim bolum payi. */
  padding-top: clamp(40px, 5.2vw, 76px);
}

/* Zemin lime'in kendi karanlik ucu: --accent-ink ile --accent-muted
   arasi. Bunlar palette tanimli, See it live butonunun murekkebiyle ayni
   aile. Onceki denemeler teal'den gidiyordu, o yuzden hep yabanci durdu:
   sitede teal bir yuzey yok, ama lime uzerine koyu yesil murekkep var. */
.importPanel {
  position: relative;
  overflow: hidden;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(38px, 5.2vw, 64px) clamp(24px, 4vw, 56px) clamp(36px, 4.8vw, 58px);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(168, 255, 62, 0.13), transparent 70%),
    linear-gradient(180deg, #152608 0%, #0f1c05 55%, var(--accent-ink) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* Ust kenarda ortadan iki yana sonen lime cizgi: onemli olan seyin
   isareti, kartlardaki vurusun ortalanmis hali. */
.importPanel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent) 50%, transparent);
  opacity: 0.85;
}

.importH {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--text-primary);
  text-wrap: balance;
}

.importCopy {
  margin: 16px auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Kaynaklar, ok, varis: yon soldan saga, mesaj tek bakista okunuyor. */
.importFlow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 26px);
  margin-top: clamp(26px, 3.4vw, 38px);
}

.importChips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.importChips li {
  padding: 10px 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-ink) 78%, #000);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
  /* Uc hap tek dongude sirayla yaniyor: 3 saniye, her birine bir saniye. */
  animation: chipRelay 3s linear infinite;
}

.importChips li:nth-child(1) { animation-delay: 0s; }
.importChips li:nth-child(2) { animation-delay: 1s; }
.importChips li:nth-child(3) { animation-delay: 2s; }

/* Yanma ve sonme yumusak, aradaki bekleme sabit: dongu basa donerken
   goze carpan bir sicrama olmuyor. */
@keyframes chipRelay {
  0% {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--text-secondary);
    box-shadow: none;
  }
  10%,
  24% {
    border-color: color-mix(in srgb, var(--accent) 80%, transparent);
    color: var(--text-primary);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 26%, transparent);
  }
  38%,
  100% {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--text-secondary);
    box-shadow: none;
  }
}

.importChips li:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  color: var(--text-primary);
}

.importArrow {
  width: 46px;
  height: 16px;
  flex: none;
  color: var(--accent);
  opacity: 0.9;
}

/* Varis noktasi: zeminsiz, sade marka kilidi. */
.importDest {
  height: 24px;
  width: auto;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .importChips li {
    animation: none;
  }
}

/* Dar ekranda ok asagi bakiyor, akis dikey devam ediyor. */
@media (max-width: 620px) {
  .importArrow {
    transform: rotate(90deg);
  }
}

/* ------------------------------------------------------------- fiyat */
/* Sayfanin geri kalani gibi soldan hizali, sakin. Rakam markanin iki
   yesilini tasiyor: AED orta yesil, sayi acik yesil. */

.priceRow {
  display: grid;
  /* Sol sutun metnin kendi genisligi kadar, kutu hemen yaninda:
     onceden 1fr sol sutunu sisirip kutuyu sayfanin sagina itiyordu. */
  grid-template-columns: minmax(0, auto) minmax(0, 430px);
  justify-content: start;
  gap: clamp(30px, 5.2vw, 76px);
  align-items: start;
  margin-top: clamp(26px, 3.4vw, 40px);
  max-width: 1180px;
}

.priceMain {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.priceBig {
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-size: clamp(4rem, 12.4vw, 9.4rem);
  font-variant-numeric: tabular-nums;
  /*
   * Optik boyut elle sabitlendi, yoksa rakam ince cikiyor.
   *
   * Bricolage degisken bir font ve opsz ekseni var. Tarayici varsayilan
   * olarak opsz'yi punto ile birlikte buyutuyor (font-optical-sizing:
   * auto), bu da tasarim geregi kalinligi ORANTILI olarak inceltiyor:
   * display kesimleri metin kesimlerinden daha ince cizilir. 150 puntoda
   * eksen 96'ya dayaniyor, yani ailenin en ince kesimi.
   *
   * 800 zaten bu ailenin en kalin agirligi, oradan alacak yer yok. Kalinlik
   * opsz'den geliyor: 28 metin kesimine yakin, govdeler dolgunlasiyor ama
   * rakamin gozleri kapanmiyor. 20 denendi, tiknazlasip display karakterini
   * kaybediyordu.
   *
   * font-variation-settings, font-weight'i eziyor, o yuzden wght burada da
   * yaziyor. Ustteki font-weight degisken font yuklenmezse devrede.
   */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 28, "wght" 800;
}

/* Para birimi gri, rakam yesil. Ikisi de yesilken bolum uc tonlu bir
   cumbuse donuyordu: buyuk AED mint, rakam lime, kutulardaki AED yine
   mint, ikonlar teal. AED bir etiket, bir vurgu degil; renkten cikinca
   goz dogrudan rakama gidiyor ki zaten oraya gitmesi gerekiyordu.

   Gri, text-faint degil text-secondary. Ilki zeminde 4.17:1 kaliyor ve
   okunmuyordu; bu 7.56:1 ve hemen altindaki "Billed annually" cumlesiyle
   ayni ton, yani sessiz kalmaya devam ediyor ama okunuyor. */
.priceBig .cur {
  font-size: 0.42em;
  letter-spacing: 0.03em;
  /* Kutulardaki AED'lerden bir ton acik. Onlar kucuk etiket, bu rakamla
     ayni kilidin parcasi ve o boyutta biraz daha govde tasiyabiliyor. */
  color: color-mix(in srgb, var(--text-primary) 40%, var(--text-secondary));
  /* Rakamdan ince. font-variation-settings tek parca bir bildirim, ustten
     miras alinan opsz 28'i de tasimasi gerekiyor, yoksa AED rakamla ayni
     kesimde kalmiyor. 600 bu ailenin yuklenen en ince agirligi. */
  font-variation-settings: "opsz" 28, "wght" 600;
  transform: translateY(-0.62em);
}

/* Duz lime bu boyutta bagiriyordu. Ayni ailenin ucu boyunca inen bir
   gecis, rakami buyuk birakip parlakligi asagi dogru sonduruyor: tepede
   lime, ortada mint, tabanda teal. */
.priceBig .num {
  color: var(--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .priceBig .num {
    /* Lime tepede daha uzun tutuluyor. Onceki rampa 52%'de mint'e
       gecip 100%'de teal'e iniyordu ve rakamin alt yarisi belirgin
       sekilde sonuyordu; siyah zeminde parlak metin optik olarak daha
       kalin okunur, sonuk metin daha ince. Yani gradient'in kendisi
       inceligin ikinci sebebiydi. */
    background: linear-gradient(
      168deg,
      var(--accent) 0%,
      var(--accent) 24%,
      var(--accent-mid) 70%,
      var(--accent-deep) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Tek satirda kalsin: 34ch siniri cumleyi ikiye boluyordu. */
.priceSub {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--text-secondary);
  line-height: 1.55;
}

.priceCta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(14px, 1.7vw, 20px);
}

/* Sifirlar: fiyatin sagindaki dortlu matris. Kutu duz one bakmiyor,
   yuzu hafifce sola donuk duruyor; derinlik perspektiften geliyor,
   golge de o yone dusuyor. Yesil kutu degil, notr bir yuzey.

   Yuzey zeminden ACIK, koyu degil. Onceden #050608 idi, yani sayfanin
   #08090b zemininin 0.66 kati parlaklik: kutu bir yuzey degil, zeminde
   bir delikti. Karanlik odada goz buna uyum sagliyor ve iyi duruyordu,
   ama sabah isiginda ekran camindan yansiyan isik her seye sabit bir
   parlaklik ekliyor ve 1.018:1'lik bir fark tamamen kayboluyor. OLED'de
   daha da belirgin, cunku siyah gercekten siyah oldugu icin yansima
   orantili olarak daha cok bastiriyor.

   Sitedeki her kart --panel-soft kullaniyor ve zeminden acik duruyor;
   sadece bu kutu ters taraftaydi, sadece bu kutu kayboluyordu. Artik
   ayni tokenlarda: yuzey --panel-soft, kenarlik --line. */

.zerosBox {
  align-self: start;
  /* Basligin ustune kadar cikiyor: satir basligin altinda basliyor,
     negatif ust bosluk kutuyu o bandin icine tasiyor. */
  margin-top: clamp(-134px, -8.9vw, -62px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-soft);
  overflow: hidden;
  transform-origin: 62% 50%;
  box-shadow: -34px 28px 70px rgba(0, 0, 0, 0.6);
  /* Donme ve suzulme tek animasyonda: donmeyi ayri bir transform olarak
     birakirsam animasyon onu eziyor ve kutu duzlesiyordu. */
  animation: zeroFloat 7.5s ease-in-out infinite alternate;
}

@keyframes zeroFloat {
  from {
    transform: perspective(1000px) rotateY(-16deg) rotateX(2.5deg) translateY(0);
  }
  to {
    transform: perspective(1000px) rotateY(-16deg) rotateX(2.5deg) translateY(18px);
  }
}

/* Hareket tercihi kapaliysa egim kaliyor, suzulme duruyor. */
@media (prefers-reduced-motion: reduce) {
  .zerosBox {
    animation: none;
    transform: perspective(1000px) rotateY(-16deg) rotateX(2.5deg);
  }
}

.zerosRow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.zerosRow li {
  background: var(--panel-soft);
  padding: clamp(22px, 2.6vw, 32px) clamp(14px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.4s var(--ease);
}

/* Hover notr: yesil zemin marka dilimize oturmuyordu, sadece bir tik
   aciliyor. */
.zerosRow li:hover {
  background: var(--panel-lift);
}

/* Hucrede tek yesil kaldi: rakam lime, ikon teal, AED gri. Uc yesil ton
   ayni karede fazlaydi. */
.zerosRow > li > svg {
  width: 22px;
  height: 22px;
  margin-bottom: 12px;
  color: var(--accent-deep);
  opacity: 0.9;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease);
}

.zerosRow li:hover > svg {
  transform: translateY(-2px);
  opacity: 1;
}

.zerosRow .z {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Buyuk fiyattaki AED ile ayni kural: etiket gri, rakam yesil. */
.zerosRow .z i {
  font-style: normal;
  font-size: 0.3em;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  transform: translateY(-1.1em);
}

.zerosRow b {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ------------------------------------------------------------- 8.10 sss */

.faq {
  margin-top: clamp(34px, 5vw, 54px);
  border-top: 1px solid var(--line-soft);
}

.qa {
  border-bottom: 1px solid var(--line-soft);
}

.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  transition: color 0.3s var(--ease);
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary:hover {
  color: var(--accent);
}

.qa summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}

.qa[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
  opacity: 1;
}

/* Cekmece: yukseklik JS'te suruluyor, gecis burada. overflow gizli ki
   kapanirken metin disari tasmasin. */
.qa .ans {
  padding: 0 44px 24px 0;
  color: var(--text-secondary);
  max-width: 68ch;
  font-size: 15.6px;
  line-height: 1.68;
  /* Yukseklik JS'te suruluyor. border-box olmadan height:0 dolguyu
     kirpmiyor ve cekmece 24px'te takiliyordu. */
  box-sizing: border-box;
  overflow: hidden;
}

/* Cevap govdesi solgun; vurgulanan giris ana murekkeple one cikiyor. */
.qa .ans b {
  color: var(--text-primary);
  font-weight: 600;
}

/* ------------------------------------------------------------ kapanis */

/*
 * ORTALI, ve oyle kalacak. Sitedeki tek ortali blok bu.
 *
 * Bir kez sola alindi ve geri getirildi, o yuzden karar burada yaziyor:
 * sayfanin geri kalani soldan hizali cunku okunuyor, bu ise okunmuyor,
 * kapatiyor. Her sayfanin en altinda duran, kendi basina bir banner: iki
 * kelime, bir cumle, iki buton. Sayfanin sonunda goz zaten ortaya
 * dusuyor ve blok orada duruyor.
 *
 * Sola alinmis halini gormek isteyen olursa: denendi, sayfanin bittigi
 * hissi kayboldu ve blok kendinden onceki bolumun devami gibi okundu.
 */
.close {
  text-align: center;
  padding-block: clamp(84px, 12vw, 160px);
}

.close h2 {
  font-size: clamp(2.6rem, 7vw, 5rem);
}

.close .lede {
  margin-inline: auto;
  margin-top: 22px;
}

.close .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

/* ------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line-soft);
  background: var(--canvas-deep);
  padding-block: clamp(48px, 7vw, 76px) 34px;
  position: relative;
  z-index: 1;
}

.footGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 48px);
}

.footBrand p {
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 14.4px;
  max-width: 34ch;
  line-height: 1.6;
}

.footCol h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 15px;
}

.footCol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footCol a {
  color: var(--text-secondary);
  font-size: 14.8px;
  transition: color 0.25s var(--ease);
}

.footCol a:hover {
  color: var(--accent);
}

.footEnd {
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: baseline;
  color: var(--text-faint);
  font-size: 13.4px;
}

.footEnd p {
  max-width: 74ch;
}

/* Telif satirindaki dik cizgi. Metnin boyundan uzun, ustunde ve altinda
   soluyor: sitenin imza rayi gibi cizilmis duruyor, damgalanmis degil. */
.footEnd .sep {
  display: inline-block;
  width: 1px;
  height: 1.5em;
  margin: 0 13px;
  vertical-align: -0.42em;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--line-strong) 24%,
    var(--line-strong) 76%,
    transparent 100%
  );
}

/* ----------------------------------------------------- imza cizgisi rayi */
/* Sitenin imza elementi: hero'nun bittigi yerden footer'a inen tek surekli cizgi. */

main {
  position: relative;
}

.rail {
  position: absolute;
  left: max(8px, calc((100vw - var(--shell)) / 2 - 64px));
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.rail.on {
  opacity: 1;
}

.rail svg {
  width: 100%;
  height: 100%;
}

.rail path {
  fill: none;
  stroke: url(#railGrad);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.railHead {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px rgba(168, 255, 62, 0.85));
}

/* ------------------------------------------------------- giris koreografi */

.rv {
  opacity: 0;
  transform: translateY(22px);
}

.rv.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.78s var(--ease), transform 0.78s var(--ease-out);
}

.stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger.in > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease-out);
}

.stagger.in > *:nth-child(1) {
  transition-delay: 0.02s;
}
.stagger.in > *:nth-child(2) {
  transition-delay: 0.1s;
}
.stagger.in > *:nth-child(3) {
  transition-delay: 0.18s;
}
.stagger.in > *:nth-child(4) {
  transition-delay: 0.26s;
}
.stagger.in > *:nth-child(5) {
  transition-delay: 0.34s;
}
.stagger.in > *:nth-child(6) {
  transition-delay: 0.42s;
}

/* Giris bitince gecikmeleri emekli et, yoksa her hover kadar bekliyor.
   Ozgulluk nth-child kuralini yenmek zorunda: iki sinif + nth-child. */
.stagger.done.in > *:nth-child(n) {
  transition-delay: 0s;
}

/* ------------------------------------------------------------ ic sayfalar */

/* Alt kenardaki cizgi kaldirildi: basligi asagisindan keserek sayfayi iki
   parcaya boluyordu, oysa tek bir yer gibi okunmali. */
.pageHead {
  padding-block: clamp(64px, 10vw, 128px) clamp(34px, 5vw, 60px);
}

.pageHead h1 {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  max-width: 20ch;
}

.pageHead .lede {
  margin-top: 22px;
}

.crumb {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.crumb a {
  color: var(--text-faint);
  transition: color 0.25s var(--ease);
}
.crumb a:hover {
  color: var(--accent);
}

/* Uzun metin (rehberler) */
.prose {
  max-width: 100%;
}

.prose h2 {
  font-size: clamp(1.5rem, 2.9vw, 2rem);
  margin-top: 2.2em;
  margin-bottom: 0.55em;
  max-width: 26ch;
}

.prose h3 {
  font-size: clamp(1.16rem, 2vw, 1.34rem);
  font-weight: 700;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-bottom: 1.05em;
  color: var(--text-secondary);
  max-width: 70ch;
  line-height: 1.72;
}

.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 0 0 1.3em;
  padding-left: 1.35em;
  color: var(--text-secondary);
  max-width: 68ch;
}

.prose li {
  margin-bottom: 0.5em;
  line-height: 1.68;
}

.prose li::marker {
  color: var(--accent-deep);
}

.prose a {
  color: var(--accent);
  border-bottom: 1px solid rgba(168, 255, 62, 0.3);
}

.prose a:hover {
  border-bottom-color: var(--accent);
}

.tableWrap {
  overflow-x: auto;
  margin: 0 0 1.6em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.8px;
  min-width: 520px;
}

.prose th,
.prose td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--text-secondary);
}

.prose th {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--panel-soft);
  white-space: nowrap;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.guideLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 72px);
}

.aside {
  position: sticky;
  top: 92px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--panel-soft);
}

.aside h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 12px;
}

.aside p {
  font-size: 14.4px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.sources {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.sources h2 {
  font-size: 1.1rem;
  margin: 0 0 14px;
}

.sources ol {
  padding-left: 1.2em;
  font-size: 13.8px;
  color: var(--text-faint);
  max-width: 78ch;
}

.sources li {
  margin-bottom: 8px;
  line-height: 1.55;
}

.sources a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--line-strong);
  overflow-wrap: anywhere;
}

.sources a:hover {
  color: var(--accent);
}

/* Rehber dizini kartlari */
.guideGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
  padding-block: clamp(40px, 6vw, 72px);
}

.guideCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  background: var(--panel-soft);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out),
    background 0.4s var(--ease);
}

.guideCard:hover {
  border-color: var(--accent-muted);
  background: var(--panel);
  transform: translateY(-3px);
}

.guideCard h2 {
  font-size: 1.2rem;
  letter-spacing: -0.026em;
}

.guideCard p {
  color: var(--text-secondary);
  font-size: 14.8px;
  line-height: 1.6;
}

.guideCard .more {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Fiyat sayfasi */
.planCard {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4.4vw, 48px);
  background: radial-gradient(120% 130% at 50% 0%, rgba(168, 255, 62, 0.06), transparent 60%),
    var(--panel-soft);
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}

.planFig {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.planMeta {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 15.4px;
}

.planMeta b {
  color: var(--text-primary);
  font-weight: 600;
}

.planFrame {
  margin-top: 22px;
  font-size: 14.2px;
  color: var(--text-faint);
}

.planCta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.incl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin-top: clamp(38px, 5.5vw, 58px);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  padding: 0;
}

.incl li {
  background: var(--canvas);
  padding: 18px 20px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 15px;
  color: var(--text-secondary);
}

.incl li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent-deep);
  transform: translateY(-2px);
}

.founding {
  margin-top: clamp(34px, 5vw, 52px);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 34px);
  background: rgba(168, 255, 62, 0.035);
  max-width: 720px;
  margin-inline: auto;
}

.founding h3 {
  font-size: 1.14rem;
  margin-bottom: 10px;
}

.founding p {
  color: var(--text-secondary);
  font-size: 15.2px;
  max-width: 62ch;
}

/* Iletisim */
/* Ust bosluk daraltildi: kartlar sayfa basligindan kopuk duruyordu, simdi
   onunla ayni nefeste. Alt bosluk kapanisa gecisi tasiyor. */
.contactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.6vw, 26px);
  padding-block: clamp(24px, 3.2vw, 42px) clamp(30px, 4.6vw, 58px);
}

.contactCard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  background: var(--panel-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contactCard h2 {
  font-size: 1.16rem;
}

.contactCard p {
  color: var(--text-secondary);
  font-size: 14.8px;
}

.contactCard a.big {
  font-family: var(--mono);
  font-size: 15.5px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1020px) {
  .rail {
    display: none;
  }
  .guideLayout {
    grid-template-columns: minmax(0, 1fr);
  }
  .aside {
    position: static;
  }
  .footGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .leak,
  .signWrap,
  .priceBox,
  .roadRow {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }
  .priceBox {
    text-align: left;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16.4px;
  }
  .navLinks {
    position: absolute;
    top: 68px;
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-out);
  }
  .navLinks.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .navLinks a {
    padding: 12px 14px;
    font-size: 16px;
  }
  .navLinks .navCta {
    margin-top: 6px;
  }
  .navLinks .navLogin {
    margin-top: 4px;
  }
  .navToggle {
    display: inline-flex;
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .leakNums {
    grid-template-columns: minmax(0, 1fr);
  }
  .footGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .band .cta,
  .close .cta,
  .demo .cta,
  .planCta {
    flex-direction: column;
    align-items: stretch;
  }
  .band .btn,
  .close .btn,
  .demo .btn,
  .planCta .btn {
    width: 100%;
  }
}

/* Sig ekranlar: scrub kalir ama yeri olmayan kucuk katmanlar gizlenir. */
@media (max-height: 560px) {
  .cue,
  .ring {
    display: none;
  }
}

/* Kaba isaretci: dokunma hedefleri 44px. Hizalamayi yeniden bildirmeden
   display degistirmiyoruz, yoksa etiketler sola kaciyor. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .navLinks a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /*
   * Dokunmatikte acilir menudeki butonlar tam genislikte kaliyor.
   *
   * Ustteki kural onlari zaten blok seviyesine cikariyordu ama .navLinks a
   * (0,1,1), .navLinks .btn (0,2,0) tarafindan yeniliyor ve butonlar icerik
   * genisligine dusuyordu. Burada acikca geri aliniyor: parmakla basilan bir
   * menude iki ana eylem serit halinde durmali.
   */
  .navLinks .btn {
    display: flex;
  }
  .qa summary {
    min-height: 44px;
  }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .rv,
  .stagger > *,
  .signList li {
    opacity: 1 !important;
    transform: none !important;
  }
  .band {
    opacity: 1;
  }
  .cue {
    display: none;
  }
}

/* JS ile canli cevrilen reduced motion: ayni sonuc, sinif uzerinden. */
body.rm .rv,
body.rm .stagger > *,
body.rm .signList li {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.rm .env {
  animation: none;
}

/* Sekme gizliyken her sey durur. animation-play-state kalitilmadigi icin
   pseudo elemanlar tek tek hedefleniyor. */
body.paused *,
body.paused *::before,
body.paused *::after {
  animation-play-state: paused !important;
}

@media (max-width: 900px) {
  .priceRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

@media (max-width: 440px) {
  .zerosRow {
    grid-template-columns: minmax(0, 1fr);
  }
}