/* ============================================================
   MotoMap public-site — bölüm bileşenleri (v6)
   ============================================================
   main.css sistemi taşır (jeton, ızgara, tipografi primitifleri,
   geçişler, hareket). Bu dosya yalnızca bölümlerin kendi
   kompozisyonlarını taşır. Renk değişmezi YOKTUR — her değer main.css'in
   :root bloğundan gelir.
============================================================ */


/* ============================================================
   RAKAM — sayfadaki TEK rakam kaydı (v10)
   ============================================================
   Buraya kadar iki ayrı rakam kaydı vardı: ÖLÇÜM (koordinat, mesafe,
   süre — Geist Mono, tabular, 380) ve SIRA (gerekçe satırları,
   dizin, ürün adımları — Geist sans, 200, orantılı). Ayrımın
   gerekçesi ölçülüydü ama kurucu ekrana bakınca ikisini birbirinden
   ayrı, ikinci ailenin (sans 200) "üretilmiş site" gibi durduğunu
   söyledi: "01 02 kısımlarındaki o fontu hiç sevmiyorum, entrprise
   profesyonel comapny fontları olmalıdır." Karar: sayfadaki HER rakam
   artık ölçüm kaydında — "11.5 km" ile "01" aynı aileden.

   Boy hâlâ `--d3` (bu bir GÖRÜNTÜ öğesi, ölçek ondan geliyor); değişen
   şey aile, ağırlık ve rakam çeşidi. Optik sol eksen hizası (h2 ile
   aynı ray) aileye özgüydü ve yeni ailede yeniden ölçülüp gerekirse
   ayrı bir yamayla geri gelecek — bkz. `_internal` v10 notu. */
.why__n,
.index__item > span,
.preview__step > .label{
  font-family:var(--numeral);
  font-size:var(--d3);
  line-height:1;
  font-weight:400;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--text-3);
}

/* ============================================================
   HERO — açılış deseni B (başlık medyanın İÇİNDE)
   Film scroll'a BAĞLI DEĞİLDİR. Bu kilitli bir karar: önceki sürümde
   kare kare scroll'a sarılıyordu ve ziyaretçi durduğunda sayfa ölü
   görünüyordu. Kendi hızında, sessiz, kusursuz döngüyle oynar.
============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0;margin:0;}
.hero__media img,.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
}
.hero__media video{opacity:0;transition:opacity var(--state) var(--ease-state);}
.hero.is-playing .hero__media video{opacity:1;}

/* TEK scrim. Dört kat karartma yığmak filmin kontrastının %9'unu
   bırakıyordu; o zaman zaten göremediğin bir varlığı indirmiş oluyorsun. */
/* Yatay sönüm Ali'nin verdiği orana göre: soldan sağa %70 → %20 →
   şeffaf. Bir tık fazlası (.72/.22) bilerek bırakıldı — film mavi saatte
   çekildiği ve gökyüzü sağ üstte açık kaldığı için metnin altındaki
   bölge her karede güvende olmalı. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(var(--ink-rgb),.92) 0%,
      rgba(var(--ink-rgb),.55) 38%,
      rgba(var(--ink-rgb),.10) 72%,
      rgba(var(--ink-rgb),.34) 100%),
    linear-gradient(to right,
      rgba(var(--ink-rgb),.72) 0%,
      rgba(var(--ink-rgb),.22) 45%,
      rgba(var(--ink-rgb),0) 75%);
}
/* Mobilde metin tam genişliğe yayılır, yani masaüstünün SOLA yatık
   yatay sönümü artık metni korumuyor: ölçüldü, başlık 2.44:1 ve alt
   metin 2.89:1'e düşüyordu. Küçük ekranda yatay sönüm bırakılır ve
   dikey sönüm belirgin şekilde güçlendirilir. */
@media(max-width:900px){
  .hero__scrim{
    background:linear-gradient(to top,
      rgba(var(--ink-rgb),.97) 0%,
      rgba(var(--ink-rgb),.88) 36%,
      rgba(var(--ink-rgb),.60) 66%,
      rgba(var(--ink-rgb),.46) 100%);
  }
}
.hero__copy{
  position:relative;z-index:2;width:100%;
  padding-block:clamp(var(--s8), 14vh, var(--s10));
}
.hero__inner{grid-column:1 / 9;}
@media(max-width:900px){ .hero__inner{grid-column:1 / -1;} }

/* Üretilmiş üst etiket. Sahibin isteği: bu satır 4K, güzel fontlarla,
   dikkat çeken bir GÖRSEL olsun. gpt-image-2 Türkçe aksanları (İ, Ç, Ş,
   Ü) harfi harfine doğru kuruyor.
   Zemin ayıklaması KARIŞIM MODUYLA DEĞİL ALFAYLA yapılır: görsel siyah
   zeminde üretildiği için parlaklığı alfa kanalına taşındı. mix-blend-mode
   burada işe yaramıyordu — hero kendi yığın bağlamını kurduğu için
   screen karışımı filmi göremiyor ve siyah bir dikdörtgen kalıyordu.
   Alfa her zeminde doğru compose olur ve bağlamdan etkilenmez.
   Erişilebilirlik: alt metni cümlenin kendisidir, yani ekran okuyucu ve
   arama motoru yazıyı yine görür. */
.hero__kicker{
  width:min(30rem, 92%);height:auto;
  margin:0 0 var(--s5);
  user-select:none;-webkit-user-drag:none;
}

/* İngilizce üst yazı: aynı cümle, canlı metin.
   Görselin İngilizcesi YOK ve üretim kotası dolu, dolayısıyla seçenek
   ikiye iniyordu: İngilizce ziyaretçiye Türkçe bir görsel göstermek ya
   da o satırı hiç göstermemek. İkisi de yanlış — üçüncüsü yapıldı.

   Kayıt görselin kendi kaydını taklit ediyor: büyük harf, geniş
   harf arası, ince ağırlık, soldan sağa sönen bir renk. Renk geçişi
   sayfada YALNIZCA burada var; hero başlığı gibi bir marka anıdır,
   bir kalıp değil.

   Hangisinin görüneceğine dil karar veriyor ve karar CSS'te:
   satır içi display hilesi yok, JS'in bu düğüme dokunması yok. */
/* İngilizce üst yazı artık GÖRSEL (assets/img/hero-kicker-en.webp),
   canlı metin yedeği kalktı. Görsel Türkçesiyle aynı yöntemle yerelde
   render edildi; kaynağı i18n katmanı değiştiriyor. */
/* Ölçü, elle konan <br>'ın gerçekten tuttuğu yerde olmalı: 16ch iken
   "Rotayı motosikletine" (20 karakter) sarıyor ve "Rotayı" tek başına
   bir satırda kalıyordu. Kırılım anlamın kırıldığı yerde olsun diye
   ölçü satıra göre ayarlanır, tersi değil. */
.hero__title{margin:0;max-width:21ch;}
.hero__lead{margin:var(--s6) 0 0;max-width:34rem;font-size:20px;line-height:1.55;color:var(--text-2);}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s7);margin-top:var(--s7);}

/* ============================================================
   NEDEN MOTOMAP — açılış A + NUMARALI EDİTORYAL SATIRLAR
   ============================================================
   Kutu geri alındı. Ayarı değil KENDİSİ yanlıştı ve bunu ölçüm
   söylüyor, zevk değil:

   · `.why__row{transition:border-color…, transform…}` main.css'teki
     `.wipe`i sessizce EZİYORDU. Aynı özgüllük, sonraki dosya. Canlı
     sayfada ölçüldü: `.why__row` computed transition'ı
     "border-color .32s, transform .32s" — içinde clip-path YOK; 85px
     altındaki `.index__item` ise "clip-path .72s". Yani üç kutu
     patlıyor, dört hücre siliniyordu. Tek ekranda iki ayrı açılış.
     KURAL: bu bileşen `transition` BİLDİRMEZ. Açılış `.wipe`in işidir
     (`.index__item` de aynı sebeple hiç bildirmez).
   · Dört kenarlı çerçeve + yarıçap + `--raised` zemin: sözleşmenin üç
     ayrı maddesi (main.css YASAKLAR; `--raised` yalnızca nav adası /
     form alanı / harita paneli).
   · Zemin degradesindeki beyaz-alfa renk değişmezi birleştirme
     kapısını düşürüyordu: denetim grep'i (bkz. main.css YASAKLAR)
     :root dışında hiçbir eşleşme vermemeli, bu satır veriyordu.
   · Yorumu "yükseklikler eşitlenmiyor" diyordu; grid varsayılanı
     stretch. Ölçüldü: 1440'ta üçü de 288.44px, 900'de üçü de 359.16px.
     Kod, yorumunun kaçındığını söylediği şeyi yapıyordu.
   · Çerçevenin bedelini metin ödüyordu: 900px'te paragraf sütunu
     188.33px — satır başına ~24 karakter. O ölçü prospektüs ölçüsü.
   · Tıklanacak hiçbir şey yokken üzerine gelince kalkıyor ve mavi
     kenarlık alıyordu. Hiçbir yere gitmeyen bir hover, arayüzün
     söylediği bir yalandır; mavi de "MotoMap bir şey yapıyor"
     demektir, bir paragrafın üstünde durmak bir şey yapmak değildir.

   Ali'nin notu ("üç olduğu BAKINCA görülsün") doğruydu, cevabı
   yanlıştı. Üçlüğü taşıyan şey kutu değil SAYIM: üç saç teli, üç mono
   rakam, kapanışta dördüncü bir saç teli. Bakınca sayılıyor.

   Yan yana üç sütuna DÖNÜLMEDİ, çünkü hemen altındaki dizin artık o
   kıyafeti giyiyor: üstte saç teli, mono rakam, kalın terim, gri
   açıklama, dört eşit kolon. `.why` de öyle olsaydı tek ekranda aynı
   modül iki kez, 85px arayla görünürdü — sayfanın "üretilmiş" diye
   okunmasının gerçek sebebi budur. Bu yüzden iki blok iki ayrı
   eksende çalışıyor: dizin DİKEY ve sayılı, gerekçeler YATAY ve
   düzyazı. Satırın kendisi de bölümün açılış desenini (A: solda kütle,
   sağda cümle) tekrar ediyor, altındaki şeridi değil.

   Ölçü ızgaradan geliyor, elle hesaptan değil: `.wrap`ın on iki rayı
   `subgrid` ile aynen devralınıyor (aynı kalıp `.open-split`te zaten
   çalışıyor). Rakam 1. ray, başlık 2-6, paragraf 7-12. Hiçbir yerde
   `calc` ile kolon genişliği türetilmiyor, dolayısıyla `.wrap`ın
   `column-gap` değeri değişirse bu blok kendiliğinden takip eder.
============================================================ */
.why{
  grid-column:1 / -1;
  margin-top:clamp(var(--s8), 10vh, var(--s10));
  display:grid;
  grid-template-columns:subgrid;
  row-gap:0;
}

/* DİKKAT — buraya `transition` YAZILMAZ. `.wipe` ile aynı özgüllükte
   ve daha sonraki dosyada olduğu için açılışı sessizce öldürür; kutu
   sürümünde tam olarak bu oldu (ölçüm yukarıda). Saç teli satırın
   KENDİSİNE ait, kabına değil: böylece kural da metinle birlikte
   siliniyor. Kabın üstüne konsaydı üç çizgi, yazı gelmeden önce
   karanlıkta hazır dururdu — sayfanın tezi ise farın bulduğunun var
   olmasıdır. */
/* KAYDIRMAYA BAĞLI AÇILMA (v11, kurucunun isteği).
   İki katman, ikisi de mavi ve ikisi de bir DURUM taşıyor:
   1) AÇILIŞ — satır ekrana girdiğinde üst kuralının üstünden soldan
      sağa mavi bir çizgi geçer (dizin bloğundaki kalıbın aynısı, yeni
      bir dil icat edilmedi). Kademeler 90 ms arayla: bölüm satır satır
      açılıyor gibi okunuyor.
   2) OKUNAN SATIR — kaydırma sırasında okuma çizgisine en yakın satırın
      rakamı maviye çıkar, çizgisi tam parlaklığa gelir. Sürücü
      motion.js'in tek rAF döngüsü (bölüm 8). Mavi burada da sözleşmeye
      uyuyor: nav altındaki okuma rayıyla aynı iş — nerede olduğunu
      söylüyor. */
.why__row{
  position:relative;
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,1fr);
  row-gap:var(--s3);
  padding-block:var(--s8);
  border-top:1px solid var(--line-soft);
}
.why__row::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--blue);opacity:.5;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 720ms var(--ease-out), opacity var(--state) var(--ease-state);
}
.why__row.is-in::before{transform:scaleX(1);}
.why__row:nth-child(2)::before{transition-delay:90ms;}
.why__row:nth-child(3)::before{transition-delay:180ms;}
.why__row.is-reading::before{opacity:1;}
.why__row .why__n{transition:color var(--state) var(--ease-state);}
.why__row.is-reading .why__n{color:var(--cyan);}
/* Kâğıt zeminde marka mavisi 1px'lik bir kuralda siliniyor (3,16:1);
   dizin kuralıyla aynı gerekçe, aynı çözüm. */
.ground-day .why__row::before{background:var(--paper-blue);}
.no-js .why__row::before{transform:scaleX(1);}
.why__row:last-child{border-bottom:1px solid var(--line-soft);}

