:root {  
    --primary-gold: #D4AF37;  
    --dark-emerald: #064e3b;  
    --soft-white: #f8fafc;  
}  

html { 
    scroll-behavior: smooth; 
}  

body {  
    font-family: 'Inter', sans-serif;  
    background-color: var(--soft-white);  
    color: #1e293b;  
    overflow-x: hidden;  
}  

h1, h2, h3, .navbar-brand { 
    font-family: 'Playfair Display', serif; 
}  

/* =========================
   🔥 NAVBAR
========================= */

.navbar {  
    background: rgba(6, 78, 59, 0.95) !important;  
    backdrop-filter: blur(10px);  
    padding: 1.2rem 5%;  
    border-bottom: 2px solid var(--primary-gold);  
}  

.navbar-brand {  
    color: var(--primary-gold) !important;  
    font-size: 1.6rem;  
    letter-spacing: 1px;  
}  

.nav-link {  
    color: rgba(255, 255, 255, 0.9) !important;  
    font-weight: 500;  
    transition: 0.3s;  
}  

.nav-link:hover { 
    color: var(--primary-gold) !important; 
}  

.dropdown-menu {  
    background: var(--dark-emerald);  
    border: 1px solid var(--primary-gold);  
    border-radius: 0;  
}  

.dropdown-item { 
    color: white; 
    padding: 10px 20px; 
}  

.dropdown-item:hover { 
    background: var(--primary-gold); 
    color: var(--dark-emerald); 
}  

@media (min-width: 992px) {  
    .nav-item.dropdown:hover .dropdown-menu {  
        display: block;  
        animation: fadeInUp 0.3s;  
    }  
}  

/* =========================
   🔥 GLOBAL SECTION
========================= */

section {  
    padding: 100px 0;  
    border-bottom: 1px solid #eee;  
}  

/* =========================
   🔥 HERO
========================= */

.hero {  
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url('https://halaltourism.visitbeautifulwestsumatra.id/wp-content/uploads/2023/10/1masAgungSWL.jpg');  
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;  
    height: 100vh;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    text-align: center;  
    color: white;  
}  

.hero-content {  
    border: 1px solid var(--primary-gold);  
    padding: 50px;  
    background: rgba(6, 78, 59, 0.4);  
    backdrop-filter: blur(5px);  
}  

.hero h1 { 
    font-size: 3.5rem; 
    color: var(--primary-gold); 
}  

/* =========================
   🔥 SECTION TITLE
========================= */

.section-title { 
    text-align: center; 
    margin-bottom: 50px; 
}  

.section-title h2 { 
    font-size: 3rem; 
    color: var(--dark-emerald); 
}  

.section-title .divider {  
    width: 80px;  
    height: 3px;  
    background: var(--primary-gold);  
    margin: 20px auto;  
}  

/* =========================
   🔥 CONTENT CARD
========================= */

.content-card {  
    background: white;  
    padding: 40px;  
    border-left: 5px solid var(--primary-gold);  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);  
    height: 100%;  
}  

/* =========================
   🔥 GALERI IMG (GLOBAL)
========================= */

.galeri-img {  
    width: 100%;  
    height: 250px;  
    object-fit: cover;  
    transition: 0.4s;  
    border: 2px solid transparent;  
}  

.galeri-img:hover {  
    border-color: var(--primary-gold);  
    transform: scale(1.05);  
}  

/* =========================
   🔥 FOOTER
========================= */

footer {  
    background: var(--dark-emerald);  
    color: white;  
    padding: 60px 0 20px;  
    border-top: 5px solid var(--primary-gold);  
}

/* --- SECTION GALERI PUTIH BERSIH --- */
#galeri {
    padding: 80px 0;
    /* Mengubah background menjadi putih bersih */
    background-color: #ffffff; 
}

.section-title h2 {
    font-weight: 700;
    color: #064e3b; /* Warna hijau tua agar kontras di background putih */
    text-transform: uppercase;
    margin-bottom: 10px;
}

.divider {
    width: 60px;
    height: 4px;
    background: #ffc107; /* Kuning emas */
    margin: 0 auto 40px auto;
    border-radius: 10px;
}

