/* style.css - Versi Tanpa Transisi Fade-out */

/* Gaya untuk Loading Overlay */
#loading-overlay {
    position: fixed; /* Tetap di posisinya meskipun discroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255); /* Background putih semi-transparan */
    z-index: 9999; /* Pastikan di atas elemen lain */
    display: flex; /* Gunakan Flexbox untuk centering */
    flex-direction: column; /* Atur layout vertikal */
    justify-content: center; /* Pusatkan secara vertikal */
    align-items: center; /* Pusatkan secara horizontal */
    /* Hapus baris transition: opacity 0.5s ease; di sini */
    /* transition: opacity 0.5s ease; <-- HAPUS INI */
    pointer-events: auto; /* Pastikan overlay bisa menangkap event saat terlihat */
}

/* Gaya untuk Spinner */
.spinner {
    border: 8px solid #f3f3f3; /* Warna dasar lingkaran (abu-abu muda) */
    border-top: 8px solid #3498db; /* Warna bagian yang berputar (biru) */
    border-radius: 50%; /* Membuat bentuk lingkaran */
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* Animasi berputar */
    margin-bottom: 20px; /* Jarak antara spinner dan teks */
}

/* Definisi Animasi Berputar */
@keyframes spin {
    0% { transform: rotate(0deg); } /* Mulai dari 0 derajat */
    100% { transform: rotate(360deg); } /* Berakhir di 360 derajat (satu putaran penuh) */
}

/* Hapus aturan CSS untuk class .hidden jika tidak digunakan lagi */
/*
#loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
*/

/* Gaya untuk Konten setelah loading */
#content {
    /* Display akan diubah oleh JavaScript */
    padding: 20px;
    text-align: center;
    font-family: sans-serif;
}

#content img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    border: 1px solid #eee;
}