/* Rakam artık `.label` kaydında değil, dosyanın başındaki SIRA RAKAMI
   kaydında: Geist 200, `--d3`, orantılı. Yerleşimi aşağıdaki 901px
   sorgusunda (`grid-column:1 / 2`) ve satırın taban çizgisi hizasında
   duruyor, yani burada bildirilecek bir şey yok.
   Eski yorumun bulgusu doğruydu, GEREKÇESİ yanlıştı: aynı ekranda
   gerçekten iki farklı sıfır çiziliyordu, ama sebep `ss01`in bir
   yerde açık bir yerde kapalı olması değildi — o özellik kurulu
   dosyaların hiçbirinde yok (main.css `.num`). İki sıfırı ayıran şey
   AİLEYDİ, ve şimdi o fark kasıtlı: kesikli sıfır ölçüm demek. */

/* Kapalı metin ölçeğinden, uydurma yok: 20/30 başlık, 17/28 gövde.
   Kutu sürümü 21.6/18.4 ve 16 kullanıyordu; üçü de ölçekte yok ve 16
   sayfadaki tek 16px gövdeydi (yanındaki `.body` 17). Hiyerarşiyi
   punto değil AĞIRLIK ve TON taşıyor — dizin de aynısını yapıyor
   (strong 17/520 `--text` vs em 15/400 `--text-2`). */
.why__row h3{
  margin:0;
  font-size:20px;line-height:30px;
  letter-spacing:-.01em;font-weight:520;color:var(--text);
  max-width:24ch;text-wrap:balance;
}
/* 34rem: `.lead` ve `.promise__foot` ile aynı ölçü. Yığılmış hâlde
   satırın tam genişliğe koşmasını engelliyor; ızgara düzeninde ray
   zaten daha dar olduğu için hiç devreye girmiyor, yani ızgarayla
   çekişmiyor. */
.why__row p{
  margin:0;
  font-size:17px;line-height:28px;color:var(--text-2);
  max-width:34rem;text-wrap:pretty;
}

/* ≥901px — satır ızgaraya oturur: rakam · başlık · paragraf.
   Eşik sayfanın kendi eşiği; `.open-split` 900'de yığılıyor,
   `.preview__stage` 901'de yapışıyor. Yeni bir eşik icat edilmedi.
   Taban çizgisi hizası satırı defter satırı yapan şey: rakamın,
   başlığın ve paragrafın İLK taban çizgileri çakışıyor. */
@media(min-width:901px){
  .why__row{
    grid-template-columns:subgrid;
    align-items:baseline;
    row-gap:0;
  }
  .why__n{grid-column:1 / 2;}
  .why__row h3{grid-column:2 / 7;max-width:none;}
  .why__row p {grid-column:7 / 13;}
}

/* ============================================================
   DİZİN — motorun dört parçası.
   Eskiden iki kolonlu sessiz bir mono listeydi. Doğru ölçüdeydi ama
   sayfanın en teknik iddiasını taşıyan yer olarak fazla sessizdi:
   "teknoloji şirketiyiz" cümlesini kuran bölüm bu.
   Şimdi bir SPEC ŞERİDİ: dört hücre, iri mono rakamlar, her hücrenin
   üstünde açılışta soldan çizilen bir mavi kural. Kutu yok — kutuyu
   yandaki üç gerekçe kullanıyor, ikisi aynı kıyafeti giymemeli.
============================================================ */
.index{grid-column:1 / -1;margin-top:clamp(var(--s8), 9vh, var(--s9));}
.index__eyebrow{
  display:flex;align-items:center;gap:var(--s4);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
  margin-bottom:var(--s5);
}
.index__eyebrow::after{
  content:"";flex:1;height:1px;background:var(--line-soft);
}
.index__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s5) clamp(var(--s5), 3vw, var(--s7));
  grid-template-columns:1fr;
}
@media(min-width:640px){ .index__list{grid-template-columns:1fr 1fr;} }
@media(min-width:1040px){ .index__list{grid-template-columns:repeat(4, 1fr);} }

.index__item{
  position:relative;
  display:block;
  padding-top:var(--s5);
  border-top:1px solid var(--line-soft);
}
/* Üst kuralın üzerinde çizilen mavi parça. Kural durur, mavi çizilir. */
.index__item::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 720ms var(--ease-out);
}
.index__item.is-in::before{transform:scaleX(1);}
.no-js .index__item::before{transform:scaleX(1);}
.index__item:nth-child(2)::before{transition-delay:80ms;}
.index__item:nth-child(3)::before{transition-delay:160ms;}
.index__item:nth-child(4)::before{transition-delay:240ms;}
/* Kâğıtta çizilen kural bir kademe koyu mavi: --blue kâğıt üzerinde
   3,2:1 ve 1px'lik bir çizgi o oranda siliniyor (Garage'daki kuralla
   aynı gerekçe). */
.ground-day .index__item::before{background:var(--paper-blue);}

.index__item > span{display:block;margin-bottom:var(--s4);}
.index__item strong{display:block;font-size:17px;font-weight:520;color:var(--text);}
.index__item em{display:block;font-style:normal;font-size:15px;line-height:1.55;color:var(--text-2);margin-top:var(--s2);text-wrap:pretty;}
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
   varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"] .index__item::before{transition:none;transform:scaleX(1);}

/* ============================================================
   SÖZ — açılış D. Sayfanın en büyük yazısının ikinci ve son görünümü.
   Kelimeler okuma sırasına göre TEK TEK tam tona geçer.
============================================================ */
.promise__line .w{
  color:var(--text);
  opacity:.22;
  transition:opacity var(--state) var(--ease-out);
}
.promise__line .w.is-lit{opacity:1;}
.promise__line .w-key.is-lit{color:var(--cyan);}
.no-js .promise__line .w{opacity:1;}
.promise__foot{
  grid-column:1 / 6;margin-top:clamp(var(--s7), 8vh, var(--s9));
  font-size:17px;line-height:1.65;color:var(--text-2);max-width:34rem;
}
@media(max-width:900px){ .promise__foot{grid-column:1 / -1;} }

/* ============================================================
   ÜRÜNÜN İÇİNDEN — baştan kuruldu
   ============================================================
   Önceki hali sayfanın en zayıf yeriydi ve nedeni aralık değil
   KONSEPTTİ: ekran görüntüsü sayfanın dibinden kesilmiş bir dikdörtgen
   gibi duruyordu, solda kocaman anlamsız bir boşluk vardı, başlık sağ
   üstte havada kalıyordu ve sağdaki metinle soldaki görsel arasında
   hiçbir görsel bağ yoktu. "Ürünün içinden" diyen bir bölüm ürünü
   neredeyse saklıyordu.

   Yenisi: başlık sol üstte, cihaz solda YAPIŞKAN ve bölümün yıldızı,
   hikâye sağda ilerliyor. Kaydırdıkça ekran değişiyor.

   SÖZLEŞME İSTİSNASI: sayfada "dört kenarlı çerçeve yok" kuralı var ve
   bu cihaz onu bilerek deliyor. Gerekçe: bu bir arayüz kartı değil, bir
   NESNE. Çıplak bir ekran görüntüsü dikdörtgen bir resim gibi okunuyor;
   cihaz çerçevesi onu tutulabilir bir şeye çeviriyor. Kural arayüz
   kutuları içindi, ürünün kendisi için değil.

   ————————————————————————————————————————————————
   İKİNCİ DÜZELTME: BÖLÜM ARTIK TEK EKRANA SIĞIYOR.
   Yapışkan olan TELEFONDU, adım listesi değildi; liste sayfa boyu
   uzuyordu. Ölçüldü (bölümün üstü ekranın üstüne hizalıyken):

     1920×1080  bölüm 1412px (1,31 ekran)  04'ün altı 1099 →  +19px dışarıda
     1440×900   bölüm 1202px (1,33 ekran)  04'ün altı 1034 → +134px dışarıda
     1280×800   bölüm 1078px (1,35 ekran)  04'ün altı  971 → +171px dışarıda

   Yani taşmayı yaratan telefon değil LİSTEYDİ, ve 04'e ulaşmak için
   kaydırıldığında bu kez telefon yukarı kaçıyordu: ölçümde 04 aktifken
   telefonun görünürlüğü üç boyda da %0.

   Çözüm bir efekt değil, YERLEŞİM: liste de yapışkan sahnenin İÇİNE
   alındı. `.preview` kaydırma yolu (bir ekrandan uzun), `.preview__scene`
   o yolun her pikselinde duran tek kare — film bölümlerinin `.film` /
   `.film__stage` deseninin aynısı, yeni bir desen icat edilmedi.
   Kaydırma artık YER değiştirmiyor, yalnızca hangi adımın aydınlık
   olduğunu sürüyor.

   `svh`, `vh` DEĞİL: mobil tarayıcının adres çubuğu açıkken kalan
   yükseklik odur; `vh` sahneyi çubuğun altına taşırdı (film.css'te
   ölçülmüş ve yazılmış hata). Eski birim yedek satır olarak duruyor.

   YOLUN UZUNLUĞU 280svh: sahne 100svh durur, geriye kalan 180svh dört
   adıma bölünür — adım başına 45svh. Daha kısası adımları birbirine
   yapıştırıyor, daha uzunu bölümü gereksiz uzatıyor.
============================================================ */
.preview__head{grid-column:1 / 8;margin-bottom:clamp(var(--s5), 4vh, var(--s7));}
.preview__head p{margin-top:var(--s4);}

.preview__stage{grid-column:1 / 6;}
.preview__steps{grid-column:7 / 13;list-style:none;margin:0;padding:0;}
@media(max-width:900px){
  .preview__head,.preview__stage,.preview__steps{grid-column:1 / -1;}
}

/* Yükseklik svh'e bağlı: cihaz hangi ekranda olursa olsun yapışkan
   konumdayken TAMAMEN görünür kalmalı. Sabit bir piksel yüksekliği
   900px'lik bir pencerede alttan kesilirdi. */
.device{
  position:relative;
  height:min(88svh, 960px);
  aspect-ratio:852 / 1846;
  /* Kolonun BAŞINA hizalanır, ortasına değil: başlık da aynı hizada
     başlıyor. Ortalandığında solda kolonun yarısı kadar boş bir şerit
     kalıyordu ve bölümün en görünür kusuru tam olarak buydu. */
  margin-inline:0 auto;
}
/* Cihazın arkasındaki hâle. Neon değil: siyah zeminden hafifçe ayırmak
   için, %14 civarı. */
.device::before{
  content:"";position:absolute;
  left:50%;top:50%;translate:-50% -50%;
  width:170%;height:78%;
  border-radius:var(--r-pill);
  background:var(--blue);
  opacity:.14;
  filter:blur(90px);
  pointer-events:none;
}
/* Gövde: ince grafit titanyum kenar, ışığı üstten alıyor. */
.device__frame{
  position:absolute;inset:0;
  border-radius:clamp(28px, 3.4svh, 44px);
  padding:clamp(6px, .8svh, 10px);
  background:linear-gradient(160deg,
    var(--lit) 0%, var(--raised) 18%,
    var(--ink) 52%, var(--raised) 86%, var(--lit) 100%);
  box-shadow:var(--sh-3);
}
.device__screen{
  position:relative;height:100%;overflow:hidden;
  border-radius:clamp(22px, 2.7svh, 35px);
  background:var(--ink);
}
.device__screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--state) var(--ease-state),
             transform var(--state) var(--ease-out);
}
.device__screen img.is-active{opacity:1;transform:none;}
/* Dynamic Island: cihazı gerçek yapan tek detay. */
.device__island{
  position:absolute;z-index:2;
  left:50%;translate:-50% 0;top:clamp(6px, .9svh, 12px);
  width:26%;height:clamp(14px, 1.9svh, 26px);
  border-radius:var(--r-pill);
  background:var(--ink);
}
/* Ekran yansıması: tek, çok hafif, köşeden geçen bir ışık. */
.device__glare{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Duraklar `transparent`, tam saydam beyaz değil: ikisi de aynı
     pikseli üretiyor ama yazılı olan ikincisi, yani dosyada bir renk
     değişmezi. Bu dosyadaki son değişmez de böylece kalktı — kural
     tekrar denetlenebilir hâle geldi (grep :root dışında hiç eşleşme
     vermemeli).
     Not: Safari eskiden `transparent`ı siyaha doğru enterpole edip
     gri bir bant üretiyordu; bu hata 15.4'te düzeldi ve bu sayfa
     zaten daha yeni bir taban varsayıyor (subgrid, @property). */
  background:linear-gradient(148deg,
    var(--lit) 0%, transparent 34%, transparent 100%);
}
.preview__caption{
  margin:var(--s5) 0 0;text-align:center;
  font-family:var(--mono);font-size:13px;line-height:20px;
  letter-spacing:.08em;color:var(--text-3);
}

