@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* ===== IDENTITAS WARNA JDIH BANGGAI KEPULAUAN ===== */
    --primary:          #0077B6; /* Biru Laut Utama (Ocean Blue) */
    --primary-dark:     #023E8A; /* Biru Tua / Navy */
    --primary-light:    #00B4D8; /* Biru Muda / Cyan */
    --primary-xlight:   #90E0EF; /* Biru Sangat Muda */

    --accent:           #F4A100; /* Emas / Gold Aksen */
    --accent-dark:      #D4880C; /* Emas Gelap */
    --accent-light:     #FFD166; /* Emas Terang */

    --primary-gradient: linear-gradient(135deg, #0077B6 0%, #023E8A 100%);
    --header-gradient:  linear-gradient(135deg, #03045E 0%, #0077B6 100%); /* Navy ke Biru Laut */
    --accent-gradient:  linear-gradient(135deg, #F4A100 0%, #D4880C 100%);

    --secondary:        #F4A100; /* Emas sebagai warna sekunder */
    --text-dark:        #0d1b2a; /* Biru Hitam Gelap untuk teks */
    --text-light:       #ffffff;
    --bg-light:         #f0f7ff; /* Biru Sangat Terang */
    --bg-footer:        #03045E; /* Navy Sangat Gelap */
    --bg-body:          #f0f7ff; /* Latar belakang Biru Terang */
    --bg-card:          #ffffff;
    --dark:             #0d1b2a;

    --shadow-sm: 0 2px 4px rgba(0,119,182,0.08);
    --shadow-md: 0 4px 12px rgba(0,119,182,0.12);
    --shadow-lg: 0 10px 30px rgba(0,119,182,0.15);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 50px;
}

/* Global Styles — Material Design Base */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-dark);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--primary-dark);
}

/* Blue Ocean Overrides */
.btn-info, .bg-info, .badge-info {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.text-info {
    color: var(--primary) !important;
}

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

.bg-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.badge-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.25s ease;
}

a:hover {
    color: var(--accent);
}

/* Header Styles — Material Elevation */
#page-topbar, .navbar-header {
    background: var(--header-gradient) !important;
    box-shadow: 0 2px 12px rgba(3,4,94,0.25);
    border-bottom: 3px solid var(--accent) !important;
}

.navbar-header .text-dark {
    color: #ffffff !important;
}

.navbar-brand-box .logo {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.topnav {
    background: transparent !important;
}

/* Menu Styles */
.nav-dge {
    display: block;
}

.menudge {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.menudge > li {
    position: relative;
    z-index: 100;
    flex-shrink: 0; /* Prevent shrinking too much */
}

.menudge > li > a {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 12px;
    display: block;
    transition: all 0.25s ease;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-size: 14px;
}

.menudge > li > a:hover,
.menudge > li:hover > a,
.menudge > li.active > a {
    color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Dropdown Menu */
.menudge ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 10px 0;
    min-width: 200px;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--bg-card);
    z-index: 99;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--primary);
}

.menudge ul:after {
    content: none;
}

.menudge li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Submenu Items */
.menudge ul li {
    display: block;
}

.menudge ul li a {
    font-size: 14px;
    font-weight: 500;
    display: block;
    padding: 8px 20px;
    color: var(--text-dark) !important;
    background: transparent;
    transition: all 0.2s ease;
}

.menudge ul li a:hover,
.menudge ul li:hover > a {
    background: var(--bg-body);
    color: var(--primary) !important;
    padding-left: 25px;
}

/* Second Level Dropdown */
.menudge ul ul {
    left: 100%;
    top: 0;
    transform: translateX(10px);
}

.menudge li > ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/* Page Title Box — Android M3 Top App Bar */
.page-title-box {
    background: linear-gradient(135deg, #03045E 0%, #0077B6 100%) !important;
    color: #ffffff !important;
    padding: 20px 20px 24px 20px !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 4px 16px rgba(2, 62, 138, 0.12) !important;
    position: relative !important;
    margin-bottom: 24px !important;
}

.page-title-box .page-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}

.page-title-box .breadcrumb {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9999px !important;
    padding: 6px 16px !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    margin-top: 8px !important;
}

.page-title-box .breadcrumb-item, 
.page-title-box .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

.page-title-box .breadcrumb-item.active {
    color: #FFD166 !important;
    font-weight: 700 !important;
}

/* Footer Override */
.footer-area {
    background-color: var(--bg-footer) !important;
    border-top: 4px solid var(--accent) !important;
}

.footer-area .footer-widget .footer-social-info a {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.footer-area .footer-widget .footer-social-info a:hover {
    background-color: var(--accent) !important;
    color: var(--dark) !important;
}

/* Search Form — Blue Ocean Focus */
#keyword.form-control {
    border: 2px solid var(--primary-light) !important;
    box-shadow: 0 4px 8px rgba(0,119,182,0.06);
    transition: all 0.3s ease;
    border-radius: var(--radius-md) !important;
}

#keyword.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 119, 182, 0.2);
}

#simple-search .btn-primary {
    background: var(--header-gradient) !important;
    border: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border-radius: 50px; /* Make button rounded like input */
    margin-top: 10px; /* Add some spacing */
}

#simple-search .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

#btn-advanced-search {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#btn-advanced-search:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Title Konten — Android M3 Tonal Surface Header */
.title-konten {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%) !important;
    color: #023E8A !important;
    padding: 14px 22px !important;
    border-radius: 18px !important;
    margin-bottom: 25px !important;
    border: 1px solid #cbe4f6 !important;
    border-left: 6px solid #0077B6 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    box-shadow: 0 2px 10px rgba(0, 119, 182, 0.06) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    position: relative !important;
}

.title-konten::before {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #F4A100 !important;
    box-shadow: 0 0 0 4px rgba(244, 161, 0, 0.25) !important;
    flex-shrink: 0 !important;
}

.title-konten:after {
    display: none !important;
}

/* Product Icon */
.card-body .fas.fa-balance-scale {
    color: var(--primary) !important;
}

.title-konten h3 {
    color: #023E8A !important;
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
}

/* ===== MATERIAL DESIGN CARD ELEVATION ===== */
.card {
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 2px 8px rgba(0,119,182,0.08) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 6px 20px rgba(0,119,182,0.18) !important;
    transform: translateY(-2px);
}

/* Material list items — blue left border accent */
.list-group-item {
    border-left: 4px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
    border-radius: 0 !important;
}

.list-group-item:hover {
    border-left-color: var(--primary-light);
    background: var(--bg-light) !important;
}

/* FAQ Accordion — Blue Ocean Style */
#faqAccordion .card {
    border: none;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(0,119,182,0.08);
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

#faqAccordion .card-header {
    padding: 0;
    background: transparent;
    border: none;
}

#faqAccordion .card-header button {
    padding: 15px 20px;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(0,119,182,0.08);
    width: 100%;
    text-align: left;
}

#faqAccordion .card-header button:not(.collapsed) {
    background: var(--primary-gradient);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.3);
}

#faqAccordion .card-header button:hover {
    background-color: var(--bg-light);
    color: var(--primary);
}

#faqAccordion .card-header button:not(.collapsed):hover {
    background: var(--primary-gradient);
    color: #fff;
    filter: brightness(108%);
}

#faqAccordion .card-header button:after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

#faqAccordion .card-header button:not(.collapsed):after {
    transform: translateY(-50%) rotate(180deg);
}

