/**
 * NEO SERVİS — hareket katmanı (2026-08-17)
 * ========================================================================
 *
 * Sitenin görünüşünü değil, DAVRANIŞINI değiştiren ek katman. stil.css'e hiç
 * dokunmaz; `inc/hareket.php` çağrısı ust.php'den silinince site bu dosyadan
 * önceki hâline birebir döner. Bu yüzden buraya renk/ölçü/yerleşim kuralı
 * yazma — yalnızca geçiş, opaklık ve dönüşüm.
 *
 * Doz "ölçülü" seçildi (kullanıcı kararı): kısa mesafe (14px), tek seferlik,
 * 0.5 sn. Uzun süzülme ve büyük mesafe sayfayı yavaş hissettiriyor; burası bir
 * onarım servisi sitesi, hareketin işi dikkat çekmek değil sıralamayı
 * okunur kılmak.
 *
 * DÖRT KURAL — bozma:
 * 1. Gizleme daima `html.hareket` altında. Sınıfı ust.php'deki satır içi betik
 *    ilk boyamadan ÖNCE ekler; JS çalışmıyorsa sınıf hiç eklenmez ve tek bir
 *    öge bile gizlenmez. Gizlemeyi bu sınıftan koparma, içerik kaybolur.
 * 2. `.kahraman`, `.tezgah` ve `.sihirbaz` bu katmanın DIŞINDA. Üçünün de kendi
 *    hareket mantığı var (giriş perdesi, kaydırmayla sürülen video, adım
 *    değişimi); üstlerine ikinci bir opacity/transform binerse çakışıyorlar.
 * 3. `transform` yeni bir kapsayıcı blok yaratır: `position: sticky` olan
 *    ögeye (`.yazi-yan`) uygulanırsa yapışma ölür. Listeden bilerek dışlandı.
 * 4. Hareket azaltma isteyen ziyaretçide bu dosyanın tamamı devre dışı —
 *    `html.hareket` zaten eklenmiyor. Ayrıca en altta ikinci bir emniyet var.
 */


/* == 1 Görünüme girerken açılma =========================================== */

/* Liste kısa tutuldu: sayfayı taşıyan ızgaralar ve bölüm başlıkları. Her yeni
   kutuya reveal vermek "her şey oynuyor" hissi yaratıyor; hareketin değeri
   seçici olmasından geliyor. :where() ile özgüllük 0 — stil.css'teki hiçbir
   kuralı ezmez, sadece kendi iki özelliğini yazar. */
html.hareket :where(
    .bolum-basi,
    .kutu-ag > *,
    .bilgi-ag > *,
    .hizmet-ag > *,
    .yazi-ag > *,
    .bolge-ag > *,
    .cihaz-ag > *,
    .katalog-ag > *,
    .surec > *,
    .ikili-duzen > *:not(.yazi-yan)
) {
    opacity: 0;
    transform: translateY(14px);
}

html.hareket :where(.bolum-basi, .kutu-ag > *, .bilgi-ag > *, .hizmet-ag > *,
                    .yazi-ag > *, .bolge-ag > *, .cihaz-ag > *, .katalog-ag > *,
                    .surec > *, .ikili-duzen > *:not(.yazi-yan)).gorundu {
    opacity: 1;
    transform: none;
    /* Yumuşama eğrisi sonda uzun kuyruklu (.36,1): hareket durmadan önce
       yavaşlıyor, "yerine oturdu" hissi veriyor. */
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1) var(--gecikme, 0s),
                transform .5s cubic-bezier(.22, .61, .36, 1) var(--gecikme, 0s);
}

/* Izgara kardeşleri sırayla giriyor. Üç adımda duruyor: dördüncü karttan sonra
   gecikme büyümeye devam ederse dokuz kartlık katalogda son kart yarım saniye
   geç kalıyor ve ziyaretçi bekliyor. */
html.hareket :where(.kutu-ag, .bilgi-ag, .hizmet-ag, .yazi-ag, .bolge-ag,
                    .cihaz-ag, .katalog-ag, .surec) > :nth-child(2) { --gecikme: .07s; }
