/*
   MUSTERI TARAFI — SAYFA CEVIRME (YAPRAK) GECISI
   ==============================================

   Defterde yaprak cevirmek gibi: mentese SIRTTA, yani sayfanin bir KENARINDA.

     ILERI  — acik sayfa SOL kenarindan doner ve gider; yeni sayfa ayni kenardan
              acilarak gelir. (Kitapta sagdaki yapragi sola cevirmek.)
     GERI   — ayni hareket ters yonde: mentese SAG kenardadir.

   Cevirme JAVASCRIPT ILE surulur (wwwroot/js/musteri.js): tiklama yakalanir, once
   cikis animasyonu oynar, sonra gezinme yapilir; yeni sayfa da giris animasyonuyla
   acilir. Yon, sekmeye birakilan kisa omurlu bir isaretle tasinir.

   NEDEN VIEW TRANSITIONS API DEGIL:
   Once o kullaniliyordu (tarayicinin yerlesik gecisi). Iki sorunu vardi:
     1. Yalniz Chrome/Edge ve Safari 18+ destekliyor; Firefox'ta hicbir sey olmuyordu.
     2. Isletim sisteminde "animasyonlari kapat" acikken tarayici gecisi hic
        baslatmiyordu — gelistirme makinesinde animasyon HIC gorunmedi.
   Buradaki yontem sade CSS animasyonu oldugu icin her tarayicida ayni calisir.

   NEDEN AYRI DOSYA (site.css'te DEGIL):
   site.css'i YONETIM tarafi da yukluyor. Buradaki kurallar yalnizca musteri
   duzeninden (_Layout.cshtml) baglanir, admin ekranlarina hic bulasmaz.

   BURADA MEDIA QUERY YOKTUR (kurallar.md §4.2).

   SURE: asagidaki .38s degeri js/musteri.js'teki SURE sabitiyle AYNI olmali —
   ikisi ayrisirsa ya sayfa animasyon bitmeden degisir ya da bosuna beklenir.
*/

/* Sahne: 3B derinlik ebeveynden gelir. Yapragin kendi `transform`'una
   `perspective()` yazilsaydi kacis noktasi mentesenin uzerine duserdi ve
   donme yamuk gorunurdu. */
.musteri-icerik {
    perspective: 1800px;
    /* Bekleme katmani bu alani kaplasin diye. */
    position: relative;
}

/* Cevrilen yaprak: icerik alani. Yan serit ve ust cubuk DONMEZ — defterin
   kapagi ve sirti yerinde durur, yalnizca yaprak cevrilir. */
.musteri-govde {
    backface-visibility: hidden;
}

/* --- HAREKETIN OLCUSU: 90 DERECE, 180 DEGIL ---

   Yaprak yarim tur atar (0 -> 90), gelen yaprak da yarim turdan gelir (90 -> 0).
   Onceden ikisi de 180 derece donuyordu; ama sayfa 90 dereceyi gecince
   `backface-visibility: hidden` yuzunden gorunmez oluyordu — yani her animasyonun
   YARISI BOS EKRANDA geciyordu ve arada gozle gorulur bir bosluk kaliyordu.
   90 derecede durunca butun sure gorunur harekete gider, gecis akici olur.

   YUMUSAKLIK: cikis hizlanarak biter, giris ayni hizla baslar. Iki egri bu yuzden
   birbirinin devami secildi — takas aninda hiz kirilmaz, tek bir savurma gibi durur.

   GOLGE: yaprak dikleserek kararir, duzlesirken acilir. Duz bir donus "kayma" gibi
   duruyordu; isigin degismesi kagit izlenimini veren sey.
*/

/* --- ILERI: mentese SOL kenarda --- */

.musteri-govde.yaprak-cikis-ileri {
    transform-origin: left center;
    animation: yaprak-cik-ileri .38s cubic-bezier(.55, .06, .68, .19) forwards;
}

.musteri-govde.yaprak-giris-ileri {
    transform-origin: left center;
    animation: yaprak-gel-ileri .38s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes yaprak-cik-ileri {
    from { transform: rotateY(0deg);   filter: brightness(1); }
    to   { transform: rotateY(-90deg); filter: brightness(.78); }
}

@keyframes yaprak-gel-ileri {
    from { transform: rotateY(90deg); filter: brightness(.78); }
    to   { transform: rotateY(0deg);  filter: brightness(1); }
}

/* --- GERI: mentese SAG kenarda --- */

.musteri-govde.yaprak-cikis-geri {
    transform-origin: right center;
    animation: yaprak-cik-geri .38s cubic-bezier(.55, .06, .68, .19) forwards;
}

.musteri-govde.yaprak-giris-geri {
    transform-origin: right center;
    animation: yaprak-gel-geri .38s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes yaprak-cik-geri {
    from { transform: rotateY(0deg);  filter: brightness(1); }
    to   { transform: rotateY(90deg); filter: brightness(.78); }
}

@keyframes yaprak-gel-geri {
    from { transform: rotateY(-90deg); filter: brightness(.78); }
    to   { transform: rotateY(0deg);   filter: brightness(1); }
}

/* --- BEKLEME KATMANI ---

   Yeni sayfa gecikirse cikar. CERCEVEYI kaplar, ekrani degil: musteri arayuzu
   30rem'lik bir cerceve icinde yasiyor, butun ekrani ortmek cercevenin
   disindaki "masayi" da kaplardi.

   Hizli acilan sayfada HIC gorunmez: JavaScript onu gezinme baslamasindan bir
   sure SONRA aciyor; yeni belge o ana kadar gelirse zamanlayici zaten olur.
   `display` degil `opacity` kullanilmasinin sebebi de bu: yanip sonen bir
   katman yerine kisa bir solma. */
.musteri-bekleme {
    position: absolute;
    inset: 0;
    z-index: 1080;   /* Bootstrap'in yapiskan ust cubugunun (1020) uzerinde */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out;
}

.musteri-bekleme.gorunur {
    opacity: 1;
    pointer-events: auto;
}