/* ────────────────────────────────────────────────────────────
   AÇIK ZEMİNDE İKİ AYAR
   Bölümün geri kalanı hiç dokunulmadan yeniden tonlanıyor, çünkü
   .ground-day metin ve çizgi jetonlarının üzerine yazıyor (main.css).
   Burada yalnızca jeton ikamesiyle çözülemeyen iki şey var.

   1) HÂLE GÜÇLENİYOR. Telefon main.css'in PANEL KURALI'ndaki iki
      panelden biri ve panelin arkasındaki mavi hâle kâğıtta da
      duruyor — ürünün kendi ışığının zemine sızması. Ama %14 koyu
      zemin için ölçülmüş bir değerdi: kâğıdın kendi parlaklığı hâleyi
      yutuyor ve gövdenin çevresinde hiçbir şey kalmıyordu. %20 aynı
      ışığı kâğıtta görünür kılıyor; daha yükseğinde mavi bir sis
      oluyor ve gövdenin kenarını yiyor.
   2) GÖVDENİN KENAR IŞIĞI OPAKLAŞIYOR. `.device__frame` degradesinin
      ilk ve son durağı --lit, yani beyazın %7'si. Koyu zeminde bu
      görünmez bir parlaklık; kâğıtta ise ŞEFFAFA yakın olduğu için
      telefonun sol üst ve sağ alt köşesi kâğıdı gösteriyor ve gövde
      delinmiş gibi duruyordu. --edge-lit aynı tonun opak karşılığı
      (:root'ta).
──────────────────────────────────────────────────────────── */
.ground-day .device::before{opacity:.2;}
.ground-day .device__frame{
  background:linear-gradient(160deg,
    var(--edge-lit) 0%, var(--raised) 18%,
    var(--ink) 52%, var(--raised) 86%, var(--edge-lit) 100%);
}

.preview__step{
  padding-block:clamp(var(--s5), 3vh, var(--s6));
  border-top:1px solid var(--line-soft);
}
.preview__step:first-child{border-top:0;padding-top:0;}
/* Başlık artık rakamı da içeriyor. Tıklanabilir yüzeyin "01"i ve adı
   BİRLİKTE kapsaması gerekiyordu; bir <button> yalnızca satır içi içerik
   taşıyabildiği için rakam kendi <p>'sinden çıkıp başlığın içine girdi.
   DİKEY RİTİM BİREBİR AYNI KALDI (ölçüldü, iki sürümde de adım
   yükseklikleri 214/317/317/317 ve bölüm 1579px):
   12px üst boşluk · 28px rakam satırı · 12px · 44px ad. */
/* Ağırlık ve harf aralığı `.d3` kaydıyla aynı: 520/-.02em → 500/-.015em
   (bkz. main.css GÖRÜNTÜ AĞIRLIKLARI). */
.preview__step h3{
  margin:var(--s3) 0 0;
  font-size:var(--d3);line-height:1.1;letter-spacing:-.015em;
  font-weight:500;color:var(--text);
}
/* Rakamın ölçüsü BUGÜNKÜNÜN AYNISI ve bunu yazmak zorundayız.
   Sayfada mono etiketin ölçüsü 13px/20px'tir (.label). Buradaki rakam
   bugün 17px/28 çiziliyor çünkü eski `<p class="label">01</p>` düğümüne
   `.preview__step p` (0,1,1) kuralı `.label`'dan (0,1,0) güçlü gelip
   font-size'ı eziyordu. Rakam bir <span>'e taşınınca o ezme düşüyor ve
   boy kendiliğinden 13px'e inecekti — bu lane'in İSTEMEDİĞİ bir
   tipografi değişikliği. Ölçü burada elle sabitlendi: tıklanabilirlik
   değişiyor, görünüş değişmiyor. (Etiketi sistem ölçüsüne çekmek ayrı
   bir karar; bu iki satır silinirse kendiliğinden 13px'e döner.) */
/* v10: RAKAM kaydına katıldı (yukarıdaki tek kayıt notu). Boy 17px
   BUGÜNKÜNÜN AYNISI kalıyor (üstteki tarihi gerekçe hâlâ geçerli, yalnız
   aile değişti); .label'dan gelen geniş harf aralığı (.08em) burada
   BİLEREK ezilir — bu bir etiket değil bir rakam. */
.preview__n{
  display:block;
  font-family:var(--numeral);
  font-size:17px;line-height:1.65;
  font-weight:400;letter-spacing:0;
  font-variant-numeric:tabular-nums;
  transition:color var(--ui) var(--ease-state);
}
.preview__t{display:block;margin-top:var(--s2);}
/* Düğmenin kendi görünümü YOK: başlığın kıyafetini giyer (main.css'te
   button{font:inherit}). Tam genişlik, çünkü hedef "01"den satır sonuna
   kadar sürmeli — .garage__item de tam olarak böyle. */
.preview__pick{display:block;width:100%;text-align:left;}

.preview__step p{margin:var(--s3) 0 0;font-size:17px;line-height:1.65;color:var(--text-2);max-width:34rem;}
/* Mobilde yapışkan cihaz yok; her adım kendi ekranını taşıyor. */
.preview__shot{margin-top:var(--s5);}
.preview__shot img{width:min(100%, 280px);height:auto;border-radius:14px;}
@media(min-width:901px){ .preview__shot{display:none;} }
@media(max-width:900px){ .preview__stage{display:none;} }

/* ────────────────────────────────────────────────────────────
   TEK EKRAN SAHNESİ — yalnızca ≥901px.
   ≤900px DEĞİŞMEDİ ve bunun nedeni aritmetik. 390×844'te ölçüldü:
   bölüm başlığı 113px + alt boşluğu 34px, dört adım EKRAN GÖRÜNTÜLERİ
   ÇIKARILMIŞ hâlde 184+223+222+222 = 852px, nav payı 72px — toplam
   1070px. Ekran 844px. Yani orada tek ekran, ancak metnin kendisini
   kısarak ya da saklayarak elde edilebilirdi; ikisi de yapılmaz.
   Dar ekranda bölüm sıradan bir belgedir: her adım kendi ekranını
   yanında taşır, hiçbir şey sönük değildir, hiçbir şey saklanmaz.
──────────────────────────────────────────────────────────── */
@media(min-width:901px){
  /* DIŞ KAP = KAYDIRMA YOLU. `.section`'ın dikey iç boşluğu burada
     kalkıyor: ritmi artık sahnenin kendi iç boşluğu taşıyor. */
  .preview{
    padding-block:0;
    height:280vh;
    height:280svh;
  }
  /* SÜRÜŞ YOKSA YOL DA YOK: düğmeler kurulmadıysa (JS kapalı, motion.js
     düşmüş) kaydırma hiçbir şeyi ilerletmiyor demektir; 1,8 ekranlık
     boş bir yol bırakmak yerine bölüm tek ekrana iner ve yapışmaz.
     Ölçüt gerçek durum, tarayıcı tahmini değil. */
  .preview:has(.preview__steps:not(.is-live)){height:100vh;height:100svh;}
  .preview:has(.preview__steps:not(.is-live)) .preview__scene{position:relative;}
  /* SAHNE = yolun her pikselinde ekranda duran tek kare. */
  .preview__scene{
    position:sticky;
    top:0;
    height:100vh;
    height:100svh;
    display:grid;
    /* Satır yüksekliği İÇERİKTEN DEĞİL kaptan gelir. `auto` bırakılsaydı
       telefon kendi en boy oranını dayatıp satırı sahneden uzun yapar,
       taşan şey de metin olurdu — film.css'te bir kez ölçülmüş hata. */
    grid-template-rows:minmax(0, 1fr);
  }
  .preview__scene > .wrap{
    min-height:0;
    /* Üstte nav'ın altından çıkacak kadar, altta sahnenin dibine
       yapışmayacak kadar. İkisi de --s* ölçeğinden. */
    padding-block:calc(var(--nav-h) + var(--s4)) clamp(var(--s5), 4svh, var(--s7));
    grid-template-rows:auto minmax(0, 1fr);
  }
  /* Başlık birinci satır, telefon ve liste İKİNCİ satırda YAN YANA —
     ikisi de aynı yüksekliği paylaşır. */
  .preview__head{grid-row:1;margin-bottom:clamp(var(--s4), 2.4svh, var(--s6));}
  .preview__stage{
    grid-row:2;min-height:0;
    display:grid;
    grid-template-rows:minmax(0, 1fr) auto;
    /* Telefonun boyunu RAYIN GENİŞLİĞİYLE de sınırlayabilmek için ray
       bir sorgu kabı. Yalnızca inline-size: blok ekseni hâlâ ızgaranın
       satırından geliyor, yani `height:100%` çalışmaya devam ediyor. */
    container-type:inline-size;
  }
  /* RAY TELEFONU KOVALIYOR — ölçülmüş kusur, "kompozisyon dağılmış".
     Telefonun genişliği kendi rayından değil GÖRÜNÜM YÜKSEKLİĞİNDEN
     geliyor (boyu satırdan, genişliği en boy oranından). Sabit 5
     kolonluk bir ray bu yüzden hiçbir boyda telefona oturmuyordu ve
     sağında ölü bir kama kalıyordu — ölçüldü (motion=on, sahne sabit):

       1920×1080   telefon 356px   ray 488px   ölü sağ 132px
       1440×900    telefon 279px   ray 482px   ölü sağ 203px
       1280×800    telefon 239px   ray 428px   ölü sağ 188px
       1440×768    telefon 222px   ray 482px   ölü sağ 260px   ← rayın %46'sı
       1440×680    telefon 184px   ray 482px   ölü sağ 298px
       1440×600    telefon 149px   ray 482px   ölü sağ 333px   ← rayın %31'i

     Kısa ekranda telefon rayının üçte birine düşüyor, başlık ise 8
     kolon boyunca uzanıyor: göz "başlık → koca boşluk → küçük telefon"
     okuyor. Kurucunun gördüğü boşluk budur; başlıkla telefon
     ARASINDAKİ dikey ara zaten 16-26px (ölçüldü, hiç büyük değildi).

     Ray iki kademede daralıyor çünkü telefonun genişliği yüksekliğin
     fonksiyonu: uzun ekranda 4 kolon, kısa ekranda 3. Kademe sayısı
     ikiyle sınırlı — süreklilik CSS'te ancak kapsayıcı sorgusuyla
     kurulurdu ve ray genişliği o sorgunun kendi girdisi olduğu için
     döngü olurdu. */
  .preview__stage{grid-column:1 / 5;}
  .preview__steps{grid-column:5 / 13;grid-row:2;min-height:0;display:grid;align-content:center;}

  /* Telefon artık kendi yüksekliğini seçmiyor, İKİ SINIRIN KÜÇÜĞÜNÜ
     alıyor: satırdan artan yer ve rayın genişliğinin en boy oranına
     çevrilmiş hâli. Sabit bir `88svh` burada satırdan taşardı; yalnız
     `height:100%` ise uzun ekranlarda (1440p, 4K) raydan taşar ve
     `max-width` onu en boy oranını bozarak sıkıştırırdı — iki sınır
     birlikte yazılınca cihaz her iki eksende de kutunun İÇİNE oturuyor
     ve oranı hiç bozulmuyor.
     %88 ARTIK %100: o %12'lik iç boşluk, telefon 5 kolonluk geniş bir
     rayı doldurduğunda yanındaki metne dayanmasın diye vardı. Ray
     telefonun boyuna göre daraldığı için (yukarıdaki iki kademe) aradaki
     havayı artık ızgaranın kendi oluğu taşıyor: 1440'ta 28,8px, 1920'de
     32px, 1280'de 25,6px. İki kez boşluk bırakmak telefonu sebepsiz
     küçültüyordu. */
  .device{
    height:min(100%, calc(100cqw * 1846 / 852));
    width:auto;
    justify-self:start;
    margin:0;
  }
  .preview__caption{text-align:left;margin-top:var(--s4);}

  /* Adımlar sahnenin içinde: dikey ritim ve başlık boyu artık EKRAN
     YÜKSEKLİĞİNE bağlı. Her clamp'in iki ucu da var olan ölçeklerden —
     boşluklar --s*, başlık --d3'ün kendi alt ve üst sınırından. Ölçek
     dışına çıkılmıyor, yalnızca ölçeğin içinde yükseklik seçiliyor:
     1080'de bugünkü değerlerin BİREBİR aynısı çıkıyor, 800'de bir
     kademe sıkışıyor. */
  .preview__step{padding-block:clamp(var(--s2), 1.6svh, var(--s5));}
  .preview__step h3{
    font-size:clamp(1.75rem, 3.4svh, var(--d3));
    margin-top:clamp(var(--s2), 1.2svh, var(--s3));
  }
  .preview__t{margin-top:clamp(var(--s1), .8svh, var(--s2));}
  /* Ölçü 34rem'den 38rem'e: ikisi de sistemin kendi ölçüleri (`.lead`
     34rem, `.body` 38rem). Ray genişleyince paragrafın da genişlemesi
     dikey yer kazandırıyor — 1280×800'de iki paragraf iki satırdan bir
     satıra iniyor, yani 56px. Metni daraltıp sıkıştırmak yerine
     genişletip kısaltmak. */
  .preview__step p{
    margin-top:clamp(var(--s2), 1.2svh, var(--s3));
    max-width:38rem;
  }

  /* ── KARANLIKTAN AYDINLIĞA ──
     Sönük hâl opaklıkla DEĞİL, metin ölçeğinin kendi üç tonuyla
     kuruluyor. Opaklık tüm alt ağaca uygulanıyordu: sönük bir adımın
     odak halkası da .3 ile çiziliyor, başlık --ink üzerinde 2,4:1'e
     düşüyordu — AA'nın çok altı. Tonlar ölçülü: --text 17,62:1,
     --text-2 8,60:1, --text-3 5,00:1 (main.css'te yazılı). Yani sönük
     adım bile okunur; aydınlık olan üç kat daha parlak.
     KAPISI `.is-live`: sönükleştirme yalnızca düğmeler KURULDUYSA var.
     JS hiç koşmazsa ya da motion.js atarsa aydınlanacak bir şey de
     yoktur; o durumda üç adımı sonsuza kadar sönük bırakmak, okunacak
     metni sebepsiz karartmak olurdu. */
  .preview__steps.is-live .preview__step h3,
  .preview__steps.is-live .preview__step p{transition:color var(--state) var(--ease-state);}
  .preview__steps.is-live .preview__step h3{color:var(--text-3);}
  .preview__steps.is-live .preview__step p{color:var(--text-3);}
  .preview__steps.is-live .preview__step.is-active h3{color:var(--text);}
  .preview__steps.is-live .preview__step.is-active p{color:var(--text-2);}
  /* Seçili adımı taşıyan ikinci işaret: rakam camgöbeğine geçiyor.
     Garage listesinde hacim aralığı seçilince tam olarak bunu yapıyor —
     ikinci bir "seçili" kıyafeti icat edilmedi ve durum tek bir
     kanaldan taşınmıyor. */
  /* Kurucunun isteği: yalnız rakam değil "01 Ana ekran"ın tamamı mavi. */
  .preview__steps.is-live .preview__step.is-active .preview__n,
  .preview__steps.is-live .preview__step.is-active .preview__t{color:var(--cyan);}
  /* Odaklanan adım, seçili olmasa da tam tona çıkar: halka her zaman
     ölçülebilir kalır. Kural :has() istiyor ve bu sayfa zaten daha yeni
     bir tabanı (subgrid, @property) varsayıyor. */
  .preview__steps.is-live .preview__step:has(.preview__pick:focus-visible) h3{color:var(--text);}
  @media (hover:hover) and (pointer:fine){
    /* Tıklanabilirliğin tek işareti: sönük başlık imlecin altında bir
       kademe açılıyor (5,00:1 → 8,60:1) ama seçilinin (17,62:1) yerine
       geçmiyor — iki başlık aynı anda "açık" görünmüyor.
       .is-live kendi kapısı: düğmeler kurulmadıysa imlecin altında
       hiçbir şey olmuyor. */
    .preview__steps.is-live .preview__step:not(.is-active):hover h3{color:var(--text-2);}
  }
}