/* ===== BACKGROUND PATTERN — OMBAK LAUT + TIMBANGAN HUKUM (BANGGAI KEPULAUAN) ===== */
body {
    position: relative;
    z-index: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    /* Pattern: Ombak Laut (Ocean Wave) + Timbangan Hukum khas Kepulauan Banggai */
    background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230077B6' stroke-width='1.2' opacity='0.045'%3E%3C!-- Timbangan Hukum --%3E%3Cline x1='70' y1='14' x2='70' y2='42'/%3E%3Cline x1='46' y1='24' x2='94' y2='24'/%3E%3Cellipse cx='53' cy='36' rx='10' ry='5'/%3E%3Cellipse cx='87' cy='36' rx='10' ry='5'/%3E%3Cline x1='46' y1='24' x2='53' y2='32'/%3E%3Cline x1='94' y1='24' x2='87' y2='32'/%3E%3C!-- Ombak Laut 1 --%3E%3Cpath d='M10 80 Q22 70 35 80 Q48 90 60 80 Q72 70 85 80 Q98 90 110 80 Q122 70 135 80'/%3E%3C!-- Ombak Laut 2 --%3E%3Cpath d='M10 95 Q22 85 35 95 Q48 105 60 95 Q72 85 85 95 Q98 105 110 95 Q122 85 135 95'/%3E%3C!-- Titik Kepulauan --%3E%3Ccircle cx='25' cy='115' r='3'/%3E%3Ccircle cx='50' cy='120' r='2'/%3E%3Ccircle cx='75' cy='113' r='3.5'/%3E%3Ccircle cx='100' cy='118' r='2'/%3E%3Ccircle cx='120' cy='114' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-position: center top;
    background-size: 140px 140px;
}

/* Ensure background pattern visibility */
#layout-wrapper, .main-content {
    background-color: transparent !important;
}

/* Mobile Navigation Fixes */
@media (max-width: 991.98px) {
    .navbar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
        min-height: 70px !important;
        padding: 0 16px !important;
        position: relative !important;
    }

    .navbar-header .container-fluid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-header .float-right {
        float: none !important;
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .navbar-brand-box {
        display: none !important;
    }

    .mobile-logo-wrap {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-logo-wrap a img {
        max-height: 46px !important;
        width: auto !important;
        display: block !important;
    }

    /* Hamburger Menu Button */
    #resp-menudge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.22) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        outline: none !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 1005 !important;
    }

    #resp-menudge:hover,
    #resp-menudge:focus,
    #resp-menudge:active {
        background: rgba(255, 255, 255, 0.38) !important;
        border-color: #ffffff !important;
        color: #ffffff !important;
        transform: scale(1.05) !important;
    }

    #resp-menudge i {
        color: #ffffff !important;
        font-size: 20px !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    /* Backdrop Overlay (Gelap transparan tanpa filter blur agar menu tetap jernih & tajam) */
    .menudge-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.55) !important;
        z-index: 99998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    .menudge-backdrop.show {
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.drawer-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* Reset .topnav & <nav-dge> to prevent clipping & maintain stacking */
    .topnav {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        z-index: 100000 !important;
    }

    nav-dge {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mobile Navigation Drawer Ala Android (Slide dari Kiri - Tajam & Jernih) */
    .menudge {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 310px !important;
        max-width: 84vw !important;
        height: 100vh !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.3) !important;
        z-index: 100005 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        border: none !important;
        border-radius: 0 16px 16px 0 !important;
        /* Anti-blur rendering: text and icons stay 100% sharp */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        filter: none !important;
        backdrop-filter: none !important;
    }

    /* Status Saat Drawer Dibuka */
    .menudge.open {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Header Drawer — Navy Blue Material Android */
    .menudge-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        background: linear-gradient(135deg, #03045E 0%, #0077B6 100%) !important;
        color: #ffffff !important;
        border-bottom: 3px solid #F4A100 !important;
        box-shadow: 0 2px 10px rgba(3,4,94,0.2) !important;
    }

    .drawer-brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .drawer-brand img {
        max-height: 44px !important;
        max-width: 44px !important;
        width: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) !important;
    }

    .drawer-title strong {
        display: block !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: 0.5px !important;
        line-height: 1.25 !important;
    }

    .drawer-title small {
        display: block !important;
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.88) !important;
        line-height: 1.25 !important;
        margin-top: 2px !important;
    }

    .drawer-close-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        outline: none !important;
    }

    .drawer-close-btn:hover,
    .drawer-close-btn:active {
        background: rgba(255, 255, 255, 0.35) !important;
        color: #ffffff !important;
        transform: rotate(90deg) !important;
    }

    /* List Item di Dalam Drawer - Rapi & Konsisten di Kiri */
    .menudge > li {
        width: 100% !important;
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 0 !important;
    }

    .menudge > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Teks selalu rapi di kiri */
        padding: 14px 20px !important;
        color: #334155 !important;
        width: 100% !important;
        text-align: left !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        gap: 12px !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }

    .menudge > li > a:hover,
    .menudge > li > a:active,
    .menudge > li.active > a {
        background-color: #e8f4fd !important;
        color: #0077B6 !important;
        border-left: 3.5px solid #0077B6 !important;
        padding-left: 16.5px !important;
    }

    /* Chevron Panah Dropdown Diposisikan Rapi di Kanan */
    .menudge > li > a i.mdi-chevron-down {
        margin-left: auto !important;
        font-size: 18px !important;
        color: #94a3b8 !important;
        transition: transform 0.2s ease !important;
    }

    /* Ikon Menu Depan */
    .menudge > li > a > i:first-child:not(.mdi-chevron-down) {
        width: 20px !important;
        min-width: 20px !important;
        text-align: center !important;
        color: #0077B6 !important;
        font-size: 15px !important;
        display: inline-block !important;
    }

    /* Sembunyikan tag ikon kosong yang tidak ada kelasnya */
    .menudge > li > a > i:first-child:empty:not([class*="fa"]):not([class*="mdi"]):not([class*="ti"]) {
        display: none !important;
    }

    /* Form Pencarian di Dalam Drawer */
    .menudge form.form-inline {
        padding: 14px 18px !important;
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #f8fafc !important;
        margin: 0 !important;
    }

    .menudge form.form-inline .input-group {
        width: 100% !important;
        display: flex !important;
    }

    .menudge form.form-inline .form-control {
        width: 100% !important;
        flex: 1 !important;
        border-radius: 8px 0 0 8px !important;
        border: 1.5px solid #cbd5e1 !important;
        font-size: 13.5px !important;
        padding: 9px 14px !important;
        height: 40px !important;
        box-shadow: none !important;
    }

    .menudge form.form-inline .form-control:focus {
        border-color: #0077B6 !important;
        box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.15) !important;
    }

    .menudge form.form-inline .btn {
        border-radius: 0 8px 8px 0 !important;
        background-color: #0077B6 !important;
        border: 1.5px solid #0077B6 !important;
        color: #ffffff !important;
        width: 44px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .menudge form.form-inline .btn:hover {
        background-color: #023E8A !important;
    }

    /* Submenus Mobile Drawer */
    .menudge ul.sub-menudge {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: none; /* Toggled by tap */
        width: 100% !important;
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.03) !important;
        padding: 4px 0 !important;
        background: #f8fafc !important;
        min-width: auto !important;
        border: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .menudge ul.sub-menudge li {
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 0 !important;
    }

    .menudge ul.sub-menudge li:last-child {
        border-bottom: none !important;
    }

    .menudge ul.sub-menudge li a {
        padding: 11px 20px 11px 44px !important;
        color: #475569 !important;
        font-size: 13.5px !important;
        font-weight: 400 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .menudge ul.sub-menudge li a i {
        color: #64748b !important;
        font-size: 13px !important;
        width: 16px !important;
        text-align: center !important;
    }

    .menudge ul.sub-menudge li a:hover,
    .menudge ul.sub-menudge li a:active {
        background-color: #e8f4fd !important;
        color: #0077B6 !important;
        padding-left: 48px !important;
    }

    /* Chevron rotation on expand */
    .rotate-180 {
        transform: rotate(180deg) !important;
        transition: transform 0.25s ease !important;
    }

    /* Footer Drawer Mobile: Branding & Media Sosial */
    .menudge-drawer-footer {
        padding: 22px 18px 45px 18px !important;
        background: linear-gradient(180deg, #f0f7ff 0%, #e8f4fd 100%) !important;
        border-top: 2px solid #00B4D8 !important;
        margin-top: 10px !important;
        text-align: center !important;
    }

    .drawer-footer-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #0077B6 !important;
        letter-spacing: 1px !important;
        margin-bottom: 12px !important;
        text-transform: uppercase !important;
    }

    .drawer-social-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .drawer-social-links .social-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    }

    .drawer-social-links .social-btn:hover,
    .drawer-social-links .social-btn:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    }

    .drawer-social-links .social-btn.facebook {
        background-color: #1877f2 !important;
    }

    .drawer-social-links .social-btn.twitter {
        background-color: #1da1f2 !important;
    }

    .drawer-social-links .social-btn.instagram {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    }

    .drawer-social-links .social-btn.youtube {
        background-color: #ff0000 !important;
    }

    .drawer-footer-copy {
        font-size: 11px !important;
        color: #94a3b8 !important;
        margin-top: 4px !important;
    }
}

