/* --- 1. GLOBAL RESET --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }


/* --- 2. LOGIKA TAMPILAN (VISIBILITY) - PERBAIKAN --- */
/* Kita gunakan !important agar aturan ini menang 
   melawan 'display: flex' yang ada di header-desktop/mobile.css
*/

/* KONDISI DEFAULT (LAYAR KECIL / HP): 
   - Tampilkan Header Mobile
   - Sembunyikan Header Desktop 
*/
.d-desktop { 
    display: none !important; 
}
.d-mobile { 
    display: block !important; 
}


/* KONDISI LAYAR BESAR (LAPTOP / PC > 768px): 
   - Tampilkan Header Desktop
   - Sembunyikan Header Mobile
*/
@media (min-width: 769px) {
    .d-desktop { 
        display: block !important; 
    }
    .d-mobile { 
        display: none !important; 
    }
}

/* =========================================
   RESPONSIF GLOBAL (WAJIB)
   ========================================= */

/* Agar gambar tidak pernah melebihi lebar layar HP */
img {
    max-width: 100%;
    height: auto;
}

/* Agar video (YouTube dll) juga responsif */
iframe, embed, object, video {
    max-width: 100%;
}

/* GANTI 'hidden' JADI 'clip' */
/* Ini memotong kelebihan layar TANPA mematikan fitur Sticky */
body, html {
    overflow-x: clip; 
}
/* =========================================
   STYLE JUDUL SEKSI (SERAGAM: UTAMA & SIDEBAR)
   ========================================= */
/* 1. Targetkan KEDUA judul sekaligus */
.main-news-title, 
.widget-title {
    display: flex;          /* Flexbox aktif */
    align-items: center;    /* Rata tengah vertikal */
    
    font-size: 18px;        /* Ukuran font sama */
    font-weight: 800;       /* Ketebalan sama */
    font-style: italic;     /* Miring sama */
    text-transform: uppercase; 
    color: #003399;         /* Warna Biru sama */
    letter-spacing: 0.5px;
    
    margin: 0 0 25px 0;
    padding: 0;
    border: none;
    line-height: 1.2;
}

/* 2. Membuat Garis Panjang (Otomatis di KEDUA judul) */
.main-news-title::after,
.widget-title::after {
    content: "";
    flex-grow: 1;           /* Garis mengisi sisa ruang */
    height: 2px;            /* Tebal garis */
    background-color: #003399; /* Warna garis */
    margin-left: 15px;      /* Jarak teks ke garis */
    opacity: 0.6;           /* Transparansi garis */
}

/* 3. KOREKSI KHUSUS (Penting!) */

/* Sembunyikan garis manual HTML di index.php (agar tidak double garis) */
.main-news-line {
    display: none !important;
}

/* Reset container header di index.php agar rapi */
.main-news-header {
    display: block; 
    margin-bottom: 0;
}

/* 2. List Artikel */
.news-list-item {
    display: flex;
    gap: 25px;              /* Jarak antar gambar & teks */
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee; /* Garis pemisah halus */
}

/* Gambar Thumbnail */
.news-thumb {
    width: 220px;           /* Lebar desktop (agak lebar) */
    height: 135px;          /* Tinggi proporsional */
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}

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

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

/* 3. Konten Teks */
.news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Rata atas */
}

/* Kategori (Kecil Biru) */
.news-cat {
    margin-bottom: 8px;
    line-height: 1;
}

.news-cat a {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #003399; /* Biru */
    text-decoration: none;
    letter-spacing: 1px;
}