/* ────────────────────────────────────────────────────────────
   KISA MASAÜSTÜ — rayın ikinci kademesi.
   Telefonun genişliği yüksekliğinden geldiği için ray da yükseklikle
   daralıyor. 820px eşiği ölçümle seçildi: bu boyun altında telefon 4
   kolonluk rayın yarısından azını dolduruyor.
   Kazanılan genişlik listeye gidiyor; liste zaten dört adımın da tek
   satırlık gövdeyle durduğu bir kolon, yani genişleyen şey metin değil
   İKİ KÜTLE ARASINDAKİ İLİŞKİ: telefon ile metin artık iki blok gibi
   okunuyor, aralarında ölü bir kama yok.
──────────────────────────────────────────────────────────── */
@media(min-width:901px) and (max-height:820px){
  .preview__stage{grid-column:1 / 4;}
  .preview__steps{grid-column:4 / 13;}
}

/* ── HAREKET KAPALI ──
   Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
   varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor).
   Kapalıyken kaydırma yolu da gereksiz: sahne bir ekran boyuna iner,
   yapışmaz ve DÖRT ADIM DA tam tonda durur — sürülecek bir ilerleme
   yokken üçünü sönük bırakmak okunacak metni sebepsiz karartmak olurdu.
   Telefon yerinde; tıklama hâlâ ekranı değiştiriyor ve seçili adımı
   camgöbeği rakam söylüyor. */
:root[data-motion="off"] .preview__n{transition:none;}
@media(min-width:901px){
  :root[data-motion="off"] .preview{height:100vh;height:100svh;}
  :root[data-motion="off"] .preview__scene{position:relative;}
  /* Seçiciler `.is-live`i taşımak ZORUNDA: yukarıdaki sönükleştirme
     kuralları da onu taşıyor ve daha az sınıflı bir seçici onları
     yenemezdi. Rakamın camgöbeği duruyor — tıklama hâlâ çalışıyor ve
     seçili adımı söyleyen tek işaret o. */
  :root[data-motion="off"] .preview__steps.is-live .preview__step h3{color:var(--text);}
  :root[data-motion="off"] .preview__steps.is-live .preview__step p{color:var(--text-2);}
  :root[data-motion="off"] .preview__steps.is-live .preview__step h3,
  :root[data-motion="off"] .preview__steps.is-live .preview__step p{transition:none;}
}

/* ────────────────────────────────────────────────────────────
   EMNİYET SÜBABI — TEK EKRAN ANCAK SIĞDIĞI SÜRECE.
   Dört adım bir ekrana sığmıyorsa yapılacak şey metni KESMEK DEĞİL,
   tek ekran iddiasından vazgeçmektir. Bölüm o boyda sıradan bir belgeye
   döner: sahne yapışmaz, yükseklik içerikten gelir, dördü de tam tonda
   ve tam olarak okunur. Kurucunun "04 alttan kesiliyor" bulgusunun
   kalıcı karşılığı budur — bir kademe daha sıkıştırmak eşiği birkaç
   piksel öteler, kesmeyi ortadan kaldırmaz.

   Ölçüm (1440 geniş, motion=on, sahne sabit, TR): 04'ün GÖVDESİNİN alt
   kenarının görünüm alanına uzaklığı —
       900px  -82px içeride      760px  -31px içeride
       800px  -47px içeride      720px  -15px içeride
       780px  -39px içeride      700px   -7px içeride
       740px  -23px içeride      680px   +1px DIŞARIDA  ← kesme başlıyor
                                 640px  +19px dışarıda
                                 600px  +38px dışarıda
   Eşik 700px: kesmenin ölçüldüğü ilk boy 680, bir kademe pay bırakıldı
   çünkü ziyaretçinin kök yazı boyu 16px'ten büyükse adımlar da büyür ve
   eşik yukarı kayar. 1366×768 bir dizüstünde tarayıcı çerçevesi
   çıkınca kalan yükseklik tam bu bölgeye düşüyor.

   Bu, ≤900px'te zaten yazılı olan kararın aynısıdır ("mobilde tek ekran
   aritmetik olarak mümkün değil ve bu bilinçli"); yeni bir kural değil,
   aynı kuralın kısa masaüstünde de geçerli olduğunun kabulü.

   SEÇİCİLER `:root` TAŞIYOR ÇÜNKÜ ZORUNDA: yukarıdaki iki kural —
   `.preview:has(.preview__steps:not(.is-live))` (0,3,0) ve
   `:root[data-motion="off"] .preview` (0,3,0) — yalın `.preview`den
   (0,1,0) güçlü geliyor ve sübabı ezerdi. Blok dosyanın da sonunda:
   eşit özgüllükte kaynak sırası karar veriyor.
──────────────────────────────────────────────────────────── */
@media(min-width:901px) and (max-height:700px){
  :root .preview,
  :root .preview:has(.preview__steps:not(.is-live)),
  :root[data-motion="off"] .preview{
    height:auto;
    padding-block:clamp(var(--s8), 10vh, var(--s9));
  }
  :root .preview .preview__scene,
  :root[data-motion="off"] .preview .preview__scene{
    position:relative;height:auto;grid-template-rows:auto;
  }
  :root .preview__scene > .wrap{padding-block:0;grid-template-rows:auto auto;}
  /* KOMPOZİSYON DEĞİŞMİYOR, yalnızca tek ekran zorunluluğu kalkıyor:
     telefon solda, dört adım sağında, ikisi de satırın TEPESİNDEN
     başlıyor. Liste telefonun altına indirilseydi sağda bir ekran boyu
     boş kâğıt kalırdı (ölçüldü: 1440×660'ta ~1000×700px) ve bölüm
     masaüstündeki hâline hiç benzemezdi. */
  :root .preview__stage{grid-row:2;grid-column:1 / 5;}
  /* Telefon artık satırdan boy almıyor, rayının GENİŞLİĞİNDEN alıyor:
     `height:min(100%, …)` içerikten gelen `auto` bir satıra karşı
     çözümsüzdür ve cihaz sıfıra çöker. */
  :root .device{
    height:auto;width:100%;
    max-width:clamp(200px, 26vw, 300px);
    aspect-ratio:852 / 1846;
  }
  :root .preview__steps{grid-row:2;grid-column:5 / 13;align-content:start;}
  /* Sönükleştirme kalkıyor: sürülecek bir yol yokken üç adımı sönük
     bırakmak okunacak metni sebepsiz karartmak olurdu. */
  :root .preview__steps.is-live .preview__step h3{color:var(--text);}
  :root .preview__steps.is-live .preview__step p{color:var(--text-2);}
  :root .preview__steps.is-live .preview__step h3,
  :root .preview__steps.is-live .preview__step p{transition:none;}
}
/* MOBİLDE OKUNAN ADIM (v11). ≥901px'te adımı yapışkan sahnenin
   ilerlemesi seçiyor; telefonda öyle bir yol yok, adımlar alt alta
   duruyor. Kurucunun gördüğü davranış telefonda da olsun diye okuma
   çizgisine en yakın adım burada işaretleniyor (motion.js, tek rAF
   döngüsü) ve "01 Ana ekran"ın tamamı maviye çıkıyor. */
@media(max-width:900px){
  .preview__step .preview__n,
  .preview__step .preview__t{transition:color var(--state) var(--ease-state);}
  .preview__step.is-reading .preview__n,
  .preview__step.is-reading .preview__t{color:var(--cyan);}
}

/* ============================================================
   SÜRÜŞ MODLARI — açılış B, EŞİT OLMAYAN film şeridi.
   Dört eşit kart bir üretici imzasıdır; buradaki kolonlar 1fr / 1.6fr /
   1fr / 1.3fr. Kart yok, kenarlık yok, yarıçap yok: ad görüntünün
   içinde durur.
============================================================ */
.strip{
  grid-column:1 / -1;
  display:grid;gap:var(--s2);
  margin-top:clamp(var(--s7), 8vh, var(--s9));
}
@media(min-width:760px){ .strip{grid-template-columns:1fr 1.6fr;} }
@media(min-width:1100px){ .strip{grid-template-columns:1fr 1.6fr 1fr 1.3fr;gap:var(--s3);} }
.strip__panel{
  position:relative;overflow:hidden;
  aspect-ratio:4 / 5;
  display:flex;align-items:flex-end;
}
/* Masaüstünde aspect-ratio BIRAKILIR ve yerine sabit yükseklik gelir.
   Sebep ölçüldü: esnetilmiş bir ızgara öğesinde aspect-ratio, sütun
   genişliğini yener — paneller 236px'lik sütunlarında 157px'e düşüyor,
   yükseklikleri birbirini tutmuyor ve etiketler taşıyordu. Yükseklik
   kesinleşince genişlik sütuna oturur, oran işini object-fit devralır. */
@media(min-width:1100px){
  .strip__panel{aspect-ratio:auto;height:clamp(360px, 54svh, 560px);}
}
.strip__panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* v8f: karolar dikey setten (4:5) besleniyor; sürücü kadrajın orta
     üst kısmında, kesim oraya bakar. */
  object-position:50% 42%;
  transition:transform 900ms var(--ease-out);
}
/* Mod panelleri artık FOTOĞRAF. Bir süre video kliptiler ve
   fotoğraf onların altında yedek olarak duruyordu; karar ürün
   tarafında değişti (sayfada fazla video vardı, klipler fotoğrafın
   keskinliğini vermiyordu). Video seçicileri ve `is-playing`
   geçişi ölü seçici hâline geldiği için kaldırıldı. */
.strip__panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(var(--ink-rgb),.85) 0%, rgba(var(--ink-rgb),.15) 44%, rgba(var(--ink-rgb),0) 70%);
}
.strip__label{
  position:relative;z-index:1;padding:var(--s5);
}
/* Mod adı bölüm başlığı değil, panel içi bir özne: --d3 (40px) dar
   panelde taşıyordu. */
/* Adlar FOTOĞRAFIN ÜSTÜNDE duruyor, kâğıdın değil: bölüm v9'da kâğıda
   geçti ama karo perdesi hâlâ gece; metin --on-media kaydında kalır. */
.strip__label h3{margin:0;font-size:clamp(1.25rem, 1.7vw, 1.75rem);line-height:1.05;letter-spacing:-.015em;font-weight:500;color:var(--on-media);}
.strip__label p{margin:var(--s2) 0 0;font-size:15px;line-height:1.5;color:var(--on-media-2);}
@media (hover:hover) and (pointer:fine){
  .strip__panel:hover img{transform:scale(1.04);}
  /* Çevre izi yalnızca üzerine gelindiğinde koşar — boşta dönen dört
     ışık dekoratif hareket olurdu. İşaretçisi olmayan cihazda hiç yok. */
  .strip__panel:hover::before{animation:traceRun 900ms var(--ease-out) forwards;}
}

/* ============================================================
   SÜRÜŞ MODLARI — AÇILIR AÇIKLAMA
   Şerit iki hâlli. KAPALI: dört eşit olmayan sütun, tek satır —
   yukarıdaki hâl, tek bir kuralı değişmedi. AÇIK: dört panel 112px'lik
   bir raya iner ve o modun açıklaması açılır.

   AÇIK YÜKSEKLİK KAPALI YÜKSEKLİĞE EŞİTLENDİ, ölçüyle:
   kapalı panel 486px (clamp(360px,54svh,560px) @1440×900), ray
   4 × 112 + 3 × 12 = 484px. Aradaki fark 2px, yani panel açılırken
   altındaki bölümlerin tamamı YERİNDE KALIYOR. Rayı 84px'e indirseydik
   bölüm 150px kısalır, sayfa tıklamanın altından kaçardı.

   Izgara sütun sayısı değiştiği için (4 → 2) geçiş İNTERPOLE EDİLEMEZ.
   Morph denemesi yerine sayfanın kendi dili kullanıldı: yeni yerleşim
   anında kuruluyor, karolar orada soldan siliniyor (.wipe-x, kademeler
   zaten işaretlemede). Bu sayfada hiçbir yerde morph yok — showcase
   görselleri de garage render'ları da çapraz geçiyor.
============================================================ */

/* Şerit açılabilir olduğunu SÖYLEMELİ. Kenarlık ya da düğme kıyafeti
   yok; imleç ve odak halkası yeterli, sözleşme kart yasaklıyor. */
.strip__panel{cursor:pointer;}

/* Gerçek denetim <button>. Panelin tamamına tıklamak yalnızca fare
   kolaylığı (olay .strip üzerinde delege) — basılan şey her koşulda
   düğmenin kendisi. Odak halkası düğmede 90px'lik bir kelimeyi
   çerçeveliyordu; :has ile panele taşındı, destek yoksa main.css'teki
   düğme halkası olduğu yerde duruyor. */
.strip__name{margin:0;font-size:clamp(1.25rem, 1.7vw, 1.75rem);line-height:1.05;letter-spacing:-.015em;font-weight:500;color:var(--on-media);}
.strip__hit{display:block;text-align:left;transition:color var(--ui) var(--ease-out);}
/* `clip-path:none` BURADA ZORUNLU ve bu bir ölçüm: .wipe-x açılışını
   bitirince panelde `clip-path:inset(0 0 0 0)` kalıyor. Kırpma görsel
   olarak işlevsiz (kutunun tam kendisi) ama outline'ı da kesiyor —
   getComputedStyle halkayı 2px solid --cyan olarak veriyordu ve
   ekranda TEK PİKSEL boyanmıyordu. Açılış çoktan bittiği için kırpmayı
   odak süresince kaldırmanın başka hiçbir etkisi yok.
   :has desteklenmiyorsa iki kural da düşer ve main.css'teki düğme
   halkası olduğu yerde kalır — odak hiçbir koşulda kaybolmuyor. */
.strip__panel:has(.strip__hit:focus-visible){
  clip-path:none;
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px;
}
.strip__panel:has(.strip__hit:focus-visible) .strip__hit:focus-visible{outline:none;}

/* AÇIKLAMA METNİNİN KAYNAĞI: panelin kendi figcaption'ı, JS değil.
   Sebep i18n — sözlük yalnızca [data-i18n] taşıyan düğümleri boyar.
   .is-ready sınıfını modes bloğu EN SON koyuyor; koymazsa (hata, CSP,
   404) metin panelin içinde GÖRÜNÜR kalır: açılır panel hiç
   çalışmasa bile dört modun açıklaması okunur. */
.strip__body{margin:var(--s3) 0 0;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty;}
.strip.is-ready .strip__body{display:none;}
/* Yedek hâlde panel metne göre BÜYÜMEK zorunda. İKİ ölçü birden
   kaldırılıyor ve ikisi de gerekli: 1100px üstünde sabit `height`,
   altında `aspect-ratio` panelin yüksekliğini kilitliyor ve panel
   `overflow:hidden` olduğu için min-height:auto sıfıra çözülüyor —
   yani metin kilit ölçüyü aşınca sessizce kesiliyordu (760px'te
   panel 412px, metin 5 satır). min-height eski ölçüyü taban yapar. */
.strip:not(.is-ready) .strip__panel{height:auto;aspect-ratio:auto;min-height:clamp(360px, 54svh, 560px);}
/* Yedek metin dört satırdan yüksek ve mevcut perde %70'te bitiyor:
   Commute karesinde paragrafın üst satırları farın parlak noktasına
   denk geliyor ve kontrast AA'nın altına düşüyordu. Perde yalnızca bu
   durumda yukarı taşınıyor; açık hâlde ve kapalı hâlde değişmiyor. */
.strip:not(.is-ready) .strip__panel::after{
  background:linear-gradient(to top,
    rgba(var(--ink-rgb),.92) 0%, rgba(var(--ink-rgb),.80) 52%, rgba(var(--ink-rgb),0) 88%);
}

/* ============================================================
   AÇIK HÂL — KARO
   Genişlikten bağımsız: 390px'te de 1440'ta da paneller aynı raya
   iner. "Küçülüp sola gelmek"in dar ekranda karşılığı budur —
   sola gidecek yer yok ama küçülme var, ve dört mod artık tek
   ekranda taranabiliyor (ölçüldü: 390px'te bölüm 1961px'ten 1163px'e).
============================================================ */
.strip.is-open .strip__panel{height:112px;aspect-ratio:auto;}
/* Etiket karonun TAMAMINI kaplasın: figcaption bir flex öğesi ve kendi
   içeriği kadar geniş — sol kenardaki mavi kural o kutunun yüksekliğini
   alıyordu ve "Sport" gibi kısa bir adda 112px yerine 50px oluyordu. */
.strip.is-open .strip__label{padding:var(--s4);flex:1 1 auto;display:flex;align-items:flex-end;}
/* Rayda ad tek başına durur: iki satırlık spot 112px'lik karoya
   sığmıyor ve zaten sağdaki açıklama onun yerini almış durumda. */
.strip.is-open .strip__label > p{display:none;}
.strip.is-open .strip__name{font-size:17px;}
/* Seçili olmayan karolar KARARIYOR. Sayfanın tezi bu: farın bulduğu
   şey görünür. Süzgeç yalnızca medyaya uygulanır — panele uygulasaydık
   adın kontrastı da düşerdi ve AA'dan çıkardı. */
.strip.is-open .strip__panel:not(.is-active) img{filter:brightness(.42) saturate(.55);}
.strip.is-open .strip__panel:not(.is-active) .strip__hit{color:var(--on-media-2);}
.strip.is-open .strip__panel img{transition:transform 900ms var(--ease-out), filter var(--state) var(--ease-state);}
/* Seçili karonun sol kenarındaki mavi kural. Çevre izi (.trace) bir
   DEĞİŞİM sinyali, koşup gidiyor; duruşu taşıyan gösterge bu. */
.strip.is-open .strip__panel.is-active .strip__label::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);
}
/* Ray karosunda büyütme yok: 112px'lik bir karoda %4 ölçek titreme
   gibi okunuyor. */
@media (hover:hover) and (pointer:fine){
  .strip.is-open .strip__panel:hover img{transform:none;}
}

/* ============================================================
   AÇIK HÂL — YERLEŞİM
   Yalnızca açıklamanın NEREYE düştüğü genişliğe bağlı.
============================================================ */
/* Geniş: ray solda, açıklama sağda.
   Eşik 1000px, ölçüyle: ray alt sınırı 260 + sütun boşluğu 48 +
   açıklama ölçüsü 32rem (512) = 820px içerik; 1000px'te içerik
   genişliği 848px. Bunun altında açıklama 34 karakterin altına
   düşüyor ve satır sonları kırılıyordu. */
@media(min-width:1000px){
  .strip.is-open{
    grid-template-columns:clamp(260px, 26%, 340px) minmax(0, 1fr);
    grid-template-rows:repeat(4, 112px);
    column-gap:clamp(var(--s6), 4vw, var(--s8));
    row-gap:var(--s3);
  }
  .strip.is-open .strip__panel{grid-column:1;}
  .strip.is-open .strip__detail{grid-column:2;grid-row:1 / -1;}
}
/* Dar: sola küçülüp sağda panel açmaya yer yok (390px'te ray 140px'e
   düşüyor ve karo adı sarıyor). Açıklama TIKLANAN KARONUN HEMEN
   ALTINA giriyor: parmak nereye dokunduysa cevap orada beliriyor,
   hiçbir şey ekran dışına itilmiyor. Yerleştirme `order` ile;
   JS yalnızca bir sayı yazıyor. */
.strip__panel:nth-child(1){order:1;}
.strip__panel:nth-child(2){order:3;}
.strip__panel:nth-child(3){order:5;}
.strip__panel:nth-child(4){order:7;}
.strip__detail{order:calc(var(--slot, 4) * 2);}
@media(max-width:999px){
  .strip.is-open{grid-template-columns:minmax(0, 1fr);row-gap:var(--s3);}
  .strip.is-open .strip__detail{grid-column:1 / -1;}
}

/* ============================================================
   AÇIKLAMA PANELİ
   Kart değil: tek bir kılcal kural ve boşluk. Geniş ekranda kural
   dikey (rayla açıklamayı ayırır), dar ekranda yatay ve MAVİ —
   orada kural bir ayraç değil, açık karoyla açıklaması arasındaki
   bağ, ve o bağın rengi sayfada "bir şey oluyor" demek.
============================================================ */
.strip__detail{display:flex;flex-direction:column;align-items:flex-start;}
.strip__detail[hidden]{display:none;}
/* Açılış: yalnızca opaklık. Satırın kendisi zaten soldan siliniyor,
   ikinci bir yön eklemek iki ayrı hareket olurdu. */
.strip__detail:not([hidden]){animation:modeDetailIn var(--state) var(--ease-out) both;}
@keyframes modeDetailIn{from{opacity:0;}to{opacity:1;}}
@media(min-width:1000px){
  .strip__detail{
    border-left:1px solid var(--line-soft);
    padding-left:clamp(var(--s6), 3.4vw, var(--s7));
    /* Blok ray boyunca ORTALANIR. Üste hizalıyken 484px'lik kuralın
       alt 200px'i boş kalıyordu ve panel yarım kalmış görünüyordu. */
    justify-content:center;
  }
}
@media(max-width:999px){
  .strip__detail{
    border-top:1px solid var(--blue-line);
    padding:var(--s6) 0 var(--s5);
  }
}
/* Mod adı karoda zaten yazıyor; buradaki künye SIRA. Mono + tabular,
   sayfadaki her rakamla aynı kayıt. */
/* v10: RAKAM kaydına katıldı; .label'ın geniş harf aralığı (.08em)
   burada ezilir. `ss01` daha önce de ölüydü (main.css `.num`), satır
   temizlendi. */
