/* ===================================================
   1. BASE & BACKGROUND SYSTEM
   =================================================== */
body.site {
    background-color: #f0f2f5 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #334155 !important;
}

header.header, .header, .container-header, .site-header {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ===================================================
   2. TOPBAR MERAH RESMI (JAM LAYANAN) - FIXED ALIGNMENT
   =================================================== */
.container-topbar {
    background: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    display: block !important; /* Diubah dari flex center agar flexchild di dalam topbar-content bekerja */
    box-shadow: none !important;
}
/* ===================================================
   3. UNIFORM CONTAINER LAYOUT
   =================================================== */
.site-grid,
.container-below-top,
.container-banner,
.container-top-a,
.container-top-b,
.container-main,
.container-bottom-a,
.container-bottom-b,
.container-footer {
    max-width: var(--cassiopeia-grid-container, 1280px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* ===================================================
   4. HEADER IDENTITAS & LOGO EMAS METALLIC
   =================================================== */
.header-official-wrapper {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 0 !important;
    width: 100% !important;
}

.container-header-inner,
.header-identitas {
    max-width: var(--cassiopeia-grid-container, 1280px) !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
}

.brand-logo-text,
.header-identitas .logo-title {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.header-official-wrapper .main-logo,
.header-identitas img.logo {
    height: 65px !important;
    width: auto !important;
}

.brand-text .sub-title {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    letter-spacing: 0.5px;
    background: transparent !important;
}

.brand-text .main-title,
.header-identitas .text-satker h1,
header.header .main-title,
header.header .logo-title h1 {
    font-size: 1.75rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #d4af37 0%, #fef1b5 25%, #b8860b 65%, #aa771c 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
}

.header-official-wrapper .badge-img {
    height: 75px !important;
    width: auto !important;
}

/* ===================================================
   5. MENU NAVIGASI & MULTI-LEVEL DROPDOWN
   =================================================== */
.container-below-top, div.container-below-top, .navigation-region {
    background: linear-gradient(135deg, #b82c0d 0%, #9a2109 100%) !important;
    margin-top: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(154, 33, 9, 0.2) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}

.container-below-top ul.mod-menu, 
.container-below-top ul.nav, 
.navigation-region ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

.container-below-top ul.mod-menu > li,
.container-below-top ul.nav > li,
.navigation-region ul > li {
    flex: 1 1 auto !important;
    text-align: center !important;
    white-space: nowrap !important;
    position: relative !important;
}

.container-below-top > ul > li > a,
.container-below-top > .nav > .nav-item > a {
    background-color: transparent !important;
}

.container-below-top a, .container-below-top .nav-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
    padding: 10px 10px !important;
    display: block !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.container-below-top a:hover, .container-below-top .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

.container-below-top .dropdown-menu li,
.container-below-top li > ul li {
    position: relative !important;
}

@media (min-width: 992px) {
    .container-below-top li:hover > ul,
    .container-below-top li:hover > .dropdown-menu,
    .container-below-top .dropdown:hover > .dropdown-menu,
    .container-below-top .nav-item:hover > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        animation: fadeIn 0.2s ease-in-out;
    }
}

.container-below-top ul.dropdown-menu,
.container-below-top li > ul {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #871c07 !important;
    border: 1px solid #6b1404 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
    padding: 6px 0 !important;
    min-width: 230px !important;
    z-index: 1000 !important;
    list-style: none !important;
    margin: 0 !important;
}

.container-below-top ul.dropdown-menu ul,
.container-below-top li > ul li > ul,
.container-below-top .dropdown-menu .dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -6px !important;
    border-radius: 0 8px 8px 8px !important;
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.35) !important;
    z-index: 1001 !important;
}

.container-below-top ul.dropdown-menu a,
.container-below-top li > ul a,
.container-below-top .dropdown-item {
    color: #ffffff !important;
    background-color: transparent !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: normal !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.container-below-top ul.dropdown-menu a:hover,
.container-below-top li > ul a:hover,
.container-below-top .dropdown-item:hover {
    background-color: #b82c0d !important;
    color: #fef1b5 !important;
}

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

/* ===================================================
   6. BANNER SLIDER & TOMBOL APLIKASI
   =================================================== */
#sliderUtama img, .container-banner img {
    border-radius: 0 0 8px 8px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

.container-top-a, 
.container-top-b {
    margin-top: 30px !important;
    margin-bottom: 25px !important;
    clear: both !important;
    display: block !important;
    overflow: visible !important;
}

.container-top-a .card,
.container-top-b .card,
.container-top-a .module,
.container-top-b .module,
.container-top-a .card-body,
.container-top-b .card-body {
    overflow: visible !important;
    height: auto !important;
}

.card-app-box {
    background-color: #ffffff !important;
    border: 2px solid #e65100 !important;
    border-radius: 12px !important;
    padding: 35px 8px 15px 8px !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    display: block !important;
    position: relative !important; 
    text-align: center !important;
    margin-top: 30px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.card-app-box a:has(img),
.card-app-box div:has(img),
.card-app-box span:has(img) {
    display: contents !important;
    position: static !important;
}

.card-app-box img {
    position: absolute !important;
    top: -25px !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
    z-index: 99 !important;
    float: none !important;
    transform: none !important;
}

.card-app-box .title-text {
    color: #212529 !important;
    transition: color 0.2s ease-in-out !important;
    margin-top: 5px !important;
    font-weight: 700 !important;
    display: block !important;
}

.card-app-box .desc-text {
    color: #6c757d !important;
    transition: color 0.2s ease-in-out !important;
    display: block !important;
}

.app-link-wrapper:hover .card-app-box {
    background-color: #9a2109 !important;
    background: #9a2109 !important;
    border-color: #7a1906 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 18px rgba(154, 33, 9, 0.4) !important;
}

.app-link-wrapper:hover .card-app-box .title-text,
.app-link-wrapper:hover .card-app-box .desc-text {
    color: #ffffff !important;
}

/* ===================================================
   7. KONTEN UTAMA
   =================================================== */
.container-main > main, 
.main-content,
#main,
.com-content-category,
.com-content-article {
    background: #ffffff !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #9a2109 !important;
    box-shadow: 0 4px 12px rgba(154, 33, 9, 0.08) !important;
    overflow: visible !important;
    margin-bottom: 20px !important;
}

/* ===================================================
   8. FRAME MERAH KHUSUS: SIDEBAR RIGHT & MAIN BOTTOM
   =================================================== */

/* A. Bingkai Kotak Luar Merah untuk Modul Sidebar Right & Main Bottom */
aside.sidebar-right .card,
aside.sidebar-right .module,
.container-sidebar-right .card,
.container-sidebar-right .module,
.sidebar-right .card,
.sidebar-right .module,
.container-bottom-a .card,
.container-bottom-a .module,
.container-bottom-b .card,
.container-bottom-b .module,
.main-bottom .card,
.main-bottom .module,
div[class*="container-bottom"] .card,
div[class*="container-bottom"] .module {
    background: #ffffff !important;
    border: 1.5px solid #9a2109 !important; /* Frame Merah Tebal & Presisi */
    border-radius: 8px !important;
    padding: 0 !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 14px rgba(154, 33, 9, 0.08) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* B. Header Judul Merah Elegan untuk Sidebar Right & Main Bottom */
aside.sidebar-right h1, aside.sidebar-right h2, aside.sidebar-right h3,
.container-sidebar-right h1, .container-sidebar-right h2, .container-sidebar-right h3,
.sidebar-right h1, .sidebar-right h2, .sidebar-right h3,
aside.sidebar-right .card-header, .container-sidebar-right .card-header, .sidebar-right .card-header,
aside.sidebar-right .module-title, .container-sidebar-right .module-title,
.container-bottom-a h1, .container-bottom-a h2, .container-bottom-a h3,
.container-bottom-b h1, .container-bottom-b h2, .container-bottom-b h3,
.main-bottom h1, .main-bottom h2, .main-bottom h3,
.container-bottom-a .card-header, .container-bottom-b .card-header, .main-bottom .card-header,
.container-bottom-a .module-title, .container-bottom-b .module-title,
div[class*="container-bottom"] h3,
div[class*="container-bottom"] .card-header {
    background: linear-gradient(135deg, #9a2109 0%, #c23819 100%) !important;
    background-color: #9a2109 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* C. Paksa Semua Teks di Dalam Header Merah Berwarna Putih Bersih */
aside.sidebar-right .card-header *,
.container-sidebar-right .card-header *,
.sidebar-right .card-header *,
aside.sidebar-right h3 *,
.container-bottom-a .card-header *,
.container-bottom-b .card-header *,
.main-bottom .card-header *,
.container-bottom-a h3 *,
.container-bottom-b h3 *,
div[class*="container-bottom"] .card-header * {
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* D. Isi Konten di Dalam Modul Sidebar & Bottom */
aside.sidebar-right .card-body,
.container-sidebar-right .card-body,
.container-bottom-a .card-body,
.container-bottom-b .card-body,
aside.sidebar-right .module-content,
.container-bottom-a .module-content,
.container-bottom-b .module-content {
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* ===================================================
   9. GRID BLOG THUMBNAIL 3 KOLOM (AUTOFIT IMAGE & AUTO BUTTON)
   =================================================== */
.com-content-category-blog__items,
.blog .items-leading, 
.blog .items-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 20px 0 !important;
    padding: 0 15px !important;
}

.com-content-category-blog__item,
.blog .item {
    flex: 1 1 calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
    height: 420px !important;
    max-height: 420px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1.5px solid #9a2109 !important;
    border-radius: 10px !important;
    padding: 14px !important;
    box-shadow: 0 4px 10px rgba(154, 33, 9, 0.06) !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease-in-out !important;
    position: relative !important;
}

.blog .item:hover,
.com-content-category-blog__item:hover {
    transform: translateY(-4px) !important;
    border-color: #7a1906 !important;
    box-shadow: 0 8px 20px rgba(154, 33, 9, 0.25) !important;
}

/* --- A. GAMBAR UTAMA (UTUH, TIDAK KEPOTONG & TIDAK DOUBLE) --- */
.blog .item img,
.com-content-category-blog__item img {
    order: -1 !important;
    width: 100% !important;
    height: 150px !important;
    object-fit: contain !important; /* Mencegah gambar terpotong di bagian atas/bawah */
    background-color: #f8fafc !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    display: none !important; /* Sembunyikan semua gambar bawaan */
    border: 1px solid #fee2e2 !important;
}

/* Hanya tampilkan gambar yang paling pertama ada di dalam kartu */
.blog .item img:nth-of-type(1),
.blog .item p:first-of-type img,
.com-content-category-blog__item img:nth-of-type(1),
.com-content-category-blog__item p:first-of-type img {
    display: block !important;
}

/* Sembunyikan gambar ke-2 dan seterusnya di dalam paragraf */
.blog .item p ~ p img,
.com-content-category-blog__item p ~ p img {
    display: none !important;
}

/* --- B. TANGGAL & JUDUL --- */
.blog .item .article-info,
.blog .item dd.published,
.blog .item dd.createdby {
    order: 0 !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
}

.blog .item h2,
.blog .item h2 a,
.com-content-category-blog__item h2 {
    order: 1 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    background: transparent !important;
    padding: 0 !important;
}

.blog .item h2 a:hover {
    color: #9a2109 !important;
}

/* --- C. RINGKASAN TEKS --- */
.blog .item p, 
.com-content-category-blog__item p {
    order: 2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
}

/* --- D. TOMBOL "LIHAT SELENGKAPNYA" TEKS PUTIH KONTRAS --- */
.blog .item h2 a::after,
.com-content-category-blog__item h2 a::after {
    content: "Lihat Selengkapnya  →" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 14px !important;
    right: 14px !important;
    height: 38px !important;
    
    /* Gradasi Warna Merah-Marun */
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
    
    /* Paksa Warna Teks Putih Tajam */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    
    /* Tipografi */
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    
    /* Shape & Shadow */
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

/* Hover Effect */
.blog .item:hover h2 a::after,
.com-content-category-blog__item:hover h2 a::after {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4) !important;
}

/* Penutup Latar Belakang Gambar Kedua */
.blog .item::after,
.com-content-category-blog__item::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: #ffffff !important;
    z-index: 8 !important;
}

.blog .item .readmore,
.com-content-category-blog__item .readmore {
    display: none !important;
}

/* ===================================================
   10. FOOTER FULL-WIDTH MERAH
   =================================================== */
footer.footer, 
.container-footer, 
.site-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;       /* Menghapus jarak luar atas */
    margin-bottom: 0 !important;    /* Menghapus jarak luar bawah */
    padding: 0 !important;          /* Menghapus ruang kosong dalam (atas-bawah) */
    background: #3a0b03 !important;
    border-top: 4px solid #9a2109 !important;
    box-sizing: border-box !important;
}

footer.footer .bg-dark,
.container-footer .bg-dark,
footer.footer .card,
footer.footer .mod-custom {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

footer.footer > *, 
.container-footer > *, 
.site-footer > * {
    max-width: var(--cassiopeia-grid-container, 1280px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

footer.footer a.footer-link,
.container-footer a.footer-link {
    transition: all 0.2s ease-in-out !important;
}

footer.footer a.footer-link:hover,
.container-footer a.footer-link:hover {
    color: #fdba74 !important;
    padding-left: 4px !important;
}

/* ===================================================
   11. TAMPILAN ARTIKEL SINGLE / HALAMAN DOKUMEN
   =================================================== */
.com-content-article {
    padding: 25px 30px !important;
    box-sizing: border-box !important;
}

.com-content-article h1,
.com-content-article .page-header h1,
.com-content-article .page-header h2 {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.com-content-article .article-info,
.com-content-article dl.article-info {
    font-size: 0.82rem !important;
    color: #64748b !important;
    border-bottom: 1px dashed #cbd5e1 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

.com-content-article .article-info dd {
    margin-right: 15px !important;
    display: inline-block !important;
}

.com-content-article p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    color: #334155 !important;
    margin-bottom: 18px !important;
    text-align: justify !important;
}

/* ===================================================
   12. FIX JADWAL SIDANG SIPP RESPONSIF
   =================================================== */
.com-content-article,
.com-content-article > div,
.mod-custom,
.module-content,
.table-responsive,
div[style*="overflow"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.container-main iframe, 
.com-content-article iframe,
.module iframe,
iframe[src*="jadwal"],
iframe[src*="sipp"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ===================================================
   13. RESPONSIVE MOBILE FIX (HP & TABLET)
   =================================================== */
@media (max-width: 991.98px) {
    .header-official-wrapper img,
    .header-identitas img,
    .brand-logo-text img,
    .main-logo,
    header.header img {
        max-height: 50px !important;
        height: 50px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .container-header-inner,
    .header-identitas {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 12px !important;
    }

    .brand-text .main-title,
    .header-identitas .text-satker h1,
    header.header .main-title,
    header.header .logo-title h1 {
        font-size: 1.15rem !important;
    }

    .brand-text .sub-title {
        font-size: 0.7rem !important;
    }

    .com-content-category-blog__item,
    .blog .item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        height: 380px !important;
        max-height: 380px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    .com-content-article {
        padding: 18px 15px !important;
    }
    
    .com-content-article p {
        text-align: left !important;
    }

    .card-app-box img, 
    .card-app-box .icon-wrapper,
    .card-app-box > *:first-child {
        margin-top: 0 !important;
        top: 0 !important;
    }
}

/* ===================================================
   14. FIX IKON BUNDAR EMAS MELAYANG
   =================================================== */
.container-top-a, 
.container-top-b,
.container-top-a *,
.container-top-b * {
    overflow: visible !important;
}

.container-top-a .grid-child,
.container-top-b .grid-child,
.container-top-a .card,
.container-top-b .card,
.card-app-box {
    margin-top: 30px !important;
    overflow: visible !important;
}

.card-app-box img,
.card-app-box .icon-app-box,
.card-app-box [class*="icon"] {
    position: relative !important;
    margin-top: -30px !important;
    top: 0 !important;
    z-index: 10 !important;
    display: inline-block !important;
}

/* ===================================================
   15. EXCLUDE BLOG / KARTU ARTIKEL (PRESISI TINGGI)
   =================================================== */
.com-content-category-blog .card-header,
.com-content-category-blog .card-title,
.com-content-category-blog__item .card-header,
.com-content-category-blog__item .card-title,
.com-content-category-blog__item h1,
.com-content-category-blog__item h2,
.com-content-category-blog__item h3,
.blog .item .card-header,
.blog .item .card-title,
.blog .item h1,
.blog .item h2,
.blog .item h3 {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.com-content-category-blog__item h1,
.com-content-category-blog__item h2,
.com-content-category-blog__item h3,
.com-content-category-blog__item h1 a,
.com-content-category-blog__item h2 a,
.com-content-category-blog__item h3 a,
.blog .item h1,
.blog .item h2,
.blog .item h3,
.blog .item h1 a,
.blog .item h2 a,
.blog .item h3 a {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.com-content-category-blog__item h1 a:hover,
.com-content-category-blog__item h2 a:hover,
.com-content-category-blog__item h3 a:hover,
.blog .item h1 a:hover,
.blog .item h2 a:hover,
.blog .item h3 a:hover {
    color: #9a2109 !important;
    -webkit-text-fill-color: #9a2109 !important;
}


/* Sembunyikan posisi modul atas & banner khusus saat di halaman detail artikel */
.com-content-article .container-top-a,
.com-content-article .container-top-b,
.com-content-article .sp-module-banner {
    display: none !important;
}

/* Sembunyikan modul banner & modul aplikasi khusus saat artikel single dibaca */
body.option-com_content.view-article .container-top-a,
body.option-com_content.view-article .container-top-b,
body.option-com_content.view-article .sp-module-banner,
body.option-com_content.view-article .banner-maklumat {
    display: none !important;
}

/* ===================================================
   16. FIX PASTI: SEMBUNYIKAN MAKLUMAT & TOMBOL APLIKASI
       KHUSUS DI HALAMAN DETAIL ARTIKEL (VIEW ARTICLE)
   =================================================== */

/* 1. Sembunyikan Kontainer Banner & Tombol Layanan Atas */
body.view-article .container-banner,
body.view-article .container-top-a,
body.view-article .container-top-b,
body.view-article #sliderUtama,
body.view-article .banner-maklumat,
body.view-article .sp-module-banner,
body.view-article .card-app-box,
body.view-article .app-link-wrapper {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. Pastikan Menu Navbar Tetap Tampil Sempurna */
body.view-article .container-below-top,
body.view-article .navigation-region {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Rapikan jarak antara Navbar dan Halaman Berita */
body.view-article .container-main {
    margin-top: 20px !important;
}

/* ===================================================
   17. DETAIL ARTIKEL: HANYA NAVBAR DI ATAS
       & SIDEBAR KANAN TETAP MUNCUL
   =================================================== */

/* 1. Sembunyikan Banner Slide, Top-A, dan Maklumat (breadcrumbs)
   Catatan: Logo / .header-official-wrapper & .container-header-inner DIBIARKAN TAMPIL */
body.view-article .container-banner,
body.view-article .container-top-a,
body.view-article .container-top-b,
body.view-article .container-breadcrumbs,
body.view-article .breadcrumbs-region,
body.view-article #sliderUtama,
body.view-article .banner-maklumat,
body.view-article .sp-module-banner {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. PAKSA NAVBAR (below-top) TETAP TAMPIL DI PALING ATAS */
body.view-article .container-below-top,
body.view-article .navigation-region,
body.view-article div.container-below-top {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
}

/* 3. PAKSA SIDEBAR KANAN TETAP TAMPIL */
body.view-article aside.sidebar-right,
body.view-article .container-sidebar-right,
body.view-article .sidebar-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. Atur Jarak Konten Utama */
body.view-article .container-main {
    margin-top: 20px !important;
}

/* ===================================================
   SEMBUNYIKAN JADWAL SIDANG & MODUL BOTTOM
   SAAT DETAIL ARTIKEL DIBUKA (VIEW ARTICLE)
   =================================================== */
body.view-article .container-bottom-a,
body.view-article .container-bottom-b,
body.view-article .main-bottom,
body.view-article div[class*="container-bottom"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ===================================================
   FIX PRESISI: BORDER MERAH UNTUK MAKLUMAT (TOP-A)
   =================================================== */

/* 1. KEMBALIKAN KONTEN UTAMA TOP-A AGAR BERSIH */
.container-top-a .mod-custom,
.container-top-a .card,
.container-top-a .module {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. KEMBALIKAN BORDER ORANYE TOMBOL APLIKASI */
.container-top-a .card-app-box {
    border: 2px solid #e65100 !important;
    background-color: #ffffff !important;
}

/* 3. PAKSA BORDER MERAH KETAT PADA SETIAP GAMBAR MAKLUMAT */
.container-top-a img:not(.card-app-box img) {
    border: 2px solid #9a2109 !important;
    border-radius: 10px !important;
    padding: 6px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(154, 33, 9, 0.15) !important;
    margin-top: 25px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}


/* ===================================================
   FIX BORDER MERAH: FRAME BUNGKUS LUAR MAIN BOTTOM
   =================================================== */

/* Paksa kontainer outer main-bottom / bottom-a/b punya border merah */
.container-bottom-a,
.container-bottom-b,
.main-bottom,
div[class*="container-bottom"] {
    border: 1.5px solid #9a2109 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    padding: 15px !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 14px rgba(154, 33, 9, 0.08) !important;
    box-sizing: border-box !important;
}

/* Bersihkan border pada modul di dalamnya agar tidak double border */
.container-bottom-a .mod-custom,
.container-bottom-a .module-inner,
.container-bottom-a .card,
.container-bottom-b .mod-custom,
.container-bottom-b .module-inner,
.container-bottom-b .card,
.main-bottom .mod-custom,
.main-bottom .module-inner,
.main-bottom .card {
    border: none !important;
    box-shadow: none !important;
}

/* ===================================================
   18. FIX NAVIGASI: DESKTOP DROPDOWN AUTO-ALIGN & MOBILE RESPONSIF
   =================================================== */

/* ---------------------------------------------------
   A. KHUSUS TAMPILAN DESKTOP (Layar > 992px)
   --------------------------------------------------- */
@media (min-width: 992px) {

    /* 1. Alignment Teks & Ikon Segitiga Sejajar */
    .container-below-top li a,
    .container-below-top .dropdown-toggle,
    .navigation-region li a,
    .navigation-region .dropdown-toggle,
    ul.mod-menu li a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        padding-right: 8px !important;
    }

    /* 2. Reset Ikon Segitiga Panah agar Sejajar */
    .container-below-top .dropdown-toggle::after,
    .container-below-top a .caret,
    .container-below-top a b.caret,
    .navigation-region .dropdown-toggle::after,
    .navigation-region a .caret,
    ul.mod-menu .dropdown-toggle::after {
        position: static !important;
        float: none !important;
        display: inline-block !important;
        margin-left: 8px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
        border-top-color: currentColor !important;
    }

    /* 3. SUBMENU DEFAULT (MENU KIRI & TENGAH): Membuka Dropdown ke Kanan */
    .container-below-top .dropdown-menu .dropdown-menu,
    .navigation-region .dropdown-menu .dropdown-menu {
        top: 0 !important;
        left: 100% !important;
        right: auto !important;
        margin-top: -2px !important;
        position: absolute !important;
        display: none !important;
    }

    /* 4. SUBMENU PADA MENU PALING KANAN: Otomatis Membuka Sub-Dropdown ke KIRI */
    /* Berlaku untuk item menu ke-2 dari kanan, ke-1 dari kanan, dan class khusus alignment kanan */
    .container-below-top ul.mod-menu > li:last-child .dropdown-menu,
    .container-below-top ul.mod-menu > li:nth-last-child(2) .dropdown-menu,
    .navigation-region ul > li:last-child .dropdown-menu,
    .navigation-region ul > li:nth-last-child(2) .dropdown-menu,
    .container-below-top .dropdown-menu-right,
    .navigation-region .dropdown-menu-right {
        left: auto !important;
        right: 0 !important; /* Alignment menempel ke batas kanan induknya */
    }

    /* Sub-child (Sub-menu tingkat 2) pada menu paling kanan agar meluncur ke KIRI */
    .container-below-top ul.mod-menu > li:last-child .dropdown-menu .dropdown-menu,
    .container-below-top ul.mod-menu > li:nth-last-child(2) .dropdown-menu .dropdown-menu,
    .navigation-region ul > li:last-child .dropdown-menu .dropdown-menu,
    .navigation-region ul > li:nth-last-child(2) .dropdown-menu .dropdown-menu {
        top: 0 !important;
        left: auto !important;
        right: 100% !important; /* Buka melayang ke sebelah KIRI */
        margin-top: -2px !important;
    }

    /* Tampilkan saat di-hover */
    .container-below-top .dropdown-menu li:hover > .dropdown-menu,
    .navigation-region .dropdown-menu li:hover > .dropdown-menu {
        display: block !important;
    }
}


/* ---------------------------------------------------
   B. KHUSUS TAMPILAN MOBILE & TABLET (Layar <= 991.98px)
   --------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Reset Posisi Melayang di Mobile */
    .navigation-region ul,
    .navigation-region li,
    .navigation-region .dropdown-menu,
    .navigation-region .dropdown-submenu,
    .container-below-top ul,
    .container-below-top li,
    .container-below-top .dropdown-menu,
    .container-below-top .dropdown-submenu,
    ul.mod-menu ul,
    ul.mod-menu li {
        position: static !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tata Letak Menu Mobile: Teks Kiri, Segitiga Kanan */
    .navigation-region a,
    .navigation-region .nav-link,
    .container-below-top a,
    .container-below-top .nav-link,
    ul.mod-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        text-decoration: none !important;
        white-space: normal !important;
        word-break: break-word !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .navigation-region .dropdown-toggle::after,
    .navigation-region a .caret,
    .container-below-top .dropdown-toggle::after,
    .container-below-top a .caret {
        position: static !important;
        margin-left: auto !important;
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }

    /* Sub-menu Accordion Turun ke Bawah di HP */
    .navigation-region ul ul,
    .navigation-region .dropdown-menu,
    .container-below-top ul ul,
    .container-below-top .dropdown-menu {
        display: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    .navigation-region li.show > ul,
    .navigation-region li.open > ul,
    .navigation-region li.active > ul,
    .navigation-region li:hover > ul,
    .container-below-top li.show > ul,
    .container-below-top li.open > ul,
    .container-below-top li:hover > ul,
    .dropdown-menu.show {
        display: block !important;
    }

    /* Indentasi Warna Berjenjang di HP */
    .navigation-region li > ul,
    .container-below-top li > ul {
        background: rgba(0, 0, 0, 0.25) !important;
        padding-left: 10px !important;
    }

    .navigation-region li > ul li > ul,
    .container-below-top li > ul li > ul {
        background: rgba(0, 0, 0, 0.4) !important;
        border-left: 3px solid #fef1b5 !important;
        padding-left: 12px !important;
        margin: 4px 0 !important;
    }
}

/* ===================================================
   19. FIX AKHIR: ALIH BAHASA & PENCARIAN SIDEBAR
   =================================================== */

/* --- A. ALIH BAHASA (VERTIKAL STACK - BEBAS TERPOTONG) --- */
aside.sidebar-right .mod-custom,
aside.sidebar-right .card-body {
    overflow: hidden !important; /* Mencegah elemen keluar batas card */
}

/* Memaksa susunan tombol bahasa ke bawah (vertikal) */
aside.sidebar-right a[href*="gtranslate"],
.gtranslate_wrapper,
.mod-gtranslate,
.mod-languageswitcher,
.mod-languages {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

aside.sidebar-right a[href*="gtranslate"],
.gtranslate_wrapper a,
.mod-gtranslate a,
.mod-languageswitcher a,
.mod-languages a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
}

aside.sidebar-right a[href*="gtranslate"]:hover,
.gtranslate_wrapper a:hover,
.mod-languageswitcher a:hover {
    background: #fff5f5 !important;
    border-color: #9a2109 !important;
    color: #9a2109 !important;
}


/* --- B. PENCARIAN (FIX LABEL & FULL WIDTH) --- */

/* 1. Paksa sembunyikan semua elemen teks label di dalam modul pencarian */
aside.sidebar-right .mod-finder label,
aside.sidebar-right .finder label,
aside.sidebar-right .searchfilter-label,
aside.sidebar-right .filter-search-lbl,
aside.sidebar-right [class*="search"] label,
aside.sidebar-right [class*="finder"] label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* 2. Atur container form agar mengisi penuh lebar sidebar */
aside.sidebar-right form,
aside.sidebar-right .mod-finder,
aside.sidebar-right .finder-search,
aside.sidebar-right [class*="search-form"] {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Kolom Input dibuat Oval & Memenuhi Kotak */
aside.sidebar-right input[type="search"],
aside.sidebar-right input[type="text"],
aside.sidebar-right .mod-finder input,
aside.sidebar-right .finder input {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 20px !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
}

/* 4. Efek Fokus saat diklik (Glow Merah Marun) */
aside.sidebar-right input[type="search"]:focus,
aside.sidebar-right input[type="text"]:focus {
    background-color: #ffffff !important;
    border-color: #9a2109 !important;
    box-shadow: 0 0 0 3px rgba(154, 33, 9, 0.15) !important;
}

/* ===================================================
   20. FIX SUPER MEPET KHUSUS SIDEBAR RIGHT
   =================================================== */

/* 1. Hilangkan gap/margin pada wrapper bawaan Joomla di sidebar kanan */
aside.sidebar-right,
.container-sidebar-right,
.sidebar-right,
aside.sidebar-right > div,
.container-sidebar-right > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important; /* Mengatur jarak antar modul presisi 4px */
}

/* 2. Paksa margin luar modul sidebar kanan menjadi 0 */
aside.sidebar-right .card,
aside.sidebar-right .module,
.container-sidebar-right .card,
.container-sidebar-right .module,
.sidebar-right .card,
.sidebar-right .module {
    margin-top: 3px !important;
    margin-bottom: 3px !important; /* Diatur oleh gap pembungkus */
}

/* 3. Perkecil padding dalam (isi kartu) agar tidak terlalu lapang */
aside.sidebar-right .card-body,
.container-sidebar-right .card-body,
aside.sidebar-right .module-content {
    padding: 6px 10px !important;
}

/* 4. MAIN BOTTOM (Tetap sesuai ukuran pas sebelumnya) */
.container-bottom-a,
.container-bottom-b,
.main-bottom,
div[class*="container-bottom"] {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
}

.container-bottom-a .card,
.container-bottom-b .card,
.main-bottom .card {
    margin-bottom: 10px !important;
}

/* ===================================================
   21. FIX PRESISI: MENAIKKAN TEKS BERITA TERKINI
   =================================================== */

/* 1. Tarik judul Berita Terkini ke atas secara langsung */
.com-content-category-blog h1,
.com-content-category-blog h2,
.blog h1,
.blog h2,
.page-header h1,
.page-header h2,
.page-header {
    margin-top: -5px !important; /* Nilai negatif untuk menarik teks ke atas */
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    line-height: 1 !important;
}

/* 2. Normalkan posisi modul sidebar kanan */
aside.sidebar-right .card:first-child,
aside.sidebar-right .module:first-child,
.container-sidebar-right .card:first-child,
.container-sidebar-right .module:first-child {
    margin-top: 0 !important;
}

/* 3. Mencegah pemotong teks di kontainer utama */
.container-main,
.container-main > main,
.main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
}

/* ===================================================
   22. HERO SLIDER BANNER (PURE FADE ENGINE)
   =================================================== */
.custom-slider-container {
    position: relative !important;
    background: linear-gradient(135deg, #7a1906 0%, #9a2109 50%, #541003 100%) !important;
    border-radius: 0 0 10px 10px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
    padding-bottom: 25px !important;
}

.custom-slider-inner {
    position: relative !important;
    width: 100% !important;
    min-height: 340px !important;
}

.custom-slide {
    display: none !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease-in-out !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.custom-slide.active {
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
}

.hero-slide-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 35px 45px 40px 45px !important;
    gap: 30px !important;
    min-height: 340px !important;
    box-sizing: border-box !important;
}

.hero-slide-text {
    flex: 1 1 55% !important;
    color: #ffffff !important;
    z-index: 2 !important;
}

.hero-title {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 12px !important;
    text-align: justify !important;
}

.hero-btn {
    display: inline-block !important;
    margin-top: 10px !important;
    padding: 9px 24px !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 6px !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

.hero-btn:hover {
    background-color: #ffffff !important;
    color: #9a2109 !important;
    transform: translateY(-2px) !important;
}

.hero-slide-image {
    flex: 1 1 45% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important;
}

.hero-slide-image img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 260px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* INDIKATOR DOTS */
.custom-slider-dots {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
}

.custom-slider-dots .dot {
    width: 10px !important;
    height: 10px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.custom-slider-dots .dot.active {
    width: 28px !important;
    border-radius: 10px !important;
    background-color: #fef1b5 !important;
}

/* RESPONSIVE MOBILE */
@media (max-width: 991.98px) {
    .hero-slide-wrapper {
        flex-direction: column-reverse !important;
        padding: 20px 20px 35px 20px !important;
        text-align: center !important;
    }
    .hero-slide-text, .hero-desc {
        text-align: center !important;
    }
    .hero-title {
        font-size: 1.25rem !important;
    }
    .hero-slide-image img {
        max-height: 180px !important;
    }
}

/* ===================================================
   23. FIX BANNER SLIDER TAMPIL DI MOBILE & TABLET
   =================================================== */

/* 1. Paksa Kontainer Banner & Slider Tetap Tampil di Layar Kecil */
@media (max-width: 991.98px) {
    .container-banner,
    #heroBannerSlider,
    #customHeroSlider,
    .custom-slider-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 10px !important;
    }

    /* Penyesuaian Layout Slider di Layar HP */
    .custom-slider-inner {
        min-height: auto !important;
    }

    .custom-slide.active {
        position: relative !important;
        height: auto !important;
    }

    .hero-slide-wrapper {
        flex-direction: column-reverse !important; /* Gambar di atas, Teks & Tombol di bawah */
        padding: 20px 15px 35px 15px !important;
        gap: 15px !important;
        min-height: auto !important;
        text-align: center !important;
    }

    /* Ukuran Teks dan Gambar yang Pas untuk Layar HP */
    .hero-slide-text {
        flex: 1 1 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .hero-title {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .hero-desc {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .hero-btn {
        margin-top: 5px !important;
        padding: 7px 18px !important;
        font-size: 0.78rem !important;
    }

    .hero-slide-image {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .hero-slide-image img {
        max-height: 160px !important; /* Agar gambar tidak memenuhi seluruh layar HP */
        width: auto !important;
        max-width: 100% !important;
    }

    /* Posisi Titik Indikator di HP */
    .custom-slider-dots {
        bottom: 8px !important;
    }
}

/* ===================================================
   24. FIX MUTLAK BANNER SLIDER TAMPIL DI HP & TABLET
   =================================================== */

/* Force Reset Container Banner di Mobile */
@media (max-width: 991.98px) {
    
    /* 1. Bebaskan Kontainer Pembungkus Modul */
    .container-banner,
    .container-banner *,
    div[class*="container-banner"] {
        max-height: none !important;
        height: auto !important;
    }

    .custom-slider-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        position: relative !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important;
        clear: both !important;
    }

    /* 2. Reset Tampilan Slide Aktif */
    .custom-slider-inner {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
    }

    .custom-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .custom-slide.active {
        display: block !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* 3. Paksa Gambar Dalam Slide Tetap Tampil & Responsif */
    .custom-slide .hero-slide-image {
        display: flex !important;
        visibility: visible !important;
        justify-content: center !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .custom-slide .hero-slide-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 150px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* 4. Penataan Teks & Tombol di HP */
    .custom-slide .hero-slide-wrapper {
        display: flex !important;
        flex-direction: column-reverse !important;
        padding: 15px 15px 35px 15px !important;
        min-height: auto !important;
        gap: 10px !important;
    }

    .custom-slide .hero-slide-text {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .custom-slide .hero-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .custom-slide .hero-desc {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin-bottom: 6px !important;
    }

    .custom-slide .hero-btn {
        display: inline-block !important;
        padding: 6px 16px !important;
        font-size: 0.75rem !important;
    }
}

/* ===================================================
   25. PRESS BANNER SLIDER FLUSH TO TOP ON MOBILE
   =================================================== */
@media (max-width: 991.98px) {
    /* 1. Hilangkan Margin & Padding Pembungkus Utama */
    .container-banner,
    div[class*="container-banner"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 2. Hilangkan Margin Atas Slider agar Nempel Sempurna */
    #customHeroSlider,
    .custom-slider-container {
        margin-top: 0 !important;
        border-radius: 0 0 10px 10px !important; /* Sudut atas rata, sudut bawah tetap melengkung */
    }
}

/* ===================================================
   26. FIX STYLING & TEXT COLOR FEED RSS GRID (PERBAIKAN)
   =================================================== */

/* Container Pembungkus Grid RSS */
.rss-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Kotak Frame RSS */
.rss-box {
    background: #ffffff !important;
    border: 1.5px solid #9a2109 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(154, 33, 9, 0.08) !important;
    box-sizing: border-box !important;
}

/* Header Merah Kotak RSS */
div.rss-box .rss-title,
.rss-box .rss-title,
.rss-title,
.rss-title h3,
.rss-title h4 {
    background: linear-gradient(135deg, #9a2109 0%, #c23819 100%) !important;
    background-color: #9a2109 !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1.5px solid #7a1906 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* PAKSA TEKS DI HEADER RSS BERWARNA PUTIH TEBAL & TERBACA */
div.rss-box .rss-title,
div.rss-box .rss-title *,
.rss-title,
.rss-title *,
.rss-title a,
.rss-title a:hover,
.rss-title a:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Mematikan efek kustom text fill/gradient dari template */
    background: transparent !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Area Isi Konten RSS */
.rss-box .rss-content {
    padding: 12px 15px !important;
    background: #ffffff !important;
}

/* Styling Daftar Berita/Pengumuman di Dalam RSS */
.rss-box .rss-content ul,
.rss-box .feed-display-group {
    margin: 0 !important;
    padding-left: 18px !important;
    list-style-type: disc !important;
}

.rss-box .rss-content li,
.rss-box .feed-display-group li {
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    color: #334155 !important;
}

.rss-box .rss-content a,
.rss-box .feed-display-group a {
    color: #0284c7 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.rss-box .rss-content a:hover,
.rss-box .feed-display-group a:hover {
    color: #9a2109 !important;
    text-decoration: underline !important;
}

/* RESPONSIVE UNTUK HP / TABLET */
@media (max-width: 768px) {
    .rss-grid-container {
        grid-template-columns: 1fr !important;
    }
}


/* Import Font Manis & Modern (Plus Jakarta Sans) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

/* --- TOPBAR ESTETIK --- */
.container-topbar {
    padding: 0 !important;
}

.topbar-esthetic {
    width: 100%;
    background: linear-gradient(135deg, #871c07 0%, #9a2109 50%, #6b1404 100%);
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 6px 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.topbar-content {
    max-width: var(--cassiopeia-grid-container, 1280px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Jam Layanan Info */
.schedule-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.82rem;
}

.badge-tag {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fef1b5;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

.schedule-text {
    font-weight: 400;
    color: #f8fafc;
}

.schedule-text strong {
    color: #ffffff;
    font-weight: 600;
}

.divider {
    margin: 0 6px;
    color: #fef1b5;
    opacity: 0.7;
}

/* Social Buttons (WA & IG) */
.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.social-btn svg {
    width: 15px;
    height: 15px;
}

/* WA Styling */
.wa-btn {
    background-color: #25d366;
    color: #ffffff !important;
}

.wa-btn:hover {
    background-color: #1eb856;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

/* IG Styling */
.ig-btn {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff !important;
}

.ig-btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(220, 39, 67, 0.3);
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .topbar-content {
        justify-content: center;
        text-align: center;
    }
    .schedule-info {
        flex-direction: column;
        gap: 4px;
    }
    .divider {
        display: none;
    }
    .schedule-text {
        display: block;
        font-size: 0.78rem;
    }
}

/* Styling Tambahan Footer Badilum */
footer.footer a.footer-link {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.25s ease-in-out !important;
}

footer.footer a.footer-link:hover {
    color: #fef1b5 !important; /* Warna emas ala Mahkamah Agung */
    padding-left: 6px !important;
}

footer.footer h5 {
    border-bottom: 2px solid #b82c0d !important; /* Warna merah tegas Badilum */
}

/* ===================================================
   OVERRIDE TOPBAR UNTUK PRESISI SEJAJAR LOGO
   =================================================== */
.topbar-esthetic {
    width: 100% !important;
    background: linear-gradient(135deg, #871c07 0%, #9a2109 50%, #6b1404 100%) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding: 6px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.topbar-content {
    max-width: var(--cassiopeia-grid-container, 1280px) !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important; /* Memisah Jam Layanan (Kiri) & Medsos (Kanan) */
    align-items: center !important;
    padding: 0 15px !important; /* Presisi sejajar dengan padding header logo */
    box-sizing: border-box !important;
    width: 100% !important;
}

.schedule-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
}

.social-links {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important; /* Mengunci posisi di paling kanan */
}

/* ===================================================
   RESPONSIVE MOBILE (LAYAR HP) - CENTER ALIGNMENT
   =================================================== */
@media screen and (max-width: 768px) {
    .topbar-content {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 10px 15px !important;
    }

    .schedule-info {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .social-links {
        margin-left: 0 !important; /* Menghapus dorongan ke kanan pada mobile */
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
}

/* ===================================================
   FIX FINAL: PANAH DROPDOWN (CARET) PROPORSIONAL
   =================================================== */

/* --- A. MATIKAN SEMUA SEGITIGA BAWAAN (PUTIH/KECIL) --- */
.container-below-top .dropdown-toggle::after,
.container-below-top a .caret,
.container-below-top a b.caret,
.navigation-region .dropdown-toggle::after,
.navigation-region a .caret,
ul.mod-menu .dropdown-toggle::after,
.dropdown-menu .dropdown-toggle::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* --- B. PERBAIKAN ALIGNMENT TEKS MENU AGAR SEJAJAR --- */
.container-below-top a,
.container-below-top .nav-link,
.container-below-top .dropdown-item,
.navigation-region a,
ul.mod-menu a {
    display: flex !important;
    align-items: center !important; /* Wajib: agar teks dan panah sejajar vertikal */
    justify-content: space-between !important; /* Panah di kanan */
    gap: 12px !important; /* Jarak antara teks dan panah */
    position: relative !important;
}

/* --- C. MEMBUAT SEGITIGA BARU YANG PROPORSIONAL & SEJAJAR --- */

/* 1. Base style untuk semua panah menu */
.container-below-top .dropdown-toggle::before,
.container-below-top li:has(> ul) > a::before,
.navigation-region .dropdown-toggle::before,
.navigation-region li:has(> ul) > a::before,
/* Target khusus sub-menu level 2 ke atas */
.container-below-top .dropdown-menu .dropdown-toggle::before,
.container-below-top .dropdown-menu li:has(> ul) > a::before {
    content: "" !important;
    display: inline-block !important;
    
    /* UKURAN SEGITIGA: Diatur agar proporsional dengan tinggi font menu */
    /* border-top-width = tinggi segitiga */
    /* border-left/right-width = setengah lebar segitiga */
    border-top: 6px solid currentColor !important; /* Warna panah mengikuti warna teks */
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 0 !important;

    /* POSISI: Agar benar-benar di tengah secara vertikal */
    vertical-align: middle !important;
    margin-top: 1px !important; /* Koreksi mikro jika teks agak ke atas */
    
    flex-shrink: 0 !important; /* Mencegah panah gepeng jika teks panjang */
    transition: transform 0.2s ease !important; /* Animasi smooth */
    transform-origin: center center !important;
}

/* --- D. PENYESUAIAN KHUSUS UNTUK SUB-MENU ( LEVEL 2+ ) --- */

/* Pada Desktop: Sub-menu membuka ke samping, panah harus hadap kanan */
@media (min-width: 992px) {
    /* Targetkan hanya panah di dalam dropdown menu */
    .container-below-top .dropdown-menu .dropdown-toggle::before,
    .container-below-top .dropdown-menu li:has(> ul) > a::before {
        /* Ubah bentuk menjadi panah hadap kanan */
        border-top: 5px solid transparent !important;
        border-bottom: 5px solid transparent !important;
        border-left: 6px solid currentColor !important;
        border-right: 0 !important;
        margin-top: 0 !important;
    }
}

/* --- E. ANIMASI ROTASI SAAT HOVER / BUKA --- */

/* Panah menu utama (hadap bawah -> hadap atas) */
.container-below-top li:hover > a::before,
.navigation-region li:hover > a::before,
.container-below-top .nav-item:hover > a::before {
    transform: rotate(180deg) !important;
}

/* Panah sub-menu pada desktop (hadap kanan -> hadap bawah) */
@media (min-width: 992px) {
    .container-below-top .dropdown-menu li:hover > a::before {
        transform: rotate(90deg) !important;
    }
}