/* ==========================================================================
   STYLE ARCHIVE - HASHTAG HEADER, MODERN LIST & TRUNCATE TITLE
   ========================================================================== */

/* --- Container Utama --- */
.archive-page {
    display: flex !important;
    max-width: 1100px !important;
    margin: 30px auto !important;
    gap: 30px !important;
    padding: 0 15px !important;
}

.content-area {
    flex: 1 !important;
}

/* --- Header Kategori dengan Hashtag & Garis --- */
.archive-header-custom {
    margin-bottom: 30px !important;
}

.archive-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.archive-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #111 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.hashtag {
    color: #111 !important;
    margin-right: 4px !important;
}

.title-line {
    flex-grow: 1 !important;
    height: 3px !important;
    background-color: #111 !important;
    margin-top: 5px !important;
}

/* --- List Item Artikel --- */
.archive-item {
    display: flex !important;
    gap: 20px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.archive-thumb {
    flex: 0 0 220px !important;
}

.archive-thumb img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

/* --- Kategori & Warna Pemisah (Hitam Elegan) --- */
.archive-cat {
    font-size: 11px !important;
    display: block !important;
    margin-bottom: 5px !important;
}

.archive-cat a, 
.archive-cat a:visited {
    color: #444444 !important; /* Hitam elegan */
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

.archive-cat a:hover {
    color: #2b4191 !important;
}

.archive-cat .sep {
    color: #cccccc !important;
    margin: 0 6px !important;
    font-weight: 300 !important;
    display: inline-block !important;
}

/* --- Judul Artikel (Dibatasi 3 Baris) --- */
.archive-entry-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    
    /* KODE UNTUK MEMBATASI 3 BARIS & TITIK-TITIK */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.archive-entry-title a {
    color: #222 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.archive-entry-title a:hover {
    color: #2b4191 !important;
}

.archive-date {
    font-size: 12px !important;
    color: #888 !important;
}

/* ==========================================================================
   OPTIMASI MOBILE - FULL WIDTH (BEBAS DARI BOX & TIDAK MENYUSUT)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Bebaskan pembungkus utama dari efek "Box" dan margin tengah */
    .main-container, 
    .content-area, 
    .archive-page {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;      /* Hapus margin auto yang bikin ke tengah */
        padding: 0 !important;     /* Hapus padding luar agar tidak jadi box */
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* 2. Beri jarak aman HANYA pada list-nya, bukan di luar */
    .archive-list {
        width: 100% !important;
        padding: 0 15px !important; /* Ini jarak aman agar teks tidak nabrak bezel HP */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. Format List Artikel (Merentang Bebas) */
    .archive-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 15px !important;
        padding: 15px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important; /* Garis pemisah halus */
        box-sizing: border-box !important;
    }

    /* 4. Thumbnail Tetap Kotak */
    .archive-thumb {
        flex: 0 0 110px !important;
        max-width: 110px !important;
    }

    .archive-thumb img {
        width: 110px !important;
        height: 110px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* 5. Teks Rata Kiri & Mengisi Sisa Ruang */
    .archive-text {
        flex: 1 1 0% !important; 
        min-width: 0 !important; /* Mencegah teks terpotong */
        width: 100% !important;
        text-align: left !important; /* Memaksa teks rata kiri, BUKAN tengah */
        box-sizing: border-box !important;
    }

    /* Header Kategori Mobile */
    .archive-header-custom {
        padding: 15px 15px 0 15px !important;
        margin-bottom: 15px !important;
    }

    .archive-title {
        font-size: 18px !important;
    }

    /* Penyesuaian Font Mobile */
    .archive-entry-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        /* Dibatasi 3 baris */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-wrap: break-word !important;
    }
    
    .archive-date {
        font-size: 11px !important;
        display: block !important;
    }
	
	/* ==========================================================================
       FIX SIDEBAR BAWAH AGAR TIDAK HANCUR/MELUBER DI MOBILE
       ========================================================================== */

    /* 1. Kembalikan jarak aman (padding) khusus untuk area Sidebar / Widget */
    .sidebar, 
    .widget-area, 
    #secondary,
    aside {
        padding: 0 15px 30px 15px !important; /* Kiri-kanan 15px agar tidak nabrak tepi HP */
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 20px !important;
        overflow-x: hidden !important; /* Mengunci rapat agar tidak ada yang meluber ke kanan */
    }

    /* 2. Pastikan susunan gambar/grid di dalam widget (seperti 'Nasional') tetap proporsional */
    .sidebar img, 
    .widget-area img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* 3. Jika widget menggunakan 'row' yang punya margin bawaan, kita nol-kan */
    .sidebar .row,
    .widget-area .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}