/*
Theme Name: ATNM Popbela
Theme URI: https://www.infodagang.com/
Description: Tema WordPress khusus untuk portal berita, lifestyle, dan media viral. Tema ini tidak membutuhkan plugin pihak ketiga yang berat karena semua fitur vital sudah tertanam di dalam intinya (Built-in).
Author: Faqih Hilal Mukarrom
Author URI: https://www.infodagang.com/
Description: Description
Version: 2.1.0
Tested up to: 5.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wpatnm-popbela
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================
   1. FONTS & VARIABLES
   ========================================= */
:root {
    --color-primary: #D72772;       /* Pink Popbela Asli */
    --color-primary-dark: #b01c5b;
    --color-text-main: #000000;
    --color-text-meta: #757575;
    --color-bg-light: #ffffff;
    --border-color: #eeeeee;
	--bg-widget: #F5F5F5;
    
    /* Typography Configuration */
    --font-serif: 'Lato', serif;    /* Untuk Judul Artikel */
    --font-ui: 'Lato', sans-serif;       /* Untuk Menu & Tombol */
    --font-body: 'Lato', sans-serif;            /* Untuk Isi Paragraf */
    
    --container-width: 990px;
}

body.dark-mode {
    --color-bg-light: #121212;
    --color-text-main: #e0e0e0;
    --bg-widget: #1e1e1e;
	--border-color: #1e1e1e;
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode a {
    color: #fff !important;
}

/* =========================================
   2. GLOBAL RESET
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden !important; /* PENTING */
    position: relative;
}

body {
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--color-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Helper Classes */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   HEADER LAYOUT: CSS GRID (PASTI SEJAJAR)
   ========================================= */

/* Parent Header: TIDAK Sticky lagi */
.site-header {
    background: var(--color-bg-light);
    position: relative; /* Ubah dari sticky ke relative */
    top: auto;
    z-index: 1000;
    padding-top: 0;
}

/* Child Header (Logo + Menu): MENJADI Sticky */
.header-main {
    background: var(--color-bg-light); /* Wajib ada warna background agar konten tidak tembus */
    top: 0;
    z-index: 9999;
	width: 100%;
	height: 60px;
	padding-top: 10px;
    border-bottom: 2px solid var(--border-color);
    max-width: var(--container-width);
	margin: 0 auto;
}

/* Gunakan GRID: Kiri (Logo), Tengah (Menu), Kanan (Tombol) */
.header-main .container {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 20px; /* Jarak antar elemen */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 10px;
}

/* 1. LOGO */
.header-logo {
	width: 163px;
	height: auto;
    display: flex;
    align-items: center;
}

.header-logo img {
    height: auto;
    max-height: 40px; /* Sesuaikan tinggi logo */
    width: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.site-branding, 
.header-logo, 
.custom-logo-link {
    position: relative;
    display: block;
    line-height: 0; /* Hilangkan spasi hantu */
}

.custom-logo {
    height: auto;
    width: auto;
    max-height: 40px; /* Sesuaikan tinggi logo kamu */
    transition: opacity 0.2s ease;
}

/* DEFAULT (LIGHT MODE) */
.logo-light {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.logo-dark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;  /* Pastikan ukuran 0 agar tidak makan tempat */
    height: 0 !important;
}

body.dark-mode .logo-light {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

body.dark-mode .logo-dark {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important; /* Kembalikan ukuran asli */
    height: auto !important;
}

.mobile-logo {
	width: 163px;
	height: auto;
    display: flex;
    align-items: center;
}

.header-logo svg {
    height: 24px;
    width: auto;
    display: block;
}

/* 2. MENU NAVIGASI */
.main-navigation {
    display: flex;
    justify-content: center; /* Menu rata tengah */
    width: 100%;
}

.main-navigation ul {
    display: flex;
    flex-wrap: nowrap; /* Menu dilarang turun baris */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px; /* Jarak antar menu */
}

.main-navigation a {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-main);
    text-decoration: none;
    white-space: nowrap; /* Teks tidak boleh terpotong */
	text-transform: uppercase;
}
.main-navigation a:hover { color: #D72772; }

/* 3. ACTIONS (Search & Tombol) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* Jarak antar ikon */
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    
    /* Membuat area klik bulat sempurna */
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #333; /* Warna Ikon Default */
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background-color: #f5f5f5;
    color: var(--color-primary); /* Berubah Pink saat hover */
    transform: translateY(-2px); /* Naik sedikit */
}

.icon-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2px;
}

body.dark-mode .icon-btn {
    color: #fff;
}
body.dark-mode .icon-btn:hover {
    background-color: #333;
    color: var(--color-primary);
}

/* DRAWER HEADER FIX */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.drawer-header .mobile-logo {
    margin: 0;
    border: none;
    padding: 0;
}

/* Tombol Close Drawer */
.close-btn {
    position: static; /* Reset posisi absolute lama */
    width: 36px;
    height: 36px;
    background: #f9f9f9;
    border-radius: 50%;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
}
.close-btn:hover {
    background: #D72772;
    color: #fff;
    border-color: #D72772;
}

/* Responsive Adjustment */
@media (max-width: 600px) {
    .header-actions { gap: 8px; }
    .icon-btn { width: 36px; height: 36px; }
    .icon-btn svg { width: 20px; height: 20px; }
    .login-btn { font-size: 11px; padding: 6px 12px; }
}

/* --- Tombol Masuk / Login --- */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    /* GUNAKAN VARIABLE BARU INI */
    background-color: var(--color-button); 
    
    color: #fff !important;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1;
    height: 36px;
}

.login-btn:hover {
    filter: brightness(0.9); 
    text-decoration: none;
}

/* =========================================
   RESPONSIVE MOBILE: SCROLLABLE MENU
   (Ganti bagian paling bawah style.css dengan ini)
   ========================================= */

@media (max-width: 991px) {

    /* 1. Header Container: Izinkan elemen turun baris (Wrap) */
    .header-main .container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px 0; /* Padding bawah 0 agar menu mepet */
    }

    /* 2. Logo: Kiri Atas */
    .header-logo {
        order: 1;
        width: 50%; /* Ambil setengah lebar */
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* 3. Actions (Search & Burger): Kanan Atas */
    .header-actions {
        order: 2;
        width: 50%;
        justify-content: flex-end;
        margin-left: 0;
        margin-bottom: 10px;
    }

    /* 4. MENU NAVIGASI (Bisa Digeser) */
    .main-navigation {
        display: block !important; /* Pastikan muncul */
        order: 3; /* Pindah ke baris ke-3 (bawah) */
        
        /* Trik agar menu mentok dari ujung kiri ke ujung kanan layar */
        width: 100vw !important; 
        margin-left: -20px; /* Kompensasi padding container 20px */
        margin-right: -20px;
        
        padding: 0 20px; /* Beri jarak dalam agar teks pertama tidak kepotong */
        background: #fff;
        border-top: 1px solid var(--border-color); /* Garis pemisah halus */
        border-bottom: 1px solid var(--border-color);

        /* KUNCI SCROLL HORIZONTAL */
        overflow-x: auto;
        white-space: nowrap; /* Teks dilarang turun baris */
        -webkit-overflow-scrolling: touch; /* Agar scroll licin di iPhone */
        
        /* Sembunyikan Scrollbar (Firefox) */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }

    /* Sembunyikan Scrollbar (Chrome/Safari) */
    .main-navigation::-webkit-scrollbar {
        display: none;
    }

    .main-navigation ul {
        display: flex;
        gap: 25px; /* Jarak antar menu */
        padding: 0;
        margin: 0;
        height: 50px; /* Tinggi area menu */
        align-items: center;
    }
    
    /* Pastikan item terakhir ada jarak kanannya */
    .main-navigation ul li:last-child {
        padding-right: 20px;
    }

    .main-navigation a {
        font-size: 14px;
        color: #555;
        font-weight: 600;
        text-transform: capitalize;
        display: inline-block;
    }

    /* Indikator Menu Aktif (Warna Pink) */
    .main-navigation .current-menu-item > a {
        color: var(--color-primary);
    }

    /* 5. Sembunyikan Tombol Masuk di Mobile (Hemat tempat) */
    .login-btn {
        display: none !important;
    }
    
    /* 6. Munculkan Hamburger (Jika masih dibutuhkan untuk menu tambahan) */
    .menu-toggle {
        display: block;
        font-size: 24px;
    }
    
    /* 7. Sembunyikan Hero Section di HP (Sesuai request sebelumnya) */
    .popbela-hero-section {
        display: none !important;
    }
}

/* --- Bottom Row: "For You" Bar (Pink Box) --- */
.foryou-container {
    padding-top: 15px;
    padding-bottom: 15px;
    background: var(--color-bg-light);
    position: relative;
    z-index: 900;
}

.foryou-box {
    /* Menggunakan Variable Gradient dari Customizer */
    background: linear-gradient(
        90deg, 
        var(--color-foryou-start) 0%, 
        var(--color-foryou-end) 100%
    );
    
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 60px;
    overflow: hidden;
}

.foryou-label {
    font-family: var(--font-ui);
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    line-height: 1.1;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.3);
    padding-right: 15px;
    margin-right: 5px;
    text-align: center;
}

/* Horizontal Scroll Area */
.foryou-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox hidden scroll */
    align-items: center;
    width: 100%;
}

.foryou-scroll::-webkit-scrollbar { 
    display: none; /* Chrome hidden scroll */
}

/* Pills Items */
.foryou-pill {
    background: var(--color-bg-light);
    color: var(--color-primary) !important;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
}

.foryou-pill:hover {
    transform: scale(1.05);
    color: var(--color-primary) !important;
}

/* Hidden Search Bar Overlay */
.header-search-bar {
    display: none;
    position: absolute;
    top: 100%; left: 0; width: 100%;
    background: #fff;
    padding: 20px 0;
    border-top: 1px solid #eee;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}
.header-search-bar form { display: flex; justify-content: center; }
.header-search-bar input { width: 70%; padding: 10px; border: 1px solid #ddd; }
.search-close { background: none; border: none; font-size: 2rem; cursor: pointer; margin-left: 10px; }


/* =========================================
   4. HERO SECTION (Homepage Top)
   ========================================= */
.popbela-hero-section {
    max-width: var(--container-width);
    margin: 30px auto 50px;
    padding: 0 20px;
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 350px 200px;
    gap: 10px;
}

.hero-item { position: relative; overflow: hidden; border-radius: 8px; }
.hero-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.hero-item:hover img { transform: scale(1.05); }

.hero-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: #fff; padding: 20px; pointer-events: none;
}
.hero-item h2 {
    font-family: var(--font-serif); font-weight: 700;
    font-size: 1.2rem; margin: 5px 0 0; line-height: 1.3; color: #fff;
}

/* Grid Span Configuration */
.hero-item.main-headline { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.hero-item.main-headline h2 { font-size: 2rem; }
.hero-item.sub-headline { grid-column: span 1; grid-row: span 1; }


/* =========================================
   5. MAIN LAYOUT (Sidebar Kanan)
   ========================================= */
.site-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 5px; /* Jarak antara konten dan sidebar */
}

/* Desktop: Paksa agar tidak turun */
@media (min-width: 992px) {
    .site-content { flex-wrap: nowrap; }
    
    #primary {
        width: 65%;
        flex: 0 0 65%;
        max-width: 65%;
    }

    #secondary {
        width: 35%;
        flex: 0 0 35%;
        max-width: 35%;
        padding-left: 20px;
    }
}

/* =========================================
   6. POST GRID (Cards Style)
   ========================================= */
.popbela-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.grid-card { display: flex; flex-direction: column; margin-bottom: 0; }

.card-thumbnail {
    position: relative; overflow: hidden; margin-bottom: 5px;
    border-radius: 8px; aspect-ratio: 4/3; background: #eee;
}
.card-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.grid-card:hover .card-thumbnail img { transform: scale(1.05); }

.card-category {
    position: absolute; bottom: 10px; left: 10px;
    background: var(--color-primary); color: #fff;
    font-family: var(--font-ui); font-size: 10px; font-weight: bold; 
    text-transform: uppercase; padding: 4px 8px; border-radius: 4px; z-index: 2;
}

.card-title {
    font-size: 16px; line-height: 1.3;
    margin-bottom: 10px; font-weight: 700;
}
.card-title a { color: #000; }
.card-title a:hover { color: var(--color-primary); }

.card-excerpt { font-size: 14px; color: var(--color-text-meta); margin-bottom: 10px; }
.card-meta { font-size: 11px; color: var(--color-text-main); text-transform: uppercase; letter-spacing: 1px; }


/* =========================================
   7. SINGLE POST
   ========================================= */
.popbela-article { margin-bottom: 60px; }
.popbela-header { text-align: center; margin-bottom: 30px; }

.entry-meta-category .cat-label {
    color: var(--color-primary); text-transform: uppercase; font-weight: 700;
    font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px;
}

.popbela-header .entry-title {
    font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700;
    line-height: 1.2; margin: 15px 0 20px; color: #000;
}

.popbela-featured-image { margin-bottom: 40px; width: 100%; border-radius: 8px; overflow: hidden; }

.popbela-content { font-size: 18px; line-height: 1.8; color: var(--color-text-main); font-family: var(--font-body); }
.popbela-content p { margin-bottom: 1.5em; }
.popbela-content h2 { font-family: var(--font-serif); margin-top: 40px; }

/* Related Posts */
.popbela-related-section { margin-top: 10px; padding-top: 20px; }
.related-heading { font-family: var(--font-ui); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
.popbela-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-item .related-thumb { aspect-ratio: 16/9; background: #eee; margin-bottom: 10px; overflow: hidden; border-radius: 4px; }
.related-item img { width: 100%; height: 100%; object-fit: cover; }
.related-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.3; }


/* =========================================
   8. SIDEBAR & WIDGETS (NORMAL / NON-STICKY)
   ========================================= */

/* Default Mobile (Sidebar di bawah) */
#secondary {
    width: 100%;
    padding: 0;
    border: none;
    margin-top: 40px;
}

.widget {
    margin-bottom: 10px;
}

.widget-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #000;
	border-bottom: 2px solid var(--border-color);
}

/* Widget List Style */
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li a { color: var(--color-text-main); font-weight: 700; }
.widget ul li a:hover { color: var(--color-primary); }


/* Desktop Layout (Sidebar di Kanan) */
@media (min-width: 992px) {
    #secondary {
        /* Mengatur lebar sidebar */
        width: 35%;
        flex: 0 0 35%;
        max-width: 35%;
        
        /* Visual pemisah */
        padding-left: 20px;
        margin-top: 0;
        
        /* RESET STICKY: Kembalikan ke posisi normal */
        position: static; 
        top: auto;
        height: auto;
    }
}

/* =========================================
   WIDGET: TRENDING TOPICS (UPDATED)
   ========================================= */

.popbela-trending-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trending-item {
    display: flex; /* Flex Row: Angka | Detail */
    align-items: flex-start; /* Rata atas */
    margin-bottom: 10px;
    padding-bottom: 15px;
}

.trending-item:last-child {
    border-bottom: none;
}

/* Angka Besar (Kiri) */
.trending-number {
    font-family: var(--font-serif); /* Playfair Display */
    font-size: 3rem;
    line-height: 0.8;
    font-weight: 700;
    color: #e0e0e0; /* Abu-abu muda */
    margin-right: 20px;
    min-width: 30px;
    text-align: center;
    font-style: italic;
    margin-top: 5px; /* Penyesuaian agar sejajar optik */
}

/* Wrapper Teks (Kanan) */
.trending-detail {
    flex: 1;
    display: flex;
    flex-direction: column; /* KUNCI: Menumpuk Kategori & Judul */
    justify-content: center;
}

/* 1. Kategori (Pink, Kecil, Atas) */
.trending-cat {
    font-family: var(--font-ui);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--color-primary); /* Pink */
    margin-bottom: 5px; /* Jarak ke judul */
    text-decoration: none;
    display: inline-block;
}

/* 2. Judul Artikel (Hitam, Bawah) */
.trending-title {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text-main);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

/* Hover Effects */
.trending-item:hover .trending-number {
    color: var(--color-primary);
}

.trending-title:hover {
    color: var(--color-primary);
}
/* =========================================
   9. FOOTER
   ========================================= */
.site-footer {
    background-color: #111;
    color: #999;
    padding: 50px 0;
    text-align: center;
    margin-top: 60px;
    width: 100%; /* Lebar Penuh */
    display: block;
    position: relative;
    z-index: 10;
}
.site-footer a { color: #fff; }


/* =========================================
   10. MOBILE RESPONSIVE
   ========================================= */
/* =========================================
   RESPONSIVE MOBILE (FIXED HEADER SOLUTION)
   ========================================= */
@media (max-width: 991px) {
    
    /* 1. Header Menjadi Fixed (Mengambang Mutlak) */
    .header-main {
        position: fixed !important; /* Wajib Fixed */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999; /* Pastikan selalu di atas */
        background: var(--color-bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        height: auto; /* Biarkan tinggi otomatis */
        transition: all 0.3s ease;
    }

    /* 2. Kompensasi Tinggi Header (PENTING) */
    /* Karena header melayang, konten di bawahnya akan tertutup. 
       Kita beri jarak 'padding-top' pada body atau page wrapper */
    body {
        padding-top: 110px; /* Sesuaikan angka ini jika header kamu lebih tinggi/pendek */
    }

    /* 3. Container Header: Tumpuk Elemen */
    .header-main .container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between;
        align-items: center;
        gap: 0 !important;
        padding: 10px 20px 0;
    }

    /* 4. Urutan Tampilan (Logo - Tombol - Menu) */
    .header-logo {
        order: 1;
        width: 50%;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .header-actions {
        order: 2;
        width: 50%;
        justify-content: flex-end;
        margin-left: 0;
        margin-bottom: 5px;
    }

    /* 5. Navigasi Menu (Scroll Samping) */
    .main-navigation {
        display: block !important;
        order: 3;
        width: 100vw !important; /* Lebar layar penuh */
        margin-left: -20px;      /* Kompensasi padding container */
        margin-right: -20px;
        padding: 0 20px;
        background: var(--color-bg-light);
        
        /* Scroll Horizontal */
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Sembunyikan scrollbar Firefox */
        
        /* Garis pemisah */
        border-top: 1px solid #f0f0f0;
    }
    
    /* Sembunyikan scrollbar Chrome */
    .main-navigation::-webkit-scrollbar {
        display: none;
    }

    .main-navigation ul {
        display: flex;
        padding: 0;
        margin: 0;
        gap: 20px;
        height: 45px; /* Tinggi baris menu */
        align-items: center;
    }

    .main-navigation a {
        font-size: 14px;
        color: #555;
        font-weight: 600;
        display: inline-block;
        line-height: 45px; /* Vertikal tengah */
    }

    .main-navigation a:hover {
        color: var(--color-primary);
    }

    /* 6. Hilangkan Tombol Masuk di Mobile */
    .login-btn {
        display: none !important;
    }

    /* Tampilkan Hamburger */
    .menu-toggle {
        display: block;
        padding: 5px;
        font-size: 24px;
    }
    
    /* 7. For You Container (Akan ikut scroll ke atas) */
    .foryou-container {
        /* Tidak perlu sticky/fixed, biarkan normal flow */
        margin-top: 10px; 
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 600px) {
    .foryou-box { padding: 8px 15px; border-radius: 8px; }
    .foryou-label { font-size: 12px; padding-right: 10px; }
    .login-btn { padding: 8px; } /* Tombol lebih kecil */
    
    .popbela-header .entry-title { font-size: 2rem; }
    
    /* Related Post jadi list di HP */
    .popbela-related-grid { grid-template-columns: 1fr; }
    .related-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
    .related-item .related-thumb { width: 100px; height: 80px; margin-bottom: 0; flex-shrink: 0; }
}

/* =========================================
   MOBILE MENU DRAWER (SLIDE OUT)
   ========================================= */

/* 1. Overlay Hitam Transparan */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. Kotak Menu (Drawer) */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -100%; /* Sembunyi di kanan (gunakan 100% agar full width off-canvas) */
    width: 100%;  /* Lebar Penuh Layar HP */
    height: 100vh; /* Tinggi Penuh Layar HP */
    
    background: var(--color-bg-light); /* Latar Putih */
    
    /* Z-INDEX TERTINGGI */
    /* Header kita set 9999, jadi ini harus lebih besar agar menutupi header */
    z-index: 10000 !important; 
    
    padding: 20px;
    box-shadow: none;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Agar bisa discroll jika menu panjang */
}

/* Saat Aktif (Muncul) */
.mobile-menu-drawer.active {
    right: 0; /* Geser menutupi layar */
}

/* 3. Isi Menu Mobile */
.mobile-logo {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    padding-right: 50px; /* Beri ruang agar tidak nabrak tombol X */
}

/* Overlay Gelap (Background belakang menu) */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8); /* Lebih gelap */
    z-index: 9999; /* Di bawah drawer, tapi di atas header */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px); /* Efek blur keren */
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f5f5f5;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: #e0e0e0;
    color: #d31e63;
}

/* =========================================
   MOBILE MENU: GRID / BOX STYLE
   ========================================= */

/* 1. Container Menu (Ubah jadi Grid) */
.mobile-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom Sejajar */
    gap: 15px; /* Jarak antar kotak */
    padding: 10px 0;
    margin: 20px 0;
    list-style: none;
}

/* 2. Hapus Style List Lama */
.mobile-nav-list li {
    border-bottom: none; /* Hapus garis pemisah lama */
    margin: 0;
}

/* 3. Desain Kotak (Card Style) */
.mobile-nav-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background-color: var(--bg-widget); /* Abu sangat muda */
    border-radius: 12px; /* Sudut membulat */
    padding: 20px 10px;
    min-height: 90px; /* Tinggi kotak */
    
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 14px;
    color: var(--color-text-main);
    text-transform: uppercase;
    text-decoration: none;
    
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* 4. Efek Hover & Aktif */
.mobile-nav-list a:hover {
    background-color: #fff;
    border-color: var(--color-primary); /* Pink */
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(215, 39, 114, 0.15);
}

/* Menu yang sedang aktif dibuka */
.mobile-nav-list .current-menu-item a {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(215, 39, 114, 0.3);
}

/* Opsional: Menambahkan Ikon Semu (Initial Huruf) */
/* Ini membuat huruf pertama jadi besar di atas teks menu */
.mobile-nav-list a::before {
    content: attr(title); /* Mengambil title attribute jika ada, atau gunakan icon font */
    font-size: 24px;
    margin-bottom: 5px;
    opacity: 0.5;
}

/* 5. Responsif Layar Sangat Kecil */
@media (max-width: 360px) {
    .mobile-nav-list {
        grid-template-columns: 1fr; /* Jadi 1 kolom di HP sangat kecil */
    }
}

/* Dekorasi Lingkaran Kecil di dalam kotak */
.mobile-nav-list a::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #ddd;
    border-radius: 50%;
    margin-top: 8px;
    transition: background 0.2s;
}

.mobile-nav-list a:hover::after,
.mobile-nav-list .current-menu-item a::after {
    background-color: #fff; /* Putih saat aktif */
}

.mobile-nav-list a:hover::after {
    background-color: var(--color-primary); /* Pink saat hover */
}

/* =========================================
   SINGLE POST STYLE UPDATE
   ========================================= */

/* Header Artikel: Rata Kiri (Lebih umum untuk layout dengan sidebar) */
.popbela-single-header {
    text-align: left; 
    margin-bottom: 25px;
}

.popbela-single-header .entry-title {
    font-family: var(--font-serif);
    font-size: 2.5rem; /* Judul Besar */
    line-height: 1.2;
    margin: 10px 0 15px 0;
    color: #000;
}

.popbela-single-header .cat-label {
    color: var(--color-primary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

/* Featured Image */
.popbela-featured-image img {
    width: 100%; /* Penuhi kolom 70% */
    height: auto;
    border-radius: 8px;
}

/* Isi Konten */
.popbela-content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text-main);
    margin-top: 30px;
}

.popbela-content p {
    margin-bottom: 1.5em;
}

.popbela-content h2, 
.popbela-content h3 {
    font-family: var(--font-serif);
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Blockquote agar menonjol */
.popbela-content blockquote {
    border-left: 5px solid var(--color-primary);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    font-size: 1.2em;
    color: #555;
}

/* Tags di bawah artikel */
.tags-links a {
    display: inline-block;
    background: var(--bg-widget);
    color: #555;
    padding: 5px 15px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.tags-links a:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Navigasi Next/Prev Post */
.post-navigation {
    margin-top: 40px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}

.nav-subtitle {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
}

.nav-title {
    font-family: var(--font-serif);
    font-weight: bold;
    color: #000;
    font-size: 16px;
}

/* Responsif: Di HP, judul agak mengecil */
@media (max-width: 600px) {
    .popbela-single-header .entry-title {
        font-size: 2rem;
    }
}

/* =========================================
   SINGLE POST HEADER (STYLE SEPERTI GAMBAR)
   ========================================= */

.popbela-single-header {
    text-align: left; /* Rata Kiri Sesuai Gambar */
    margin-bottom: 20px;
    max-width: 100%; /* Gunakan lebar penuh container */
    padding: 0;
}

/* 1. Breadcrumbs Style */
.popbela-breadcrumbs {
    font-family: var(--font-ui); /* Font Sans-Serif */
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary); /* Warna Pink */
    margin-bottom: 10px;
    text-transform: capitalize;
}

.popbela-breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
}

.popbela-breadcrumbs .sep {
    margin: 0 5px;
    font-size: 10px;
    vertical-align: middle;
}

/* 2. Judul Artikel */
.popbela-single-header .entry-title {
    font-family: var(--font-ui); /* Ubah ke Sans-Serif (Albert Sans/Lato) */
    font-weight: 700; /* Bold */
    font-size: 1.5rem; /* Ukuran besar (~32px) */
    line-height: 1.3;
    color: var(--color-text-main); /* Hitam pekat */
    margin: 0 0 15px 0;
}

/* 3. Meta Data */
.entry-meta-header {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.6;
}

.post-date {
    color: var(--color-text-main); /* Abu-abu */
    margin-bottom: 2px;
}

.post-source a {
    color: var(--color-primary); /* Pink */
    font-weight: 400;
    text-decoration: none;
}

/* Responsif Mobile */
@media (max-width: 600px) {
    .popbela-single-header .entry-title {
        font-size: 1.6rem; /* Sedikit lebih kecil di HP */
    }
}

/* =========================================
   WIDGET: TRENDING TOPICS (TAGS)
   ========================================= */

.popbela-topic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popbela-topic-list li {
    margin-bottom: 5px;
    border-bottom: 1px solid transparent; /* Jaga-jaga kalau mau garis */
}

.topic-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Teks kiri, Panah kanan */
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.2s;
}

/* Bagian Kiri (Angka + Nama) */
.topic-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara angka dan teks */
}

/* Angka (1., 2.) */
.topic-num {
    font-family: var(--font-ui); /* Gunakan font sans-serif */
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-main);
}

/* Nama Topik */
.topic-name {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-main);
}

/* Ikon Panah Kanan (>) */
.topic-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-text-main); /* Warna panah hitam */
    transition: transform 0.2s;
}

/* Efek Hover */
.topic-item:hover .topic-name,
.topic-item:hover .topic-num {
    color: var(--color-primary); /* Berubah jadi Pink saat hover */
}

.topic-item:hover .topic-icon svg {
    stroke: var(--color-primary); /* Panah jadi pink */
    transform: translateX(5px); /* Panah geser dikit */
}

/* =========================================
   FOOTER STYLE (POPBELA CLONE)
   ========================================= */

.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 60px 0 30px;
    font-family: var(--font-ui);
    font-size: 14px;
    width: 100%;
}

* Link Color di Footer */
.site-footer a {
    color: var(--color-footer-text);
    text-decoration: none;
    transition: opacity 0.2s;
}
.site-footer a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* Layout Wrapper (Kiri vs Kanan) */
.footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 40px;
}

/* --- BAGIAN KIRI --- */
.footer-left {
    flex: 0 0 35%; /* Lebar kolom kiri */
}

.footer-logo { margin-bottom: 25px; }

/* Menu Footer (About, Contact, dll) */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.footer-nav li {
    margin-bottom: 12px;
}

.footer-nav a {
    color: #fff;
    font-weight: 700; /* Bold */
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Social Icons */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.social-label, .download-label {
    font-weight: 600;
    min-width: 80px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons svg {
	stroke: var(--color-footer-text);
}
.social-icons svg:hover { opacity: 0.8; }

/* Download Buttons */
.footer-download {
    display: flex;
    align-items: center;
    gap: 20px;
}

.download-btns {
    display: flex;
    gap: 10px;
}

.download-btns img {
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
}


/* --- BAGIAN KANAN (IDN ECOSYSTEM) --- */
.footer-right {
    flex: 0 0 55%; /* Lebar kolom kanan lebih besar */
}

/* Grid 3 Kolom untuk Link IDN */
.idn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
	text-align: left;
}

.idn-logo-area h2,
.idn-col h4, { 
    /* Asumsi judul menu widget menggunakan h4/widget title */
    color: var(--color-footer-text);
    font-weight: 800;
}

.idn-col h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.idn-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.idn-col ul li {
    margin-bottom: 10px;
}

.idn-col ul li a {
    color: #fff;
    font-weight: 400; /* Regular font */
    opacity: 0.9;
}

.idn-col ul li a:hover {
    opacity: 1;
    text-decoration: underline;
    color: #fff;
}
.idn-col ul li.menu-item-has-children > a {
    /* Jika ingin membuat 'Judul' di dalam menu, gunakan parent item */
    font-weight: 700;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
    pointer-events: none; /* Agar jadi judul mati */
}
.idn-col ul .sub-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}


/* --- COPYRIGHT BOTTOM --- */
.site-info {
    border-top: 1px solid rgba(255,255,255,0.3);
    text-align: center;
    padding-top: 30px;
    font-size: 13px;
    opacity: 0.8;
}
.site-info a { color: #fff; }


/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
    .footer-content-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .footer-left, .footer-right {
        flex: 0 0 100%;
    }
    
    /* Grid kanan jadi 2 kolom di tablet, 1 kolom di HP */
    .idn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .idn-grid {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
    }
    
    .footer-socials, .footer-download {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* =========================================
   WIDGET: PORTRAIT BLOCK (POPMAMA STYLE)
   ========================================= */

.popbela-portrait-widget {
    margin-bottom: 60px;
    width: 100%;
    box-sizing: border-box;
}

/* Header Section */
.portrait-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 25px;
    border-bottom: 1px solid transparent; /* Bersihkan garis default */
}

.portrait-title {
    font-family: var(--font-ui); /* Font Sans-Serif Modern */
    font-size: 20px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
    margin: 0;
	border-bottom: 4px solid var(--color-button);
}

.portrait-see-more {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.portrait-see-more:hover {
    color: var(--color-primary);
}

/* Grid Layout */
.portrait-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom */
    gap: 20px;
}

/* Item Card */
.portrait-item {
    display: flex;
    flex-direction: column;
}

.portrait-link {
    text-decoration: none;
    color: inherit;
}

/* Gambar (Thumbnail) */
.portrait-thumb {
    width: 100%;
    /* Aspek rasio Portrait (Lebih tinggi dari lebar), misal 3:4 atau 4:5 */
    aspect-ratio: 4 / 5; 
    border-radius: 8px; /* Sudut melengkung */
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #f0f0f0;
    position: relative;
}

.portrait-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar memenuhi kotak tanpa gepeng */
    transition: transform 0.4s ease;
}

