/* ==========================================================================
   1. VARIABEL & PENGATURAN DASAR
   ========================================================================== */
   :root {
    --dh-green: #146c43;
    --dh-green-dark: #0f4c2c;
    --dh-green-light: #e8f3ee;
    --dh-gold: #c9a227;
    --dh-gold-light: #f4e9c8;
    --dh-text: #22282a;
    --dh-text-muted: #5b6568;
    --dh-font-body: 'Poppins', 'Segoe UI', sans-serif;
    --dh-font-heading: 'Amiri', 'Poppins', 'Segoe UI', serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--dh-font-body);
    color: var(--dh-text);
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    top: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--dh-font-heading);
    letter-spacing: .01em;
}

h1, .h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); }

.text-muted { color: var(--dh-text-muted) !important; }

.section-divider {
    height: 3px;
    width: 72px;
    margin: 0.5rem 0 1.5rem;
    background: linear-gradient(90deg, var(--dh-gold), var(--dh-green));
    border-radius: 999px;
}

/* ==========================================================================
   2. NAVBAR MENU (Mendukung Panel Admin + Tema Islami)
   ========================================================================== */
   .navbar {
    /* Pola geometris islami samar sebagai latar belakang navbar */
    background-image: radial-gradient(rgba(201, 162, 39, 0.08) 1.5px, transparent 0);
    background-size: 24px 24px;
    border-bottom: 3px solid var(--dh-gold) !important;
    transition: all 0.3s ease;
}

.navbar-brand {
    font-family: var(--dh-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    /* Mengikuti setting warna dari panel administrator */
    color: var(--navbar-text-color, var(--dh-green)) !important;
}

.navbar-brand i.fa-mosque {
    color: var(--dh-gold);
    text-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
}

.navbar .nav-link {
    font-family: var(--dh-font-body);
    color: var(--navbar-text-color, var(--dh-green)) !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: all 0.25s ease;
}

/* Efek Hover Garis Bawah Emas yang Elegan */
.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--dh-gold);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    width: 60%;
}

.navbar .nav-link:hover {
    color: var(--dh-gold) !important;
    opacity: 1 !important;
}

.navbar .nav-link.active {
    font-weight: 600;
    /* Menggunakan fallback agar jika admin menyetel teks putih, menu aktif tetap kontras */
    color: var(--dh-gold) !important;
    opacity: 1;
}

.navbar .nav-link:not(.active) {
    opacity: .85;
}

/* Dropdown Menu Utama & Bahasa */
.navbar .dropdown-menu {
    border: none;
    border-top: 3px solid var(--dh-gold);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    animation: navDropdownFade 0.2s ease-out;
}

@keyframes navDropdownFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.navbar .dropdown-item {
    font-family: var(--dh-font-body);
    color: var(--dh-text);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
    background-color: var(--dh-green-light);
    color: var(--dh-green) !important;
    font-weight: 500;
    padding-left: 1.5rem;
}

/* Submenu 2 level (Dropdown "Lainnya") */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -.5rem;
    margin-left: 2px;
    display: none;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.show > .dropdown-menu { display: block; }
.dropdown-submenu > a.dropdown-toggle::after {
    float: right;
    margin-top: .5em;
    transform: rotate(-90deg);
}

/* Tombol Pilihan Bahasa (Bulat) */
.icon-toggle-btn {
    color: var(--navbar-text-color, var(--dh-text)) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    background: transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.icon-toggle-btn::after { display: none; }

.icon-toggle-btn:hover {
    background-color: var(--dh-gold-light) !important;
    border-color: var(--dh-gold) !important;
    color: var(--dh-gold) !important;
}

/* Tombol Khusus PPDB di Navbar (Penghilang Konflik .btn-success global) */
.navbar .btn-success {
    background: linear-gradient(135deg, var(--dh-gold), #b38e1a) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(199, 162, 39, 0.3);
    transition: all 0.3s ease;
}

.navbar .btn-success:hover {
    background: linear-gradient(135deg, #b38e1a, var(--dh-gold)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(199, 162, 39, 0.4) !important;
    color: #fff !important;
}

/* Responsif Mobile Layout (Navbar) */
/* Responsif Mobile Layout (Navbar) - FIX TEKS HILANG */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #ffffff !important; /* Latar belakang dropdown mobile tetap putih bersih */
        box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
        padding: 1.25rem;
        border-radius: 0.75rem;
        margin-top: 0.75rem;
        border: 1px solid var(--dh-green-light);
    }

    /* FIX: Memaksa teks link menjadi hijau gelap/hitam saat di mobile agar tidak tabrakan dengan latar putih */
    .navbar .navbar-collapse .nav-link {
        color: var(--dh-text) !important; /* Menggunakan warna teks dasar website (Gelap) */
        padding: 0.6rem 0.5rem !important;
        border-bottom: 1px solid var(--dh-green-light);
        opacity: 0.9;
    }

    /* Warna saat menu mobile di-hover atau aktif */
    .navbar .navbar-collapse .nav-link:hover,
    .navbar .navbar-collapse .nav-link.active {
        color: var(--dh-green) !important; /* Berubah menjadi hijau tema saat aktif */
        background-color: var(--dh-green-light);
        border-radius: 0.25rem;
        padding-left: 0.75rem !important; /* Efek geser sedikit saat ditekan */
    }

    .navbar .nav-link::after { 
        display: none; /* Matikan efek garis bawah desktop di mobile */
    }

    /* Dropdown menu di dalam mobile */
    .navbar .navbar-collapse .dropdown-menu {
        border-top: none;
        box-shadow: none;
        background-color: var(--dh-green-light);
        padding-left: 0.5rem;
    }

    .navbar .navbar-collapse .dropdown-item {
        color: var(--dh-green-dark) !important;
    }

    .dropdown-submenu > .dropdown-menu {
        position: static;
        display: block;
        box-shadow: none;
        padding-left: 1rem;
        margin-top: 0;
        background-color: rgba(0,0,0,0.03);
    }
    
    .dropdown-submenu > a.dropdown-toggle::after { 
        transform: none; 
    }

    .icon-toggle-btn { 
        margin: 0.75rem 0; 
        color: var(--dh-text) !important; /* Tombol bahasa di mobile disesuaikan menjadi gelap */
    }

    .navbar .btn-success { 
        width: 100%; 
        text-align: center; 
        padding: 0.6rem 0; 
    }

    /* Trik inverter otomatis untuk tombol 3 bar mobile */
    .navbar-toggler-icon {
        filter: invert(0);
        transition: filter 0.3s ease;
    }

    /* Jika navbar luar berwarna gelap, pastikan tombol 3 bar di pojok kanan tetap putih sebelum diklik */
    .navbar[style*="--navbar-text-color: #fff"] .navbar-toggler-icon,
    .navbar[style*="--navbar-text-color: #ffffff"] .navbar-toggler-icon,
    .navbar[style*="--navbar-text-color:#fff"] .navbar-toggler-icon {
        filter: invert(1);
    }
}

/* ==========================================================================
   3. STYLE FOOTER (Mendukung Panel Admin + Tema Islami)
   ========================================================================== */
   footer {
    /* Menggunakan variabel warna agar harmonis */
    background-image: radial-gradient(rgba(201, 162, 39, 0.06) 1.5px, transparent 0);
    background-size: 24px 24px;
    border-top: 4px solid var(--dh-gold) !important;
    /* Tetap memprioritaskan style inline dari panel admin jika diset */
    color: var(--dh-green-light);
}

footer h5, footer h6 {
    font-family: var(--dh-font-heading);
    color: var(--dh-gold) !important;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 8px;
}

footer h5::after, footer h6::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: linear-gradient(90deg, var(--dh-gold), transparent);
}

