/* ============================================
   GLOBAL & HOMEPAGE LAYOUT - FINAL & CLEAN
   ============================================ */

/* ===== BASE LAYOUT (DESKTOP) ===== */
.content-wrapper {
    max-width: 980px;
    margin: 20px auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.main-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 30px !important;
    align-items: start !important;
    width: 100% !important;
}

.content-area {
    min-width: 0 !important; /* Mencegah konten memaksa grid melebar */
    width: 100% !important;
    
}

.sidebar {
    width: 300px !important;
    min-width: 300px !important;
}

/* ===== RESPONSIVE: TABLET & MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
    /* 1. Wrapper Full Width (Hilangkan padding kiri-kanan) */
    .content-wrapper {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* 2. Stack Layout Vertikal (Content di atas, Sidebar di bawah) */
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* Gap diatur oleh margin antar section */
    }

    /* 3. Styling Content Area & Sidebar */
    .content-area,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important; /* Padding dasar mobile */
        background: #ffffff;
        box-sizing: border-box !important;
    }

       /* ✅ SEMBUNYIKAN SIDEBAR TOTAL DI MOBILE */
    .sidebar {
        display: none !important;
    }


    /* 4. BLEED EFFECT: Rapatkan elemen tertentu ke tepi layar */
    /* Karena .content-area punya padding 16px, kita tarik keluar -16px */
    .content-area > .section-header-full-width {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        max-width: calc(100% + 32px) !important;
        border-radius: 0 !important;
    }

    /* 5. Spacing Konsisten Antar Template Parts */
    .content-area > * {
        margin-bottom: 24px !important;
    }
    
    .content-area > *:last-child {
        margin-bottom: 0 !important;
    }

    /* 6. Cegah Horizontal Scroll */
 
    
    .content-area img, 
    .content-area table,
    .content-area iframe,
    .content-area video {
        max-width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
}

/* ===== RESPONSIVE: MOBILE KECIL (≤ 360px) ===== */
@media (max-width: 360px) {
    /* 1. Padding lebih rapat untuk layar kecil */
    .content-area,
    .sidebar {
        padding: 0 !important;
    }

    /* 2. Sesuaikan Bleed Effect dengan padding 12px */
    .content-area > .section-header-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
    }

    /* 3. Spacing antar section lebih rapat */
    .content-area > * {
        margin-bottom: 18px !important;
    }
}

/* ============================================
   FIX: CEGAH OVERFLOW HORIZONTAL DI MOBILE
   ============================================ */
@media (max-width: 768px) {
    
    /* 1. Cegah scroll horizontal di seluruh halaman */
    html, body {
      
        max-width: 100% !important;
        position: relative !important;
		margin:0 !important;
    }

    /* 2. Pastikan semua container tidak melebihi lebar layar */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    .content-wrapper,
    .main-layout,
    .content-area,
    .sidebar {
        max-width: 100% !important;
        width: 100% !important;
    }

   
    
   
}