.portrait-link:hover .portrait-thumb img {
    transform: scale(1.05); /* Efek zoom halus saat hover */
}

/* Judul Artikel Bawah */
.portrait-item-title {
    font-family: var(--font-ui); /* Albert Sans / Lato */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin: 0;
    text-align: center; /* Judul rata tengah seperti di gambar */
    padding: 0 10px; /* Sedikit jarak agar tidak mepet pinggir */
}

.portrait-link:hover .portrait-item-title {
    color: var(--color-primary);
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .portrait-grid {
        grid-template-columns: 1fr; /* Jadi 1 kolom di HP */
    }
    
    .portrait-thumb {
        aspect-ratio: 16/9; /* Di HP mungkin lebih bagus landscape, atau biarkan portrait */
    }
}

/* =========================================
   FLOATING SEARCH (POPMAMA STYLE)
   ========================================= */

.popbela-search-overlay {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Muncul tepat di bawah header putih */
    left: 0;
    width: 100%;
    background-color: var(--color-button);
    padding: 20px 0;
    z-index: 1100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease-out;
}

/* Animasi Muncul Halus */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-container-inner {
    position: relative; /* Agar tombol close bisa diatur posisinya */
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 1. Tombol Close (X) --- */
.search-close-btn {
    position: absolute;
    top: -35px; /* Naik ke atas keluar dari kotak ungu */
    right: 20px;
    background: #fff; /* Latar putih bulat */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.search-close-btn:hover {
    transform: scale(1.1);
    color: #d31e63;
}

/* --- 2. Form Pencarian --- */
.popbela-search-form {
    position: relative;
    width: 100%;
}

/* Input Field (Putih Panjang Rounded) */
.popbela-search-form .search-field {
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 50px; /* Membuat bentuk Pill/Kapsul */
    padding: 15px 50px 15px 25px; /* Padding kanan besar untuk ikon search */
    font-family: var(--font-body);
    font-size: 16px;
    color: #333;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.popbela-search-form .search-field::placeholder {
    color: #999;
}

/* Tombol Submit (Kaca Pembesar di dalam Input) */
.popbela-search-form .search-submit {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
}

.popbela-search-form .search-submit:hover {
    color: var(--color-primary);
}

/* RESPONSIVE MOBILE */
@media (max-width: 600px) {
    .popbela-search-overlay {
        padding: 15px 0;
    }
    
    .search-close-btn {
        top: -45px; /* Sesuaikan posisi X di HP agar tidak ketutupan header */
        right: 10px;
    }
    
    .popbela-search-form .search-field {
        font-size: 14px;
        padding: 12px 45px 12px 20px;
    }
}

/* =========================================
   WIDGET: CATEGORY HEADLINE (1 BIG + 3 SMALL)
   ========================================= */

.popbela-headline-widget {
    margin-bottom: 10px;
}

/* --- 1. Featured (Big Top) --- */
.headline-featured {
    position: relative;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9; /* Rasio gambar lebar */
}

.headline-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.headline-featured:hover img {
    transform: scale(1.05);
}

/* Overlay Gradient (Agar teks putih terbaca) */
.featured-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, transparent 60%);
    pointer-events: none;
}

/* Teks di atas gambar */
.featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
}

.featured-title {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.featured-meta {
    font-size: 12px;
    color: #eee;
    font-family: var(--font-ui);
}

.featured-meta .cat-name {
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

/* --- 2. Sub Grid (3 Small Bottom) --- */
.headline-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 20px;
}

.sub-item {
    display: flex;
    flex-direction: column;
}

.sub-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.sub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sub-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 5px 0;
}

.sub-title a {
    color: var(--color-text-main);
    text-decoration: none;
}

.sub-title a:hover {
    color: var(--color-primary);
}

.sub-meta {
    font-size: 11px;
    line-height: 1.5;
    font-family: var(--font-ui);
}

.sub-date {
    color: var(--color-text-main);
}

.sub-cat {
    color: var(--color-primary); /* Warna ungu/pink untuk kategori bawah */
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}

/* =========================================
   MOBILE SCROLL MODERN (HEADLINE WIDGET)
   ========================================= */

@media (max-width: 600px) {
    
    /* 1. Container Utama Widget */
    .popbela-headline-widget {
        margin-bottom: 40px;
        overflow: hidden; /* Mencegah scrollbar halaman utama muncul */
    }

    /* 2. Featured Image (Gambar Besar) */
    .headline-featured {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 8px; /* Sudut tumpul */
    }

    .featured-title {
        font-size: 18px; /* Sesuaikan ukuran font judul besar */
    }

    /* 3. Area Scroll Bawah (Grid Kecil) */
    .headline-sub-grid {
        display: flex !important;       /* Ubah Grid jadi Flex */
        flex-wrap: nowrap !important;   /* Dilarang turun baris */
        gap: 15px;                      /* Jarak antar kartu */
        
        /* Scroll Horizontal */
        overflow-x: auto;
        padding-bottom: 20px;           /* Ruang bawah */
        
        /* Efek Magnet */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        
        /* Sembunyikan Scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE */
        
        /* Trik agar kartu terakhir tidak kepotong di kanan */
        padding-right: 20px; 
    }

    /* Sembunyikan Scrollbar Chrome/Safari */
    .headline-sub-grid::-webkit-scrollbar {
        display: none;
    }

    /* 4. Kartu Artikel Kecil */
    .sub-item {
        min-width: 240px; /* Lebar tetap kartu */
        max-width: 240px;
        flex-shrink: 0;   /* Jangan menyusut */
        
        /* Titik Berhenti */
        scroll-snap-align: start; 
    }

    /* Gambar di kartu kecil */
    .sub-thumb {
        aspect-ratio: 16/9;
        margin-bottom: 10px;
        border-radius: 6px;
    }
}

/* =========================================
   FIX RESPONSIVE SIDEBAR (MOBILE ONLY)
   Paste ini di baris paling bawah style.css
   ========================================= */

@media (max-width: 991px) {

    /* 1. Ubah Layout Jadi Tumpuk (Atas-Bawah) */
    #content, 
    .site-content {
        display: flex !important;
        flex-wrap: wrap !important;      /* Izinkan elemen turun */
        flex-direction: column !important; /* Ubah arah jadi vertikal */
        gap: 0 !important;               /* Reset gap bawaan */
    }

    /* 2. Paksa Konten & Sidebar Lebar 100% */
    #primary, 
    #secondary {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    /* 3. Atur Ulang Spasi Sidebar */
    #secondary {
        margin-top: 40px !important;      /* Beri jarak dari artikel atasnya */
        padding-left: 0 !important;       /* Hapus padding kiri desktop */
        border-left: none !important;     /* Hapus garis kiri desktop */
        padding-top: 30px;
    }
    
    /* 4. Pastikan Widget di Sidebar Rapi */
    .widget {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* =========================================
   RESPONSIVE POST GRID (MOBILE LIST VIEW)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Ubah Grid jadi 1 Kolom ke Bawah */
    .popbela-post-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* 2. Ubah Kartu jadi Horizontal (Kiri-Kanan) */
    .grid-card {
        flex-direction: row !important; /* Gambar Kiri, Teks Kanan */
        align-items: center; /* Tengah vertikal */
        border-bottom: 1px solid #f5f5f5; /* Garis pemisah antar berita */
        padding-bottom: 20px;
        margin-bottom: 0;
    }

    /* 3. Atur Ukuran Gambar (Thumbnail Kecil) */
    .card-thumbnail {
        width: 110px;        /* Lebar tetap */
        height: 85px;        /* Tinggi tetap */
        flex-shrink: 0;      /* Jangan menyusut */
        margin-bottom: 0 !important; /* Hapus jarak bawah desktop */
        margin-right: 15px;  /* Beri jarak ke teks */
        border-radius: 6px;
    }

    /* Sembunyikan Kategori di atas gambar (opsional, agar tidak sempit) */
    .card-thumbnail .card-category {
        display: none; 
    }

    /* 4. Kecilkan Font Judul */
    .card-title {
        font-size: 16px !important; /* Ukuran font pas untuk HP */
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
    }

    /* 5. Sembunyikan Ringkasan (Excerpt) di HP agar rapi */
    .card-excerpt {
        display: none !important;
    }

    /* 6. Atur Meta Data (Tanggal) */
    .card-meta {
        font-size: 11px;
        color: var(--color-text-main);
    }
}

/* =========================================
   HIDE HERO SECTION ON MOBILE
   ========================================= */

@media (max-width: 768px) {
    .popbela-hero-section {
        display: none !important;
    }
}

/* =========================================
   WIDGET: TAG COLOR BLOCK (BOXED / RAPI)
   ========================================= */

.popbela-tag-block {
    width: 100%; /* Ikuti lebar induknya */
    padding: 15px; /* Jarak dalam agar tidak mepet */
    border-radius: 8px; /* Sudut membulat agar modern */
    margin-bottom: 15px;
    box-sizing: border-box;
}

/* Header Widget */
.tag-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* Garis pemisah tipis transparan */
}

.tag-block-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    /* Garis tebal di bawah judul (seperti CNN) */
    border-bottom: 4px solid currentColor;
    padding-bottom: 15px;
    margin-bottom: -17px; /* Trik agar garis tebal menimpa garis tipis */
}

.tag-see-more {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0.9;
}

.tag-see-more:hover {
    text-decoration: underline;
    opacity: 1;
}

/* Grid Layout */
.tag-block-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 25px;
}

.tag-card a {
    text-decoration: none;
}

.tag-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
}

.tag-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.tag-card:hover .tag-card-thumb img {
    transform: scale(1.05);
}

.tag-card-title {
    font-family: var(--font-ui);
    font-size: 16px; /* Ukuran font pas */
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.tag-card-cat {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .popbela-tag-block {
        width: 100vw !important; /* Lebar penuh layar */
        margin-left: -20px !important; /* Kompensasi padding body */
        padding: 30px 0; /* Jarak atas bawah */
        border-radius: 0; /* Hilangkan radius di HP */
    }
	
	.tag-block-header {
        padding: 0 20px 15px; /* Padding khusus header agar lurus */
    }

    .tag-block-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        padding: 0 10px 0 10px; 
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
	
	/* Sembunyikan Scrollbar di Chrome/Safari/Edge */
    .tag-block-grid::-webkit-scrollbar {
        display: none;
    }
    
    /* Kartu Artikel */
    .tag-card {
        min-width: 260px; /* Lebar Tetap Kartu */
        max-width: 260px;
        
        /* Agar kartu tidak mengecil */
        flex-shrink: 0; 
        
        /* Titik Berhenti Magnet */
        scroll-snap-align: center; /* Kartu akan berhenti pas di tengah layar */
        /* Atau gunakan 'start' jika ingin berhenti di pinggir kiri */
    }
    
    /* Judul di HP */
    .tag-block-title {
        font-size: 20px;
        padding-bottom: 10px;
    }
}

/* =========================================
   IN-ARTICLE ADVERTISEMENT (INTERSCROLLER PARALLAX)
   ========================================= */

/* 1. Container Utama (Jendela) */
.popbela-interscroller-ad {
    position: relative;
    width: auto;
    
    /* Tinggi Jendela: Seberapa lama user harus scroll untuk melewati iklan */
    height: 75vh; /* 75% dari tinggi layar HP */
    
    margin: 50px -20px; /* Full width di mobile (negatif margin) */
    
    /* MAGIC CSS: Ini yang membuat efek "Jendela/Lubang" */
    clip-path: inset(0); 
    z-index: 10;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

/* 2. Wrapper Iklan (Yang Diam/Fixed) */
.ad-wrapper {
    /* Membuat elemen ini "menempel" di layar */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Posisi konten di tengah */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    background-color: #1a1a1a; /* Latar Hitam */
    z-index: -1; /* Agar berada "di belakang" konten website */
}

/* 3. Bar Merah (Scroll Notice) */
.ad-scroll-notice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 0;
    text-align: center;
    z-index: 2;
}

/* Placeholder Iklan */
.ad-placeholder {
    width: 300px;
    height: 250px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: bold;
}

/* =========================================
   DESKTOP: SEMBUNYIKAN IKLAN INTERSCROLLER
   (Hanya tampil di HP)
   ========================================= */

@media (min-width: 992px) {
    .popbela-interscroller-ad {
        display: none !important; /* Wajib hidden di layar besar */
    }
}

/* =========================================
   SHARE BOX & GOOGLE NEWS
   ========================================= */

/* 1. Kotak Share (Abu-abu Muda) */
.popbela-share-container {
    background-color: var(--bg-widget); /* Warna abu-abu muda */
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between; /* Ikon menyebar rata */
    align-items: center;
    margin: 30px 0;
}

.share-btn {
    color: #666; /* Warna Ikon Abu Tua */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.share-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2; /* Ketebalan garis ikon */
}

/* Efek Hover: Berubah Warna Sesuai Brand */
.share-btn:hover { transform: translateY(-2px); }
.share-btn[aria-label*="X"]:hover { color: #000; }
.share-btn[aria-label*="Facebook"]:hover { color: #1877F2; }
.share-btn[aria-label*="Telegram"]:hover { color: #0088cc; }
.share-btn[aria-label*="WhatsApp"]:hover { color: #25D366; }
.share-btn[aria-label*="Copy"]:hover { color: var(--color-primary); }
.share-btn[aria-label*="Comments"]:hover { color: var(--color-primary); }


/* 2. Google News Banner */
.popbela-gnews-container {
    text-align: center;
    margin-bottom: 40px;
}

.gnews-link {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-main);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 50px; /* Opsional: efek tombol */
    transition: background 0.2s;
}

.gnews-link:hover {
    background-color: #f9f9f9;
    text-decoration: none;
}

/* Responsif Mobile */
@media (max-width: 480px) {
    .popbela-share-container {
        padding: 12px 10px;
    }
    .share-btn svg {
        width: 20px;
        height: 20px;
    }
    .gnews-link {
        font-size: 14px;
    }
}

/* =========================================
   INLINE RELATED POSTS (BACA JUGA)
   ========================================= */

.popbela-inline-related {
    margin: 30px 0;
    width: 100%;
    clear: both;
}

/* Judul "Baca Juga" */
.inline-related-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 800; /* Bold Tebal */
    color: var(--color-primary); /* Warna Oranye Khas */
    margin: 0 0 10px 0;
    text-transform: capitalize;
}

/* Container Abu-abu */
.inline-related-grid {
    background-color: var(--color-bg-light); /* Abu-abu muda */
    padding: 20px;
    border-top: 3px solid var(--border-color); /* Garis hiasan atas (opsional) */
    
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 0; /* Gap 0 karena kita pakai border manual */
}

/* Item Artikel */
.inline-related-item {
    padding: 0 20px;
    border-right: 2px solid var(--border-color); /* Garis pemisah vertikal */
    display: flex;
    align-items: flex-start;
}

/* Hapus garis di item terakhir */
.inline-related-item:last-child {
    border-right: none;
}
.inline-related-item:first-child {
    padding-left: 0;
}
.inline-related-item:nth-child(3) {
    padding-right: 0;
}

/* Link Judul */
.inline-related-item a {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700; /* Bold */
    line-height: 1.4;
    color: #000;
    text-decoration: none;
    
    /* Batasi teks jadi 3 baris lalu titik-titik (...) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inline-related-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .inline-related-grid {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
        gap: 15px;
    }
    
    .inline-related-item {
        border-right: none; /* Hapus garis vertikal */
        border-bottom: 1px solid #ddd; /* Ganti jadi garis horizontal */
        padding: 0 0 15px 0;
    }
    
    .inline-related-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* =========================================
   WIDGET: VIDEO SECTION (LIPUTAN6 STYLE)
   ========================================= */

.popbela-video-section {
    margin: 50px 0;
    width: 100%;
}

/* --- FEATURED (HITAM) --- */
.video-featured-box {
    background-color: #000; /* Latar Hitam */
    color: #fff;
    padding: 40px 0;
    width: 100vw;
    position: relative;
    left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; /* Hack Full Width */
}

.v-featured-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
}

.v-player {
    flex: 1.5; /* Lebar 60% */
    aspect-ratio: 16/9;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.v-player iframe, .v-player img {
    width: 100%; height: 100%; object-fit: cover;
}

.v-info {
    flex: 1; /* Lebar 40% */
}

.v-label {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 300; /* Tipis */
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.v-title {
    font-family: var(--font-ui);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 25px;
    color: #fff;
}

.v-btn {
    display: inline-block;
    background: var(--bg-widget);
    color: #000;
    font-family: var(--font-ui);
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s;
}

.v-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* --- SUB GRID (BAWAH) --- */
.video-sub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Kolom */
    gap: 20px;
    margin-top: 30px;
}

.v-sub-thumb {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.v-sub-thumb img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;
}

.v-sub-item:hover .v-sub-thumb img { transform: scale(1.05); }

.play-icon {
    position: absolute; bottom: 10px; left: 10px;
    width: 24px; height: 24px; background: rgba(0,0,0,0.7);
    color: #fff; font-size: 10px; display: flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
}

.v-sub-title {
    font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 5px; color: #000;
}
.v-sub-date { font-size: 11px; color: var(--color-text-main); }

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .v-featured-wrapper { flex-direction: column; gap: 20px; }
    .v-player { width: 100%; }
    .v-info { text-align: left; width: 100%; }
    .v-title { font-size: 20px; }
    
    .video-sub-grid {
        display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px;
    }
    .v-sub-item { min-width: 200px; }
}

/* =========================================
   SINGLE VIDEO PAGE STYLE
   ========================================= */

/* 1. Theater Section (Hitam Full) */
.video-theater-section {
    background-color: #000;
    padding: 40px 0;
    margin-bottom: 40px;
    width: 100%;
}

/* 2. Responsive Video Wrapper (16:9 Ratio) */
.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #111;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.video-player-wrapper iframe,
.video-player-wrapper video,
.video-player-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Breadcrumb Video */
.video-breadcrumb {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}
.video-breadcrumb a { color: var(--color-primary); text-decoration: none; }

/* 4. Related Video Icons */
.play-icon-small {
    position: absolute;
    bottom: 5px; left: 5px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .video-theater-section {
        padding: 0; /* Di HP mepetkan saja */
        margin-bottom: 20px;
    }
    
    .video-player-wrapper {
        border-radius: 0; /* Di HP kotak penuh */
    }
}

/* =========================================
   RELATED VIDEOS STYLE
   ========================================= */

.related-videos-box {
    margin-top: 40px;
    padding-top: 30px;
}

/* Ikon Play di tengah Thumbnail */
.related-thumb {
    position: relative; /* Wajib relative agar ikon bisa absolute di dalamnya */
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Trik rata tengah */
    background-color: rgba(0, 0, 0, 0.6); /* Lingkaran hitam transparan */
    border: 2px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Agar klik tembus ke link gambar */
    transition: all 0.3s ease;
}

/* Efek Hover pada Video Card */
.video-card:hover .video-play-icon {
    background-color: var(--color-primary); /* Berubah jadi Pink saat hover */
    border-color: var(--color-primary);
    transform: translate(-50%, -50%) scale(1.1); /* Sedikit membesar */
}

.video-card:hover .related-thumb img {
    transform: scale(1.05); /* Zoom in gambar */
    opacity: 0.9;
}

/* =========================================
   AFTER ARTICLE WIDGET AREA
   ========================================= */

.popbela-after-article-area {
    margin-top: 5px;
    padding-top: 10px;
    width: 100%;
}

/* Penyesuaian Judul Widget di area ini */
.popbela-after-article-area .widget-title,
.popbela-after-article-area .block-title {
    font-size: 20px;
    margin-bottom: 20px;
    display: block;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

/* Jika user memasukkan Widget "Popbela Homepage Block" ke sini,
   kita sesuaikan agar gridnya pas di layout artikel */
.popbela-after-article-area .block-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Paksa jadi 2 kolom grid */
    gap: 30px;
}

/* Reset item di dalamnya */
.popbela-after-article-area .block-item {
    flex-direction: column; /* Gambar atas, teks bawah */
}

.popbela-after-article-area .block-thumb {
    width: 100%;
    flex: none;
    margin-bottom: 15px;
}

.popbela-after-article-area .block-item-title {
    font-size: 16px;
}

/* Responsif Mobile */
@media (max-width: 600px) {
    .popbela-after-article-area .block-list {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
    }
    
    .popbela-after-article-area .block-item {
        flex-direction: row; /* Kembali ke kiri-kanan di HP agar hemat tempat */
        align-items: center;
    }
    
    .popbela-after-article-area .block-thumb {
        width: 100px;
        height: 75px;
        margin-bottom: 0;
    }
}

/* =========================================
   WIDGET: BANNER ADS
   ========================================= */

.popbela-banner-widget {
    text-align: center;
    margin-bottom: 30px;
    clear: both;
    width: 100%;
}

/* Gambar Banner */
.banner-img {
    max-width: 100%; /* Agar tidak melebihi container */
    height: auto;
    display: inline-block; /* Agar bisa ditengah */
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: opacity 0.2s;
}

/* Efek Hover */
.banner-link:hover .banner-img {
    opacity: 0.9;
}

/* Label Iklan Kecil */
.ad-label-text {
    font-family: var(--font-ui);
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-align: center;
}

/* =========================================
   WIDGET: CATEGORY SECTION (SPLIT 2 COLUMNS)
   ========================================= */

.popbela-cat-section {
    margin-bottom: 50px;
    width: 100%;
}

/* Header (Judul & Link) */
.cat-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    position: relative;
}

.cat-section-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-main);
}

.title-underline {
    position: absolute; bottom: -1px; left: 0;
    width: 60px; height: 4px; background-color: var(--color-primary);
}

.cat-section-more {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; color: var(--color-text-main);
    text-decoration: none; display: flex; align-items: center; text-transform: uppercase;
}
.cat-section-more:hover { color: var(--color-primary); }

/* --- CONTAINER UTAMA (FLEX) --- */
.cat-section-body {
    display: flex;
    gap: 15px; /* Jarak antara Kiri dan Kanan */
}

/* --- KOLOM KIRI (60%) --- */
.cat-col-left {
    flex: 0 0 60%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Hero Item (Besar) */
.cat-hero-item {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
}

.hero-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.cat-hero-item:hover .hero-img img { transform: scale(1.05); }

.hero-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    pointer-events: none;
}

.hero-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px;
    z-index: 2;
    color: #fff;
}

.hero-title {
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 700; margin: 2px 0 2px;
    color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.item-tag {
    background: var(--color-primary); color: #fff;
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    display: inline-block;
}

/* --- KOLOM KANAN (40%) --- */
.cat-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Small List Items (Dipakai di kiri bawah & kanan) */
.cat-small-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.cat-small-item:last-child { border-bottom: none; padding-bottom: 0; }

.small-thumb {
    flex: 0 0 100px;
    width: 100px; height: 100px;
    border-radius: 6px; overflow: hidden;
}
.small-thumb img { width: 100%; height: 100%; object-fit: cover; }

.small-content { flex: 1; }

.small-title {
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 5px;
}
.small-title a { color: var(--color-text-main); text-decoration: none; }
.small-title a:hover { color: var(--color-primary); }

.item-tag-small {
    font-size: 9px; font-weight: 700; color: var(--color-primary);
    text-transform: uppercase; display: block; margin-bottom: 3px;
}

.item-date { font-size: 11px; color: var(--color-text-main); }
.hero-info .item-date { color: var(--color-text-main); } /* Tanggal di Hero warna putih */


/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .cat-section-body {
        flex-direction: column; /* Tumpuk ke bawah */
        gap: 20px;
    }
    .cat-col-left, .cat-col-right {
        flex: 0 0 100%; max-width: 100%;
    }
    
    .cat-hero-item { height: 200px; }
    .hero-title { font-size: 18px; }
}

/* =========================================
   LIMIT JUDUL (ELLIPSIS ...)
   Agar layout tidak berantakan karena judul panjang
   ========================================= */

/* 1. Batasi Judul List Kecil (Maksimal 2 Baris) */
.small-title a,         /* Widget Category Section */
.sport-list-title a,    /* Widget Sport Kanan */
.sub-hero-title,        /* Widget Sport Kiri Bawah */
.sub-title a,           /* Widget Headline Bawah */
.cat-item-title a,      /* Widget Sidebar */
.block-item-title a,    /* Widget Homepage Block */
.trending-title,        /* Widget Trending */
.related-title a        /* Related Post */
{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Jumlah baris maksimal */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Pastikan tinggi baris konsisten */
    line-height: 1.4; 
    max-height: 2.8em; /* 1.4 x 2 baris = 2.8em */
}

/* 2. Batasi Judul Besar/Hero (Maksimal 3 Baris) */
.hero-title,            /* Widget Category Section Hero */
.sport-feat-title,      /* Widget Sport Hero */
.featured-title,        /* Widget Headline Hero */
.entry-title            /* Judul Single Post (Opsional) */
{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Jumlah baris maksimal untuk judul besar */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Reset untuk Mobile (Opsional) */
@media (max-width: 600px) {
    /* Di HP mungkin kita ingin judul lebih pendek atau panjang */
    .hero-title,
    .sport-feat-title {
        -webkit-line-clamp: 2; /* Di HP judul besar cukup 2 baris */
    }
}

/* =========================================
   LIMIT JUDUL WIDGET TAG (COLOR BLOCK)
   ========================================= */

.tag-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Tambahkan ... di akhir */
    
    /* Menjaga konsistensi tinggi */
    line-height: 1.4;
    max-height: 2.8em; /* 1.4em x 2 baris = 2.8em */
    margin-bottom: 10px; /* Jarak ke kategori di bawahnya */
}

/* Opsional: Jika ingin font judul sedikit lebih kecil agar muat lebih banyak teks */
@media (max-width: 768px) {
    .tag-card-title {
        font-size: 16px; /* Ukuran pas untuk mobile */
    }
}

/* =========================================
   NEWS TICKER (RUNNING TEXT)
   ========================================= */

.popbela-ticker-wrap {
    background-color: var(--bg-widget); /* Warna latar abu-abu muda */
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px; /* Jarak ke konten bawahnya */
}

.ticker-container {
    display: flex;
    align-items: center;
    height: 40px; /* Tinggi bar */
    overflow: hidden;
}

/* Label Ungu (HEADLINE HARI INI) */
.ticker-label {
    background-color: var(--color-button);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 2; /* Agar berada di atas teks berjalan */
    margin-right: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Area Animasi */
.ticker-content {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent); /* Efek fade di pinggir */
}

.ticker-move {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; /* Mulai dari luar layar kanan */
    animation: ticker-scroll 80s linear infinite; /* Kecepatan animasi */
}

.ticker-move:hover {
    animation-play-state: paused; /* Berhenti saat mouse hover */
}

/* Item Berita */
.ticker-item {
    display: inline-block;
    padding-right: 50px; /* Jarak antar berita */
    vertical-align: middle;
}

.ticker-item a {
    color: #333;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.ticker-item a:hover {
    color: var(--color-primary); /* Berubah pink saat hover */
    text-decoration: underline;
}

/* Definisi Animasi */
@keyframes ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Responsif Mobile */
@media (max-width: 600px) {
    .ticker-label {
        font-size: 10px;
        padding: 4px 8px;
        margin-right: 10px;
    }
    
    .ticker-item a {
        font-size: 13px;
    }
}
/* =========================================
   WIDGET: CATEGORY POSTS V2 (LIST STYLE)
   ========================================= */

/* Header Widget (Judul Kiri - Link Kanan) */
.popbela-cat-header {
    display: flex;
    align-items: baseline; /* Rata garis bawah teks */
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color); /* Garis pemisah tipis */
    padding-bottom: 10px;
}

.popbela-cat-header .widget-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800; /* Tebal */
    color: #000;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.popbela-cat-header .see-more {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-primary); /* Warna Pink */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

.popbela-cat-header .see-more:hover {
    text-decoration: underline;
}

/* List Artikel */
.popbela-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popbela-cat-item {
    display: flex;
    gap: 15px; /* Jarak gambar ke teks */
    margin-bottom: 20px;
    align-items: flex-start;
    padding-bottom: 15px;
}

.popbela-cat-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Thumbnail Kiri */
.cat-item-thumb {
    flex: 0 0 100px; /* Lebar tetap 100px */
    width: 100px;
    height: 75px;
    overflow: hidden;
    border-radius: 6px; /* Sudut tumpul */
    background-color: #f0f0f0;
}

.cat-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Efek Zoom saat Hover */
.popbela-cat-item:hover .cat-item-thumb img {
    transform: scale(1.1);
}

/* Konten Kanan */
.cat-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cat-item-title {
    margin: 0 0 5px 0;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.cat-item-title a {
    color: #222;
    text-decoration: none;
    
    /* Batasi judul 3 baris agar rapi */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-item-title a:hover {
    color: var(--color-primary);
}

/* Meta Data */
.cat-item-meta {
    font-size: 11px;
    line-height: 1.4;
    font-family: var(--font-ui);
}

.cat-date {
    color: var(--color-text-main);
    display: block;
    margin-bottom: 2px;
}

.cat-name {
    color: var(--color-primary); /* Pink */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* =========================================
   TOMBOL INDEX BERITA (PAGINATION)
   ========================================= */

.popbela-index-btn-wrapper {
    margin: 40px 0 60px;
    text-align: center; /* Posisi tengah */
    width: 100%;
}

/* Styling Tombol */
.popbela-index-btn-wrapper a {
    display: inline-block;
    background-color: var(--bg-widget); /* Latar Putih */
    color: var(--color-primary); /* Teks Pink */
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700; /* Tebal */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    
    /* Dimensi Tombol */
    padding: 12px 40px;
    min-width: 200px;
    
    /* Border & Shape */
    border: 2px solid var(--color-primary); /* Garis Pink */
    border-radius: 50px; /* Bentuk Kapsul */
    
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(215, 39, 114, 0.1);
}

/* Efek Hover (Saat mouse menyentuh) */
.popbela-index-btn-wrapper a:hover {
    background-color: var(--color-primary); /* Jadi Pink Penuh */
    color: #fff; /* Teks jadi putih */
    transform: translateY(-3px); /* Naik sedikit */
    box-shadow: 0 6px 15px rgba(215, 39, 114, 0.3);
}

/* Tanda Panah (Opsional, menggunakan CSS Pseudo-element) */
.popbela-index-btn-wrapper a::after {
    content: '\2192'; /* Kode panah kanan */
    margin-left: 8px;
    display: inline-block;
    transition: margin 0.2s;
}

.popbela-index-btn-wrapper a:hover::after {
    margin-left: 12px; /* Panah bergerak saat hover */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .popbela-index-btn-wrapper a {
        width: 100%; /* Tombol lebar penuh di HP */
        display: block;
    }
}

/* =========================================
   LAMAN INDEX BERITA (FILTER)
   ========================================= */

.popbela-index-filter {
    background-color: var(--bg-widget); /* Abu-abu kebiruan muda */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.popbela-index-filter form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Baris 1: Tanggal, Bulan, Tahun */
.filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

/* Baris 2: Kategori & Tombol */
.filter-row-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Kategori lebih lebar */
    gap: 15px;
}

/* Styling Input Select */
.popbela-index-filter select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-family: var(--font-ui);
    font-size: 14px;
    color: #333;
    cursor: pointer;
    appearance: none; /* Hilangkan panah bawaan browser jelek */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
}

.popbela-index-filter select:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Tombol Tampilkan */
.filter-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
}

.filter-btn:hover {
    background-color: var(--color-primary-dark);
}

/* Pesan No Result */
.no-results {
    background: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ffeeba;
}

/* Pagination Khusus Index */
.index-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.index-pagination .page-numbers {
    padding: 8px 12px;
    background: #eee;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.index-pagination .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
}

/* Responsif Mobile */
@media (max-width: 600px) {
    .filter-row {
        grid-template-columns: 1fr; /* Tumpuk tanggal/bulan/tahun */
        gap: 10px;
    }
    
    .filter-row-bottom {
        grid-template-columns: 1fr; /* Tumpuk kategori & tombol */
        gap: 10px;
    }
}

/* =========================================
   INDEX LIST STYLE (TEXT ONLY)
   ========================================= */

.popbela-index-list {
    margin-top: 20px;
}

.news-text-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-text-item {
    border-bottom: 1px solid var(--border-color); /* Garis pemisah */
    padding: 15px 0;
    margin-bottom: 0;
}

/* Hapus border di item terakhir */
.news-text-item:last-child {
    border-bottom: none;
}

/* Baris Meta: Kategori | Tanggal */
.news-text-meta {
    font-family: var(--font-ui);
    font-size: 12px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.news-cat-link {
    font-weight: 700;
    color: var(--color-primary); /* Warna Pink/Merah */
    text-transform: capitalize;
    text-decoration: none;
    margin-right: 8px;
}

.news-cat-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

.news-separator {
    color: #ccc;
    margin-right: 8px;
}

.news-date {
    color: #777; /* Warna Abu-abu */
}

/* Baris Judul */
.news-text-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    color: #000;
}

.news-text-title a {
    color: #212121;
    text-decoration: none;
    transition: color 0.2s;
}

.news-text-title a:hover {
    color: var(--color-primary);
}

/* Responsif Mobile */
@media (max-width: 600px) {
    .news-text-title {
        font-size: 16px; /* Font judul lebih kecil di HP */
    }
    
    .news-text-meta {
        font-size: 11px;
    }
    
    .news-text-item {
        padding: 12px 0;
    }
}

/* =========================================
   WIDGET: POPULAR BLUE (GAMBAR STYLE)
   ========================================= */

.popbela-popular-box {
    background-color: var(--bg-widget); /* Biru Sangat Muda */
    padding: 20px;
    border-radius: 8px; /* Sudut tumpul container */
    margin-bottom: 40px;
}

/* Header Tombol Biru */
.pop-blue-header {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color); /* Garis tipis di bawah header */
    padding-bottom: 15px;
}

.pop-blue-title {
    display: inline-block;
    background-color: var(--color-button); /* Biru sesuai gambar */
    color: #fff;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 800;
    padding: 8px 15px;
    border-radius: 4px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(83, 109, 189, 0.3);
}

/* List Item */
.pop-blue-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pop-blue-item {
    display: flex;
    align-items: center; /* Tengah secara vertikal */
    margin-bottom: 20px;
}

.pop-blue-item:last-child {
    margin-bottom: 0;
}

/* Angka (1, 2, 3) */
.pop-num {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary); /* Biru Tua Gelap */
    width: 30px;
    text-align: left;
    flex-shrink: 0; /* Jangan mengecil */
    margin-right: 10px;
}

/* Wrapper Link (Gambar + Teks) */
.pop-link-wrap {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* Thumbnail Rounded */
.pop-thumb {
    width: 100px;
    height: 65px;
    border-radius: 8px; /* Rounded corner gambar */
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 15px;
    background: #ddd;
}

.pop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.pop-link-wrap:hover .pop-thumb img {
    transform: scale(1.1);
}

/* Konten Teks */
.pop-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pop-cat {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-primary); /* Biru teks kategori */
    margin-bottom: 5px;
}

.pop-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: #212121;
    margin: 0;
    line-height: 1.4;
    
    /* Batasi 3 baris */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pop-link-wrap:hover .pop-title {
    color: var(--color-primary);
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .popbela-popular-box {
        padding: 15px; /* Padding lebih kecil di HP */
        margin-left: -20px; /* Full width di HP */
        width: calc(100% + 40px);
        border-radius: 0;
    }
    
    .pop-thumb {
        width: 80px; /* Gambar lebih kecil di HP */
        height: 60px;
    }
}

/* =========================================
   404 PAGE STYLE
   ========================================= */

/* Layout Tengah */
.error-404 {
    text-align: center;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

.error-content {
    max-width: 600px;
    margin: 0 auto;
}

/* Angka 404 Besar */
.error-code {
    font-family: var(--font-ui);
    font-size: 150px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary); /* Warna Pink */
    margin: 0;
    opacity: 0.2; /* Efek transparan */
}

/* Judul Pesan */
.error-title {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 700;
    color: #212121;
    margin: -40px 0 15px; /* Tarik ke atas menimpa angka 404 */
    position: relative;
    z-index: 2;
}

.error-desc {
    color: #777;
    font-size: 16px;
    margin-bottom: 30px;
}

/* Form Pencarian di 404 */
.error-search {
    margin-bottom: 30px;
}
.error-search .search-form {
    display: flex;
    justify-content: center;
}
.error-search input[type="search"] {
    width: 70%;
    border-radius: 50px 0 0 50px;
    border: 1px solid #ddd;
    padding: 12px 20px;
}
.error-search button.search-submit {
    border-radius: 0 50px 50px 0;
    padding: 12px 25px;
    background-color: var(--color-primary);
}

/* Tombol Home */
.btn-home {
    display: inline-block;
    padding: 10px 30px;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-home:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Bagian Rekomendasi */
.rec-title {
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .error-code { font-size: 100px; }
    .error-title { font-size: 24px; margin-top: -20px; }
    .error-search input[type="search"] { width: 100%; }
}

/* =========================================
   BADGE KONTEN SPONSOR (ANIMASI EMAS PREMIUM)
   ========================================= */

/* 1. Definisikan Keyframes untuk gerakan kilauan */
@keyframes shineGold {
    0% {
        background-position: 0% center;
    }
    100% {
        /* Gerakkan background sejauh 200% agar looping mulus */
        background-position: 200% center; 
    }
}

.popbela-badge-sponsored {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 900; /* Lebih tebal agar tegas */
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 50px; /* Bentuk kapsul agar lebih modern */
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: middle;

    /* --- STYLE EMAS PREMIUM --- */
    
    /* Warna Teks Putih dengan bayangan tipis agar terbaca di atas emas */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); 

    /* Membuat Background Gradient Emas */
    /* Kita buat gradient yang lebih lebar dari kotaknya (200%) */
    /* Urutan warna: Emas Gelap -> Kilau Putih -> Emas Gelap */
    background: linear-gradient(
        110deg, 
        #b38728 20%,  /* Emas Gelap (Tembaga) */
        #fdfc47 45%,  /* Kuning Terang (Highlight) */
        #ffffff 50%,  /* Putih Kilau Pusat */
        #fdfc47 55%,  /* Kuning Terang (Highlight) */
        #b38728 80%   /* Emas Gelap (Tembaga) */
    );
    
    /* Ukuran background 2x lipat lebar elemen */
    background-size: 200% auto;
    
    /* Terapkan Animasi Bergerak */
    /* shineGold = nama animasi, 3s = durasi, linear = kecepatan konstan, infinite = selamanya */
    animation: shineGold 3s linear infinite;
}

/* Penyesuaian kecil di halaman Single Post */
.popbela-single-header .popbela-badge-sponsored {
    font-size: 11px;
    margin-top: 5px;
}

/* =========================================
   WIDGET: VIDEO STORIES (DARK THEME)
   ========================================= */

.popbela-stories-section {
    background-color: var(--color-button); /* Warna coklat gelap sesuai gambar */
    padding: 40px 0;
    width: 100vw;
    position: relative;
    left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    margin-bottom: -70px;
}

/* Header */
.stories-header {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.stories-title {
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0;
}

/* Carousel Wrapper */
.stories-scroll-wrapper {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    
    /* Hide Scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.stories-scroll-wrapper::-webkit-scrollbar { display: none; }

/* Card Item */
.story-card {
    flex: 0 0 180px; /* Lebar kartu */
    width: 180px;
    text-decoration: none;
    scroll-snap-align: start;
    position: relative;
}

.story-thumb {
    width: 100%;
    aspect-ratio: 9/16; /* Rasio Vertikal Story */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.story-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s;
}
.story-card:hover .story-thumb img { transform: scale(1.05); }

/* Gradient Overlay */
.story-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent 50%, rgba(0,0,0,0.8));
}

/* Badge Durasi (Pojok Kanan Atas) */
.story-duration {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex; align-items: center; gap: 4px;
}

/* Judul */
.story-item-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    
    /* Limit 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer Button */
.stories-footer {
    text-align: center;
    margin-top: 30px;
}

.btn-stories {
    display: inline-block;
    background: #dfaaa9; /* Warna pink pastel sesuai gambar */
    color: #2c1e1e;
    padding: 10px 30px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.3s;
}
.btn-stories:hover {
    background: #fff;
}

/* =========================================
   SINGLE STORY (HYBRID MP4 / TIKTOK)
   ========================================= */

.story-fullscreen-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #111; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}

.story-close-btn {
    position: absolute; top: 20px; right: 20px;
    color: #fff; background: rgba(255,255,255,0.2);
    border-radius: 50%; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    z-index: 200; cursor: pointer;
}

/* Container HP */
.story-mobile-container {
    width: 100%; max-width: 400px; height: 100%; max-height: 850px;
    background: #000; position: relative; overflow: hidden;
    border-radius: 16px; box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* --- HTML5 MP4 PLAYER STYLE (CLEAN) --- */
.story-clean-player {
    width: 100%; height: 100%; position: relative;
}

.html5-video {
    width: 100%; height: 100%; object-fit: cover; /* Full Screen tanpa bar hitam */
    display: block;
}

/* Overlay Judul di dalam Video */
.story-overlay-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff; pointer-events: none;
}

.story-cat-label {
    font-size: 10px; font-weight: 800; color: var(--color-primary);
    text-transform: uppercase; letter-spacing: 1px;
}

.story-video-title {
    font-size: 16px; font-weight: 700; line-height: 1.4; margin: 5px 0;
    font-family: var(--font-ui);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.story-video-date { font-size: 11px; opacity: 0.8; }

/* Tombol Play Tengah */
.video-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0.8; transition: opacity 0.2s;
}

/* Responsif Mobile */
@media (max-width: 600px) {
    .story-mobile-container {
        max-width: 100%; border-radius: 0; height: 100vh;
    }
    .story-close-btn { top: 15px; right: 15px; }
}

/* --- YOUTUBE SHORTS SPECIFIC --- */
.youtube-mode iframe {
    /* Trik Zoom sedikit untuk YouTube agar menutupi garis hitam tipis di pinggir */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05); /* Zoom 5% */
    transform-origin: center center;
}

/* Overlay di YouTube agar tidak menutupi kontrol klik tapi tetap terlihat */
.youtube-mode .story-overlay-info {
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding-bottom: 30px;
}

/* =========================================
   POLLING WIDGET FIX (FINAL RAPI)
   ========================================= */

.popbela-poll-widget {
    margin-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Header */
.poll-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 990px; margin: 0 auto 20px;
	border-bottom: 2px solid var(--border-color);
}

.poll-title-head {
    font-size: 18px; font-weight: 800; color: #000;
    display: flex; align-items: center; gap: 10px; margin: 0;
}
.poll-bar { width: 4px; height: 24px; background: #d32f2f; display: inline-block; border-radius: 2px; }
.poll-see-more { font-size: 12px; color: #00848c; text-decoration: none; font-weight: 600; }

/* Grid Container */
.poll-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 990px; margin: 0 auto;
}

/* Card Styling */
.poll-card {
    background: var(--bg-widget);
    border-radius: 8px;
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%; /* Agar tinggi kartu seragam */
}

.poll-thumb {
    width: 100%; height: 160px; background: #eee;
}
.poll-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}

.poll-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Judul (Link) */
.poll-question {
    font-size: 15px; font-weight: 700; line-height: 1.4; 
    margin: 0 0 10px; color: var(--color-text-main);
    flex-grow: 1; /* Dorong konten bawah */
}
.poll-question a { color: var(--color-text-main); text-decoration: none; }
.poll-question a:hover { color: #00848c; }

.poll-meta-top {
    display: flex; align-items: center; gap: 5px; margin-bottom: 15px;
}
.poll-author { font-size: 11px; color: var(--color-primary); font-weight: 700; }
.poll-check { font-size: 14px; color: var(--color-primary); }


/* --- TOMBOL AKSI (BAGIAN PENTING) --- */
.poll-actions {
    display: flex;
    flex-direction: column; /* KUNCI: Ubah arah jadi kolom */
    gap: 10px; /* Jarak antar tombol atas-bawah */
    width: 100%;
    margin-top: 15px;
}

/* Tombol */
.poll-btn {
    position: relative;
    width: 100%; /* Lebar Penuh */
    min-height: 44px; /* Tinggi minimal agar nyaman diklik */
    padding: 8px 15px;
    
    background: var(--bg-widget);
    border: 1px solid #00848c;
    color: #00848c;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    
    /* Tengahkan isi */
    display: flex;
    align-items: center;
    justify-content: center;
}

.poll-btn:hover {
    background: #e0f7fa;
}

/* Teks Jawaban */
.btn-text {
    z-index: 2;
    display: block;
    white-space: normal; /* Izinkan turun baris */
    line-height: 1.2;
    text-align: center;
}

/* Footer */
.poll-footer {
    font-size: 11px; color: #999;
    display: flex; gap: 10px; margin-top: 5px;
}


/* --- MODE SETELAH VOTE (HASIL) --- */

/* 1. Ubah gaya tombol */
.has-voted .poll-btn {
    border-color: #ddd;
    background-color: #f5f5f5;
    color: #333;
    pointer-events: none;
    justify-content: space-between; 
}

/* 2. Bar Persentase (Latar Hijau) */
.btn-percent {
    z-index: 2;
    display: none;
    font-weight: 800;
    font-size: 14px;
}

/* Bar Background */
.btn-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: rgba(0, 132, 140, 0.3);
    z-index: 1;
    width: 0;
    transition: width 0.6s ease;
    display: none;
}

.has-voted .poll-btn {
    border-color: #ccc;
    background-color: #f9f9f9;
    pointer-events: none;
    color: #333;
    min-height: 44px;
}

.has-voted .btn-text {
    display: none !important; /* Sembunyikan Teks */
}

/* 3. MUNCULKAN Persen (Di Tengah) */
.has-voted .btn-percent {
    display: block !important;
}
.has-voted .btn-bar {
    display: block;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .popbela-poll-widget {
        width: 100vw; margin-left: -20px; margin-right: -20px; padding: 30px 0;
    }
    .poll-header { padding: 0 20px; }
    
    .poll-grid {
        display: flex; overflow-x: auto; padding-bottom: 15px;
        scroll-snap-type: x mandatory; gap: 15px;
        padding: 0 20px 20px;
        scrollbar-width: none;
    }
    .poll-grid::-webkit-scrollbar { display: none; }
    
    .poll-card {
        min-width: 260px; max-width: 260px; scroll-snap-align: center; flex-shrink: 0;
    }
    .poll-thumb img { height: 100%; }
}

/* =========================================
   SINGLE POLLING PAGE
   ========================================= */

.full-width-narrow {
    max-width: 800px; /* Batasi lebar agar fokus */
    margin: 0 auto;
    float: none !important; /* Reset float sidebar */
}

.poll-single-header {
    text-align: center;
    margin-bottom: 30px;
}

.poll-meta-date {
    color: #999;
    font-size: 12px;
    margin-top: 5px;
}

.poll-single-thumb {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.poll-single-thumb img { width: 100%; height: auto; }

/* Area Interaksi */
.poll-interaction-area {
    background: var(--bg-widget);
    border-radius: 16px;
    padding: 10px;
    text-align: center;
}

/* 1. Tombol */
.poll-instruction {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--color-text-main);
}

.poll-single-btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 15px;
    padding: 15px 20px;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
}

.poll-single-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fff0f5;
}

/* 2. Grafik Hasil */
.poll-chart-wrapper {
    animation: fadeIn 0.5s;
}

.chart-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #212121;
}

.chart-container {
    position: relative;
    height: 250px; /* Tinggi grafik */
    width: 100%;
    margin-bottom: 20px;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-item .dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block;
}

/* Animasi */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 600px) {
    .poll-interaction-area { padding: 20px; }
    .chart-container { height: 200px; }
}

/* =========================================
   SHARE BUTTONS (POLLING VERSION)
   ========================================= */

.poll-share-section {
    text-align: center;
    margin-top: 30px;
}

.share-invite {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Modifikasi container share khusus di halaman polling */
.poll-share-container {
    display: inline-flex; /* Agar kotaknya mengikuti isi, bukan full width */
    justify-content: center;
    gap: 20px;
    background: var(--bg-widget);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 10px 30px;
    border-radius: 50px; /* Bentuk kapsul */
}

.poll-share-container .share-btn {
    padding: 8px;
    border-radius: 50%;
    background: #f5f5f5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.poll-share-container .share-btn:hover {
    transform: scale(1.1);
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* GRID POLLING 5 KOLOM */
.popbela-poll-archive .poll-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Kolom Desktop */
    gap: 20px;
    width: 100%;
}

/* Responsif Tablet (3 Kolom) */
@media (max-width: 1200px) {
    .popbela-poll-archive .poll-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsif Mobile (1 Kolom) */
@media (max-width: 768px) {
    .popbela-poll-archive .poll-grid {
        display: flex;
        flex-direction: column;
    }
    
    /* Container Grafik di HP */
    .popbela-leaderboard-container {
        height: 300px; /* Sesuaikan tinggi grafik di HP */
        padding: 10px;
    }
}

/* =========================================
   HOMEPAGE BOTTOM SECTION (SPLIT LAYOUT)
   ========================================= */

.popbela-bottom-area {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px; /* Jarak antar kolom */
    margin-top: 50px;
    margin-bottom: 60px;
    align-items: flex-start; /* Agar sidebar tidak melar ke bawah */
}

/* Kolom Kiri (Main Content) */
.bottom-content-area {
    flex: 2; /* Mengambil porsi lebih besar (sekitar 70%) */
    width: 65%;
    min-width: 0; /* Mencegah grid overflow */
}

/* Kolom Kanan (Sidebar) */
.bottom-sidebar-area {
    flex: 1; /* Mengambil porsi sisa (sekitar 30%) */
    width: 35%;
    min-width: 300px;
    
    /* Style Sidebar */
    padding-left: 30px;
    border-left: 2px solid var(--border-color); /* Garis pemisah */
}

/* Styling Widget Title di area ini agar konsisten */
.popbela-bottom-area .widget-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    color: #000;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 991px) {
    .popbela-bottom-area {
        flex-direction: column; /* Tumpuk ke bawah */
        gap: 40px;
    }
    
    .bottom-content-area, 
    .bottom-sidebar-area {
        width: 100%;
        flex: 0 0 100%;
        padding-left: 0;
        border-left: none;
    }
    
    /* Tambah garis pemisah horizontal di HP */
    .bottom-sidebar-area {
        border-top: 4px solid #f5f5f5;
        padding-top: 40px;
    }
}

/* =========================================
   HIDE HOME BOTTOM SIDEBAR ON MOBILE
   ========================================= */

@media (max-width: 991px) {
    /* Sembunyikan area sidebar bawah */
    .bottom-sidebar-area {
        display: none !important;
    }

    /* Pastikan konten utama mengisi penuh lebar */
    .bottom-content-area {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important; /* Hapus jarak kanan jika ada */
    }
}
/* =========================================
   WIDGET: FAKTA VS HOAKS (SIDEBAR)
   ========================================= */

.popbela-fact-widget {
    margin-bottom: 40px;
    width: 100%;
}

/* Header */
.fact-header {
    margin-bottom: 15px;
}
.fact-title {
    font-family: var(--font-ui);
    font-size: 18px; font-weight: 800; color: #000;
    display: flex; align-items: center; gap: 10px; margin: 0;
}
.fact-bar {
    width: 4px; height: 20px; background: #d32f2f; /* Garis Merah Vertikal */
    display: inline-block; border-radius: 2px;
}

/* Container Gelap */
.fact-container {
    background-color: #000; /* Latar Hitam */
    padding: 20px 0; /* Padding atas bawah saja agar gambar full width */
    border-radius: 8px;
    overflow: hidden;
}

/* Slider Area */
.fact-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
}

.fact-slider-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.fact-slide {
    min-width: 100%; /* 1 Slide per view di sidebar */
    box-sizing: border-box;
    padding: 0 20px; /* Padding kiri kanan */
}

/* Navigasi Panah (Bulat Putih) */
.fact-nav {
    position: absolute;
    top: 35%; transform: translateY(-50%);
    width: 30px; height: 30px;
    background: #fff;
    border: none; border-radius: 50%;
    color: #000; font-weight: bold; font-size: 14px;
    cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.fact-nav.prev { left: 10px; }
.fact-nav.next { right: 10px; }
.fact-nav:hover { background: #d32f2f; color: #fff; }

/* Kartu Berita */
.fact-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3; /* Kotak agak persegi */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0;
}

.fact-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}

.fact-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 70%);
}

.fact-info {
    /* Teks menempel di atas gambar (Overlay Style) */
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 30px; /* Padding besar agar tidak ketutup panah */
    pointer-events: none;
}

.fact-item-title {
    color: #fff;
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 700;
    line-height: 1.4; margin: 0 0 5px;
    text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}

.fact-label {
    font-size: 10px; color: #aaa; text-transform: uppercase; font-weight: 600;
}

/* Footer Tombol Biru */
.fact-footer {
    display: flex;
    gap: 10px;
    padding: 0 20px;
    margin-top: 10px;
}

.fact-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 10px 5px;
    border-radius: 4px;
    font-size: 11px; font-weight: 700;
    color: #fff; text-decoration: none; text-align: center;
    transition: opacity 0.2s;
}
.fact-btn:hover { opacity: 0.9; color: #fff; }

.report-btn { background-color: #0077cc; } /* Biru */
.check-btn { background-color: #0077cc; }  /* Biru */

/* REACTION BOX */
.popbela-reaction-box {
    margin: 40px 0;
    text-align: center;
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: 12px;
}
.popbela-reaction-box h4 { margin-bottom: 20px; font-size: 16px; }

.reaction-grid { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }

.reaction-btn {
    background: var(--bg-widget); border: 2px solid var(--border-color); border-radius: 50px;
    padding: 10px 20px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center;
    min-width: 70px;
}
.reaction-btn:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--color-primary); }

.react-icon { font-size: 24px; display: block; margin-bottom: 5px; }
.react-label { font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; }
.react-count { font-size: 10px; color: #999; margin-top: 2px; }

/* READING PROGRESS BAR */
#reading-progress-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 4px;
    background: transparent;
    z-index: 99999; /* Paling atas */
}

#reading-progress-bar {
    height: 100%;
    background: var(--color-primary); /* Warna Pink */
    width: 0%;
    transition: width 0.1s;
}

/* =========================================
   MOBILE STICKY SHARE & SAVE
   ========================================= */

/* Default sembunyi di Desktop */
.mobile-sticky-share { display: none; }

/* Hanya muncul di HP (max-width 768px) */
@media (max-width: 768px) {
    
    /* 1. Container Utama */
    .mobile-sticky-share {
        display: flex; 
        align-items: center; 
        gap: 10px; /* Pisah Kiri & Kanan */
        
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%;
        
        background: var(--bg-widget);
        padding: 10px 10px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08); /* Bayangan ke atas */
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom, 10px);
        box-sizing: content-box;
    }

    /* 2. Bagian Kiri (Label + Sosmed) */
    .sticky-share-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .sticky-label {
        font-family: var(--font-ui);
        font-weight: 800; 
        font-size: 10px; 
        text-transform: uppercase;
        color: #999;
        margin-right: 5px;
    }
    
    .sticky-icons {
        display: flex;
        gap: 8px;
    }
    
    .st-btn {
        width: 32px; height: 32px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; text-decoration: none;
        transition: transform 0.2s;
    }
    .st-btn:active { transform: scale(0.9); }
    
    .st-wa { background: #25D366; }
    .st-fb { background: #1877F2; }
    .st-tw { background: #000; }

    /* 3. Bagian Kanan (Bookmark Button) */
    .sticky-bookmark-btn {
        background: #fff;
        border: 1px solid #ddd;
        color: #555;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        padding: 0;
    }
    
    /* Ikon SVG Default */
    .sticky-bookmark-btn svg {
        width: 20px;
        height: 20px;
        stroke: #555;
        fill: none;
        transition: all 0.2s;
    }

    /* STATUS TERSIMPAN (SAVED) */
    .sticky-bookmark-btn.saved {
        background: var(--color-primary); /* Pink */
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(215, 39, 114, 0.4);
    }
    
    .sticky-bookmark-btn.saved svg {
        stroke: #fff;
        fill: #fff; /* Isi ikon putih */
    }

    /* 4. Angkat Footer Asli agar tidak tertutup bar */
    body {
        padding-bottom: 60px !important; 
    } 
}
/* =========================================
   PRODUCT CARD (AUTO INSERT)
   ========================================= */

.popbela-product-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-widget);
    border-left: 4px solid var(--color-primary); /* Aksen Pink di kiri */
    border-radius: 8px;
    padding: 15px 20px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-family: var(--font-body);
    clear: both;
}

/* Gambar Produk */
.prod-thumb {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    background: #f9f9f9;
    border: 1px solid #f0f0f0;
    display: flex; align-items: center; justify-content: center;
}

.prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Agar produk tidak terpotong */
}

/* Info Produk */
.prod-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prod-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.prod-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    color: var(--color-text-main);
}

.prod-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.prod-price {
    color: var(--color-primary); /* Pink */
    font-weight: 800;
    font-size: 15px;
}

.prod-btn {
    background-color: var(--color-primary);
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s;
    white-space: nowrap;
}

.prod-btn:hover {
    background-color: var(--color-primary-dark);
    text-decoration: none;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .popbela-product-card {
        flex-direction: column;
        text-align: center;
    }
    
    .prod-meta {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    
    .prod-btn {
        width: 100%;
        display: block;
    }
}

/* =========================================
   WIDGET: PROMO BANNER (SHOPEE STYLE)
   ========================================= */

.popbela-promo-widget {
    margin-bottom: 40px;
    position: relative;
    width: 100%;
    font-family: var(--font-ui, sans-serif);
}

/* 1. Background Banner (Atas) */
.promo-bg {
    background-size: cover;
    background-position: center;
    background-color: #ee4d2d; /* Orange Shopee */
    border-radius: 8px 8px 0 0;
    padding: 20px;
    padding-bottom: 60px; /* Ruang untuk kartu overlap */
    position: relative;
    color: #fff;
}

.promo-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(238, 77, 45, 0.8));
    border-radius: 8px 8px 0 0;
}

