/* =========================================
   STYLE.CSS - FIX LENGKAP (LAYOUT, WARNA, HEADER)
========================================= */
:root {
    /* PALET WARNA GRADASI MODERN */
    --c1: #cff09e; 
    --c2: #a8dba8;
    --c3: #79bd9a; 
    --c4: #3b8686; /* Teal */
    --c5: #0b486b; /* Biru Tua */

    /* Gradasi Utama (Header & Footer) */
    --gradient-modern: linear-gradient(135deg, #0b486b 0%, #3b8686 100%);
    
    --body-bg: #f4f6f8;
    --card-bg: #ffffff;
    --text-dark: #333333;
    --text-muted: #666666;
    --border-color: #dddddd;
    
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-body);
    background-color: var(--body-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--c4); transition: 0.3s; }
a:hover { color: var(--c5); }
ul { list-style: none; padding: 0; margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
/* --- RESET & GLOBAL --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background-color: var(--body-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; /* Mencegah scroll samping */
}

/* PENTING: Mencegah gambar meledak */
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

a { text-decoration: none; color: var(--c4); transition: 0.3s; }
a:hover { color: var(--c5); }
ul { list-style: none; }

.container {
    max-width: 1280px; /* Lebar container diperbesar sedikit */
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--c5);
    font-weight: 700;
}

/* ==================================================
   HEADER & NAVIGASI (FIX: ANTI BERTUMPUK)
================================================== */
.top-bar { display: none; }

/* ==================================================
   HEADER ANIMASI GRADASI (MODERN & BERGERAK)
================================================== */

header {
    /* 1. Definisi Warna Gradasi (Hijau - Teal - Biru - Biru Tua) */
    background: linear-gradient(-45deg, #009b4c, #007bff, #0b486b, #009b4c);
    
    /* 2. Ukuran Background diperbesar agar bisa digerakkan */
    background-size: 400% 400%;
    
    /* 3. Animasi Gerak (Durasi 15 detik, loop selamanya) */
    animation: gradientBG 15s ease infinite;
    
    height: 70px; /* Tinggi header pas */
    width: 100%;
    position: sticky; /* Tetap menempel di atas saat scroll */
    top: 0;
    z-index: 9999;
    
    /* Shadow lembut di bawah */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* KUNCI ANIMASI: Membuat background bergerak */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pastikan Container Header Flex Rapi */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Logo (Teks Putih di atas Gradasi) */
.logo {
    display: flex; align-items: center; text-decoration: none;
    flex-shrink: 0; margin-right: 30px;
}
.logo img { 
    height: 38px; /* Logo sedikit lebih kecil */
    margin-right: 10px; width: auto; 
    background: #fff; border-radius: 50%; padding: 2px; /* Biar logo jelas */
}
.logo span {
    font-family: var(--font-heading);
    font-weight: 700; font-size: 1.2rem; color: #fff; /* Teks Putih */
    white-space: nowrap; letter-spacing: 0.5px;
}

/* Navigasi (Teks Putih) */
.nav-menu { display: flex; align-items: center; gap: 10px; }
.nav-menu li { position: relative; }

.nav-menu > li > a {
    display: flex; align-items: center;
    color: rgba(255,255,255,0.9); /* Putih agak transparan */
    font-weight: 500; font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 20px; /* Lebih bulat */
    white-space: nowrap;
    transition: all 0.3s ease;
}

.nav-menu > li > a:hover {
    background-color: rgba(255,255,255,0.2); /* Efek glass saat hover */
    color: #fff;
}

/* Ikon Menu */
.nav-menu > li > a > i { margin-right: 6px; font-size: 1rem; color: #fff; opacity: 0.8; }
.nav-menu > li > a > .fa-chevron-down { margin-left: 4px; font-size: 0.7rem; color: rgba(255,255,255,0.6); }

/* Dropdown (Tetap Putih agar terbaca) */
.dropdown-menu {
    position: absolute; top: 100%; left: 0;
    background: #fff; min-width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px; border: 1px solid #eee;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: 0.3s; z-index: 10000; padding: 8px 0;
    margin-top: 10px; /* Jarak dari header */
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a { color: var(--text-dark); padding: 8px 20px; display: block; }
.dropdown-menu li a:hover { background-color: var(--c1); color: var(--c5); }

/* Tombol Login (Icon Bulat Putih) */
.nav-menu .login-icon-only {
    width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
    display: flex; justify-content: center; align-items: center;
    padding: 0; margin-left: 10px;
}
.nav-menu .login-icon-only i { margin: 0; color: #fff; font-size: 1rem; }
.nav-menu .login-icon-only:hover { background: rgba(255,255,255,0.2); border-color: #fff; }

/* Hamburger (Mobile) */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.bar { width: 25px; height: 3px; background: #fff; border-radius: 3px; }
/* =========================================
   LAYOUT & KONTEN UTAMA
========================================= */
.content-section { padding: 50px 0; }

h2 {
    font-size: 2.2rem; text-align: center; margin-bottom: 3rem;
    position: relative; padding-bottom: 15px; color: var(--c5);
}
h2::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 80px; height: 4px;
    background: linear-gradient(90deg, var(--c3), var(--c4)); border-radius: 2px;
}

/* Perbaiki Ukuran Slider */
.hero-slider {
    width: 100%;
    height: 500px; /* Tinggi tetap agar gambar tidak lonjong/gepeng */
    background: #ddd;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/* Overlay Gradasi pada Slider */
.hero-slider .slide-content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(11, 72, 107, 0.85), transparent); /* Gradasi Gelap agar teks terbaca */
    padding: 50px 20px 30px; 
    color: #fff; text-align: center;
}

.hero-slider h1 { 
    color: #fff; 
    font-size: 2.2rem; /* Font judul pas */
    margin-bottom: 10px; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-slider span { 
    background: var(--c3); 
    padding: 4px 12px; 
    border-radius: 20px; 
    color: #fff; 
    font-size: 0.85rem; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- CARD GRID (BERITA, DLL) --- */
/* ====================
   FIX TAMPILAN KARTU BERITA
==================== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%; /* Agar tinggi kartu sama */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--c3);
}

/* FIX GAMBAR AGAR TIDAK TERPOTONG */
.card-img-container {
    width: 100%;
    height: 200px; /* Tinggi tetap */
    overflow: hidden;
    background-color: #f0f0f0; /* Placeholder warna jika gambar loading */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mengisi area, memotong sisi jika perlu */
    /* ATAU GANTI DENGAN INI JIKA INGIN GAMBAR UTUH: */
    /* object-fit: contain; background: #fff; */ 
    transition: transform 0.5s ease;
}

.card:hover img {
    transform: scale(1.05); /* Efek zoom halus saat hover */
}

.card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--c5);
}

.card-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Batasi 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    margin-top: auto; /* Dorong ke bawah */
    color: var(--c4);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--c3); }
.card img { width: 100%; height: 220px; object-fit: cover; }
.card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.card-content h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--c5); line-height: 1.4; }
.card-content h3 a { color: var(--c5); text-decoration: none; }
.card-content h3 a:hover { color: var(--c4); }
.card-content p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 15px; flex-grow: 1; }
.read-more { color: var(--c4); font-weight: bold; margin-top: auto; display: inline-flex; align-items: center; gap: 5px; }

/* =========================================
   FIX FINAL: PROGRAM UNGGULAN (COLORFUL & ANTI-JEBOL)
   Paste di paling bawah style.css
========================================= */

.program-section {
    padding: 80px 0;
    /* Latar belakang diberi pola gradasi halus agar tidak sepi */
    background: linear-gradient(to bottom, #ffffff 0%, #e6fffa 100%);
    position: relative;
    border-top: 5px solid var(--c3); /* Garis pemisah berwarna */
}

/* Judul Section */
.program-section h2 {
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 50px;
    color: var(--c5);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.05);
}

/* Grid Container */
.program-logo-grid {
    display: grid;
    /* Responsif: Minimal lebar 260px */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 30px;
    padding: 15px;
}

/* KARTU PROGRAM (ITEM) */
.program-logo-item {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden; /* Mencegah elemen keluar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Border Bawah Warna-Warni */
    border-bottom: 5px solid var(--c3);
    
    /* Shadow */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

/* Hover Effect: Naik & Berubah Warna Border */
.program-logo-item:hover {
    transform: translateY(-10px);
    border-bottom-color: var(--c5); /* Berubah jadi Biru Tua */
    box-shadow: 0 20px 40px rgba(11, 72, 107, 0.15);
}

/* Lingkaran Ikon (COLORFUL BACKGROUND) */
.program-icon-box {
    width: 90px;
    height: 90px;
    /* Gradasi Penuh Warna (Hijau ke Teal) */
    background: linear-gradient(135deg, var(--c3) 0%, var(--c4) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    
    /* Efek Glow */
    box-shadow: 0 8px 20px rgba(59, 134, 134, 0.4);
    border: 4px solid #fff; /* Ring putih di dalam */
    outline: 2px solid var(--c3); /* Ring luar tipis */
    transition: 0.4s;
}

.program-logo-item:hover .program-icon-box {
    transform: scale(1.1) rotate(10deg);
    background: linear-gradient(135deg, var(--c4) 0%, var(--c5) 100%); /* Berubah jadi Biru */
    outline-color: var(--c5);
}

/* Gambar di dalam lingkaran */
/* GANTI BAGIAN INI DI STYLE.CSS (Agar logo asli muncul) */

/* Gambar di dalam lingkaran */
.program-logo-item img {
    width: 60px;
    height: 60px;
    object-fit: contain; /* Agar gambar tidak gepeng */
    transition: 0.4s;
    
    /* --- [BAGIAN INI YANG DIUBAH] --- */
    /* filter: brightness(0) invert(1);  <-- HAPUS ATAU KOMENTAR BARIS INI */
    
    /* Tambahan: Agar gambar kotak tetap bagus di dalam lingkaran */
    border-radius: 10px; 
    background-color: transparent; 
}

/* Efek saat hover (Zoom sedikit) */
.program-logo-item:hover img {
    transform: scale(1.1); /* Zoom gambar */
    /* filter: none; <-- Pastikan tidak ada filter di sini juga */
}

/* Judul Program (SOLUSI TULISAN KELUAR KOTAK) */
.program-logo-item span {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.3s;
    width: 100%;
    
    /* --- MANTRA ANTI JEBOL (MOBILE FIX) --- */
    word-break: break-word;      /* Paksa patah kata */
    overflow-wrap: break-word;   /* Support modern browser */
    hyphens: auto;               /* Tambah tanda hubung jika perlu */
    line-height: 1.4;
}

.program-logo-item:hover span {
    color: var(--c4); /* Berubah warna saat hover */
}

/* Tombol Lihat Semua */
.btn-program-outline {
    display: inline-block;
    margin-top: 40px;
    padding: 12px 40px;
    background: var(--c5); /* Background Solid */
    color: #fff !important;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(11, 72, 107, 0.3);
    transition: 0.3s;
}

.btn-program-outline:hover {
    background: var(--c4);
    transform: translateY(-3px);
}

/* RESPONSIVE HP */
@media (max-width: 600px) {
    .program-logo-grid {
        grid-template-columns: 1fr 1fr; /* 2 Kolom di HP agar hemat tempat */
        gap: 15px;
    }
    .program-logo-item {
        padding: 25px 15px;
    }
    .program-icon-box {
        width: 70px; height: 70px; /* Ikon lebih kecil di HP */
    }
    .program-logo-item img {
        width: 35px; height: 35px;
    }
    .program-logo-item span {
        font-size: 0.9rem; /* Font lebih kecil */
    }
}
/* --- AGENDA (MINIMALIST LIST) --- */
.agenda-list-minimal { max-width: 800px; margin: 0 auto; }
.agenda-item-mini {
    display: flex; gap: 20px; align-items: center;
    background: var(--card-bg); padding: 20px; border-radius: 12px;
    margin-bottom: 15px; border: 1px solid var(--border-color);
    transition: 0.3s;
}
.agenda-item-mini:hover { border-color: var(--c3); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.agenda-date-box {
    background: linear-gradient(135deg, var(--c3), var(--c4));
    color: #fff; padding: 10px; border-radius: 8px; text-align: center;
    min-width: 75px;
}
.agenda-date-box .day { font-size: 1.8rem; font-weight: 800; line-height: 1; display: block; }
.agenda-date-box .month { font-size: 0.8rem; text-transform: uppercase; }
.agenda-details h4 { margin: 0 0 5px; font-size: 1.2rem; }
.agenda-details h4 a { color: var(--c5); text-decoration: none; }
.agenda-details p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

/* --- GALERI VIDEO --- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.video-card { position: relative; border-radius: 12px; overflow: hidden; background: #000; display: block; }
.video-card img { width: 100%; height: 220px; object-fit: cover; opacity: 0.8; transition: 0.3s; }
.video-card:hover img { opacity: 0.6; transform: scale(1.05); }
.play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; color: #fff; z-index: 2; pointer-events: none;
}
.video-title {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff; font-size: 1rem; font-weight: 600;
}

/* --- FOOTER --- */
/* =========================================
   FIX FINAL: FOOTER CANGGIH & PADAT
   (Ganti bagian footer lama di style.css)
========================================= */

footer {
    /* Gradasi Biru Tua ke Hijau Teal */
    background: linear-gradient(135deg, #0b486b 0%, #3b8686 100%);
    color: #ffffff;
    padding-top: 60px;
    padding-bottom: 20px;
    margin-top: 100px; /* Jarak dari konten atas */
    position: relative;
    font-size: 0.9rem; /* Ukuran font dipadatkan */
}

/* Efek Lengkungan (Wave) di Atas Footer */
footer::before {
    content: "";
    position: absolute;
    top: -40px; /* Naik ke atas */
    left: 0;
    width: 100%;
    height: 41px;
    background: inherit; /* Warna sama dengan footer */
    /* Membuat lengkungan halus */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.2); /* Melebarkan lengkungan */
    z-index: -1;
}

.footer-container {
    display: grid;
    /* Grid 3 Kolom: Kolom pertama agak lebar */
    grid-template-columns: 1.4fr 0.8fr 1fr; 
    gap: 30px; /* Jarak antar kolom */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Judul Kolom Modern */
.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #cff09e; /* Warna Aksen Hijau Muda */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

/* Garis Bawah Judul */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0; bottom: -8px;
    width: 40px; height: 3px;
    background: #ffffff;
    border-radius: 2px;
    opacity: 0.5;
}

/* Teks Deskripsi */
.footer-col p {
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* List Link (Tautan Cepat) */
.footer-col ul li {
    margin-bottom: 8px; /* Lebih rapat */
}

.footer-col ul li a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* Efek Hover Link */
.footer-col ul li a:hover {
    color: #fff;
    transform: translateX(5px); /* Geser kanan dikit */
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Ikon Kecil di Link */
.footer-col ul li a::before {
    content: '›';
    font-size: 1.2rem;
    line-height: 0;
    color: #cff09e;
}

/* Info Kontak */
.footer-col p strong {
    color: #fff;
    font-weight: 600;
}

/* Ikon Sosmed (Bulat Keren) */
.social-links {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.social-links a {
    width: 35px; height: 35px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.social-links a:hover {
    background: #cff09e;
    color: #0b486b; /* Warna Ikon jadi Biru */
    transform: translateY(-3px) rotate(360deg); /* Efek Putar */
}

/* Baris Hak Cipta di Bawah */
.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    opacity: 0.6;
}

/* RESPONSIF HP */
@media (max-width: 768px) {
    footer { margin-top: 50px; }
    footer::before { border-radius: 20px 20px 0 0; top: -15px; height: 20px; transform: none; }
    
    .footer-container {
        grid-template-columns: 1fr; /* Jadi 1 kolom tumpuk */
        gap: 30px;
        text-align: center;
    }
    
    /* Rata Tengah di HP */
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-col ul li a { justify-content: center; }
    .social-links { justify-content: center; }
}

/* RESPONSIVE HEADER */
/* =========================================
   FIX FINAL: MENU MOBILE (MODERN & RAPI)
========================================= */
/* =========================================
   FIX FINAL V2: MENU MOBILE (RAPI & BERWARNA)
========================================= */
@media (max-width: 992px) {
    
    /* 1. Container Menu (Sidebar Putih Bersih) */
    .nav-menu {
        position: fixed;
        top: 0; left: -100%;
        width: 85%; max-width: 320px; /* Lebar ideal */
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch; /* Memenuhi lebar */
        padding: 0;
        padding-top: 80px; /* Jarak dari header */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 5px 0 30px rgba(0,0,0,0.15);
        overflow-y: auto;
        z-index: 10000;
    }

    .nav-menu.active { left: 0; }

    /* 2. Item Menu (List) */
    .nav-menu > li {
        width: 100%; margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* 3. Link Menu (Utama) - FIX RATA KIRI */
    .nav-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* KUNCI: Paksa semua konten ke kiri */
        width: 100%;
        padding: 15px 20px;
        font-size: 1rem;
        color: #333;
        font-weight: 600;
        text-decoration: none;
        transition: 0.2s;
        border-radius: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Jarak antara Ikon Kiri dan Teks */
    .nav-menu > li > a > i:first-child {
        margin-right: 15px !important; /* Beri jarak agar tidak nempel */
        width: 25px; 
        text-align: center;
        color: var(--c3);
        flex-shrink: 0; /* Agar ikon tidak tergencet */
    }

    /* Teks Menu */
    .nav-menu > li > a {
        text-align: left; /* Pastikan teks rata kiri */
    }

    /* Khusus Panah Dropdown (Chevron) - Dorong ke Kanan */
    .nav-menu > li > a > .fa-chevron-down {
        margin-left: auto !important; /* Ini yang membuat panah tetap di ujung kanan */
        font-size: 0.8rem;
        color: #ccc;
    }

    /* 4. Ikon Menu (Di Kiri Teks - Berwarna) */
    .nav-menu > li > a > i:first-child {
        margin-right: 15px; 
        font-size: 1.3rem;
        width: 30px; text-align: center;
        color: var(--c3); /* Warna Hijau Sedang */
    }
    
    /* Warna Ikon saat Hover */
    .nav-menu > li > a:hover > i:first-child {
        color: var(--c4); /* Berubah jadi Teal */
    }

    /* Panah Dropdown (Di Kanan) */
    .nav-menu > li > a > .fa-chevron-down {
        margin-left: auto; 
        font-size: 0.8rem; 
        color: #ccc;
    }

    /* 5. Dropdown Submenu (Masuk ke dalam) */
    .dropdown-menu {
        position: static; 
        background-color: #fafafa; 
        box-shadow: inset 0 5px 10px rgba(0,0,0,0.02);
        border: none; display: none; width: 100%; padding: 5px 0;
        opacity: 1; visibility: visible; transform: none;
    }

    .dropdown.active .dropdown-menu { display: block; }

    .dropdown-menu li a {
        padding: 12px 20px 12px 70px; /* Indentasi dalam */
        font-size: 0.95rem; color: #666; border-bottom: none;
    }

    .dropdown-menu li a:hover {
        color: var(--c5); background: transparent; padding-left: 75px;
    }

    /* 6. TOMBOL LOGIN ADMIN (FIX WARNA & POSISI) */
    .nav-menu .login-icon-only {
        /* Ubah dari ikon bulat menjadi Tombol Kotak */
        width: calc(100% - 50px); /* Lebar penuh minus margin */
        margin: 30px 25px; /* Margin atas/bawah kiri/kanan */
        height: auto;
        padding: 14px;
        border-radius: 10px !important;
        
        /* Warna Solid Biru Tua */
        background-color: var(--c5) !important; 
        border: none;
        
        /* Flexbox Centering */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        
        /* Shadow */
        box-shadow: 0 8px 20px rgba(11, 72, 107, 0.25);
    }
    
    /* Ikon di dalam tombol login */
    .nav-menu .login-icon-only i {
        color: #ffffff !important; /* Ikon Putih Wajib */
        font-size: 1.1rem !important;
        margin: 0 !important;
    }
    
    /* Teks "Login Admin" */
    .nav-menu .login-icon-only::after {
        content: "Login Admin Panel";
        font-size: 1rem;
        font-weight: 700;
        color: #ffffff; /* Teks Putih Wajib */
    }
    
    /* Hover Tombol Login */
    .nav-menu .login-icon-only:hover {
        background-color: var(--c4) !important; /* Berubah Teal */
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(59, 134, 134, 0.3);
    }

    /* Hamburger Button */
    .hamburger { display: flex; z-index: 10001; }
    .bar { background-color: var(--c5); }
    
    /* Overlay Gelap */
    body.menu-open::before {
        content: ''; position: fixed; top:0; left:0; width:100%; height:100%;
        background: rgba(0,0,0,0.6); z-index: 9999;
        backdrop-filter: blur(3px);
    }
}
/* =========================================
   HALAMAN DETAIL & STATIS
========================================= */
/* Detail Agenda */
.agenda-detail-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: start; }
.agenda-detail-image-wrapper img { width: 100%; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.agenda-detail-content { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); }
.agenda-detail-meta { display: flex; gap: 20px; margin-bottom: 20px; background: var(--primary-light-bg); padding: 15px; border-radius: 8px; }
.meta-item i { font-size: 1.5rem; color: var(--c4); margin-right: 10px; }

/* Detail Pengurus */
.profile-container { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.profile-card { background: var(--card-bg); padding: 30px; text-align: center; border-radius: 12px; border: 1px solid var(--border-color); }
.profile-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid var(--c2); }
.profile-content { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); }

/* Detail Program */
.program-detail-container { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.program-detail-logo-wrapper { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); text-align: center; }
.program-detail-logo-wrapper img { max-width: 100%; max-height: 250px; }
.program-detail-content { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); min-height: 400px; }

/* =========================================
   RESPONSIVE MEDIA QUERIES (FIX MENU DI HP)
========================================= */
@media (max-width: 1100px) {
    /* Menu di HP/Tablet Kecil */
    .nav-menu {
        position: fixed; top: 80px; left: -100%; width: 280px; height: calc(100vh - 80px);
        background: var(--card-bg); flex-direction: column; align-items: flex-start;
        padding: 20px; transition: 0.3s; box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    .nav-menu.active { left: 0; }
    
    /* Paksa menu jadi list vertikal */
    .nav-menu > li { width: 100%; margin-bottom: 0; }
    .nav-menu > li > a { 
        width: 100%; justify-content: flex-start; padding: 15px 10px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* Login icon di HP */
    .nav-menu .login-icon-only {
        width: 100%; border-radius: 8px !important; justify-content: flex-start;
        border: none; margin-left: 0; margin-top: 10px;
        background-color: var(--primary-light-bg);
    }
    .nav-menu .login-icon-only::after { content: " Login Admin"; font-weight: 600; margin-left: 10px; }

    .hamburger { display: flex; }
    
    /* Layout Content di HP */
    .card-grid { grid-template-columns: 1fr; }
    .program-logo-grid { grid-template-columns: 1fr 1fr; }
    .agenda-item-mini { flex-direction: column; text-align: center; }
    .profile-container, .agenda-detail-container, .program-detail-container { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr; }
}
/* =========================================
   FIX LAYOUT: SIDEBAR & GAMBAR MELEDAK
========================================= */

/* 1. Grid Utama (Membagi Kiri & Kanan) */
.main-content-grid {
    display: grid;
    /* Kolom kiri 70%, Kanan 30% */
    grid-template-columns: 7fr 3fr; 
    gap: 40px;
    align-items: start; /* Penting agar sidebar tidak memanjang ke bawah */
}

/* 2. Fix Gambar Berita (Agar tidak besar sekali) */
/* =======================================================
   FIX BERITA TERBARU (INDEX) - ANTI JEBOL & RAPI
   Paste di paling bawah style.css
======================================================= */

/* Container Utama */
.home-news-grid {
    display: grid;
    /* Membuat kolom otomatis responsif */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 20px;
}

/* Kartu Berita */
.home-news-card {
    background: #fff;
    border-radius: 16px;    /* Sudut membulat */
    overflow: hidden;       /* PENTING: Memotong konten yang keluar */
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;          /* Layout Samping */
    height: 180px;          /* Tinggi Tetap agar sejajar */
    transition: 0.3s;
}

.home-news-card:hover {
    transform: translateY(-5px);
    border-color: var(--c4);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Gambar (Kiri) */
.home-news-img {
    width: 40%;             /* Lebar Gambar 40% */
    height: 100%;
    object-fit: cover;      /* Agar gambar tidak gepeng */
}

/* Konten Teks (Kanan) */
.home-news-content {
    width: 60%;             /* Lebar Teks 60% */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box; 
    text-align: left;
}

/* Tanggal */
.home-news-date {
    font-size: 0.75rem;
    color: #999;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* Judul (BAGIAN ANTI JEBOL) */
.home-news-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c5);
    margin: 0 0 10px 0;
    line-height: 1.3;
    text-decoration: none;

    /* FORMULA AGAR TEKS TIDAK KELUAR BATAS: */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    
    /* Batasi Maksimal 3 Baris */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-news-title:hover {
    color: var(--c4);
}

/* Tombol Baca */
.home-read-more {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c4);
    text-decoration: none;
    margin-top: auto; /* Dorong ke paling bawah */
    display: flex; align-items: center; gap: 5px;
}

/* Responsive HP */
@media (max-width: 600px) {
    .home-news-grid { grid-template-columns: 1fr; } /* 1 Kolom */
    
    .home-news-card {
        height: auto;       /* Tinggi menyesuaikan isi di HP */
        min-height: 160px;
    }
    
    .home-news-img { width: 35%; }
    .home-news-content { width: 65%; padding: 15px; }
    .home-news-title { font-size: 1rem; -webkit-line-clamp: 2; /* Batasi 2 baris di HP */ }
}
/* ==================================
   FIX SAMBUTAN (FOTO DI SAMPING TEKS)
================================== */
.welcome-section {
    background-color: #ffffff; /* Latar Putih Bersih */
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 50px;
    margin-bottom: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Bayangan Lembut */
    position: relative;
    overflow: hidden;
}

/* Dekorasi Aksen Hijau di Kiri */
.welcome-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to bottom, var(--c3), var(--c4));
}

.welcome-grid {
    display: grid;
    /* Teks 55%, Gambar 45% */
    grid-template-columns: 1.2fr 1fr; 
    gap: 50px;
    align-items: center; /* Vertikal Tengah */
}

/* Kolom Teks */
.welcome-content {
    text-align: left;
    padding-right: 20px;
}

.welcome-content .salam-badge {
    background-color: var(--c1); /* Hijau Muda */
    color: var(--c5); /* Biru Tua */
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.welcome-content h2 {
    font-size: 2.5rem;
    color: var(--c5);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
    position: relative;
    padding-bottom: 0;
}
/* Hapus garis bawah default h2 jika ada */
.welcome-content h2::after { display: none; }

.welcome-content p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Tombol di Sambutan */
.welcome-btn-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn-welcome-primary {
    background-color: var(--c4); /* Teal */
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(59, 134, 134, 0.3);
    transition: 0.3s;
}
.btn-welcome-primary:hover {
    background-color: var(--c5);
    transform: translateY(-2px);
}

.btn-welcome-secondary {
    color: var(--c4);
    font-weight: 700;
    text-decoration: none;
    padding: 10px 20px;
    transition: 0.3s;
}
.btn-welcome-secondary:hover {
    color: var(--c5);
    text-decoration: underline;
}

/* Kolom Gambar */
.welcome-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Bayangan gambar lebih kuat */
    transform: perspective(1000px) rotateY(-5deg); /* Efek 3D halus */
    transition: 0.5s;
    border: 5px solid #fff;
}

.welcome-image:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.welcome-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Responsive HP */
@media (max-width: 992px) {
    .welcome-section { padding: 30px; }
    .welcome-grid {
        grid-template-columns: 1fr; /* 1 Kolom */
        gap: 30px;
        text-align: center;
    }
    .welcome-content { padding-right: 0; order: 2; text-align: center; }
    .welcome-btn-group { justify-content: center; }
    .welcome-image { 
        order: 1; 
        transform: none; /* Hapus efek 3D di HP */
        margin-bottom: 20px;
        max-width: 100%;
    }
    .welcome-image:hover { transform: none; }
}
/* ==================================
   FIX AGENDA (RAPI & SAMPING)
================================== */
.agenda-list-minimal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.agenda-item-mini {
    display: flex; /* WAJIB FLEX BARIS */
    flex-direction: row; 
    align-items: center;
    background: var(--card-bg);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    gap: 20px; /* Jarak antara tanggal dan teks */
}

.agenda-item-mini:hover {
    transform: translateX(5px);
    border-color: var(--c3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.agenda-date-box {
    flex-shrink: 0; /* Agar kotak tidak mengecil */
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--c3), var(--c4));
    color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.agenda-date-box .day {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.agenda-date-box .month {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}

.agenda-details {
    flex-grow: 1;
}

.agenda-details h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.agenda-details h4 a {
    color: var(--c5);
    text-decoration: none;
}

.agenda-details p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Link "Lihat Semua Agenda" */
.agenda-footer {
    margin-top: 20px;
    text-align: center;
}

/* RESPONSIVE KHUSUS (Agar di HP turun ke bawah) */
@media (max-width: 768px) {
    .welcome-grid {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
        text-align: center;
    }
    .welcome-content { text-align: center; order: 2; }
    .welcome-image { order: 1; margin-bottom: 20px; }
    
    .agenda-item-mini {
        align-items: flex-start; /* Di HP rata atas */
    }
}
/* =========================================
   FIX TAMPILAN AGENDA (MODERN CARD LIST)
========================================= */

.agenda-section {
    padding: 60px 0;
    background-color: var(--body-bg); /* Latar abu muda agar kartu putih menonjol */
}

/* Container List Agenda */
.agenda-list-minimal {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Jarak antar kartu agenda */
    max-width: 900px;
    margin: 0 auto 40px auto; /* Margin bawah untuk tombol */
}

/* Kartu Agenda Item */
.agenda-item-mini {
    display: flex;
    flex-direction: row; /* Wajib ke samping */
    align-items: center;
    background: var(--white);
    padding: 25px;
    border-radius: 16px; /* Sudut membulat modern */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Bayangan halus */
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--color-4); /* Aksen warna di kiri (Teal) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.agenda-item-mini:hover {
    transform: translateY(-5px); /* Efek naik saat hover */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: var(--color-3);
}

/* Kotak Tanggal */
.agenda-date-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 85px;
    height: 85px;
    background: var(--color-1); /* Latar hijau muda terang */
    color: var(--color-5); /* Teks biru tua */
    border-radius: 12px;
    margin-right: 25px; /* Jarak ke teks */
    text-align: center;
    flex-shrink: 0; /* Mencegah kotak mengecil */
}

.agenda-date-box .day {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.agenda-date-box .month {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 1px;
}

/* Detail Teks */
.agenda-details {
    flex-grow: 1; /* Mengisi sisa ruang */
}

.agenda-details h4 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.agenda-details h4 a {
    color: var(--color-5);
    text-decoration: none;
    transition: color 0.2s;
}

.agenda-details h4 a:hover {
    color: var(--color-4); /* Warna Teal saat hover */
}

.agenda-details p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tombol "Lihat Semua Agenda" */
.btn-agenda-all {
    display: inline-block;
    margin-top: 40px;
    padding: 14px 40px;
    background-color: var(--c5) !important; /* Warna Biru Tua Solid */
    color: #ffffff !important; /* Teks Putih Wajib */
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(11, 72, 107, 0.3); /* Bayangan Biru */
    border: 2px solid var(--c5);
    text-align: center;
}

.btn-agenda-all:hover {
    background-color: #ffffff !important; /* Latar Putih saat hover */
    color: var(--c5) !important; /* Teks Biru saat hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(11, 72, 107, 0.4);
}

/* Responsif untuk HP */
@media (max-width: 768px) {
    .agenda-item-mini {
        flex-direction: column; /* Jadi atas bawah di HP */
        text-align: center;
        padding: 20px;
    }
    .agenda-date-box {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .agenda-details p {
        justify-content: center; /* Rata tengah ikon lokasi */
    }
}
/* =========================================
   FIX FINAL: AGENDA (KONTRAS & UKURAN)
========================================= */

.agenda-section {
    padding: 60px 0;
    background-color: var(--body-bg);
}

.agenda-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px; /* Ukuran maksimal agar tidak terlalu lebar */
    margin: 0 auto;
}

/* Kartu Agenda */
.agenda-item-mini {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #ffffff;
    padding: 25px; /* Padding diperbesar agar lega */
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.agenda-item-mini:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--c3); /* Border hijau saat hover */
}

/* Garis Aksen Kiri */
.agenda-item-mini::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background-color: var(--c4); /* Teal */
}

/* Kotak Tanggal (Kiri) - Diperjelas */
.agenda-date-box {
    width: 85px;
    height: 85px;
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%); /* Gradasi Hijau Muda */
    color: var(--c5); /* Teks Biru Tua Gelap */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: 30px; /* Jarak ke teks */
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.05);
}

.agenda-date-box .day {
    font-size: 2.2rem; /* Angka tanggal lebih besar */
    font-weight: 800;
    line-height: 1;
    display: block;
}

.agenda-date-box .month {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.8;
}

/* Detail Teks */
.agenda-details {
    flex-grow: 1;
}

.agenda-details h4 {
    margin: 0 0 8px 0;
    font-size: 1.4rem; /* Judul lebih besar */
    font-weight: 700;
    line-height: 1.3;
}

.agenda-details h4 a {
    text-decoration: none;
    color: var(--c5); /* Warna Judul Biru Tua */
    transition: color 0.2s;
}

.agenda-details h4 a:hover {
    color: var(--c3);
}

.agenda-details p {
    margin: 0;
    font-size: 1rem; /* Ukuran lokasi diperjelas */
    color: #555; /* Warna teks lokasi lebih gelap agar terbaca */
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.agenda-details p i {
    color: var(--c4);
}

/* Tombol Panah Kanan */
.agenda-arrow {
    font-size: 1.5rem;
    color: #ddd;
    margin-left: 20px;
    transition: 0.3s;
}
.agenda-item-mini:hover .agenda-arrow {
    color: var(--c4);
    transform: translateX(5px);
}

/* Tombol "Lihat Semua Agenda" (PERBAIKAN KONTRAS) */
.btn-agenda-pill {
    display: inline-block;
    margin-top: 40px;
    padding: 15px 40px;
    background-color: var(--c5) !important; /* Warna Biru Tua Solid */
    color: #ffffff !important; /* Teks Putih Wajib */
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(11, 72, 107, 0.3);
    border: 2px solid var(--c5);
}

.btn-agenda-pill:hover {
    background-color: #ffffff !important;
    color: var(--c5) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(11, 72, 107, 0.4);
}

/* Responsive HP */
@media (max-width: 600px) {
    .agenda-item-mini {
        flex-direction: column !important;
        text-align: center;
        padding: 25px 20px;
    }
    .agenda-date-box {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        height: auto;
        padding: 15px;
        flex-direction: row; /* Tanggal menyamping di HP */
        gap: 10px;
    }
    .agenda-date-box .day { font-size: 1.8rem; }
    .agenda-date-box .month { font-size: 1rem; margin-top: 5px; }
    .agenda-details p { justify-content: center; }
    .agenda-arrow { display: none; }
}
/* --- STATISTIK KADER (Grid Kotak Modern - FIX KONTRAS) --- */
.widget-stats {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Grid 2 Kolom untuk Statistik */
.stats-grid-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Kolom sama besar */
    gap: 15px;
}

.stat-box {
    background: linear-gradient(135deg, var(--c5) 0%, var(--c4) 100%); /* Gradasi Biru-Teal */
    padding: 20px 15px;
    border-radius: 12px;
    text-align: center;
    
    /* FIX: Paksa warna teks putih */
    color: #ffffff !important; 
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}

.stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 72, 107, 0.3);
}

/* Hiasan Lingkaran Transparan */
.stat-box::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

/* FIX: Ikon Putih & Jelas */
.stat-box i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #ffffff !important; /* Paksa Putih */
    opacity: 1; /* Tidak transparan */
    display: block;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Bayangan agar kontras */
}

