/* =====================================================
   1. RESET & BASE STYLES
   ===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
}

/* =====================================================
   2. LAYOUT & CONTAINERS
   ===================================================== */
section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 60px; /* Default spacing */
}

.site-container {
    width: 90%; /* Diubah dari 70% agar lebih fleksibel di berbagai layar */
    max-width: 1300px;
    margin: 0 auto;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* Container Variants */
.container-narrow { max-width: 1000px; }
.container-wide   { max-width: 1400px; }

main {
    padding-top: 110px; /* Offset for sticky header */
}

/* =====================================================
   3. HEADER (NAVIGATION)
   ===================================================== */
.site-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
    transition: all 0.25s ease;
    box-shadow: none;
}

.site-header.scrolled {
    box-shadow: 0 3px 18px rgba(0,0,0,0.12);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
}

.site-header *, 
.site-header img { 
    max-width: 100%; 
}

/* =====================================================
   4. ELEMENTS & MEDIA SAFETY
   ===================================================== */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

.grid,
[class*="grid"],
[class*="row"] {
    max-width: 100%;
}

/* Transform safety for cards/items */
[class*="card"],
[class*="item"] {
    transform-origin: center center;
}

/* =====================================================
   5. FOOTER
   ===================================================== */
.theme-footer {
    text-align: center;
    padding: 40px 15px;
    background: #fff;
    color: #000005;
    font-size: 15px;
    margin-top: 40px;
}

.theme-footer a { 
    color: #000005; 
    text-decoration: none; 
    transition: opacity 0.2s;
}

.theme-footer a:hover {
    opacity: 0.8;
}

/* =====================================================
   6. RESPONSIVE DESIGN (MOBILE SAFETY)
   ===================================================== */
@media (max-width: 768px) {
    main {
        padding-top: 90px; /* Smaller offset for mobile */
    }

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .site-container {
        width: 95%;
    }

    /* Prevent accidental overflow from animations/transforms */
    [style*="translate"],
    [style*="scale"],
    [class*="card"],
    [class*="item"] {
        max-width: 100%;
    }
}

/* Bersihkan dan gabungkan */
#page-banner-section {
    padding-top: 110px; /* Jarak untuk mengakomodasi Header Fixed */
    display: block;
    clear: both;
    background-color: #fff; /* Pastikan warna background menyambung */
}

/* Responsif: Di HP biasanya Header lebih pendek, sesuaikan jaraknya */
@media (max-width: 768px) {
    #page-banner-section {
        padding-top: 80px; /* Lebih kecil untuk tampilan mobile */
    }
}

/* Optimasi Gambar Banner */
#page-banner-section img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Gunakan cover jika ingin memenuhi lebar, contain jika ingin gambar utuh */
}