/* ===========================================
   FIX FULL WIDTH UNTUK HILANGKAN AREA PUTIH
   =========================================== */

/* RESET GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* OVERRIDE SEMUA CONTAINER */
.container,
.container-fluid,
.wrapper,
.wrap,
.main-wrapper,
.content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* HEADER DAN NAVIGASI FULL WIDTH */
.header-top,
.headertop,
.menu-section,
.navbar,
.navbar-header,
.navbar-collapse {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CONTENT AREA */
.content-area,
.main-content,
#content,
.page-content,
.bodypage,
.pagebox {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
}

/* HERO/BANNER SECTION */
.headline,
.headline-padding,
.slider-container,
.templateslide,
.image-slider,
.bcarousel {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* FIX COLUMN LAYOUT */
.col-default,
.col-default-nopad,
.col-default-right {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
}

/* GRID SYSTEM */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.row>* {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* WIDGET DAN CARD */
.widget-box,
.artikelhome,
.articlerow-box,
.headmod,
.headmod2,
.statistik-row,
.pemb-row,
.galeri,
.aparatur {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
}

/* FOOTER */
.footer-container,
.footer-inner,
.copyright,
.footer-modern {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* UTILITY CLASSES */
.full-width {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.no-side-space {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* MEDIA QUERY UNTUK PC */
@media (min-width: 992px) {
    .container-pc {
        width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }

    .content-pc {
        max-width: 100% !important;
        padding: 0 30px !important;
    }

    /* Hero section full screen */
    .hero-pc {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    /* Fix Widget Width 20% untuk PC */
    .widget-box,
    .artikelhome,
    .articlerow-box,
    .headmod,
    .headmod2,
    .statistik-row,
    .pemb-row,
    .galeri,
    .aparatur {
        width: 20% !important;
        float: left !important;
        clear: none !important;
        padding: 5px !important;
    }

    /* Fix Slider Height agar lebih tinggi */
    .sliderx .owl-carousel,
    .sliderx figure {
        height: 550px !important;
        /* Tambah tinggi jadi 550px */
    }


    .sliderx img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ===========================================
   OVERRIDE WARNA HEADER WIDGET (AGAR SESUAI MENU)
   =========================================== */
.box-header,
.agenda-header,
.arsip-header,
.box-primary.box-solid>.box-header,
.widget-header,
.headmod,
.headmod2 {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
}

/* Pastikan icon di header juga putih/sesuai */
.box-header i,
.agenda-header i,
.arsip-header i,
.box-title i {
    color: #ffffff !important;
}

/* Khusus icon lingkaran (Agenda & Arsip) menyesuaikan agar rapi */
.agenda-icon,
.arsip-icon {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Menghilangkan background abu-abu jika ada */
.box.box-solid>.box-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================
   STANDARDISASI ICON WIDGET (MENGHILANGKAN DOUBLE ICON)
   =========================================== */
.box-header .box-title i,
.agenda-header i,
.arsip-header i,
.galeri-header i,
.box-title .fa,
.box-title .fas,
.box-title .far,
.box-title .fab {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 8px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    /* Reset border jika ada */
    color: #ffffff !important;
}

/* Reset wrapper span jika masih tertinggal di HTML */
.box-header .box-title span[style*="background"],
.box-header .box-title span.agenda-icon,
.box-header .box-title span.arsip-icon,
.box-header .box-title span.galeri-icon {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ===========================================
   FIX LAYOUT: SIDEBAR 20% - CONTENT 80% (LG SCREEN)
   =========================================== */
@media (min-width: 1024px) {
    .w-lg-80 {
        width: 79% !important;
        /* 79% untuk memberi ruang gap */
        flex: 0 0 79% !important;
        max-width: 79% !important;
    }

    .w-lg-20 {
        width: 20% !important;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}