/* Judul Artikel */
.news-title {
    font-size: 20px;        /* Ukuran font judul desktop */
    font-weight: 700;       /* Tebal */
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.news-title a {
    text-decoration: none;
    color: #111;
    /* LOGIKA PEMBATASAN 3 BARIS */
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* Maksimal 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Sembunyikan teks sisa */
    text-overflow: ellipsis;    /* Tambahkan titik-titik (...) */
}

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

/* Meta Tanggal */
.news-meta {
    font-size: 13px;
    color: #888;
    margin-top: auto; /* Dorong ke bawah jika konten pendek */
}

/* --- RESPONSIF MOBILE (HP) --- */
@media (max-width: 768px) {
    /* Header di Mobile */
    .main-news-title { font-size: 16px; }
    
    /* Gambar di Mobile lebih kecil */
    .news-thumb {
        width: 100px;
        height: 100px;
        /* Menghilangkan radius (sudut menjadi tajam/siku) */
        border-radius: 0; 
        /* PENTING: Wajib pakai ini karena Anda mengubah ukuran jadi kotak (1:1) */
        object-fit: cover; 
    }
    
    /* Judul di Mobile lebih kecil */
    .news-title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .news-list-item {
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}

/* =========================================
   FIX JARAK BERITA TERKINI (SOLUSI FINAL)
   ========================================= */

@media (max-width: 991px) {
    
    .main-news-header {
        /* Menggunakan PADDING (Jarak Dalam) karena Margin sering gagal/tenggelam */
        padding-top: 25px !important; 
        
        /* Memaksa elemen ini membersihkan semua elemen 'mengambang' di atasnya */
        clear: both !important;
        
        /* Memastikan blok ini mengisi lebar penuh agar jaraknya valid */
        display: block !important;
        width: 100%;
        
        /* Opsional: Beri border transparan sebagai pembatas fisik */
        border-top: 1px solid transparent; 
    }

}

/* =========================================
   STYLE SLIDER (16:9 FULL WIDTH & NO GAP)
   ========================================= */

.slider-container {
    width: 100%;
    margin-bottom: 30px;
    position: relative; /* Untuk konteks layout */
}

.slider-wrapper {
    display: flex;
    gap: 0;                     /* KUNCI 1: Tidak ada jarak antar gambar */
    overflow-x: auto;           /* Scroll ke samping aktif */
    scroll-snap-type: x mandatory; 
    padding-bottom: 0;          /* Hapus padding bawah */
    scrollbar-width: none;      /* Sembunyikan scrollbar (Firefox) */
    -ms-overflow-style: none;   /* Sembunyikan scrollbar (IE/Edge) */
}

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

/* --- ITEM SLIDER --- */
.slider-item {
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;   /* Magnet pas di awal gambar */
    flex-shrink: 0;
    
    /* KUNCI 2: TAMPIL 1 GAMBAR PENUH */
    min-width: 100%;            
    
    /* KUNCI 3: RASIO 16:9 */
    aspect-ratio: 16 / 9;       /* Otomatis menghitung tinggi sesuai lebar agar 16:9 */
    height: auto;               /* Reset tinggi manual */
    
    border-radius: 0 !important; /* Sudut tajam */
}

/* Background Gambar */
.slider-bg {
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center;
    transition: transform 0.5s ease;
}

.slider-item:hover .slider-bg { transform: scale(1.05); }

/* Overlay Teks */
.slider-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 25px; 
    color: #fff;
    pointer-events: none;
}

.slider-cat {
    font-size: 11px; 
    background: #c30000; 
    padding: 4px 10px; 
    color: #fff; 
    text-transform: uppercase; 
    font-weight: 700;
    margin-bottom: 10px; 
    display: inline-block;
    border-radius: 0;
}

.slider-title { 
    font-size: 20px; /* Font lebih besar karena gambarnya besar */
    margin: 0; 
    color: #fff; 
    line-height: 1.3;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
}

/* --- RESPONSIF --- */
@media (max-width: 768px) {
    .slider-title { font-size: 16px; } /* Sesuaikan font di HP */
    .slider-overlay { padding: 15px; }
    
    /* Di HP tetap 16:9 atau mau lebih kotak? 
       Biarkan default (aspect-ratio: 16/9) agar konsisten wide. */
}

/* --- 2. EDITOR PICK STYLE --- */
.home-editor-section { margin-bottom: 30px; }

/* Header "● PILIHAN EDITOR" */
.editor-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}