/* Pastikan elemen mobile drawer tidak mempengaruhi layout desktop */
@media (min-width: 992px) {
    .menudge-drawer-header,
    .menudge-drawer-footer,
    .menudge-backdrop {
        display: none !important;
    }

    .menudge {
        transform: none !important;
        transition: none !important;
        position: relative !important;
        border-radius: 0 !important;
    }
}

/* ================================================================ */
/* TATA LETAK 3-TIER JDIH BANGGAI KEPULAUAN                        */
/* Tier 1: Utility Bar | Tier 2: Main Header | Tier 3: Navbar      */
/* ================================================================ */

:root {
    --header-height: 195px;
}

@media (max-width: 991.98px) {
    :root {
        --header-height: 64px;
    }
}

/* Header Fixed — Tetap menempel di atas layar, tidak ikut tergulir saat halaman di-scroll */
#page-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: 0 4px 18px rgba(3, 4, 94, 0.22) !important;
    border-bottom: none !important;
    z-index: 1002 !important;
}

/* Berikan padding-top presisi sesuai tinggi header agar konten & banner tidak tertimpa */
.page-content {
    padding-top: var(--header-height) !important;
}

/* Hilangkan margin-top -40px bawaan template yang menyebabkan overlap antar section */
.page-content-wrapper {
    margin-top: 0 !important;
}

/* ---- TIER 1: UTILITY BAR ---- */
.bangkep-utility-bar {
    background-color: #03045E;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.bangkep-utility-bar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.utility-left,
.utility-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.utility-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
}

.utility-item i {
    font-size: 11px;
    color: #F4A100;
}

.utility-sep {
    color: rgba(255,255,255,0.3);
    padding: 0 4px;
}

.utility-social {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
}

.utility-social:hover {
    color: #ffffff;
    background: rgba(244,161,0,0.3);
}

/* ---- TIER 2: MAIN HEADER ---- */
.bangkep-main-header {
    background: linear-gradient(135deg, #023E8A 0%, #0077B6 60%, #00B4D8 100%);
    padding: 18px 0;
    position: relative;
    overflow: hidden;
}

/* Dekorasi ombak laut di background header */
.bangkep-main-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        #F4A100 0%, #F4A100 20%,
        #FFD166 20%, #FFD166 40%,
        #F4A100 40%, #F4A100 60%,
        #FFD166 60%, #FFD166 80%,
        #F4A100 80%, #F4A100 100%);
    opacity: 0.85;
}

.bangkep-main-header .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Brand area (logo + title) */
.bangkep-brand-area {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.bangkep-logo-link {
    flex-shrink: 0;
    display: block;
    transition: transform 0.2s ease;
}

.bangkep-logo-link:hover {
    transform: scale(1.04);
}

.bangkep-logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.3));
}

.bangkep-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bangkep-site-label {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

.bangkep-site-name {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bangkep-site-tagline {
    font-size: 12.5px;
    color: #FFD166;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.bangkep-wave-decor {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
}

/* Search bar di header */
.bangkep-header-search {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.bangkep-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.25s ease;
    min-width: 280px;
}

.bangkep-search-wrap:focus-within {
    background: rgba(255,255,255,0.22);
    border-color: #F4A100;
    box-shadow: 0 0 0 3px rgba(244,161,0,0.25);
}

.bangkep-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 13.5px;
    padding: 10px 16px !important;
    flex: 1;
}

.bangkep-search-input::placeholder {
    color: rgba(255,255,255,0.55) !important;
}

.bangkep-search-btn {
    background: #F4A100;
    border: none;
    color: #ffffff;
    padding: 0 18px;
    height: 42px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.bangkep-search-btn:hover {
    background: #D4880C;
}

/* ---- TIER 3: NAVIGATION BAR ---- */
.bangkep-navbar {
    background: #023E8A;
    border-bottom: 3px solid #F4A100;
    box-shadow: 0 2px 8px rgba(2,62,138,0.4);
    position: relative;
    z-index: 100000;
}

.bangkep-navbar .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Override menudge for navbar tier */
.bangkep-navbar .menudge > li > a {
    color: rgba(255,255,255,0.9) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 13px 15px !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.bangkep-navbar .menudge > li > a:hover,
.bangkep-navbar .menudge > li:hover > a,
.bangkep-navbar .menudge > li.active > a {
    background: rgba(244,161,0,0.2) !important;
    color: #FFD166 !important;
    border-bottom: 3px solid #F4A100;
    text-shadow: none !important;
}

/* Submenu under navbar tier */
.bangkep-navbar .menudge ul {
    border-top: 3px solid #F4A100 !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* ---- MOBILE TOPBAR ---- */
.bangkep-mobile-bar {
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    min-height: 60px;
}

/* Custom hamburger icon (3 garis) */
.bangkep-hamburger {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.bangkep-hamburger:hover,
.bangkep-hamburger:active {
    background: rgba(255,255,255,0.28);
}

.ham-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.bangkep-mobile-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 1;
    justify-content: center;
}

.bangkep-mobile-site-name {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.bangkep-mobile-search-btn {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    width: 44px;
    height: 44px;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.bangkep-mobile-search-btn:hover {
    background: rgba(255,255,255,0.28);
}

/* Hide old navbar-header on desktop since replaced by 3-tier */
@media (min-width: 992px) {
    .navbar-header {
        display: none !important;
    }

    .bangkep-main-header {
        display: block !important;
    }

    /* Adjust main content top padding for new 3-tier header height */
    .main-content {
        padding-top: 0 !important;
    }
}

/* Hide new 3-tier elements on mobile (mobile uses .navbar-header override) */
@media (max-width: 991.98px) {
    .bangkep-utility-bar,
    .bangkep-navbar {
        display: none !important;
    }

    .bangkep-main-header {
        padding: 0 12px !important;
        min-height: 64px;
        display: flex !important;
        align-items: center;
    }

    .bangkep-main-header .container-fluid {
        padding: 0;
    }

    /* Mobile drawer still uses old .menudge styles from earlier */
    .menudge.d-lg-none {
        top: 0 !important;
    }
}


/* ================================================================ */
/* CSS HOMEPAGE BANGKEP — Hero, Kategori, Stats, Berita, Sidebar   */
/* ================================================================ */

/* ---- HERO SECTION — Android-Style Banner & Search ---- */
.bangkep-hero-section {
    position: relative;
    overflow: visible;
    background: #F1F5F9;
    padding-top: 12px;
    padding-bottom: 24px;
    margin-bottom: 16px;
}

/* Banner Container — Android Material Card Style */
.bangkep-banner-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px 0;
}

.bangkep-android-carousel-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 10px 25px -5px rgba(2, 62, 138, 0.15),
        0 20px 45px -10px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 119, 182, 0.1);
    background: transparent;
    aspect-ratio: var(--banner-custom-ratio, 1200 / 440);
    width: 100%;
    height: auto;
}

.bangkep-android-carousel-frame .carousel,
.bangkep-android-carousel-frame .carousel-inner,
.bangkep-android-carousel-frame .carousel-item {
    border-radius: inherit;
    width: 100%;
    height: 100%;
}

.bangkep-android-carousel-frame .carousel-item > a {
    display: block;
    width: 100%;
    height: 100%;
}

.bangkep-banner-img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--banner-custom-ratio, 1200 / 440);
    object-fit: fill;
    object-position: center center;
    display: block;
    border-radius: inherit;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
    .bangkep-android-carousel-frame:hover .bangkep-banner-img {
        transform: scale(1.015);
    }
}

/* Android Floating Badge */
.android-floating-badge {
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    padding: 7px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.android-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: androidDotPulse 2s infinite ease-in-out;
}

@keyframes androidDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Dot Indicators — Android Pill Capsule */
.android-carousel-indicators {
    bottom: 16px !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.android-carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: none !important;
    margin: 0 !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer;
    text-indent: 0;
}

.android-carousel-indicators li.active {
    width: 28px !important;
    height: 8px !important;
    background: #F4A100 !important;
    box-shadow: 0 2px 8px rgba(244, 161, 0, 0.6) !important;
}

/* Arrow Controls — Material Circular FAB */
.android-carousel-control {
    width: 50px !important;
    height: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    opacity: 1 !important;
    z-index: 8;
}

.carousel-control-prev.android-carousel-control { left: 16px !important; }
.carousel-control-next.android-carousel-control { right: 16px !important; }

.android-control-circle {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #023E8A;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.android-carousel-control:hover .android-control-circle {
    background: #ffffff;
    color: #0077B6;
    box-shadow: 0 8px 24px rgba(0, 119, 182, 0.35);
    transform: scale(1.1);
}

/* ---- ANDROID TICKER / NOTIFICATION PILL ---- */
.bangkep-ticker-wrapper {
    max-width: 1400px;
    margin: 14px auto 0;
    padding: 0 20px;
}

.android-ticker-capsule {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px 18px 6px 8px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.android-ticker-badge {
    background: linear-gradient(135deg, #F4A100, #E08700);
    color: #03045E;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-right: 14px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(244, 161, 0, 0.35);
}

.android-ticker-marquee {
    flex: 1;
    overflow: hidden;
    font-size: 13px;
    color: #334155;
}

.android-ticker-marquee .ticker-date {
    background: #EFF6FF;
    color: #0077B6;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 6px;
}

.android-ticker-marquee .ticker-text {
    color: #1E293B;
    font-weight: 500;
    transition: color 0.18s;
}

.android-ticker-marquee .ticker-text:hover {
    color: #0077B6;
    text-decoration: underline;
}

/* ---- ANDROID MATERIAL 3 SEARCH SECTION ---- */
.bangkep-search-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px 28px;
}

.bangkep-search-card {
    background: linear-gradient(150deg, #03045E 0%, #023E8A 50%, #0077B6 100%);
    border-radius: 28px;
    padding: 40px 32px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 16px 40px -10px rgba(2, 62, 138, 0.35);
    position: relative;
    overflow: hidden;
}

.bangkep-search-card::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.25) 0%, transparent 70%);
    top: -100px;
    right: -80px;
    pointer-events: none;
}

