/* =========================================================
   GENEL
========================================================= */

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #eef0f2;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   ANA KONTEYNER
========================================================= */

#flipbook-container {

    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            #f8f9fa 0%,
            #e9ecef 45%,
            #dfe3e6 100%
        );

}


/* =========================================================
   FLIPBOOK ANA ALANI
=========================================================

   ÖNEMLİ:

   PageFlip bu elementin genişlik/yüksekliğini
   kendisi kullanır.

   Bu nedenle burada flex,
   transform veya zorlayıcı width/height
   hesaplamaları yapmıyoruz.
========================================================= */

#pdf-flipbook {

    position: relative;

    width: min(
        94vw,
        1600px
    );

    height: calc(
        100vh - 95px
    );

    margin: 0 auto;

    transform-origin: center center;

    will-change: transform;

}

#pdf-flipbook {
    visibility: hidden;
}

#pdf-flipbook.flipbook-ready {
    visibility: visible;
}

/* =========================================================
   PAGEFLIP TARAFINDAN OLUŞTURULAN SAYFALAR
========================================================= */

#pdf-flipbook .page {

    background: transparent;

}


/* =========================================================
   PDF SAYFASI
========================================================= */

.pdf-flipbook-sayfa {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.22);

}


/* =========================================================
   PDF CANVAS
========================================================= */

.pdf-flipbook-sayfa canvas {

    display: block;

    width: 100%;
    height: 100%;

}


/* =========================================================
   YÜKLENİYOR
========================================================= */

#pdf-loading {

    position: absolute;

    z-index: 1000;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    color: #343a40;

    text-align: center;

}


/* =========================================================
   SPINNER
========================================================= */

.loading-spinner {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border:
        4px solid
        rgba(0, 0, 0, 0.12);

    border-top-color:
        #495057;

    animation:
        pdf-spin
        0.8s linear infinite;

}


@keyframes pdf-spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   YÜKLENİYOR YAZISI
========================================================= */

.loading-text {

    font-size: 15px;

    color: #495057;

}


/* =========================================================
   KONTROL ÇUBUĞU
========================================================= */

#flipbook-controls {

    position: absolute;

    z-index: 2000;

    left: 50%;
    bottom: 15px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 7px 10px;

    min-height: 42px;

    box-sizing: border-box;

    background:
        rgba(52, 58, 64, 0.94);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 12px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* =========================================================
   BUTON
========================================================= */

.flipbook-btn {

    width: 36px;
    height: 36px;

    padding: 0;

    border: none;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.10);

    color: #ffffff;

    font-size: 21px;

    line-height: 36px;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;

}


.flipbook-btn:hover {

    background:
        rgba(255, 255, 255, 0.22);

}


.flipbook-btn:active {

    transform:
        scale(0.92);

}


.flipbook-btn:disabled {

    opacity: 0.35;

    cursor: default;

    transform: none;

}


/* =========================================================
   SAYFA BİLGİSİ
========================================================= */

.page-info {

    min-width: 70px;

    padding: 0 5px;

    color: #ffffff;

    font-size: 14px;

    text-align: center;

    user-select: none;

}


.page-separator {

    margin:
        0 4px;

    opacity: 0.5;

}


/* =========================================================
   ZOOM BİLGİSİ
========================================================= */

.zoom-info {

    min-width: 45px;

    color: #ffffff;

    font-size: 13px;

    text-align: center;

    user-select: none;

}


/* =========================================================
   AYIRICI
========================================================= */

.control-divider {

    width: 1px;
    height: 24px;

    margin:
        0 4px;

    background:
        rgba(255, 255, 255, 0.18);

}


/* =========================================================
   RESET
========================================================= */

.reset-btn {

    font-size: 18px;

}


/* =========================================================
   FULLSCREEN
========================================================= */

.fullscreen-btn {

    font-size: 19px;

}


/* =========================================================
   HATA
========================================================= */

.pdf-hata {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width:
        min(90%, 500px);

    padding: 25px;

    box-sizing: border-box;

    text-align: center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #721c24;

    background: #f8d7da;

    border:
        1px solid #f5c6cb;

    border-radius: 10px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.20);

}


/* =========================================================
   TAM EKRAN
========================================================= */

#flipbook-container:fullscreen {

    width: 100vw;
    height: 100vh;

}


#flipbook-container:-webkit-full-screen {

    width: 100vw;
    height: 100vh;

}


/* =========================================================
   TAM EKRANDA FLIPBOOK
========================================================= */

#flipbook-container:fullscreen #pdf-flipbook {

    width: 94vw;

    height:
        calc(100vh - 95px);

}


#flipbook-container:-webkit-full-screen #pdf-flipbook {

    width: 94vw;

    height:
        calc(100vh - 95px);

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 768px) {

    #pdf-flipbook {

        width: 94vw;

        height:
            calc(100vh - 75px);

    }


    #flipbook-controls {

        bottom: 8px;

        padding:
            5px 7px;

        gap: 3px;

        border-radius: 10px;

    }


    .flipbook-btn {

        width: 32px;
        height: 32px;

        line-height: 32px;

        font-size: 19px;

    }


    .page-info {

        min-width: 58px;

        font-size: 12px;

    }


    .zoom-info {

        min-width: 38px;

        font-size: 11px;

    }


    .control-divider {

        height: 20px;

        margin:
            0 2px;

    }

}


/* =========================================================
   ÇOK KÜÇÜK EKRAN
========================================================= */

@media (max-width: 480px) {

    #pdf-flipbook {

        width: 96vw;

        height:
            calc(100vh - 70px);

    }


    #flipbook-controls {

        width: auto;

        max-width:
            calc(100% - 16px);

        overflow-x: auto;

    }


    .reset-btn,
    .zoom-info {

        display: none;

    }

}

/* =========================================================
   KAPAK BEYAZLIĞINI GİDERME VE ŞEFFAFLIK
========================================================= */

/* Kütüphanenin kapak açıkken solda oluşturduğu beyaz alanı şeffaf yap */
#pdf-flipbook .stf__wrapper,
#pdf-flipbook .stf__parent,
#pdf-flipbook .stf__block {
    background: transparent !important;
    background-color: transparent !important;
}

/* Sayfanın kendisi dışındaki kapsayıcıları şeffaflaştır */
#pdf-flipbook .page {
    background: transparent !important;
}

/* Sayfaların pürüzsüz görünümü ve donanım ivmelenmesi */
.pdf-flipbook-sayfa {
    background-color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =========================================================
   KAPAK AYRIŞMA VE KATMAN BOZULMA FİXİ
========================================================= */

/* 1. Kütüphanenin kapak açıkken oluşturduğu tüm boşluk ve arka planları şeffaflaştır */
#pdf-flipbook .stf__wrapper,
#pdf-flipbook .stf__parent,
#pdf-flipbook .stf__block {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. Sayfa çevrilirken 3D perspektif kopmasını engelle (Ayrışmayı keser) */
#pdf-flipbook .stf__item {
    perspective: none !important;
    transform-style: flat !important;
}

/* 3. Çevrilen yaprağın ve arka yüzünün birleşik hareket etmesini sağla */
.pdf-flipbook-sayfa {
    background-color: #ffffff !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0); /* Donanım ivmelenmesi ile katmanı kilitler */
}

/* 4. Kapak çevrilirken ortaya çıkan gölge ayrışmasını sıfırla */
#pdf-flipbook .--cover {
    box-shadow: none !important;
}