.strip__index{
  font-family:var(--numeral);font-weight:400;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.strip__index-n{color:var(--text-2);}

/* Açıklama satırı. Söz bölümünden bir kademe küçük ve BİR KADEME İNCE:
   ağırlık ekseni canlı (fonts.css 100..900), 300 burada gerçek bir
   değer. Kalın bir cümle bağırırdı; bu cümle bilgi veriyor. */
.strip__line{
  margin:var(--s5) 0 0;
  font-size:clamp(1.25rem, 1.9vw, 1.75rem);
  line-height:1.42;
  letter-spacing:-.014em;
  font-weight:300;
  color:var(--text);
  max-width:32rem;
  text-wrap:pretty;
  clip-path:inset(0 100% 0 0);
}
/* Mod değişince satırın kendisi de soldan siliniyor: kelime animasyonu
   sıfırdan başlıyor ama cümlenin uzunluğu değiştiği için düz bir metin
   takası kesik gibi okunuyordu. */
.strip__line.is-in{clip-path:inset(0 0 0 0);transition:clip-path 620ms var(--ease-out);}

/* ── DOLUP BOŞALAN AYDINLANMA ──
   Sahibin adıyla istediği tek boşta hareket. TEK bir CSS animasyonu ve
   kelime başına yalnızca `animation-delay` farkı: JS döngüsü yok,
   sayfadaki tek rAF döngüsüne dokunulmadı.
   Zamanlama en uzun cümleye (Commute, 29 kelime) göre çözüldü:
     adım 60ms → son kelimenin gecikmesi 1.68s ;  tur 7s
   Sonuç: cümle 2.80s'de tamamen dolu ve 4.34s'ye kadar öyle kalıyor
   (1.54s'lik okuma penceresi), 6.44s'de tamamen sönük, 7.56s'de
   yeniden dolmaya başlıyor — arada 1.12s gerçek bir boşluk var.
   Pencere daha dar olsaydı cümle hiçbir an bütün hâlde okunamazdı.
   Tavan: bu ayarla 40 kelimeye kadar hem dolu pencere hem boşluk
   ayakta kalıyor; İngilizce karşılıklar bunun altında tutuldu.
   Sönük ton .24: söz bölümünün .22'sinden bir tık açık, çünkü bu metin
   28px değil 17-28px arası ve boş ânında da okunabilir kalmalı. */
.strip__line .w{
  opacity:.24;
  animation:modeWordCycle 7s var(--ease-state) calc(var(--w-i, 0) * 60ms) infinite both;
}
@keyframes modeWordCycle{
  0%, 8%    {opacity:.24;}
  16%, 62%  {opacity:1;}
  68%, 100% {opacity:.24;}
}

.strip__close{
  margin-top:var(--s6);
  font-family:var(--mono);font-size:13px;line-height:20px;letter-spacing:.08em;
  color:var(--text-3);
  transition:color var(--ui) var(--ease-out);
}
.strip__close:hover{color:var(--text);}

/* ── HAREKET AZALTMA ──
   Boşta dönen aydınlanma DURUR ve cümle tam tonda yazılır: .24'te
   bırakmak metni okunmaz kılardı. Yerleşim, içerik, sıra aynı. */
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
   varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
/* `.strip__line.is-in` DA yazılmak zorunda: tek `.strip__line`
   (0,1,0) yazsaydık `.is-in` (0,2,0) onu yener ve 620ms'lik silme
   hareket kapalıyken de koşardı — ölçüldü, koşuyordu. Önek ikisine de
   aynı (0,2,0) eklediği için bu sıralama korunuyor. */
:root[data-motion="off"] .strip__line,
:root[data-motion="off"] .strip__line.is-in{clip-path:none;transition:none;}
:root[data-motion="off"] .strip__line .w{animation:none;opacity:1;}
:root[data-motion="off"] .strip__detail:not([hidden]){animation:none;}
:root[data-motion="off"] .strip.is-open .strip__panel img,

/* ============================================================
   GARAGE — sıfırdan. Yapışkan medya bölmesi.
   Eskisi bir widget yığınıydı: seçici + hacim şeridi + stil etiketleri +
   kontrol listesi + bakım maketi, hepsi kart içinde. Yenisi tek bir
   sinematik yapılandırıcı: solda büyük render, sağda kaydırdıkça
   ilerleyen üç kategori. Kontrol listesi ve bakım maketi kaldırıldı —
   ikisi de ürünün henüz yapmadığı bir şeyi ima ediyordu.
============================================================ */
.garage__grid{grid-column:1 / -1;display:grid;gap:clamp(var(--s7), 6vw, var(--s9));margin-top:clamp(var(--s8), 10vh, var(--s10));}
@media(min-width:1000px){ .garage__grid{grid-template-columns:1.15fr .85fr;align-items:start;} }

/* ── MAKİNE PANELİ ──
   Garage artık açık zeminde (.ground-day) ve render'lar SAF SİYAH
   stüdyo zemininde üretildi: kâğıdın üzerine doğrudan konduklarında
   eliptik maskeye rağmen kirli bir leke gibi duruyorlar, çünkü maske
   kenarı söndürüyor ama merkezi zaten siyah.
   Cevap main.css'teki PANEL KURALI: koyu medya, açık zeminde
   yuvarlatılmış ve iç boşluklu bir panelin içinde durur. Panel kart
   değil — içinde tek bir görsel var, hiç metin yok. Bölümün başlığı,
   sınıf listesi ve açıklamaları panelin DIŞINDA, kâğıdın üzerinde.

   Panelin zemini "orta ton / lacivert" isteğinin karşılığı: üstten
   gelen bir --navy ışık havuzu, altta --ink'e iniyor. Makine böylece
   ne saf siyahta ne de bir kutunun içinde duruyor; bir lambanın
   altında duruyor. Havuz panelin İÇİNDE, yani kenarı panelin kendi
   yarıçapı — sayfada yeni bir sınır kurmuyor.

   Hâle bir box-shadow rengi, ayrı bir katman değil: --bloom panelin
   arkasına düşüyor, --sh-3 aynı anda temas gölgesini veriyor. İkisi
   tek bildirimde çünkü ikisi de aynı kutunun özelliği; ayrı bir öğe
   ile yapılsaydı yapışkan kapta kendi yığın bağlamı sorununu da
   getirirdi. */
.garage__stage{position:relative;}
.ground-day .garage__stage{
  border-radius:var(--r-lg);
  padding:clamp(var(--s5), 3vw, var(--s7));
  background:
    radial-gradient(ellipse 74% 60% at 50% 30%,
      var(--navy) 0%, transparent 74%),
    var(--ink);
  box-shadow:0 46px 120px -54px var(--bloom), var(--sh-3);
}
@media(min-width:1000px){
  .garage__stage{position:sticky;top:calc(var(--nav-h) + var(--s7));}
}
.garage__render{position:relative;aspect-ratio:4 / 3;}
.garage__render img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity var(--state) var(--ease-state);
  /* Render'ların stüdyo zemini saf siyah değil, hafif aydınlık bir
     vinyet — sayfada dikdörtgen bir kutu olarak görünüyordu. Eliptik
     maske kenarları tamamen söndürür, makine zeminde yüzer. */
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, black 55%, transparent 88%);
          mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, black 55%, transparent 88%);
}
.garage__render img.is-active{opacity:1;}
/* Yere basmasını sağlayan tek şey ALTINDAKİ eliptik gölge. Kutu yok. */
.garage__render::after{
  content:"";position:absolute;inset:auto 0 0 0;height:16%;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 100%, var(--shadow-contact), transparent 70%);
}

.garage__list{list-style:none;margin:0;padding:0;}
.garage__item{
  position:relative;
  display:grid;grid-template-columns:1fr;
  align-items:baseline;gap:var(--s4);
  width:100%;text-align:left;
  padding-block:var(--s6);
  border-top:1px solid var(--line-soft);
  transition:color var(--ui) var(--ease-state);
}
.garage__item:last-child{border-bottom:1px solid var(--line-soft);}
/* Seçili durum: metin --text'e çıkar VE altına tek mavi kural kayar.
   Renk tek başına asla durum taşımaz. */
.garage__item::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--state) var(--ease-out);
}
.garage__item[aria-pressed="true"]::after{transform:scaleX(1);}
/* Açık zeminde marka mavisi DOLGU olarak da bir kademe koyulaşıyor:
   marka mavisi kâğıt üzerinde 3,34:1 ve 1px'lik bir kural o oranda
   kayboluyor. Bölümün geri kalanı bu dönüşü --cyan jetonu üzerinden
   alıyor (main.css .ground-day); burada --blue DOLGU olarak
   kullanıldığı için kural adıyla yazılmak zorunda. */
.ground-day .garage__item::after{background:var(--paper-blue);}
.garage__name{
  grid-column:1;font-size:var(--d3);line-height:1.1;letter-spacing:-.015em;
  font-weight:500;color:var(--text-3);
  transition:color var(--ui) var(--ease-state);
}
.garage__item[aria-pressed="true"] .garage__name{color:var(--text);}
/* HACİM ARALIĞI KALDIRILDI (kurucunun kararı): "125–400 cc" gibi bir
   aralık sınıfı TANIMLIYOR gibi okunuyordu ve bu yanlış — düşük hacimli
   adventure de var, yüksek hacimli naked de. Motor hacmi motorun kendi
   hesabında kalmaya devam ediyor (otoyol için 125 cc alt sınırı, eğim
   cezasının hacme göre kademelenmesi); kalkan şey hacmin sınıfın tanımı
   gibi gösterilmesi. */
/* Açıklama HER ZAMAN görünür ve okunur. Seçim durumunu taşıyan üç şey
   zaten var: adın tonu, altına kayan mavi kural ve render'ın değişmesi.
   Renk tek başına asla durum taşımaz. */
.garage__desc{
  grid-column:1 / -1;margin:var(--s3) 0 0;
  font-size:17px;line-height:1.6;color:var(--text-2);max-width:36rem;
}
@media (hover:hover) and (pointer:fine){
  .garage__item:hover .garage__name{color:var(--text-2);}
}

/* ============================================================
   İNSAN ANLARI — açılış A, kâğıt zemininde üç çıplak kare (v9).

   ÜÇÜ EŞİT DEĞİL ve bu Ekip'in tam TERSİ bir karar; ikisi de bilerek.
   Ekip'te üç portre birebir eşittir çünkü orada karşılaştırılan şey üç
   KURUCU ve birini büyük göstermek bölümün kendi cümlesini ("MotoMap'ı
   yapan üç kişi") yalanlar — sahibin notu da tam buydu.
   Burada karşılaştırılan kimse yok: üç ayrı AN var. Eşit üçlü bir
   ızgara üretici imzasıdır (modlar şeridinin kolonları da bu yüzden
   1fr / 1.6fr / 1fr / 1.3fr). Kolonlar 7 / 5 / 8:

     satır 1   [ ——— mola ——— ][ yola bakış ]     ortak TABAN çizgisi
     satır 2          [ ————— kask çıkıyor ————— ] sağ kenara dayalı

   Kompozisyon sol üstten sağ alta akan bir köşegen; ikinci satır
   içeriden başlayıp sağ kenarda bitiyor, yani bölüm sola değil SAĞA
   kapanıyor ve göz oradan Ekip'e iniyor.

   Taban çizgisi ortaklığı `align-self:end` ile geliyor, elle verilmiş
   bir üst boşlukla değil: satırın boyu birinci kareden geliyor, ikinci
   kare o boya OTURUYOR. Ölçü değişirse hizalama kendiliğinden doğru
   kalır.

   ÇERÇEVE YOK, PERDE YOK, YAZI YOK. Kenarlık koymak kutu, yazı koymak
   kart olurdu. Yarıçap --r-md, yani Ekip çerçevesiyle aynı: sayfada
   tam kenara dayanmayan medya bu yuvarlaklıkta duruyor (film kareleri
   tam kanama olduğu için yarıçapsız).
   Perde (scrim) YOK çünkü üstünde okunacak bir şey yok; modlar
   şeridindeki perde oradaki adları okutmak için var.
============================================================ */
.human__grid{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:subgrid;
  row-gap:clamp(var(--s5), 3.5vh, var(--s7));
  margin-top:clamp(var(--s7), 8vh, var(--s9));
  align-items:start;
}
.human__shot{
  display:block;
  width:100%;height:auto;
  border-radius:var(--r-md);
}
.human__shot--a{grid-column:1 / 8;grid-row:1;}
/* Birinci satırın boyu (a) belirliyor; b o boya oturuyor. */
.human__shot--b{grid-column:8 / 13;grid-row:1;align-self:end;}
.human__shot--c{grid-column:5 / 13;grid-row:2;}

/* Dar ekranda köşegen ANLAMSIZ: 7/5/8 kolonun üçü de tek kolona
   düşer ve geriye üç eşit kare kalır — burada eşitlik doğru olan,
   çünkü kıyas değil sıra var. Üst üste, tam genişlikte, aynı boşlukla. */
@media(max-width:900px){
  .human__grid{row-gap:var(--s5);}
  .human__shot--a,
  .human__shot--b,
  .human__shot--c{grid-column:1 / -1;grid-row:auto;align-self:auto;}
}

/* ============================================================
   EKİP — açılış E. Eşit üçlü değil: portreler farklı genişlikte ve
   farklı taban çizgisinde oturur.
============================================================ */
/* ÜÇ PORTRE, ÜÇÜ DE AYNI. Burada bir süre "eşit üçlü değil" diye
   savunulan bir kompozisyon vardı: orta kolon 1.18fr genişti ve orta
   üyeye padding-bottom veriliyordu, yani ortadaki portre hem %18 daha
   geniş hem farklı taban çizgisindeydi. Ölçüldü ve sahibin gördüğü şey
   buydu: "fotoğraflar aynı hizada aynı boyutta olmalıdır, Muhammed'inki
   dikey olarak daha geniş."
   Haklıydı ve mesele estetik değil: üç kurucudan birini büyük göstermek
   sayfanın kendi söylediği şeye — "MotoMap'ı yapan üç kişi" — aykırı.
   Üç eşit kolon, tek taban çizgisi, tek kırpım oranı.
   Ölçüldü (1440, düzeltmeden önce): ortadaki portre 401,34×501,67,
   diğer ikisi 340,13×425,16 — %18 büyük, tepesi 121,51px ve tabanı
   45px kayık.

   Kolon genişliği `1fr` DEĞİL, açık kesir: `1fr` artan kesirli pikseli
   son kolona bırakıyor ve üç çerçeve 360,53 / 360,53 / 360,55 çıkıyor.
   Göze görünmez ama "üçü de birebir aynı" cümlesini yanlış yapar.
   Oran da tek yerde: 4:5 artık ÇERÇEVEDE, görüntü onu dolduruyor.
   Eskiden oran görüntüdeydi, yani rayların kesirli farkı doğrudan
   yüksekliğe geçiyordu. */
.team{
  --team-gap:clamp(var(--s6), 4vw, var(--s8));
  grid-column:1 / -1;
  display:grid;
  gap:var(--team-gap);
  margin-top:clamp(var(--s8), 10vh, var(--s10));
  align-items:start;
}
@media(min-width:820px){
  .team{grid-template-columns:repeat(3, calc((100% - 2 * var(--team-gap)) / 3));}
}
.team__member{min-width:0;}

/* PORTRE ÇERÇEVESİ — kenarda dolaşan neon.
   Bu efekt bir kez söz verilip sonra sessizce silinmişti (e901f7d);
   denetim onu bulduğu için geri geliyor, ve bu sefer sayfanın geri
   kalanıyla aynı sözleşmeye tabi:
   · Boşta DÖNMEZ. Portre açıldığında bir kez koşar, üzerine gelince
     bir kez daha. Sürekli dönen bir çerçeve dekoratif harekettir.
   · Işık dolaşır ve GİDER; kalıcı bir mavi çerçeve bırakmaz.
   · Aynı --trace kaydı ve aynı iki katmanlı maske tekniği kullanılıyor
     (main.css'teki .trace ile birebir), yani yeni bir kalıp icat
     edilmiyor: modlarda ve Garage'da koşan ışığın aynısı. */