.bangkep-search-card::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 161, 0, 0.18) 0%, transparent 70%);
    bottom: -80px;
    left: -60px;
    pointer-events: none;
}

.android-search-header {
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}

.android-search-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: #FFD166;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bangkep-search-card .hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.bangkep-search-card .hero-subtitle {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Android M3 Search Bar (Pill) */
.android-search-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px 8px 6px 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    max-width: 760px;
    margin: 0 auto;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    z-index: 2;
}

.android-search-bar:focus-within {
    border-color: #F4A100;
    box-shadow: 0 14px 40px rgba(244, 161, 0, 0.28);
    transform: translateY(-2px);
}

.search-input-prefix {
    color: #0077B6;
    font-size: 18px;
    margin-right: 14px;
    flex-shrink: 0;
}

.android-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    font-size: 15px !important;
    color: #1E293B !important;
    background: transparent !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
}

.android-search-input::placeholder {
    color: #94A3B8;
    font-size: 14px;
}

.android-search-submit-btn {
    background: linear-gradient(135deg, #0077B6, #023E8A);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 12px 26px;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 119, 182, 0.35);
    flex-shrink: 0;
}

.android-search-submit-btn:hover {
    background: linear-gradient(135deg, #023E8A, #03045E);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 119, 182, 0.45);
}

/* Android Filter Chips Row */
.android-chips-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.chips-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.android-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    border-radius: 9999px;
    padding: 6px 15px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.android-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #F4A100;
    color: #FFD166;
    transform: translateY(-2px);
}

.android-chip.chip-toggle {
    background: rgba(244, 161, 0, 0.22);
    border-color: rgba(244, 161, 0, 0.5);
    color: #FFD166;
    font-weight: 600;
}

.android-chip.chip-toggle:hover {
    background: rgba(244, 161, 0, 0.35);
    color: #ffffff;
}

/* Collapsible Advanced Search Box */
.android-advanced-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 24px;
    margin-top: 22px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

.advanced-card-title {
    color: #FFD166;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.android-field-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.android-input, .android-select {
    background: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 12px !important;
    color: #1E293B !important;
    font-size: 13.5px !important;
    padding: 9px 14px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: all 0.2s;
}

.android-input:focus, .android-select:focus {
    border-color: #0077B6 !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2) !important;
}

.android-btn-primary {
    background: linear-gradient(135deg, #F4A100, #E08700);
    color: #03045E;
    font-weight: 700;
    border-radius: 9999px;
    padding: 10px 24px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(244, 161, 0, 0.35);
    transition: all 0.2s ease;
}

.android-btn-primary:hover {
    background: linear-gradient(135deg, #FFB732, #F4A100);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(244, 161, 0, 0.45);
    color: #03045E;
}

/* ---- SECTION HEADERS ---- */
.bangkep-section-header {
    text-align: center;
    padding: 16px 0 20px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.section-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

.section-title-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #0077B6, #00B4D8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0,119,182,0.3);
}

.section-title-text {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #023E8A;
    margin: 0;
}

.section-subtitle {
    color: #64748b;
    font-size: 13.5px;
    margin: 0;
}

/* ---- KATEGORI GRID ---- */
.bangkep-kategori-section {
    padding: 24px 0 28px;
    position: relative;
    z-index: 2;
    clear: both;
}

.bangkep-kategori-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.bangkep-kat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 12px 18px;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1.5px solid #e2e8f0;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 145px;
}

.bangkep-kat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,119,182,0.18);
    border-color: #0077B6;
}

.kat-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.bangkep-kat-card:hover .kat-icon-wrap { transform: scale(1.1); }

.kat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    text-align: center;
}

.kat-short {
    font-size: 10px;
    font-weight: 700;
    color: #0077B6;
    background: #e8f4fd;
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.5px;
}

/* ---- STATS STRIP ---- */
.bangkep-stats-strip {
    background: linear-gradient(135deg, #03045E 0%, #023E8A 100%);
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    box-shadow: 0 4px 20px rgba(3,4,94,0.25);
}

.stats-strip-label {
    color: #FFD166;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,0.15);
    white-space: nowrap;
}

.stats-strip-items {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
}

.stat-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-right: 1px solid rgba(255,255,255,0.1);
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background 0.2s;
    border-radius: 8px;
}

.stat-strip-item:hover { background: rgba(255,255,255,0.08); }

.stat-strip-icon {
    font-size: 22px;
    color: #FFD166;
    flex-shrink: 0;
}

.stat-strip-num {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.stat-strip-name {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
}

.stat-strip-more {
    color: #FFD166 !important;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
}

/* ---- MAIN CONTENT ROW ---- */
.bangkep-main-content-row { gap: 0; }
.bangkep-content-card { border-radius: 14px !important; margin-bottom: 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
.bangkep-sidebar-card { border-radius: 14px !important; margin-bottom: 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; overflow: hidden; }

/* ---- CUSTOM TABS ---- */
.bangkep-tab-header { background: #f8fafc; border-bottom: 2px solid #e2e8f0; border-radius: 14px 14px 0 0; overflow-x: auto; }
.bangkep-custom-tabs { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; white-space: nowrap; border: none !important; }
.bangkep-custom-tabs li,
.bangkep-custom-tabs .nav-item { flex-shrink: 0; margin-bottom: 0 !important; }

.bangkep-tab-link,
.bangkep-custom-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bangkep-tab-link:hover,
.bangkep-custom-tabs .nav-link:hover {
    color: #0077B6 !important;
    background: rgba(0,119,182,0.06) !important;
}

.bangkep-tab-link.active,
.bangkep-custom-tabs .nav-link.active {
    color: #0077B6 !important;
    border-bottom: 3px solid #0077B6 !important;
    background: rgba(0,119,182,0.1) !important;
}

/* ---- BERITA GRID ---- */
.bangkep-berita-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.bangkep-berita-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
    background: #ffffff;
}

.bangkep-berita-item:hover { box-shadow: 0 6px 20px rgba(0,119,182,0.12); transform: translateY(-3px); border-color: #bfdbfe; }

.bangkep-berita-thumb-link { position: relative; display: block; }
.bangkep-berita-thumb { width: 100%; height: 130px; object-fit: cover; display: block; }

.bangkep-berita-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #F4A100;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.bangkep-berita-body { padding: 10px 12px; }
.bangkep-berita-title { font-size: 13px; font-weight: 600; color: #1e293b; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.bangkep-berita-title:hover { color: #0077B6; }
.bangkep-berita-meta { font-size: 11px; color: #94a3b8; margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- LIST ITEMS (Layanan, Pengumuman, Agenda, Bank Data) ---- */
.bangkep-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none !important;
    color: inherit;
    transition: background 0.18s;
    cursor: pointer;
}

.bangkep-list-item:last-child { border-bottom: none; }
.bangkep-list-item:hover { background: #f0f7ff; }
.bangkep-list-icon { font-size: 20px; flex-shrink: 0; width: 36px; text-align: center; }
.bangkep-list-body { flex: 1; min-width: 0; }
.bangkep-list-title { font-size: 13.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bangkep-list-meta { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.bangkep-list-arrow { color: #cbd5e1; font-size: 12px; flex-shrink: 0; }

/* ---- PRODUK HUKUM LIST ---- */
.bangkep-section-header-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bangkep-inline-title { font-size: 15px; font-weight: 700; color: #023E8A; margin: 0; flex: 1; }
.bangkep-viewall-link { font-size: 12px; color: #0077B6; text-decoration: none; font-weight: 600; white-space: nowrap; }
.bangkep-viewall-link:hover { color: #F4A100; }

.bangkep-produk-list { display: flex; flex-direction: column; gap: 0; }

.bangkep-produk-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.bangkep-produk-item:last-child { border-bottom: none; }

.produk-icon-box {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #0077B6, #00B4D8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.produk-info { flex: 1; min-width: 0; }
.produk-nama { font-size: 13.5px; font-weight: 600; color: #1e293b; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.produk-actions { display: flex; gap: 8px; }

.btn-produk-detail, .btn-produk-download {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-produk-detail { background: #e8f4fd; color: #0077B6; }
.btn-produk-detail:hover { background: #0077B6; color: #fff; }
.btn-produk-download { background: #fef3c7; color: #d97706; }
.btn-produk-download:hover { background: #F4A100; color: #fff; }

.produk-icon-box.produk-icon-populer {
    background: linear-gradient(135deg, #e63946, #f77f00) !important;
}

.produk-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.badge-soft-danger {
    background: rgba(230, 57, 70, 0.1);
    color: #e63946;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-soft-primary {
    background: rgba(0, 119, 182, 0.1);
    color: #0077B6;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ---- SAMBUTAN ---- */
.bangkep-sambutan-header {
    background: linear-gradient(135deg, #023E8A, #0077B6);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bangkep-sambutan-body {
    padding: 16px;
    text-align: center;
    transition: background 0.2s;
}

.bangkep-sambutan-body:hover { background: #f0f7ff; }

.sambutan-foto {
    width: 100%;
    max-width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,119,182,0.2);
    margin-bottom: 10px;
    border: 3px solid #e8f4fd;
}

.sambutan-nama { font-size: 13.5px; font-weight: 700; color: #023E8A; margin-bottom: 6px; }

.sambutan-baca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #0077B6;
    background: #e8f4fd;
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.2s;
}

.bangkep-sambutan-body:hover .sambutan-baca { background: #0077B6; color: #fff; }

/* ---- SECTION LINKS (sts_section) ---- */
.bangkep-section-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bangkep-sec-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 12px;
    color: #334155;
    font-weight: 500;
    transition: all 0.18s;
}

.bangkep-sec-link-item:hover { background: #e8f4fd; color: #0077B6; border-color: #bfdbfe; }

/* ---- JAJAK PENDAPAT (POLLING) ---- */
.bangkep-poll-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 16px;
}

.bangkep-poll-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0;
    user-select: none;
}

.bangkep-poll-item:hover {
    background: #f0f7ff;
    border-color: #90E0EF;
}

.bangkep-poll-item input[type="radio"] {
    margin: 0;
    accent-color: #0077B6;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.bangkep-poll-item.active,
.bangkep-poll-item:has(input[type="radio"]:checked) {
    background: #e0f2fe;
    border-color: #0077B6;
    color: #023E8A;
    font-weight: 600;
}

.bangkep-poll-text {
    font-size: 13.5px;
    color: #334155;
    cursor: pointer;
}

/* ---- VIDEO ---- */
.bangkep-video-frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.bangkep-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ---- GALERI VIDEO MODERN & MODAL POPUP ---- */
.bangkep-video-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.bangkep-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 119, 182, 0.15);
    border-color: #90E0EF;
}

.bangkep-video-thumb-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background: #0f172a;
    overflow: hidden;
}

.bangkep-video-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bangkep-video-card:hover .bangkep-video-thumb {
    transform: scale(1.05);
}

.bangkep-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.bangkep-video-card:hover .bangkep-video-overlay {
    background: rgba(2, 62, 138, 0.45);
}

.bangkep-video-play-btn {
    width: 52px;
    height: 52px;
    background: rgba(244, 161, 0, 0.95);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 0 0 6px rgba(244, 161, 0, 0.3), 0 6px 16px rgba(0,0,0,0.3);
    transition: all 0.25s ease;
    padding-left: 3px;
}

.bangkep-video-card:hover .bangkep-video-play-btn {
    transform: scale(1.12);
    background: #F4A100;
    box-shadow: 0 0 0 10px rgba(244, 161, 0, 0.45), 0 8px 24px rgba(0,0,0,0.35);
}

.bangkep-video-category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(3, 4, 94, 0.85);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.bangkep-video-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bangkep-video-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.bangkep-video-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #023E8A;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.bangkep-video-card:hover .bangkep-video-title {
    color: #0077B6;
}

.bangkep-video-snippet {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.bangkep-video-card-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
    margin-top: auto;
}

.bangkep-video-watch-btn {
    font-size: 12.5px;
    font-weight: 600;
    color: #0077B6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.bangkep-video-card:hover .bangkep-video-watch-btn {
    color: #F4A100;
    transform: translateX(4px);
}

/* Modal Styling */
.bangkep-video-modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(3, 4, 94, 0.35);
}

.bangkep-video-modal-header {
    background: linear-gradient(135deg, #023E8A, #0077B6);
    color: #ffffff;
    padding: 16px 22px;
    border-bottom: none;
}

.bangkep-modal-icon-badge {
    width: 36px;
    height: 36px;
    background: rgba(244, 161, 0, 0.25);
    border: 1.5px solid #F4A100;
    color: #FFD166;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding-left: 2px;
    flex-shrink: 0;
}

.bangkep-modal-label-small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFD166;
    display: block;
    font-weight: 600;
}

.bangkep-modal-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.bangkep-modal-close {
    color: #ffffff !important;
    text-shadow: none;
    opacity: 0.85;
    font-size: 24px;
    transition: opacity 0.2s;
}

.bangkep-modal-close:hover {
    opacity: 1;
}

.bangkep-modal-player-wrap {
    background: #000000;
}

.bangkep-video-modal-details {
    background: #ffffff;
}

.bangkep-video-modal-meta {
    font-size: 12.5px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.bangkep-video-modal-subheading {
    font-size: 14px;
    font-weight: 700;
    color: #023E8A;
}

.bangkep-video-modal-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    background: #f8fafc;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.bangkep-video-modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 12px 22px;
    background: #f8fafc;
}

/* ---- PETA ---- */
.bangkep-map-wrap { border-radius: 8px; overflow: hidden; }
.bangkep-map-wrap iframe { height: 200px; width: 100%; border: none; }

/* ---- LINK TERKAIT SECTION ---- */
.bangkep-linkterkait-section { padding: 0 0 28px; }

/* ================================================================ */
/* RESPONSIVE                                                        */
/* ================================================================ */
@media (max-width: 1199.98px) {
    .bangkep-kategori-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991.98px) {
    .bangkep-banner-wrapper { padding: 14px 14px 0; }
    .bangkep-android-carousel-frame {
        border-radius: 20px;
        aspect-ratio: var(--banner-custom-ratio, 1200 / 440);
        height: auto;
        max-height: none;
    }
    .bangkep-banner-img {
        width: 100%;
        height: 100%;
        aspect-ratio: var(--banner-custom-ratio, 1200 / 440);
        border-radius: 20px;
        object-fit: fill;
        min-height: 0;
        max-height: none;
    }
    .android-floating-badge { top: 12px; left: 14px; font-size: 11px; padding: 5px 12px; }
    .bangkep-search-section { padding: 16px 14px 24px; }
    .bangkep-search-card { border-radius: 22px; padding: 28px 20px; }
    .bangkep-search-card .hero-title { font-size: 24px; }
    .bangkep-search-card .hero-subtitle { font-size: 13.5px; }
    .bangkep-berita-grid { grid-template-columns: repeat(2, 1fr); }
    .bangkep-kategori-grid { grid-template-columns: repeat(3, 1fr); }
    .bangkep-stats-strip { flex-direction: column; align-items: flex-start; }
    .stats-strip-label { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 10px; width: 100%; }
}

@media (max-width: 575.98px) {
    .bangkep-banner-wrapper { padding: 10px 10px 0; }
    .bangkep-android-carousel-frame {
        border-radius: 16px;
        aspect-ratio: var(--banner-custom-ratio, 1200 / 440);
        height: auto;
        max-height: none;
    }
    .bangkep-banner-img {
        width: 100%;
        height: 100%;
        aspect-ratio: var(--banner-custom-ratio, 1200 / 440);
        border-radius: 16px;
        object-fit: fill;
        min-height: 0;
        max-height: none;
    }
    .android-floating-badge { display: none; }
    .android-carousel-control { width: 36px !important; height: 36px !important; }
    .android-control-circle { width: 34px; height: 34px; font-size: 12px; }
    .carousel-control-prev.android-carousel-control { left: 8px !important; }
    .carousel-control-next.android-carousel-control { right: 8px !important; }
    .android-carousel-indicators { bottom: 10px !important; padding: 4px 10px; }
    .android-carousel-indicators li.active { width: 20px !important; }
    .bangkep-ticker-wrapper { padding: 0 10px; margin-top: 10px; }
    .bangkep-search-section { padding: 12px 10px 20px; }
    .bangkep-search-card { border-radius: 18px; padding: 22px 14px; }
    .bangkep-search-card .hero-title { font-size: 20px; }
    .android-search-bar { padding: 4px 6px 4px 16px; }
    .android-search-submit-btn { padding: 10px 16px; font-size: 12px; }
    .android-search-submit-btn .btn-text { display: none; }
    .android-search-submit-btn i { margin: 0; font-size: 14px; }
    .bangkep-kategori-grid { grid-template-columns: repeat(2, 1fr); }
    .bangkep-berita-grid { grid-template-columns: 1fr; }
}

/* ================================================================ */
/* ANDROID MATERIAL DESIGN 3 (M3) GLOBAL DESIGN SYSTEM              */
/* ================================================================ */

/* 1. M3 Global Typography & Smooth Motion */
:root {
    --md-font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --md-shape-corner-xs: 8px;
    --md-shape-corner-sm: 12px;
    --md-shape-corner-md: 16px;
    --md-shape-corner-lg: 20px;
    --md-shape-corner-xl: 24px;
    --md-shape-corner-xxl: 28px;
    --md-shape-corner-full: 9999px;

    /* M3 Elevations with soft ambient tinted shadows */
    --md-elevation-1: 0 1px 3px 1px rgba(2, 62, 138, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --md-elevation-2: 0 2px 6px 2px rgba(2, 62, 138, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --md-elevation-3: 0 4px 14px 3px rgba(2, 62, 138, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --md-elevation-4: 0 8px 24px 4px rgba(2, 62, 138, 0.14), 0 2px 6px 0 rgba(0, 0, 0, 0.1);

    /* M3 Surface Tones */
    --md-surface: #f8fafc;
    --md-surface-container: #ffffff;
    --md-surface-container-high: #f1f5f9;
    --md-surface-tint: #0077B6;
    --md-outline: #cbd5e1;
    --md-outline-variant: #e2e8f0;
}

body {
    font-family: var(--md-font-family) !important;
    background-color: var(--md-surface) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--md-font-family) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 2. M3 Card Squircles & Elevation */
.card, .bangkep-content-card {
    border-radius: var(--md-shape-corner-xl) !important;
    border: 1px solid var(--md-outline-variant) !important;
    background: var(--md-surface-container) !important;
    box-shadow: var(--md-elevation-1) !important;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
}

.card:hover, .bangkep-content-card:hover {
    box-shadow: var(--md-elevation-2) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--md-outline-variant) !important;
    padding: 16px 20px !important;
    border-top-left-radius: var(--md-shape-corner-xl) !important;
    border-top-right-radius: var(--md-shape-corner-xl) !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--md-outline-variant) !important;
    padding: 14px 20px !important;
    border-bottom-left-radius: var(--md-shape-corner-xl) !important;
    border-bottom-right-radius: var(--md-shape-corner-xl) !important;
}

/* 3. M3 Pill Buttons & Tactile Feedback */
.btn {
    border-radius: var(--md-shape-corner-full) !important;
    font-family: var(--md-font-family) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 8px 22px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn:active {
    transform: scale(0.96) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #023E8A 0%, #0077B6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(0, 119, 182, 0.28) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #0077B6 0%, #0096c7 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 119, 182, 0.38) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

.btn-secondary {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.btn-outline-primary {
    border: 1.5px solid #0077B6 !important;
    color: #0077B6 !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: #e0f2fe !important;
    color: #023E8A !important;
    border-color: #023E8A !important;
}

/* 4. M3 Outlined Text Fields */
.form-control, .custom-select, select.form-control, textarea.form-control {
    border-radius: var(--md-shape-corner-md) !important;
    border: 1.5px solid var(--md-outline) !important;
    background-color: var(--md-surface) !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    padding: 10px 16px !important;
    height: auto !important;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.form-control:focus, .custom-select:focus {
    background-color: #ffffff !important;
    border-color: #0077B6 !important;
    box-shadow: 0 0 0 4px rgba(0, 119, 182, 0.16) !important;
    outline: none !important;
}

.input-group .form-control {
    border-top-left-radius: var(--md-shape-corner-md) !important;
    border-bottom-left-radius: var(--md-shape-corner-md) !important;
}

.input-group .btn {
    border-top-right-radius: var(--md-shape-corner-md) !important;
    border-bottom-right-radius: var(--md-shape-corner-md) !important;
    padding: 10px 18px !important;
}

/* 5. M3 Badges & Chips */
.badge {
    border-radius: var(--md-shape-corner-full) !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    letter-spacing: 0.02em;
    font-size: 11.5px !important;
}

/* 6. M3 Dialogs & Modals */
.modal-content {
    border-radius: var(--md-shape-corner-xxl) !important;
    border: none !important;
    box-shadow: var(--md-elevation-4) !important;
    overflow: hidden !important;
}

.modal-header {
    border-bottom: 1px solid var(--md-outline-variant) !important;
    padding: 18px 24px !important;
}

.modal-body {
    padding: 22px 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--md-outline-variant) !important;
    padding: 14px 24px !important;
}

/* 7. M3 Floating Action Button (FAB) */
#myBtn {
    border-radius: 16px !important; /* M3 Squircle FAB */
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #023E8A, #0077B6) !important;
    box-shadow: var(--md-elevation-3) !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 20px !important;
    transition: transform 0.2s cubic-bezier(0.2,0,0,1), box-shadow 0.2s cubic-bezier(0.2,0,0,1) !important;
}

#myBtn:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: var(--md-elevation-4) !important;
}

#myBtn br, #myBtn span.btn-txt {
    display: none !important;
}

/* 8. M3 Pagination */
.pagination {
    gap: 4px;
    justify-content: center;
}

.pagination .page-item .page-link {
    border-radius: var(--md-shape-corner-full) !important;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--md-outline-variant) !important;
    color: #0077B6 !important;
    background: #ffffff !important;
    transition: all 0.18s ease;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #023E8A, #0077B6) !important;
    border-color: #0077B6 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 119, 182, 0.3) !important;
}

.pagination .page-item .page-link:hover {
    background: #e0f2fe !important;
    color: #023E8A !important;
}

/* 9. M3 Tables */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: #f1f5f9 !important;
    color: #023E8A !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-top: none !important;
    border-bottom: 1.5px solid var(--md-outline-variant) !important;
    padding: 12px 16px !important;
}

.table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid #f1f5f9 !important;
}

.table-hover tbody tr:hover {
    background-color: #f0f7ff !important;
}

/* 10. M3 Breadcrumbs */
.breadcrumb {
    background: #ffffff !important;
    border-radius: var(--md-shape-corner-full) !important;
    padding: 8px 18px !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: var(--md-elevation-1) !important;
    display: inline-flex !important;
}

/* 11. Android M3 Mobile Bottom Navigation Bar */
.android-m3-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1001;
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.06);
    padding: 0 4px;
}

.android-m3-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    background: none;
    border: none;
    cursor: pointer;
    flex: 1;
    max-width: 80px;
}

.android-m3-nav-indicator {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.android-m3-nav-label {
    font-size: 10.5px;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.android-m3-nav-item.active .android-m3-nav-indicator {
    background: #e0f2fe;
    color: #0077B6;
}

.android-m3-nav-item.active .android-m3-nav-label {
    color: #0077B6;
    font-weight: 700;
}

.android-m3-nav-item:hover {
    color: #0077B6;
}

/* Offset for floating widgets on mobile — Mencegah tumpang tindih dengan Bottom Nav */
@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 1. Tombol Disabilitas / Aksesibilitas (Sisi Kiri Bawah) */
    #acc-trigger {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px !important;
        width: 44px !important;
        height: 44px !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
        z-index: 1000 !important;
    }
    #acc-trigger svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* 2. Tombol Mengambang Pencarian Dokumen Hukum (Sisi Kanan Bawah) */
    #search-float-btn,
    #wa-float-btn {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
        z-index: 1000 !important;
    }
    .search-float-icon,
    .wa-float-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 19px !important;
        box-shadow: 0 4px 14px rgba(0, 119, 182, 0.45) !important;
    }
    .search-float-label,
    .search-name-tag,
    .wa-name-tag {
        display: none !important;
    }

    /* 3. Tombol Kembali ke Atas / Top (Bertingkat Rapi di Atas Tombol Pencarian) */
    #myBtn {
        bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
        right: 17px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        z-index: 999 !important;
        padding: 0 !important;
        font-size: 16px !important;
        box-shadow: 0 4px 14px rgba(0, 119, 182, 0.35) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. Panel Aksesibilitas agar responsif penuh di HP dan tidak tertutup Bottom Bar */
    #acc-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 100001 !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ================================================================ */
/* 12. ANDROID M3 — PREMIUM CONTENT PAGE DESIGN SYSTEM             */
/*     Covers: news, detail, gallery, pengumuman, layanan, agenda,  */
/*     bankdata, peraturan, ebook, FAQ, forms, sidebar, pagination  */
/* ================================================================ */

/* ── Page Content Wrapper (Pemisahan Jelas dari Top Bar) ──────── */
.page-content-wrapper {
    margin-top: 0 !important;
    padding-bottom: 50px !important;
    position: relative;
    z-index: 1;
}

/* ── Container Separation: Grid Pages vs Single/Detail Pages ───── */
/* Grid Page Container (News, Agenda, Layanan, Pengumuman, E-Book): 
   Transparent wrapper so individual M3 cards float independently */
.col-xl-12 > .card.m3-content-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.col-xl-12 > .card.m3-content-card > .card-body {
    padding: 0 !important;
}

/* Detail & Split Page Content Card (Left column) */
.col-lg-8 > .card.m3-content-card,
.col-md-8 > .card.m3-content-card,
.card.m3-content-card:not(.col-xl-12 > .card) {
    border-radius: 24px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(2, 62, 138, 0.08), 0 1px 4px rgba(0,0,0,0.03) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Sidebar Dedicated Cards (Right column) */
.m3-sidebar-card {
    border-radius: 24px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(2, 62, 138, 0.08), 0 1px 4px rgba(0,0,0,0.03) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.m3-sidebar-card > .card-body,
.col-lg-8 > .card.m3-content-card > .card-body,
.col-md-8 > .card.m3-content-card > .card-body {
    padding: 28px 24px !important;
}

/* Clear column gutters for split layouts */
@media (min-width: 992px) {
    .page-content-wrapper .col-lg-8 {
        padding-right: 16px !important;
    }
    .page-content-wrapper .col-lg-4 {
        padding-left: 16px !important;
    }
}

/* ── News & Article Cards (M3 Elevated Card) ──────────────────── */
.col-sampul {
    margin-bottom: 28px !important;
}

/* ================================================================ */
/* A. DEDICATED M3 CARD: BERITA & INFORMASI (.m3-news-card)         */
/* ================================================================ */
.m3-news-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(2, 62, 138, 0.06);
    transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), 
                box-shadow 0.28s cubic-bezier(0.2, 0, 0, 1), 
                border-color 0.28s ease;
    position: relative;
}

.m3-news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(2, 62, 138, 0.14);
    border-color: #90E0EF;
}

.m3-news-thumb {
    position: relative;
    width: 100%;
    height: 190px;
    background: #e2e8f0;
    overflow: hidden;
}

.m3-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
}

.m3-news-card:hover .m3-news-thumb img {
    transform: scale(1.08);
}

.m3-news-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #0077B6, #023E8A);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 2;
    text-decoration: none !important;
}

.m3-news-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.m3-news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.m3-news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.m3-news-meta i {
    color: #0077B6;
    font-size: 12px;
}

.m3-news-meta a {
    color: #0077B6;
    font-weight: 600;
    text-decoration: none;
}

.m3-news-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.m3-news-title:hover {
    color: #0077B6 !important;
}

.m3-news-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.m3-news-read-btn {
    font-size: 13px;
    font-weight: 700;
    color: #0077B6 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    transition: gap 0.2s ease, color 0.2s ease;
}

.m3-news-read-btn:hover {
    color: #023E8A !important;
    gap: 10px;
}

/* ================================================================ */
/* B. DEDICATED M3 CARD: AGENDA KEGIATAN (.m3-agenda-card)          */
/* ================================================================ */
.m3-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m3-agenda-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 2px 8px rgba(2, 62, 138, 0.05);
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

.m3-agenda-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to bottom, #0077B6, #00B4D8);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.m3-agenda-card:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 22px rgba(2, 62, 138, 0.12);
    border-color: #90E0EF;
}

.m3-agenda-card:hover::before {
    opacity: 1;
}

.m3-agenda-date-pill {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0f7ff, #e0f2fe);
    color: #0077B6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid #bae6fd;
}

.m3-agenda-content {
    flex-grow: 1;
    min-width: 0;
}

.m3-agenda-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m3-agenda-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
}

.m3-agenda-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.m3-agenda-meta i {
    color: #0077B6;
}

.m3-agenda-arrow {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.m3-agenda-card:hover .m3-agenda-arrow {
    transform: translateX(3px);
    color: #0077B6;
}

/* ================================================================ */
/* C. DEDICATED M3 CARD: LAYANAN INFORMASI (.m3-layanan-card)       */
/* ================================================================ */
.m3-layanan-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m3-layanan-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 2px 8px rgba(2, 62, 138, 0.05);
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.m3-layanan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(2, 62, 138, 0.12);
    border-color: #90E0EF;
    background: #fafcff;
}

.m3-layanan-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0077B6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.m3-layanan-content {
    flex-grow: 1;
    min-width: 0;
}

.m3-layanan-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.4;
    margin-bottom: 4px;
}

.m3-layanan-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
}

.m3-layanan-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.m3-layanan-meta i {
    color: #0077B6;
}

.m3-layanan-action {
    flex-shrink: 0;
}

.m3-layanan-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: #f0f7ff;
    color: #0077B6;
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid #bae6fd;
    transition: all 0.2s ease;
}

.m3-layanan-card:hover .m3-layanan-btn {
    background: #0077B6;
    color: #ffffff;
    border-color: #0077B6;
}

/* ================================================================ */
/* D. DEDICATED M3 CARD: PENGUMUMAN (.m3-pengumuman-card)           */
/* ================================================================ */
.m3-pengumuman-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(2, 62, 138, 0.06);
    transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.28s cubic-bezier(0.2, 0, 0, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.m3-pengumuman-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(2, 62, 138, 0.15);
    border-color: #90E0EF;
}

.m3-pengumuman-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e2e8f0;
}

.m3-pengumuman-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.m3-pengumuman-card:hover .m3-pengumuman-thumb img {
    transform: scale(1.06);
}

.m3-pengumuman-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.m3-pengumuman-overlay i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0077B6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.m3-pengumuman-card:hover .m3-pengumuman-overlay {
    opacity: 1;
}

.m3-pengumuman-info {
    padding: 14px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.m3-pengumuman-date {
    font-size: 11.5px;
    color: #64748b;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.m3-pengumuman-date i {
    color: #0077B6;
}

.m3-pengumuman-title {
    font-size: 14px;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================================ */
/* E. DEDICATED M3 CARD: PERATURAN HUKUM (.m3-peraturan-card)       */
/* ================================================================ */
.m3-peraturan-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #0077B6;
    padding: 18px 22px;
    box-shadow: 0 2px 8px rgba(2, 62, 138, 0.06);
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.m3-peraturan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(2, 62, 138, 0.12);
    border-color: #90E0EF;
    border-left-color: #0077B6;
}

.m3-peraturan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.m3-peraturan-type-badge {
    font-size: 11px;
    font-weight: 700;
    color: #0077B6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f0f7ff;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid #bae6fd;
}

.m3-peraturan-body {
    margin-bottom: 14px;
}

.m3-peraturan-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    display: block;
    transition: color 0.2s ease;
}

.m3-peraturan-title:hover {
    color: #0077B6 !important;
}

.m3-peraturan-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.m3-peraturan-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-btn-pill {
    border-radius: 9999px !important;
    padding: 5px 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* Status Badges */
.m3-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
}

.m3-status-berlaku {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.m3-status-tidak {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.m3-status-dicabut {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.m3-status-mencabut {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.m3-status-default {
    background: #f1f5f9;
    color: #475569;
}

/* ================================================================ */
/* F. DEDICATED M3 CARD: E-BOOK (.m3-ebook-card)                    */
/* ================================================================ */
.m3-ebook-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(2, 62, 138, 0.06);
    transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.28s cubic-bezier(0.2, 0, 0, 1);
}

.m3-ebook-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(2, 62, 138, 0.15);
    border-color: #90E0EF;
}

.m3-ebook-cover {
    position: relative;
    width: 100%;
    height: 220px;
    background: #f1f5f9;
    overflow: hidden;
}

.m3-ebook-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.m3-ebook-card:hover .m3-ebook-cover img {
    transform: scale(1.06);
}

.m3-ebook-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(3, 4, 94, 0.85);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
}

.m3-ebook-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.m3-ebook-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
}

.m3-ebook-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: #64748b;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.m3-ebook-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.m3-ebook-meta i {
    color: #0077B6;
}

