/* Set Font Utama Website ke Inter */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #050505; /* Warna dasar hitam sinematik */
    margin: 0;
    padding: 0;
} 

/* --- 1. CINEMATIC PRELOADER STYLES --- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Agar tidak mengganggu klik setelah hilang */
}

/* Tirai Bioskop / Shutter Kamera */
.shutter {
    position: absolute;
    left: 0;
    right: 0;
    height: 50vh; /* Membagi layar jadi 2 (atas 50%, bawah 50%) */
    background-color: #050505;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1;
}

.shutter-top { top: 0; }
.shutter-bottom { bottom: 0; }

/* Saat Animasi Selesai, Tirai Terbuka */
#preloader.finished .shutter-top { transform: translateY(-100%); }
#preloader.finished .shutter-bottom { transform: translateY(100%); }

/* Bungkus Teks & Loading */
.preloader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.5s ease;
}

#preloader.finished .preloader-content {
    opacity: 0; /* Teks dan loading hilang saat tirai buka */
}

/* Animasi Focus Pull (Blur ke Sharp) */
/* Animasi Focus Pull (Blur ke Sharp) untuk LOGO GAMBAR */
.loader-logo {
    width: 210px; /* Kamu bisa mengatur besar/kecilnya logo di sini */
    height: auto;
    
    /* Kondisi Awal: Sangat Blur dan sedikit membesar */
    filter: blur(25px);
    opacity: 0;
    transform: scale(1.1);
    transition: filter 2s ease-out, opacity 1.5s ease-out, transform 2s ease-out;
}

/* Saat Fokus Terkunci */
.loader-logo.focus {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

/* Saat Fokus Terkunci */
.loader-text.focus {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

/* UI Loading Bar Tipis (Gaya Premium) */
.loading-ui {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.5s;
}

.loading-ui.hide {
    opacity: 0; /* Loading bar hilang duluan sebelum teks */
}

.progress-wrapper {
    width: 200px;
    height: 1px; /* Sangat tipis */
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background: #ffffff;
    transition: width 0.1s linear;
}

#counter {
    color: #666;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em; /* Spasi huruf lebar agar modern */
}

/* --- 2. MAIN CONTENT ANIMATION (ZOOM EFFECT) --- */
#page-wrapper {
    background-color: #F3F3F3; 
    min-height: 100vh;
    transform: scale(0.95); /* Efek zoom out dikurangi sedikit agar lebih natural */
    opacity: 0; 
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    transform-origin: center center;
    will-change: transform, opacity;
}

#page-wrapper.loaded {
    transform: scale(1);
    opacity: 1;
}