/* --- WRAPPER ITEM GALERI --- */
.galeri-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 280px; /* Mengunci tinggi gambar agar seragam */
    cursor: pointer;
    border: 4px solid #f8fafc; /* Border default abu-abu sangat muda */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

.galeri-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mencegah gambar gepeng/lonjong */
    transition: all 0.5s ease;
}

/* --- EFEK HOVER (BORDER EMAS) --- */
.galeri-item:hover {
    border-color: #ffc107; /* Border berubah jadi emas saat disentuh */
    transform: translateY(-10px); /* Efek melayang */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.galeri-item:hover .galeri-img {
    transform: scale(1.1); /* Efek zoom gambar */
}

/* --- OVERLAY --- */
.galeri-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(6, 78, 59, 0.2); /* Overlay hijau sangat transparan */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
}

.galeri-item:hover .galeri-overlay {
    opacity: 1;
}

.galeri-overlay i {
    color: #ffc107;
    font-size: 2.5rem;
}
/* =========================
   🔥 SECTION SEJARAH
========================= */

    :root {
        --primary-gold: #ffc107;
        --dark-emerald: #064e3b;
        --gradient-main: linear-gradient(135deg, #064e3b, #10b981);
    }

    body { 
        font-family: 'Poppins', sans-serif; 
        background: var(--gradient-main);
        color: white;
    }

    /* Gaya Kartu Transparan (Glassmorphism) */
    .content-card {  
        background: rgba(255, 255, 255, 0.15);  
        backdrop-filter: blur(20px);  
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 40px;  
        border-radius: 24px;  
        box-shadow: 0 25px 50px rgba(0,0,0,0.2);  
        transition: 0.3s;
        color: white;
    }

    .content-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.2);
    }

    .section-title h2 { 
        font-weight: 700; 
        color: white; 
        text-align: center; 
        margin-top: 50px;
    }

    .divider { 
        width: 80px; 
        height: 5px; 
        background: var(--primary-gold); 
        margin: 15px auto 50px; 
        border-radius: 10px; 
    }

    h4 { color: var(--primary-gold); font-weight: 600; }


    :root {
        --dark-emerald: #064e3b;
        --primary-gold: #ffc107;
        --main-bg: linear-gradient(135deg, #6f8b06, #10b981); /* Gradient galeri */
    }

    body {
        font-family: 'Poppins', sans-serif;
        background: var(--main-bg);
        min-height: 100vh;
    }

    /* --- NAVBAR LENGKAP --- */
    .navbar {
        background-color: var(--dark-emerald) !important;
        padding: 1rem 0;
        border-bottom: 3px solid var(--primary-gold);
        z-index: 1000;
    }

    .navbar-brand, .nav-link {
        color: white !important;
        font-weight: 500;
    }

    .navbar-brand {
        color: var(--primary-gold) !important;
        font-weight: 700;
    }

    .nav-link:hover {
        color: var(--primary-gold) !important;
    }

    .dropdown-menu {
        background-color: var(--dark-emerald);
        border: 1px solid var(--primary-gold);
    }

    .dropdown-item {
        color: white;
    }

    .dropdown-item:hover {
        background-color: var(--primary-gold);
        color: var(--dark-emerald) !important;
    }

    /* --- SECTION STRUKTUR (VERTIKAL) --- */
    #struktur {
        padding: 90px 20px;
    }

    .section-title {
        text-align: center;
        margin-bottom: 50px;
        color: white;
    }

    .divider {
        width: 70px;
        height: 4px;
        background: white;
        margin: 12px auto;
        border-radius: 10px;
    }

    /* Card Struktur Turun Kebawah (Glassmorphism) */
    .content-card-vertikal {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        padding: 25px 30px;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        margin-bottom: 25px; /* Spasi antar kartu */
        border-left: 5px solid var(--primary-gold); /* Garis kiri formal */
        display: flex;
        align-items: center;
        gap: 20px; /* Jarak ikon ke teks */
        transition: 0.3s;
    }

    .content-card-vertikal:hover {
        transform: translateX(5px);
        background: rgba(255, 255, 255, 0.8);
    }

    .card-icon-container {
        width: 80px;
        height: 80px;
        background: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .card-body-vertikal h4 {
        color: #27ae60;
        font-weight: 600;
        margin-bottom: 3px;
        font-size: 1.15rem;
    }

    .card-body-vertikal p {
        color: #444;
        margin-bottom: 0;
        font-weight: 500;
    }

    .text-keterangan {
        font-size: 0.85rem;
        color: #777;
        margin-top: 5px;
    }

    /* Tombol Kembali Bulat (Fixed) */
    .btn-bulat-putih {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 55px; height: 55px;
        background: white;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        color: #27ae60;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: 0.3s;
        z-index: 1001;
    }
    .btn-bulat-putih:hover { 
        background: #27ae60; 
        color: white; 
        transform: scale(1.1); 
    }


/* =====================================
    🔥 SECTION JADWAL (PREMIUM UPGRADE)
   ===================================== */

#jadwal {
    padding: 80px 0;
    background-color: #f8fafc; /* Disamakan dengan background galeri */
    font-family: 'Poppins', sans-serif;
}

#jadwal .container {
    max-width: 900px;
    background: #064e3b; /* Hijau Tua (Dark Emerald) agar senada dengan Navbar */
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-bottom: 5px solid #ffc107; /* Aksen emas di bawah */
}

/* --- TITLE JADWAL --- */
#jadwal .section-title h2 {
    font-weight: 700;
    color: #ffffff !important; /* Putih agar kontras dengan hijau tua */
    text-transform: uppercase;
    letter-spacing: 1px;
}

#jadwal .divider {
    width: 70px;
    height: 4px;
    background: #ffc107; /* Kuning Emas konsisten */
    margin: 12px auto 40px auto;
    border-radius: 10px;
}

/* --- CARD KONTEN JADWAL --- */
#jadwal .content-card {
    background: #ffffff; /* Putih bersih agar teks mudah dibaca */
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    border: 2px solid transparent;
}

#jadwal .content-card:hover {
    transform: translateY(-10px);
    border-color: #ffc107; /* Border emas muncul saat hover, sama seperti galeri */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* --- TABLE STYLING --- */
#jadwal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* Memberikan jarak antar baris */
}

#jadwal table th {
    background-color: #f1f5f9;
    color: #064e3b;
    font-weight: 700;
    padding: 15px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-radius: 8px;
}

#jadwal table td {
    background: #f8fafc;
    padding: 15px;
    font-weight: 600;
    color: #1e293b;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    transition: 0.3s;
}

/* Merapikan sudut baris tabel */
#jadwal table td:first-child { border-left: 1px solid #edf2f7; border-radius: 10px 0 0 10px; }
#jadwal table td:last-child { border-right: 1px solid #edf2f7; border-radius: 0 10px 10px 0; }

/* Efek Hover per Baris */
#jadwal table tbody tr:hover td {
    background: #fffbeb; /* Warna krem tipis emas */
    color: #064e3b;
    border-color: #ffc107;
}

/* Keterangan Tambahan */
#jadwal .small {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-top: 20px;
    display: block;
    text-align: center;
    font-style: italic;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    #jadwal .container { padding: 30px 15px; }
    #jadwal .content-card { padding: 20px 10px; }
    #jadwal table td, #jadwal table th { padding: 10px 5px; font-size: 0.85rem; }
}

    /* --- SECTION RAMADHAN UPGRADE --- */
    #ramadhan {
        padding: 80px 0;
        background-color: #ffffff; /* Latar belakang putih bersih */
    }

    .section-title h2 {
        font-weight: 700;
        color: #064e3b; /* Hijau Tua */
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .divider {
        width: 60px;
        height: 4px;
        background: #ffc107; /* Kuning Emas */
        margin: 0 auto 40px auto;
        border-radius: 10px;
    }

    /* --- CARD STYLE UPGRADE --- */
    .ramadhan-item {
        background: #ffffff;
        padding: 35px 25px;
        border-radius: 20px;
        height: 100%;
        border: 2px solid #f1f5f9; /* Border default tipis */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.4s ease;
        text-align: center; /* Membuat konten di tengah agar lebih modern */
    }

    /* Efek Hover: Muncul Border Emas & Melayang */
    .ramadhan-item:hover {
        transform: translateY(-10px);
        border-color: #ffc107; /* Border kuning emas muncul */
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }

    .ramadhan-item i {
        font-size: 2.5rem;
        color: #ffc107; /* Ikon warna emas */
        margin-bottom: 20px;
        display: inline-block;
        transition: 0.3s;
    }

    .ramadhan-item:hover i {
        transform: scale(1.1);
    }

    .ramadhan-item h4 {
        color: #064e3b;
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: 15px;
    }

    .ramadhan-item p {
        color: #64748b;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 0;
    }

    /* Responsif */
    @media (max-width: 768px) {
        .ramadhan-item { padding: 25px 20px; }
    }

/* =========================
   🔥 SECTION PENGAJIAN
========================= */

#pengajian{
    padding:100px 20px;
    background:#5d853d !important; /* background utama */
    font-family:'Poppins',sans-serif;
    text-align:center;
}