.m3-ebook-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* ================================================================ */
/* G. M3 EMPTY STATE                                                */
/* ================================================================ */
.m3-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: #f8fafc;
    border-radius: 20px;
    border: 2px dashed #cbd5e1;
    margin: 20px 0;
}

.m3-empty-state i {
    font-size: 48px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.m3-empty-state p {
    font-size: 15px;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

/* ================================================================ */
/* H. M3 SIDEBAR NEWS CARD (.m3-side-news-card)                    */
/* ================================================================ */
.m3-side-news-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(2, 62, 138, 0.04);
    transition: all 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.m3-side-news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 62, 138, 0.10);
    border-color: #90E0EF;
}

.m3-side-news-thumb {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
}

.m3-side-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.m3-side-news-card:hover .m3-side-news-thumb img {
    transform: scale(1.08);
}

.m3-side-news-info {
    flex-grow: 1;
    min-width: 0;
}

.m3-side-news-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    margin-bottom: 4px !important;
    transition: color 0.2s ease;
}

.m3-side-news-title:hover {
    color: #0077B6 !important;
}

.m3-side-news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #64748b;
}

.m3-table-responsive {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(2, 62, 138, 0.05) !important;
}

/* ================================================================ */
/* I. DEDICATED M3 CARD: BERITA TERPOPULER (.m3-pop-card)           */
/* ================================================================ */
.m3-pop-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-radius: 14px;
    border-left: 5px solid #F4A100;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(244, 161, 0, 0.1);
}