footer .text-secondary {
    color: #a3c2b2 !important; /* Peningkatan kontras teks sekunder khusus footer */
}

footer ul li a {
    color: #a3c2b2 !important;
    transition: all 0.25s ease;
    display: inline-block;
}

footer ul li a:hover {
    color: var(--dh-gold-light) !important;
    transform: translateX(5px);
    padding-left: 2px;
}

footer ul li i {
    color: var(--dh-gold);
    width: 20px;
}

/* Ikon Media Sosial Bulat di Footer */
footer .d-flex.gap-3 a.text-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

footer .d-flex.gap-3 a.text-light:hover {
    background-color: var(--dh-gold) !important;
    color: var(--dh-green-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(201, 162, 39, 0.3);
}

footer hr.border-secondary {
    border-color: rgba(201, 162, 39, 0.2) !important;
    opacity: 1;
}

@media (max-width: 991.98px) {
    footer h5::after, footer h6::after { width: 45px; }
}

/* ==========================================================================
   4. SECTIONS LAIN & KOMPONEN WEBSITE (Bawaan)
   ========================================================================== */
/* HERO CAROUSEL */
#heroCarousel { background-color: #000; }
.hero-slide-img { height: 78vh; min-height: 420px; object-fit: cover; filter: brightness(0.6); }
.hero-caption { bottom: auto; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: left; max-width: 100%; }
.hero-caption .container { max-width: 720px; margin-left: 8%; margin-right: auto; }
#heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next { width: 5%; }
#heroCarousel .carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; }

@media (max-width: 768px) {
    .hero-slide-img { height: 60vh; }
    .hero-caption .container { margin-left: 5%; }
    .hero-caption h1 { font-size: 1.75rem; }
}

/* SHARE BUTTONS */
.share-buttons-bar .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: .9rem; transition: transform .15s ease, opacity .15s ease; }
.share-buttons-bar .share-btn:hover { color: #fff; transform: translateY(-2px); opacity: .9; }

/* FLOATING WHATSAPP */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; background: #25d366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.25); z-index: 1040; animation: waPulse 2.5s infinite; }
.whatsapp-float:hover { color: #fff; transform: scale(1.08); }
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5), 0 .5rem 1.25rem rgba(0,0,0,.25); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 .5rem 1.25rem rgba(0,0,0,.25); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 .5rem 1.25rem rgba(0,0,0,.25); }
}
@media (max-width: 576px) { .whatsapp-float { width: 50px; height: 50px; font-size: 1.5rem; bottom: 16px; right: 16px; } }

/* GENERAL SECTIONS & GLOBAL SUCCESS BUTTONS */
.card { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important; }

.btn-success { background-color: var(--dh-green); border-color: var(--dh-green); }
.btn-success:hover { background-color: var(--dh-green-dark); border-color: var(--dh-green-dark); }
.text-success { color: var(--dh-green) !important; }
.bg-success { background-color: var(--dh-green) !important; }

/* BREADCRUMB */
.breadcrumb-bar { background-color: var(--dh-green-light); border-bottom: 3px solid var(--dh-gold); }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #9aab9f; }
.breadcrumb-bar a { color: var(--dh-green); }
.breadcrumb-bar .breadcrumb-item.active { color: var(--dh-text-muted); }

/* RESPONSIVE / SKALABILITAS */
img { max-width: 100%; height: auto; }
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) { .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; } h1, .h1 { line-height: 1.25; } }

/* GOOGLE TRANSLATE */
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-gadget { height: 0; overflow: hidden; }
#google_translate_element { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }