/* ==========================================================================
   Yayın okuyucusu — hız, sayfa çevirme ve belge (dikey PDF) kipi
   --------------------------------------------------------------------------
   main.css DOSYASINA DOKUNULMAZ. Buradaki kurallar main.css'ten SONRA
   yüklenir (link etiketi templates/yayin/okuyucu.php içinde), bu yüzden aynı
   özgüllükte olanlar onu ezer; ezilen yerler tek tek açıklandı.

   Bölümler:
     1) Kapak yer tutucusu + ilerleme göstergesi
     2) Sayfa çevirme animasyonu (GPU: yalnız transform + opacity)
     3) Belge kipi (tek sütun dikey PDF önizlemesi)
     4) Mobil (390 px) düzeni
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Kapak yer tutucusu — ekran ilk kareden itibaren dolu görünsün
   --------------------------------------------------------------------------
   PDF.js ilk sayfayı çizene kadar sahne bomboştu. Kapak JPEG'i HTML ile
   birlikte gelir; tuval hazır olunca betik bu düğümü kaldırır. */
/* Kapak İLK AÇILIŞTA akışta durur (kitap kapsayıcısı ondan yükseklik alır).
   Gerçek tuval basılacağı an betik `ok-kapak-ustte` sınıfını ekler ve kapak
   mutlak konumlu bir katmana döner: akışta kalsaydı gerçek sayfa geldiğinde
   iki sayfa yan yana görünür, düzen zıplardı.
   (.okuyucu-kitap main.css'te position:relative.) */
.ok-kapak-yer.ok-kapak-ustte {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.ok-kapak-yer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    /* Kapak kendi en-boy oranını korur; sahne yüksekliğini aşmaz */
    max-height: 100%;
    overflow: hidden;
}

.ok-kapak-yer img {
    display: block;
    /* Yüzde yükseklik burada çözülmez (ata yükseklikleri auto/max-height),
       bu yüzden sahnenin gerçek yüksekliğine yakın sabit bir tavan verilir:
       üst şerit + araç çubuğu + alt çubuk ≈ 230 px. */
    max-height: calc(100vh - 230px);
    max-width: 100%;
    width: auto;
    height: auto;
    /* Kapak düşük çözünürlüklü bir yer tutucu: hafif yumuşatma, tuval
       geldiğinde geçiş sert görünmesin */
    filter: saturate(0.96);
}

/* Tuval geldiğinde kapak yumuşak kaybolsun (yalnız opacity → GPU) */
.ok-kapak-yer.ok-solduruluyor {
    opacity: 0;
    transition: opacity 220ms ease-out;
}

/* Kapak varken yükleme perdesi ekranı KAPATMASIN: arkasındaki kapak görünsün,
   kullanıcı neyi beklediğini görsün. main.css'te background:inherit (opak). */
.okuyucu-sahne.ok-kapakli .ok-yukleniyor {
    background: rgba(14, 27, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* İlerleme çubuğu: metin ("%75") tek başına takılı kalmış izlenimi veriyordu;
   ince bir çubuk hareketi görünür kılar. */
.ok-cubuk {
    display: block;
    width: 190px;
    max-width: 60vw;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.ok-cubuk i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--secondary);
    /* width geçişi düzen tetiklemez (kardeşi yok, kapsayıcı sabit genişlikte) */
    transition: width 240ms ease-out;
}

/* --------------------------------------------------------------------------
   2) Sayfa çevirme animasyonu
   --------------------------------------------------------------------------
   Eski sürümün iki kusuru vardı:
     a) Çevrilen yaprak cloneNode(true) ile üretiliyordu; cloneNode CANVAS
        BİTMAP'İNİ TAŞIMAZ, bu yüzden dönen yaprak BOŞ BEYAZDI — animasyon
        "ölü" görünüyordu. Artık tuval drawImage ile kopyalanıyor (JS tarafı).
     b) Geçiş box-shadow'u da animasyonluyordu; gölge her karede yeniden
        boyanır ve 620 ms sürer. Artık YALNIZ transform (kompozitör) ve
        gölge katmanının opacity'si animasyonlanır.

   Süre 620 ms → 420 ms; yavaşlık da ölü hissin bir parçasıydı. */
.ok-cevrilen {
    position: absolute;
    top: 0;
    z-index: 5;
    pointer-events: none;
    /* transform JS'ten yazılır: rotateY(...) — özel özellik geçişi gerekmez,
       transform geçişi her tarayıcıda çalışır. */
    transition: transform 420ms cubic-bezier(0.25, 0.8, 0.35, 1);
    transform: rotateY(0deg);
    backface-visibility: hidden;
    will-change: transform;
    /* Gölge artık geçişte değil; sabit bir taban gölgesi kalır */
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* Sürüklerken parmağı birebir takip etsin: geçiş kapalı */
.ok-cevrilen.ok-suruklenen {
    transition: none;
}

/* Kâğıdın kıvrım gölgesi: ayrı katman, yalnız opacity animasyonlanır.
   pointer-events yok, düzeni etkilemez. */
.ok-golge {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease-out;
    will-change: opacity;
}

.ok-cevir-ileri .ok-golge {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0) 45%);
}

.ok-cevir-geri .ok-golge {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0) 45%);
}

/* Dokunmatikte yatay sürükleme BİZE ait olsun: varsayılan davranışta tarayıcı
   yatay hareketi kendi kaydırmasına alıp sayfa çevirmeyi yutuyordu. Dikey
   kaydırma (sayfanın altındaki paylaş şeridi) serbest kalır. */
.okuyucu-kitap { touch-action: pan-y; }

/* Hareketi azalt: animasyon tamamen kapanır (main.css'teki kural sürüyor,
   burada yeni katman için de kapatılır). */
@media (prefers-reduced-motion: reduce) {
    .ok-cevrilen,
    .ok-golge,
    .ok-kapak-yer.ok-solduruluyor,
    .ok-cubuk i {
        transition: none;
    }
    .ok-cevrilen { display: none; }
}

/* --------------------------------------------------------------------------
   3) Belge kipi — tek sütun dikey PDF önizlemesi
   --------------------------------------------------------------------------
   Kitap motoru (çift sayfa + çevirme) HİÇ yüklenmez. Sahne kaydırılabilir
   olur; sayfalar görünür alana girdikçe çizilir.
   main.css'teki .okuyucu-akis kuralları bu kip için yeniden yazıldı. */
.okuyucu-belge .okuyucu-sahne {
    display: block;
    align-items: flex-start;
    padding: 18px 16px 26px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Kaydırma sırasında tarayıcı adres çubuğu zıplamasın */
    overscroll-behavior: contain;
}

.okuyucu-belge-akis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0 auto;
    /* Genişlik JS'ten --ok-belge-en ile ayarlanır (yakınlaştırma) */
    width: min(var(--ok-belge-en, 860px), 100%);
}

.okuyucu-belge-akis .ok-belge-sayfa {
    position: relative;
    width: 100%;
    background: var(--white);
    border-radius: 3px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
    line-height: 0;
    overflow: hidden;
}

/* Henüz çizilmemiş sayfa: yüksekliği ilk sayfanın en-boy oranından
   hesaplanır, böylece kaydırma çubuğu zıplamaz (düzen kayması olmaz). */
.okuyucu-belge-akis .ok-belge-sayfa.ok-bos::before {
    content: '';
    display: block;
    padding-top: calc(var(--ok-oran, 1.41) * 100%);
    background: linear-gradient(180deg, #f4f6f8 0%, #e9edf1 100%);
}

.okuyucu-belge-akis .ok-belge-sayfa canvas,
.okuyucu-belge-akis .ok-belge-sayfa img {
    display: block;
    width: 100%;
    height: auto;
}

/* Belge kipinde kapak yer tutucusu sütunun ilk kartı gibi AKIŞTA durur;
   ilk sayfa çizilince betik onu kaldırır. (Kitap kipindeki mutlak konumlu
   katman burada gereksiz: sütun zaten dikey, düzen zıplaması olmaz.) */
.okuyucu-belge-akis .ok-kapak-yer {
    width: 100%;
    max-height: none;
    border-radius: 3px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}

.okuyucu-belge-akis .ok-kapak-yer img { width: 100%; max-height: none; }

/* --------------------------------------------------------------------------
   4) Mobil — "mobilde dergi okuma önemli"
   --------------------------------------------------------------------------
   390 px'te tek sayfa, taşma yok, dokunma hedefleri büyür. */
.ok-ipucu-mobil { display: none; }

@media (max-width: 900px) {
    /* Masaüstü ipucu gizli (main.css), mobil ipucu görünür */
    .ok-ipucu-mobil {
        display: block;
        flex: none;
        font-size: 11.5px;
        color: rgba(255, 255, 255, 0.5);
    }

    /* Oklar sayfanın ÜSTÜNE binmesin: dar ekranda kenara yapışır ve
       yarı saydam olur, sayfa genişliği kaybolmaz. */
    .okuyucu-sahne { padding: 10px 8px; }
    .ok-ok { width: 38px; height: 38px; background: rgba(0, 0, 0, 0.35); }
    .ok-ok-sol { left: 4px; }
    .ok-ok-sag { right: 4px; }

    .okuyucu-belge .okuyucu-sahne { padding: 12px 10px 20px; }
    .okuyucu-belge-akis { width: 100%; gap: 10px; }
}

@media (max-width: 480px) {
    .okuyucu-alt {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 12px;
    }

    .ok-sayfa-bilgi { min-width: 74px; font-size: 12.5px; }
    #okKaydirac { min-width: 120px; }

    .ok-ipucu-mobil {
        order: 3;
        width: 100%;
        text-align: center;
    }

    /* Araç çubuğu 390 px'te taşıyordu: düğmeler küçülür, marka daralır */
    .okuyucu-bar { padding: 10px 12px; gap: 10px; }
    .ok-btn { width: 34px; height: 34px; font-size: 13px; }
    .okuyucu-araclar { gap: 5px; }
    .okuyucu-marka img { width: 30px; height: 30px; }
    .okuyucu-marka strong { font-size: 13.5px; max-width: 38vw; }
    .okuyucu-marka span { font-size: 10.5px; }
}

/* Yatay taşma güvenliği: hiçbir kipte gövde yana kaymamalı */
.okuyucu,
.okuyucu-sahne,
.okuyucu-bar,
.okuyucu-alt { max-width: 100%; }

.okuyucu-kitap { max-width: 100%; }