.editor-dot { font-size: 18px; color: #000; } /* Titik Hitam */
.editor-heading {
    font-size: 16px; font-weight: 800; text-transform: uppercase;
    font-style: italic; margin: 0; letter-spacing: 1px; color: #333;
}

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

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

.editor-thumb {
    width: 100%; height: 100px; /* Tinggi gambar editor */
    border-radius: 8px; overflow: hidden; margin-bottom: 10px;
}
.editor-thumb img { width: 100%; height: 100%; object-fit: cover; }

.editor-cat {
    font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase;
    margin-bottom: 3px; display: block;
}

/* Update Bagian Judul Editor Pick */
.editor-title { 
    font-size: 15px; 
    font-weight: 700; 
    line-height: 1.35; /* Jarak antar baris */
    margin: 0; 
}

.editor-title a { 
    text-decoration: none; 
    color: #111; 
    
    /* LOGIKA PEMBATASAN 3 BARIS */
    display: block;             /* Wajib agar line-clamp jalan */
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* Maksimal 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Sembunyikan sisa teks */
    text-overflow: ellipsis;    /* Munculkan titik (...) */
    
    /* Opsional: Batasi tinggi agar potongan rapi */
    max-height: 4.05em;         /* 1.35 line-height x 3 baris = 4.05em */
}

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


/* --- DESKTOP ADJUSTMENT (Layar Besar) --- */
@media (min-width: 769px) {
    .slider-item { min-width: 48%; height: 350px; } /* Di Desktop jadi 2 slide */
    .slider-title { font-size: 24px; }
    
    .editor-grid { grid-template-columns: repeat(4, 1fr); } /* Desktop jadi 4 kolom */
    .editor-thumb { height: 120px; }
}

/* =========================================
   RESPONSIF MOBILE: EDITOR PICK (CLEAN / NO CARD)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. AREA WIDGET (Tetap ada background abu agar terpisah) */
    .home-widget-section {
        background-color: #f4f5f7; 
        padding: 15px 0 25px 0;    
        
        /* Margin Negatif kiri-kanan */
        margin-left: -20px;        
        margin-right: -20px;
        
        margin-top: 0; 
        margin-bottom: -40px;
    }

    /* 2. HEADER JUDUL */
    .editor-header {
        padding: 0 20px;           
        margin-bottom: 15px;
        border: none;
    }

    /* 3. CONTAINER SLIDER */
    .editor-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px;                 /* Jarak antar artikel */
        padding: 0 20px;           /* Padding container kiri-kanan */
        
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .editor-grid::-webkit-scrollbar { display: none; }

    /* 4. ITEM ARTIKEL (RESET STYLE KARTU) */
    .editor-item {
        /* Ukuran: 75% layar */
        flex: 0 0 75%;             
        max-width: 260px;          
        
        /* HAPUS BACKGROUND PUTIH & SHADOW (NO CARD) */
        background-color: transparent; 
        box-shadow: none;
        border-radius: 0;
        
        scroll-snap-align: center; 
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        
        margin-left: 0;
        margin-right: 0;
    }

    /* Gambar */
    .editor-thumb {
        height: 150px;
        /* Tambahkan radius di gambar saja biar rapi */
        border-radius: 8px; 
        margin-bottom: 10px; /* Beri jarak antara gambar ke teks */
    }

    /* Teks Info */
    .editor-info {
        /* HAPUS padding karena sudah tidak ada kotak putih */
        padding: 0;        
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .editor-cat { 
        font-size: 10px; 
        margin-bottom: 5px; 
    }
    
    .editor-title { 
        font-size: 14px; 
        line-height: 1.4;
        font-weight: 700;
        /* Batasi 2 baris */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =========================================
   FIX JARAK ATAS SLIDER (MOBILE)
   ========================================= */

@media (max-width: 768px) {
    
    /* Menurunkan Slider agar tidak nempel Header */
    .slider-container {
        margin-top: 30px; /* Ubah angka ini jika kurang turun (misal: 40px) */
    }

}

/* --- PAGINATION STYLE: CLEAN BLACK & WHITE (SMALLER) --- */

/* 1. Wadah Utama */
.navigation.pagination {
    margin: 40px 0; /* Jarak atas-bawah dikurangi sedikit */
    text-align: center;
    width: 100%;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px; /* Jarak antar kotak dirapatkan */
    flex-wrap: wrap;
}

/* 2. Style Dasar (Kotak Putih Garis Tipis) */
.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: #fff;
    border: 1px solid #e5e5e5;
    color: #333;
    
    /* UKURAN BARU: LEBIH KECIL */
    font-size: 13px; /* Font dikecilkan dari 14px */
    min-width: 35px; /* Lebar dari 45px jadi 35px */
    height: 35px;    /* Tinggi dari 45px jadi 35px */
    padding: 0 4px;
    
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    border-radius: 4px; 
    transition: all 0.2s ease;
}

/* 3. Efek Hover */
.page-numbers:not(.current):hover {
    border-color: #999;
    color: #000;
}

/* 4. Halaman Aktif (Kotak Hitam) */
.page-numbers.current {
    background-color: #000;
    color: #fff;
    border-color: #000;
    cursor: default;
}

/* 5. Khusus Tombol Back & Next */
.page-numbers.prev, 
.page-numbers.next {
    width: auto;      /* Lebar otomatis mengikuti teks */
    padding: 0 15px;  /* Padding dikurangi dari 20px jadi 15px */
    font-weight: 400;
}

.nav-icon {
    display: inline-block;
    margin: 0 3px;
    font-family: monospace;
}

/* 6. Titik-titik (...) */
.page-numbers.dots {
    border: none;
    background: transparent;
    color: #777;
    min-width: auto;
    height: auto; /* Tinggi auto agar tidak makan tempat */
}

/* --- RESPONSIF MOBILE --- */
@media (max-width: 768px) {
    .page-numbers {
        /* Di HP dikecilkan lagi sedikit */
        min-width: 32px; 
        height: 32px;
        font-size: 12px;
    }
    .page-numbers.prev, 
    .page-numbers.next {
        padding: 0 10px;
    }
}
/* --- FOOTER STYLE --- */

.site-footer {
    background-color: #f9f9f9; /* Warna latar abu muda */
    padding: 50px 20px 30px;
    color: #333;
    border-top: 1px solid #007bff; /* Garis biru di paling atas footer (opsional) */
    text-align: center; /* PENTING: Membuat semua elemen rata tengah */
}

.footer-container {
    max-width: 800px; /* Lebar konten tidak terlalu lebar agar enak dibaca */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Flexbox center */
}

/* 1. Logo */
.footer-logo img {
    max-width: 200px; /* Ukuran maksimal logo */
    height: auto;
    margin-bottom: 20px;
}

/* 2. Deskripsi */
.footer-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

/* 3. Kontak (Phone & Email) */
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    font-size: 14px;
}

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

/* 4. Sosial Media */
.social-heading {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- UPDATE SOSIAL MEDIA (FIXED v1.2) --- */

.social-icons {
    display: flex;
    justify-content: center; /* Posisi Tengah */
    align-items: center;
    gap: 10px; /* Jarak antar ikon rapat */
    margin-bottom: 30px;
}

.soc-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* UKURAN KECIL (Sesuai Request) */
    width: 30px;   
    height: 30px;
    
    color: #fff; /* Warna Ikon Putih */
    border-radius: 4px; /* Sudut sedikit melengkung */
    text-decoration: none; /* Wajib: Hapus garis bawah link */
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Bayangan tipis biar timbul */
}

/* Memastikan ikon SVG proporsional */
.soc-icon svg {
    width: 16px; 
    height: 16px;
    fill: currentColor; /* Warna ikon mengikuti text (putih) */
    stroke: none; /* Hilangkan garis pinggir default */
}

/* EFEK HOVER (Interaktif) */
.soc-icon:hover {
    transform: translateY(-3px); /* Naik sedikit */
    filter: brightness(1.2);     /* Warna jadi lebih terang/menyala saat disentuh */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Bayangan menebal */
}

/* --- WARNA BRAND ASLI (Tampil Permanen) --- */
/* Instagram: Gradasi Pink-Ungu Khas */
.soc-icon.instagram { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}

/* --- PERBAIKAN KHUSUS ICON INSTAGRAM --- */
/* Ikon IG itu garis, bukan blok. Jadi Fill harus dimatikan */
.soc-icon.instagram svg {
    fill: none !important;        /* Jangan diisi warna blok */
    stroke: #fff !important;      /* Tapi gunakan Garis (Stroke) putih */
    stroke-width: 2px !important; /* Ketebalan garis */
}

/* Facebook: Biru */
.soc-icon.facebook  { background: #1877F2; }
/* Twitter/X: Hitam */
.soc-icon.twitter   { background: #000000; }

/* 5. Garis Tipis */
.footer-separator {
    width: 100%;
    height: 1px;
    background-color: #ddd; /* Warna garis abu tipis */
    margin-bottom: 20px;
}

/* 6. Copyright */
.footer-copyright {
    font-size: 13px;
    margin-bottom: 10px;
    color: #666;
}

/* 7. Footer Menu (About, dll) */
.footer-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.footer-nav-links li a {
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.footer-nav-links li a:hover {
    color: #007bff;
}

/* --- RESPONSIF MOBILE --- */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 15px 20px;
    }
    
    .footer-contact {
        flex-direction: column; /* Kontak turun ke bawah di HP */
        gap: 10px;
    }
    
    .footer-nav-links {
        gap: 10px;
    }
}


@media (min-width: 992px) {
    /* --- STICKY SIDEBAR --- */
    /* Saya masukkan beberapa kemungkinan nama class sidebar agar kena sasaran */
    #secondary, .widget-area, .sidebar-main, aside {
        position: -webkit-sticky; /* Support untuk Safari lama */
        position: sticky;
        top: 100px; /* Jarak dari langit-langit browser */
        
        /* KUNCI SUPAYA WORK: */
        align-self: flex-start; 
        height: auto !important; /* Memaksa tinggi sesuai isinya saja, bukan setinggi artikel */
    }

    /* --- STICKY HEADER --- */
    /* Pastikan salah satu class ini benar ada di header Anda */
    #masthead, .site-header, header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 9999;
        background: #fff; /* Header wajib punya warna background */
    }
}

