/* Ekran Gecis Efektleri - Oynatici ve Yonetim Paneli Onizlemesi Ortak Kullanir */
/* Sadece transform, opacity ve clip-path kullanilir (Android TV WebView'de GPU hizlandirmali) */

:root {
    --gecis-suresi: 800ms;
}

.gecis-kapsayici {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 1600px;
}

.gecis-katmani {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation-duration: var(--gecis-suresi);
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

/* Giren katman her zaman ustte */
.gecis-katmani[class*="giris-"] { z-index: 2; }
.gecis-katmani[class*="cikis-"] { z-index: 1; }

/* ---------- SOLMA (Crossfade) ---------- */
.giris-Solma { animation-name: solmaGiris; }
.cikis-Solma { animation-name: solmaCikis; }
@keyframes solmaGiris { from { opacity: 0; } to { opacity: 1; } }
@keyframes solmaCikis { from { opacity: 1; } to { opacity: 0; } }

/* ---------- YATAY KAYMA ---------- */
.giris-SolaKayma { animation-name: sagdanGiris; }
.cikis-SolaKayma { animation-name: solaCikis; }
.giris-SagaKayma { animation-name: soldanGiris; }
.cikis-SagaKayma { animation-name: sagaCikis; }
@keyframes sagdanGiris { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes solaCikis { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes soldanGiris { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sagaCikis { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ---------- DIKEY KAYMA ---------- */
.giris-YukariKayma { animation-name: alttanGiris; }
.cikis-YukariKayma { animation-name: yukariCikis; }
.giris-AsagiKayma { animation-name: usttenGiris; }
.cikis-AsagiKayma { animation-name: asagiCikis; }
@keyframes alttanGiris { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes yukariCikis { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes usttenGiris { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes asagiCikis { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ---------- PERDE (Silme / Wipe) ---------- */
.giris-YatayPerde { animation-name: yatayPerdeGiris; }
.cikis-YatayPerde { animation-name: sabitKal; }
.giris-DikeyPerde { animation-name: dikeyPerdeGiris; }
.cikis-DikeyPerde { animation-name: sabitKal; }
@keyframes yatayPerdeGiris { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dikeyPerdeGiris { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sabitKal { from { opacity: 1; } to { opacity: 1; } }

/* ---------- YAKINLASMA / UZAKLASMA ---------- */
.giris-Yakinlasma { animation-name: yakinlasmaGiris; }
.cikis-Yakinlasma { animation-name: yakinlasmaCikis; }
.giris-Uzaklasma { animation-name: uzaklasmaGiris; }
.cikis-Uzaklasma { animation-name: uzaklasmaCikis; }
@keyframes yakinlasmaGiris { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes yakinlasmaCikis { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.15); } }
@keyframes uzaklasmaGiris { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes uzaklasmaCikis { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.85); } }

/* ---------- 3D KART CEVIRME ---------- */
.giris-YatayCevirme { animation-name: yatayCevirmeGiris; }
.cikis-YatayCevirme { animation-name: yatayCevirmeCikis; }
.giris-DikeyCevirme { animation-name: dikeyCevirmeGiris; }
.cikis-DikeyCevirme { animation-name: dikeyCevirmeCikis; }
@keyframes yatayCevirmeGiris {
    0%, 50% { transform: rotateY(-90deg); opacity: 0; }
    51% { opacity: 1; }
    100% { transform: rotateY(0); opacity: 1; }
}
@keyframes yatayCevirmeCikis {
    0% { transform: rotateY(0); opacity: 1; }
    50% { transform: rotateY(90deg); opacity: 1; }
    51%, 100% { transform: rotateY(90deg); opacity: 0; }
}
@keyframes dikeyCevirmeGiris {
    0%, 50% { transform: rotateX(90deg); opacity: 0; }
    51% { opacity: 1; }
    100% { transform: rotateX(0); opacity: 1; }
}
@keyframes dikeyCevirmeCikis {
    0% { transform: rotateX(0); opacity: 1; }
    50% { transform: rotateX(-90deg); opacity: 1; }
    51%, 100% { transform: rotateX(-90deg); opacity: 0; }
}

/* ---------- YONETIM PANELI ONIZLEME KUTUSU ---------- */
.efekt-onizleme-kutu {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    background: #000;
}
.efekt-demo-kart {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}