.m3-pop-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F4A100;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(244, 161, 0, 0.35);
    flex-shrink: 0;
}

.m3-pop-header-title {
    font-size: 15px;
    font-weight: 800;
    color: #9a3412;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.m3-pop-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(2, 62, 138, 0.05);
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

.m3-pop-card:hover {
    transform: translateX(4px);
    border-color: #90E0EF;
    box-shadow: 0 8px 22px rgba(2, 62, 138, 0.12);
    background: #fcfdfe;
}

.m3-pop-thumb-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
}

.m3-pop-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.m3-pop-card:hover .m3-pop-thumb {
    transform: scale(1.1);
}

/* Rank Badges: #1 Gold, #2 Silver, #3 Bronze, #4+ Soft Navy */
.m3-pop-rank-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 2;
}

.m3-pop-rank-badge.m3-rank-1 {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

.m3-pop-rank-badge.m3-rank-2 {
    background: linear-gradient(135deg, #94A3B8, #64748B);
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.4);
}

.m3-pop-rank-badge.m3-rank-3 {
    background: linear-gradient(135deg, #D97706, #92400E);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
}

.m3-pop-rank-badge.m3-rank-default {
    background: rgba(3, 4, 94, 0.75);
    backdrop-filter: blur(4px);
}

.m3-pop-info {
    flex-grow: 1;
    min-width: 0;
}

.m3-pop-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
    transition: color 0.2s ease;
}

.m3-pop-title:hover {
    color: #0077B6 !important;
}

.m3-pop-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    flex-wrap: wrap;
}

