:root {
            --jabar-green-deep: #003d1c;
            --jabar-green-nav: #008444;
            --jabar-gold: #c5a059;
            --jabar-blue: #00acee;
        }

        body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #f4f7f6; }

        /* ================= HEADER ================= */
        header {
            background: radial-gradient(circle, rgba(0, 61, 28, 0.7) 0%, rgba(0, 20, 10, 0.9) 100%), url('batikimage.jpg');
            background-size: cover; color: white; border-bottom: 3px solid var(--jabar-gold);
            padding: 8px 5%; display: flex; align-items: center;
        }
        .logo-group img { height: 38px; margin-right: 12px; }
        .header-text h1 { margin: 0; font-size: 16px; text-transform: uppercase; line-height: 1.2; }
        .header-text p { margin: 0; font-size: 10px; color: var(--jabar-gold); font-weight: 600; }

        /* ================= NAVIGASI ================= */
            /* Container Utama Navbar */
        .navbar { 
            background: var(--jabar-green-nav); 
            position: sticky; 
            top: 0; 
            z-index: 9999; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* Tombol Toggle Mobile */
        .menu-toggle { 
            display: none; 
            background: var(--jabar-green-deep); 
            color: white; 
            padding: 12px; 
            text-align: center; 
            cursor: pointer; 
            font-weight: bold; 
        }

        /* Reset List - Menghilangkan Bullet dan Padding Bawaan */
        .nav-list, 
        .nav-list ul, 
        .nav-list li,
        .submenu, 
        .sub-submenu { 
            list-style: none !important; 
            list-style-type: none !important;
            margin: 0 !important; 
            padding: 0 !important; 
        }

        /* Layout Horizontal Menu Utama */
        .nav-list {
            display: flex;
            padding: 0 5% !important;
        }

        .nav-list li {
            position: relative;
            list-style: none !important;
        }

        /* Pengaturan Link agar Teks & Caret Sejajar */
        .nav-list a {
            color: white;
            text-decoration: none;
            padding: 14px 18px;
            display: flex;          /* Menggunakan Flexbox */
            align-items: center;    /* Vertikal Center */
            justify-content: space-between; /* Spasi antara teks dan panah */
            gap: 8px;               /* Jarak antara teks dan panah */
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            line-height: 1;         /* Menghilangkan extra space dari font */
        }

        /* Gaya khusus untuk simbol caret/arrow agar ukurannya pas */
        .nav-list a span.caret, 
        .nav-list a i {
            font-size: 10px;        /* Ukuran panah lebih kecil dari teks agar proporsional */
            display: inline-block;
            transition: transform 0.3s ease;
        }

        /* Hover Menu Utama */
        .nav-list > li > a:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: var(--jabar-gold) !important;
        }

        /* Styling Submenu (Level 2 & 3) */
        .submenu, .sub-submenu { 
            display: none; 
            position: absolute; 
            background: white; 
            min-width: 220px; 
            box-shadow: 0 8px 16px rgba(0,0,0,0.15); 
            border-top: 3px solid var(--jabar-gold); 
            z-index: 10000;
        }

        /* Link di dalam Submenu */
        .submenu a, .sub-submenu a { 
            color: #333 !important; 
            padding: 10px 15px !important; 
            border-bottom: 1px solid #f0f0f0; 
            font-size: 12px; 
            font-weight: 500;
        }

        /* Hover pada Submenu */
        .submenu li a:hover, 
        .sub-submenu li a:hover {
            background-color: #f8fbf9 !important;
            color: var(--jabar-green-nav) !important;
            padding-left: 22px !important; /* Efek geser */
        }

        /* Warna Parent tetap Gold saat Child di-hover */
        .nav-list li:hover > a {
            color: var(--jabar-gold) !important;
        }

        /* ================= LOGIKA DESKTOP ================= */
        @media (min-width: 901px) {
            .nav-list li:hover > .submenu { 
                display: block; 
                animation: navFadeIn 0.3s ease;
            }
            
            .submenu li:hover > .sub-submenu { 
                display: block; 
                left: 100%; 
                top: -5px; 
                animation: navFadeIn 0.3s ease;
            }
        }

        /* ================= LOGIKA MOBILE ================= */
        @media (max-width: 900px) {
            .menu-toggle { display: block; }
            
            .nav-list { 
                display: none; 
                flex-direction: column; 
                width: 100%; 
                padding: 0 !important;
            }
            
            .nav-list.active { display: flex; }
            
            .submenu, .sub-submenu { 
                position: static; 
                width: 100%; 
                background: rgba(0, 0, 0, 0.1); 
                border: none; 
                box-shadow: none;
            }
            
            .submenu a { color: white !important; padding-left: 30px !important; }
            .sub-submenu a { padding-left: 50px !important; background: rgba(0,0,0,0.05); }

            .submenu a:hover, .sub-submenu a:hover {
                background: rgba(255, 255, 255, 0.1) !important;
                color: var(--jabar-gold) !important;
            }
        }

        /* Animasi khusus Navigasi agar tidak konflik */
        @keyframes navFadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ================= SEARCH & VOICE ================= */
        .search-area { padding: 20px 5% 10px; background: white; text-align: center; border-bottom: 1px solid #eee; }
        .search-main { max-width: 650px; margin: 0 auto; display: flex; border: 1px solid #ddd; border-radius: 50px; overflow: hidden; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .btn-plus { background: #eee; border: none; padding: 0 18px; cursor: pointer; font-weight: bold; font-size: 18px; border-right: 1px solid #ddd; }
        .search-main input { flex: 1; border: none; padding: 10px 20px; outline: none; font-size: 14px; }
        .btn-voice { background: #f8f9fa; border: none; padding: 0 15px; cursor: pointer; color: #666; border-left: 1px solid #eee; transition: 0.3s; }
        .btn-voice.recording { color: #d93025; animation: pulse 1.5s infinite; }
        .btn-search { background: var(--jabar-blue); color: white; border: none; padding: 0 25px; cursor: pointer; font-weight: bold; }

        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

        /* ADVANCED PANEL */
        #adv-panel { display: none; max-width: 630px; margin: 15px auto; background: #fafafa; padding: 15px; border-radius: 8px; border: 1px solid #eee; text-align: left; }
        .adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .adv-grid input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; box-sizing: border-box; }

        .most-searched { margin-top: 15px; font-size: 11px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
        .doc-tag { display: flex; align-items: center; background: #f8f9f8; border: 1px solid #e0e0e0; padding: 4px 12px; border-radius: 20px; text-decoration: none; color: #444; transition: 0.3s; }
        .doc-tag:hover { background: var(--jabar-green-nav); color: white !important; transform: translateY(-2px); }

        /* ================= TAB CONTAINER SEBAGAI KOTAK UTAMA ================= */
        .tab-container { 
            max-width: 95%; 
            margin: 30px auto; 
            background: white; 
            border: 1px solid #ddd; 
            border-top: 4px solid var(--jabar-gold); /* Garis emas di atas */
            border-radius: 8px; 
            padding: 20px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            box-sizing: border-box;
        }

        /* Header Tab */
        .tab-header { 
            display: flex; 
            justify-content: center; 
            gap: 10px; 
            margin-bottom: 20px; 
            border-bottom: 2px solid #eee; 
            padding-bottom: 15px;
            flex-wrap: wrap; /* Agar tombol tab aman di layar kecil */
        }

        /* Tombol Tab */
        .tab-btn { 
            background: #f8f9fa; 
            border: 1px solid #ddd; 
            padding: 8px 16px; 
            font-weight: 700; 
            font-size: 11px; 
            color: #555; 
            cursor: pointer; 
            border-radius: 4px; 
            transition: 0.3s;
        }

        .tab-btn.active { 
            background: var(--jabar-green-nav); 
            color: white !important; 
            border-color: var(--jabar-green-nav);
        }

        /* ================= GRID IKON (TANPA KOTAK INDIVIDU) ================= */
        .cat-grid { 
            display: none; 
            /* Desktop: minimal 110px per ikon agar muat banyak menyamping */
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); 
            gap: 15px; 
            width: 100%;
            animation: fadeIn 0.5s; 
        }

        .cat-grid.active { 
            display: grid; 
        }

        /* Item Ikon (Bersih tanpa border/kotak) */
        .cat-item {
            background: transparent;
            padding: 10px 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            transition: 0.3s;
            text-align: center;
        }

        .cat-item:hover {
            transform: translateY(-3px);
        }

        .cat-item img { 
            width: 40px; 
            height: 40px; 
            margin-bottom: 8px; 
            object-fit: contain;
            transition: 0.3s;
        }

        .cat-item:hover img {
            transform: scale(1.15);
        }

        .cat-item span { 
            display: block; 
            font-size: 10px; 
            font-weight: 700; 
            color: #555; 
            text-transform: uppercase;
            line-height: 1.2;
        }

        /* ================= RESPONSIVE 360PX (MUAT BANYAK IKON) ================= */
        @media (max-width: 900px) {
            .cat-grid { 
                /* Di HP: Minimal 80px agar bisa muat 3-4 ikon menyamping di 360px */
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; 
                gap: 10px;
            }
            
            .cat-item img { 
                width: 32px; 
                height: 32px; 
            }

            .cat-item span {
                font-size: 9px;
            }
        }

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

        /* ================= CONTENT & BOXES ================= */
        .content-grid { max-width: 95%; margin: 20px auto; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; }
        .box { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; }
        .box-center { background: var(--jabar-green-deep); color: white; border-top: 4px solid var(--jabar-gold); grid-row: auto !important; padding: 12px 15px !important; }
        .box-center h4 { color: #ffffff !important; border-bottom: 1px solid var(--jabar-gold); padding-bottom: 8px; margin-top: 0; }
        .box h4 { margin-top: 0; font-size: 13px; border-bottom: 2px solid #eee; padding-bottom: 8px; color: var(--jabar-green-deep); }
        .info-img { width: 100%; border-radius: 4px; margin-top: 10px; border: 1px solid #eee; }
        /* --- Tambahan/Perubahan CSS --- */
        /* Menghapus underline pada semua link secara default */
        a {
            text-decoration: none !important;
        }

        /* Styling Khusus Box Peraturan Terbaru */
        .box-center {
            background: var(--jabar-green-deep);
            color: white;
            border-top: 4px solid var(--jabar-gold);
            padding: 12px !important; /* Memberi ruang napas lebih luas */
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            overflow: hidden;

        }

        .box-center p {
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .regulation-list {
            display: flex;
            flex-direction: column;
            gap: 8px; /* Jarak antar item peraturan */
        }

        .reg-item {
            display: block;
            background: rgba(255, 255, 255, 0.05); /* Background tipis transparan */
            border-left: 3px solid var(--jabar-gold);
            padding: 12px 15px;
            border-radius: 0 6px 6px 0;
            transition: all 0.3s ease;
        }

        .reg-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px); /* Efek geser saat hover */
        }

        .reg-item .reg-title {
            display: block;
            color: #ffffff;
            font-size: 12.5px;
            font-weight: 600;
            line-height: 1.4;
        }

        .reg-item .reg-meta {
            display: block;
            font-size: 10px;
            color: var(--jabar-gold);
            margin-top: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        @media (max-width: 900px) { .content-grid { grid-template-columns: 1fr; } }

    /* Perbaikan Khusus Layar HP (360px ke bawah) */
    @media (max-width: 900px) {
        header {
            display: flex !important;
            flex-direction: row !important; /* Memaksa logo & teks tetap sejajar menyamping */
            align-items: center !important;
            justify-content: flex-start !important;
            padding: 10px 5% !important;
            flex-wrap: nowrap !important; /* Mencegah teks turun ke bawah logo */
        }

        .logo-group {
            display: flex !important;
            align-items: center !important;
            flex-shrink: 0 !important; /* Mencegah logo mengecil */
        }

        .logo-group img {
            height: 35px !important; /* Sedikit lebih kecil agar muat di 360px */
            margin-right: 10px !important;
        }

        .header-text h1 {
            font-size: 14px !important; /* Ukuran teks lebih pas untuk HP */
        }

        /* Perbaikan Tombol Cari agar tidak hilang */
        .search-main {
            display: flex !important;
            width: 100% !important;
        }

        .search-main input {
            min-width: 0 !important; /* Memberi ruang untuk tombol */
            flex: 1 !important;
        }

        .btn-search {
            display: block !important;
            padding: 0 15px !important;
            flex-shrink: 0 !important;
        }
    }
        
        /* ================= FOOTER ================= */
        footer {
            background: radial-gradient(circle, rgba(0, 61, 28, 0.8) 0%, rgba(0, 20, 10, 1) 100%), url('batikimage.jpg');
            background-size: cover; color: white; padding: 15px 5%; border-top: 3px solid var(--jabar-gold);
            display: flex; justify-content: space-between; align-items: center; font-size: 11px;
        }

        .article-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            overflow: hidden;
            border-top: 4px solid var(--jabar-gold);
        }

        .header-title {
            padding: 15px 20px;
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--primary-blue);
            border-bottom: 1px solid #eee;
        }

        .author-section {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .author-info {
            margin-bottom: 5px;
        }

        .author-name {
            display: block;
            font-size: 1.1rem;
            font-weight: 800;
            color: #1a1a1a;
        }

        .author-title {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .profile-container {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .avatar {
            width: 85px;
            height: 85px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }

        .quote-bubble {
            background-color: #f0f4f8;
            padding: 15px;
            border-radius: 0 15px 15px 15px;
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.4;
            color: #2980b9;
            position: relative;
            border-left: 4px solid #3498db;
        }

        .content-body {
            padding: 0 20px 20px 20px;
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-main);
            text-align: justify;
        }

        .read-more {
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.9rem;
            display: inline-block;
            margin-top: 10px;
            transition: color 0.2s;
        }

        .read-more:hover {
            color: #1d6fa5;
            text-decoration: underline;
        }

 /* Item List Berita */
        .news-item {
            display: flex;
            gap: 20px;
            padding: 20px 0;
            border-bottom: 1px solid var(--border-gray);
            text-decoration: none;
            transition: background 0.2s;
            align-items: center; /* Sejajarkan tengah secara vertikal */
        }

        .news-item:hover .news-title {
            color: var(--accent-blue);
        }

	/* Pengaturan Ukuran Foto */
	.news-photo {
    	   flex: 0 0 180px;      /* Foto tidak akan menyusut, lebar tetap 180px */
    	   height: 110px;        /* Tinggi tetap agar sejajar */
    	   margin-right: 15px;
    	   overflow: hidden;
    	   border-radius: 4px;
	}

	.news-photo img {
    	   width: 100%;
    	   height: 100%;
    	   object-fit: cover;
	}
        .news-item:hover .news-img-box img {
            transform: scale(1.08);
        }

        /* Konten Teks */
        .news-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .news-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--title-color);
            margin: 0 0 8px 0;
            line-height: 1.3;
            /* Limit to 2 lines if needed */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-meta {
            font-size: 0.85rem;
            color: var(--date-color);
        }

        /* Responsif Mobile */
        @media (max-width: 600px) {
            .news-item {
                gap: 12px;
            }
            .news-img-box {
                width: 120px;
                height: 80px;
            }
            .news-title {
                font-size: 1rem;
            }
        }

    /* Container Peta harus relatif agar legend bisa melayang di dalamnya */
    .map-container-wrapper {
        position: relative;
        width: 100%;
    }

    /* Box Legend Melayang */
    #info-legend-pop {
        position: absolute;
        z-index: 9999;
        background: #ffffff;
        width: 260px;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        border-top: 4px solid #00a65a;
        display: none; /* Sembunyi di awal */
        pointer-events: all;
    }

    #info-legend-pop img {
        width: 70px;
        height: auto;
        display: block;
        margin: 0 auto 10px;
    }

    .legend-title {
        font-weight: bold;
        color: #333;
        display: block;
        text-align: center;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .legend-link {
        color: #007bff;
        text-decoration: none;
        font-size: 11px;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        word-break: break-all;
    }

    .close-legend {
        position: absolute;
        top: 2px;
        right: 7px;
        cursor: pointer;
        font-weight: bold;
        color: #888;
    }

        .breadcrumb { padding: 15px 5%; background: #fff; font-size: 12px; color: #666; border-bottom: 1px solid #eee; }
        .breadcrumb a { color: var(--jabar-green-nav); text-decoration: none; }

.form-control-custom {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 12px;
}

#adv-panel {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #eee;
    border-top: none;
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.adv-grid label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}


  .search-container { display: grid; grid-template-columns: 280px 1fr; gap: 25px; max-width: 95%; margin: 20px auto; }

        .filter-sidebar { background: white; padding: 20px; border-radius: 8px; border: 1px solid #ddd; height: fit-content; }
        .filter-sidebar h3 { font-size: 14px; margin-top: 0; border-bottom: 2px solid var(--jabar-gold); padding-bottom: 10px; color: var(--jabar-green-deep); }
        .filter-group { margin-bottom: 20px; }
        .filter-group label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; color: #555; }
        .filter-group select, .filter-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; box-sizing: border-box; }

        .results-header { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .results-count { font-size: 14px; font-weight: 600; color: #555; }

        .result-card { background: white; padding: 20px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 15px; transition: 0.3s; position: relative; overflow: hidden; }
        .result-card:hover { border-color: var(--jabar-green-nav); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .result-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--jabar-green-nav); }

        .badge-status { float: right; font-size: 10px; padding: 3px 10px; border-radius: 12px; color: white; font-weight: bold; text-transform: uppercase; }
        .status-berlaku { background: var(--status-berlaku); }
        .status-dicabut { background: var(--status-dicabut); }

        .doc-type { font-size: 11px; font-weight: 700; color: var(--jabar-gold); text-transform: uppercase; }
        .doc-title { display: block; font-size: 16px; font-weight: 700; color: var(--jabar-green-deep); margin: 5px 0 10px; text-decoration: none; line-height: 1.4; }
        .doc-meta { font-size: 12px; color: #777; display: flex; gap: 15px; }
        .doc-meta span i { margin-right: 5px; color: #aaa; }

        .doc-actions { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; }
        .btn-view { background: #f8f9fa; border: 1px solid #ddd; padding: 6px 15px; font-size: 12px; border-radius: 4px; cursor: pointer; text-decoration: none; color: #333; font-weight: 600; }
        .btn-view:hover { background: var(--jabar-blue); color: white; border-color: var(--jabar-blue); }
        .btn-download { background: var(--jabar-green-nav); color: white; border: none; padding: 6px 15px; font-size: 12px; border-radius: 4px; cursor: pointer; font-weight: 600; }

        .pagination { display: flex; justify-content: center; gap: 5px; margin: 30px 0; }
        .page-link { padding: 8px 15px; background: white; border: 1px solid #ddd; text-decoration: none; color: #333; border-radius: 4px; font-size: 13px; }
        .page-link.active { background: var(--jabar-green-nav); color: white; border-color: var(--jabar-green-nav); }

        @media (max-width: 900px) { .search-container { grid-template-columns: 1fr; } }