/* ==========================================================================
   scroll-intro.css — kaydırmayla ilerleyen açılış bölümü

   NE DEĞİŞTİ, NEDEN
   Açılış eskiden `<video>` etiketiydi; kaydırmayla sarmak sunucunun HTTP
   Range desteğine bağlıydı ve her aramada kod çözücü önceki anahtar
   kareden başlıyordu. Yerinde kare dizisi var: kaydırma doğrudan bir dizi
   indisine dönüşüyor.

   Kareler OPAK. Bir ara saydamdılar, sonra depo sahibi videonun orijinal
   hâliyle kullanılmasını istedi ve zemin geri geldi. İki tema da aynı
   kareleri kullanıyor: koyu temada videonun zemini sayfanınkiyle
   neredeyse kusursuz karışıyor, açık temada dikdörtgen bir koyu alan
   olarak duruyor.

   YAZI KARENİN ÜSTÜNDE DEĞİL
   Metin robotun ÜSTÜNE binmiyor; iki sütunlu bir düzende solda duruyor.
   Kaydırma ilerledikçe aşamalar değişiyor, robot da aynı kaydırmayla
   dönüyor. Dar ekranda sütunlar alt alta geçiyor: robot üstte, yazı
   altta — yine üst üste binmiyorlar.

   CLS
   Tuvalin oranı sabit (`aspect-ratio`), yani kareler inmeden önce de yeri
   ayrılmış oluyor ve altındaki hiçbir şey kaymıyor.
   ========================================================================== */

.sintro {
    position: relative;
    /* Kaydırma yolu. 100vh yapışkan pencere + geri kalanı ilerleme payı. */
    height: 440vh;
    /* Karenin ÜST kenar rengi (ölçüldü: rgb(15,18,37) / rgb(10,18,35)).
       Kare tam kapladığı için normalde görünmüyor; kaydırma sırasında
       bir piksellik boşluk oluşursa beyaz parlamasın diye. */
    background: #0e1124;
}

.sintro-sahne {
    position: sticky;
    top: 0;
    /* `dvh` iOS'ta adres çubuğu açılıp kapanırken yüksekliği doğru veriyor;
       `vh` orada en büyük yüksekliği sayıyor ve içerik alttan taşıyor.
       Sıra önemli: `dvh` bilmeyen tarayıcı ilkini kullanıyor. */
    height: 100vh;
    height: 100dvh;
    display: grid;
    align-items: center;
    overflow: hidden;
}