.m3-pop-date {
    color: #64748b;
    display: inline-flex;
    align-items: center;
}

.m3-pop-hits {
    background: #fff7ed;
    color: #c2410c;
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 10.5px;
    border: 1px solid #ffedd5;
    display: inline-flex;
    align-items: center;
}

/* Retrofit legacy sidebar news markup */
.card.border-light:has(.wraper-img-side) {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(2, 62, 138, 0.05) !important;
    overflow: hidden !important;
    transition: all 0.22s ease !important;
    padding: 8px !important;
    background: #ffffff !important;
}

.card.border-light:has(.wraper-img-side):hover {
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(2, 62, 138, 0.12) !important;
    border-color: #90E0EF !important;
}

.wraper-img-side {
    border-radius: 12px !important;
    height: 74px !important;
    object-fit: cover !important;
}

.judul-side {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.judul-side:hover {
    color: #0077B6 !important;
}

.post-side {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #64748b !important;
}

/* ==========================================================================
   MODAL & BACKDROP STACKING (Higher than .bangkep-navbar 100000)
   ========================================================================== */
.modal-backdrop {
    z-index: 105000 !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.modal {
    z-index: 105010 !important;
}

.modal-dialog {
    z-index: 105020 !important;
}

/* Modal Content Glass & Elevation */
#modalview .modal-content {
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
    background: #ffffff !important;
}

#modalview .modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#modalview .modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}




/* ===================================================
   VISITOR STATS WIDGET — FOOTER
   =================================================== */
.visitor-stats-widget {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 12px;
}

.visitor-stats-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.visitor-stats-title i {
    margin-right: 5px;
}

.visitor-stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.visitor-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 7px 14px;
    min-width: 100px;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
}

.visitor-stat-item:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-2px);
}

.visitor-stat-icon {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.visitor-stat-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.visitor-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.visitor-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

/* Online pulse animation */
.online-pulse {
    color: #4ade80 !important;
    background: rgba(74,222,128,0.15) !important;
    animation: onlinePulse 2s infinite;
}

@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}

@media (max-width: 576px) {
    .visitor-stats-grid {
        gap: 6px;
    }
    .visitor-stat-item {
        min-width: calc(50% - 6px);
        flex: 1 1 calc(50% - 6px);
    }
}
/* ===================================================
   END VISITOR STATS WIDGET
   =================================================== */