/* ============================================================================
   observer.css  —  ANASAYFA "deck" (yalnız index.html yükler)
   ----------------------------------------------------------------------------
   TEK VİDEO arka plan + 3 metin katmanı. Sürücü: hareket.js [data-obs] bloğu,
   GSAP ScrollTrigger SCRUB — sayfa kaydıkça video.currentTime ilerler, metinler
   sırayla girip çıkar. SCROLL-JACK YOK: sayfa boyunca normal scroll (klavye,
   scrollbar, "sayfa sonu" jesti hepsi tarayıcının kendi davranışı).
   MÜHENDİSLİK: PIN YOK — CSS sticky (.obs-sahne) + scrub, dosya doktrini gereği.
   PROGRESSIVE ENHANCEMENT: bu dosyanın varsayılanı NORMAL AKIŞ — slaytlar poster
   görselin üstünde alt alta 100svh bloklar. JS deck'i devralınca <section>'a
   .obs-hazir eklenir: bölüm uzar (kaydırma payı), .obs-sahne yapışır, slaytlar
   üst üste biner. JS yoksa / reduced-motion'da sayfa sıradan bir sayfa gibi
   scroll edilir, içerik tam görünür kalır.
   Yükleme sırası: tokenlar → tokenlar-ek → temel → atmosfer → hareket → observer
   ============================================================================ */

/* --deck-h : sticky header (68px) deck'in üstünde YER KAPLIYOR → 100svh dersek
              sahne viewport'u taşar, alt köşedeki sayaç/ipucu ekran dışında kalır.
              Gerçek değeri hareket.js ölçüp yazar (resize'da günceller).
   --obs-ust: sahnenin yapışacağı üst ofset = header yüksekliği (JS yazar).
   --obs-pay : kaydırma payı = timeline uzunluğu (deck-h katı). JS yazar; scrub'ın
               toplam yolu bu. Büyütmek videoyu YAVAŞLATIR (aynı video daha çok
               scroll'a yayılır), küçültmek hızlandırır. */
/* padding-block:0 — ŞART, KALDIRMA.
   .obs-deck bir <section> ve temel.css §0 her section'a `padding-block: var(--s-8)`
   (128px) veriyor. Deck'in kendi zemini #05070c olduğu için bu dolgu, videonun
   ÜSTÜNDE ve ALTINDA 128'er piksellik siyah şerit bırakıyordu: sayfanın tepesinde
   header ile videonun arası açık kalıyor, deck biterken de altta aynı şerit
   görünüyordu (ölçüldü: deck top 69px, sahne top 197px). Video `object-fit:cover`
   olduğu için bu şeritler videodan değil, KUTUDAN geliyordu.
   Aynı tuzağa .slogan-sahne'de de düşülmüştü (temel.css'teki `padding-block: 0`
   notuna bak) — sticky sahne barındıran bölümlerde bölüm dolgusu istenmez;
   boşluğu sahnenin kendisi (perde + iç boşluk) taşır. */
.obs-deck { position:relative; background:#05070c; padding-block:0;
            --deck-h:100svh; --obs-ust:0px; --obs-pay:3.6; }

.obs-sahne { position:relative; }

.obs-slayt {
  position:relative; min-height:var(--deck-h); overflow:clip;
  display:grid; align-items:center;
}

/* ── tek, paylaşılan arka plan: poster (LCP) + üstünde video ───────────────── */
.obs-arka { position:absolute; inset:0; z-index:0; overflow:clip; }
.obs-arka .obs-poster, .obs-arka .obs-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Video yalnız JS kaynağı bağlayıp ilk kare çözüldüğünde açılır (.obs-video-hazir).
   O ana kadar poster tek başına görünür → boş/siyah kare yok. */
.obs-arka .obs-video { opacity:0; transition:opacity .6s ease; pointer-events:none; }
.obs-deck.obs-video-hazir .obs-arka .obs-video { opacity:1; }

/* Okunabilirlik perdesi — video/poster ne olursa olsun metin kontrastı sabit.
   İKİ KATMAN:
   1) DİKEY: üstte header, altta sayaç/ipucu bölgesini koyultur; ortada açılır.
   2) YATAY: metin sütunu SOLDA (.wrap, max-width:15ch başlık) → yalnız sol yarı
      koyultulur, sağ yarı açık kalır. Tek dikey perdeyle metni kurtarmak için
      kareyi baştan sona koyultmak gerekiyordu; galaksi görünmez oluyordu.
   Arka plan koyu bir uzay sahnesi olduğu için oranlar eski görsellere göre
   düşürüldü (.86/.42/.90 → .70/.30/.82). Video daha açık bir şeyle değişirse
   buradaki siyah oranlarını yükselt. */
.obs-arka::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:
    /* YATAY: metin sütunu solda → yalnız sol yarı koyu, sağ yarı tamamen açık. */
    linear-gradient(90deg,
      rgba(4,6,12,.58) 0%, rgba(4,6,12,.40) 35%, rgba(4,6,12,0) 62%),
    /* DİKEY: ÜST DURAK ARTIK TAMAMEN SAYDAM. Eskiden üstte %70–86 siyah vardı;
       header zaten TAM OPAK olduğu için ayırmaya gerek yok, üstelik koyu bir uzay
       sahnesinde bu bant "header ile video arasında siyah bir şerit" gibi
       okunuyordu. Yalnız ALT koyultma kaldı — sayaç/ipucu okunsun diye. */
    linear-gradient(180deg,
      rgba(4,6,12,0) 0%, rgba(4,6,12,0) 55%, rgba(4,6,12,.70) 100%);
}