.team__frame{
  position:relative;
  aspect-ratio:4 / 5;
  border-radius:var(--r-md);
  overflow:hidden;
}
/* SÜREKLİ. Bu ışık bir tur boyunca açılışta bir kez koşup sönüyordu ve
   sahibin notu net: "bir kere gelip gitmemelidir, sürekli olarak
   durmalıdır orada, hem scroll'la hem de ekranda dururken."

   İstenen şey SÜREKLİ HAREKET değil SÜREKLİ VARLIK — ve aradaki fark
   bu bileşenin ucuz mu pahalı mı göründüğünü belirliyor. Durmadan dönen
   bir kenarlık yükleniyor göstergesine benziyor. Onun yerine iki katman:

     1) KALICI KENAR (::before) — halkanın tamamı, sabit, düşük yoğunlukta.
        Hiç animasyon yok, hiçbir kare maliyeti yok. "Orada duran" bu.
     2) GEZEN YAY (::after) — halkanın üzerinde dolaşan kısa parlak bir
        kavis. Tur süresi 14 s: bakınca fark edilir, izlemeye zorlamaz.
        Üç portre 0 / -4.7 / -9.3 s gecikmeyle başlıyor, yani üçü aynı
        anda aynı köşede olmuyor; senkron üç kenarlık dekor gibi okunur,
        kaydırılmış üçü bir sistem gibi.

   Maliyet: yay bir conic-gradient ve açısı @property ile kayıtlı
   --spin üzerinden dönüyor, yani kare başına boyanan alan 1px'lik
   halka. Ölçüldü (üçü birden koşarken, 1440×900): p50 16.7 ms — vsync
   sınırında, yani bu üç animasyon kare bütçesinden ölçülebilir bir şey
   almıyor. Bölüm ekran dışındayken animasyon yine koşuyor; durdurmak
   için gereken IntersectionObserver, kazandırdığından fazlasına mal
   olurdu.

   reduced-motion: yay DURUR ama KAYBOLMAZ — sabit bir açıda donar.
   İstek "sürekli orada olsun" idi; hareketi kısmak onu silmek değil. */
@property --spin{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.team__frame::before,
.team__frame::after{
  content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:inherit;
  padding:1px;
  -webkit-mask:linear-gradient(black, black) content-box,
               linear-gradient(black, black);
  -webkit-mask-composite:xor;
          mask:linear-gradient(black, black) content-box,
               linear-gradient(black, black);
  mask-composite:exclude;
}
/* IŞIK AMBER (v7), ZEMİN KÂĞIT (v9).
   Mavi = teknoloji, amber = insan; sayfadaki tek amber burası. v9'da
   Ekip akşam zemininden kâğıda geçti (kurucu: "arka planı bejimsi
   beyaz yap"), ışığın davranışı aynı kaldı: kalıcı kenar + gezen yay,
   14 s tur, kaydırılmış gecikmeler. Kâğıt üstünde açık amber (#E9A85A)
   1,9:1 ile görünmez kalıyordu; yayın çekirdeği bir kademe koyu amber
   (--amber-deep, 2,9:1 — 1px'lik bir ışık için yeterli, metin değil),
   kalıcı kenar kâğıdın kendi saç teli. */
/* 1 — kalıcı kenar: kâğıdın saç teli; üzerine gelince koyu amber. */
.team__frame::before{
  background:var(--paper-line);
  transition:background-color var(--ui) var(--ease-state);
}
/* 2 — gezen yay: halkanın yaklaşık altıda biri, koyu amberden açık ambere. */
.team__frame::after{
  background:conic-gradient(from var(--spin),
    transparent 0deg,
    var(--amber-deep) 26deg,
    var(--amber) 42deg,
    transparent 68deg,
    transparent 360deg);
  animation:teamOrbit 14s linear infinite;
}
.team__member:nth-child(2) .team__frame::after{animation-delay:-4.7s;}
.team__member:nth-child(3) .team__frame::after{animation-delay:-9.3s;}
@keyframes teamOrbit{ to{--spin:360deg;} }

/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
   varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"] .team__frame::after{animation:none;--spin:210deg;}
/* Üç kaynak dosya da 800×1000, yani çerçeveyle BİREBİR aynı oran —
   ölçüldü. Dolayısıyla object-fit:cover hiçbir şey kırpmıyor ve
   object-position tamamen etkisiz. Burada bir süre üç ayrı nth-child
   kuralı (%28 / %22 / %30) ve üstünde "kaynak fotoğraflar farklı
   oranlarda, birinin çenesini kesiyordu" diyen bir yorum duruyordu;
   ikisi de yanlıştı. Fotoğraflar depoya girmeden önce 4:5'e
   kırpılmış. Ölü kural ve yanlış gerekçe silindi, tek dürüst değer
   kaldı. */
/* GRİ TONLAMA KALDIRILDI (v7).
   Üç portre `grayscale(1)` ile duruyor, yalnızca imlecin altında renge
   dönüyordu. Kurucu ortağın sayfanın tamamı için söylediği şey
   ("soğuk kış günü gibi, kapalı kasvetli") en birebir karşılığını
   burada buluyordu: sayfanın tek insan bölümünde üç insan siyah beyaz
   duruyor ve rengi ancak bir fare işaretçisi getiriyordu. Dokunmatik
   cihazda hiç gelmiyordu — yani ziyaretçilerin çoğu ekibi hiçbir zaman
   renkli görmedi.
   Şimdi portreler baştan renkli. Üzerine gelme hâli SİLİNMEDİ, işini
   değiştirdi: renk vermek yerine çerçevenin kalıcı kenarını parlatıyor,
   yani "bu portre seçildi" hâlâ var ama bilginin kendisi geri
   tutulmuyor. */
.team__member img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  border-radius:inherit;
}
@media (hover:hover) and (pointer:fine){
  /* Üzerine gelince yay HIZLANMAZ — hızlanan bir ışık telaş demek.
     Kalıcı kenar parlıyor, yani portre "seçildi" diyor ve gezen yay
     kendi temposunda devam ediyor. */
  .team__member:hover .team__frame::before{background:var(--amber-deep);}
}
.team__name{margin:var(--s4) 0 0;font-size:17px;font-weight:520;color:var(--text);}
.team__role{margin:var(--s1) 0 0;font-family:var(--mono);font-size:13px;line-height:20px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}

/* ============================================================
   KAPANIŞ — marka sözü ve kapalı beta TEK kompozisyonda.
   Film tam güçte, tek scrim altında. Form kart değil: saç teli çizgi
   üzerinde tek büyük satır ve yanında beyaz hap.
============================================================ */
.closing{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(var(--s9), 16vh, 11rem);}
.closing__media{position:absolute;inset:0;z-index:0;}
.closing__media img,.closing__media video{width:100%;height:100%;object-fit:cover;}
/* Film posterin üstünde durur ve yalnızca oynamaya başlayınca görünür. */
.closing__media video{
  position:absolute;inset:0;
  opacity:0;transition:opacity var(--state) var(--ease-state);
}
.closing__media video.is-playing{opacity:1;}
/* Alt durak TAM OPAK: .94 ile bırakıldığında filmin altındaki kare
   zeminden koyu olduğu için bölümün dibi sayfanın zemininden ölçülebilir
   şekilde koyu çıkıyor ve altlıkla arasında bir dikiş görünüyordu.
   Tek zemin sözleşmesi tam olarak burada sınanıyor. */
.closing__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    var(--ink) 0%,
    rgba(var(--ink-rgb),.86) 14%,
    rgba(var(--ink-rgb),.58) 44%,
    rgba(var(--ink-rgb),.34) 74%,
    rgba(var(--ink-rgb),.74) 100%);
}
.closing > .wrap{position:relative;z-index:2;}

/* Kurucunun ikinci cümlesi: büyük satırın altında, bir kademe geri.
   `.open-statement`in İÇİNE konamaz — o desen doğrudan çocuklarının
   hepsini --d1'e çıkarıyor (main.css), yani ikinci cümle de ekran boyu
   bir başlık olurdu. Kardeş olarak, aynı sol eksende duruyor ve ölçüsü
   metin ölçeğinin kendi tepesi (20px, `.lead` ile aynı kayıt). */
.closing__sub{
  grid-column:1 / 7;
  margin:var(--s5) 0 0;
  font-size:20px;line-height:1.5;
  color:var(--text-2);
  max-width:34rem;
  text-wrap:pretty;
}
@media(max-width:900px){ .closing__sub{grid-column:1 / -1;} }
/* ── KAYIT ── Bölümün alt yarısı bir haber bülteni satırı değil, bir
   İŞLEM. Sözün köşegeni burada sürüyor: söz solda büyük kütle, kayıt
   sağda küçük kütle, ikisi ızgaranın tamamını geçen tek bir saç teli
   üzerinde buluşuyor. Kutu yok, kart yok; birleştiren şey tek çizgi.

   Ölçüldü (1440): eski hâlde 8–12 arası kolonlar tamamen boştu ve form
   15px'lik gri bir nottan sonra başlıyordu — sayfanın tek dönüşüm
   noktası, sayfanın en zayıf yazısıydı.

   BÖLÜNME 1200px'İN ÜSTÜNDE, ve bu sayı ölçüldü. Sayfanın alışıldık
   900px sınırında denendiğinde sağ kolon 6 kolona düşüyor ve e-posta
   alanı 901px'te 141px kalıyordu: kendi yer tutucusu bile sığmıyordu.
   1201px'te alan 262px, 1280'de 294px, 1440'ta 360px. Altında her şey
   tam genişlikte istifleniyor (291–772px). */
.closing__form{
  grid-column:1 / -1;
  display:grid;grid-template-columns:subgrid;
  align-items:start;
  row-gap:var(--s6);
  margin-top:clamp(var(--s8), 9vh, var(--s9));
  padding-top:var(--s6);
  border-top:1px solid var(--line-soft);
}
.closing__invite{grid-column:1 / 6;}
.closing__enrol{grid-column:7 / 13;}

/* Davet iki cümle ve sırası bilinçli: önce NEDEN, sonra NE YAPACAĞIN.
   Neden metin ölçeğinin tepesinde (20px, --text) durur, talimat bir
   kademe geri düşer. Eskiden yalnızca talimat vardı. */
.closing__pitch{
  margin:0;font-size:20px;line-height:1.4;
  font-weight:480;letter-spacing:-.012em;
  color:var(--text);max-width:20rem;text-wrap:pretty;
}
.closing__note{margin:var(--s3) 0 0;font-size:15px;line-height:1.6;color:var(--text-2);max-width:22rem;}

/* ── ALAN ──
   Kural artık ALANIN kendisine ait, satırın tamamına değil. Eskiden
   saç teli düğmenin de altından geçip iki yanından taşıyordu; şimdi
   girdinin sağ kenarında bitiyor ve düğme onun üstünde yüzmek yerine
   yanına oturuyor. */
.field{display:flex;align-items:flex-end;gap:var(--s5);}
.field__box{
  position:relative;flex:1 1 auto;min-width:0;display:block;
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
  transition:border-color var(--ui) var(--ease-state);
}
.field input{
  width:100%;background:none;border:0;padding:var(--s3) 0 0;
  font-family:var(--font);font-size:20px;line-height:1.4;color:var(--text);
}
/* outline:none KULLANILMAZ. Odak göstergesi iki katmanlı: alttaki mavi
   kural ve global :focus-visible halkası. İkisi de yerinde kalır. */
.field input::placeholder{color:var(--text-2);}

/* Odak bir renk değişimi değil bir HAREKETTİR: mavi kural soldan büyür.
   Sayfa bu cümleyi zaten kuruyor (nav bağlantı altı, okuma rayı); alan
   da aynı cümleyi kurunca form sayfaya ait oluyor, üstüne konmuş bir
   bülten kutusu gibi durmuyor. */
.field__box::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--state) var(--ease-out);
}
.field:focus-within .field__box::after{transform:scaleX(1);}

/* Geçersiz hâlde kural DOLU ve --danger: hata rengi yalnızca alt
   satırda değil, sebebin üzerinde de duruyor. */
.field.is-invalid .field__box{border-color:var(--danger);}
.field.is-invalid .field__box::after{background:var(--danger);transform:scaleX(1);}

/* Gönderim izi bir DURUM göstergesidir, boşta dönen bir süs değil:
   yalnızca gerçek uç nokta bağlıyken (BETA_ENDPOINT) koşar. Mailto
   yolunda hiç çalışmaz — gönderilmeyen bir şey için "gönderiliyor"
   oynatmak tam olarak bu bölümün yasakladığı şey.
   Menzil hesapla kısıtlandı: %32 genişlikteki parça `translateX(0)` ile
   `translateX(212.5%)` arasında kaldığında sol kenarı 0'dan %68'e,
   sağ kenarı %32'den %100'e gider, yani kutudan ASLA taşmaz. İlk
   denemede (−%105 → %305) parça girdinin %30 dışına çıkıp düğmenin
   altına giriyordu; ölçüldü. Kırpmak yerine menzil daraltıldı, çünkü
   `overflow:hidden` girdinin odak halkasını da keserdi. */
@keyframes fieldScan{
  from{transform:translateX(0);}
  to  {transform:translateX(212.5%);}
}
.field.is-sending .field__box::after{
  right:auto;width:32%;
  transform:none;transition:none;
  animation:fieldScan 900ms var(--ease-io) infinite alternate;
}

/* Sayfadaki tek dolu düğme; kıyafeti .cta'dan aynen gelir, burada
   yalnızca GENİŞLİĞİ sabitleniyor. Ölçüldü: "Yazıl" 131px, gönderim
   sırasında "Gönderiliyor…" 198px — etiket değişince satırın tamamı
   oynuyordu. 12.5rem ikisini de taşır ve düğme hiç kıpırdamaz. */
.field .cta{flex:0 0 auto;min-width:12.5rem;}
.field .cta[disabled]{cursor:progress;opacity:.68;}
.field .cta[disabled]:active{transform:none;}