/* =========================================
   PERBAIKAN STICKY (DESKTOP ONLY)
   Taruh kode ini di paling bawah style.css
   ========================================= */

@media (min-width: 992px) {

/* --- HEADER (Layer Paling Atas) --- */
.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    
    /* Z-Index Sangat Tinggi */
    z-index: 99999 !important; 
    
    /* Pastikan Background Tidak Transparan */
    background-color: #ffffff; 
    
    /* TRIK RAHASIA: Memaksa browser membuat layer baru untuk header */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Bayangan agar batasnya jelas */
}

/* --- SIDEBAR (Layer Belakang) --- */
.widget-area {
    position: sticky;
    position: -webkit-sticky;
    
    /* Sesuaikan dengan tinggi header Anda */
    top: 100px; 
    align-self: flex-start;
    height: auto;
    
    /* Z-Index Rendah (Agar lewat BELAKANG header) */
    z-index: 1 !important; 
}
	
	/* =========================================
   FIX JARAK ANTAR WIDGET SIDEBAR
   ========================================= */

/* Target semua kemungkinan class widget standar WordPress */
.widget, 
#secondary .widget, 
.widget-area .widget,
.sidebar-main aside {
    /* Memberi jarak napas 50px ke bawah sebelum widget berikutnya mulai */
    margin-bottom: 30px !important; 
    
    /* Pastikan widget dianggap blok terpisah */
    display: block;
    clear: both;
}

/* Opsional: Jika widget terakhir di sidebar tidak butuh jarak */
.widget:last-child {
    margin-bottom: 0 !important;
}
	
	/* =========================================
   FIX JARAK ANTAR WIDGET (KHUSUS MOBILE & TABLET)
   ========================================= */
@media (max-width: 991px) {
    
    /* Target semua widget di dalam area sidebar/secondary */
    .widget, 
    #secondary .widget, 
    .widget-area .widget,
    aside .widget {
        
        /* Kita paksa jarak bawah 50px */
        margin-bottom: 30px !important;
        
        /* Tambahkan padding bawah sebagai cadangan jika margin gagal */
        padding-bottom: 20px !important;
        
        /* Trik 'border transparan' untuk mencegah margin collapse di HP */
        border-bottom: 1px solid transparent !important;
        
        /* Pastikan widget memblokir baris penuh */
        display: block !important;
        width: 100%;
        clear: both;
    }

    /* Opsi Tambahan: Jika masih bandel, kita dorong judul widgetnya langsung */
    .widget-title {
        margin-top: -20px !important;
    }
}