html.hareket :where(.kutu-ag, .bilgi-ag, .hizmet-ag, .yazi-ag, .bolge-ag,
                    .cihaz-ag, .katalog-ag, .surec) > :nth-child(3) { --gecikme: .14s; }
html.hareket :where(.kutu-ag, .bilgi-ag, .hizmet-ag, .yazi-ag, .bolge-ag,
                    .cihaz-ag, .katalog-ag, .surec) > :nth-child(n + 4) { --gecikme: .18s; }


/* == 2 Sayfalar arası geçiş =============================================== */

/* View Transitions: gezinmede beyaz sıçrama yerine kısa bir çapraz sönme.
   Tek kural, kütüphane yok; desteklemeyen tarayıcı kuralı görmezden gelir ve
   gezinme her zamanki gibi çalışır. 180 ms bilerek kısa — sayfa geçişini
   yavaşlatmak, hızlı görünmesini sağlamaktan daha kötü. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}


/* == 3 Cihaz kartında hareketli önizleme ================================== */

/* Ana sayfadaki üç cihaz kartı. Üzerine gelince (ya da dokununca) fotoğrafın
   yerini o cihazın kendi klibi alıyor; klip kartın dışına çıkmıyor, sesi yok.
   Klip .cihaz-resim'in içine mutlak konumla biniyor — böylece kartın yüksekliği
   hiç değişmiyor, ızgara oynamıyor.
   Yükleme betikte tembel: dosya ancak ilk kez üzerine gelindiğinde iniyor
   (bkz. hareket.js), yoksa ana sayfa üç video birden indirirdi. */
.cihaz-resim { position: relative; }

.cihaz-onizleme {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .32s ease;
    pointer-events: none;
}

/* Sınıfı betik veriyor: yalnızca klip gerçekten oynamaya başladıysa açılıyor.
   Doğrudan :hover'a bağlansaydı klip yüklenene kadar kart boş görünürdü. */
.cihaz-kart .cihaz-onizleme.oynuyor { opacity: 1; }

/* Fotoğraf altta kalıyor ve silinmiyor: klip inemezse (yavaş bağlantı, veri
   tasarrufu, autoplay engeli) kart hiçbir şey kaybetmiyor. */


/* == 4 Mikro-etkileşimler ================================================= */

/* Kart görselinde çok hafif yakınlaşma. 1.04 sınır: daha fazlası fotoğrafı
   yumuşatıyor ve object-fit kırpması cihazın kenarını yiyor. */
.cihaz-kart .cihaz-resim img,
.yazi-kart .yazi-resim img {
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.cihaz-kart:hover .cihaz-resim img,
.yazi-kart:hover .yazi-resim img { transform: scale(1.04); }

/* Klip oynarken fotoğrafı da büyütmek iki katmanı üst üste kaydırıyor. */
.cihaz-kart:has(.cihaz-onizleme.oynuyor) .cihaz-resim img { transform: none; }

/* Ölçüm rakamları sayarken sayı genişledikçe satır zıplıyordu. Rakamlar tablo
   hizalı: her basamak aynı genişlikte, satır sabit kalıyor. */
html.hareket :where(.olcum, .sayfa-olcum, .sonuc-olcu) dt { font-variant-numeric: tabular-nums; }


/* == 5 Emniyet ============================================================ */

/* html.hareket zaten eklenmiyor ama katman ileride başka bir yerden açılırsa
   diye ikinci kilit. Hareket azaltma isteği bir tercih değil erişilebilirlik
   gereği: vestibüler rahatsızlıkta kayan içerik baş dönmesi yapıyor. */
@media (prefers-reduced-motion: reduce) {
    html.hareket :where(
        .bolum-basi, .kutu-ag > *, .bilgi-ag > *, .hizmet-ag > *, .yazi-ag > *,
        .bolge-ag > *, .cihaz-ag > *, .katalog-ag > *, .surec > *,
        .ikili-duzen > *
    ) {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cihaz-onizleme { display: none; }
    .cihaz-kart:hover .cihaz-resim img,
    .yazi-kart:hover .yazi-resim img { transform: none; }
    @view-transition { navigation: none; }
}