.sintro-ic {
    width: min(1240px, 92vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    /* Yazı karenin ÜSTÜNDE duruyor; kare artık tam kaplayan bir zemin. */
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   ROBOT — kare dizisi, SAHNEYİ TAM KAPLIYOR

   Önce 620 px'lik bir kutu içindeydi. Kareler opak olduğu için o kutu
   ekranda DİKDÖRTGEN olarak okunuyordu: yanlarda ve üstte keskin bir kenar.
   Depo sahibi "full kaplasın, kare gibi durmasın" dedi.

   Şimdi kare sahnenin tamamını kaplıyor (`object-fit: cover`), yani hiçbir
   kenarı yok. Kadraj da buna göre değişti: robotun çevresine kırpılmış
   1310x1077 yerine kaynağın TAMAMI, 16:9.
   -------------------------------------------------------------------------- */
.sintro-robot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sintro-ilk,
.sintro-tuval {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* `cover`: sahne hangi oranda olursa olsun kenar boşluğu kalmıyor.
       `object-position` robotu merkeze alıyor — dar ekranda kırpma
       yanlardan oluyor ve robot kadrajda kalıyor. */
    object-fit: cover;
    object-position: 56% 50%;
}

.sintro-tuval { opacity: 0; }
.sintro-hazir .sintro-tuval { opacity: 1; }
.sintro-hazir .sintro-ilk { opacity: 0; }

/* YAZI PERDESİ — tam ekran karartma DEĞİL, yalnızca yazının olduğu yer.
   Karenin sol tarafı zaten koyu ama robot yaklaştıkça parlıyor; perde
   olmadan üç aşamanın kontrastı kaydırma boyunca değişiyor. Sağa doğru
   tamamen sönüyor, yani robotun üstüne gri bir tabaka binmiyor. */
.sintro-robot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                rgba(8, 10, 24, .88) 0%,
                rgba(8, 10, 24, .74) 24%,
                rgba(8, 10, 24, .30) 44%,
                rgba(8, 10, 24, 0) 60%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   YAZI — üç aşama, aynı kutuda sırayla
   Hepsi üst üste konumlanıyor ki aşama değişirken altındaki bölüm kaymasın.
   Kutunun yüksekliği en uzun aşamaya göre ayrılıyor (`min-height`), yoksa
   dil değişince yükseklik oynar ve robot yerinden kayardı.
   -------------------------------------------------------------------------- */
.sintro-yazi {
    position: relative;
    min-height: 14rem;
}

.sintro-adim {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    opacity: 0;
    translate: 0 14px;
    transition: opacity 520ms var(--ease-out, ease), translate 520ms var(--ease-out, ease);
    pointer-events: none;
}

.sintro-adim.is-acik {
    opacity: 1;
    translate: 0 0;
}

/* RENKLER TEMA TOKEN'INDAN DEĞİL.
   Bant artık HER ZAMAN koyu: üstünde videonun kendi zemini var. `--text`
   kullansaydım açık temada koyu gri yazı koyu videonun üstüne düşerdi ve
   okunmazdı. `--on-brand` zaten "koyu marka yüzeyi üstündeki metin" için
   var; bant da öyle bir yüzey. */
.sintro-adim b {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--on-brand, #fff);
}

.sintro-adim span {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 36ch;
}

/* Aşama sayacı: kaç aşamadan kaçıncısındayız. Süs değil, konum bilgisi. */
.sintro-sayac {
    position: absolute;
    left: 0;
    bottom: -2.75rem;
    display: flex;
    gap: .4rem;
}

.sintro-sayac i {
    width: 1.75rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    transition: background-color 320ms var(--ease-out, ease);
}

.sintro-sayac i.is-acik { background: var(--on-brand, #fff); }

/* --------------------------------------------------------------------------
   DAR EKRAN — robot üstte, yazı altta. Üst üste binme yok.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .sintro { height: 320vh; }

    .sintro-ic {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        text-align: center;
    }

    /* ÇEREZ BANDI İÇİN PAY — sabit değil, ÖLÇÜLEN yükseklik.
       Band `position: fixed; bottom: 16px` ve dar ekranda dikey yığılıp
       234 px oluyor; ölçüldü: açılışın ilk cümlesini örtüyordu. Sabit bir
       pay verdiğimde hâlâ %28'i kalıyordu, daha büyük sabit pay ise band
       kapandıktan sonra kalıcı olarak yer harcardı.
       `scroll-intro.js` bandı ölçüp `--si-band`e yazıyor ve band kapanınca
       sıfırlıyor; JS yoksa 0 kalıyor, o zaman da açılış zaten sade hâlde. */
    .sintro-sahne { padding-block-end: var(--si-band, 0px); }

    /* DAR EKRANDA KARE TAMAMEN GÖRÜNÜYOR.
       Önce burada da `cover` vardı: ekran dikey, kare 16:9, dolayısıyla
       genişliğin dörtte üçü kırpılıyordu ve robot yarım görünüyordu.
       Şimdi `contain` — kare tam genişliğe oturuyor ve KIRPILMIYOR.

       Kutu okunmasın diye kare sahnenin ÜSTÜNE, tam genişlikte yaslanıyor:
       solda, sağda ve üstte kenar yok. Altta kalan tek kenar da bölümün
       kendi zeminine sönerek bağlanıyor (aşağıdaki perde). */
    /* Kare dar ekranda MUTLAK DEĞİL, akışta. Böylece kare ile yazı sahnenin
       ızgarasında iki satır oluyor ve ikisi birlikte ortalanıyor —
       `top: 22vh` gibi sihirli sayılarla uğraşmaya gerek kalmıyor,
       yükseklik değişince de kendiliğinden doğru kalıyor. */
    .sintro-robot {
        position: static;
        width: 100%;
        height: auto;
        /* Telefon setinin kendi oranı (700x576), masaüstünün 16:9'u değil. */
        aspect-ratio: 700 / 576;
    }

    .sintro-sahne {
        align-content: center;
        row-gap: 3.5vh;
    }

    .sintro-ilk,
    .sintro-tuval {
        object-fit: contain;
        object-position: center center;
    }

    /* Perde artık karartma değil, DİKİŞ GİZLEME: karenin alt kenarı
       bölümün zeminine sönerek bağlanıyor, böylece orada düz bir çizgi
       kalmıyor. Üst üçte iki hiç dokunulmadan duruyor. */
    .sintro-robot::after {
        background: linear-gradient(180deg,
                    rgba(14, 17, 36, 0) 62%,
                    rgba(14, 17, 36, .55) 82%,
                    rgba(14, 17, 36, .92) 94%,
                    #0e1124 100%);
    }

    .sintro-yazi { min-height: 11rem; }

    .sintro-adim {
        align-items: center;
        gap: .55rem;
    }

    .sintro-adim span { max-width: 34ch; }

    .sintro-sayac {
        left: 50%;
        translate: -50% 0;
        bottom: -2.25rem;
    }
}

@media (max-width: 480px) {
    .sintro { height: 290vh; }
    .sintro-yazi { min-height: 12.5rem; }
}

/* --------------------------------------------------------------------------
   AZALTILMIŞ HAREKET
   Kaydırmaya bağlı kare değişimi tamamen kapanıyor: `scroll-intro.js` hiç
   başlamıyor, tek kare (<img>) görünür kalıyor. Bölüm de tek ekrana
   iniyor — 440vh'lik boş kaydırma yolu, hiçbir şeyin değişmediği bir
   sayfada yalnızca bir engeldir. Üç aşamanın hepsi birden görünür oluyor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sintro { height: auto; }

    .sintro-sahne {
        position: static;
        /* Sahne artık yüksekliğini kendi içeriğinden almıyor (robot mutlak
           konumlu). Kareye 16:9 oranında yer ayrılıyor ki yazı onun üstüne
           binsin ve bölüm kapanmasın. */
        height: auto;
        min-height: min(56.25vw, 640px);
        padding: 3rem 0;
        padding-block-end: 3rem;
    }

    .sintro-yazi {
        min-height: 0;
        display: grid;
        gap: 1.75rem;
    }

    .sintro-adim {
        position: static;
        opacity: 1;
        translate: none;
        transition: none;
    }

    .sintro-sayac { display: none; }
}