/* Reset Dasar */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Body dibuat hitam agar sisa layar (di luar rasio 16:9) tidak menyilaukan */
body {
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Mencegah layar tergeser di panel sentuh (IFP) */
}

/* WADAH UTAMA - Rahasia IFP 1280x720 ada di sini! */
#app-container {
    position: relative;
    width: 100vw;
    height: 56.25vw; /* Rumus rasio 16:9 */
    max-height: 100vh;
    max-width: 177.78vh; /* Menjaga agar tidak melebar jelek */
    background-color: #f4f7fb;
    background-image: url('../assets/images/bg-utama.png'); /* Nanti diisi background Animasiku */
    background-size: cover;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* Pengaturan Layar-Layar (Screens) */
.screen {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none; /* Sembunyikan secara default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.screen.active {
    display: flex; /* Hanya yang punya class 'active' yang tampil */
    animation: fadeIn 0.5s;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Tombol Elegan & Ramah Layar Sentuh Besar */
button {
    padding: 15px 40px;
    margin: 10px;
    font-size: 24px; /* Huruf dibesarkan untuk layar IFP */
    font-weight: bold;
    border-radius: 50px;
    border: none;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    box-shadow: 0 5px 0 #2980b9;
    transition: transform 0.1s, box-shadow 0.1s;
}

button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #2980b9;
}