/* Ana sayfa — kalkış hero'su */

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

/* Ana sayfada üst çubuk animasyonun ÜSTÜNDE durur: zemin, bulanıklık ve
   alt çizgi yok. Okunabilirliği .hero-scrim'in üst kenarındaki karartma
   taşıyor. Bu dosya yalnızca ana sayfada yüklendiği için diğer sayfaların
   opak çubuğu etkilenmiyor.

   position:fixed — sticky değil. Sticky belgeyle birlikte akışta durduğu
   için sayfanın en üstünde yukarı kaydırılınca lastik bant esnemesiyle
   birlikte aşağı kayıp yerine oturuyordu. Fixed olunca çubuk hiç oynamıyor.
   Akıştan çıkması sorun değil: paneller zaten fixed ve padding-top taşıyor. */
.topbar{
  position:fixed;top:0;left:0;right:0;
  background:none;
  backdrop-filter:none;
  border-bottom:none;
}

/* Sayfa GÖRSEL OLARAK kaymaz. .hero yalnızca scroll mesafesi sağlar;
   görünen her şey fixed. Scroll kamerayı yükseltir ve panelleri sırayla
   değiştirir — prototipteki (01-pistten-kalkis.html) davranış.
   Panel aralıkları markup'ta data-from / data-to olarak duruyor. */
.hero{position:relative;height:700vh;z-index:1}

.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
.stage .wrap{width:100%}
.panel{
  position:absolute;inset:0;
  display:flex;
  /* Simetrik dolgu: tek yönlü padding-top merkezi 62px aşağı kaydırıyordu.
     `safe`, içerik ekrana sığmadığında ortalamak yerine üstten başlatır —
     yoksa uzun panel iki uçtan birden kırpılırdı. */
  align-items:safe center;
  padding-block:clamp(76px,9vh,92px);
  will-change:opacity,transform;
  opacity:0;visibility:hidden;
}
/* JS yoksa ilk panel görünür kalsın — sayfa boş açılmasın */
.panel:first-child{opacity:1;visibility:visible}
.panel a,.panel button{pointer-events:auto}

.hero-scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  /* Perde yalnızca sahneyi karartır, metni değil (.stage z-index:2).
     Değerler kalkış sahnesi daha canlı görünsün diye hafifletildi;
     metin okunabilirliğini h1/lede üzerindeki text-shadow taşıyor. */
  background:linear-gradient(180deg,rgba(7,4,15,.18) 0,rgba(7,4,15,0) 46%);
}
.hero-scrim::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,4,15,.52) 0%,rgba(7,4,15,.28) 38%,rgba(7,4,15,0) 72%);
}

/* Etiket ile başlık arasına nefes (panellerde .section-head yok) */
.hero .eyebrow{margin-bottom:clamp(24px,3vw,36px)}
.hero h1{margin:0 0 22px;max-width:13ch;text-shadow:0 1px 14px rgba(7,4,15,.95)}
.hero h2{margin:0 0 20px;max-width:15ch;text-shadow:0 1px 14px rgba(7,4,15,.95)}
.hero .lede{text-shadow:0 1px 10px rgba(7,4,15,.95)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* kapanış paneli — ana sayfada ayrı bir footer yok */
.panel .kapanis{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  max-width:640px;
}
.panel .kapanis a{
  font-family:var(--tech);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-dim);text-decoration:none;
}
.panel .kapanis a:hover{color:var(--acc)}
.panel .kapanis .telif{
  font-family:var(--tech);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-faint);width:100%;
}

@media(max-width:720px){
  /* Son panel: metin diğer panellerle birebir aynı yerde ortalansın.
     Bunun için alt bar akıştan çıkarılıp panelin altına sabitleniyor;
     panelin alt dolgusu da alt barın kapladığı yeri boş bırakıyor.
     Masaüstünde alt bar metnin hemen altında akışta kalmaya devam ediyor. */
  /* Dolgu simetrik kalıyor: metin diğer panellerle aynı noktada ortalanıyor. */
  .panel:last-child .kapanis{
    position:absolute;left:var(--gut);right:var(--gut);bottom:26px;
    margin:0;max-width:none;
  }
}
/* Çok kısa ekranda metin ile alt bar birbirine değiyor (320x568'de 2px kalıyordu).
   Orada tam ortalamayı bırakıp çakışmama önceliğe geçiyor. */
@media(max-width:720px) and (max-height:640px){
  .panel:last-child{padding-bottom:180px}
}

/* irtifa göstergesi */
.gauge{
  position:fixed;right:var(--gut);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;
}
.gauge .val{font-family:var(--tech);font-size:11px;letter-spacing:.08em;color:var(--tx-dim);font-variant-numeric:tabular-nums}
.gauge .bar{width:2px;height:160px;background:rgba(214,190,245,.13);position:relative}
.gauge .fill{position:absolute;left:0;bottom:0;width:2px;background:var(--acc);height:0%}
.gauge .karman{position:absolute;left:-7px;width:16px;height:1px;background:rgba(214,190,245,.34);bottom:83%}
.gauge .klabel{
  position:absolute;right:22px;bottom:83%;white-space:nowrap;transform:translateY(50%);
  font-family:var(--tech);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint);
}
@media(max-width:860px){.gauge{display:none}}

.scrollhint{
  position:fixed;left:var(--gut);bottom:34px;z-index:3;pointer-events:none;
  transition:opacity .4s;
  font-family:var(--tech);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-faint);
  display:flex;align-items:center;gap:10px;
}
.scrollhint .ln{width:34px;height:1px;background:currentColor;opacity:.5}


/* --- "pist" kelimesi her geçtiği yerde başka bir yazı karakterinde ---
   Ad üç şey demek: kalkış pisti, yarış pisti, dans pisti. Kelimenin her
   seferinde başka bir yüzle çıkması bu çokluğu görünür kılıyor.
   Yalnızca ana sayfada ve yalnızca sistemdeki üç aileyle — dışarıdan
   font eklenmedi, ek istek yok. Marka kilidi (wordmark) etkilenmez.

   Boyut ve aralık değerleri optik denkleme içindir: aileler aynı punto
   değerinde farklı büyüklükte görünüyor. */
.pist{font-stretch:normal}

/* teknik katman — kokpit göstergesi karakteri */
.pist-tek{
  font-family:var(--tech);
  font-weight:500;
  font-size:.94em;
  letter-spacing:-.005em;
}
/* gövde ailesi — sakin, düz */
.pist-gov{
  font-family:var(--body);
  font-weight:500;
  font-size:1.0em;
  letter-spacing:-.018em;
}