/* --- Root Variables untuk kemudahan maintenance --- */
:root {
    --nav-bg-light: rgba(255, 255, 255, 0.75);
    --nav-bg-dark: rgba(15, 23, 42, 0.75);
    --glass-blur: 16px;
    --border-color-light: rgba(226, 232, 240, 0.6);
    --border-color-dark: rgba(30, 41, 59, 0.6);
}

/* --- Essential Reset & Scroll --- */
html {
    scroll-behavior: smooth;
}

[x-cloak] { 
    display: none !important; 
}

/* --- Glassmorphism Utility yang Paling Stabil --- */
.glass-nav {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}
.dark body {
    background-color: #0f172a !important; /* Warna Slate-900 yang konsisten */
}
.dark .glass-nav {
    background: rgba(15, 23, 42, 0.75) !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.6) !important;
}

/* --- Card Glass Effect (Opsional tapi cantik) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dark .glass-card {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* Membuat peta gelap saat Dark Mode aktif */
.dark #map {
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
/* --- Animasi Halus saat Transisi Mode --- */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Memastikan elemen dropdown tidak terpotong --- */
.group:hover .group-hover\:visible {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}