/* ==========================================
   base.css - Core Master Blueprint (Universal Database)
   ========================================== */
:root {
    /* 🎨 1. SAKLAR UTAMA UNGU NEON PAYUNG (Ubah di sini, semua berubah!) */
    --color-primary: #a855f7;           /* Ungu Neon Violet Utama */
    --color-primary-glow: rgba(168, 85, 247, 0.25); /* Pendaran redup universal */
    --color-primary-hover: rgba(192, 132, 252, 0.05); /* Bias ungu tipis hover PC */

    /* 🌌 2. STRUKTUR COGNITIVE COSMOS BACKDROP */
    --bg-dark: #030208;                 /* Jagat malam pekat */
    --bg-solid-form: #07060a;           /* Dasar hitam pekat form & input */
    --bg-popup: rgba(10, 7, 18, 0.98);  /* Kaca gelap pekat premium untuk popup/modal */
    --bg-overlay: rgba(0, 0, 0, 0.65);  /* Tirai pelindung saat popup aktif */

    /* 🔮 3. MENU FORMULA KACA (SHARED GLASS FORMULA) */
    /* Menu PC: Kaca Ungu-Biru Transparan Super Tipis Bening */
    --bg-pc-glass: rgba(15, 23, 42, 0.40); 
    
    /* Menu Mobile: Kaca Hitam Doff Taktis Semi-Transparan */
    --bg-mobile-gradient: linear-gradient(135deg, rgba(10, 7, 18, 0.88), rgba(15, 11, 25, 0.94)); 

    /* ✨ 4. BOM LAMPU NEON LUAR (ANTI-BIAS TEXT) */
    /* Murni menembak ke luar frame agar teks di dalam kartu tetap tajam setajam silet */
    --shadow-neon-glow: 0 0 20px rgba(192, 132, 252, 0.3), 
                        0 0 40px rgba(192, 132, 252, 0.1),
                        inset 0 0 15px rgba(192, 132, 252, 0.2);

    /* 📐 5. SISTEM GARIS TEPI UNIVERSAL */
    --border-line: rgba(168, 85, 247, 0.2);    /* Garis tipis default lu (0.2) */
    --border-line-hover: #a855f7;              /* Garis menyala solid saat disorot */
    --border-card-active: rgba(168, 85, 247, 0.65); /* Garis tepi mobile aktif */
    --border-glow: rgba(255, 255, 255, 0.08); 
    --border-divider: rgba(255, 255, 255, 0.05); 
    
    /* 📝 6. FONTS READABILITY SYSTEM */
    --text-main: #cbd5e1;               
    --text-muted: #64748b;              
}

/* ==========================================
   2. GLOBAL ARCHITECTURE RESET
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Segoe UI', system-ui, sans-serif; overflow: hidden; }

/* ==========================================
   3. GAYA VISUAL KARTU DAFTAR UTAMA (BASE FRAME)
   ========================================== */
.card-frame-base {
    background: var(--bg-card);
    border: 2px solid var(--border-line);
    border-radius: 24px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

.card-title { 
    color: var(--color-primary); 
    font-weight: 800; 
    text-transform: uppercase; 
    margin-bottom: 15px; 
}

/* Sistem Area Gulir Teks */
.scroll-area { 
    flex: 1; 
    overflow-y: auto; 
    scrollbar-width: none; 
}
.scroll-area::-webkit-scrollbar { 
    display: none; 
}

/* FLOATING UI WIDGETS */
.mail-container, .chat-container {
    position: fixed;
    z-index: 1000;
}

.chat-icon {
    width: 60px; 
    height: 60px; 
    border-radius: 50%;
    background: var(--bg-card); 
    border: 2px solid var(--border-line);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px;
    cursor: pointer; 
    box-shadow: 0 0 15px var(--color-primary-glow);
}

/* POPUP SYSTEM GLOBAL LAYER */
.popup-overlay {
    position: fixed; 
    inset: 0; 
    background: var(--bg-overlay);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    display: none; 
    z-index: 2000;
}

/* LOADING SPINER */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--color-primary);
    font-size: 1.2rem;
    gap: 10px;
}

.loading-spinner i {
    font-size: 2rem;
}