/* jika ada container bootstrap */
#pengajian .container{
    background:transparent;
}

/* =========================
   TITLE
========================= */

#pengajian .section-title{
    margin-bottom:60px;
}

#pengajian .section-title h2{

    display:inline-block;
    background:#506b04;
    padding:20px 65px;
    border-radius:14px;
    font-size:38px;
    font-weight:700;
    color:#4ac2a2;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

#pengajian .divider{

    width:65px;
    height:4px;
    background:#586e05;
    margin:12px auto;
    border-radius:10px;
}

/* =========================
   CARD TABEL
========================= */

#pengajian .content-card{

    max-width:1000px;
    margin:auto;
    background:#759b1e;
    border-radius:18px;
    padding:30px;
    box-shadow:0 20px 40px rgba(0,0,0,0.25);
    position:relative;
    overflow:hidden;
}

/* strip kiri */

#pengajian .content-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:8px;
    height:100%;
    background:#cbf086;
    border-top-left-radius:18px;
    border-bottom-left-radius:18px;
}

/* =========================
   TABLE
========================= */

#pengajian table{

    width:100%;
    border-collapse:collapse;
    color:#f5f7f2;
}

/* header tabel */

#pengajian thead{

    background:#0b4f3a;
    color:#929c08;
    font-weight:600;
}

/* cell */

#pengajian th,
#pengajian td{

    padding:18px 20px;
    font-size:15px;
    border-bottom:1px solid rgba(187,190,11,0.1);
    text-align:left;
}

/* hover row */

#pengajian tbody tr{

    transition:0.3s;
}

#pengajian tbody tr:hover{

    background:#f2f5ea;
    color:#064e3b;
    transform:translateX(6px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

#pengajian{
padding:80px 15px;
}

#pengajian .section-title h2{
font-size:28px;
padding:15px 40px;
}

#pengajian th,
#pengajian td{
padding:12px 10px;
font-size:13px;
}

}
/* ============================  
   🔥 SECTION KONTAK  
============================ */

#kontak {  
    padding: 80px 0;  
    background: linear-gradient(135deg, #8fa70c, #10b981); /* 🔥 samakan semua */
    font-family: 'Poppins', sans-serif;  
    color: #fff;  
}  

#kontak .section-title {  
    text-align: center;  
    margin-bottom: 50px;  
}  

#kontak .section-title h2 {  
    font-size: 2.5rem;  
    font-weight: 700;  
    color: #fff;  
    margin-bottom: 10px;  
}  

#kontak .divider {  
    width: 60px;  
    height: 3px;  
    background: var(--primary-gold);  
    margin: 0 auto;  
    border-radius: 3px;  
}  

/* CARD */
#kontak .content-card {  
    background: rgba(255, 255, 255, 0.15);  
    backdrop-filter: blur(10px);  
    border-radius: 20px;  
    padding: 30px;  
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);  
    transition: transform 0.3s ease, box-shadow 0.3s ease;  
}  

#kontak .content-card:hover {  
    transform: translateY(-5px);  
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);  
}  

#kontak .content-card h4,  
#kontak .content-card h5 {  
    color: #fff;  
}  

#kontak .content-card p {  
    color: #f0f0f0;  
}  

/* Social */
#kontak .content-card .btn {  
    border-radius: 50%;  
    width: 45px;  
    height: 45px;  
    padding: 0;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transition: all 0.3s ease;  
    border: 2px solid rgba(255,255,255,0.5);  
}  