/* FIX: Angka Putih & Besar */
.stat-box strong {
    font-size: 1.8rem;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    font-weight: 800;
    color: #ffffff !important; /* Paksa Putih */
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* FIX: Label Putih & Jelas */
.stat-box span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: rgba(255,255,255,0.9) !important; /* Putih agak soft */
}

/* Variasi Warna Kotak */
.stat-box.kecamatan {
    background: linear-gradient(135deg, #0b486b 0%, #3b8686 100%); /* Biru Tua -> Teal */
}
.stat-box.desa {
    background: linear-gradient(135deg, #3b8686 0%, #79bd9a 100%); /* Teal -> Hijau Sedang */
}
.stat-box.ansor {
    background: linear-gradient(135deg, #79bd9a 0%, #a8dba8 100%); /* Hijau Sedang -> Muda */
}
.stat-box.banser {
    background: linear-gradient(135deg, #e67e22 0%, #f1c40f 100%); /* Oranye -> Kuning */
}
/* =========================================
   FIX FINAL: BERITA POPULER (SIDEBAR MODERN)
========================================= */

.sidebar-widget {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.3rem;
    color: var(--c5); /* Biru Tua */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--c3); /* Garis Hijau */
    position: relative;
}

/* List Container */
.popular-list-sidebar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Jarak antar berita */
}

/* Item Berita Populer */
.popular-list-sidebar li {
    display: flex; /* Flexbox agar gambar & teks sejajar */
    align-items: flex-start; /* Rata atas */
    gap: 15px; /* Jarak antara gambar dan teks */
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.popular-list-sidebar li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.popular-list-sidebar li:hover {
    transform: translateX(5px); /* Efek geser sedikit saat hover */
}

/* Gambar Thumbnail Kecil */
.pop-thumb {
    width: 85px;  /* Lebar tetap */
    height: 85px; /* Tinggi tetap */
    flex-shrink: 0; /* Mencegah gambar mengecil */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
}

.pop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar mengisi kotak tanpa gepeng */
    transition: transform 0.3s ease;
}

.popular-list-sidebar li:hover .pop-thumb img {
    transform: scale(1.1); /* Zoom effect */
}

/* Info Teks */
.pop-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Judul Berita */
.pop-info h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pop-info h4 a {
    text-decoration: none;
    color: var(--text-dark);
    transition: 0.2s;
}

.pop-info h4 a:hover {
    color: var(--c4); /* Warna Teal saat hover */
}

/* Tanggal */
.pop-info small {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pop-info small::before {
    content: '\f017'; /* Kode icon jam (FontAwesome) */
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    color: var(--c3); /* Warna Hijau */
}

/* Angka Urutan Keren (Opsional) */
.popular-list-sidebar {
    counter-reset: pop-counter;
}

.pop-thumb::before {
    counter-increment: pop-counter;
    content: counter(pop-counter);
    position: absolute;
    top: 0;
    left: 0;
    background: var(--c5); /* Biru Tua */
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 0 0 8px 0;
    z-index: 2;
}
/* =========================================
   FIX FINAL: JUDUL MODERN & JARAK PADAT
========================================= */

/* 1. JUDUL SECTION MODERN */
.section-title {
    display: flex;
    flex-direction: column; /* Judul di atas, garis di bawah */
    align-items: flex-start; /* Rata kiri */
    margin-bottom: 25px;
    position: relative;
}

.section-title h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c5); /* Biru Tua */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
}

/* Garis Bawah Judul yang Keren */
.section-title h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background: var(--c4); /* Teal */
    border-radius: 2px;
}

