:root {
    /* Ukuran referensi kanvas fixed-desktop, dipakai bersama oleh cover.css
       dan reader.css. --canvas-scale dihitung & di-set oleh cover-scale.js. */
    --canvas-w: 1920;
    --canvas-h: 1080;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Malgun Gothic', 'Malgun Gothic Semilight', 'Segoe UI', 'Arial Unicode MS', sans-serif;
    background: #FFF7E8;
    color: #3A2E1F;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;       /* fallback aman saat CSS var belum di-set JS */
    overflow: hidden;   /* JS (cover-scale.js) akan set --client-h dan --client-w */
}

/* ===== Landscape Lock ===== */
/* Buku dipaksa landscape. Saat device dalam posisi portrait (umum di mobile),
   tampilkan overlay yang meminta pembaca memutar perangkat. */
.rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #2B2418;
    color: #FFF7E8;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.rotate-overlay .rotate-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    animation: rotate-hint 1.8s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect x='22' y='8' width='36' height='56' rx='6' ry='6' fill='none' stroke='%23FFF7E8' stroke-width='4'/%3E%3Ccircle cx='40' cy='55' r='3' fill='%23FFF7E8'/%3E%3Cpath d='M58 18 C68 28, 68 52, 58 62' stroke='%23FFF7E8' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-dasharray='5 4'/%3E%3Cpath d='M55 14 L60 18 L56 23' stroke='%23FFF7E8' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.rotate-overlay p {
    font-size: clamp(16px, 2.5vw, 22px);
    max-width: 300px;
    font-weight: 600;
    line-height: 1.5;
}

@keyframes rotate-hint {
    0%   { transform: rotate(0deg)   scale(1);    }
    30%  { transform: rotate(-75deg) scale(0.95); }
    60%  { transform: rotate(-75deg) scale(1);    }
    100% { transform: rotate(0deg)   scale(1);    }
}

@media (orientation: portrait) {
    .rotate-overlay { display: flex; }
    .landscape-content { visibility: hidden; }
}

/* ===== Animasi reusable: mengambang halus ===== */
/* Dipakai oleh logo judul di load.php dan cover.php */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Styling khusus halaman cover ada di cover.css */

.icon-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
}