/* ==================================================================
   1. KONFIGURASI DEFAULT (JANTUNG CMS)
   Nilai ini adalah cadangan. Nilai asli akan diambil dari Database
   melalui injeksi kode di header.php
   ================================================================== */
:root {
    --navbar-bg: #14532d;      /* Hijau Tua (Navbar & Footer) */
    --menu-text: #ffffff;      /* Putih (Teks Menu) */
    
    --primary-bg: #166534;     /* Hijau (Tombol WA, Section Background) */
    --primary-text: #14532d;   /* Hijau Gelap (Judul Section) */
    
    --accent-color: #facc15;   /* Kuning (Garis, Hover, Ikon) */
    --bg-light: #f8f9fa;
}

/* ==================================================================
   2. HYBRID OVERRIDES (LOGIKA CMS)
   Bagian ini memaksa class Tailwind bawaan untuk mengikuti Database.
   ================================================================== */

/* --- A. KELOMPOK HEADER & FOOTER (Warna Gelap/Navbar) --- */
/* Kita paksa Footer agar warnanya SENADA dengan Navbar */

nav.bg-green-900,           /* Navbar Desktop */
footer.bg-green-900,        /* Footer Utama */
#mobile-menu {              /* Menu Mobile */
    background-color: var(--navbar-bg) !important;
}

/* Warna Teks Menu */
nav a.text-white,
#mobile-menu a {
    color: var(--menu-text) !important;
}

/* --- B. KELOMPOK UTAMA / BODY (Warna Primary) --- */
/* Ini menangani Tombol WA, Background Section Stats, Card, dll */

.bg-green-900, /* Fallback untuk elemen lain selain nav/footer */
.bg-green-800, 
.bg-green-600, 
.bg-green-500 {
    background-color: var(--primary-bg) !important;
}

/* Teks Judul Utama (Berita, Program, Testimoni) */
.text-green-900, 
.text-green-800, 
.text-green-700, 
.text-green-600 {
    color: var(--primary-text) !important;
}

/* Border Utama */
.border-green-500, 
.border-green-600, 
.border-green-700, 
.border-green-800 {
    border-color: var(--primary-bg) !important;
}

.bg-theme-line {
    background-color: var(--line-color) !important;
}

/* --- C. KELOMPOK AKSEN (Warna Kuning/Highlight) --- */

/* Background (Tombol PPDB, Badge Berita) */
.bg-yellow-400 {
    background-color: var(--accent-color) !important;
    color: #000 !important; /* Teks hitam agar kontras */
}

/* Hover Background (Tombol saat disorot) */
.hover\:bg-yellow-300:hover {
    background-color: var(--accent-color) !important;
    filter: brightness(110%); /* Efek lebih terang sedikit */
}

/* Teks (Icon Stats, Hover Menu) */
.text-yellow-400, 
.hover\:text-yellow-400:hover {
    color: var(--accent-color) !important;
}

/* Border (Garis Footer Atas, Foto Testimoni) */
.border-yellow-400 {
    border-color: var(--accent-color) !important;
}

/* Garis Bawah Menu (Pseudo-element) */
.after\:bg-yellow-400::after {
    background-color: var(--accent-color) !important;
}

/* --- D. KOMPATIBILITAS BOOTSTRAP (UNTUK HALAMAN SPMB) --- */
.btn-success {
    background-color: var(--primary-bg) !important;
    border-color: var(--primary-bg) !important;
}
.navbar-spmb {
    background: linear-gradient(to right, var(--primary-bg), var(--navbar-bg)) !important;
}
.text-success { color: var(--primary-text) !important; }
.bg-success { background-color: var(--primary-bg) !important; }

/* Judul Form di Halaman Admin/SPMB */
.form-section-title {
    color: var(--primary-text);
    font-weight: bold;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* ==================================================================
   3. ANIMASI & UTILITIES (TIDAK ADA YANG DIHILANGKAN)
   ================================================================== */

/* Infinite Scroll (Partner Logo) */
.slider { height: 100px; margin: auto; overflow: hidden; position: relative; width: 100%; }
.slide-track { display: flex; width: calc(200px * 12); animation: scroll 20s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-200px * 6)); } }

/* Chat Box Popup Animation */
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Helper Class for Testimonial Active State */
.testimonial-active { opacity: 1 !important; transform: scale(100%) !important; z-index: 10; }

/* Dropdown Animation */
.animate-fade-in-up { animation: fadeInUp 0.2s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Testimonial Slide Transition */
.testimonial-slide { transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }

/* Pixel Animation Classes (Hero Background) */
.pixel-cell { position: absolute; background-size: cover; backface-visibility: hidden; z-index: 20; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease, border-radius 0.5s ease; border-radius: 0%; }
.text-visible { opacity: 1 !important; transform: translateY(0) !important; }

/* --- REVEAL ON SCROLL ANIMATIONS --- */
.reveal, .reveal-left, .reveal-right { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); visibility: hidden; }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal.active, .reveal-left.active, .reveal-right.active { opacity: 1; transform: translate(0, 0); visibility: visible; }

/* Staggered Delay */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* --- PRELOADER ANIMATIONS --- */
.animate-heartbeat { animation: heartbeat 1.5s infinite ease-in-out; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.animate-loading-bar { width: 0%; animation: loadingBar 2s infinite linear; }
@keyframes loadingBar { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }

.preloader-hide { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }

/* --- HERO & KEN BURNS EFFECT --- */
#hero-bg { transition: opacity 1.2s ease-in-out; transform: scale(1); z-index: 0; background-size: cover; background-position: center; will-change: transform, opacity; }
.ken-burns { animation: kenburns-animation 10s linear forwards; }
@keyframes kenburns-animation { from { transform: scale(1); } to { transform: scale(1.15); } }

.hero-text-item { opacity: 0; transform: translateY(20px); filter: blur(10px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-text-item.active { opacity: 1; transform: translateY(0); filter: blur(0); }