/* ============================================================
   MOTION — Faz 3 hareket katmanı (kütüphanesiz)
   Yüklenme sırası: editorial.css SONRASI, pages.css ÖNCESİ.

   TEMEL KURAL: her animasyon SÜSTÜR. İçerik animasyon çalışmasa da
   tam görünür. Bu yüzden gizleyen hiçbir kural koşulsuz yazılmaz;
   hepsi ya @supports ya .motion sınıfı arkasındadır.

   Tarayıcı gerçeği (doğrulandı, 2026-08):
   - Scroll-driven animations: Chrome/Edge 115+, Safari 26+. Firefox YOK.
   - Cross-document View Transitions: Chrome/Edge 126+, Safari 18.2+. Firefox YOK.
   Desteklemeyen tarayıcı sade ama TAM ÇALIŞAN sayfa görür.
   scroll-timeline-polyfill KULLANILMAZ (eksik ve sorunlu).
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. SAYFALAR ARASI GEÇİŞ (cross-document View Transitions)

   Desteklemeyen tarayıcıda hiçbir şey olmaz — normal gezinme.
   Bu yüzden JS'te ayrıca sayfa-çıkış efekti YOK; ikisi çakışırdı.
   ───────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: vt-out .18s var(--ease-soft) both;
    }
    ::view-transition-new(root) {
        animation: vt-in .26s var(--ease) both;
    }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }


/* ─────────────────────────────────────────────────────────────
   2. GİRİŞ AÇILIŞI — [data-reveal]

   Öğe VARSAYILAN OLARAK GÖRÜNÜRDÜR. Gizleme yalnız şu üç koşul
   birden sağlanınca devreye girer:
     a) kullanıcı hareket kısıtlaması istememiş
     b) tarayıcı gerçekten animasyonu çalıştırabiliyor
        (scroll-driven VEYA JS'in eklediği .motion sınıfı)
   Böylece JS kapalıysa veya CSS yarım yüklenirse sayfa boş kalmaz —
   eski kurulumdaki `[data-reveal]{opacity:0}` tam olarak bunu yapıyordu.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

    /* Yol A — Scroll-driven (Chrome/Edge/Safari). En akıcısı, JS yok. */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        [data-reveal] {
            animation: reveal-up auto both;
            /* DİKKAT: kısayoldan SONRA yazılmalı, yoksa kısayol timeline'ı sıfırlar. */
            animation-timeline: view();
            animation-range: entry 0% entry 62%;
        }
    }

    /* Yol B — IntersectionObserver yedeği (Firefox).
       .motion sınıfını JS ekler; yoksa bu kurallar hiç uygulanmaz. */
    @supports not ((animation-timeline: view()) and (animation-range: entry)) {
        .motion [data-reveal] {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .55s var(--ease), transform .55s var(--ease);
        }
        .motion [data-reveal].revealed {
            opacity: 1;
            transform: none;
        }
    }
}

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}


/* ─────────────────────────────────────────────────────────────
   3. HERO GÖRSELİ — kaydırdıkça hafif ölçeklenme

   scroll() zaman çizelgesi kullanılır (view() değil): hero sayfa
   açılışında ZATEN görünür durumda, giriş aralığı hiç çalışmazdı.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: scroll()) and (animation-range: entry)) {
        .hero-bg {
            animation: hero-drift auto linear both;
            animation-timeline: scroll();
            animation-range: 0 100vh;
            will-change: transform;
        }
    }
}

@keyframes hero-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}


/* ─────────────────────────────────────────────────────────────
   4. SAÇ TELİ AYRAÇ — kaydırınca soldan sağa çizilir
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .hair {
            animation: hair-draw auto linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }
}

@keyframes hair-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}


/* ─────────────────────────────────────────────────────────────
   5. KÜNYE — hücreler sırayla açılır

   Ayrı zaman çizelgesi yerine hücrelere kademeli gecikme verilir;
   künye tek blok olarak görünüme girer, hücreler içinde sıralanır.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .kunye {
            view-timeline: --kunye;
        }
        .kunye-cell {
            animation: reveal-up auto both;
            animation-timeline: --kunye;
            animation-range: entry 10% entry 70%;
        }
        .kunye-cell:nth-child(2) { animation-range: entry 16% entry 76%; }
        .kunye-cell:nth-child(3) { animation-range: entry 22% entry 82%; }
        .kunye-cell:nth-child(4) { animation-range: entry 28% entry 88%; }
    }
}


/* ─────────────────────────────────────────────────────────────
   6. HAREKET KISITLAMASI — her şeyi kapat
   base.css'teki genel kurala ek olarak, bu katmanın kendi
   zaman çizelgelerini de açıkça iptal eder.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    .hair,
    .kunye-cell,
    .hero-bg {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   7. content-visibility KALDIRILDI

   Denendi ve GERİ ALINDI. `content-visibility: auto` ekran dışı
   bölümlerin oluşturulmasını erteliyor, ama gerçek yükseklik ancak
   bölüm görünüme girince öğreniliyor. Bu sitede bölüm yükseklikleri
   çok değişken (400px ile 1500px arası); `contain-intrinsic-size`
   tahmini tutmadığı için sayfa uzunluğu kaydırma sırasında sürekli
   değişiyor ve kaydırma çubuğu zıplıyor. Derin bağlantılar (#hizmetler
   gibi) da yanlış yere gidiyor.

   Performans kazancının neredeyse tamamı görsellerden geldi
   (AVIF + erteleme + srcset: 395 KB -> 95 KB). Kaydırmayı bozan bir
   özelliği marjinal bir kazanç için tutmak doğru takas değil.
   ───────────────────────────────────────────────────────────── */