/* =========================================
   1. LAYOUT UTAMA (SIDEBAR LEBAR)
   ========================================= */

.site-content-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 50px; /* Jarak antar kolom */
}

/* Bagian Kiri (Artikel Utama - 2/3) */
.site-main {
    flex: 2; 
    min-width: 0;
}

/* Bagian Kanan (Sidebar - 1/3) */
.widget-area {
    flex: 1; 
    min-width: 320px;
}

/* =========================================
   STYLING JUDUL WIDGET (GAYA TRENDING)
   ========================================= */

.widget-title {
    /* Menggunakan Flexbox untuk menyejajarkan teks dan garis */
    display: flex;
    align-items: center; /* Teks dan garis rata tengah secara vertikal */
    
    /* Styling Teks */
    font-size: 18px;
    font-weight: 800;       /* Sangat Tebal */
    text-transform: uppercase; /* Huruf Kapital Semua */
    color: #003399;         /* Warna Biru Tua (Sesuaikan dengan tema Anda) */
    letter-spacing: 1px;    /* Jarak antar huruf */
    margin: 0 0 25px 0;     /* Hapus margin bawaan, beri jarak bawah */
    padding: 0;             /* Hapus padding bawaan */
    border: none;           /* Hapus border bawah yang lama */
}

/* Membuat Garis di Samping Teks */
.widget-title::after {
    content: "";            /* Wajib ada untuk elemen semu */
    flex-grow: 1;           /* Garis akan mengisi sisa ruang kosong di kanan */
    height: 2px;            /* Ketebalan garis */
    background-color: #003399; /* Warna garis (samakan dengan warna teks) */
    margin-left: 15px;      /* Jarak antara teks dan garis */
}

/* =========================================
   3. ITEM SIDEBAR POST (MODERN LIST)
   ========================================= */

.sidebar-post-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Jarak antar berita diperlebar karena gambar makin besar */
}

.sidebar-post-item {
    display: flex !important;       
    flex-direction: row;            
    justify-content: space-between; 
    align-items: flex-start;        
    gap: 20px; 
}

/* --- Kiri: Teks --- */
.sp-content {
    flex: 1; /* Mengisi sisa ruang */
}

.sp-title {
    font-size: 16px;     
    font-weight: 700;    
    line-height: 1.4;    
    margin: 0 0 8px 0;   
}

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

.sp-title a:hover {
    color: #003399;      
}

.sp-meta {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    margin-top: 5px;
    display: block;
}

.sp-author {
    color: #003399;
    text-transform: uppercase;
}

/* --- Kanan: Gambar (KOTAK BESAR) --- */
.sp-thumb {
    /* UPDATE DISINI: Ukuran dibuat sama agar KOTAK */
    width: 125px;      
    height: 125px;     
    
    flex-shrink: 0;    /* Gambar tidak boleh tergencet */
    border-radius: 8px; /* Sudut sedikit lebih membulat */
    overflow: hidden; 
    background: #f0f0f0;
}

.sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* KUNCI: Gambar di-crop rapi memenuhi kotak */
    display: block;
    transition: transform 0.3s;
}

.sp-thumb:hover img {
    transform: scale(1.1); /* Efek zoom sedikit saat hover */
}

.sp-no-img {
    width: 100%; height: 100%; background-color: #eee;
}

/* ... Kode CSS sidebar bagian atas biarkan saja ... */

/* =========================================
   RESPONSIF: TABLET & MOBILE (Max 991px)
   ========================================= */
@media (max-width: 991px) {
    
    /* 1. Ubah Layout jadi Tumpuk (Atas-Bawah) */
    .site-content-container {
        flex-direction: column; /* Artikel di atas, Sidebar di bawah */
        gap: 40px;
        padding: 0 15px; /* Kurangi padding kiri-kanan agar lega */
        margin-top: 20px;
    }
    
    /* 2. Reset Lebar Kolom */
    .site-main, .widget-area {
        flex: none;     /* Matikan rasio flex */
        width: 100%;    /* Lebar penuh */
        min-width: 0;   /* Reset minimal lebar */
    }

    /* 3. Perbaikan Tampilan Widget di Mobile */
    .widget-title {
        font-size: 18px; /* Kecilkan sedikit font judul */
        margin-bottom: 15px;
    }

    /* 4. Perbaikan List Artikel Sidebar di Mobile */
    .sidebar-post-item {
        align-items: center; /* Rata tengah vertikal */
    }

    .sp-thumb {
        width: 100px;  /* Perkecil sedikit thumbnail di HP */
        height: 100px;
    }

    .sp-title {
        font-size: 15px; /* Ukuran font judul artikel disesuaikan */
    }
}