/* --- Konfigurasi Variabel Premium --- */
:root {
    --brand-red: #8B0000;          /* Maroon Utama */
    --brand-red-light: #b30000;    /* Maroon Terang */
    --bg-maroon-1: #2d0000;        /* Background Sangat Gelap */
    --bg-maroon-2: #4a0000;        /* Background Gelap Medium */
}

/* --- Base Styling --- */
body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at center, var(--bg-maroon-2) 0%, var(--bg-maroon-1) 100%);
    background-attachment: fixed;
    color: #cbd5e1;
    overflow-x: hidden;
    /* GANTI min-h-screen DENGAN INI: */
    min-height: 100vh; 
}

/* --- Shared Components (Beranda & Statistik) --- */
.glass-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-gradient {
    background: linear-gradient(135deg, var(--brand-red) 0%, #5a0000 100%);
}

/* --- Kotak & Kartu (Putih & Maroon) --- */
.floating-card, .stat-card {
    background: #ffffff;
    border-radius: 2.5rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.floating-card h3, .stat-card h2, .stat-card h3 {
    color: var(--brand-red) !important;
}

.floating-card p, .stat-card p {
    color: #64748b !important;
}

/* Efek Hover --- */
.floating-card:hover, .stat-card:hover {
    transform: translateY(-12px) scale(1.02);
    background: #fffafa;
    box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.7);
    border: 1px solid var(--brand-red-light);
}

.floating-card::after, .stat-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--brand-red), #ff4d4d);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: right;
}

.stat-card:hover::after, .floating-card:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- Navbar Glassmorphism --- */
nav {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(45, 0, 0, 0.85); 
    border-bottom: 1px solid rgba(139, 0, 0, 0.3);
}

/* --- Hero Section Parallax --- */
.hero-bg {
    background-image: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(45, 0, 0, 0.7) 80%), 
        url('Beranda.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* --- Utility Classes --- */
.text-brand-red { color: var(--brand-red); }
.bg-brand-red { background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-light) 100%); }
.border-brand-red { border-color: var(--brand-red); }

/* --- Scrollbar Custom --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-maroon-1); }
::-webkit-scrollbar-thumb { 
    background: var(--brand-red-light); 
    border-radius: 10px; 
}

/* --- Map Filter --- */
#lokasi iframe {
    filter: sepia(20%) contrast(1.1) brightness(0.9);
}