/* ── DURUM BÖLGESİ ──
   Dört durum tek bölgeye yazılır ve bölge boşken de yüksekliğini ayırır:
   durum belirince alttaki hiçbir şey zıplamaz.

   RENK BURADA SÖZLEŞMEYİ UYGULUYOR. Sözleşmenin tezi "mavi, MotoMap
   gerçekten bir şey yaptığında görünür" — ve bu bölüm o tezin sınandığı
   yer. ONAYLANMIŞ kayıt mavi kural alır. E-posta istemcisinin açılması
   ALMAZ, çünkü o bir kayıt değil: ziyaretçi o mesajı göndermezse bize
   hiçbir şey ulaşmıyor. İki durumun aynı görünmesi motion.js'te bir
   yorumla değil, artık paletle engelleniyor. */
.closing__status{margin-top:var(--s5);min-height:24px;}
.closing__status.is-error{border-left:1px solid var(--danger);padding-left:var(--s4);}
.closing__status.is-info{border-left:1px solid var(--line);padding-left:var(--s4);}
.closing__error{margin:0;font-size:15px;line-height:1.6;color:var(--danger);}
.closing__error.is-info{font-size:17px;color:var(--text-2);}

/* Mailto yolunun gerçek kusuru: masaüstünde e-posta istemcisi
   tanımlanmamışsa `location.href = "mailto:"` sessizce hiçbir şey
   yapmıyor ve ziyaretçiye "uygulaman açıldı" deniyor. Adres burada
   duruyor ki bir çıkış yolu kalsın. */
.closing__fallback{display:none;margin:var(--s3) 0 0;font-size:15px;line-height:1.6;color:var(--text-3);}
.closing__status.is-info .closing__fallback{display:block;}
.closing__fallback .link{font-size:15px;font-weight:520;}

/* Onaylanmış kayıt: form gider, mavi kural gelir, metin --text'e çıkar.
   Ölçekte yukarı kaçmıyor — 20px kapalı metin ölçeğinin zaten tepesi. */
.closing__ok{
  grid-column:7 / 13;margin:0;display:none;
  font-size:20px;line-height:1.5;color:var(--text);
  border-left:1px solid var(--blue);padding-left:var(--s4);
}
.closing__ok.is-shown{display:block;}
/* Kayıt alındıysa "e-postanı bırak" talimatı ekranda kalmaz. */
.closing__form.is-done .closing__note{display:none;}

@media(max-width:1200px){
  .closing__invite,.closing__enrol,.closing__ok{grid-column:1 / -1;}
  .closing__pitch,.closing__note{max-width:34rem;}
}
/* Dar ekranda satır sarılmaz, İSTİFLENİR. Eski hâlde flex-wrap ile
   kabın alt çizgisi düğmenin 197px altında kalıyordu; kural artık
   girdinin kendi kutusunda olduğu için o tuzak yapısal olarak yok.
   Ölçüldü (360/390/414/640): girdi ile düğme arası her genişlikte
   24px, yatay taşma 0. */
@media(max-width:640px){
  .field{display:block;}
  .field .cta{width:100%;min-width:0;margin-top:var(--s5);}
}
/* Hareket azaltmada durum ADIYLA render edilir, silinmez: gönderim izi
   dolu mavi bir kurala iner, düğme etiketi yine "Gönderiliyor…" der. */
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
   varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"] .field__box::after{transition:none;}
:root[data-motion="off"] .field.is-sending .field__box::after{animation:none;width:100%;transform:none;}

/* ============================================================
   ALTLIK
============================================================ */
.foot{padding-block:clamp(var(--s8), 9vh, var(--s9)) var(--s8);border-top:1px solid var(--line-soft);}
.foot__grid{grid-column:1 / -1;display:grid;gap:var(--s7);}
@media(min-width:760px){ .foot__grid{grid-template-columns:1.4fr 1fr 1fr;} }
.foot h3{margin:0 0 var(--s4);font-family:var(--mono);font-size:13px;line-height:20px;letter-spacing:.08em;color:var(--text-3);font-weight:400;}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);}
.foot a{font-size:15px;color:var(--text-2);transition:color var(--ui) var(--ease-state);}
.foot a:hover{color:var(--text);}
.foot__mark{margin:0;font-size:15px;color:var(--text-2);max-width:26rem;}
/* Konsept uyarısı altlıkta da (Ali'nin alternatifinden): önizleme başlığındaki
   nitelik sayfanın sonunda bir kez daha, sessizce. */
.foot__concept{margin:var(--s2) 0 0;font-size:13px;line-height:20px;color:var(--text-3);max-width:26rem;}
.foot__legal{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s6);
  margin-top:clamp(var(--s7), 7vh, var(--s8));padding-top:var(--s5);
  border-top:1px solid var(--line-soft);
}
.foot__legal p,.foot__legal a{margin:0;font-size:13px;color:var(--text-3);}

/* ============================================================
   SORULAR — "Aklına takılanlar."
   ============================================================
   Ekip'ten sonra, kapanıştan ÖNCE. Yeri bilinçli: itirazlar formdan
   önce cevaplanır, sonra değil; ziyaretçi e-postasını bırakırken
   aklında açık soru kalmasın. calimoto'nun "Still have questions?"
   bloğu örnek alındı, kutuları alınmadı.

   Kart yok: gerekçe satırlarıyla (.why) aynı defter — saç teli, soru,
   cevap. Akordeon <details>/<summary>: tarayıcının kendi açılır öğesi,
   JS yok, klavye ve ekran okuyucu bedava, JS kapalıyken de açılır.

   Artı işareti bir glif DEĞİL: currentColor'dan iki 1px çizgi.
   Glif olsaydı Geist'in artısı satır yüksekliğine göre kayar ve her
   soruda başka yerde dururdu. Açılınca 45° döner, çarpı olur.

   ≥901px: başlık sol beş kolonda yapışkan, liste sağ yedi kolonda.
   Başlık ziyaretçi soruları okurken yerinde kalır; kolon genişliği
   `.wrap` ızgarasından geliyor, ayrı bir ölçü icat edilmedi.

   v9 — KÂĞIT ve BEYAZIMSI YÜZEY. Kurucu: "FAQ kısmı için de modern
   beyazımsı bir şey yap." Liste kâğıt üstünde tek bir beyazımsı yüzeyde
   (--panel, --r-lg yarıçap); satırlar saç teliyle ayrılır, yüzeyin
   dış kenarında çizgi yok. Kart yığını değil: yüzey TEK ve hiçbir
   satırı öne çıkarmaz (main.css TEZ · PANEL KURALI, v9 istisnası).
============================================================ */
.faq{
  grid-column:1 / -1;
  display:grid;grid-template-columns:subgrid;
  row-gap:var(--s7);
}
.faq__head{grid-column:1 / -1;}
.faq__head h2{margin:0;max-width:14ch;text-wrap:balance;}
.faq__more{
  margin:var(--s5) 0 0;
  font-size:17px;line-height:28px;color:var(--text-2);max-width:34rem;
}
.faq__more a{color:var(--text);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--blue-line);}
.faq__list{
  grid-column:1 / -1;
  background:var(--panel);
  border-radius:var(--r-lg);
  padding:var(--s2) clamp(var(--s5), 3vw, var(--s7));
}
.faq__row{border-top:1px solid var(--line-soft);}
.faq__row:first-of-type{border-top:0;}
/* DİKKAT — `.faq__row`a `transition` YAZILMAZ; `.wipe` ile aynı özgüllük,
   sonraki dosya: açılışı öldürür (bkz. .why__row). Geçiş yalnız artının
   sözde-öğesinde. */
.faq__q{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:var(--s5);
  padding-block:var(--s6);
  list-style:none;cursor:pointer;
  font-size:20px;line-height:30px;letter-spacing:-.01em;font-weight:520;color:var(--text);
  text-wrap:balance;
}
.faq__q::-webkit-details-marker{display:none;}
/* Aşağı bakan şevron, açıkken 180° dönüp yukarı bakar — artı/çarpı yerine
   "cevap açılıyor" okunan Stripe/Linear/Notion sözleşmesi. Köşe kenarlıktan
   çizilir (currentColor), .faq__row'a DOKUNMAZ (bkz. yukarıdaki DİKKAT). */
.faq__q::after{
  content:"";width:9px;height:9px;margin-top:11px;flex-shrink:0;
  color:var(--text-3);
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--state) var(--ease-state), color var(--ui) var(--ease-state);
}
.faq__row[open] > .faq__q::after{transform:rotate(225deg);color:var(--text);}
@media (hover:hover) and (pointer:fine){
  .faq__q:hover::after{color:var(--text);}
}
.faq__q:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px;}
.faq__a{
  margin:0;padding:0 0 var(--s6);
  font-size:17px;line-height:28px;color:var(--text-2);
  max-width:34rem;text-wrap:pretty;
}
@media(min-width:901px){
  .faq__head{
    grid-column:1 / 6;align-self:start;
    position:sticky;top:calc(56px + var(--s7));
  }
  .faq__list{grid-column:6 / -1;}
}
:root[data-motion="off"] .faq__q::after{transition:none;}

/* ============================================================
   DURAĞAN KARE — metin bölümlerinin arkasındaki fotoğraf
   ============================================================
   Söz bölümünün arkasında bir fotoğraf var (v9: Neden'in karesi kalktı,
   bölüm kâğıtta — kurucu "arka plandaki fotoğrafı kaldır" dedi).
   Kurucu ortağın isteği (benzin istasyonu görseli "uygun sectiona").
   Sonraki kural hareketi kapattı ("JS/CSS animasyon yerine görsel
   kalsın"), bu yüzden kare DURAĞAN; video ise kredi kararına takılı.

   v7 tezinin "medya ↔ hiçlik" ritmi burada bilinçli olarak esnetildi:
   kare medya DEĞİL zemin gibi davranıyor — parlaklığı yarıya inmiş,
   üstünde iki yönlü perde, metin hep karanlığın üstünde. Film
   bölümleriyle aynı perde mantığı (dikey + soldan yatay).
   z-index: kare -2, perde -1, içerik 0; `isolation` bölümü kendi
   yığın bağlamına alıyor ki -1 sayfanın zemininin altına düşmesin.
   Kadraj bölüm başına değişkenle (--still-pos): Söz'de aydınlık
   istasyon sağda, söz solda.
============================================================ */
.section--still{position:relative;isolation:isolate;}
.section--still > .still{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:var(--still-pos, center);
  filter:brightness(.5) saturate(.8);
  pointer-events:none;
}
.section--still::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(var(--ink-rgb),.58) 0%,
      rgba(var(--ink-rgb),.42) 22%,
      rgba(var(--ink-rgb),.88) 56%,
      rgb(var(--ink-rgb)) 80%),
    linear-gradient(to right,
      rgba(var(--ink-rgb),.72) 0%,
      rgba(var(--ink-rgb),.34) 44%,
      rgba(var(--ink-rgb),0) 74%);
}
/* Söz'de kadraj tersi: metin solda ve büyük, ışık sağda. Dikey perde
   alttan değil ÜSTTEN de kısılır ki dev cümle boyunca zemin düz kalsın. */
#promise.section--still::before{
  background:
    linear-gradient(to bottom,
      rgb(var(--ink-rgb)) 0%,
      rgba(var(--ink-rgb),.55) 30%,
      rgba(var(--ink-rgb),.55) 70%,
      rgb(var(--ink-rgb)) 100%),
    linear-gradient(to right,
      rgba(var(--ink-rgb),.92) 0%,
      rgba(var(--ink-rgb),.62) 48%,
      rgba(var(--ink-rgb),.10) 100%);
}

/* ============================================================
   MOD DETAYI — dikey kare
   ============================================================
   Açık panelde seçili modun dikey karesi solda, açıklama sağda.
   Yalnız ≥1200px: 1000–1199 arasında panel 460px ve kare metne yer
   bırakmıyordu (ölçüldü: 260 + 24 + 176). Dar ekranda karo zaten o
   modun yatay karesini taşıyor; aynı sahneyi ikinci kez göstermek
   tekrar olurdu.
============================================================ */
.strip__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.strip__shot{display:none;}
@media(min-width:1200px){
  .strip.is-open .strip__detail{
    display:grid;
    grid-template-columns:clamp(240px, 24vw, 372px) minmax(0, 1fr);
    column-gap:clamp(var(--s6), 3vw, var(--s8));
    align-items:center;
  }
  .strip__shot{
    display:block;width:100%;height:auto;
    aspect-ratio:4 / 5;object-fit:cover;
    border-radius:var(--r-md);
    animation:modeDetailIn var(--state) var(--ease-out) both;
  }
  .strip__shot[hidden]{display:none;}
}

/* ============================================================
   NASIL ÇALIŞIR — dizin bileşeninin üç sütunlu hâli
   ============================================================
   Aynı .index kıyafeti (sıra rakamı, üst saç teli, mavi çizilen kural);
   yalnız sütun sayısı ve başlıkla arası farklı. Kâğıt zeminde
   (.ground-day) jetonlar zaten yeniden tonlanıyor, burada renk yok. */
/* Adım sayısı 3'ten 4'e çıktı (yoldaki ihtiyaçlar). Üç sütuna kilitleyen
   kural kalktı: liste artık dizin bloğunun kendi ritmini izliyor —
   ≥1040px dört sütun, 640–1039 iki sütun, altında tek. */
.index--how{margin-top:clamp(var(--s6), 6vh, var(--s7));}

/* Yasal metin bağlantıları: telif satırının altında tek sıra. Sayfanın
   kendi bölümlerine değil ayrı belgelere gidiyorlar, o yüzden ürün ve
   ekip sütunlarına karışmıyorlar. */
.foot__legal-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;}
.foot__legal-links a{color:var(--text-3);text-decoration:none;border-bottom:1px solid transparent;}
.foot__legal-links a:hover{color:var(--text);border-bottom-color:var(--paper-blue);}