/* Hapus link "Lihat Semua" dari samping judul (karena akan dipindah ke bawah) */
.section-title a {
    display: none; 
}

/* 2. JARAK PADAT (PROGRAM & MITRA) */
.program-section {
    background-color: transparent;
    padding: 0 0 40px 0; /* Hapus padding atas agar naik */
    margin-top: 0; /* Hapus margin atas */
    border: none;
}

.program-section h2 {
    margin-bottom: 25px; /* Kurangi jarak judul ke kartu */
    font-size: 1.8rem;
}

.program-logo-grid {
    gap: 20px; /* Rapatkan jarak antar kartu */
}

.program-logo-item {
    padding: 20px 15px; /* Kecilkan padding dalam kartu */
}

/* Mitra lebih rapat */
.mitra-section {
    margin-top: 0;
    padding-top: 30px;
    border-top: 1px solid #eee;
}
.mitra-grid {
    gap: 20px;
    margin-top: 20px;
}
.mitra-logo {
    padding: 15px;
}

/* 3. TOMBOL LIHAT SEMUA (DI BAWAH KONTEN) */
.section-footer-link {
    text-align: right; /* Rata kanan agar elegan */
    margin-top: 15px;
    margin-bottom: 30px; /* Jarak ke section berikutnya */
}

.section-footer-link a {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c4);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.section-footer-link a:hover {
    color: var(--c5);
    border-bottom-color: var(--c5);
}
/* =========================================
   FIX FINAL: MENU MOBILE (HAMBURGER)
========================================= */

@media (max-width: 992px) {
    /* Tombol Hamburger */
    .hamburger {
        display: flex;
        cursor: pointer;
        flex-direction: column;
        gap: 5px;
        z-index: 10001; /* Pastikan di atas segalanya */
        padding: 10px;  /* Area klik lebih besar */
    }
    
    .bar {
        width: 30px;
        height: 3px;
        background-color: #ffffff; /* Warna putih agar terlihat di header gelap */
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* Animasi Hamburger saat Aktif (Jadi X) */
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Menu Navigasi Mobile */
    .nav-menu {
        position: fixed;
        top: 65px; /* Sesuai tinggi header */
        left: -100%; /* Sembunyi di kiri */
        width: 100%; /* Full width */
        height: calc(100vh - 65px);
        background: #ffffff; /* Latar Putih */
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        transition: 0.4s ease-in-out;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 10000; /* Di atas slider */
    }

    /* Menu Aktif (Muncul) */
    .nav-menu.active {
        left: 0;
    }

    /* Item Menu Mobile */
    .nav-menu > li {
        width: 100%;
        margin-bottom: 0;
    }

    .nav-menu > li > a {
        width: 100%;
        padding: 15px;
        font-size: 1rem;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
        justify-content: space-between; /* Teks kiri, panah kanan */
    }
    
    .nav-menu > li > a:hover {
        background-color: #f9f9f9;
        color: var(--c4);
    }

    /* Dropdown di Mobile */
    .dropdown-menu {
        position: static; /* Tidak melayang, tapi dorong konten bawahnya */
        box-shadow: none;
        border: none;
        background-color: #f9f9f9; /* Latar agak abu */
        display: none; /* Sembunyi default */
        padding-left: 20px; /* Indentasi */
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Tampilkan dropdown saat induknya punya class active */
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    /* Putar panah saat aktif */
    .dropdown.active > a i.fa-chevron-down {
        transform: rotate(180deg);
    }
}
/* =========================================
   FIX FINAL: STRUKTUR ORGANISASI (COMPACT)
========================================= */

/* Container Grid Pengurus - Menggunakan Flex agar Rata Tengah */
.pengurus-list.top-level, 
.pengurus-list.sub-level {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* KUNCI: Agar kartu ada di tengah */
    gap: 25px;
    padding: 0;
    margin-top: 30px;
    list-style: none;
}

.pengurus-item {
    display: flex;
    flex-direction: column;
    /* Pastikan item tidak melebar sendiri */
    width: 100%; 
    max-width: 300px; /* KUNCI: Batasi lebar maksimal kartu */
}

/* KARTU PENGURUS */
.pengurus-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 20px; /* Padding lebih kecil agar compact */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Efek Hover Kartu */
.pengurus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 128, 96, 0.1); /* Bayangan Hijau Halus */
    border-color: var(--c3);
}

/* Hiasan Lengkung di Atas (Opsional, menambah estetika) */
.pengurus-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--c5), var(--c3));
}

/* FOTO PROFIL (Lebih Kecil & Rapi) */
.pengurus-card img {
    width: 100px; /* Ukuran dikecilkan sedikit */
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid var(--c1); /* Border Hijau Muda */
    padding: 3px;
    background: #fff;
    transition: 0.3s;
}

.pengurus-card:hover img {
    border-color: var(--c4); /* Berubah Teal saat hover */
    transform: scale(1.05);
}

/* INFO PENGURUS */
.pengurus-card .info { width: 100%; }

.pengurus-card h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c5);
}

.pengurus-card h4 a {
    color: inherit; text-decoration: none; transition: 0.2s;
}

.pengurus-card h4 a:hover { color: var(--c4); }

/* Jabatan */
.pengurus-card .jabatan {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c4);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    background: rgba(59, 134, 134, 0.08); /* Background tipis */
    padding: 4px 10px;
    border-radius: 20px;
}

/* Detail Alamat (Sembunyikan teks panjang) */
.pengurus-card .details {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 15px;
    border-top: 1px dashed #eee;
    padding-top: 10px;
    width: 100%;
}

.pengurus-card .detail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pengurus-card .detail-item i { color: var(--c3); font-size: 0.9rem; }

/* Tombol Lihat Detail (Kecil & Rapi) */
.btn-profile-detail {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--c5);
    color: var(--c5);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    transition: 0.3s;
    background: transparent;
}

.btn-profile-detail:hover {
    background: var(--c5);
    color: #fff;
    box-shadow: 0 4px 10px rgba(11, 72, 107, 0.2);
}

/* Responsive untuk Sub-Level agar tidak terlalu lebar */
.pengurus-list.sub-level {
    width: 100%;
    grid-column: 1 / -1;
    justify-content: center;
}
/* =========================================
   FIX FINAL: DETAIL PENGURUS (MODERN CARD)
========================================= */

/* Wrapper Utama agar di tengah */
.profile-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* Kartu Profil Modern */
.modern-profile-card {
    width: 100%;
    max-width: 700px; /* Batasi lebar agar tidak melebar */
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.02);
}

/* Banner Atas (Gradasi) */
.profile-banner {
    height: 160px;
    background: linear-gradient(135deg, var(--c5) 0%, var(--c3) 100%); /* Biru ke Hijau */
    position: relative;
}

/* Tombol Kembali (Di atas banner) */
.btn-back-floating {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.3);
}
.btn-back-floating:hover {
    background: #fff;
    color: var(--c5);
}

/* Area Konten Utama */
.profile-main-info {
    text-align: center;
    padding: 0 30px 40px 30px;
    position: relative;
    margin-top: -80px; /* Menarik konten ke atas banner */
}

/* Foto Profil Besar */
.profile-pic-big {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 6px solid #ffffff; /* Border putih tebal */
    object-fit: cover;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    background: #fff;
    margin-bottom: 15px;
}

/* Nama & Jabatan */
.profile-name-big {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c5);
    margin: 0;
    line-height: 1.2;
}

.profile-role-badge {
    display: inline-block;
    background: var(--primary-light-bg);
    color: var(--c4);
    padding: 6px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 10px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Grid Info (Alamat & Bio) */
.profile-details-box {
    text-align: left;
    background: #f9fafb;
    border-radius: 16px;
    padding: 25px;
    margin-top: 10px;
    border: 1px solid #eee;
}

.detail-row {
    margin-bottom: 20px;
}
.detail-row:last-child { margin-bottom: 0; }

.detail-label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.detail-content {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;
    align-items: start;
    gap: 10px;
}

.detail-content i {
    color: var(--c3);
    margin-top: 4px;
}

/* Responsif di HP */
@media (max-width: 600px) {
    .profile-banner { height: 120px; }
    .profile-pic-big { width: 120px; height: 120px; margin-top: 0; }
    .profile-main-info { margin-top: -60px; padding: 0 20px 30px 20px; }
    .profile-name-big { font-size: 1.5rem; }
}
/* =========================================
   FIX FINAL: HALAMAN SAMBUTAN MODERN
========================================= */

/* Wrapper Sambutan */
.sambutan-container {
    display: grid;
    grid-template-columns: 350px 1fr; /* Foto 350px, sisanya teks */
    gap: 50px;
    align-items: flex-start; /* Foto nempel di atas */
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

/* Foto Ketua */
.sambutan-photo-wrapper {
    position: relative;
    text-align: center;
}

.sambutan-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4; /* Proporsi foto potret */
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(11, 72, 107, 0.2);
    border: 5px solid #fff;
}

/* Label Jabatan di bawah foto */
.sambutan-role {
    margin-top: 20px;
    background: var(--primary-light-bg);
    color: var(--c4);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Konten Teks */
.sambutan-content h1 {
    font-size: 2.5rem;
    color: var(--c5);
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.2;
    position: relative;
}

/* Hiasan Garis di bawah judul */
.sambutan-content h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 5px;
    background: var(--c4);
    margin-top: 15px;
    border-radius: 5px;
}

/* Teks Paragraf */
.sambutan-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
    position: relative;
}

/* Tanda Kutip Besar (Dekorasi) */
.sambutan-body::before {
    content: '“';
    font-family: serif;
    font-size: 8rem;
    color: var(--c1); /* Hijau Muda Pucat */
    position: absolute;
    top: -60px;
    left: -30px;
    opacity: 0.5;
    z-index: 0;
}

