/* * MASTER STYLE - APP.PAKDHE.COM (LOADER PERFECT) */

/* 1. LIGHT MODE */
:root {
    --bg-main: #FFFFFF;
    --bg-secondary: #F3F4F6;
    --text-main: #053552;      
    --border-color: #053552;
    --accent: #CCFE03;
    --pwa-text: #053552;
    --loader-bg: #FFFFFF;
    --loader-color: #053552;
}

/* 2. DARK MODE */
html.dark body {
    --bg-main: #053552;
    --bg-secondary: #0a4569;
    --text-main: #CCFE03;
    --border-color: #CCFE03;
    --accent: #FFFFFF;
    --pwa-text: #053552;
    --loader-bg: #053552;
    --loader-color: #CCFE03;
}

/* 3. AMOLED MODE */
html.amoled body {
    --bg-main: #000000 !important;
    --bg-secondary: #000000 !important;
    --text-main: #FFFFFF !important;    
    --border-color: #333333 !important; 
    --accent: #CCFE03 !important;       
    --pwa-text: #000000 !important;
    --loader-bg: #000000;
    --loader-color: #CCFE03;
}

/* SETUP BODY */
body {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-bottom: 80px; 
}

@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

h1, h2, h3, .font-display { font-family: 'Oswald', sans-serif; }

/* UI COMPONENTS */
.shadow-neo {
    box-shadow: 5px 5px 0px 0px var(--border-color);
    border: 2px solid var(--border-color);
}

.card-box {
    background-color: var(--bg-main);
    border: 2px solid var(--border-color);
    box-shadow: 6px 6px 0px 0px rgba(100,100,100,0.2); 
    transition: transform 0.2s;
}

.nav-link.active {
    background-color: var(--text-main);
    color: var(--bg-main);
    font-weight: bold;
}

.bottom-nav-item { opacity: 0.6; transition: all 0.3s; position: relative; }
.bottom-nav-item.active { opacity: 1 !important; color: var(--text-main); }
.bottom-nav-item.active::before {
    content: ''; position: absolute; top: 0; left: 30%; width: 40%; height: 4px;
    background-color: var(--text-main); border-radius: 0 0 4px 4px;
}

/* --- SYSTEM LOADING SCREEN (REVISI FINAL) --- */
#loading-screen {
    position: fixed; inset: 0;
    background-color: var(--loader-bg);
    z-index: 999999 !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.loader-container {
    position: relative;
    width: 110px; 
    height: 110px;
    display: flex; align-items: center; justify-content: center;
}

.loader-logo-img {
    width: 70px; 
    height: 70px;
    object-fit: contain; z-index: 10;
    border-radius: 16px;
    animation: breathe 2s infinite ease-in-out;
}

.loader-svg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transform: rotate(-90deg);
}

.progress-rect {
    fill: none;
    stroke: var(--loader-color);
    stroke-width: 4;
    stroke-linecap: round;
    /* UPDATE: Diperpanjang agar nyambung sempurna */
    stroke-dasharray: 380; 
    stroke-dashoffset: 380; 
    transition: stroke-dashoffset 0.1s linear; 
}

/* TEKS LOADING (SEJAJAR) */
.loading-text {
    margin-top: 25px;
    color: var(--loader-color);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 0.9rem; /* Ukuran sama */
    font-weight: bold;
    display: flex; 
    flex-direction: row; /* Sejajar Samping */
    align-items: center; 
    gap: 8px; /* Jarak antar teks dan persen */
    animation: blink 1s infinite;
}

.loading-percent {
    font-size: 0.9rem; /* Samakan ukuran */
    font-weight: bold;
}

/* KEYFRAMES */
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } }
@keyframes blink { 50% { opacity: 0.5; } }
.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* PWA ANIMATIONS */
#offline-alert { transform: translateY(-100%); transition: transform 0.3s ease-in-out; }
#offline-alert:not(.-translate-y-full) { transform: translateY(0); }

#pwa-mobile-banner { transform: translateY(150%); opacity: 0; pointer-events: none; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease; }
#pwa-mobile-banner.show-banner { transform: translateY(0); opacity: 1; pointer-events: auto; }

#pwa-mini-btn { transform: scale(0); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; }
#pwa-mini-btn.show-icon { transform: scale(1); opacity: 1; pointer-events: auto; }

.pwa-timer-bar { width: 100%; height: 100%; background-color: var(--pwa-text); opacity: 0.7; transform-origin: left; transform: scaleX(0); }
.pwa-timer-active { animation: timerFill 60s linear forwards; }
@keyframes timerFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }