/* Container - FLEXBOX CENTERING */
.mf-container {
    width: 100%; 
    height: 100%; 
    display: flex; /* Critical change for centering */
    align-items: center; /* Center Vertically */
    justify-content: center; /* Center Horizontally */
    position: relative;
    perspective: 3000px;
    overflow: hidden; 
    background-color: transparent;
}

/* --- BOOK CORE --- */
.mf-book {
    position: relative; /* Changed from absolute to relative for flexbox */
    /* Top/Left/Translate removed because Flexbox handles it */
    
    transform-style: preserve-3d;
    z-index: 1;
    /* Initial size is 0, controlled by media queries */
}

/* Sheets */
.mf-sheet {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d; cursor: grab;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.mf-sheet.is-flipping { 
    transition: none !important; 
    cursor: grabbing;
    z-index: 5000 !important; 
}

.mf-sheet.flipped { transform: rotateY(-180deg); }

.mf-page {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
    backface-visibility: hidden; background-color: white;
    border-radius: 2px 5px 5px 2px;
}
.mf-front { z-index: 2; background-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 5%); }
.mf-back { transform: rotateY(180deg); background-image: linear-gradient(to left, rgba(0,0,0,0.1) 0%, transparent 5%); box-shadow: -5px 0 15px rgba(0,0,0,0.1); }

/* --- DESKTOP MODES --- */
@media (min-width: 801px) {
    .mf-mode-fullscreen .mf-book {
        height: 90vh;
        width: calc(90vh / 1.414); 
        max-width: 45vw; 
        /* Flexbox centers this block. 
           Since .mf-book is the "Right Page" anchor, 
           Wait... if we center the Right Page, the Spine is in the center? No.
           The Right Page center is in the center of screen.
           We want the SPINE in the center.
           So .mf-book needs to be offset to the right?
           No, .mf-book represents the Right Page. 
           We need to shift it LEFT by half its width to put the spine in center?
           Actually, easier: Use margin-right: auto? No.
           
           Let's just keep absolute positioning for Desktop because Spine Logic is specific.
           Reverting .mf-book to absolute for Desktop ONLY.
        */
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(0, -50%); /* X:0 because Left:50% is the Spine */
        /* Wait, if I don't translate X, the element starts at 50%.
           So Spine is at 50%. Correct.
        */
    }
    
    .mf-mode-shortcode .mf-book {
        position: relative; /* Shortcode usually fits in flow */
        max-height: 600px; width: 424px; height: 600px;
    }
    
    /* Desktop Nav Buttons */
    .mf-nav-btn {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 50px; height: 50px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white; font-size: 30px; display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.3s; z-index: 100; user-select: none;
    }
    .mf-nav-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.1); }
    .mf-prev { left: 20px; }
    .mf-next { right: 20px; }
    
    .mf-mobile-btn { display: none; }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 800px) {
    .mf-nav-btn { display: none; } /* Hide desktop arrows */

    .mf-book {
        /* Mobile: Flexbox Centering works perfectly for Single Page */
        position: relative;
        width: calc(100vw - 20px); 
        max-width: 600px; 
        height: auto; 
        aspect-ratio: 1 / 1.414;
        
        /* Max height constraint */
        max-height: 75vh;
        
        /* If aspect ratio forces width < screen, Flexbox centers it. */
    }

    /* MOBILE BUTTONS */
    .mf-mobile-btn {
        position: absolute;
        width: 50px; height: 50px;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 50%;
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px;
        z-index: 200;
        backdrop-filter: blur(5px);
        cursor: pointer;
    }
    
    /* "Next" Button (Sola Ok) -> Top Left of the Book? Or Screen? 
       User said: "kataloğun üstüne sola doğru bir ok" -> Above the book?
       "kataloğun altında sağa doğru bi buton" -> Below the book?
    */
    
    /* Let's place them relative to the container (screen edges) for better usability */
    
    /* Left-Pointing Arrow (Next Page - Flip Left) */
    /* Placing it near top-center or left */
    .mf-mob-next {
        top: 70px; /* Below header */
        left: 20px;
    }
    .mf-mob-next::after { content: '←'; } /* Arrow pointing Left (Flip Direction) */

    /* Right-Pointing Arrow (Prev Page - Flip Right) */
    .mf-mob-prev {
        bottom: 20px;
        right: 20px;
    }
    .mf-mob-prev::after { content: '→'; } /* Arrow pointing Right (Flip Back) */
}