.sambutan-text {
    position: relative;
    z-index: 1; /* Di atas tanda kutip */
}

/* Responsive HP */
@media (max-width: 992px) {
    .sambutan-container {
        grid-template-columns: 1fr; /* 1 Kolom */
        text-align: center;
        padding: 30px;
    }
    
    .sambutan-photo-wrapper {
        margin-bottom: 30px;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .sambutan-content h1::after {
        margin-left: auto;
        margin-right: auto; /* Garis tengah */
    }
    
    .sambutan-body::before {
        display: none; /* Hapus tanda kutip di HP agar rapi */
    }
}
/* =========================================
   FIX FINAL: HALAMAN STATIS (SEJARAH & VISI MISI)
========================================= */

/* Container Halaman Statis */
.page-container {
    max-width: 850px; /* Lebar ideal untuk membaca */
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Bayangan lembut */
    border: 1px solid rgba(0,0,0,0.02);
}

/* Konten Teks */
.page-content {
    font-size: 1.1rem;
    line-height: 1.9; /* Spasi baris lega */
    color: #444;
    font-family: 'Inter', sans-serif;
}

/* Judul dalam Konten (h1, h2, h3) */
.page-content h1, 
.page-content h2, 
.page-content h3 {
    color: var(--c5); /* Biru Tua */
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: center; /* Judul sub-bab di tengah */
    position: relative;
    padding-bottom: 15px;
}

/* Garis bawah kecil pada judul */
.page-content h1::after,
.page-content h2::after, 
.page-content h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--c3); /* Hijau */
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Paragraf */
.page-content p {
    margin-bottom: 20px;
    text-align: justify; /* Rata kanan-kiri agar rapi */
}

/* List (Visi Misi) */
.page-content ul, 
.page-content ol {
    margin-left: 20px;
    margin-bottom: 25px;
    padding-left: 20px;
    background: #f9fafb; /* Latar belakang list */
    padding: 20px 30px;
    border-radius: 12px;
    border-left: 4px solid var(--c4); /* Garis aksen kiri */
}

.page-content li {
    margin-bottom: 10px;
    padding-left: 5px;
}

.page-content li::marker {
    color: var(--c5); /* Warna nomor/bullet */
    font-weight: bold;
}

/* Responsif HP */
@media (max-width: 768px) {
    .page-container { padding: 30px 20px; }
    .page-hero { padding: 40px 0; }
    .page-hero h1 { font-size: 1.8rem; }
}
/* =========================================
   FIX FINAL: ARSIP PROGRAM (MODERN CARD)
========================================= */

/* Grid Container */
.program-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* Kartu Program Arsip */
.program-archive-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* Hiasan Gradasi di Atas Kartu */
.program-archive-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, var(--c3), var(--c5)); /* Hijau ke Biru */
    opacity: 0.7;
    transition: 0.3s;
}

.program-archive-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(11, 72, 107, 0.15);
    border-color: transparent;
}

.program-archive-card:hover::before {
    opacity: 1;
    height: 8px;
}

/* Wrapper Ikon (Lingkaran) */
.program-icon-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--primary-light-bg); /* Latar Hijau Pucat */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: 0.4s;
}

.program-archive-card:hover .program-icon-circle {
    background: var(--c1); /* Warna berubah saat hover */
    transform: scale(1.1) rotate(5deg);
}

.program-icon-circle img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Badge Jenis Program */
.program-badge {
    background-color: var(--c5); /* Biru Tua */
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
}

/* Judul */
.program-archive-card h3 {
    font-size: 1.4rem;
    color: var(--c5);
    margin-bottom: 15px;
    font-weight: 800;
    line-height: 1.3;
}

/* Deskripsi (Dibatasi 3 baris) */
.program-archive-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Mendorong tombol ke bawah */
    
    /* Line Clamp (Agar tidak kepanjangan) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tombol Detail */
.btn-program-detail {
    padding: 12px 30px;
    background: transparent;
    border: 2px solid var(--c4); /* Teal */
    color: var(--c4);
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-program-detail:hover {
    background: var(--c4);
    color: #fff;
    box-shadow: 0 5px 15px rgba(59, 134, 134, 0.3);
}
/* =========================================
   FIX FINAL: DETAIL PROGRAM (GAYA PROFIL)
========================================= */

/* Wrapper Pusat */
.program-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* Kartu Utama (Mirip Profil) */
.program-modern-card {
    width: 100%;
    max-width: 800px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.02);
}

/* Banner Atas */
.program-banner {
    height: 180px;
    background: linear-gradient(135deg, var(--c4) 0%, var(--c5) 100%); /* Teal ke Biru */
    position: relative;
}

/* Tombol Kembali */
.btn-back-program {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 5;
}
.btn-back-program:hover {
    background: #fff;
    color: var(--c5);
}

/* Area Konten Utama */
.program-main-info {
    text-align: center;
    padding: 0 40px 50px 40px;
    margin-top: -90px; /* Menarik konten ke atas banner */
    position: relative;
}

/* Logo Program (Overlap) */
.program-logo-big {
    width: 160px;
    height: 160px;
    background: #fff;
    border-radius: 20px; /* Kotak tumpul (beda dikit dgn profil yg bulat) */
    padding: 15px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

/* Judul Program */
.program-title-big {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--c5);
    margin: 0 0 10px 0;
    line-height: 1.2;
}

/* Badge Jenis Program */
.program-type-badge {
    display: inline-block;
    background: var(--primary-light-bg);
    color: var(--c4);
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

/* Garis Pemisah */
.program-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
    margin: 0 auto 30px auto;
    width: 100%;
}

/* Isi Konten (Rata Kiri agar enak dibaca) */
.program-body-text {
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.program-body-text p {
    margin-bottom: 20px;
}

/* Responsif HP */
@media (max-width: 600px) {
    .program-banner { height: 140px; }
    .program-logo-big { width: 120px; height: 120px; margin-top: 0; }
    .program-main-info { margin-top: -60px; padding: 0 20px 40px 20px; }
    .program-title-big { font-size: 1.8rem; }
}

/* =======================================================
   FIX FINAL LAYOUT HP (PASTE DI PALING BAWAH STYLE.CSS)
   Agar Sidebar Turun & Berita Tidak Tergencet
======================================================= */

@media (max-width: 992px) {
    
    /* 1. PAKSA LAYOUT UTAMA JADI 1 KOLOM (TUMPUK) */
    .main-content-grid {
        display: flex !important;
        flex-direction: column !important; /* Berita di atas, Sidebar di bawah */
        grid-template-columns: 1fr !important; /* Reset Grid */
        gap: 40px;
    }

    /* 2. ATUR KARTU BERITA DI HP */
    .home-news-grid {
        grid-template-columns: 1fr !important; /* 1 Berita per baris */
    }

    .home-news-card {
        height: auto !important; /* Tinggi otomatis menyesuaikan isi */
        min-height: 130px;       /* Minimal tinggi */
    }

    /* Gambar Berita di HP (Kecilkan sedikit) */
    .home-news-img {
        width: 35% !important;   /* Gambar 35% */
    }

    /* Teks Berita di HP (Lebarkan) */
    .home-news-content {
        width: 65% !important;   /* Teks 65% */
        padding: 12px 15px !important; /* Padding lebih hemat */
    }

    /* Judul Berita di HP */
    .home-news-title {
        font-size: 0.95rem !important; /* Font judul disesuaikan HP */
        margin-bottom: 5px !important;
        -webkit-line-clamp: 3; /* Maksimal 3 baris */
    }

    /* Tombol Baca di HP */
    .home-read-more {
        font-size: 0.8rem !important;
        margin-top: 8px !important;
    }
    
    /* 3. RAPICAH SIDEBAR DI HP */
    .home-sidebar {
        width: 100%;
        margin-top: 20px;
    }
}
/* =========================================
   FIX PAGINATION BERITA (INDEX)
========================================= */

/* Pastikan Grid Desktop Selalu 2 Kolom */
@media (min-width: 769px) {
    .home-news-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Paksa 2 Kolom */
    }
}

/* Container Tombol Angka */
.pagination-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Desain Tombol Angka */
.page-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #ddd;
    color: var(--c5);
    border-radius: 50%; /* Bulat */
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
    font-size: 0.9rem;
}

/* Tombol Aktif / Hover */
.page-btn.active, .page-btn:hover {
    background: var(--c4); /* Teal */
    color: #fff;
    border-color: var(--c4);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(59, 134, 134, 0.3);
}
/* =========================================
   FIX LOGO HEADER BERTINGKAT (OFFICIAL LOOK)
========================================= */

/* Wrapper Teks Logo */
.logo-text-group {
    display: flex;
    flex-direction: column; /* Menyusun ke bawah */
    justify-content: center;
    line-height: 1.1; /* Jarak antar baris rapat */
    color: #ffffff;
}

/* Baris 1: PIMPINAN CABANG */
.logo-line-1 {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px; /* Huruf agak renggang biar elegan */
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Baris 2: GERAKAN PEMUDA ANSOR */
.logo-line-2 {
    font-family: var(--font-heading); /* Font Tebal */
    font-size: 1.3rem; /* Paling Besar */
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Bayangan teks biar jelas */
}

/* Baris 3: KABUPATEN MADIUN */
.logo-line-3 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c1); /* Warna Aksen (Kuning/Hijau Muda) */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Penyesuaian Logo Gambar */
.logo img {
    height: 55px; /* Sedikit diperbesar biar seimbang sama 3 baris teks */
    width: auto;
    margin-right: 15px;
}

/* Responsif HP */
@media (max-width: 768px) {
    .logo img { height: 45px; margin-right: 10px; }
    
    .logo-line-1 { font-size: 0.55rem; letter-spacing: 1px; }
    .logo-line-2 { font-size: 1rem; }
    .logo-line-3 { font-size: 0.65rem; }
}
/* =========================================
   FIX LOGO HEADER (GAYA SURAT RESMI)
   Ganti di bagian paling bawah style.css
========================================= */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Wrapper Teks */
.logo-text-group {
    display: flex;
    flex-direction: column; /* Susun ke bawah */
    justify-content: center;
    align-items: flex-start; /* Rata Kiri */
    line-height: 0.7; /* Jarak baris rapat */
    color: #ffffff;
    font-family: "Times New Roman", Times, serif; /* FONT RESMI */
    margin-left: 10px;
}

/* Baris 1: PIMPINAN CABANG */
.logo-line-1 {
    font-size: 0rem; /* Ukuran Kecil */
    font-weight: 10;  /* Biasa (Tidak Bold) */
    letter-spacing: 0px;
    text-transform: uppercase;
}

/* Baris 2: GERAKAN PEMUDA ANSOR */
.logo-line-2 {
    font-size: 0.1rem; /* Paling Besar */
    font-weight: 50;  /* Sangat Tebal (Bold) */
    text-transform: uppercase;
    margin: 1px 0;
    letter-spacing: 0px;
}

/* Baris 3: KABUPATEN MADIUN */
.logo-line-3 {
    font-size: 1.1rem; /* Sedang */
    font-weight: 400;  /* Biasa (Tidak Bold) */
    text-transform: uppercase;
}

/* Penyesuaian Logo Gambar */
.logo img {
    height: 40px; /* Gambar agak besar biar imbang */
    width: auto;
    border-radius: 0; /* Hapus radius jika ingin kotak/asli */
    background: transparent; /* Transparan */
    padding: 0;
    box-shadow: none;
}

/* --- TAMPILAN HP (RESPONSIF) --- */
@media (max-width: 768px) {
    .logo img { height: 25px; margin-right: 5px; }
    
    .logo-text-group { margin-left: 5px; }
    
    .logo-line-1 { font-size: 1.0rem; }
    .logo-line-2 { font-size: 0.1rem; }
    .logo-line-3 { font-size: 0.1rem; }
}
/* =========================================
   FIX GLOBAL: HEADER HALAMAN MODERN (HIJAU-BIRU)
   Paste di paling bawah style.css
========================================= */

.page-header-gradient {
    /* Gradasi Hijau (Kiri) ke Biru (Kanan) */
    background: linear-gradient(135deg, #009b4c 0%, #007bff 100%);
    padding: 80px 20px 90px; /* Spasi atas bawah lega */
    text-align: center;
    color: #ffffff;
    position: relative;
    /* Lengkungan di bawah agar tidak kaku */
    border-radius: 0 0 50% 50% / 0 0 25px 25px;
    margin-bottom: 50px; /* Jarak ke konten bawah */
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.15);
    overflow: hidden;
}

