/* ==========================================================================
   WIDGET SIDEBAR TERPOPULER (FONT BESAR & JARAK RAPAT)
   ========================================================================== */

.sidebar-populer-list {
    margin-top: 5px;
}

.pop-item {
    display: flex;
    /* JARAK RAPAT: Mengurangi jarak antara angka dan konten teks */
    gap: 10px; 
    padding: 10px 0; 
    align-items: flex-start;
    border-bottom: 1px solid #f2f2f2;
}

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

/* --- ANGKA OUTLINE --- */
.pop-number {
    /* Ukuran angka dibuat pas, tidak terlalu raksasa agar jarak tetap rapat */
    font-size: 60px; 
    font-weight: 900;
    line-height: 0.9;
    min-width: 30px;
    font-family: 'Arial Black', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.2px #333; 
    opacity: 0.7;
    margin-top: 4px; /* Menyelaraskan angka dengan baris pertama teks */
}

.pop-content {
    flex: 1;
}

/* --- KATEGORI --- */
.pop-cat {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    margin-bottom: 1px; /* Jarak sangat rapat ke judul */
    text-transform: capitalize;
}

/* --- JUDUL BERITA (FONT AGAK BESAR & RAPAT) --- */
.pop-title {
    /* FONT AGAK BESAR: 16px agar terlihat dominan */
    font-size: 16px; 
    font-weight: 700; 
    line-height: 1.3; /* Jarak antar baris teks yang rapat */
    margin: 0;
}

.pop-title a {
    color: #111111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pop-meta {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
}

/* 1. Paksa semua kontainer induk agar mengizinkan sticky */
html, body, #page, .site-content, .site-main, #primary, .main-content-wrapper {
    overflow: visible !important;
    height: auto !important;
}

/* 2. Pastikan wrapper menggunakan flex-start */
.main-content-wrapper {
    display: flex !important;
    align-items: flex-start !important;
}

/* 3. Eksekusi Sticky pada Sidebar */
.sidebar-area {
    width: 330px;
    flex-shrink: 0;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    height: fit-content !important;
    z-index: 10;
}

/* ==========================================================================
   MEMBERI JARAK ANTAR WIDGET SIDEBAR
   ========================================================================== */

.sidebar-area .widget {
    margin-bottom: 35px; /* Sesuaikan angka ini untuk jarak yang diinginkan */
    padding-bottom: 10px;
}

/* Jika ingin ada garis pembatas halus antar widget (opsional) */
.sidebar-area .widget:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 25px;
}

/* Menghilangkan margin pada widget terakhir agar tidak ada ruang kosong berlebih di bawah */
.sidebar-area .widget:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   SIDEBAR GRID WIDGET STYLE
   ========================================================================== */

.sidebar-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membuat 2 kolom */
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}

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

.grid-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: none;
    overflow: hidden;
    margin-bottom: 8px;
    display: block;
}

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

.grid-item:hover .grid-thumb img {
    transform: scale(1.1);
}

.grid-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 5px 0;
}

.grid-title a {
    color: #111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grid-date {
    font-size: 11px;
    color: #999;
}

/* --- TOMBOL SELENGKAPNYA (STYLE INDEKS BERITA) --- */
.grid-more-btn {
    display: flex;             /* Gunakan flex untuk menyejajarkan teks & ikon */
    align-items: center;
    justify-content: center;
    width: fit-content;        /* Lebar mengikuti isi */
    margin: 15px auto 0 auto;  /* auto di kiri & kanan untuk posisi tengah */
    padding: 8px 20px;         /* Ukuran padding yang lebih pas */
    background-color: #fff;    /* Latar belakang putih */
    color: #333;               /* Warna teks gelap */
    font-size: 12px;           
    font-weight: 800;          /* Font tebal sesuai contoh */
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #ddd;    /* Border tipis warna abu-abu terang */
    border-radius: 4px;        /* Sudut sedikit melengkung */
    transition: all 0.3s ease;
}

.grid-more-btn:hover {
    border-color: #333;     /* Border berubah merah saat hover */
    color: #333;            /* Teks berubah merah saat hover */
}

/* Tambahkan ikon panah secara otomatis melalui CSS */
.grid-more-btn::after {
    content: '→';              /* Karakter panah */
    margin-left: 8px;          /* Jarak antara teks dan panah */
    font-size: 14px;
    transition: transform 0.2s ease;
}

.grid-more-btn:hover::after {
    transform: translateX(3px); /* Efek panah bergeser sedikit saat hover */
}

/* Responsif untuk sidebar yang mungkin sempit */
@media (max-width: 350px) {
    .sidebar-grid-container {
        grid-template-columns: 1fr; /* Jadi 1 kolom kalau terlalu sempit */
    }
}

/* ==========================================================================
   SIDEBAR LIST BERITA STYLE
   ========================================================================== */

.sidebar-list-wrapper {
    margin-top: 10px;
}

/* ==========================================================================
   SIDEBAR LIST BERITA (VERSI GAMBAR LEBIH BESAR)
   ========================================================================== */

.side-list-item {
    display: flex;
    gap: 15px; /* Jarak antara gambar dan teks sedikit diperlebar */
    padding: 12px 0;
    align-items: flex-start; /* Sejajarkan ke atas agar judul panjang tetap rapi */
    border-bottom: 1px solid #f2f2f2;
}

.side-list-thumb {
    /* UKURAN GAMBAR LEBIH BESAR */
    width: 110px; 
    height: 75px;
    flex-shrink: 0;
    border-radius: none; /* Sudut sedikit lebih melengkung agar modern */
    overflow: hidden;
}

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

.side-list-item:hover .side-list-thumb img {
    transform: scale(1.08); /* Efek zoom halus saat di-hover */
}

.side-list-title {
    /* Ukuran font disesuaikan dengan gambar yang lebih besar */
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 5px 0;
}

.side-list-title a {
    color: #111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Tetap batasi 2 baris agar tidak terlalu panjang kebawah */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-list-date {
    font-size: 12px;
    color: #888;
}

.side-list-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}