.promo-text {
    position: relative; z-index: 2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.promo-badge-logo {
    background: #fff; color: #ee4d2d;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 800;
    margin-bottom: 10px;
}

.promo-text h2 {
    font-size: 22px; font-weight: 900; line-height: 1.1;
    margin: 0 0 5px; color: #fff; text-transform: uppercase;
}
.promo-text p {
    font-size: 12px; margin: 0; opacity: 0.9; font-weight: 500;
}

/* 2. Product Card (Bawah - Overlapping) */
.promo-card {
    background: #fff;
    margin: -40px 15px 0; /* KUNCI: Naik ke atas 40px */
    position: relative; z-index: 3;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    overflow: hidden;
    padding-bottom: 15px;
}

/* Badge Diskon */
.promo-discount {
    position: absolute; top: 10px; right: 10px;
    background: #fbeiei; color: #ee4d2d;
    background-color: #ffe9e9;
    font-weight: 800; font-size: 12px;
    padding: 2px 6px; border-radius: 4px;
    z-index: 2;
}

/* Gambar Produk */
.promo-img {
    width: 100%; height: 180px;
    background: #f9f9f9;
    display: flex; align-items: center; justify-content: center;
}
.promo-img img {
    max-width: 90%; max-height: 90%; object-fit: contain;
}

/* Detail Produk */
.promo-detail { padding: 15px; text-align: left; }

.promo-detail h4 {
    font-size: 14px; font-weight: 700; margin: 0 0 10px;
    line-height: 1.4; color: #333;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.promo-prices { margin-bottom: 15px; }

.promo-prices del {
    display: block; font-size: 12px; color: #999;
}
.promo-prices .current-price {
    display: block; font-size: 18px; font-weight: 800; color: #ee4d2d;
}

/* Tombol Beli */
.promo-btn {
    display: block; width: 100%;
    background: #ee4d2d; color: #fff;
    text-align: center; padding: 10px;
    border-radius: 4px; font-weight: 800;
    text-decoration: none; font-size: 14px;
    transition: background 0.2s;
}
.promo-btn:hover { background: #d03e1f; color: #fff; }

/* =========================================
   LAYOUT OPINI / USER CONTENT
   ========================================= */

/* Badge Atas */
.opinion-badge {
    display: inline-block;
    background-color: #FCE4EC; /* Pink sangat muda */
    color: #C2185B; /* Pink Tua */
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Judul Opini */
.opinion-title {
    font-family: var(--font-ui); /* Sans Serif Bold */
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    color: #111;
    margin-bottom: 25px;
}

/* Author Box */
.opinion-author-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.op-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.op-details {
    flex: 1;
}

.op-name {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 800;
    color: #111;
    text-decoration: none;
    display: block;
}

.op-role {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-top: 2px;
}

/* Meta Baris Bawah */
.opinion-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
    color: #888;
    font-size: 13px;
}

.op-actions {
    display: flex;
    gap: 15px;
}

.op-actions span {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* Disclaimer Box (Bawah) */
.opinion-disclaimer {
    background-color: #E3F2FD; /* Biru Muda */
    padding: 5px;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #2196F3;
    color: #0D47A1;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

/* Responsif */
@media (max-width: 600px) {
    .opinion-title { font-size: 24px; }
    .opinion-meta-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .op-avatar img { width: 50px; height: 50px; }
}

/* =========================================
   ARCHIVE: PENULIS OPINI
   ========================================= */

.author-profile-header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px;
    background: var(--bg-widget);
    border-radius: 12px;
    margin-bottom: 40px;
}

.auth-img {
    flex: 0 0 120px;
    width: 120px; height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.auth-img img { width: 100%; height: 100%; object-fit: cover; }

.auth-info { flex: 1; }

.auth-name {
    font-family: var(--font-ui);
    font-size: 28px;
    font-weight: 800;
    color: #000;
    margin: 0 0 5px 0;
}

.auth-role {
    font-size: 16px;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-desc { color: #666; line-height: 1.6; }

@media (max-width: 600px) {
    .author-profile-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
}

/* =========================================
   WIDGET: OPINION POSTS (USER CONTENT)
   ========================================= */

.popbela-opinion-widget {
    margin-bottom: 50px;
    width: 100%;
}

.opinion-header {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.opinion-widget-title {
    font-family: var(--font-ui);
    font-size: 20px; font-weight: 800; color: #000; margin: 0;
    border-left: 4px solid #D72772; /* Garis Pink Kiri */
    padding-left: 10px;
    line-height: 1;
}

/* Grid 3 Kolom */
.opinion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Kartu Opini */
.opinion-card {
    background: var(--bg-widget);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.2s;
    display: flex; flex-direction: column;
}
.opinion-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Cover Image */
.opinion-cover {
    height: 140px;
    width: 100%;
    background: #f0f0f0;
    overflow: hidden;
}
.opinion-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Baris Penulis (Foto + Nama) */
.opinion-author-row {
    padding: 0 15px;
    margin-top: -25px; /* Trik Foto Menembus ke Atas */
    position: relative;
    display: flex;
    align-items: flex-end; /* Foto di bawah */
    gap: 10px;
	background-color: var(--bg-widget);
}

/* Foto Bulat */
.op-card-avatar {
    flex: 0 0 50px;
    width: 50px; height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff; /* Border putih tebal */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: var(--bg-widget);
}
.op-card-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Nama & Jabatan */
.op-card-details {
    padding-bottom: 2px; /* Sejajar foto */
    flex: 1;
    overflow: hidden;
}

.op-card-name {
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 700;
    color: #0091ea; /* Biru Muda */
    text-decoration: none;
    display: block;
    white-space: nowrap; 
    overflow: hidden; text-overflow: ellipsis;
}
.op-card-name:hover { text-decoration: underline; }

.op-card-role {
    font-size: 11px; color: #999;
    display: block;
    white-space: nowrap; 
    overflow: hidden; text-overflow: ellipsis;
}

/* Judul & Tanggal */
.opinion-body {
    padding: 15px;
    padding-top: 10px;
    flex-grow: 1;
    display: flex; flex-direction: column; justify-content: space-between;
}

.op-card-title {
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 700;
    line-height: 1.4; margin: 0 0 10px;
    color: #212121;
    
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.op-card-title a { color: inherit; text-decoration: none; }
.op-card-title a:hover { color: #D72772; }

.op-card-date { font-size: 11px; color: #aaa; }


/* Responsif Mobile */
@media (max-width: 768px) {
    .opinion-grid {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 20px;
        scroll-snap-type: x mandatory;
    }
    
    .opinion-grid::-webkit-scrollbar { display: none; }
    
    .opinion-card {
        min-width: 260px;
        scroll-snap-align: center;
    }
}
/* =========================================
   HALAMAN INFORMASI (ABOUT, REDAKSI, DLL)
   ========================================= */

.popbela-info-layout {
    display: flex;
    gap: 60px; /* Jarak lebar antara menu dan konten */
    margin: 50px 0 80px;
}

/* --- 1. SIDEBAR KIRI --- */
.info-sidebar-nav {
    flex: 0 0 250px; /* Lebar tetap sidebar */
    width: 250px;
}

/* Judul "Informasi" */
.info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.info-header h3 {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}
.info-header .red-bar {
    width: 6px;
    height: 24px;
    background-color: var(--color-primary); /* Merah */
    border-radius: 3px;
    display: inline-block;
}

/* List Menu */
.info-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
}

.info-menu-list li {
    border-bottom: 1px solid var(--border-color);
    margin: 0;
}

.info-menu-list li a {
    display: flex;
    justify-content: space-between; /* Teks kiri, panah kanan */
    align-items: center;
    padding: 15px 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    color: #212121;
    text-decoration: none;
    transition: all 0.2s;
}

/* Efek Hover */
.info-menu-list li a:hover {
    color: #D72772; /* Pink */
    padding-left: 5px;
}

/* Menu yang SEDANG AKTIF (Dibuka) */
.info-menu-list li.current-menu-item a {
    color: #D32F2F; /* Merah sesuai gambar */
}

/* Panah kanan (hanya muncul di item aktif/hover) */
.info-menu-list li a::after {
    content: '\203A'; /* Simbol > */
    font-size: 20px;
    line-height: 1;
    color: #ccc;
}
.info-menu-list li.current-menu-item a::after {
    color: #D32F2F;
}

/* --- 2. KONTEN KANAN --- */
.info-main-content {
    flex: 1; /* Sisa ruang */
    min-width: 0;
}

/* Judul Halaman */
.page-info-title {
    font-family: var(--font-ui);
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
}

.title-line {
    width: 60px;
    height: 5px;
    background-color: var(--color-primary); /* Garis bawah judul merah */
    margin-bottom: 30px;
    border-radius: 2px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 991px) {
    .popbela-info-layout {
        flex-direction: column; /* Tumpuk ke bawah */
        gap: 40px;
    }
    .info-sidebar-nav {
        width: 100%;
        flex: none;
    }
}

/* =========================================
   SIDEBAR INFORMASI: STICKY & SCROLLABLE
   ========================================= */

/* Tampilan Desktop (Laptop/PC) */
@media (min-width: 992px) {
    .info-sidebar-nav {
        flex: 0 0 250px;
        width: 250px;
        
        /* 1. MEMBUAT MENEMPEL (STICKY) */
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 100px; /* Jarak dari Header saat menempel */
        
        /* 2. AGAR BISA DI-SCROLL JIKA MENU PANJANG */
        /* Hitung tinggi layar dikurangi header dan footer */
        max-height: calc(100vh - 120px); 
        overflow-y: auto; /* Scrollbar internal */
        
        /* Kosmetik */
        padding-right: 10px; /* Ruang untuk scrollbar */
    }

    /* Sembunyikan Scrollbar agar rapi (Chrome/Safari) */
    .info-sidebar-nav::-webkit-scrollbar {
        width: 4px;
    }
    .info-sidebar-nav::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 4px;
    }
    .info-sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Tampilan Mobile (HP) */
@media (max-width: 991px) {
    .popbela-info-layout {
        flex-direction: column;
    }
    
    .info-sidebar-nav {
        width: 100%;
        position: static; /* Tidak sticky di HP */
        max-height: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    /* Opsional: Menu di HP jadi Horizontal Scroll */
    .info-menu-list {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 15px;
        padding-bottom: 10px;
        border-top: none;
    }
    
    .info-menu-list li {
        border: 1px solid #eee;
        border-radius: 50px;
        padding: 0 15px;
        background: #f9f9f9;
        flex-shrink: 0;
    }
    
    .info-menu-list li a {
        padding: 10px 0;
        font-size: 12px;
    }
    
    .info-menu-list li a::after { content: none; } /* Hapus panah di HP */
    
    /* Highlight Active di HP */
    .info-menu-list li.current-menu-item {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }
    .info-menu-list li.current-menu-item a {
        color: #fff;
    }
}

/* =========================================
   AUTO INTERNAL LINK STYLE
   ========================================= */

a.auto-internal-link {
    color: var(--color-primary); /* Warna Pink */
    font-weight: 700; /* Tebal */
    text-decoration: none;
    border-bottom: 1px dotted var(--color-primary);
    transition: all 0.2s;
}

a.auto-internal-link:hover {
    background-color: #fff0f5; /* Highlight pink muda saat hover */
    border-bottom: 2px solid var(--color-primary);
    color: #b01c5b;
}

/* LAZY BACKGROUND STYLES */
.lazy-bg {
    background-color: #eee; /* Warna sementara sebelum gambar muncul */
    background-image: none; /* Kosongkan awal */
    transition: background-image 0.5s ease-in-out; /* Efek halus */
}

/* Saat JS menambahkan gambar */
.lazy-bg.visible {
    /* Gambar akan diisi oleh JS via inline style */
}

/* STICKY VIDEO WRAPPER */
.video-sticky-wrapper {
    width: 100%;
    min-height: 530px; /* Mencegah layout shift */
}

/* Class saat video terbang */
iframe.is-sticky, video.is-sticky {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px !important;
    height: 169px !important;
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    animation: slideUp 0.3s ease;
}

/* Tombol Close */
.close-sticky {
    position: fixed;
    bottom: 175px; /* Sesuaikan dengan tinggi video */
    right: 10px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 25px; height: 25px;
    z-index: 10000;
    cursor: pointer;
    font-weight: bold;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 600px) {
    iframe.is-sticky, video.is-sticky {
        width: 100% !important; /* Full width di HP */
        left: 0; right: 0; bottom: 0;
        border-radius: 0;
        height: 200px !important;
    }
    .close-sticky {
        bottom: 205px;
        right: 10px;
    }
}

/* =========================================
   BOOKMARK BUTTON (PREMIUM STYLE)
   ========================================= */

.bookmark-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background-color: transparent;
    border: 2px solid var(--color-primary); /* Garis Pink */
    color: var(--color-primary);
    border-radius: 50px; /* Kapsul */
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    margin: 10px 0;
}

.bookmark-btn svg {
    width: 16px;
    height: 16px;
    transition: fill 0.3s;
    stroke: var(--color-primary);
}

/* Efek Hover */
.bookmark-btn:hover {
    background-color: #fff0f5; /* Pink sangat muda */
    transform: translateY(-2px);
}

/* --- STATE: TERSIMPAN (AKTIF) --- */
.bookmark-btn.saved {
    background-color: var(--color-primary); /* Blok Pink */
    color: #fff;
    box-shadow: 0 4px 10px rgba(215, 39, 114, 0.3);
}

.bookmark-btn.saved svg {
    stroke: #fff;
    fill: #fff; /* Isi ikon jadi putih */
}

.bookmark-btn.saved:hover {
    background-color: var(--color-primary-dark);
}

/* BOOKMARK PAGE STYLE */
.btn-remove-bookmark {
    background: #fff;
    border: 1px solid #ddd;
    color: #d32f2f; /* Merah */
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    display: inline-block;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-remove-bookmark:hover {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
}

/* =========================================
   PHOTO SOURCE OVERLAY
   ========================================= */

.popbela-featured-image {
    position: relative; /* Wajib relative agar overlay terkunci */
    overflow: hidden;
    border-radius: 8px;
}

.photo-source-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Hitam Transparan */
    color: #fff;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    pointer-events: none; /* Agar tidak mengganggu klik */
	margin-top: -30px;
}

/* Jika ada caption di bawah, pastikan tidak tabrakan */
.featured-caption {
    margin-top: 8px;
    font-size: 12px;
    color: #777;
    text-align: left;
    font-style: italic;
}

/* =========================================
   ARCHIVE LAYOUT: HERO + GRID 3
   ========================================= */

.archive-header-custom { margin: 30px 0; }
.archive-title { font-size: 28px; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.red-marker { width: 8px; height: 28px; background: #D72772; display: inline-block; }

/* --- 1. HERO SECTION (POST 1) --- */
.archive-hero-post {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 21/9; /* Gambar Lebar */
}

.hero-thumb { width: 100%; height: 100%; position: relative; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.archive-hero-post:hover .hero-thumb img { transform: scale(1.05); }

/* Overlay Gradien */
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
}

.hero-content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 30px;
    z-index: 2; color: #fff;
}

.hero-title {
    font-family: var(--font-ui); font-size: 28px; font-weight: 700;
    line-height: 1.3; margin: 0 0 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.hero-meta { font-size: 13px; color: #eee; }
.hero-cat { font-weight: 700; color: var(--color-primary); margin-left: 5px; text-transform: uppercase; }


/* --- 2. GRID SECTION (POST 2 dst) --- */
.archive-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 30px;
}

.grid-item-post {
    display: flex; flex-direction: column;
}

.grid-link { text-decoration: none; color: inherit; }

.grid-thumb {
    width: 100%; aspect-ratio: 16/9;
    border-radius: 8px; overflow: hidden;
    margin-bottom: 15px;
}
.grid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.grid-item-post:hover .grid-thumb img { transform: scale(1.05); }

.grid-title {
    font-family: var(--font-ui); font-size: 16px; font-weight: 700;
    line-height: 1.4; margin: 0 0 8px; color: #212121;
    /* Limit 3 baris */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-item-post:hover .grid-title { color: #D72772; }

.grid-meta { font-size: 11px; color: #999; line-height: 1.5; }
.grid-cat { color: var(--color-primary); font-weight: 600; text-transform: uppercase; }


/* --- RESPONSIF MOBILE --- */
@media (max-width: 768px) {
    .archive-hero-post { aspect-ratio: 16/9; }
    .hero-title { font-size: 20px; }
    .hero-content { padding: 15px; }
    
    .archive-grid-wrapper {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
        gap: 25px;
    }
    
    /* Opsi: List View di HP (Gambar Kiri, Teks Kanan) */
    .grid-link {
        display: flex; gap: 15px; align-items: flex-start;
    }
    .grid-thumb {
        width: 120px; flex-shrink: 0; margin-bottom: 0; height: 90px;
    }
	.poll-hero .poll-thumb {
        height: 200px; /* Sesuaikan hero di HP */
    }
    .poll-hero .poll-question {
        font-size: 18px;
    }
}

/* =========================================
   SCROLL PROGRESS (PERCENTAGE STYLE)
   ========================================= */

#progress-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 9999;
    
    /* Animasi Muncul */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

#progress-to-top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Lingkaran SVG */
.progress-circle {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}

.progress-circle path {
    fill: none;
    stroke: var(--color-primary); /* Warna Pink */
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

/* Teks Persen (Default Muncul) */
#scroll-percent-text {
    font-family: var(--font-ui, sans-serif);
    font-size: 12px;
    font-weight: 800;
    color: #333;
    position: absolute;
    transition: opacity 0.2s;
    opacity: 1; /* Muncul */
}

/* Ikon Panah (Default Sembunyi) */
.scroll-arrow {
    position: absolute;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    opacity: 0; /* Sembunyi */
    transform: translateY(-1px);
}

/* --- EFEK HOVER (Tukar Tampilan) --- */
#progress-to-top:hover {
    background-color: #fff0f5; /* Pink muda */
}

#progress-to-top:hover #scroll-percent-text {
    opacity: 0; /* Sembunyikan Angka */
}

#progress-to-top:hover .scroll-arrow {
    opacity: 1; /* Munculkan Panah */
}

/* Responsif Mobile */
@media (max-width: 768px) {
    #progress-to-top {
        bottom: 80px; 
        right: 20px;
        height: 44px; width: 44px; /* Sedikit lebih kecil */
    }
    #scroll-percent-text { font-size: 10px; }
}

/* =========================================
   FONT RESIZER (A- A+)
   ========================================= */

.popbela-font-resizer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.resizer-label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    margin-right: 5px;
}

.resizer-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s;
}

.resizer-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.resizer-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* LOGIKA PERUBAHAN UKURAN FONT */

/* Default (18px) - Sesuaikan dengan style asli */
.entry-content p, 
.entry-content li,
.entry-content span {
    font-size: 18px; 
    line-height: 1.8;
    transition: font-size 0.3s ease; /* Efek halus saat berubah */
}

/* Small (A-) */
body.f-small .entry-content p,
body.f-small .entry-content li,
body.f-small .entry-content span {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Large (A+) */
body.f-large .entry-content p,
body.f-large .entry-content li,
body.f-large .entry-content span {
    font-size: 22px !important;
    line-height: 1.9 !important;
}

/* =========================================
   MOBILE BOTTOM NAVIGATION (APP STYLE)
   ========================================= */

.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around; /* Bagi rata 3 menu */
        align-items: center;
        
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        height: 60px;
        
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        z-index: 9999;
        
        padding-bottom: env(safe-area-inset-bottom, 0); /* Support iPhone X */
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #999; /* Warna Default Abu */
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        width: 100%; /* Area klik luas */
        height: 100%;
        transition: color 0.2s;
    }

    .nav-icon svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        margin-bottom: 4px;
        transition: transform 0.2s;
    }

    /* State Aktif / Hover */
    .nav-item.active,
    .nav-item:hover {
        color: var(--color-primary); /* Warna Pink */
    }

    .nav-item.active .nav-icon svg {
        transform: translateY(-2px); /* Ikon naik sedikit saat aktif */
        stroke-width: 2.5;
    }

    /* Angkat Body agar konten paling bawah tidak ketutup menu */
    body {
        padding-bottom: 70px !important;
    }
}

/* =========================================
   MODERN FLOATING NAV (GLASSMORPHISM)
   ========================================= */

.mobile-floating-nav { display: none; }

@media (max-width: 768px) {
    .mobile-floating-nav {
        display: block;
        position: fixed;
        bottom: 20px; /* Melayang dari bawah */
        left: 0; 
        width: 100%;
        z-index: 9999;
        padding: 0 20px; /* Padding kiri kanan layar */
        pointer-events: none; /* Agar area kosong bisa diklik tembus */
    }

    .floating-nav-inner {
        display: flex;
        justify-content: space-around;
        align-items: center;
        
        background: rgba(255, 255, 255, 0.9); /* Putih Transparan */
        backdrop-filter: blur(10px); /* Efek Kaca Buram (Glass) */
        -webkit-backdrop-filter: blur(10px);
        
        padding: 12px 10px;
        border-radius: 20px; /* Sudut sangat bulat */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Bayangan lembut */
        border: 1px solid rgba(255,255,255,0.5);
        pointer-events: auto; /* Aktifkan klik tombol */
        max-width: 400px; /* Jangan terlalu lebar di tablet */
        margin: 0 auto;
    }

    .float-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #94a3b8; /* Abu-abu soft */
        transition: all 0.3s ease;
        width: 60px;
        position: relative;
    }

    .float-item span {
        font-size: 10px;
        font-weight: 600;
        margin-top: 4px;
        font-family: var(--font-ui);
    }

    .float-item .icon-box {
        position: relative;
        transition: transform 0.2s;
    }

    /* STATE ACTIVE & HOVER */
    .float-item.active, 
    .float-item:hover {
        color: var(--color-primary); /* Pink */
    }

    .float-item.active .icon-box {
        transform: translateY(-2px);
    }
    
    /* Indikator Titik di bawah ikon aktif */
    .float-item.active::after {
        content: '';
        width: 4px; height: 4px;
        background: var(--color-primary);
        border-radius: 50%;
        position: absolute;
        bottom: -6px;
    }

    /* Angkat Body agar konten paling bawah tidak ketutup */
    body { padding-bottom: 90px !important; }
}

/* =========================================
   POPULAR PAGE (RANKING STYLE)
   ========================================= */

.popbela-popular-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popular-list-item {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

/* Ranking Number */
.pop-rank {
    flex: 0 0 40px;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: 32px;
    color: #e0e0e0; /* Abu-abu default */
    font-style: italic;
}

/* Warna Top 3 */
.pop-rank.rank-1 { color: #FFD700; font-size: 42px; } /* Emas */
.pop-rank.rank-2 { color: #C0C0C0; font-size: 38px; } /* Perak */
.pop-rank.rank-3 { color: #CD7F32; font-size: 36px; } /* Perunggu */

/* Thumbnail */
.pop-list-thumb {
    flex: 0 0 120px;
    width: 120px; height: 85px;
    border-radius: 8px;
    overflow: hidden;
}
.pop-list-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Content */
.pop-list-content { flex: 1; }

.pop-cat-label {
    font-size: 10px; font-weight: 700; color: var(--color-primary);
    text-transform: uppercase; display: block; margin-bottom: 4px;
}

.pop-list-title {
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 700;
    line-height: 1.4; margin: 0 0 8px;
    color: #212121;
}
.pop-list-title a { color: inherit; text-decoration: none; transition: 0.2s; }
.pop-list-title a:hover { color: var(--color-primary); }

.pop-meta { font-size: 11px; color: #999; }
.views-count { margin-left: 10px; color: #555; }

/* Mobile */
@media (max-width: 600px) {
    .popular-list-item { gap: 15px; align-items: flex-start; }
    .pop-rank { flex: 0 0 30px; font-size: 24px; margin-top: 5px; }
    .pop-rank.rank-1 { font-size: 32px; }
    .pop-list-thumb { width: 100px; height: 70px; flex: 0 0 100px; }
    .pop-list-title { font-size: 14px; }
}

/* =========================================
   MOBILE APP UI (HEADER & FOOTER)
   ========================================= */

/* Default: Sembunyikan di Desktop */
.mobile-app-header, .mobile-app-footer {
    display: none;
}

/* HANYA MUNCUL DI MOBILE */
@media (max-width: 768px) {

    /* 1. SEMBUNYIKAN HEADER ASLI TEMA */
    .site-header, 
    .header-main, 
    .foryou-container {
        display: none !important;
    }
    
    /* Reset Padding Body agar konten tidak ketutup header fixed */
    body {
        padding-top: 60px; /* Tinggi Header App */
        padding-bottom: 70px; /* Tinggi Footer App */
    }

    /* 2. APP HEADER (TOP) */
    .mobile-app-header {
        display: block;
        position: fixed;
        top: 0; left: 0; width: 100%;
        height: 55px;
        background: #fff;
        z-index: 9999;
        border-bottom: 1px solid #f0f0f0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .app-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 15px;
    }

    /* Logo di Header HP */
    .app-logo img { height: 24px; width: auto; display: block; }
    .app-logo span { font-weight: 900; color: var(--color-primary); font-size: 20px; }

    /* Detail Mode (Single Post) */
    .detail-mode { justify-content: flex-start; gap: 15px; }
    
    .app-back-btn, .app-home-btn {
        color: #333; display: flex; align-items: center;
    }
    
    .app-page-title {
        font-family: var(--font-ui);
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1; /* Mengisi ruang tengah */
    }
    
    /* Tombol Search */
    .app-icon-btn {
        background: none; border: none; padding: 5px; color: #333;
    }


    /* 3. APP FOOTER (BOTTOM NAV) */
    .mobile-app-footer {
        display: block;
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        height: 60px;
        background: #fff;
        z-index: 9999;
        border-top: 1px solid #f0f0f0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .app-footer-inner {
        display: flex;
        justify-content: space-around; /* Bagi rata 4 menu */
        align-items: center;
        height: 100%;
    }

    .app-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--color-text-main); /* Abu */
        width: 100%; /* Area klik luas */
        height: 100%;
        transition: all 0.2s;
    }

    .app-nav-item span {
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 600;
        margin-top: 3px;
    }
    
    .app-nav-item svg {
        transition: transform 0.2s;
    }

    /* State Aktif */
    .app-nav-item.active {
        color: var(--color-primary); /* Pink */
    }
    
    .app-nav-item.active svg {
        transform: translateY(-2px);
        fill: rgba(215, 39, 114, 0.1); /* Isi warna tipis */
    }
    
    @media (max-width: 768px) {

	}
	/* FIX HEADER MOBILE Z-INDEX */
	.mobile-app-header {
		z-index: 99999 !important; /* Pastikan paling atas */
		pointer-events: auto; /* Aktifkan klik */
	}

	.app-actions {
		position: relative;
		z-index: 100000; /* Tombol lebih atas lagi */
	}

}


@media (max-width: 768px) {
    /* Pastikan Footer Paling Atas (Agar bisa diklik) */
    .mobile-app-footer,
    .mobile-floating-nav, 
    .mobile-sticky-share {
        z-index: 999999 !important; 
        pointer-events: auto !important; /* Paksa aktifkan klik */
    }
    
}

@media (max-width: 768px) {

    /* 1. Pastikan Container Induk Relatif */
    .app-header-inner {
        position: relative; /* Menjadi acuan posisi logo */
        display: flex;
        align-items: center;
        justify-content: space-between; /* Tombol lain minggir ke kiri/kanan */
        height: 100%;
        padding: 0 15px;
    }

    /* 2. LOGO TENGAH MUTLAK (ABSOLUTE CENTER) */
    .app-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* Geser mundur 50% dimensi sendiri agar pas tengah */
        
        z-index: 10; /* Di atas elemen lain */
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Pastikan lebar tidak menghalangi tombol kiri/kanan */
        max-width: 60%; 
    }

    /* Atur ukuran gambar logo agar pas */
    .app-logo img {
        height: 30px; /* Sesuaikan tinggi logo */
        width: auto;
        display: block;
    }
    
    /* Jika logo berupa teks */
    .app-logo span {
        font-size: 20px;
        font-weight: 900;
        color: var(--color-primary);
        text-transform: uppercase;
        line-height: 1;
    }

    /* 3. Pastikan Tombol Kiri/Kanan tidak tertutup */
    .app-actions {
        position: relative;
        z-index: 20; /* Lebih tinggi dari logo */
    }
    
    /* Jika ada tombol di kiri (misal tombol back), pastikan z-index juga tinggi */
    .app-back-btn {
        position: relative;
        z-index: 20;
    }
}

/* =========================================
   HIDE FOOTER ON MOBILE
   ========================================= */

@media (max-width: 768px) {
    
    /* Sembunyikan Footer Utama */
    .site-footer, 
    #colophon {
        display: none !important;
    }

    /* (Opsional) Jika ingin menyembunyikan area widget bawah juga */
    .popbela-bottom-area,
    .bottom-content-area,
    .bottom-sidebar-area {
        margin-bottom: 0 !important;
    }

    /* Reset padding body agar tidak ada ruang kosong di bawah */
    /* Sesuaikan angka 60px dengan tinggi Mobile App Footer Anda */
    body {
        padding-bottom: 60px !important; 
    }
}

/* =========================================
   TOMBOL SIMPAN ARTIKEL
   ========================================= */

.popbela-save-container {
    margin: 20px 0;
}

.btn-save-article {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid var(--color-primary); /* Garis Pink */
    color: var(--color-primary);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    border-radius: 50px; /* Bentuk Kapsul */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save-article svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: fill 0.3s;
}

/* Efek Hover */
.btn-save-article:hover {
    background-color: #fff0f5; /* Pink muda */
    transform: translateY(-2px);
}

/* --- STATUS TERSIMPAN (Active) --- */
.btn-save-article.saved {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(215, 39, 114, 0.3);
}

.btn-save-article.saved svg {
    fill: #fff; /* Ikon terisi penuh */
    stroke: #fff;
}

.btn-save-article.saved:hover {
    background-color: #b01c5b; /* Pink lebih gelap */
}

/* =========================================
   MODERN TOAST NOTIFICATION
   ========================================= */

.popbela-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Mulai dari bawah layar (sembunyi) */
    
    display: flex;
    align-items: center;
    gap: 12px;
    
    background-color: #333; /* Hitam Elegan */
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    font-family: var(--font-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    z-index: 9999999; /* Paling atas */
    
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efek Mantul */
    pointer-events: none;
}

.popbela-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Start Sembunyi di bawah */
    
    display: flex;
    align-items: center;
    gap: 12px;
    
    background-color: #212121; /* Hitam */
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    
    /* Z-INDEX HARUS LEBIH TINGGI DARI FOOTER */
    z-index: 99999999 !important; 
    
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Saat Muncul */
.popbela-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .popbela-toast {
        /* Naik ke atas sticky footer (60px) + jarak (20px) */
        bottom: 90px; 
        width: max-content;
        max-width: 85%;
    }
}

/* =========================================
   NEWS UPDATE TIMELINE (LIVE REPORT)
   ========================================= */

.popbela-news-timeline {
    margin: 40px 0;
    background: var(--bg-widget);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* Judul Utama */
.timeline-main-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #D72772; /* Pink */
}

/* Dot Merah Kedip (Live Effect) */
.blink-dot {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* Wrapper Garis Vertikal */
.timeline-wrapper {
    position: relative;
    padding-left: 10px;
    border-left: 2px solid #eee; /* Garis utama */
    margin-left: 10px;
}

/* Item Timeline */
.timeline-item {
    position: relative;
    padding-left: 25px;
    margin-bottom: 30px;
}
.timeline-item:last-child { margin-bottom: 0; }

/* Bulatan Penanda di Garis */
.timeline-marker {
    position: absolute;
    left: -6px; /* Agar pas di tengah garis (garis 2px, dot 10px) */
    top: 0;
    width: 10px;
    height: 10px;
    background: #D72772;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #D72772; /* Ring luar */
}

/* Konten Update */
.tm-time {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #333;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
}

.tm-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    margin: 5px 0;
    color: #000;
}

.tm-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-main);
}

.tm-body p { margin-bottom: 10px; }

/* Responsif */
@media (max-width: 600px) {
    .popbela-news-timeline { padding: 20px; }
    .timeline-wrapper { margin-left: 5px; }
}

/* =========================================
   WA NOTIFICATION STYLE (FIXED)
   ========================================= */

.wa-popup {
    position: fixed;
    top: -150px; /* Posisi awal sembunyi di atas */
    left: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 999999999 !important; /* WAJIB PALING TINGGI */
    padding: 12px;
    transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efek membal */
    border: 1px solid rgba(0,0,0,0.08);
    display: block; /* Default tampil (untuk mobile) */
}

/* Saat Aktif (Turun ke layar) */
.wa-popup.active {
    top: 20px; /* Jarak dari atas layar HP */
}

/* Layout Konten */
.wa-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* Icon Bulat */
.wa-icon { position: relative; width: 45px; height: 45px; flex-shrink: 0; }
.wa-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.wa-badge-icon { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; }

/* Teks */
.wa-text { flex: 1; text-decoration: none; color: #333; font-family: sans-serif; }
.wa-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; color: #666; }
.wa-app-name { font-weight: bold; text-transform: uppercase; }
.wa-body { font-size: 13px; line-height: 1.3; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Tombol Close */
.wa-close {
    position: absolute; top: -8px; right: -8px;
    background: #eee; border: none; border-radius: 50%;
    width: 22px; height: 22px; line-height: 22px;
    text-align: center; font-size: 16px; color: #888; cursor: pointer;
}

/* SEMBUNYIKAN DI DESKTOP (LAYAR BESAR) */
@media (min-width: 769px) {
    .wa-popup { display: none !important; }
}