/* Hiasan Lingkaran Samar (Agar tidak polos) */
.page-header-gradient::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: putar 60s linear infinite; /* Animasi putar pelan */
    pointer-events: none;
}

@keyframes putar { 100% { transform: rotate(360deg); } }

/* Judul Besar */
.page-header-gradient h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Deskripsi Kecil */
.page-header-gradient p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto;
    color: #e0f2f1; /* Putih kehijauan */
}

/* Responsif HP */
@media (max-width: 768px) {
    .page-header-gradient {
        padding: 50px 20px 70px;
        margin-bottom: 30px;
    }
    .page-header-gradient h1 {
        font-size: 2rem; /* Judul lebih kecil di HP */
    }
    .page-header-gradient p {
        font-size: 0.9rem;
    }
}

/* =============================================
   HEADER MODERN & CANGGIH (ANIMATED GRADIENT)
   Copy ke style.css
============================================= */

/* 1. ANIMASI BACKGROUND (Hijau - Teal - Biru) */
@keyframes gradientAnim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. HEADER CONTAINER UTAMA */
#main-header {
    /* Gradasi Animasi */
    background: linear-gradient(-45deg, #0b486b, #009b4c, #007bff, #3b8686);
    background-size: 400% 400%;
    animation: gradientAnim 15s ease infinite;
    
    position: fixed; /* Sticky di atas */
    top: 0; left: 0; width: 100%;
    z-index: 9999;
    height: 80px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Efek saat discroll (Mengecil & Glassmorphism) */
#main-header.scrolled {
    height: 70px;
    background: rgba(11, 72, 107, 0.95); /* Warna solid transparan */
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1280px; /* Lebar maksimal konten */
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. LOGO AREA */
.logo-area {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
}

.logo-area img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: 0.3s;
}

#main-header.scrolled .logo-area img {
    height: 40px; /* Logo mengecil saat scroll */
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.logo-small {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.9);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo-main {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.logo-sub {
    font-size: 0.75rem;
    color: #cff09e; /* Warna aksen kuning/hijau muda */
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 4. NAVIGASI DESKTOP */
.desktop-nav {
    display: flex;
}

.nav-links {
    display: flex;
    gap: 5px;
    list-style: none;
    margin: 0; padding: 0;
}

.nav-links li { position: relative; }

.nav-links > li > a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 15px;
    border-radius: 20px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-links > li > a:hover, 
.nav-links > li > a.active {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 600;
}

.nav-links > li > a i { font-size: 0.7rem; opacity: 0.7; margin-top: 2px; }

/* Dropdown Menu (Desktop) */
.dropdown {
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 10px 0;
    opacity: 0; visibility: hidden;
    transform: translateY(15px);
    transition: 0.3s ease;
    z-index: 1000;
}

.has-dropdown:hover .dropdown {
    opacity: 1; visibility: visible; transform: translateY(5px);
}

.dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 0.9rem;
    transition: 0.2s;
    border-left: 3px solid transparent;
}

.dropdown li a:hover {
    background: #f4f6f8;
    color: #009b4c;
    border-left-color: #009b4c;
    padding-left: 25px; /* Efek geser */
}

/* 5. HEADER ACTIONS (KANAN) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Tombol Daftar di Header */
.btn-daftar-header {
    background: #fff;
    color: #009b4c;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: 0.3s;
    display: flex; align-items: center; gap: 8px;
}

.btn-daftar-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    background: #f0fff4;
}

/* Hamburger Toggle (Hidden on Desktop) */
.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.mobile-toggle .bar {
    width: 25px; height: 3px; background: #fff; border-radius: 2px;
}

/* =============================================
   RESPONSIVE (HP / TABLET)
============================================= */
@media (max-width: 992px) {
    /* Sembunyikan Nav Desktop */
    .desktop-nav { display: none; }
    
    /* Tampilkan Hamburger */
    .mobile-toggle { display: flex; }
    
    /* Tombol Daftar disembunyikan di header HP (pindah ke menu) */
    .btn-daftar-header { display: none; }
    
    /* Logo di HP disederhanakan */
    .logo-main { font-size: 1rem; }
    .logo-sub { font-size: 0.65rem; }
    .logo-area img { height: 40px; }
}

/* =============================================
   MOBILE MENU (SLIDE DARI KANAN)
============================================= */
.mobile-menu-container {
    position: fixed;
    top: 0; right: -300px; /* Sembunyi di kanan */
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -5px 0 30px rgba(0,0,0,0.1);
    display: flex; flex-direction: column;
}

.mobile-menu-container.active { right: 0; }

.mobile-header-top {
    padding: 20px;
    background: #009b4c; /* Hijau header mobile */
    color: #fff;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; font-size: 1.1rem;
}

.close-menu {
    background: transparent; border: none; color: #fff; font-size: 1.5rem; cursor: pointer;
}

