/* =========================================
   BASE STYLES & TYPOGRAPHY
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { background-color: #ffffff; color: #141414; font-family: 'Inter', sans-serif; line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; }
a { color: #141414; text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================================
   SIDEBAR (HAMBURGER MENU)
========================================= */
.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 998; display: none; opacity: 0; transition: opacity 0.3s ease; }
.sidebar-overlay.active { display: block; opacity: 1; }

.sidebar-menu { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: #fff; z-index: 999; box-shadow: 2px 0 10px rgba(0,0,0,0.1); transition: left 0.3s ease; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.sidebar-menu.active { left: 0; }

.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #141414; padding-bottom: 15px; margin-bottom: 20px; }
.sidebar-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: 1px; }
.close-btn { font-size: 1.8rem; cursor: pointer; color: #141414; transition: 0.2s; }
.close-btn:hover { color: #b80000; }

.sidebar-search { margin-bottom: 25px; display: flex; align-items: center; background: #f5f5f5; border-radius: 8px; padding: 8px 12px; }
.sidebar-search input { border: none; background: transparent; outline: none; width: 100%; font-family: 'Inter', sans-serif; font-size: 0.95rem; }
.sidebar-search button { background: none; border: none; cursor: pointer; color: #555; font-size: 1.1rem; }

.sidebar-section { margin-bottom: 25px; }
.sidebar-title { font-size: 0.8rem; color: #888; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; display: block; }
.sidebar-links { display: flex; flex-direction: column; gap: 12px; }
.sidebar-links a { font-size: 1.05rem; font-weight: 600; color: #333; transition: 0.2s; }
.sidebar-links a:hover { color: #b80000; padding-left: 5px; text-decoration: none; }
.sidebar-links a i { width: 25px; text-align: center; margin-right: 8px; color: #666; }

.sidebar-socials { display: flex; gap: 20px; margin-top: auto; padding-top: 20px; border-top: 1px solid #eee; justify-content: center; }
.sidebar-socials a { font-size: 1.5rem; color: #555; transition: 0.2s; }
.sidebar-socials a:hover { color: #b80000; transform: translateY(-2px); }

/* =========================================
   HEADER & NAVBAR
========================================= */
.masthead { border-bottom: 2px solid #000; margin-bottom: 20px; }
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 4%; position: relative; }

.logo-container { display: flex; align-items: center; gap: 15px; height: 60px; }
.hamburger-btn { font-size: 1.6rem; cursor: pointer; color: #141414; transition: 0.2s; }
.hamburger-btn:hover { color: #b80000; }
.header-logo-img { height: 100%; width: auto; display: block; object-fit: contain; }
.header-logo-text { font-size: 2.2rem; font-weight: 800; color: #141414; letter-spacing: 1.5px; margin-top: 0; line-height: 60px; }

.top-links { display: flex; align-items: center; gap: 15px; }
.header-socials { display: flex; align-items: center; gap: 12px; border-right: 1px solid #ddd; padding-right: 15px; }
.header-socials a { font-size: 1.15rem; color: #666; transition: 0.2s; }
.header-socials a:hover { color: #b80000; transform: translateY(-2px); }

.search-form { display: flex; align-items: center; background: #f5f5f5; border-radius: 20px; padding: 4px 15px; transition: 0.3s; border: 1px solid transparent; }
.search-form:focus-within { border: 1px solid #141414; background: #fff; }
.search-form input { border: none; background: transparent; padding: 6px 5px; outline: none; font-size: 0.9rem; font-family: 'Inter', sans-serif; width: 160px; }
.search-form button { background: none; border: none; cursor: pointer; color: #555; font-size: 1rem; }
.search-form button:hover { color: #b80000; }

.btn-admin { font-size: 0.9rem; font-weight: 600; border: 1px solid #ccc; padding: 8px 15px; border-radius: 4px; }
.btn-admin:hover { background-color: #f5f5f5; text-decoration: none; }

.main-nav { display: flex; justify-content: center; align-items: center; padding: 15px 4%; border-top: 1px solid #e0e0e0; flex-wrap: wrap; }
.nav-links { display: flex; gap: 35px; flex-wrap: wrap; }
.nav-links a { font-size: 0.95rem; font-weight: 600; color: #333; white-space: nowrap !important; }
.nav-links a:hover, .nav-links a.active { color: #b80000; text-decoration: none; }

/* =========================================
   META & IKLAN
========================================= */
.meta-wrapper { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.news-meta { font-size: 0.75rem; color: #b80000; text-transform: uppercase; font-weight: 700; display: block; }
.news-date { font-size: 0.75rem; color: #888; font-weight: 500; }

.ad-leaderboard { width: 100%; max-width: 970px; height: 90px; background-color: #f8f9fa; border: 2px dashed #ced4da; margin: 0 auto 30px auto; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-weight: 700; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; }
.ad-sidebar { width: 100%; height: 250px; background-color: #f8f9fa; border: 2px dashed #ced4da; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; text-align: center; position: sticky; top: 20px; }

/* =========================================
   LAYOUT BERITA DESKTOP
========================================= */
main { flex: 1; } 
.news-container { max-width: 1300px; margin: 0 auto; padding: 0 2%; margin-bottom: 50px; }
.news-item { margin-bottom: 25px; padding-bottom: 20px; }
.border-bottom { border-bottom: 1px solid #e0e0e0; }
img { width: 100%; display: block; object-fit: cover; }
h2, h3, h4 { font-family: 'Lora', serif; color: #222; margin: 10px 0; }

.newspaper-grid { display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: 30px; }
.col-main { border-right: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; padding: 0 20px; }

.img-wrapper-large { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 4px; }
.img-wrapper-large img { height: 350px; object-fit: cover; }

.watermark-news { position: absolute !important; bottom: 15px !important; right: 15px !important; top: auto !important; width: 45px !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; opacity: 0.85; pointer-events: none; z-index: 10; }

.news-title-large { font-size: 2.2rem; line-height: 1.2; }
.news-excerpt-large { font-size: 1rem; color: #444; }
.img-wrapper-small img { height: 160px; border-radius: 4px; }
.news-title-small { font-size: 1.2rem; line-height: 1.3; margin-top: 10px; }
.news-excerpt-small { font-size: 0.9rem; color: #555; }
.news-title-tiny { font-size: 1.1rem; line-height: 1.3; }
.news-excerpt-tiny { font-size: 0.9rem; color: #555; }

.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.gallery-item .img-wrapper-large img { height: 300px; border-radius: 4px; }
.gallery-item h3 { font-size: 1.8rem; }

.list-layout { display: flex; flex-direction: column; gap: 30px; max-width: 950px; margin: 0 auto; }
.list-item { display: flex; gap: 25px; align-items: center; border-bottom: 1px solid #e0e0e0; padding-bottom: 30px; }
.list-img-wrapper { width: 350px; flex-shrink: 0; }
.list-img-wrapper img { height: 220px; border-radius: 4px; }
.list-content { flex: 1; }
.list-content h3 { font-size: 1.8rem; margin-top: 0; }

/* =========================================
   FOOTER UTAMA (BBC FAT FOOTER STYLE)
========================================= */
.site-footer { border-top: 2px solid #141414; padding: 50px 4% 40px; margin-top: auto; background-color: #fcfcfc; text-align: left; }
.footer-logo { font-size: 2.2rem; font-weight: 800; color: #141414; letter-spacing: 1.5px; margin-bottom: 30px; display: block; line-height: 1; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 20px 35px; margin-bottom: 35px; border-bottom: 1px solid #e0e0e0; padding-bottom: 35px; }
.footer-nav a { font-size: 1.00rem; font-weight: 700; color: #141414; }
.footer-nav a:hover { color: #b80000; text-decoration: underline; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-socials { display: flex; gap: 25px; }
.footer-socials a { font-size: 1.8rem; color: #141414; transition: 0.2s; }
.footer-socials a:hover { color: #b80000; transform: translateY(-3px); }
.footer-copy { font-size: 0.50rem; color: #666; font-weight: 500; }

/* =========================================
   RESPONSIVE MOBILE
========================================= */
@media (max-width: 768px) {
    .top-bar { padding: 15px 4%; justify-content: center; position: relative; }
    .hamburger-btn { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
    .logo-container { height: 45px; justify-content: center; gap: 8px; margin: 0 auto; }
    .header-logo-text { font-size: 1.6rem; line-height: 45px; }
    .header-logo-img { height: 100%; }
    .top-links { display: none; } 

@media (max-width: 768px) {
    /* Perkecil dikit logo footernya */
    .footer-logo {
        font-size: 1.8rem;
        display: block;
        margin-bottom: 20px;
    }
@media (max-width: 768px) {
    /* Pangkas ruang kosong di bagian atas dan bawah footer */
    .site-footer {
        padding: 25px 20px 15px; 
    }

    /* Logo dikecilin lagi biar gak mendominasi */
    .footer-logo {
        font-size: 1.4rem; 
        display: block;
        margin-bottom: 15px;
    }

    /* Rapatkan jarak antar menu */
    .footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 8px; /* Dibuat makin rapet */
        column-gap: 15px;
        margin-bottom: 20px;
    }

    /* Tipisin font menu biar kelihatan lebih lega dan elegan */
    .footer-nav a {
        font-size: 0.85rem; /* Ukuran font dikecilin */
        font-weight: 500; /* Jangan terlalu bold */
        padding: 2px 0; 
        color: #444; /* Bikin warnanya agak soft, gak hitam pekat */
    }

    /* Sejajarkan Sosmed dan Copyright */
    .footer-bottom {
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center; 
        border-top: 1px solid #e0e0e0; 
        padding-top: 15px;
    }

    .footer-copy {
        margin: 0; 
        font-size: 0.75rem; 
        color: #888;
    }

    .footer-socials {
        display: flex;
        gap: 12px;
    }
    
    .footer-socials a {
        font-size: 1.1rem; /* Ikon sosmed dikecilin dikit */
    }
}
    /* Bikin menu jadi 2 kolom rapi */
    .footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Kiri-Kanan seimbang */
        row-gap: 15px; /* Jarak atas bawah biar enak dipencet */
        column-gap: 10px;
        margin-bottom: 25px;
    }

    /* Sejajarkan Sosmed sama Copyright biar hemat space vertikal */
    .footer-bottom {
        display: flex;
        flex-direction: row-reverse; /* Sosmed di kanan, Copyright di kiri */
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e0e0e0;
        padding-top: 15px;
    }

    /* Rapiin jarak sosmed */
    .footer-socials {
        display: flex;
        gap: 15px;
    }
}

/* 1. Benerin Wadah Navigasi Biar Nggak Dorong Layar */
    .main-nav { padding: 0; border-top: 1px solid #e0e0e0; display: block; width: 100%; overflow: hidden; }
    .col-main, .col-side { min-width: 0; width: 100%; box-sizing: border-box; }
    .bbc-text-content, .list-content { flex: 1; min-width: 0; overflow-wrap: break-word; }

    .nav-links { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; align-items: center; padding: 15px; width: 100%; max-width: 100vw; gap: 20px; -ms-overflow-style: none; scrollbar-width: none; }    
    .newspaper-grid { display: flex; flex-direction: column; gap: 15px; }
    .col-main { order: 1; border: none; padding: 0; }
    .col-side:nth-child(1) { order: 2; border: none; padding: 0; margin-top: 10px; }
    .col-side.side-list { order: 3; border: none; padding: 0; }

    .main-feature { margin-bottom: 20px; border-bottom: 2px solid #141414; padding-bottom: 20px; }
    /* 2. Benerin Gambar Artikel Utama Biar Proporsional */
    .img-wrapper-large img { height: 220px !important; width: 100%; object-fit: cover; border-radius: 6px; }
    .news-title-large { font-size: 1.6rem; margin-top: 15px; line-height: 1.25; }
    
    .bbc-side-item, .list-item { display: flex; flex-direction: row; align-items: flex-start; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
    .img-wrapper-small, .list-img-wrapper { width: 110px !important; flex-shrink: 0; }
    .img-wrapper-small img, .list-img-wrapper img { height: 75px !important; width: 100% !important; border-radius: 4px; object-fit: cover; }
    .bbc-text-content, .list-content { flex: 1; }
    
    .bbc-side-item .news-excerpt-small, .list-item .news-excerpt-large, .side-headline .news-excerpt-tiny { display: none; }
    .bbc-text-content h3, .list-content h3 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 6px 0; font-family: 'Lora', serif; }
    .side-headline .news-title-tiny { font-size: 1.05rem; margin-top: 0; }
    
    .meta-wrapper { margin-top: 0; flex-wrap: wrap; gap: 6px; }
    .news-meta { font-size: 0.65rem; }
    .news-date { font-size: 0.65rem; }

    .ad-leaderboard { max-width: 100%; height: 60px; padding: 10px; font-size: 0.7rem; letter-spacing: 1px; margin-bottom: 20px; }
    
    .site-footer { padding: 30px 4% 30px; }
    .footer-nav { gap: 15px 20px; padding-bottom: 25px; margin-bottom: 25px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 25px; }
}

/* =========================================
   LAYOUT GALERI ALA PINTEREST
========================================= */
.pinterest-grid {
    column-count: 4; 
    column-gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}
.pinterest-item {
    break-inside: avoid; 
    margin-bottom: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}
.pinterest-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.pinterest-item img { width: 100%; height: auto; display: block; }
.pinterest-info { padding: 15px; }
.pinterest-title { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px 0; font-family: 'Inter', sans-serif; }
.pinterest-title a { color: #141414; }
.pinterest-title a:hover { color: #b80000; text-decoration: none; }
@media (max-width: 1100px) { .pinterest-grid { column-count: 3; } }

@media (max-width: 768px) { 
    .pinterest-grid { column-count: 2; column-gap: 15px; } 
    
    /* Benerin Layout Gear & Destinasi Biar Nggak Kegencet Jadi 2 Kolom */
    .gallery-grid { 
        grid-template-columns: 1fr; /* Paksa jadi 1 kolom penuh ke bawah */
        gap: 25px; 
    }
    
    .gallery-item .img-wrapper-large img {
        height: 220px !important; /* Biar tinggi gambarnya pas di HP, nggak kepanjangan */
        width: 100%;
        object-fit: cover;
    }
}

@media (max-width: 480px) { 
    /* Paksa 2 kolom di layar HP kecil buat Galeri Pinterest */
    .pinterest-grid { 
        column-count: 2; 
        column-gap: 10px; 
        padding: 0 10px; 
    } 
    /* Kecilin padding dan font biar muat & rapi di 2 kolom */
    .pinterest-info { padding: 10px; }
    .pinterest-title { font-size: 0.85rem; margin-bottom: 5px; line-height: 1.3; }
    /* Susun info tanggal & like biar gak tabrakan nyamping */
    .pinterest-info .meta-wrapper { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
    .pinterest-info .news-date { font-size: 0.65rem !important; }
    .pinterest-info .meta-wrapper > div:last-child { font-size: 0.75rem !important; }

    /* --- JURUS SAPU JAGAT ANTI GESER KANAN --- */
    /* 1. Kunci paksa root layar biar gak bisa geser */
    html, body { 
        width: 100%; 
        max-width: 100vw; 
        overflow-x: hidden !important; 
    }
    /* 2. Benerin wadah konten yang bocor karena padding persen */
    .news-container { 
        width: 100%; 
        max-width: 100vw; 
        padding: 0 15px !important; /* Pakai pixel biar ukurannya stabil */
        box-sizing: border-box; 
    }

    /* 3. Paksa header dan navigasi biar gak ngedorong layout utama */
    .masthead, .main-nav { 
        width: 100%; 
        max-width: 100vw; 
        box-sizing: border-box; 
    }

    /* 4. Cegah wadah Flexbox melar ngelewatin layar HP */
    .news-item, .col-main, .col-side, .bbc-side-item, .list-item, .bbc-text-content, .list-content { 
        width: 100%; 
        max-width: 100%; 
        min-width: 0 !important; 
        box-sizing: border-box; 
    }

    /* 5. Paksa teks turun ke bawah kalau kepanjangan */
    h1, h2, h3, h4, p, a { 
        overflow-wrap: break-word; 
        word-wrap: break-word; 
    }}

/* =========================================
   GALERI CAROUSEL (BBC STYLE) BUAT HOMEPAGE
========================================= */
.galeri-showcase {
    background-color: #141414;
    margin: 50px 0;
    padding: 30px;
    border-radius: 8px;
}
.galeri-showcase-header {
    border-bottom: 1px solid #333;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.galeri-showcase-header h2 { margin: 0; }
.galeri-showcase-header h2 a {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.galeri-showcase-header h2 a:hover { color: #b80000; text-decoration: none; }

.galeri-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 15px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #444 #141414;
}
.galeri-carousel::-webkit-scrollbar { height: 6px; }
.galeri-carousel::-webkit-scrollbar-track { background: #141414; border-radius: 4px; }
.galeri-carousel::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

.galeri-card {
    flex: 0 0 260px; /* Ukuran FIX biar berjejer rapi */
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s;
    text-decoration: none;
}
.galeri-card:hover { opacity: 0.8; text-decoration: none; }
.galeri-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #333;
}
.galeri-card h4 { color: #fff; font-family: 'Lora', serif; font-size: 1.05rem; margin: 0 0 6px 0; line-height: 1.35; }
.galeri-card p { color: #888; font-size: 0.85rem; margin: 0; line-height: 1.4; }

/* KARTU VIEW ALL PALING KANAN */
.view-all-card {
    background-color: #1f1f1f;
    border: 1px dashed #444;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    transition: 0.3s;
}
.view-all-card:hover { background-color: #b80000; border-color: #b80000; }
.view-all-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: 0.3s;
}
.view-all-circle i { color: #fff; font-size: 1.2rem; }
.view-all-card:hover .view-all-circle { background-color: #fff; }
.view-all-card:hover .view-all-circle i { color: #b80000; }
.view-all-card h4 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; }

/* --- SEMBUNYIKAN MENU AKUN DI SIDEBAR KHUSUS PC --- */
@media (min-width: 769px) {
    .mobile-only-menu {
        display: none !important;
    }
}