@media (max-width: 768px) {
    .container-sidebar-left {
        order: -1;  /* Memindahkan ke atas konten utama */
      	grid-area: top-a;
    }
}

/* --- GRID ASLI PUNYA KAMU, TIDAK DIUBAH --- */
.site-grid {
    grid-gap: 0 2em;
    grid-template-columns:
        [full-start]

        minmax(0,1fr)
        [main-start]

        minmax(0,15%)      /* kolom kiri */
        minmax(0,35%)      /* kolom tengah kiri */
        minmax(0,35%)      /* kolom tengah kanan */
        minmax(0,15%)      /* kolom kanan */

        [main-end]
        minmax(0,1fr)

        [full-end] !important;
}


/**********************************************
*  TAMBAHAN: JARAK KIRI-TENGAH-KANAN LEBIH SEMPIT
**********************************************/

:root {
    --shb-col-gap-mobile: 0.5rem;       
    --shb-mobile-side-padding: 6px;
}

/* DESKTOP: jarak antar kolom */
html body .site-grid {
    column-gap: 1.6rem !important;      
    grid-column-gap: 1.6rem !important;
}


/**********************************************
*  MOBILE (< 768px)
**********************************************/
@media (max-width: 768px) {

    html body .site-grid {
        column-gap: var(--shb-col-gap-mobile) !important;   
        grid-column-gap: var(--shb-col-gap-mobile) !important;

        padding-left: var(--shb-mobile-side-padding) !important;
        padding-right: var(--shb-mobile-side-padding) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body :where(.content, .article, .com-content-article__body,
                     .main-content, .page, .moduletable, .module) {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}


/**********************************************
*  EXTRA SMALL (< 480px)
**********************************************/
@media (max-width: 480px) {
    html body .site-grid {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}