#kontak .content-card .btn i {  
    font-size: 20px;  
    color: #fff;  
}  

#kontak .content-card .btn:hover {  
    background: var(--primary-gold);  
    color: #064e3b;  
    transform: scale(1.2);  
    border-color: var(--primary-gold);  
}  

/* Map */
#kontak .content-card iframe {  
    border-radius: 20px;  
    border: none;  
    width: 100%;  
    height: 100%;  
}  

/* Responsive */
@media (max-width: 768px) {  
    #kontak .row.g-4 {  
        flex-direction: column;  
    }  

    #kontak .col-md-5,  
    #kontak .col-md-7 {  
        max-width: 100%;  
    }  

    #kontak .content-card {  
        margin-bottom: 30px;  
    }  
}
    .btn-kembali-luar {
        background-color: #ffffff; /* Putih agar kontras dengan hijau */
        color: #2d5a27; /* Tulisan hijau */
        padding: 10px 25px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        display: inline-block;
    }

    .btn-kembali-luar:hover {
        background-color: #f0f0f0;
        transform: translateY(-3px); /* Efek melayang saat di-hover */
        color: #1e3d1a;
    }
    .btn-kembali-estetik {
        background: #ffffff;
        color: #2d5a27; /* Hijau senada dengan tema */
        padding: 12px 28px;
        border-radius: 50px; /* Bentuk kapsul yang elegan */
        text-decoration: none;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        /* Efek Bayangan Mewah */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 2px solid transparent;
    }

    .btn-kembali-estetik .icon {
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .btn-kembali-estetik:hover {
        background: #f8f9fa;
        color: #1e3d1a;
        transform: translateY(-5px) scale(1.05); /* Efek melayang dan membesar sedikit */
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
        border: 2px solid #add8e6; /* Sedikit sentuhan light blue saat dihover */
    }

    .btn-kembali-estetik:hover .icon {
        transform: rotate(-15px) scale(1.2);
    }
    .btn-bulat-putih {
        width: 60px;
        height: 60px;
        background-color: #ffffff;
        color: #2d5a27; /* Warna hijau masjid kamu */
        border-radius: 50%; /* Membuat lingkaran sempurna */
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Efek bayangan agar jelas */
        transition: all 0.3s ease-in-out;
        border: none;
    }

    .btn-bulat-putih svg {
        width: 35px;
        height: 35px;
        transition: transform 0.3s ease;
    }

    .btn-bulat-putih:hover {
        background-color: #f8f9fa;
        transform: scale(1.1) rotate(-10deg); /* Sedikit membesar dan miring saat di-hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        color: #1e3d1a;
    }

    .btn-bulat-putih:hover svg {
        transform: translateX(-3px); /* Ikon panah sedikit bergeser ke kiri */
    }
    .btn-login {
    background-color: #800000; /* Merah Maroon */
    color: white !important;
    padding: 5px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-left: 10px; /* Jarak dari menu Kontak */
}

.btn-login:hover {
    background-color: #a00000; /* Warna merah agak terang saat disentuh kursor */
}
/* Reset Box Sizing */
* {
    box-sizing: border-box;
}

/* Sidebar Styling */
.sidebar {
    width: 260px;
    position: fixed;
    height: 100vh;
    background-color: #064e3b; /* Warna hijau admin Anda */
    z-index: 1000;
    left: 0;
    top: 0;
}

/* Konten Utama (Agar tidak tertutup sidebar) */
.content {
    margin-left: 260px; /* Jarak wajib sama dengan lebar sidebar */
    padding: 40px;
    width: calc(100% - 260px); /* Memastikan lebar konten pas dengan sisa layar */
    min-height: 100vh;
    transition: all 0.3s;
}

/* Banner Hijau Saldo */
.bg-success {
    background-color: #198754 !important;
    width: 100%;
    border-radius: 10px;
    padding: 20px;
}

/* Tabel agar rapi */
.card-dashboard {
    border-radius: 10px;
    padding: 20px;
    color: white;
}
/* Tambahkan ini di dalam tag <style> */
.text-teal { color: #0d9488; }
.alert-info { background-color: #f0fdfa; border-color: #5eead4; color: #0f766e; }