/* ===================================================
   AKSESIBILITAS WIDGET STYLES
   =================================================== */

/* Tombol Utama yang Melayang di Pojok Bawah */
.btn-aksesibilitas-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    background-color: #007a3d; 
    color: white;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Panel Menu Utama */
.panel-aksesibilitas {
    display: none; 
    position: fixed;
    bottom: 85px;
    right: 20px;
    width: 320px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.25);
    z-index: 99999;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.panel-aksesibilitas.aktif {
    display: block;
}

.panel-header {
    background-color: #007a3d;
    color: white;
    padding: 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-tutup-panel {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
}

.panel-body {
    padding: 15px;
    background-color: #f7f9fa;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Tombol Fitur Utama */
.tombol-fitur {
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 15px 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    width: 100%;
}

.tombol-fitur:hover, .tombol-fitur.fitur-aktif {
    background-color: #007a3d;
    color: white;
    border-color: #007a3d;
}

.tombol-fitur span {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
}

/* Efek Visual Penunjuk Elemen saat Pembaca Teks Aktif */
body.pembaca-teks-aktif *:not(.panel-aksesibilitas):not(.panel-aksesibilitas *):hover {
    outline: 2px dashed #007a3d !important;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #ffffff;
    border-top: 1px solid #e1e8ed;
}

.btn-reset-akses {
    width: 100%;
    background-color: #d63031;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

/* Class bantu menyembunyikan teks untuk Screen Reader bawaan OS */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================== CSS MANIPULASI HALAMAN ==================== */
body.mode-kontras { background-color: #000000 !important; color: #ffff00 !important; }
body.mode-kontras *, body.mode-kontras p, body.mode-kontras h1, body.mode-kontras h2 { background-color: #000000 !important; color: #ffff00 !important; }
body.teks-besar { font-size: 130% !important; }
body.spasi-lebar { letter-spacing: 0.15em !important; word-spacing: 0.3em !important; }
body.sorot-link a { outline: 3px solid #ff9f43 !important; background-color: rgba(255, 159, 67, 0.2) !important; }
body.sembunyi-gambar img { visibility: hidden !important; opacity: 0 !important; }
body.ramah-disleksia { font-family: 'Comic Sans MS', sans-serif !important; }


/* ===================================================
   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;
    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: 99999 !important; /* UBAH DARI 9999 MENJADI 99999 */
}

.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;
}

/* ===================================================
   HYBRID DROPDOWN (HOVER + CLICK LOCK STYLES)
   =================================================== */

/* Status Dasar Submenu */
.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;
}

/* 1. KONDISI HOVER: Muncul sementara saat kursor menempel (Desktop) */
@media (min-width: 992px) {
    .container-below-top li:hover > ul,
    .container-below-top li:hover > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        animation: fadeIn 0.2s ease-in-out;
    }
}

/* 2. KONDISI KLIK (FIX): Tetap terbuka walau kursor lepas */
.container-below-top li.is-locked > ul,
.container-below-top li.is-locked > .dropdown-menu,
.container-below-top li.open > ul,
.container-below-top li.open > .dropdown-menu {
    display: block !important;
}

/* Submenu Level 2+ (Sub-dropdown) */
.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: 4px 4px !important;
    line-height: 13px !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;
    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;
}

/* ===================================================
   GRID BLOG THUMBNAIL 3 KOLOM + OVERRIDES COMPLETE
   =================================================== */

/* 1. CONTAINER MAIN GRID */
.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;
}

/* 2. CARD ITEM UTAMA */
.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;
}

/* 3. GAMBAR UTAMA (PRIORITAS: FULL INTRO IMAGE) */
.blog .item .item-image,
.com-content-category-blog__item .item-image {
    order: -3 !important;
    margin: -14px -14px 12px -14px !important; 
    width: calc(100% + 28px) !important;
    height: 180px !important;
    overflow: hidden !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.blog .item .item-image img,
.com-content-category-blog__item .item-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* Sembunyikan semua gambar sekunder / dalam paragraf */
.blog .item p img,
.com-content-category-blog__item p img,
.blog .item .item-content img,
.com-content-category-blog__item img:not(.item-image img) {
    display: none !important;
}

/* 4. URUTAN & STYLE ELEMEN TEKS */

/* A. JUDUL (PRIORITAS: ORDER -2) */
.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 {
    order: -2 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !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;
}

/* B. TANGGAL & META INFO (PRIORITAS: ORDER -1 + TEKS DIKERCIKLAN) */
.blog .item .article-info,
.blog .item dd.published,
.blog .item dd.createdby,
.com-content-category-blog__item .article-info,
.com-content-category-blog__item dd.published,
.com-content-category-blog__item dd.createdby,
.com-content-category-blog__item .writtenby,
.com-content-category-blog__item .createdby {
    order: -1 !important;
    font-size: 0.63rem !important;
    line-height: 0.9 !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

/* C. RINGKASAN TEKS / PARAGRAF (PRIORITAS: ORDER 0) */
.blog .item p, 
.com-content-category-blog__item p {
    order: 0 !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;
}

/* 5. TOMBOL "LIHAT SELENGKAPNYA" & COVER FOOTER */
.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;
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    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;
    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;
}

.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;
}

.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;
}

/* 6. PENGATURAN LAYOUT LAIN (EXCLUDE / LAYOUT JOOMLA) */
.com-content-article .container-top-a,
.com-content-article .container-top-b,
.com-content-article .sp-module-banner,
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;
}

.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;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    line-height: 1 !important;
}

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;
}

.container-main,
.container-main > main,
.main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: visible !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;
    margin-bottom: 0 !important;
    padding: 0 !important;
    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;
}

/* ===================================================
   16. FIX VIEW ARTICLE
   =================================================== */
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;
}

body.view-article .container-below-top,
body.view-article .navigation-region {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.view-article .container-main {
    margin-top: 20px !important;
}

/* ===================================================
   17. DETAIL ARTIKEL LAYOUT
   =================================================== */
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;
}

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;
}

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;
}

body.view-article .container-main {
    margin-top: 20px !important;
}

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 BORDER MERAH: MAKLUMAT (TOP-A)
   =================================================== */
.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;
}

.container-top-a .card-app-box {
    border: 2px solid #e65100 !important;
    background-color: #ffffff !important;
}

.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: MAIN BOTTOM
   =================================================== */
.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;
}

.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 & DROPDOWN
   =================================================== */
@media (min-width: 992px) {
    .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;
    }

    .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;
    }

    .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;
    }

    .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;
    }

    .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;
        margin-top: -2px !important;
    }

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

@media (max-width: 991.98px) {
    .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;
    }

    .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;
    }

    .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;
    }

    .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 ALIH BAHASA & PENCARIAN SIDEBAR
   =================================================== */
aside.sidebar-right .mod-custom,
aside.sidebar-right .card-body {
    overflow: hidden !important;
}

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;
}

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;
}

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;
}

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;
}

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 MEPET SIDEBAR RIGHT & BOTTOM
   =================================================== */
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;
}

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;
}

aside.sidebar-right .card-body,
.container-sidebar-right .card-body,
aside.sidebar-right .module-content {
    padding: 6px 10px !important;
}

.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;
}

/* ===================================================
   22. HERO SLIDER BANNER 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;
}

.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;
}

/* ===================================================
   23 & 24. BANNER SLIDER MOBILE & TABLET RESPONSIVE
   =================================================== */
@media (max-width: 991.98px) {
    .container-banner,
    .container-banner *,
    div[class*="container-banner"] {
        max-height: none !important;
        height: auto !important;
    }

    #heroBannerSlider,
    #customHeroSlider,
    .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;
    }

    .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;
    }

    .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;
    }

    .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;
    }

    .custom-slider-dots {
        bottom: 8px !important;
    }
}

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

    #customHeroSlider,
    .custom-slider-container {
        margin-top: 0 !important;
        border-radius: 0 0 10px 10px !important;
    }
}

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

.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;
}

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;
}

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;
    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;
}

.rss-box .rss-content {
    padding: 12px 15px !important;
    background: #ffffff !important;
}

.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;
}

@media (max-width: 768px) {
    .rss-grid-container {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================================
   27. TOPBAR ESTETIK & FOOTER OVERRIDE
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

.container-topbar {
    padding: 0 !important;
}

.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;
    align-items: center !important;
    padding: 0 15px !important;
    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;
}

.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-links {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

.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-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-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);
}

@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;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .divider {
        display: none;
    }

    .schedule-text {
        display: block;
        font-size: 0.78rem;
    }
}

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;
    padding-left: 6px !important;
}

footer.footer h5 {
    border-bottom: 2px solid #b82c0d !important;
}

/* ===================================================
   28. FIX MOBILE DROPDOWN CLICK HANDLER
   =================================================== */
@media (max-width: 991.98px) {
    .navigation-region .dropdown > a,
    .container-below-top .dropdown > a,
    .container-below-top li.parent > a,
    ul.mod-menu li.parent > a {
        cursor: pointer !important;
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
    }

    .container-below-top li.open > ul,
    .container-below-top li.show > ul,
    .navigation-region li.open > ul,
    .navigation-region li.show > ul,
    ul.mod-menu li.open > ul,
    ul.mod-menu li.show > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===================================================
   29. WA FLOATING
   =================================================== */
.wa-floating-button {
  position: fixed;
  bottom: 80px;       /* Sedikit dinaikkan agar ada jarak antar tombol */
  right: 25px;        /* Digeser sedikit ke kanan agar center pas */
  width: 50px;
  height: 50px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-sizing: border-box;
}

.wa-floating-button:hover {
  background-color: #128c7e;
  color: #ffffff;
  transform: scale(1.08);
}

.wa-floating-button .wa-icon {
  width: 28px;
  height: 28px;
}

/* ===================================================
   FIX DROPDOWN PERMANEN (CSS HOVER SAFE)
   =================================================== */

/* 1. Base Dropdown State */
.container-below-top ul.dropdown-menu,
.container-below-top li > ul {
    display: block !important; /* Gunakan block terus agar tidak terputus rendering-nya */
    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;
    
    /* Sembunyikan lewat opacity & visibility saja */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* 2. Pseudo-element bridge (Area toleransi kursor) */
.container-below-top ul.mod-menu > li::after,
.container-below-top ul.nav > li::after,
.container-below-top li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px; /* Area toleransi celah */
    display: block;
}

/* 3. Tampilkan Dropdown Saat Hover (Desktop) */
@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 {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* HAPUS animation: fadeIn agar tidak merusak hover state saat JavaScript berjalan */
    }

    /* Submenu Tingkat 2 (Child Dropdown) */
    .container-below-top .dropdown-menu li:hover > .dropdown-menu,
    .navigation-region .dropdown-menu li:hover > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ===================================================
   FIX DROPDOWN HILANG (JEMBATAN HOVER KURSOR)
   =================================================== */
.container-below-top ul.mod-menu > li::after,
.container-below-top ul.nav > li::after,
.container-below-top .navigation-region ul > li::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
    z-index: 9999;
}

/* ===================================================
   FIX TAMPILAN SUBMENU LEVEL 2 & LEVEL 3 (KLIK & HOVER)
   =================================================== */

/* Pastikan submenu level 2 & 3 muncul saat item induknya di-hover atau diklik */
.container-below-top li.is-locked > ul,
.container-below-top li.is-locked > .dropdown-menu,
.container-below-top li.open > ul,
.container-below-top li.open > .dropdown-menu,
.container-below-top li:hover > ul,
.container-below-top li:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Jembatan toleransi kursor untuk Submenu Level 2 (Samping) */
.container-below-top ul.dropdown-menu li > a,
.container-below-top li > ul li > a {
    position: relative;
}

.container-below-top ul.dropdown-menu li:has(ul)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 15px;
    height: 100%;
    background: transparent;
    z-index: 9999;
}

/* ===================================================
   FIX DUKUNGAN SUBMENU TINGKAT 3 (LEVEL 3 DROPDOWN)
   =================================================== */

/* Posisi Submenu Tingkat 3 (Membuka ke Kanan Submenu Tingkat 2) */
.container-below-top ul.dropdown-menu ul ul,
.container-below-top li > ul li > ul li > ul {
    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.4) !important;
    z-index: 1002 !important;
}

/* KONDISI HOVER & KLIK UNTUK TINGKAT 3 */
@media (min-width: 992px) {
    /* Munculkan tingkat 3 saat induk tingkat 2 di-hover */
    .container-below-top ul.dropdown-menu li:hover > ul,
    .container-below-top ul.dropdown-menu li:hover > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Munculkan tingkat 3 saat status diklik (is-locked) */
.container-below-top ul.dropdown-menu li.is-locked > ul,
.container-below-top ul.dropdown-menu li.is-locked > .dropdown-menu,
.container-below-top ul.dropdown-menu li.open > ul,
.container-below-top ul.dropdown-menu li.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Jembatan Kursor Toleransi Hover untuk Tingkat 3 */
.container-below-top ul.dropdown-menu li li:has(ul)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 15px;
    height: 100%;
    background: transparent;
    z-index: 9999;
}

/* ===================================================
   FIX DROPDOWN SELALU DI ATAS SLIDER & LAYANAN UTAMA
   =================================================== */

/* 1. Berikan z-index tertinggi pada wadah utama navigasi */
.container-below-top, 
div.container-below-top, 
.navigation-region {
    position: relative !important;
    z-index: 999999 !important; /* Menaikkan stacking context navigasi utama */
}

/* 2. Berikan z-index ekstra tinggi pada submenu/dropdown */
.container-below-top ul.dropdown-menu,
.container-below-top li > ul,
.navigation-region ul.dropdown-menu,
.navigation-region li > ul {
    z-index: 1000000 !important; /* Memastikan dropdown berada di paling depan */
}

/* 3. Submenu level 2 dan level 3 */
.container-below-top ul.dropdown-menu ul,
.container-below-top li > ul li > ul {
    z-index: 1000001 !important;
}

/* 4. Turunkan z-index pada Hero Slider dan Container Banner */
#sliderUtama,
#customHeroSlider,
.custom-slider-container,
.container-banner,
div[class*="container-banner"] {
    position: relative !important;
    z-index: 1 !important; /* Prioritas lebih rendah dibanding menu */
}

/* 5. Turunkan z-index pada Modul Layanan Utama (Top A / Top B) */
.container-top-a,
.container-top-b,
.card-app-box,
.card-app-box img {
    z-index: 2 !important; /* Prioritas tampilan di bawah dropdown menu */
}

/* ===================================================
   FIX MOBILE DROPDOWN NUMPUK (AKHIR CSS OVERRIDE)
   =================================================== */
@media (max-width: 991.98px) {
    /* 1. Paksa semua submenu & sub-submenu berposisi statis/numpuk */
    .container-below-top ul.dropdown-menu,
    .container-below-top li > ul,
    .container-below-top ul.dropdown-menu ul,
    .container-below-top li > ul li > ul,
    .navigation-region ul.dropdown-menu,
    .navigation-region li > ul,
    .navigation-region ul.dropdown-menu ul {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* 2. Beri warna latar & indentasi (geser sedikit ke dalam) agar rapi */
    .container-below-top li > ul,
    .navigation-region li > ul {
        background: rgba(0, 0, 0, 0.2) !important;
        padding-left: 15px !important;
    }

    /* Submenu Level 2 (Anak) */
    .container-below-top li > ul li > ul,
    .navigation-region li > ul li > ul {
        background: rgba(0, 0, 0, 0.35) !important;
        border-left: 3px solid #fef1b5 !important;
        padding-left: 15px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* Submenu Level 3 (Cucu) */
    .container-below-top li > ul li > ul li > ul,
    .navigation-region li > ul li > ul li > ul {
        background: rgba(0, 0, 0, 0.5) !important;
        border-left: 3px solid #ff9f43 !important;
        padding-left: 15px !important;
    }

    /* 3. Atur kemunculan sub-menu agar kebuka ke bawah saat aktif/klik */
    .container-below-top li > ul,
    .navigation-region li > ul {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Sembunyikan submenu default jika tidak ada class active/open/show */
    .container-below-top li:not(.open):not(.show):not(.active) > ul,
    .navigation-region li:not(.open):not(.show):not(.active) > ul {
        display: none !important;
    }

    /* Tampilkan jika li memiliki class open / show / active */
    .container-below-top li.open > ul,
    .container-below-top li.show > ul,
    .container-below-top li.active > ul,
    .navigation-region li.open > ul,
    .navigation-region li.show > ul,
    .navigation-region li.active > ul {
        display: block !important;
    }
}

/* ===================================================
   PERBAIKAN: PAKSA TAMPILKAN TOMBOL/DOT SLIDER
   =================================================== */
#customHeroSlider .custom-slider-dots,
.custom-slider-container .custom-slider-dots {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 999 !important; /* Memastikan melayang di atas gambar/layar */
}

#customHeroSlider .custom-slider-dots .dot,
.custom-slider-container .custom-slider-dots .dot {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.6 !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

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

/* Tooltip Teks saat Hover WA BUTTON */
.wa-floating-button::before {
  content: attr(data-tooltip);
  position: absolute;
  right: 75px; /* Tampil di sebelah kiri tombol */
  top: 50%;
  transform: translateY(-50%);
  background-color: #333333;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Panah Kecil Tooltip */
.wa-floating-button::after {
  content: '';
  position: absolute;
  right: 65px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #333333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

/* Tampilkan Tooltip saat Kursor Diarahkan (Hover) */
.wa-floating-button:hover::before,
.wa-floating-button:hover::after {
  opacity: 1;
  visibility: visible;
}



/* ===================================================
   FIX BACKGROUND PUTIH UTUH SAMPAI FOOTER (FULL BOXED)
   =================================================== */
/* ===================================================
   1. BACKGROUND BENDERA DUA SISI (GRADASI & BERKIBAR TRANSUSEN)
   =================================================== */

/* Latar luar: Kiri Hijau MA & Kanan Merah Gradasi (Kode Merah Awal) */
body.site {
    background: linear-gradient(
        to right, 
        #007a37 0%, 
        #007a37 50%, 
        #d63031 50%, 
        #7a1906 100%
    ) !important;
    position: relative !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* Hilangkan blok putih penutup footer */
body.site::after {
    display: none !important;
}

/* Gelombang Bayangan Kain Transparan (Kibar Gradasi Tanpa Putih Pelek) */
body.site::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 200% !important;
    height: 100% !important;
    /* Layer SVG berisi pola lekukan kain halus dengan transparansi tipis */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.12" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,144C672,139,768,181,864,186.7C960,192,1056,160,1152,138.7C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path><path fill="%23000000" fill-opacity="0.08" d="M0,64L60,96C120,128,240,192,360,202.7C480,213,600,171,720,138.7C840,107,960,85,1080,106.7C1200,128,1320,192,1380,224L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>') !important;
    background-repeat: repeat-x !important;
    background-position: bottom !important;
    background-size: 1440px 350px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: kibarGradasi 8s ease-in-out infinite alternate !important;
}

/* Animasi Ayunan Kain Gelombang */
@keyframes kibarGradasi {
    0% {
        transform: translateX(0) scaleY(1);
    }
    100% {
        transform: translateX(-20%) scaleY(1.15);
    }
}


/* ===================================================
   2. FIX BACKGROUND PUTIH UTUH SAMPAI FOOTER (FULL BOXED)
   =================================================== */

.site-grid, 
div.site-grid,
body.site > .grid-child {
    background-color: #ffffff !important;
    max-width: var(--cassiopeia-grid-container, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
}

.site-grid > [class*="container-"],
.site-grid > header,
.site-grid > div {
    background-color: transparent !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

footer, .footer, .container-footer {
    background-color: transparent !important;
    position: relative !important;
    z-index: 3 !important;
}


/* ===================================================
   3. TATA LETAK WADAH & KARTU APLIKASI
   =================================================== */

.container-top-a,
div[class*="top-a"],
.container-top-b {
    margin-top: 0px !important;
    padding-top: 57px !important;
    margin-bottom: 25px !important;
    clear: both !important;
    display: block !important;
    overflow: visible !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 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;
}

/* ===================================================
   SOLUSI BENAR: PERBAIKAN MERATA & KETENGAH
   =================================================== */

/* ===================================================
   HAPUS TOTAL RUANG KOSONG ATAS & BAWAH FOOTER
   =================================================== */

/* 1. Hilangkan padding pembungkus luar dan pembungkus dalam footer */
footer.footer, 
.container-footer, 
.site-footer,
footer.footer .container,
footer.footer .grid-child,
footer.footer [class*="container"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Tarik isi modul (Tautan, Hubungi Kami, Statistik) mepet ke atas */
footer.footer .mod-custom,
footer.footer .card-body,
footer.footer .module-body {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Buat baris copyright menempel penuh di bagian paling bawah */
footer.footer > div:last-child,
footer.footer .footer-bottom,
footer.footer div[class*="copyright"] {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}


/* =================================================== 
   CASSIOPEIA JOOMLA - FIX SUBMENU DROPDOWN SCROLL HP
   =================================================== */ 
@media (max-width: 991.98px) { 

    /* 1. Sembunyikan Tombol Hamburger */ 
    .navbar-toggler, 
    button.navbar-toggler, 
    [data-bs-toggle="collapse"] { 
        display: none !important; 
    } 

    /* 2. Container Pembungkus Scroll Horizontal */ 
    .container-header .navbar-collapse, 
    .navbar-collapse.collapse, 
    .navbar-collapse { 
        display: block !important; 
        visibility: visible !important; 
        height: auto !important; 
        width: 100% !important; 
        max-width: 100vw !important; 
        overflow-x: auto !important; 
        overflow-y: visible !important; 
        padding-bottom: 350px !important; 
        margin-bottom: -350px !important; 
        pointer-events: none !important; 
        -webkit-overflow-scrolling: touch !important; 
        touch-action: pan-x !important; 
        scrollbar-width: none !important; 
    } 

    .container-header .navbar-collapse *,
    .navbar-collapse * {
        pointer-events: auto !important;
    }

    .navbar-collapse::-webkit-scrollbar { 
        display: none !important; 
    } 

    /* 3. Deretan UL Utama */ 
    .container-header ul.mod-menu, 
    ul.mod-menu, 
    ul.metismenu.mod-menu-horizontal, 
    .navbar-nav { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        justify-content: flex-start !important; 
        align-items: center !important; 
        width: max-content !important; 
        min-width: max-content !important; 
        margin: 0 !important; 
        padding: 0 8px !important; 
        list-style: none !important; 
    } 

    /* 4. Item Menu Utama Level 1 */ 
    .container-header ul.mod-menu > li, 
    ul.mod-menu > li, 
    .navbar-nav > li, 
    .nav-item { 
        display: inline-flex !important; 
        align-items: center !important;
        flex: 0 0 auto !important; 
        width: auto !important; 
        max-width: max-content !important; 
        min-width: 0 !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        position: relative !important; 
    } 

    /* 5. Teks Link Menu Utama Level 1 */ 
    .container-header ul.mod-menu > li > a, 
    ul.mod-menu > li > a, 
    .navbar-nav > li > a, 
    .navbar-nav .nav-link,
    .container-header ul.mod-menu > li > span,
    ul.mod-menu > li > span { 
        display: inline-flex !important; 
        align-items: center !important;
        justify-content: center !important; 
        width: auto !important; 
        white-space: nowrap !important; 
        word-break: keep-all !important; 
        font-size: 12px !important; 
        font-weight: 700 !important; 
        padding: 10px 10px !important; 
        line-height: 1.2 !important; 
        color: #ffffff !important; 
        text-decoration: none !important; 
        text-transform: uppercase !important; 
    } 

    .container-header ul.mod-menu > li > a::after,
    ul.mod-menu > li > a::after,
    .navbar-nav .dropdown-toggle::after {
        display: none !important;
    }

    /* =================================================== 
       6. DROPDOWN SUBMENU LEVEL 2 & 3 (SCROLLABLE BOX)
       =================================================== */ 

    .container-header ul.mod-menu li ul, 
    ul.mod-menu li ul, 
    .navbar-nav li ul, 
    .dropdown-menu { 
        display: none !important; 
        list-style: none !important; 
        box-sizing: border-box !important; 
    } 

    /* Box Submenu Level 2 - Mampu Scroll di Layar HP */
    .container-header ul.mod-menu > li > ul, 
    ul.mod-menu > li > ul, 
    .navbar-nav > li > ul { 
        position: absolute !important; 
        top: 100% !important; 
        left: 0 !important; 
        right: auto !important; 
        width: 210px !important; 
        max-width: 210px !important; 
        min-width: 210px !important; 
        
        /* PERBAIKAN UTAMA: Diberi batas tinggi & fitur scroll */
        max-height: 60vh !important;               /* Batas tinggi maks 60% layar */
        overflow-y: auto !important;              /* Aktifkan scroll vertikal */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Touch scroll halus untuk HP */
        
        background-color: #801400 !important; 
        border: 1px solid rgba(255, 255, 255, 0.2) !important; 
        border-radius: 6px !important; 
        padding: 4px 0 !important; 
        margin-top: 0 !important; 
        box-shadow: 0 8px 25px rgba(0,0,0,0.7) !important; 
        z-index: 999999 !important; 
    } 

    /* Kustomisasi Scrollbar Tipis di Dalam Dropdown */
    .container-header ul.mod-menu > li > ul::-webkit-scrollbar,
    ul.mod-menu > li > ul::-webkit-scrollbar {
        width: 4px !important;
    }
    .container-header ul.mod-menu > li > ul::-webkit-scrollbar-thumb,
    ul.mod-menu > li > ul::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4) !important;
        border-radius: 4px !important;
    }

    .container-header ul.mod-menu > li:hover > ul, 
    ul.mod-menu > li:hover > ul, 
    .navbar-nav > li:hover > ul, 
    .container-header ul.mod-menu > li.show > ul, 
    ul.mod-menu > li.show > ul,
    .container-header ul.mod-menu > li:focus-within > ul,
    .container-header ul.mod-menu > li > a:focus + ul { 
        display: block !important; 
        visibility: visible !important; 
        opacity: 1 !important; 
    } 

    /* Submenu Level 3 - Mengalir Inline di Dalam Container Level 2 */
    .container-header ul.mod-menu li ul li ul, 
    ul.mod-menu li ul li ul, 
    .dropdown-menu .dropdown-menu { 
        position: relative !important; 
        top: 0 !important;
        left: 0 !important; 
        width: 100% !important; 
        height: auto !important;
        box-shadow: none !important; 
        border: none !important; 
        background-color: #5c0e00 !important; 
        padding: 0 !important; 
        margin: 0 !important; 
    } 

    .container-header ul.mod-menu li ul li:hover > ul, 
    ul.mod-menu li ul li:hover > ul, 
    .container-header ul.mod-menu li ul li.show > ul, 
    ul.mod-menu li ul li.show > ul,
    .container-header ul.mod-menu li ul li:focus-within > ul { 
        display: block !important; 
        visibility: visible !important; 
        opacity: 1 !important; 
    } 

    .container-header ul.mod-menu li ul li, 
    ul.mod-menu li ul li, 
    .dropdown-menu li { 
        display: block !important; 
        width: 100% !important; 
        height: auto !important;
        margin: 0 !important; 
        padding: 0 !important; 
    } 

    /* TEKS LINK SUBMENU */ 
    .container-header ul.mod-menu li ul li a, 
    ul.mod-menu li ul li a, 
    .dropdown-menu a { 
        display: block !important; 
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        white-space: normal !important; 
        overflow-wrap: break-word !important; 
        word-break: normal !important; 
        font-size: 11px !important; 
        font-weight: 700 !important; 
        padding: 10px 12px !important; 
        line-height: 1.4 !important; 
        color: #ffffff !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
        text-decoration: none !important; 
        text-transform: uppercase !important; 
        text-align: left !important; 
        box-sizing: border-box !important; 
    } 

    .container-header ul.mod-menu li ul li ul li a, 
    ul.mod-menu li ul li ul li a { 
        padding-left: 22px !important; 
        font-size: 10px !important; 
        background-color: rgba(0, 0, 0, 0.2) !important; 
    } 

    /* EKSTRA PADDING UNTUK ITEM SUBMENU PALING BAWAH */
    .container-header ul.mod-menu li ul li:last-child > a, 
    ul.mod-menu li ul li:last-child > a { 
        border-bottom: none !important; 
        padding-bottom: 16px !important; 
    } 
}

/* ===================================================
   FIX MOBILE: KARTU APLIKASI TANPA ICON (SEBANYAK TULISAN)
   =================================================== */
@media (max-width: 991.98px) {
    /* 1. Sembunyikan gambar/icon di dalam kartu aplikasi */
    .card-app-box img,
    .card-app-box .icon-app-box,
    .card-app-box [class*="icon"] {
        display: none !important;
    }

    /* 2. Sesuaikan ukuran kartu dan jarak padding */
    .card-app-box {
        margin-top: 10px !important;       /* Hilangkan jarak ruang icon atas */
        padding: 10px 12px !important;     /* Ringkas padding agar pas seukuran teks */
        height: auto !important;           /* Ukuran mengikuti tinggi teks selengkapnya */
        min-height: unset !important;
    }

    /* 3. Sesuaikan tampilan teks di dalam kartu */
    .card-app-box .title-text {
        margin-top: 0 !important;
        font-size: 0.85rem !important;     /* Menyesuaikan ukuran teks mobile */
    }

    .card-app-box .desc-text {
        font-size: 0.75rem !important;
        margin-top: 2px !important;
    }
}

/* ===================================================
   FIX POSISI CARET DI SEBELAH KANAN TEKS SUBMENU
   =================================================== */

/* 1. Pastikan tag <a> atau link di dalam submenu berbentuk Flexbox Baris */
.container-below-top ul.dropdown-menu a,
.container-below-top li > ul a,
.container-below-top .dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Dorong teks ke kiri, caret ke kanan */
    white-space: nowrap !important; /* Cegah teks/caret turun ke baris baru */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Atur elemen Caret / Panah agar tidak inline-block sembarangan */
.container-below-top ul.dropdown-menu a .caret,
.container-below-top ul.dropdown-menu a b.caret,
.container-below-top ul.dropdown-menu a::after,
.container-below-top li > ul a .caret,
.container-below-top li > ul a::after {
    display: inline-block !important;
    margin-left: 10px !important; /* Jarak antara teks submenu & caret */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important; /* Pastikan bentuk caret tidak gepeng */
}

/* 3. Jika panah submenu level 2/3 mengarahkan ke kanan (Simbol Panah) */
.container-below-top ul.dropdown-menu li:has(ul) > a::after {
    content: "►" !important; /* Tanda panah ke kanan untuk child menu */
    font-size: 9px !important;
    margin-left: auto !important;
}

/* ===================================================
   GABUNGAN: BATAS LEBAR MENU & TEKS TURUN KE BAWAH
   =================================================== */

/* 1. Atur lebar pasti untuk pembungkus submenu */
.container-below-top ul.dropdown-menu,
.container-below-top li > ul {
    width: 321px !important;       /* Ubah nilai ini sesuai lebar yang diinginkan */
    min-width: 188px !important;
    max-width: 321px !important;
}

/* 2. Atur link submenu agar teks turun ke bawah dan caret tetap sejajar */
.container-below-top ul.dropdown-menu a,
.container-below-top li > ul a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    white-space: normal !important;       /* Teks otomatis lanjut ke baris baru */
    word-break: break-word !important;    /* Cegah kata panjang keluar dari box */
    height: auto !important;              /* Tinggi menyesuaikan jumlah baris */
    overflow: visible !important;
}

/* 3. Penyesuaian ruang teks di dalam link */
.container-below-top ul.dropdown-menu a > span,
.container-below-top ul.dropdown-menu a > div {
    flex: 1 1 auto !important;
    padding-right: 8px !important;       /* Jarak teks ke panah caret */
}

/* 4. Pastikan posisi panah/caret tidak bergeser */
.container-below-top ul.dropdown-menu a .caret,
.container-below-top ul.dropdown-menu a::after {
    flex-shrink: 0 !important;
    align-self: center !important;        /* Tetap simetris di tengah secara vertikal */
}

/* ===================================================
   MERAPATKAN JARAK ANTAR ITEM SUBMENU (ITEM KE ITEM)
   =================================================== */

/* 1. Hilangkan margin & padding bawaan dari tiap list/item */
.container-below-top ul.dropdown-menu > li,
.container-below-top li > ul > li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;  /* Menghapus jarak antar kotak menu */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Atur ketebalan/jarak dalam (padding) dari link-nya */
.container-below-top ul.dropdown-menu li > a,
.container-below-top li > ul li > a {
    padding-top: 7px !important;    /* Makin kecil angkanya (misal: 2px), makin rapat */
    padding-bottom: 7px !important; 
    margin: 0 !important;
}

/* 3. Membuat Tanggal dan Judul sejajar (Tanggal - Judul) */
.main-bottom li,
.main-bottom article,
.main-bottom .newsflash-item {
    display: flex !important;
    flex-direction: row-reverse !important; /* Membalik urutan agar tanggal di depan */
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important; /* Jarak antara tanggal dan judul */
}

/* Menambahkan judul di atas modul berita pada posisi main-bottom */
.com-content-category .container-main-bottom .module::before,
.com-content-category [class*="main-bottom"] .module::before {
  content: "Berita Terbaru.......";
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #212529;
  margin-bottom: 1.5rem;
}

/* Sembunyikan modul khusus ini jika halaman yang dibuka adalah detail artikel */
.com-content-article .judul-berita-custom,
body.com-content-article div[class*="judul-berita-custom"] {
  display: none !important;
}

/* Jika di dalam halaman ada elemen artikel (.com-content-article), 
   maka sembunyikan modul custom judul tersebut! */
body:has(.com-content-article) .judul-berita-custom,
body:has(.com-content-article) [class*="judul-berita-custom"] {
  display: none !important;
}