/* ── içerik ────────────────────────────────────────────────────────────────── */
.obs-icerik { position:relative; z-index:1; display:grid; gap:var(--s-3); }
.obs-icerik .eyebrow { color:rgba(255,255,255,.66); }
.obs-baslik {
  font-family:var(--font-display); font-size:var(--t-mega); line-height:.98;
  letter-spacing:-.03em; font-weight:var(--w-ham); color:#fff; max-width:15ch;
}
.obs-baslik b { font-weight:var(--w-kurulmus); }
/* 3. slayt (data-hue="9") başlığı: <b> vurgusu olmadığı için tümü ince kalıyordu;
   diğer slaytlara göre zayıf görünmesin diye tümünü kalın (kurulmuş) yap. */
.obs-deck .obs-slayt[data-hue="9"] .obs-baslik { font-weight:var(--w-kurulmus); }
.obs-icerik .lead { font-size:var(--t-lead); color:rgba(255,255,255,.78); max-width:46ch; }
.obs-icerik .hero-cta { margin-top:var(--s-2); }

/* slayt 2 — üç satırlık söz dizisi */
.obs-satirlar { display:grid; gap:var(--s-2); margin-top:var(--s-2); }
.obs-satir {
  font-family:var(--font-display); font-size:clamp(1.4rem, 1rem + 2.2vw, 2.6rem);
  font-weight:var(--w-orta); color:#fff; display:flex; align-items:center; gap:var(--s-3);
}
/* Çizgiler BEYAZ (istek). Eskiden `--cz-renk` ile satır başına ayrı hue
   alıyorlardı (kırmızı/mavi/magenta); artık üçü de beyaz ve aynı. Bu yüzden
   HTML'deki `.obs-satir` öğelerinden data-hue nitelikleri de kaldırıldı —
   duruyor olsaydı rengin oradan geldiği sanılırdı. */
.obs-satir::before {
  content:""; width:clamp(28px, 5vw, 64px); height:2px; flex:none; border-radius:2px;
  background:#fff; box-shadow:0 0 18px rgba(255,255,255,.55);
}

/* ── sol alt: sayaç · orta alt: ipucu ──────────────────────────────────────── */
.obs-sayac, .obs-ipucu {
  position:absolute; bottom:clamp(18px, 4vh, 44px); z-index:3;
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.obs-sayac { left:clamp(16px, 5vw, 64px); }
.obs-ipucu { left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; }
.obs-ipucu::after {
  content:""; width:1px; height:22px; background:linear-gradient(180deg, #fff, transparent);
}
:root.js-anim:not(.js-reduced) .obs-ipucu::after { animation:obs-ipucu-kay 1.8s ease-in-out infinite; }
@keyframes obs-ipucu-kay { 0%,100% { opacity:.25; transform:translateY(-6px); } 50% { opacity:1; transform:translateY(0); } }

/* ── JS deck'i devraldı: sahne yapışır, slaytlar üst üste ──────────────────── */
/* Bölüm boyu = kaydırma payı. Sahne bu pay boyunca ekranda asılı kalır; scrub
   ilerlemesi 0→1 arası bu yola yayılır. */
.obs-deck.obs-hazir { height:calc(var(--deck-h) * var(--obs-pay)); }
.obs-deck.obs-hazir .obs-sahne {
  position:sticky; top:var(--obs-ust); height:var(--deck-h); overflow:clip;
}
.obs-deck.obs-hazir .obs-slayt { position:absolute; inset:0; min-height:0; }
/* ⚠ .obs-video'ya will-change KOYMUYORUZ — BİLEREK. GERİ EKLEME.
   Burada `will-change:opacity` vardı; gerekçesi "video kompozitör katmanında
   kalsın, her karede yeniden çizilmesin" diye yazılmıştı. Bu gerekçe OYNATILAN
   bir video için doğrudur, SARILAN bir video için TERSTİR: bu deck videoyu
   oynatmıyor, scroll ile sarıyor (video.currentTime) ve her seek YENİ BİR KARE
   üretiyor — yani katmanın her karede yeniden boyanması tam olarak istediğimiz şey.
   Kalıcı will-change öğeyi statik bir kompozitör katmanına sabitliyor; Safari o
   katmanı seek sonrası yeniden boyamayabiliyor ve ekranda son doku takılı kalıyor.
   Belirti: video başta birazcık ilerliyor, sonra donuyor (currentTime ilerlemeye
   devam ettiği için ölçümde sorun GÖRÜNMÜYOR, yalnız ekranda görünüyor).
   Aynı tuzak bu projede bir kez daha yaşandı: hareket.css'te `.slogan`a
   will-change konunca dev ölçekte pikselleşme çıkmıştı (oradaki nota bak).
   Opaklık geçişi (transition .6s) will-change olmadan da çalışıyor; tek seferlik
   bir açılma için kalıcı katman promosyonu zaten gereksizdi. */

/* Normal akış modunda (JS yok / reduced) ipucu anlamsız → gizle. */
.obs-deck:not(.obs-hazir) .obs-ipucu { display:none; }

@media (max-width: 720px) {
  .obs-ipucu { display:none; }
}