.mobile-links {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.mobile-links > a {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 0;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1rem;
}

.mobile-links > a.active { color: #009b4c; }
.mobile-links > a i { width: 25px; text-align: center; color: #aaa; }
.mobile-links > a.active i { color: #009b4c; }

/* Mobile Dropdown (Accordion) */
.drop-btn {
    width: 100%;
    text-align: left;
    background: none; border: none;
    padding: 12px 0;
    font-size: 1rem; font-weight: 600; color: #333;
    border-bottom: 1px solid #f0f0f0;
    display: flex; align-items: center; gap: 15px;
    cursor: pointer;
}
.drop-btn i:first-child { width: 25px; text-align: center; color: #aaa; }
.drop-btn .arrow { margin-left: auto; font-size: 0.8rem; transition: 0.3s; }
.drop-btn.open .arrow { transform: rotate(90deg); }

.sub-menu {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #f9f9f9;
    padding-left: 40px; /* Indentasi */
}

.sub-menu a {
    display: block; padding: 10px 0;
    color: #666; text-decoration: none; font-size: 0.9rem;
}
.sub-menu a:hover { color: #009b4c; }

/* Tombol di Mobile Menu */
.btn-mobile-daftar {
    display: block; text-align: center;
    background: #009b4c; color: #fff;
    padding: 12px; border-radius: 8px;
    font-weight: 700; text-decoration: none;
    margin-bottom: 10px;
}
.btn-mobile-login {
    display: block; text-align: center;
    border: 2px solid #009b4c; color: #009b4c;
    padding: 10px; border-radius: 8px;
    font-weight: 700; text-decoration: none;
}

/* Overlay Gelap */
.mobile-menu-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0; visibility: hidden;
    transition: 0.3s;
    backdrop-filter: blur(3px);
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

/* Kunci Scroll Body saat menu buka */
body.no-scroll { overflow: hidden; }

/* =========================================
   HERO SLIDER MODERN & CANGGIH
   Theme: Ansor Gradient (Green - Teal - Blue)
========================================= */

/* 1. Container Utama */
.hero-modern {
    position: relative;
    width: 100%;
    height: 100vh;        /* Full layar di desktop */
    min-height: 600px;    /* Tinggi minimal */
    max-height: 800px;    /* Batas tinggi agar tidak terlalu panjang */
    overflow: hidden;
    margin-top: 0;
    background: #000;
}

.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 2. Slide Item & Animasi Fade */
.slide-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s;
    z-index: 1;
}

.slide-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* 3. Background Image & Efek Ken Burns (Zoom) */
.slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0; left: 0;
    transform: scale(1);
    transition: transform 10s ease; /* Durasi zoom perlahan */
}

/* Saat aktif, gambar membesar pelan-pelan */
.slide-item.active .slide-bg {
    transform: scale(1.1); 
}

/* 4. Overlay Gradasi Gelap (Agar teks terbaca) */
.slide-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Gradasi dari Hitam Transparan ke Hijau Gelap */
    background: linear-gradient(to right, rgba(0, 50, 20, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

/* 5. Wrapper Konten Teks */
.slide-content-wrapper {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center; /* Vertikal tengah */
    justify-content: flex-start; /* Rata Kiri */
    padding-left: 5%;
}

/* 6. KOTAK KACA (GLASSMORPHISM) */
.slide-content.glass-effect {
    background: rgba(255, 255, 255, 0.1); /* Putih Transparan */
    backdrop-filter: blur(10px);          /* Efek Blur */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 6px solid #00ff88;       /* Garis Neon Hijau */
    padding: 40px 50px;
    max-width: 650px;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    /* Animasi Masuk */
    transform: translateX(-50px);
    opacity: 0;
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.5s;
}

.slide-item.active .slide-content.glass-effect {
    transform: translateX(0);
    opacity: 1;
}

/* Elemen Teks */
.slide-badge {
    display: inline-block;
    background: linear-gradient(90deg, #009b4c, #007bff); /* Gradasi Hijau Biru */
    color: white;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(0, 155, 76, 0.4);
}

.slide-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #ffffff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.slide-desc {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 35px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 90%;
}

/* 7. Tombol Keren (Glow Animation) */
.btn-glow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: linear-gradient(45deg, #009b4c, #007bff);
    color: white;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    border: 1px solid rgba(255,255,255,0.2);
}

.btn-glow:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.5);
    color: #fff;
}

/* 8. Tombol Navigasi (Panah) */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 60px; height: 60px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: 0.3s;
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.slider-nav:hover {
    background: #009b4c;
    border-color: #009b4c;
    transform: translateY(-50%) scale(1.1);
}
.prev-btn { left: 30px; }
.next-btn { right: 30px; }

/* Indikator (Dots) */
.slider-indicators {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 20;
}
.indicator {
    width: 14px; height: 14px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    border: 2px solid transparent;
}
.indicator.active {
    background: #00ff88;
    width: 40px;
    border-radius: 20px;
    box-shadow: 0 0 10px #00ff88;
}

/* =========================================
   RESPONSIVE (HP)
   Agar slider bagus di layar kecil
========================================= */
@media (max-width: 768px) {
    .hero-modern {
        height: 100vh; /* Full layar HP */
        min-height: 500px;
    }

    .slide-overlay {
        /* Gradasi dari bawah ke atas agar teks terbaca jelas */
        background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0, 50, 20, 0.6) 60%, rgba(0,0,0,0.2) 100%);
    }

    .slide-content-wrapper {
        justify-content: center;
        align-items: flex-end; /* Teks turun ke bawah */
        padding: 0 20px 80px 20px; /* Padding bawah lebih besar */
        text-align: center;
    }

    .slide-content.glass-effect {
        background: transparent; /* Hilangkan kotak kaca di HP */
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 0;
        border-left: none;
        transform: translateY(20px);
        max-width: 100%;
        border-radius: 0;
    }
    
    .slide-item.active .slide-content.glass-effect {
        transform: translateY(0);
    }

    .slide-title {
        font-size: 2.2rem; /* Font judul lebih kecil */
        margin-bottom: 15px;
    }

    .slide-desc {
        font-size: 1rem;
        margin-bottom: 25px;
        line-height: 1.5;
        max-width: 100%;
    }

    .btn-glow {
        padding: 12px 30px;
        font-size: 0.9rem;
        width: 100%; /* Tombol lebar penuh */
        justify-content: center;
    }

    /* Sembunyikan panah di HP biar bersih, pakai swipe/dots saja */
    .slider-nav { display: none; }
    
    .slider-indicators { bottom: 20px; }
}
/* =========================================
   STYLE SHOP / ANSORSTORE
========================================= */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.product-card {
    background: #fff; border-radius: 15px; overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: 0.3s;
    border: 1px solid #eee; display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.prod-img-box { height: 200px; position: relative; overflow: hidden; }
.prod-img-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.product-card:hover img { transform: scale(1.1); }

.badge-cat {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: rgba(255,255,255,0.9); padding: 4px 10px;
    border-radius: 20px; font-size: 0.7rem; font-weight: bold; color: var(--c5);
}

.prod-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}
.product-card:hover .prod-overlay { opacity: 1; }

.btn-view-prod {
    background: #fff; color: #333; padding: 10px 20px;
    border-radius: 30px; font-weight: bold; text-decoration: none;
}

.prod-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.prod-title { font-size: 1.1rem; margin: 5px 0 10px; }
.prod-title a { color: #333; text-decoration: none; }
.price { color: var(--c4); font-weight: 800; font-size: 1.1rem; }
.prod-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }

/* DETAIL PAGE */
.detail-shop-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: #fff; padding: 40px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
.main-prod-img { width: 100%; border-radius: 15px; }
.detail-title { font-size: 2rem; margin: 10px 0; color: var(--c5); }
.detail-price { font-size: 1.8rem; font-weight: bold; color: var(--c4); margin-bottom: 20px; }
.btn-chat-wa {
    background: linear-gradient(45deg, #25D366, #128C7E);
    color: white; padding: 15px 30px; border: none; border-radius: 50px;
    font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.3s;
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-chat-wa:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4); }

/* MODAL */
.shop-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 9999; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.shop-modal-overlay.active { opacity: 1; visibility: visible; }
.shop-modal-box {
    background: #fff; width: 90%; max-width: 400px; padding: 30px;
    border-radius: 15px; position: relative; transform: scale(0.8); transition: 0.3s;
}
.shop-modal-overlay.active .shop-modal-box { transform: scale(1); }
.close-modal-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.input-shop { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; margin-top: 5px; }
.btn-send-wa { background: #25D366; color: white; width: 100%; padding: 12px; border: none; border-radius: 8px; margin-top: 20px; font-weight: bold; cursor: pointer; }

@media (max-width: 768px) {
    .detail-shop-wrapper { grid-template-columns: 1fr; padding: 20px; }
}
/* =========================================
   STYLE ANSORSTORE MODERN (SEARCH & GRID HP)
   Tambahkan di bagian paling bawah style.css
========================================= */

/* --- SEARCH & FILTER SECTION --- */
.search-section-shop {
    margin-top: -40px; /* Naik ke atas header sedikit */
    position: relative;
    z-index: 10;
    margin-bottom: 40px;
}

.search-form-shop {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.search-group {
    flex: 1;
    display: flex;
    background: #f4f6f8;
    border-radius: 50px;
    padding: 5px 20px;
    border: 1px solid #eee;
}

.search-group input {
    border: none;
    background: transparent;
    padding: 10px;
    width: 100%;
    outline: none;
    font-size: 1rem;
}

.search-group button {
    background: none;
    border: none;
    color: var(--c4);
    cursor: pointer;
    font-size: 1.1rem;
}

.filter-group select {
    padding: 12px 20px;
    border-radius: 50px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    color: #555;
}

.btn-reset-filter {
    color: #ef4444;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- PRODUCT GRID (RESPONSIVE 2 KOLOM DI HP) --- */
.shop-grid {
    display: grid;
    /* Desktop: Otomatis mengisi, minimal 250px */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 25px;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--c3);
}

.prod-link-wrapper {
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Gambar Produk */
.prod-img-box {
    height: 200px; /* Tinggi default desktop */
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #f9f9f9;
}

.prod-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.product-card:hover .prod-img-box img {
    transform: scale(1.08);
}

.badge-cat {
    position: absolute;
    top: 10px; right: 10px; /* Pindah ke kanan atas */
    background: rgba(255,255,255,0.95);
    color: var(--c5);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Info Produk */
.prod-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.prod-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
    color: #333;
    
    /* Batasi 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prod-meta {
    margin-top: auto;
}

.price {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c4); /* Warna Teal */
    margin-bottom: 5px;
}

.owner {
    display: block;
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tombol Aksi Bawah */
.prod-action {
    padding: 10px 15px 15px;
    border-top: 1px dashed #eee;
}

.btn-detail-shop {
    display: block;
    width: 100%;
    text-align: center;
    background: #f0fdf4; /* Hijau pudar */
    color: var(--c4);
    padding: 8px 0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn-detail-shop:hover {
    background: var(--c4);
    color: #fff;
}

/* --- EMPTY STATE --- */
.empty-state-shop {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border-radius: 15px;
    border: 1px dashed #ccc;
}
.empty-state-shop i { font-size: 3rem; color: #ddd; margin-bottom: 15px; }
.btn-back-shop { display: inline-block; margin-top: 15px; text-decoration: none; color: var(--c4); font-weight: 600; }

/* --- PAGINATION --- */
.pagination-shop {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.page-link {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.page-link.active, .page-link:hover {
    background: var(--c4);
    color: #fff;
    border-color: var(--c4);
    box-shadow: 0 5px 10px rgba(59, 134, 134, 0.3);
}

.btn-show-all {
    padding: 0 20px;
    height: 40px;
    display: flex; align-items: center;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--c4);
    color: var(--c4);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.3s;
}
.btn-show-all:hover { background: var(--c4); color: #fff; }


/* =========================================
   RESPONSIVE KHUSUS HP (2 KOLOM JAJAR)
========================================= */
@media (max-width: 600px) {
    .search-form-shop {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }
    .search-group, .filter-group select { width: 100%; }
    
    .shop-grid {
        /* KUNCI: 2 Kolom di HP */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; /* Jarak lebih rapat */
    }

    .product-card {
        border-radius: 10px;
    }

    .prod-img-box {
        height: 140px; /* Gambar lebih pendek di HP */
    }

    .badge-cat {
        font-size: 0.6rem;
        padding: 3px 8px;
        top: 8px; right: 8px;
    }

    .prod-info {
        padding: 12px;
    }

    .prod-title {
        font-size: 0.9rem; /* Judul lebih kecil */
        margin-bottom: 5px;
    }

    .price {
        font-size: 0.95rem;
    }

    .owner {
        font-size: 0.7rem;
    }

    .prod-action {
        padding: 8px 12px 12px;
    }

    .btn-detail-shop {
        font-size: 0.8rem;
        padding: 6px 0;
    }
}
/* --- STYLE TOMBOL LOGIN HEADER --- */
.btn-login-header {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Garis tepi transparan */
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-login-header:hover {
    background: rgba(255, 255, 255, 0.15); /* Efek hover menyala dikit */
    border-color: #fff;
    transform: translateY(-2px);
}

/* Sembunyikan tombol ini di HP (karena sudah ada di dalam Menu Hamburger) */
@media (max-width: 992px) {
    .btn-login-header { display: none; }
}
/* =========================================
   STYLE BERITA FINAL (GRID HP 2 KOLOM & ANIMASI)
   Paste di paling bawah style.css
========================================= */

/* --- 1. HERO SECTION ANIMASI (HIJAU-BIRU) --- */
.news-hero-animated {
    background: linear-gradient(-45deg, #0b486b, #009b4c, #007bff, #006030);
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
    padding: 100px 20px 140px;
    text-align: center; color: white;
    border-radius: 0 0 50px 50px;
    position: relative; overflow: hidden;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-tag {
    background: rgba(255,255,255,0.2); padding: 5px 15px;
    border-radius: 20px; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;
    display: inline-block; backdrop-filter: blur(5px);
}

/* --- PERBAIKAN WARNA JUDUL HERO (BERITA) --- */
.hero-title-text {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 10px;
    
    /* INI KUNCI PERUBAHANNYA: WARNA PUTIH */
    color: #ffffff !important; 
    
    /* Tambah bayangan agar teks 'pop' keluar dari background */
    text-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    
    position: relative;
    z-index: 2;
}

/* Opsional: Perbaiki juga sub-judul agar putih */
.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9) !important; /* Putih agak transparan */
    margin-bottom: 30px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
/* --- 2. SEARCH BAR CANGGIH --- */
.search-container-modern {
    max-width: 650px; margin: 0 auto;
    position: relative; z-index: 10;
}

.search-form-glass {
    display: flex; align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px; border-radius: 50px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.search-form-glass:focus-within { transform: scale(1.02); }

.search-icon { color: #888; margin-left: 20px; font-size: 1.1rem; }

.search-form-glass input {
    flex: 1; border: none; background: transparent;
    padding: 15px; font-size: 1rem; outline: none; color: #333;
}

.search-form-glass button {
    background: linear-gradient(90deg, #009b4c, #007bff);
    color: white; border: none; padding: 12px 35px;
    border-radius: 30px; font-weight: 700; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 155, 76, 0.3);
    transition: 0.3s;
}
.search-form-glass button:hover { opacity: 0.9; transform: translateY(-2px); }

/* --- 3. LAYOUT UTAMA --- */
.news-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px; /* Sidebar Kanan */
    gap: 40px; align-items: start;
}

.search-alert {
    background: #e0f2fe; color: #0284c7; padding: 15px;
    border-radius: 10px; margin-bottom: 20px; font-size: 0.95rem;
}

/* --- 4. GRID BERITA (INTI PERMINTAAN) --- */
.news-grid-final {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 Kolom */
    gap: 25px;
}

.news-card-final {
    background: #fff; border-radius: 15px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0; transition: all 0.3s ease;
    display: flex; flex-direction: column; height: 100%;
}
.news-card-final:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.card-media {
    height: 180px; position: relative; overflow: hidden;
}
.card-media img {
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.news-card-final:hover img { transform: scale(1.1); }

.category-pill {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,0.95); color: #009b4c;
    font-size: 0.65rem; font-weight: 800; padding: 4px 10px;
    border-radius: 20px; text-transform: uppercase;
}

.card-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }

.meta-date { font-size: 0.75rem; color: #999; margin-bottom: 5px; }

.card-heading {
    font-size: 1rem; margin: 0 0 10px; line-height: 1.4;
    color: #1e293b; font-weight: 700;
    
    /* Batasi judul max 2 baris */
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.card-heading a { color: inherit; text-decoration: none; transition: 0.2s; }
.card-heading a:hover { color: #009b4c; }

.link-arrow {
    margin-top: auto; font-size: 0.8rem; font-weight: 700;
    color: #009b4c; text-decoration: none; display: flex; align-items: center; gap: 5px;
}

/* --- 5. PAGINATION --- */
.pagination-final {
    display: flex; justify-content: center; gap: 8px; margin-top: 50px;
}
.page-num {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #ddd; border-radius: 10px;
    color: #555; text-decoration: none; font-weight: 600; transition: 0.3s;
}
.page-num.active, .page-num:hover {
    background: #009b4c; color: white; border-color: #009b4c;
    box-shadow: 0 5px 15px rgba(0, 155, 76, 0.3);
}

/* --- 6. SIDEBAR --- */
.widget-clean {
    background: #fff; padding: 25px; border-radius: 15px;
    border: 1px solid #eee; box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.widget-head {
    font-size: 1.1rem; color: #333; border-bottom: 2px solid #f5f5f5;
    padding-bottom: 15px; margin: 0 0 20px;
}
.pop-item-final {
    display: flex; gap: 15px; margin-bottom: 20px; align-items: center;
    text-decoration: none;
}
.pop-item-final:last-child { margin-bottom: 0; }
.pop-idx {
    font-size: 1.2rem; font-weight: 800; color: #eee; font-style: italic;
}
.pop-details h5 {
    font-size: 0.9rem; margin: 0 0 3px; color: #333; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pop-details small { color: #aaa; font-size: 0.7rem; }

/* =========================================
   RESPONSIVE HP (GRID 2 KOLOM)
========================================= */
@media (max-width: 992px) {
    .news-header-animated { padding: 80px 20px 100px; }
    .hero-title-text { font-size: 2rem; }
    
    .news-layout-wrapper {
        grid-template-columns: 1fr; /* Sidebar pindah bawah */
        gap: 40px;
    }

    /* --- INI KUNCI AGAR 2 KOLOM DI HP --- */
    .news-grid-final {
        grid-template-columns: repeat(2, 1fr) !important; /* Paksa 2 Kolom */
        gap: 15px; /* Jarak lebih rapat */
    }

    /* Penyesuaian Ukuran Kartu di HP */
    .card-media { height: 120px; } /* Gambar lebih pendek */
    .card-info { padding: 12px; }
    .card-heading { font-size: 0.9rem; margin-bottom: 8px; } /* Judul lebih kecil */
    .meta-date { font-size: 0.65rem; }
    .link-arrow { font-size: 0.7rem; }
    .category-pill { font-size: 0.55rem; padding: 2px 6px; top: 6px; right: 6px; }
    
    /* Search Bar di HP */
    .search-form-glass { padding: 5px; }
    .search-form-glass input { padding: 10px; font-size: 0.9rem; }
    .search-form-glass button { padding: 8px 20px; font-size: 0.9rem; }
}
/* =========================================
   ULTIMATE HEADER: RIGHT ALIGNED & APP STYLE
   (Paste di paling bawah style.css)
========================================= */

/* 1. NAVBAR CONTAINER (FIXED & GRADIENT) */
#navbar-master {
    position: fixed; top: 0; left: 0; width: 100%; height: 80px;
    background: linear-gradient(90deg, #0b486b, #009b4c);
    z-index: 9999; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
#navbar-master.scrolled {
    height: 65px; background: rgba(11, 72, 107, 0.95);
    backdrop-filter: blur(10px);
}
.header-spacer { height: 80px; display: block; }

.nav-container {
    display: flex; justify-content: space-between; align-items: center;
    height: 100%; padding: 0 20px;
}

/* 2. LOGO DINAMIS (KIRI) */
.brand-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-area img { height: 48px; width: auto; transition: 0.3s; }
#navbar-master.scrolled .brand-area img { height: 40px; }

.brand-info { display: flex; flex-direction: column; line-height: 1.1; color: #fff; }
.b-small { font-size: 0.6rem; letter-spacing: 1px; opacity: 0.85; }
.b-main { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; }
.b-sub { font-size: 0.6rem; font-weight: 700; color: #a5f3fc; letter-spacing: 0.5px; }

/* 3. GROUP KANAN (MENU + ICON) -> KUNCI POSISI MEPET KANAN */
.nav-right-group {
    display: flex; align-items: center; gap: 25px; /* Jarak antara Menu dan Icon */
}

/* Menu Desktop */
.desktop-menu ul {
    display: flex; list-style: none; margin: 0; padding: 0; gap: 5px;
}
.desktop-menu li { position: relative; }

.desktop-menu a {
    color: rgba(255,255,255,0.9); text-decoration: none;
    font-size: 0.9rem; font-weight: 500; padding: 8px 12px;
    border-radius: 8px; transition: 0.3s; display: flex; align-items: center; gap: 5px;
}
.desktop-menu a:hover, .desktop-menu a.active {
    color: #fff; background: rgba(255,255,255,0.15);
}
.desktop-menu a i { font-size: 0.7rem; margin-top: 2px; opacity: 0.7; }

/* Dropdown Desktop */
.drop-box {
    position: absolute; top: 120%; right: 0; /* Mepet kanan dropdownnya */
    background: #fff; min-width: 220px; padding: 10px 0;
    border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10000;
}
.drop-item:hover .drop-box { opacity: 1; visibility: visible; transform: translateY(0); top: 100%; }

.drop-box a {
    color: #333 !important; display: block; padding: 10px 20px;
    font-size: 0.9rem; font-weight: 500; border-radius: 0;
}
.drop-box a:hover {
    background: #f0fdf4; color: #009b4c !important; padding-left: 25px;
}

/* Divider Garis */
.nav-divider {
    width: 1px; height: 30px; background: rgba(255,255,255,0.2);
}

/* Ikon Aksi */
.icon-actions { display: flex; gap: 10px; }
.nav-icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: 0.3s; text-decoration: none;
}
.nav-icon-btn:hover { background: #fff; color: #009b4c; transform: translateY(-2px); }
.login-btn:hover { color: #009b4c; background: #fff; }

/* Hamburger */
.hamburger-btn {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 5px;
}
.hamburger-btn span { width: 28px; height: 3px; background: #fff; border-radius: 3px; }

/* =========================================
   MOBILE APP DRAWER (MODERN SLIDE)
========================================= */
#app-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5); z-index: 10000;
    opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(4px);
}
#app-overlay.open { opacity: 1; visibility: visible; }

#app-drawer {
    position: fixed; top:0; right: -320px; width: 300px; height: 100vh;
    background: #f8fafc; z-index: 10001; transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,0.2);
}
#app-drawer.open { right: 0; }

/* Drawer Header */
.drawer-head {
    padding: 25px 20px; background: #009b4c; color: white;
    display: flex; align-items: center; justify-content: space-between;
    background-image: linear-gradient(135deg, #009b4c 0%, #0b486b 100%);
}
.drawer-brand { display: flex; align-items: center; gap: 15px; }
.drawer-logo { width: 45px; height: 45px; background: #fff; border-radius: 50%; padding: 3px; }
.drawer-title strong { display: block; font-size: 1rem; }
.drawer-title small { opacity: 0.8; font-size: 0.75rem; }
.drawer-close { background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; }

/* Drawer Body */
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }

.d-item {
    display: flex; align-items: center; gap: 15px; padding: 12px 15px;
    background: #fff; border-radius: 12px; margin-bottom: 10px;
    text-decoration: none; color: #334155; font-weight: 600;
    border: 1px solid #f1f5f9; transition: 0.2s;
}
.d-item .icon { width: 25px; text-align: center; color: #94a3b8; }
.d-item.active, .d-item:hover { border-color: #009b4c; color: #009b4c; background: #f0fdf4; }
.d-item.active .icon, .d-item:hover .icon { color: #009b4c; }

/* Drawer Accordion */
.d-trigger {
    width: 100%; text-align: left; padding: 12px 15px; background: #fff; border: 1px solid #f1f5f9;
    border-radius: 12px; margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between;
    font-size: 1rem; font-weight: 600; color: #334155; cursor: pointer;
}
.d-trigger .icon { width: 25px; text-align: center; color: #94a3b8; margin-right: 10px; }
.d-trigger .arrow { color: #cbd5e1; transition: 0.3s; font-size: 0.8rem; }
.d-trigger.active { background: #f8fafc; color: #009b4c; }
.d-trigger.active .arrow { transform: rotate(90deg); color: #009b4c; }

.d-content {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    background: #fcfcfc; margin-bottom: 10px; padding-left: 15px; border-left: 3px solid #e2e8f0;
}
.d-content a {
    display: block; padding: 10px 15px 10px 40px; text-decoration: none;
    color: #64748b; font-size: 0.9rem; border-bottom: 1px solid #f8fafc; position: relative;
}
.d-content a::before {
    content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; background: #cbd5e1; border-radius: 50%;
}
.d-content a:hover { color: #009b4c; background: #f0fdf4; }
.d-content a:hover::before { background: #009b4c; }

.drawer-footer { margin-top: 30px; text-align: center; }
.btn-drawer-login {
    display: block; padding: 12px; border: 2px solid #009b4c; color: #009b4c;
    border-radius: 10px; font-weight: 700; text-decoration: none;
}

/* RESPONSIVE BREAKPOINT */
@media (max-width: 1100px) {
    .desktop-menu, .nav-divider { display: none; } /* Sembunyikan menu desktop */
    .hamburger-btn { display: flex; } /* Tampilkan Hamburger */
    .nav-container { justify-content: space-between; } /* Logo kiri, Hamburger kanan */
}
/* =========================================
   FIX TAMPILAN HP: SEMBUNYIKAN ICON PESAN & LOGIN
   (Paste di paling bawah style.css)
========================================= */

@media (max-width: 1100px) {
    /* Menyembunyikan area ikon (Pesan & Login) di layar HP/Tablet */
    .icon-actions {
        display: none !important;
    }
    
    /* Memastikan Logo dan Hamburger berada di ujung kanan-kiri */
    .nav-container {
        justify-content: space-between !important;
    }
}

/* =========================================
   MODERN COMPACT DROPDOWN (VERTICAL)
   Ganti bagian dropdown lama di style.css
========================================= */

/* Container Dropdown */
.dropdown-content {
    position: absolute;
    top: 140%; /* Jarak dari menu induk */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Posisikan tengah horizontal */
    
    background: #ffffff;
    min-width: 240px; /* Lebar ideal agar teks tidak terpotong */
    padding: 8px 0;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* Bayangan lembut */
    border: 1px solid rgba(0,0,0,0.04);
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 9999;
    
    /* Panah Kecil di Atas (Opsional, Hapus jika tidak suka) */
    margin-top: 10px; 
}

/* Panah Dropdown */
.dropdown-content::before {
    content: '';
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid rgba(0,0,0,0.04); border-top: 1px solid rgba(0,0,0,0.04);
    z-index: -1;
}

/* Efek Muncul Saat Hover */
.dropdown-trigger:hover .dropdown-content,
.has-drop:hover .dropdown-menu { /* Support nama class lama/baru */
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Naik ke posisi normal */
    top: 100%;
}

/* Item Menu Dropdown */
.dropdown-content li {
    display: block;
    border-bottom: 1px solid #f9f9f9;
}
.dropdown-content li:last-child { border-bottom: none; }

/* Link Dropdown */
.dropdown-content a {
    display: block;
    padding: 10px 20px;
    color: #475569 !important; /* Warna teks abu gelap */
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0;
    text-align: left; /* Teks rata kiri */
    white-space: normal; /* Biarkan teks panjang turun ke bawah */
    line-height: 1.4;
}

/* Hover Item */
.dropdown-content a:hover {
    background-color: #f0fdf4; /* Hijau sangat muda */
    color: #009b4c !important; /* Hijau Ansor */
    padding-left: 25px; /* Efek geser sedikit */
    font-weight: 600;
}

/* Ikon di Dropdown (Jika ada) */
.dropdown-content a i {
    margin-right: 8px;
    color: #94a3b8;
    font-size: 0.8rem;
}
.dropdown-content a:hover i { color: #009b4c; }

/* Agar tidak tertutup konten lain */
.nav-menu-desktop, .desktop-nav { overflow: visible !important; }
/* =========================================
   FIX SUB-MENU MENURUN (VERTICAL DROPDOWN)
   Paste di paling bawah style.css
========================================= */

/* 1. RESET TAMPILAN DROPDOWN */
.dropdown-menu {
    display: block !important; /* Paksa blok agar tidak flex/kesamping */
    position: absolute;
    top: 100%; /* Tepat di bawah menu induk */
    left: 0;
    width: 240px; /* Lebar pas agar teks tidak putus */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Bayangan modern */
    padding: 10px 0;
    
    /* Animasi */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 9999;
    border: 1px solid rgba(0,0,0,0.05);
}

/* 2. PAKSA ITEM MENURUN */
.dropdown-menu li {
    display: block !important; /* KUNCI: Membuat item turun ke bawah */
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #f8f9fa; /* Garis pemisah halus */
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

/* 3. STYLE LINK DALAM DROPDOWN */
.dropdown-menu li a {
    display: block !important; /* Full width */
    padding: 12px 20px;
    color: #475569 !important; /* Warna Abu Gelap */
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: left; /* Rata kiri */
    transition: all 0.2s ease;
    background: transparent;
}

/* 4. EFEK HOVER MODERN */
.dropdown-menu li a:hover {
    background-color: #f0fdf4 !important; /* Hijau pudar */
    color: #009b4c !important; /* Hijau Ansor */
    padding-left: 28px; /* Efek geser kanan sedikit */
    font-weight: 600;
}

/* 5. PEMICU (TRIGGER) AGAR MUNCUL */
.has-drop:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Naik ke posisi asal */
}
/* =================================================
   FIX FINAL: SUB-MENU TURUN KE BAWAH (VERTIKAL)
   Paste di baris paling bawah style.css
================================================= */

/* 1. Target Semua Kemungkinan Class Dropdown */
.drop-box, .dropdown-menu, .dropdown-content {
    display: block !important;       /* Matikan Flexbox */
    flex-direction: column !important; /* Jaga-jaga jika browser maksa flex */
    width: 220px !important;         /* Lebar tetap agar tidak gepeng */
    background: #fff !important;
    padding: 10px 0 !important;
    position: absolute;
    z-index: 99999;
}

/* 2. Paksa Item List (li) Menjadi Blok (Turun ke Bawah) */
.drop-box li, 
.dropdown-menu li, 
.dropdown-content li {
    display: block !important;       /* KUNCI: Elemen blok selalu baris baru */
    width: 100% !important;          /* Lebar penuh */
    margin: 0 !important;            /* Hapus margin samping */
    float: none !important;          /* Hapus float jika ada */
    border-bottom: 1px solid #f4f4f5; /* Garis pemisah tipis */
}

.drop-box li:last-child, 
.dropdown-menu li:last-child {
    border-bottom: none;
}

/* 3. Paksa Link (a) Menjadi Blok & Rata Kiri */
.drop-box li a, 
.dropdown-menu li a, 
.dropdown-content li a {
    display: block !important;       /* Link memenuhi kotak */
    width: 100% !important;
    padding: 10px 20px !important;   /* Jarak teks enak dilihat */
    text-align: left !important;     /* Teks rata kiri */
    white-space: normal !important;  /* Biarkan teks panjang turun baris */
    color: #333 !important;
}

/* 4. Hover Effect Hijau */
.drop-box li a:hover, 
.dropdown-menu li a:hover {
    background-color: #f0fdf4 !important;
    color: #009b4c !important;
    padding-left: 25px !important;   /* Efek geser saat disentuh */
}