/* =================================================================== */
/* === STYLING UNTUK HALAMAN PENULIS (AUTHOR.PHP) === */
/* =================================================================== */

/* Kotak Profil Penulis */
.author-profile-box {
    display: flex;
    flex-direction: column; /* Tumpuk di mobile */
    gap: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.author-avatar img {
    border-radius: 50%; /* Membuat gambar bulat */
    display: block;
    margin: 0 auto; /* Tengah di mobile */
}

.author-info {
    text-align: center; /* Tengah di mobile */
}

.author-profile-label {
    font-size: 14px;
    font-weight: 500;
    color: #777;
    display: block;
}

.author-title {
    font-size: 28px;
    margin: 5px 0;
}

.author-post-count {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 15px;
}

.author-bio {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.author-social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}



/* =================================================================== */
/* === STYLING BARU UNTUK ICON SOSIAL MEDIA (AUTHOR.PHP) === */
/* =================================================================== */

/* Aturan dasar untuk semua tombol icon */
.author-social-links .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 5px; /* DIUBAH: Dari bulat menjadi kotak dengan sudut tumpul */
    color: #fff; /* Warna icon menjadi putih agar kontras */
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Efek saat kursor mouse di atas icon */
.author-social-links .social-link:hover {
    transform: translateY(-2px); /* Efek sedikit terangkat saat hover */
    filter: brightness(95%); /* Sedikit lebih gelap saat hover */
}

/* Warna Asli Masing-Masing Brand */
.author-social-links .social-link.facebook {
    background-color: #1877F2;
}
.author-social-links .social-link.instagram {
    background-color: #E4405F;
}
.author-social-links .social-link.twitter {
    background-color: #000000;
}
.author-social-links .social-link.telegram {
    background-color: #24A1DE;
}
.author-social-links .social-link.whatsapp {
    background-color: #25D366;
}
.author-social-links .social-link.youtube {
    background-color: #FF0000;
}



/* =================================================================== */
/* === KODE LENGKAP PROFIL PENULIS (MOBILE & DESKTOP) === */
/* =================================================================== */

/* --- Gaya Dasar (Berlaku untuk Mobile) --- */

.author-profile-box {
    display: flex;
    flex-direction: row; 
    align-items: flex-start; 
    gap: 15px; /* Jarak antara avatar dan info */
    background-color: #f9f9f9; /* Ganti warna background di sini */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    border-radius: 50%; 
    display: block;
    width: 70px; /* Atur ukuran gambar avatar di mobile */
    height: 70px;
}

.author-info {
    text-align: left; 
}

.author-profile-label {
    font-size: 13px; /* Atur ukuran teks 'Profil Penulis' */
    font-weight: 500;
    color: #777;
    display: block;
}

.author-title {
    font-size: 20px; /* Atur ukuran nama penulis di mobile */
    margin: 2px 0 5px 0;
}

.author-post-count {
    font-size: 13px; /* Atur ukuran teks '... Artikel' */
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.author-bio {
    font-size: 14px; /* Atur ukuran bio penulis */
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Ikon Sosial Media */
.author-social-links {
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-start; 
    gap: 8px;
}

.author-social-links .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;      /* Atur lebar ikon sosmed di mobile */
    height: 32px;     /* Atur tinggi ikon sosmed di mobile */
    font-size: 16px;  /* Atur ukuran simbol di dalam ikon */
    border-radius: 6px; /* Atur kelengkungan sudut ikon */
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.author-social-links .social-link:hover {
    transform: translateY(-2px);
}

/* Judul "Tulisan Terbaru" - GAYA BARU */
/* Menggunakan selector yang lebih spesifik agar tidak bentrok */
    .author .section-title {
        font-size: 15px; /* SEKARANG Anda bisa mengubah ukuran ini dan akan berhasil */
    }
.section-title {
    font-size: 18px; /* Ukuran disesuaikan */
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 6px solid #cc0000; /* Garis merah tebal di kiri */
    padding-left: 12px; /* Jarak antara garis dan teks */
    text-transform: uppercase; /* Membuat teks menjadi huruf besar semua */
    display: inline-block;
}


/* Warna Asli Masing-Masing Brand */
.author-social-links .social-link.facebook  { background-color: #1877F2; }
.author-social-links .social-link.instagram { background-color: #E4405F; }
.author-social-links .social-link.twitter   { background-color: #000000; }
.author-social-links .social-link.telegram  { background-color: #24A1DE; }
.author-social-links .social-link.whatsapp  { background-color: #25D366; }
.author-social-links .social-link.youtube   { background-color: #FF0000; }


/* --- Penyesuaian untuk Desktop (Layar 769px ke atas) --- */
@media (min-width: 769px) {

	 /* 1. Mengatur background kotak profil */
    .author-profile-box {
        background-color: #ffffff; /* Ganti kode warna abu-abu ini sesuai selera */
    }
    .author-profile-box {
        gap: 25px;
        padding: 20px;
        align-items: center;
    }

    .author-avatar img {
        width: 96px; /* Atur ukuran gambar avatar di desktop */
        height: 96px;
    }

    .author-title {
        font-size: 24px; /* Atur ukuran nama penulis di desktop */
    }

    .author-post-count,
    .author-bio {
        font-size: 14px; /* Atur ukuran teks artikel & bio di desktop */
    }

    .author-social-links .social-link {
        width: 25px;      /* Atur lebar ikon sosmed di desktop */
        height: 25px;     /* Atur tinggi ikon sosmed di desktop */
        font-size: 14px;  /* Atur ukuran simbol di dalam ikon */
        border-radius: 5px; /* Atur kelengkungan sudut ikon */
    }

    .section-title {
        font-size: 20px; /* Atur ukuran judul 'Tulisan Terbaru' di desktop */
    }
}

/* =================================================================== */
/* === KUSTOMISASI PROFIL PENULIS (MOBILE) === */
/* =================================================================== */

@media (max-width: 768px) {

    /* 1. Mengatur background kotak profil */
    .author-profile-box {
        background-color: #ffffff; /* Ganti kode warna abu-abu ini sesuai selera */
    }

    /* 2. Mengatur besar kecilnya nama penulis */
    .author-title {
        font-size: 15px; /* Ubah angka 20px ini untuk memperbesar/memperkecil */
    }
	
	.author-post-count {
        font-size: 10px; /* Atur ukuran teks artikel & bio di desktop */
    }

    /* 3. Mengatur ukuran ikon sosial media */
    .author-social-links .social-link {
        width: 25px;      /* Ubah angka ini untuk lebar ikon */
        height: 25px;     /* Ubah angka ini untuk tinggi ikon */
        font-size: 13px;  /* Ubah angka ini untuk ukuran icon di dalamnya */
    }

	/* Judul "Tulisan Terbaru" - GAYA BARU */
.section-title {
    font-size: 17px; /* Ukuran disesuaikan */
    font-weight: 700;
    margin-bottom: 29px;
    border-left: 6px solid #cc0000; /* Garis merah tebal di kiri */
    padding-left: 12px; /* Jarak antara garis dan teks */
    text-transform: uppercase; /* Membuat teks menjadi huruf besar semua */
    display: inline-block;
}
	
}

/* =================================================================== */
/* === STYLING KHUSUS UNTUK TEMPLATE HALAMAN (PAGE.PHP) === */
/* =================================================================== */

/* 1. Layout Dua Kolom untuk Desktop */
.page-container {
    display: flex;
    gap: 40px; /* Jarak antara sidebar kiri dan konten kanan */
    padding: 30px 0; /* Jarak atas dan bawah */
}

.page-sidebar {
    flex-shrink: 0; /* Mencegah sidebar menyusut */
    width: 280px;  /* Lebar sidebar kiri */
}

.page-content-area {
    flex-grow: 1; /* Konten kanan mengambil sisa ruang */
    min-width: 0; /* Mencegah konten meluber */
}

/* 2. Styling Menu Navigasi di Sidebar Kiri */
.page-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-navigation li a {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 14px 15px; 
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0; 
    transition: background-color 0.2s, color 0.2s;
    font-weight: 600; 
    font-size: 15px;
}

.page-navigation li:last-child a {
    border-bottom: none; 
}

.page-navigation li a:hover {
    background-color: #f9f9f9;
    color: #cc0000;
}

/* 3. Menambahkan Icon Panah (Chevron) di Kanan */
.page-navigation li a::after {
    content: '\f054'; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900; 
    font-size: 13px;
    color: #aaa;
    transition: color 0.2s;
}

.page-navigation li a:hover::after {
    color: #cc0000;
}

/* 4. Memberi Tanda pada Halaman yang Sedang Aktif */
.page-navigation li.current_page_item > a {
    color: #cc0000; 
    background-color: #fff;
    font-weight: 700;
}

.page-navigation li.current_page_item > a::after {
    color: #cc0000; 
}


/* 5. Aturan Responsif (Desktop & Mobile) */

/* 5.1. Di Desktop (layar 901px ke atas), SEMBUNYIKAN judul */
@media (min-width: 901px) {
    .page .entry-header {
        display: none;
    }
}

/* 5.2. Di Mobile (layar 900px ke bawah) */
@media (max-width: 900px) {
    /* Sembunyikan sidebar kiri */
    .page-sidebar {
        display: none; 
    }

    .page-container {
        padding: 15px 0; /* Kurangi padding di mobile */
    }

    /* Tampilkan dan atur gaya judul */
    .page .entry-header {
        margin-bottom: 15px; 
        padding: 10px 0 0 0; 
    }
    
    .page .entry-title {
        font-size: 28px; 
        line-height: 1.3; 
        margin: 0; 
    }
}



/* =================================================================== */
/* === PENYESUAIAN DESKTOP & TYPOGRAPHY (AGUSTUS 2025) === */
/* =================================================================== */

/* 1. Perbaikan untuk Template Halaman (Desktop) */
@media (min-width: 901px) {

	
    /* 1.1. Membuat Sidebar Kiri menjadi 'Sticky' */
    .page-sidebar {
        position: -webkit-sticky; /* Untuk kompatibilitas browser lama */
        position: sticky;
        top: 20px; /* Jarak dari atas layar saat 'menempel' */
        align-self: flex-start; /* Penting untuk 'sticky' agar bekerja dengan baik di dalam flexbox */
    }

    /* 1.2. Menyejajarkan Posisi Sidebar dengan Konten */
    .page-navigation {
        padding-top: 10px; /* Menurunkan menu agar sejajar. Anda bisa ubah angka 10px ini (misal: 12px atau 8px) agar pas sempurna. */
    }

}


/* 2. Mengatur Ukuran Standar untuk Heading (Berlaku di Seluruh Website) */

/* Targetkan heading di dalam area konten utama (artikel dan halaman) */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    line-height: 1.4; /* Spasi baris yang nyaman dibaca */
    margin-top: 30px; /* Jarak dari paragraf di atasnya */
    margin-bottom: 15px; /* Jarak ke paragraf di bawahnya */
    font-weight: 700; /* Sedikit tebal */
}

.entry-content h2 {
    font-size: 20px;
}

.entry-content h3 {
    font-size: 17px;
}

.entry-content h4 {
    font-size: 18px;
}

.entry-content h5,
.entry-content h6 {
    font-size: 16px; /* Seukuran teks paragraf, tapi tebal */
}

/* =================================================================== */
/* === PENYESUAIAN MOBILE & GLOBAL (AGUSTUS 2025) === */
/* =================================================================== */

/* 1. Mengubah Warna Link di Konten Menjadi Merah (Global) */
.entry-content a {
    color: #cc0000; /* Warna merah tema Anda */
    text-decoration: underline; /* Beri garis bawah agar jelas itu link */
    font-weight: 500;
}

.entry-content a:hover {
    text-decoration: none; /* Hilangkan garis bawah saat di-hover */
}


/* --- ATURAN KHUSUS UNTUK MOBILE (Layar 768px ke bawah) --- */
@media (max-width: 768px) {
	

    /* 2. Mengecilkan Ukuran Heading (H2, H3, dst.) di Mobile */
    .entry-content h2 {
        font-size: 20px;
    }
    .entry-content h3 {
        font-size: 17px;
    }
    .entry-content h4 {
        font-size: 18px;
    }
    .entry-content h5,
    .entry-content h6 {
        font-size: 16px;
    }


    /* 3. Perbaikan Layout Halaman Statis (page.php) di Mobile */
    .page .entry-header {
        margin-bottom: 20px; /* Jarak dari judul ke konten diperkecil */
        margin-top: -35px;   /* Jarak dari atas (header) diperkecil agar konten naik */
    }
    
    .page .entry-title {
        font-size: 18px; /* Ukuran judul H1 di mobile dikecilkan sedikit */
    }
}

/* Mengatur Font Konten menjadi Sans-Serif di Seluruh Website */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content blockquote {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px
}

/* Memberi warna pada nama kategori/tag di judul halaman arsip */
.archive-term-highlight {
    color: #cc0000; /* Warna merah tema Anda */
}

/* =================================================================== */
/* === 1. GAYA DASAR HALAMAN ARSIP (DESKTOP) === */
/* =================================================================== */

/* Header Halaman (Judul Kategori/Tag) */
.archive .page-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.archive .page-title {
    font-size: 25px;
    font-weight: 700;
    margin: 0;
}

/* Deskripsi Kategori/Tag (jika ada) */
.archive-description {
    margin-top: 10px;
    font-size: 16px;
    color: #555;
}

/* Container Daftar Artikel */
.archive-results-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Item Artikel (menggunakan gaya yang sama dengan hasil pencarian) */
.archive .search-result-item-card .card-link {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}
.archive .search-result-item-card .card-thumbnail img {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    flex-shrink: 0;
}
.archive .search-result-item-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
.archive .search-result-item-card .card-link:hover .card-title {
    color: #cc0000;
}
.archive .search-result-item-card .card-meta {
    font-size: 14px;
    color: #777;
    margin-top: auto;
    padding-top: 8px;
}

/* =================================================================== */
/* === 2. PENYESUAIAN HALAMAN ARSIP (MOBILE) === */
/* =================================================================== */

@media (max-width: 768px) {

    /* Header Halaman */
    .archive .page-header {
        margin-bottom: 25px;
        padding-bottom: 15px;
    }
    .archive .page-title {
        font-size: 20px; /* Judul lebih kecil di mobile */
    }
    .archive-description {
        font-size: 15px;
    }

    /* Daftar Artikel */
    .archive-results-list {
        gap: 20px;
    }
    .archive .search-result-item-card .card-link {
        gap: 15px;
    }
    .archive .search-result-item-card .card-thumbnail img {
        width: 90px;  /* Gambar lebih kecil dan kotak */
        height: 90px;
    }
    .archive .search-result-item-card .card-title {
        font-size: 16px; /* Judul artikel lebih kecil */
    }
    .archive .search-result-item-card .card-meta {
        font-size: 13px; /* Meta lebih kecil */
    }
}

/* =================================================================== */
/* === STYLING HALAMAN PENCARIAN CANGGIH (MOBILE FIRST) === */
/* =================================================================== */

/* Layout utama tanpa sidebar */
.main-content-area-full {
    width: 100%;
}
.advanced-search-container {
    padding: 15px;
	padding: 15px 0; /* Atas-bawah 15px, Kiri-kanan 0 */
}

/* Kotak Pencarian di Atas */
.search-page-form {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}
.search-page-form .search-field {
    flex-grow: 1;
    border: none;
    padding: 12px 15px;
    font-size: 16px;
    outline: none;
}
.search-page-form .search-submit {
    background: none;
    border: none;
    padding: 0 15px;
    font-size: 18px;
    color: #555;
    cursor: pointer;
}

/* Info Jumlah Hasil */
.search-results-count {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
}
.search-results-count span {
    font-weight: 600;
    color: #333;
}

/* Tombol Filter/Sort */
.search-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}
.filter-button {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #f9f9f9;
    cursor: pointer;
}
.filter-button.active {
    background-color: #eef5ff;
    color: #cc0000;
    border-color: #b8d6fb;
}
.filter-button.icon-button {
    padding: 8px 12px;
}

/* Daftar Hasil Pencarian (Kartu) */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.search-result-item-card .card-link {
    display: flex;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}
.search-result-item-card .card-thumbnail img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 8px;
}
.search-result-item-card .card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 5px 0;
}
.search-result-item-card .card-meta {
    font-size: 12px;
    color: #777;
}
.search-result-item-card .card-meta .card-category {
    font-weight: 600;
    color: #cc0000; /* Warna merah tema */
}
.search-result-item-card .card-meta .card-date::before {
    content: '•';
    margin: 0 5px;
}

/* Styling Pop-up Filter */
.filter-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Muncul dari bawah */
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.filter-popup-container.hidden {
    opacity: 0;
    pointer-events: none; /* Tidak bisa diklik saat tersembunyi */
}
.filter-popup-content {
    background-color: #fff;
    width: 100%;
    padding: 20px;
    border-radius: 16px 16px 0 0;
    transform: translateY(0);
    transition: transform 0.3s ease;
}
.filter-popup-container.hidden .filter-popup-content {
    transform: translateY(100%); /* Geser ke bawah saat tersembunyi */
}
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.popup-header h3 { margin: 0; }
.popup-header .close-button {
    font-size: 28px;
    font-weight: 300;
    border: none;
    background: none;
    cursor: pointer;
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 5px; font-size: 14px; }
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}
.popup-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}
.popup-actions button {
    flex-grow: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.reset-button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
}
.submit-button {
    background-color: #cc0000; /* Warna merah tema */
    border: 1px solid #cc0000;
    color: #fff;
}

/* Styling Pop-up Filter (Versi Tengah Layar) */
.filter-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Latar lebih gelap sedikit */
    display: flex;
    justify-content: center;
    align-items: center; /* DIUBAH: dari flex-end menjadi center */
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
    padding: 20px; /* Menambah jarak dari tepi layar */
}
.filter-popup-container.hidden {
    opacity: 0;
    pointer-events: none; /* Tidak bisa diklik saat tersembunyi */
}
.filter-popup-content {
    background-color: #fff;
    width: 100%;
    max-width: 380px; /* Batasi lebar pop-up agar tidak terlalu besar */
    padding: 20px;
    border-radius: 12px; /* DIUBAH: Sudut tumpul di semua sisi */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    transform: scale(1); /* Animasi scale/zoom */
    transition: transform 0.3s ease;
}
.filter-popup-container.hidden .filter-popup-content {
    transform: scale(0.95); /* DIUBAH: Efek zoom out saat hilang */
}
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.popup-header h3 { 
    margin: 0;
    font-size: 18px;
}
.popup-header .close-button {
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    border: none;
    background: none;
    cursor: pointer;
    color: #888;
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 14px; }
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-size: 15px;
}
.popup-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}
.popup-actions button,
.popup-actions a.reset-button {
    flex-grow: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
a.reset-button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
}
.submit-button {
    background-color: #cc0000; /* Warna merah tema */
    border: 1px solid #cc0000;
    color: #fff;
}

/* =================================================================== */
/* === PERBAIKAN POSISI PANAH DROPDOWN DI POP-UP FILTER === */
/* =================================================================== */

/* 1. Jadikan container-nya sebagai acuan posisi */
.form-group {
    position: relative; /* Ini penting untuk posisi panah kustom */
}

/* 2. Sembunyikan panah default dan beri ruang untuk panah kustom */
.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px; /* Beri ruang di kanan agar teks tidak tertimpa panah */
}

/* 3. Buat panah kustom dengan CSS */
.form-group::after {
    content: '';
    position: absolute;
    top: 70%;
    right: 15px; /* ATUR POSISI DI SINI */
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555555'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* Agar panah bisa di-klik tembus ke select box */
}

/* =================================================================== */
/* === 1. GAYA DASAR HASIL PENCARIAN (DESKTOP) - VERSI DIPERBARUI === */
/* =================================================================== */

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.search-result-item-card .card-link {
    display: flex;
    gap: 25px;
    align-items: flex-start; /* DIUBAH: Agar konten sejajar dari atas */
    text-decoration: none;
    color: inherit;
}
.search-result-item-card .card-thumbnail img {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    flex-shrink: 0; /* Mencegah gambar menyusut */
}

/* BARU: Container untuk judul dan meta, menggunakan Flexbox */
.search-result-item-card .card-content {
    display: flex;
    flex-direction: column; /* Menyusun item secara vertikal */
    justify-content: space-between; /* Mendorong judul ke atas dan meta ke bawah */
    flex-grow: 1; /* Memastikan container ini mengisi ruang yang tersedia */
}

.search-result-item-card .card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    transition: color 0.2s;
    margin: 0; /* DIUBAH: Margin bawah dihapus */

    /* --- Kode untuk membatasi judul menjadi 3 baris --- */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Jumlah baris maksimal */
    -webkit-box-orient: vertical;
}
.search-result-item-card .card-link:hover .card-title {
    color: #cc0000;
}
.search-result-item-card .card-meta {
    font-size: 14px;
    color: #777;
    margin-top: 8px; /* Memberi sedikit jarak dari judul jika judulnya pendek */
}
.search-result-item-card .card-meta .card-category {
    font-weight: 600;
    color: #555;
}
.search-result-item-card .card-meta .card-date::before {
    content: '•';
    margin: 0 6px;
}

/* =================================================================== */
/* === 2. PENYESUAIAN HASIL PENCARIAN (MOBILE) === */
/* =================================================================== */

@media (max-width: 768px) {
    .search-results-list {
        gap: 20px; /* Jarak antar item kembali normal */
    }
    .search-result-item-card .card-link {
        gap: 15px; /* Jarak gambar dan teks kembali normal */
        align-items: flex-start; /* Alignment kembali ke atas */
    }
    .search-result-item-card .card-thumbnail img {
        width: 90px;  /* Lebar gambar di mobile */
        height: 90px; /* Tinggi gambar di mobile (membuatnya kotak) */
    }
    .search-result-item-card .card-title {
        font-size: 16px; /* Ukuran judul kembali kecil */
        margin-bottom: 5px;
    }
    .search-result-item-card .card-meta {
        font-size: 13px; /* Ukuran meta kembali kecil */
    }
}

/* =================================================================== */
/* === STYLING UNTUK NAVIGASI HALAMAN (PAGINATION) === */
/* =================================================================== */

/* Container utama untuk pagination */
.pagination {
    margin-top: 20px;   /* Memberi jarak dari konten di atasnya */
	margin-bottom: 20px;
    text-align: center; /* KUNCI: Membuat posisi di tengah */
    width: 100%;
}

/* --- Styling Modern untuk Halaman 404 --- */

.error-404 {
    text-align: center; /* Membuat semua konten di tengah */
    padding: 60px 20px; /* Memberi ruang di dalam container */
    max-width: 800px; /* Batasi lebar agar tidak terlalu melebar di desktop */
    margin: 0 auto; /* Tengah-kan container 404 */
}

.error-404 .page-title {
    font-size: 52px; /* Ukuran judul besar */
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.1;
    color: #333; /* Warna teks lebih gelap */
}

.error-404 .page-content p {
    font-size: 17px;
    color: #777; /* Warna teks abu-abu lembut */
    max-width: 650px; 
    margin: 0 auto 40px auto; /* Posisi di tengah dan beri jarak bawah */
    line-height: 1.6;
}

/* --- Styling Tombol Kembali ke Beranda --- */
.button-404 {
    display: inline-block;
    padding: 15px 35px;
    background-color: #cc0000; /* Warna merah sesuai tema Anda */
    color: #fff;
    text-decoration: none;
    border-radius: 8px; /* Sudut lebih tumpul */
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button-404:hover {
    background-color: #cc0000; /* Warna merah lebih gelap saat hover */
    transform: translateY(-2px); /* Efek sedikit naik saat hover */
}

/* Responsif untuk Layar Kecil */
@media (max-width: 600px) {
    .error-404 .page-title {
        font-size: 40px;
    }
    .error-404 .page-content p {
        font-size: 15px;
    }
    .search-form-404 {
        flex-direction: column; /* Input dan tombol bertumpuk */
        border-radius: 8px;
        box-shadow: none; /* Hilangkan shadow agar lebih ringan di mobile */
    }
    .search-field-404 {
        border-bottom: 1px solid #eee; /* Garis pemisah antara input dan tombol */
        border-radius: 8px 8px 0 0;
    }
    .search-submit-404 {
        border-radius: 0 0 8px 8px;
        font-size: 16px;
        padding: 12px 20px;
    }
    .button-404 {
        padding: 12px 25px;
        font-size: 15px;
    }
	
	/* Menaikkan posisi konten 404 di mobile */
    .error-404 {
        padding-top: 1px;    /* Kurangi jarak atas dari 60px menjadi 25px */
        padding-bottom: 30px; /* Sesuaikan juga jarak bawah agar seimbang */
    }

}

@media (max-width: 992px) {
    /* Sembunyikan menu navigasi desktop dan menu mobile lama */
    .header-desktop .main-navigation,
    .header-mobile .mobile-navigation {
        display: none;
    }
    
    /* A. Latar Belakang Gelap (Overlay Utama) */
    .menu-overlay {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        padding: 50px 15px 15px 15px;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* B. Konten Menu (Kotak Putih di Tengah) */
    .menu-content {
        background-color: #ffffff;
        width: 100%;
        max-width: 360px;
        height: auto;
        padding: 15px 20px;
        border-radius: 8px;
        position: relative;
        box-sizing: border-box;
        transform: scale(0.95);
        transition: transform 0.3s ease;
    }
    .menu-overlay.is-open .menu-content {
        transform: scale(1);
    }
    
    /* C. Tombol Close (X) */
    .close-button {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 30px;
        font-weight: 300;
        background: none;
        border: none;
        cursor: pointer;
        color: #888;
    }

    /* D. Styling di dalam Menu */
    .menu-section {
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 12px;
    }
    .menu-section:last-of-type {
        border-bottom: none; margin-bottom: 0; padding-bottom: 0;
    }

    .menu-heading {
        font-size: 10px;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 12px 0;
        text-align: center !important;
    }
    .menu-links-grid {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 15px;
    }
    .menu-links-grid a {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        font-size: 13px;
    }
    
    /* Menghapus garis di bawah 'Ikuti Kami' & merapatkan jarak */
    .menu-section:nth-last-of-type(2) {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 15px;
    }

    /* Style baru untuk ikon sosial media (DIKECILKAN) */
    .social-icons {
        display: flex;
        gap: 8px; /* DIKECILKAN: Jarak antar ikon */
        justify-content: center !important;
        flex-wrap: wrap;
    }
    .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px; /* DIKECILKAN: Lebar kotak */
        height: 34px; /* DIKECILKAN: Tinggi kotak */
        background-color: #f0f0f0;
        border-radius: 8px;
        font-size: 16px; /* DIKECILKAN: Ukuran ikon di dalam kotak */
        color: #555;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .social-icons a:hover {
        background-color: #333;
        color: #fff;
    }
    
    .app-badges {
        display: flex;
        gap: 10px;
        justify-content: center !important;
        align-items: center;
    }
    .app-badges img {
        height: 30px;
        width: auto;
    }
    body.menu-active {
        overflow: hidden;
    }
}

/* Menyembunyikan menu mobile bawaan tema secara permanen */
@media (max-width: 992px) {
    .mobile-navigation {
        display: none !important;
    }
}


/* ===============================================
   PENGATURAN TAMPILAN MENU DESKTOP VS MOBILE
   =============================================== */

/* 1. SECARA DEFAULT (DESKTOP): Sembunyikan tombol hamburger & menu pop-up */
#mobile-menu-toggle,
.menu-overlay {
    display: none;
}

/* 2. KETIKA LAYAR KECIL (MOBILE): Lakukan sebaliknya */
@media (max-width: 992px) {
    
    /* Tampilkan tombol hamburger */
    #mobile-menu-toggle {
        display: inline-flex; /* atau 'flex' tergantung style Anda */
    }

    /* Tampilkan menu pop-up (namun dikontrol oleh JS) */
    .menu-overlay {
        display: flex;
    }

    /* Sembunyikan menu navigasi desktop yang asli */
    .main-navigation {
        display: none;
    }
}


/* =========================================================
   PERBAIKAN: Memisahkan Tampilan In-Feed Desktop & Mobile
   ========================================================= */

/* 1. Aturan untuk Desktop (Tampilan Normal) */

/* Pastikan di desktop, item-item ini tampil sebagai grid 4 kolom */
.infeed-grid-items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px;
    overflow-x: visible !important; /* Matikan scroll horizontal di desktop */
}

/* Sembunyikan navigasi titik-titik di desktop */
.fokus-nav-js {
    display: none !important;
}


/* 2. Aturan untuk Mobile (di dalam @media query) */
@media (max-width: 768px) {

    /* Ubah grid menjadi carousel geser di mobile */
    .infeed-grid-items {
        display: flex !important; /* Ubah kembali ke flex */
        overflow-x: auto !important; /* Aktifkan lagi scroll horizontal */
        scroll-snap-type: x mandatory;
    }

    /* Tampilkan kembali navigasi titik-titik di mobile */
    .fokus-nav-js {
        display: flex !important; /* Tampilkan lagi navigasinya */
    }
}

/* ===============================================
   FINAL: CSS LENGKAP UNTUK SINGLE POST (DUAL LAYOUT)
   =============================================== */

/* --- 1. SAKLAR OTOMATIS (JANGAN DIUBAH) --- */
.single-post-desktop { display: block !important; }
.single-post-mobile { display: none !important; }

@media (max-width: 992px) {
    .single-post-desktop { display: none !important; }
    .single-post-mobile { display: block !important; }
}

/* --- 2. STYLE UNTUK VERSI DESKTOP --- */
.single-post-desktop .entry-breadcrumbs {
    font-size: 14px;
    margin-bottom: 15px;
    color: #555;
}
.single-post-desktop .entry-breadcrumbs a {
    text-decoration: none;
    color: #555; /* Warna normal dibuat sama */
    transition: color 0.2s;
}
.single-post-desktop .entry-breadcrumbs a:hover {
    color: #cc0000; /* Warna merah saat disentuh */
}
.single-post-desktop .entry-breadcrumbs .sep {
    margin: 0 8px; /* Jarak untuk pemisah / */
    color: #999;
}

.single-post-desktop .entry-meta { display: block; font-size: 14px; color: #555; margin-bottom: 20px; }
.single-post-desktop .entry-meta .author-name { margin-bottom: 5px; }
.single-post-desktop .entry-meta a { text-decoration: none; color: #111; font-weight: 600; }
.single-post-desktop .entry-share-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: none; }
.single-post-desktop .social-share-buttons { display: flex; align-items: center; gap: 8px; }
.single-post-desktop .social-share-buttons span { font-weight: 600; margin-right: 5px; font-size: 14px; }
.single-post-desktop .social-share-buttons .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 14px; text-decoration: none; }
.single-post-desktop .share-btn.facebook { background-color: #3b5998; }
.single-post-desktop .share-btn.twitter { background-color: #000000; }
.single-post-desktop .share-btn.whatsapp { background-color: #25d366; }
.single-post-desktop .share-btn.telegram { background-color: #0088cc; }
.single-post-desktop .share-btn.link { background-color: #888; }
.single-post-desktop .comments-link a { background-color: #f5f5f5; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 600; color: #333; }
.single-post-desktop .comments-link a i { margin-right: 5px; }
.single-post-desktop .post-thumbnail { margin-bottom: 10px; }
.single-post-desktop .post-thumbnail img { width: 100%; height: auto; }
.single-post-desktop .thumbnail-caption { font-size: 12px; font-style: left; color: #777; text-align: left; margin-top: 8px; margin-bottom: 20px; background-color: transparent; border-bottom: none; padding: 0; }
.single-post-desktop .entry-content { font-size: 16px; line-height: 1.8; }
.single-post-desktop .entry-footer { margin-top: 30px; border-top: none; padding-top: 0; }
.single-post-desktop .post-tags { margin-bottom: 20px; }
.single-post-desktop .post-tags h4 { font-size: 14px; text-transform: uppercase; margin: 0 0 15px 0; font-weight: 700; }
.single-post-desktop .post-tags a { display: inline-block; background-color: #f0f0f0; padding: 5px 12px; margin: 0 5px 5px 0; border-radius: 4px; font-size: 13px; text-decoration: none; color: #555; }
.single-post-desktop .social-share-buttons.bottom { border-top: 1px solid #eee; padding-top: 20px; margin-top: 20px; }

/* ===============================================
   FINAL: CSS TERPADU UNTUK SINGLE POST
   =============================================== */

/* --- 1. STYLE DASAR (DESKTOP) --- */

.single-post-content .entry-breadcrumbs { font-size: 14px; margin-bottom: 15px; color: #555;}
.single-post-content .entry-breadcrumbs a { text-decoration: none; color: #cc0000; }
.single-post-content .entry-title { font-size: 36px; line-height: 1.3; margin-bottom: 20px; color: #111; }

.single-post-content .entry-meta { display: block; font-size: 14px; color: #555; margin-bottom: 20px; }
.single-post-content .entry-meta .author-name { margin-bottom: 5px; }
.single-post-content .entry-meta a { text-decoration: none; color: #111; font-weight: 600; }

.single-post-content .entry-share-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: none; }
.single-post-content .social-share-buttons { display: flex; align-items: center; gap: 8px; }
.single-post-content .social-share-buttons span { font-weight: 600; margin-right: 5px; font-size: 14px; }
.single-post-content .social-share-buttons .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 14px; text-decoration: none; }
.single-post-content .share-btn.facebook { background-color: #3b5998; }
.single-post-content .share-btn.twitter { background-color: #000000; }
.single-post-content .share-btn.whatsapp { background-color: #25d366; }
.single-post-content .share-btn.telegram { background-color: #0088cc; }
.single-post-content .share-btn.link { background-color: #888; }
.single-post-content .comments-link a { background-color: #f5f5f5; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 600; color: #333; }
.single-post-content .comments-link a i { margin-right: 5px; }

.single-post-content .post-thumbnail { margin-bottom: 10px; }
.single-post-content .post-thumbnail img { width: 100%; height: auto; }
.single-post-content .thumbnail-caption { font-size: 12px; font-style: normal; color: #777; text-align: left; margin-top: 8px; margin-bottom: 20px; background-color: transparent; border-bottom: none; padding: 0; }

.single-post-content .entry-content { font-size: 16px; line-height: 1.8; }

.single-post-content .entry-footer { margin-top: 30px; border-top: none; padding-top: 0; }
.single-post-content .post-tags { margin-bottom: 20px; }
.single-post-content .post-tags h4 { font-size: 14px; text-transform: uppercase; margin: 0 0 15px 0; font-weight: 700; }
.single-post-content .post-tags a { display: inline-block; background-color: #f0f0f0; padding: 5px 12px; margin: 0 5px 5px 0; border-radius: 4px; font-size: 13px; text-decoration: none; color: #555; }
.single-post-content .social-share-buttons.bottom { border-top: 1px solid #eee; padding-top: 20px; margin-top: 20px; }



/* --- 2. PENYESUAIAN UNTUK MOBILE (DI BAWAH 767px) --- */
@media (max-width: 767px) {
    /* Sembunyikan bar share atas & komentar di mobile */
    .single-post-content .entry-share-bar {
        display: none;
    }
    
    /* Atur ulang font */
    .single-post-content .entry-title {
        font-size: 28px;
    }
    .single-post-content .entry-content {
        font-size: 15px;
        line-height: 1.7;
    }

    /* Buat bar share bawah menjadi melayang (floating) */
    .single-post-content .social-share-buttons.bottom {
        position: fixed; bottom: 0; left: 0; width: 100%;
        background-color: #ffffff; padding: 10px 15px;
        border-top: 1px solid #e5e5e5; box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
        z-index: 99; display: flex; justify-content: space-around;
        margin-top: 0;
    }
    .single-post-content .social-share-buttons.bottom .share-btn {
        background-color: transparent !important; color: #333 !important;
        font-size: 20px; width: auto; height: auto;
    }
    .single-post-content .social-share-buttons.bottom span {
        display: none;
    }
    .single-post-content {
        padding-bottom: 60px; /* Beri ruang agar konten tidak tertutup bar */
    }
}

/* --- 3. STYLE KHUSUS UNTUK VERSI MOBILE --- */
	@media (max-width: 767px) {
		
		/* Memberi jarak konsisten di akhir konten artikel */
.single .entry-content,
.single-post .entry-content {
    margin-bottom: 37px;
}
		
    .single-post-mobile {
        padding-top: 20px; /* Tambah jarak dari header */
    }
		
		/* Caption Featured Image - Mobile */
.single-post-mobile .thumbnail-caption {
    font-size: 12px;          /* cukup kecil biar ga ganggu */
    line-height: 1.5;         /* jarak antar baris nyaman */
    font-style: normal;
    color: #777;              /* abu2 halus */
    text-align: left;       /* tengah biasanya lebih rapi di mobile */
    margin-top: 6px;
    margin-bottom: 15px;
    padding: 0 10px;          /* kasih padding kiri-kanan biar ga mepet layar */
}

    
    /* Breadcrumbs */
    .breadcrumb {
        font-size: 13px;
        margin-bottom: 8px;
        margin-top: -16px;
        padding-top: 1px;
        display: flex;
        align-items: center;
        gap: 1px;
    }
    .breadcrumb .home-link {
        background-color: #f0f2f5;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #cc0000;
    }
    .breadcrumb a.current {
        color: #333;
        text-decoration: none;
        font-weight: 500;
        background-color: #f9f9f9;
        padding: 5px 7px;
        border-radius: 4px; /* Perbaikan: nilai ditambahkan */
        border-bottom: 1px solid #e0e0e0;
        display: inline-block;
        margin-bottom: 2.4px;
    }
    .breadcrumb .sep {
        display: none; /* Perbaikan: dipindahkan ke dalam media query */
    }

    /* Judul dan Meta */
    .single-post-mobile .entry-title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    .single-post-mobile .entry-meta {
        font-size: 12px;
        margin-bottom: 15px;
    }
    .single-post-mobile .entry-meta .author-name {
        margin-bottom: 3px;
    }
		
		/* Author link di mobile */
.single-post-mobile .entry-meta a {
    text-decoration: none;
    color: #111;   /* sama kayak desktop */
    font-weight: 600;
}

		
		/* --- 3. STYLE UNTUK VERSI MOBILE --- */
.single-post-mobile .post-tags {
    margin-top: -20px;
}

.single-post-mobile .post-tags h4 {
    font-size: 13px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    font-weight: 700;
}

.single-post-mobile .post-tags a {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 5px 10px;
    margin: 0 6px 6px 0; /* kasih jarak antar tag */
    border-radius: 4px;
    font-size: 12px; /* lebih kecil biar muat */
    text-decoration: none;
    color: #555;
    line-height: 1.5; /* biar teks gak dempet */
    white-space: nowrap; /* opsional, biar tag ga kepotong kata */
}

		
		
    /* ===================================================
       KODE BARU UNTUK FEATURED IMAGE FULL-WIDTH
       =================================================== */
    .single-post-mobile .post-thumbnail {
        width: 100vw;
        max-width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-bottom: 20px;
    }
    .single-post-mobile .post-thumbnail img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        aspect-ratio: 16 / 9;
    }
		
		/* ===============================================
   PERBAIKAN FINAL: BAR SHARE MUNCUL SAAT SCROLL
   =============================================== */

/* 1. Bar Melayang Gaya Kapsul (Default Tersembunyi) */
.single-post-mobile .social-share-buttons.bottom {
    position: fixed;
    bottom: 15px;
    left: 50%;
    
    /* Tampilan Kapsul */
    width: auto;
    background-color: #ffffff;
    padding: 4px 8px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
    /* Layout ikon di dalam */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    z-index: 99;

    /* KUNCI: Sembunyikan di bawah layar & siapkan transisi */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 50px); /* Geser ke bawah & ke tengah */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* 2. Style saat bar HARUS MUNCUL (saat punya kelas .is-visible) */
.single-post-mobile .social-share-buttons.bottom.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* Kembali ke posisi semula */
}


/* ... (Kode untuk ikon, badge, dan padding-bottom tetap sama seperti sebelumnya) ... */

/* Ikon Share (Dikecilkan) */
.single-post-mobile .social-share-buttons.bottom .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
}
.single-post-mobile .social-share-buttons.bottom .share-btn.facebook { background-color: #3b5998; }
.single-post-mobile .social-share-buttons.bottom .share-btn.twitter { background-color: #000000; }
.single-post-mobile .social-share-buttons.bottom .share-btn.whatsapp { background-color: #25d366; }
.single-post-mobile .social-share-buttons.bottom .share-btn.telegram { background-color: #0088cc; }
.single-post-mobile .social-share-buttons.bottom .share-btn.link { background-color: #888; }
.single-post-mobile .social-share-buttons.bottom .share-btn.comments { background-color: transparent; color: #333; font-size: 18px; position: relative; }
.single-post-mobile .social-share-buttons.bottom span:not(.comment-count) { display: none; }
.single-post-mobile .share-btn.comments .comment-count { position: absolute; top: -3px; right: -3px; background-color: #d93025; color: #fff; width: 15px; height: 15px; border-radius: 50%; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; }
.single-post-mobile { padding-bottom: 70px; }
 
}

/* ===============================================
   STYLE KOMENTAR MODERN
   =============================================== */

/* Wadah utama form komentar */
.comment-respond {
    background-color: #f9f9f9;
    padding: 20px;
    margin-top: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Judul bagian komentar */
.comment-reply-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    padding-left: 5px;
    border-left: 4px solid #cc0000; /* Garis oranye seperti contoh */
}
.comment-reply-title small {
    font-size: 14px;
    font-weight: 400;
    margin-left: 10px;
}
.comment-reply-title a {
    text-decoration: none;
    color: #777;
}

/* Pesan "Setelah membaca artikel ini, apa pendapatmu?" */
#respond p.comment-notes,
#respond p.logged-in-as {
    color: #777;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center; /* Membuat teks berada di tengah */
}

/* Area untuk menulis komentar (textarea) */
#comment {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box; /* Penting agar padding tidak menambah lebar */
    resize: vertical; /* Pengguna bisa mengubah tinggi */
}

/* Tombol "Tulis Komentar" / "Kirim Komentar" */
#submit {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#submit:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

/* Hilangkan label default (jika ada) */
#respond label {
    display: none;
}

/* Style untuk daftar komentar (jika ada komentar yang sudah masuk) */
.comment-list {
    margin-top: 30px;
    list-style: none;
    padding-left: 0;
}

.comment {
    background-color: #fff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #eee;
    margin-bottom: 15px;
}

.comment-author {
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.comment-metadata a {
    color: #777;
    font-size: 12px;
    text-decoration: none;
    margin-left: 10px;
}

.comment-content {
    margin-top: 10px;
    line-height: 1.6;
    font-size: 15px;
    color: #444;
}

.reply {
    margin-top: 10px;
    text-align: right;
}

.reply a {
    display: inline-block;
    background-color: #f0f0f0;
    color: #555;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.reply a:hover {
    background-color: #e0e0e0;
    color: #333;
}


/* ==========================================================================
   5. Styling Pagination (Gaya Bulat)
   ========================================================================== */
/* Menargetkan pagination KHUSUS di homepage */
.home .pagination-container {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.pagination .nav-links {
    display: inline-flex;
    gap: 5px; /* Jarak antar tombol */
    align-items: center;
}

.pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;  /* Ubah dari 40px */
    height: 30px; /* Ubah dari 40px */
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 12px; /* Tambahkan ini agar angka ikut mengecil */
    border: 1px solid #ddd;
    border-radius: 50%;
    line-height: 1;
}

.pagination .page-numbers:hover {
    background-color: #f1f1f1;
    border-color: #ccc;
}

/* Tombol untuk halaman yang sedang aktif */
.pagination .page-numbers.current {
    background-color: #cc0000;
    color: #fff;
    border-color: #cc0000;
    cursor: default;
}

/* Tombol titik-titik "..." */
.pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
}

/* Mengganti teks "Selanjutnya" & "Sebelumnya" dengan ikon panah */
.pagination .prev,
.pagination .next {
    font-size: 0; /* Sembunyikan teks asli */
}

.pagination .prev:before,
.pagination .next:before {
    font-family: "Font Awesome 5 Free"; /* Menggunakan library Font Awesome */
    font-weight: 900; /* Gaya Solid/Tebal */
    font-size: 14px;
    color: #333;
}

.pagination .prev:before {
    content: "\f053"; /* Kode unicode untuk ikon panah kiri */
}

.pagination .next:before {
    content: "\f054"; /* Kode unicode untuk ikon panah kanan */
}

.pagination .prev:hover:before,
.pagination .next:hover:before {
    color: #000;
}


/* --- Style untuk Pagination Postingan --- */

/* Container utama untuk pagination */
.pagination-container {
    display: flex;
    justify-content: space-between; /* Mendorong "Halaman" dan nomor ke ujung berlawanan */
    align-items: center; /* Menyelaraskan vertikal di tengah */
    padding: 15px 0; /* Memberi jarak atas-bawah */
    margin-top: 25px; /* Memberi jarak dari konten di atasnya */
    box-sizing: border-box; 
}

/* Label "Halaman" di sisi kiri */
.pagination-label {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

/* Daftar link halaman di sisi kanan */
.pagination-links {
    list-style: none; /* Menghilangkan bullets dari list */
    padding: 0;
    margin: 0;
    display: flex; /* Membuat item berjajar horizontal */
    align-items: center;
    gap: 10px; /* Jarak antar tombol/lingkaran */
}

/* Gaya umum untuk semua link (nomor & tombol selanjutnya) */
.pagination-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s; /* Animasi halus saat hover */
    border: none;
}

/* Gaya khusus untuk link nomor halaman (yang berbentuk lingkaran) */
.pagination-links a.page-number {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Membuat bentuk menjadi lingkaran sempurna */
    background-color: #f0f0f0; /* Warna latar abu-abu muda */
    color: #555; /* Warna teks abu-abu tua */
}

/* Gaya saat kursor mouse di atas nomor halaman (yang tidak aktif) */
.pagination-links a.page-number:not(.active):hover {
    background-color: #e0e0e0;
    color: #222;
}

/* Gaya untuk nomor halaman yang AKTIF */
.pagination-links a.page-number.active {
    background-color: #cc0000; /* Warna latar merah */
    color: #ffffff; /* Warna teks putih */
    cursor: default; /* Kursor standar karena halaman ini sedang aktif */
}

/* Gaya khusus untuk tombol "Selanjutnya" */
.pagination-links a.next-page {
    padding: 0 18px; /* Padding horizontal agar teks tidak mepet */
    height: 30px;
    border-radius: 20px; /* Radius besar untuk menciptakan bentuk kapsul */
    background-color: #f0f0f0;
    color: #555;
}

/* Gaya saat kursor mouse di atas tombol "Selanjutnya" */
.pagination-links a.next-page:hover {
    background-color: #e0e0e0;
    color: #222;
}

/* --- KODE LENGKAP FINAL (STICKY HEADER + ANTI GESER MOBILE + STICKY SIDEBAR DESKTOP) --- */

/* 1. Jadikan Wrapper Header Utama Fixed */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
}

/* 2. Beri Ruang untuk Konten di Bawahnya */
#content {
    margin-top: 90px; /* Sesuaikan untuk tinggi header desktop */
}

/* === PERBAIKAN & PENYESUAIAN PAGINATION UNTUK TAMPILAN MOBILE === */

/* Aturan ini HANYA berlaku untuk layar dengan lebar maksimal 768px */
@media (max-width: 768px) {

    /* Semua aturan di bawah ini sekarang HANYA berlaku di dalam halaman artikel tunggal.
       Ini ditandai dengan .single atau .single-post di depannya. */

    /* 1. Beri jarak bawah agar tidak menempel dengan tag */
    .single .pagination-container,
    .single-post .pagination-container {
        margin-bottom: 30px; 
    }

    /* 2. Ubah tata letak agar "Halaman" dan nomor menyatu di kiri */
    .single .pagination-container,
    .single-post .pagination-container {
        justify-content: flex-start; /* Ratakan semua ke kiri */
        gap: 15px; /* Jarak antara "Halaman" dan nomor */
    }
    
    /* 3. Trik untuk mendorong tombol 'Selanjutnya' ke paling kanan */
    .single .pagination-links li:last-child,
    .single-post .pagination-links li:last-child {
        margin-left: auto; /* Mendorong item terakhir ke ujung kanan */
    }
    
    /* 4. PERBAIKAN: Raparkan jarak antar nomor halaman */
    .single .pagination-links,
    .single-post .pagination-links {
        gap: 4px; /* Perkecil jarak antar tombol nomor menjadi 6px */
    }

    /* 5. Perkecil ukuran tombol angka */
    .single .pagination-links a.page-number,
    .single-post .pagination-links a.page-number {
        width: 25px;
        height: 25px;
        font-size: 13px;
    }

    /* 6. Perkecil tombol kapsul 'Selanjutnya' */
    .single .pagination-links a.next-page,
    .single-post .pagination-links a.next-page {
        height: 25px;
        padding: 0 14px;
        font-size: 11px;
    }
}


/* 3. PENYESUAIAN KHUSUS UNTUK MOBILE (Layar di bawah 768px) */
@media (max-width: 768px) {


	/* Atasi masalah layar geser HANYA DI MOBILE */
    body, #page {
        overflow-x: hidden;
    }

    /* Pastikan header mobile tidak menyebabkan overflow juga */
    .site-header {
        overflow-x: hidden;
    }

    /* Sesuaikan margin untuk konten di mobile */
    #content {
        margin-top: 135px; /* GANTI dengan tinggi total header mobile Anda */
    }
    
}

/* ==========================================================================
   Styling Widget Terpopuler (Final dengan Efek Nomor Tumpukan di Kanan)
   ========================================================================== */

/* Target khusus widget terpopuler */
.widget_mediaqu_popular_posts_widget {
    background-color: #222222 !important;
    color: #ffffff;
    padding: 20px;
    border: none !important;
    border-radius: 3px;
    overflow: hidden; /* Penting untuk efek 'terpotong' */
}

/* Judul widget "Terpopuler" */
.widget_mediaqu_popular_posts_widget .widget-title {
    color: #ffffff;
    border-bottom-color: #cc0000;
}

/* Daftar postingan */
.popular-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: popular-posts-counter;
}

.popular-post-item {
    position: relative;
    padding: 12px 0 12px 40px; /* teks agak geser kanan */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    overflow: hidden; /* ini yang bikin angka kepotong */
}

.popular-post-item::before {
    counter-increment: popular-posts-counter;
    content: counter(popular-posts-counter);
    position: absolute;
    left: 5px; /* biar agak masuk */
    top: 50%;
    transform: translateY(-50%);
    font-size: 5em;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25);
    text-stroke: 1.5px rgba(255, 255, 255, 0.25);
    z-index: 0;
}


/* Judul posting */
.popular-post-title {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    z-index: 2; /* Pastikan di atas angka */
    transition: color 0.2s;
}

.popular-post-title:hover {
    color: #cccccc;
}

/* Menghapus jarak atas pada widget pertama di sidebar agar sejajar */
.sidebar-area .widget:first-child {
    padding-top: 0;
    margin-top: 0;
}

.sidebar-area .widget:first-child .widget-title {
    margin-top: 0;
}



/* ==========================================================================
   8. Styling Sidebar Widgets
   ========================================================================== */

/* Gaya umum untuk semua widget di sidebar agar seragam */
.sidebar-area .widget {
    background-color: transparent; /* Hapus warna latar */
    padding: 0; /* Hapus jarak internal */
    margin-bottom: 25px;
    border: none; /* Hapus garis border */
    border-radius: 0; /* Hapus sudut melengkung */
}

.sidebar-area .widget-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Gaya khusus untuk widget baru kita: "Sidebar Posts" */
.sidebar-post-item {
    display: flex;
    gap: 15px;
    align-items: stretch; /* DIREVISI: Memaksa semua item anak sama tinggi */
}

/* Beri jarak antar item, kecuali yang terakhir */
.sidebar-post-item:not(:last-child) {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-post-thumb {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.sidebar-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 3px;
}

.sidebar-post-details {
    flex-grow: 1;
    display: flex; /* DIREVISI: Mengaktifkan flexbox */
    flex-direction: column; /* DIREVISI: Arahnya atas ke bawah */
    justify-content: space-between; /* DIREVISI: Mendorong item ke ujung */
}

.sidebar-post-title {
    margin: 0 0 5px 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
	
	display: -webkit-box;
    -webkit-line-clamp: 3;       /* maksimal 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-post-title a {
    text-decoration: none;
    color: #222;
    transition: color 0.2s;
}

.sidebar-post-title a:hover {
    color: #cc0000;
}

.sidebar-post-time {
    font-size: 12px;
    color: #888;
}
/* ==========================================================================
   7. Styling Widget Grid 3
   ========================================================================== */
.infeed-widget-grid-area {
    background-color: #222;
    color: #fff;
    padding: 20px;
    margin: 40px 0;
}

.widget-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.widget-grid-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-left: 15px;
}

.widget-grid-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 18px;
    background-color: #cc0000;
}

.widget-grid-view-all {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.widget-grid-view-all:hover {
    color: #ddd;
}

.widget-grid-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-post-item a {
    text-decoration: none;
}

.grid-post-thumb {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
	aspect-ratio: 16 / 9; 
}

.grid-post-thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

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

.grid-post-title {
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0 0 8px 0;
    transition: color 0.2s;
	
	display: -webkit-box;
    -webkit-line-clamp: 3;       /* maksimal 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-post-item:hover .grid-post-title {
    color: #ddd;
}

.grid-post-meta .grid-post-category {
    color: #ffc107; /* Warna kuning untuk kategori */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ==========================================================================
   8. Styling Responsif untuk Mobile (Final Mini Version)
   ========================================================================== */
@media (max-width: 768px) {
    .widget-grid-posts {
        display: flex;
        overflow-x: auto;
        padding-bottom: 15px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .widget-grid-posts::-webkit-scrollbar {
        display: none;
    }
    
    /* 1. Gambar diubah menjadi rasio potret/persegi */
    .grid-post-thumb img {
        aspect-ratio: 16 / 9; /* Rasio potret, ubah ke 1 / 1 untuk persegi */
        object-fit: cover;
    }
    
    /* 2. Kartu dibuat jauh lebih ramping */
    .grid-post-item {
        flex: 0 0 95%;      /* Lebar kartu hanya 45% */
        max-width: 150px;   /* Batasi lebar maksimalnya */
    }

 .grid-post-title {
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0 0 8px 0;
    transition: color 0.2s;

    /* TAMBAHKAN 4 BARIS DI BAWAH INI */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

    /* 4. Kategori dikecilkan lagi */
    .grid-post-meta .grid-post-category {
        font-size: 10px;    /* Font sangat kecil untuk kategori */
    }
    
    /* 5. Judul widget dan link "Lihat Semua" dikecilkan */
    .widget-grid-title {
        font-size: 13px; /* Kecilkan dari 18px */
    }
    .widget-grid-view-all {
        font-size: 10px; /* Kecilkan dari 14px */
    }
    
    /* 6. Atur ulang jarak header di mobile agar lebih rapat */
    .infeed-widget-grid-area {
        padding: 10px 15px; /* Kurangi padding atas-bawah & kiri-kanan */
        margin: 20px 0; /* Kurangi juga margin atas-bawah widget */
    }
    .widget-grid-header {
        padding-bottom: 8px;
        margin-bottom: 15px;
    }
    
    
    
}

/* ==========================================================================
   6. Styling In-Feed Widget (Final Diperbaiki)
   ========================================================================== */

.infeed-widget-container {
    margin: 40px 0;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
}

.infeed-widget-area .widget-title-inline {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: #555;
    border: none;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 20px;
    display: block;
}

/* Bagian Artikel Utama Widget */
.infeed-featured-item {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.infeed-featured-item .thumb {
    flex-basis: 50%;
    flex-shrink: 0;
}
.infeed-featured-item .details {
    flex-basis: 50%;
}
.infeed-featured-item .thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.infeed-featured-item .details h4 {
    margin-top: -7px;
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 10px;
}
.infeed-featured-item .details h4 a {
    text-decoration: none;
    color: #000;
}
.infeed-featured-item .details h4 a:hover {
    color: #cc0000;
}
.infeed-featured-item .details p {
    font-size: 13px;
    color: #555;
    margin-top: 0;
}

/* Bagian 4 Artikel Kecil di Bawah */
.infeed-grid-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.infeed-grid-item .thumb img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
    margin-top: -2px;
}
.infeed-grid-item h5 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;

    /* Batas maksimal 3 baris + titik-titik */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    /* Naikin komentar biar gak kejauhan */
    .single-post-mobile .comment-respond {
        margin-top: 15px !important; /* defaultnya 30px, dipangkas */
        padding: 15px;               /* biar lebih ringkas */
    }

    /* Tag terkait jangan terlalu jauh dari bawah */
    .single-post-mobile .post-tags {
        margin-bottom: -80px !important; /* defaultnya 20px */
    }
}


/* ===============================================
   FINAL CSS UNTUK NAVIGASI CAROUSEL INTERAKTIF
   =============================================== */

/* 1. Sembunyikan navigasi statis jika JavaScript aktif */
.infeed-widget-container.js-nav-active::before,
.infeed-widget-container.js-nav-active::after {
    display: none;
}

/* 2. Style untuk wadah navigasi baru dari JS */
.fokus-nav-js {
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* Posisikan di bawah widget */
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
}

/* 3. Style untuk garis progres */
.fokus-nav-js .progress-bar {
    flex-grow: 1; /* Ambil sisa ruang */
    height: 2px;
    background-color: #eee;
}

/* 4. Style untuk wadah titik-titik */
.fokus-nav-js .dots {
    display: flex;
    gap: 5px;
}

/* 5. Style untuk setiap titik */
.fokus-nav-js .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ccc; /* Warna titik non-aktif */
    transition: background-color 0.3s ease; /* Animasi ganti warna */
}

/* 6. INI KUNCINYA: Style untuk titik yang aktif */
.fokus-nav-js .dot.active {
    background-color: #cc0000; /* Warna merah untuk titik aktif */
}

/* =========================================================
   RESPONSIVE STYLE CAROUSEL TUNGGAL UNTUK IN-FEED WIDGET
   ========================================================= */
@media (max-width: 768px) {
    
    /* 1. Atur padding & posisi relatif untuk navigasi di bawah */
    .infeed-widget-container {
        padding: 15px;
        position: relative;
        padding-bottom: 35px; /* Beri ruang untuk garis & titik */
    }

    /* 2. Style judul "FOKUS" */
    .infeed-widget-area .widget-title-inline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding-bottom: 12px;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        font-size: 15px;
        color: #111;
    }
    .infeed-widget-area .widget-title-inline::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 2px;
        background-color: #cc0000;
    }
    .infeed-widget-area .widget-title-inline::after {
        display: none; /* Panah dihapus */
    }

    /* 3. Sembunyikan artikel utama */
    .infeed-featured-item {
        display: none;
    }

    /* 4. Atur Carousel */
    .infeed-grid-items {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .infeed-grid-items::-webkit-scrollbar {
        display: none;
    }
    .infeed-grid-item {
        flex: 0 0 75%;
        scroll-snap-align: start;
    }
    .infeed-grid-item .thumb img {
        margin-top: 0;
        margin-bottom: 10px;
        border-radius: 6px;
    }
    .infeed-grid-item h5 {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* 5. MEMBUAT NAVIGASI STATIS DI BAWAH */
    .infeed-widget-container::after {
        content: '';
        position: absolute;
        bottom: 15px;
        left: 15px;
        right: 100px;
        height: 2px;
        background-color: #eee;
    }
    .infeed-widget-container::before {
        content: '● ● ● ●';
        position: absolute;
        bottom: 7px;
        right: 15px;
        font-size: 16px;
        color: #ccc;
        letter-spacing: 5px;
    }
    
}



/* ====================================================== */
/* === PERUBAHAN KUNCI ADA DI BARIS DI BAWAH INI === */
/* ====================================================== */
.main-content-area .infeed-widget-area .infeed-grid-item h5 a {
    text-decoration: none;
    color: #222222; /* Warna judul menjadi abu-abu gelap */
}

.infeed-grid-item h5 a:hover {
    color: #cc0000;
}

/* default judul widget */
.infeed-title {
    color: #000;
    text-decoration: none;
}

/* hover jadi merah */
.infeed-title:hover {
    color: #cc0000; /* merah, bisa ganti dengan #ff0000 */
    text-decoration: underline; /* opsional kalau mau underline saat hover */
}

/* Judul artikel default */
.infeed-title {
    color: #000 !important; /* Hitam */
    text-decoration: none;
}

/* Hover */
.infeed-title:hover {
    color: #cc0000 !important; /* Merah */
    text-decoration: underline; /* opsional */
}



/* Responsive untuk mobile */
@media (max-width: 768px) {
    .infeed-featured-item {
        flex-direction: column;
    }
    .infeed-featured-item .thumb,
    .infeed-featured-item .details {
        flex-basis: auto;
    }
    .infeed-grid-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================================
   CSS WIDGET BERITA TERKAIT (VERSI FINAL TINGGI)
   =============================================== */

    /* Membuat satu blok visual yang menyatu */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.below-header-widget .widget-title-hidden {
    display: none;
}

/* 2. ARTIKEL UTAMA (DENGAN GAMBAR) */
.styled-widget-featured {
    position: relative;
    border-radius: 8px 8px 0 0; /* Lengkung hanya di atas */
    overflow: hidden;
    margin-bottom: 0; /* Dibuat menempel dengan blok biru */
    aspect-ratio: 16 / 9;
}
.styled-widget-featured .featured-image-link {
    display: block;
    width: 100%;
    height: 100%;
}
.styled-widget-featured img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    box-sizing: border-box;
}
.featured-title {
    margin: 0 0 5px 0;
    font-size: 20px;
    line-height: 1.3;
}
.featured-title a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.featured-meta {
    font-size: 12px;
    font-weight: 500;
}
.featured-category {
    font-weight: 700;
}
.featured-time {
    margin-left: 10px;
}
.featured-time::before {
    content: '|';
    margin-right: 10px;
    opacity: 0.5;
}


/* 3. BAGIAN BAWAH (BERITA TERKAIT & 2 JUDUL) */
.related-posts-bottom {
    background: linear-gradient(90deg, #c00, #dd0b03);
    padding: 20px; /* DIPERBESAR agar kotak lebih tinggi */
    border-radius: 0 0 8px 8px; /* Lengkung hanya di bawah */
}

/* ===============================================
   PERBAIKAN FINAL - GARIS BERITA TERKAIT
   =============================================== */

/* Ganti aturan .related-posts-header yang lama dengan ini */
.related-posts-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    /* Dihapus: padding-bottom dan border-bottom */
}

/* Mengatur teks "Berita Terkait" */
.related-posts-header .header-text {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff; /* Warna teks putih agar kontras di atas biru */
    text-transform: uppercase;
    margin: 0;
    margin-right: 15px; /* Jarak antara teks dan garis */
    padding: 0;
    white-space: nowrap;
    /* Dihapus: border-right */
}

/* Mengatur garis horizontal di sampingnya */
.related-posts-header .header-line {
    display: block; /* Tampilkan lagi garisnya */
    width: 100%;    /* Ambil sisa lebar */
    height: 1px;    /* Ketebalan garis */
    background-color: rgba(255, 255, 255, 0.3); /* Warna garis transparan */
}
.related-posts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: flex-start; /* Agar judul tidak meloncat jika beda baris */
}
.related-post-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.5; /* Diberi ruang untuk 2 baris */
    font-weight: 600;
}
.related-post-title a {
    color: #ffffff;
    text-decoration: none;
}
.related-post-title a:hover {
    opacity: 0.8;
}
/* 4. PENGATURAN RESPONSIVE (MOBILE) - GANTI DENGAN INI */
@media (max-width: 767px) {
    /* Sembunyikan blok "Berita Terkait" */
    .related-posts-bottom {
        display: none;
    }

    /* Jadikan gambar utama sebagai kartu yang utuh */
     .styled-widget-featured {
        aspect-ratio: 1 / 1; /* biar mirip Detik */
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    .featured-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%; /* makin gede → gradien makin naik */
        background: linear-gradient(
            to top,
            rgba(238, 0, 0, 0.95) 40%, /* Biru pekat di bawah */
            transparent 100%           /* Menjadi transparan di atas */
        );
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* pastikan teks nempel ke bawah */
    }

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


/* ===============================================
   LAYOUT HOMEPAGE DENGAN SIDEBAR
   =============================================== */

/* Pembungkus utama untuk layout */
.homepage-layout {
    display: flex;
    gap: 30px; /* Jarak antara konten utama dan sidebar */
}

/* Area konten utama di kiri */
.main-content-area {
    flex: 1; /* Otomatis mengambil ruang sisa */
    min-width: 0; /* Perbaikan untuk flexbox agar tidak aneh */
}

/* Area sidebar di kanan */
.sidebar-area {
    flex-basis: 350px;
    flex-shrink: 0;
    
    /* PENAMBAHAN BARU UNTUK EFEK STICKY */
    position: -webkit-sticky; /* Untuk browser Safari lama */
    position: sticky;
    top: 10px; /* Jarak dari atas layar saat 'menempel' */
    align-self: flex-start; /* Penting untuk layout flexbox */
}

/* Widget di dalam sidebar */
.sidebar-area .widget {
    margin-bottom: 30px;
    padding: 20px;
    background-color: transparent; /* Warna latar widget */
    border-radius: 5px;
}

/* GANTI KODE LAMA ANDA DENGAN DUA BLOK INI */

/* 1. Mengatur Teks Judul */
.sidebar-area .widget-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    position: relative; /* Diperlukan untuk posisi garis */
    padding-left: 15px; /* Memberi ruang untuk garis */
    
    /* Menghapus style lama */
    border-bottom: none;
    padding-bottom: 0;
}

/* 2. Membuat Garis Merah Vertikal */
.sidebar-area .widget-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px; /* Lebar garis */
    height: 18px; /* Tinggi garis */
    background-color: #cc0000; /* Warna merah */
}

/* --- Membuatnya Responsif di Layar Kecil --- */
@media (max-width: 992px) {
    .homepage-layout {
        flex-direction: column; /* Ubah jadi 1 kolom, sidebar pindah ke bawah */
    }

    .sidebar-area {
        flex-basis: auto; /* Hapus lebar tetap di mobile */
        margin-top: -25px;
        /* Tidak perlu padding: 0 lagi di sini */
    }
    
    /* INI ADALAH KUNCI PERBAIKANNYA */
    .sidebar-area .widget {
        padding-left: 0;  /* Hapus padding kiri widget */
        padding-right: 0; /* Hapus padding kanan widget */
    }
}

/* KUNCINYA: Hanya batasi lebar konten utama & footer saja */
.site-main,
.site-footer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px; /* TAMBAHKAN BARIS INI */
}


/* ===============================================
   STYLING HOMEPAGE LIST VIEW (VERSI FINAL)
   =============================================== */

/* Mengatur container utama setiap artikel */
.article-list-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #e9e9e9;
}

/* Mengatur area gambar thumbnail di kiri */
.article-thumbnail {
    flex-basis: 220px;
    flex-shrink: 0;
}

.article-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* Mengatur area konten teks di kanan */
.article-content {
    flex-grow: 1; /* Mengambil sisa ruang */
    display: flex; /* Kunci untuk menata meta atas, judul, dan meta bawah */
    flex-direction: column; /* Menumpuk elemen secara vertikal */
}

/* Mengatur meta bagian atas (Kategori & Tanggal) */
.article-meta-top {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

/* GANTI ATURAN LAMA DENGAN YANG INI */
.article-list-item .article-content .article-meta-top .article-category a {
    color: #cc0000 !important; /* Warna merah untuk kategori */
    font-weight: 700;
    text-decoration: none !important; /* Sekalian pastikan tidak ada garis bawah */
    text-transform: uppercase;
}

/* JANGAN LUPA ATURAN HOVERNYA JUGA */
.article-list-item .article-content .article-meta-top .article-category a:hover {
    text-decoration: underline !important;
}
.article-date {
    color: #757575;
}

/* Mengatur judul artikel */
.article-title {
    margin: 10px 0;
    font-size: 20px;
    line-height: 1.4;
    flex-grow: 1; /* Mendorong meta bawah ke dasar */
}

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

.article-title a:hover {
    color: #cc0000;
}

/* Mengatur meta bagian bawah (Penulis & Waktu) */
.article-meta-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: #9e9e9e;
}

.article-meta-bottom .article-author a {
    color: #757575;
    font-weight: 600;
    text-decoration: none;
}
.article-meta-bottom .article-author a:hover {
    color: #cc0000;
}

/* ==========================================================================
   1. CSS Reset & Box Sizing (Letakkan di paling atas)
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

* {
    box-sizing: border-box;
}

/* ==========================================================================
   2. Body & Typography (BARU DITAMBAHKAN)
   ========================================================================== */
body {
    background-color: #ffffff;
    color: #333;
    font-family: 'Roboto', sans-serif; /* FONT UTAMA DITETAPKAN DI SINI */
    font-size: 16px;
    line-height: 1.6;
}

/* ==========================================================================
   Selanjutnya adalah sisa kode CSS Anda...
   ========================================================================== */

/* 6. Styling Header Desktop Baru (CNN Style) - VERSI DIPERBAIKI
   --------------------------------------------- */

/* === Pengaturan Umum === */
.header-desktop .header-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0; 
    display: flex;
    align-items: center;
    height: 50px; 
}

.header-desktop { display: block; }
.header-mobile { display: none; }

/* === Bar Atas (Hitam) === */
.header-top-bar {
    background-color: #000000;
    border-bottom: 1px solid #333;
}

/* Kotak Logo Merah */
.logo-area {
    background-color: #cc0000;
    height: 70px;             /* lebih tinggi dari navbar hitam (50px) */
    width: 70px;              /* agak lebar biar proporsional */
	margin-left: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    top: 10px;                /* geser ke bawah biar nembus area putih */
    z-index: 10;              /* biar tetap di atas */
}

/* Atur ukuran logo */
.logo-area .custom-logo {
    height: 80%;
    width: 80%;
    object-fit: contain; /* atau cover kalau mau nutup total */
}


.site-title-fallback {
    display: none;
}

/* Navigasi Utama */
.main-navigation {
    flex-grow: 1; /* PERINTAH AGAR NAVIGASI MEMANJANG */
    margin-left: 25px;
    height: 100%;
}
.main-navigation ul {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 17px; height: 100%;
}
.main-navigation li {
    display: flex; align-items: center;
}
.main-navigation a {
    text-decoration: none; font-weight: 600; color: #ffffff; font-size: 14px; display: block; line-height: 1; white-space: nowrap; /* Mencegah teks menu turun baris */
}
.main-navigation .current-menu-item > a {
    color: #ffffff;
}
.main-navigation a:hover {
    color: #bbbbbb;
}

/* Geser hanya kotak logo */
.logo-area {
    margin-left: -20px; /* atur sesuai kebutuhan */
}

.logo-area img {
    display: block;
    margin: 0 auto;   /* biar default-nya center */

}



/* Kalau navigasi juga mau ikut geser */
.main-navigation {

}


/* === Bar Bawah (Trending) === */
.header-trending-bar {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}
.header-trending-bar .header-container {
    height: 40px;
    padding: 0 20px;
}
.trending-label {
    font-weight: 700; color: #cc0000; font-size: 14px; margin-right: 15px;
    margin-left: 56px; /* atau bisa dikurangi biar lebih kiri */
}
.trending-topics-list {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; align-items: center;
    
}
.trending-topics-list a {
    text-decoration: none; color: #333; font-size: 14px;
    
}
.trending-topics-list a:hover {
    color: #cc0000;
}


/* 7. Styling Header Search Bar - DIPERBAIKI
   --------------------------------------------- */
.header-search-container {
    /* DIHAPUS: margin-left: auto; */ /* Ini penyebab masalahnya */
    padding-left: 20px; /* Cukup beri jarak dari navigasi */
    flex-shrink: 0; /* Mencegah kolom pencarian ikut terhimpit */
}

.header-search-form {
    position: relative;
    width: 250px;
}

/* ... sisa kode search bar tetap sama ... */
.header-search-form .screen-reader-text {
    display: none;
}
.header-search-form .search-field {
    width: 100%; background-color: #333; color: #fff; border: 1px solid #555; border-radius: 5px; padding: 8px 40px 8px 15px; font-size: 14px;
}
.header-search-form .search-field::placeholder {
    color: #999;
}
.header-search-form .search-submit {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer; padding: 0; font-size: 16px;
}
.header-search-form .search-submit:hover {
    color: #fff;
}


/* === Media Query (tetap sama) === */
@media (max-width: 1024px) {
    .header-desktop {
        display: none;
    }
    .header-mobile {
        display: block;
    }
    
    /* ===============================================
        STYLING HEADER MOBILE BARU (WARNA FINAL)
        =============================================== */

    /* Mengatur bar atas (logo & ikon) */
    .mobile-top-bar {
        background-color: #000000; /* Sesuai permintaan: Hitam pekat */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        height: 60px;
    }

    /* Override gaya logo desktop (menghilangkan kotak merah) */
    .header-mobile .logo-area, .header-mobile .mobile-logo-area {
        background-color: transparent;
        width: auto;
        height: auto;
        padding: 0;
        border: none;
    }
    .header-mobile .custom-logo,
    .mobile-logo-image {
        max-height: 35px;
        width: auto;
        display: block;
    }

    .mobile-header-icons {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .mobile-icon-btn, .mobile-menu-toggle {
        background: none;
        border: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        padding: 0;
    }
    
    /* Warna icon search di header mobile */
.mobile-header-icons .fa-search {
  color: #fff;   /* ubah warna */
  font-size: 20px; /* ubah ukuran */
  opacity: 0.9;   /* transparansi */
  transition: color 0.3s ease; /* animasi halus */
}

/* Efek hover/klik */
.mobile-header-icons .fa-search:hover {
  color: #cc0000; /* merah pas disentuh */
}


    /* Navigasi & Tag yang bisa digeser */
    .mobile-scroll-nav, .mobile-trending-tags {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-scroll-nav::-webkit-scrollbar, .mobile-trending-tags::-webkit-scrollbar {
        display: none;
    }

    /* Styling Menu Navigasi Geser */
    .mobile-scroll-nav {
        background-color: #222222; /* Sesuai permintaan: Hitam tapi tidak pekat */
        border-bottom: 1px solid #444;
    }
    .scrollable-menu {
        list-style: none;
        margin: -4px;
        padding: 0 1px;
        display: flex;
    }
    .scrollable-menu a {
        display: block;
        padding: 12px 9px;
        font-size: 15px;
        color: #ffffff; /* Sesuai permintaan: Teks putih */
        font-weight: 500;
        text-decoration: none;
    }

    /* Styling Tag Populer Geser */
.mobile-trending-tags {
    background-color: #f0f0f0; /* Sesuai permintaan: Abu-abu */
    padding: 2px 5px; /* Padding dikurangi menjadi 5px */
    border-bottom: 3px solid #ddd;
}
    .scrollable-tags {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 4px;
    }
    .scrollable-tags a {
        display: block;
        background-color: #333333; /* Sesuai permintaan: Tag hitam tidak pekat */
        border: 1px solid #555555;
        border-radius: 1px;
        padding: 3px 20px;
        font-size: 13px;
        color: #ffffff; /* Sesuai permintaan: Teks putih */
        text-decoration: none;
    }
    
    /* Sesuai permintaan: Tag ketiga berwarna merah */
    .scrollable-tags li:nth-child(3) a {
        background-color: #cc0000;
        color: #fff;
        border-color: #cc0000;
    }
    
    /* Styling menu dropdown utama yang muncul saat hamburger diklik */
    .mobile-navigation {
        display: none;
        background-color: #f9f9f9;
        padding: 10px;
        border-top: 1px solid #ddd;
    }
    .mobile-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
    }
    .mobile-navigation li {
        border-bottom: 1px solid #eee;
    }
    .mobile-navigation li:last-child {
        border-bottom: none;
    }
    .mobile-navigation a {
        display: block;
        padding: 12px 10px;
        text-decoration: none;
        color: #333;
        font-weight: 600;
    }
    
    /* Aturan untuk menampilkan menu saat tombol hamburger di-klik */
    body.mobile-menu-open .mobile-navigation {
        display: block;
    }
    
    .mobile-header-icons a i.fas.fa-search {
   font-weight: 300; /* Nilai default biasanya 400 atau 700, coba turunkan */
   opacity: 0.8; /* Sedikit transparansi bisa memberikan kesan lebih tipis */
}
/* ===============================================
   STYLING POPUP SEARCH MOBILE (VERSI FINAL BERSIH)
   =============================================== */

/* Sembunyikan search bar secara default */
.mobile-search-popup {
    display: none; /* INI KUNCINYA: pastikan tersembunyi di awal */
    background-color: #212121;
    height: 60px;
    padding: 0 10px;
    align-items: center;
    gap: 10px;
}

/* Tampilkan popup HANYA saat search aktif */
body.search-is-open .mobile-search-popup {
    display: flex; 
}

/* Sembunyikan elemen lain saat search aktif */
body.search-is-open .mobile-top-bar,
body.search-is-open .mobile-navigation {
    display: none; 
}

/* Styling untuk form di dalam popup */
.mobile-search-form-popup {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
}

.mobile-search-form-popup input[type="search"] {
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: 7px 35px 7px 15px;
    font-size: 10px; 
    color: #333;
    background-color: transparent;
}

.mobile-search-form-popup input[type="search"]::placeholder {
    color: #999;
}

.mobile-search-form-popup .search-submit-popup {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 0px;
    color: #555;
    cursor: pointer;
    padding: 0;
}

.close-search-popup {
    background: none;
    border: none;
    font-size: 26px;
    font-weight: normal !important;
    color: #ffffff;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}


/*
==========================================================================
 KODE CSS FINAL FOOTER CUSTOM PSA (DESKTOP & MOBILE)
==========================================================================
*/

/* --- Pengaturan Dasar (Berlaku untuk Keduanya) --- */
    .site-footer {
        padding: 30px 15px 15px; /* Padding dikurangi di mobile */
    }
}
.site-footer { 
    background-color: #ffffff; 
    padding: 40px 20px 20px; 
    color: #333; 
    font-size: 14px; 
    border-top: 1px solid #e0e0e0; 
}
.footer-container { 
    max-width: 1140px; 
    margin: 0 auto; 
}
.footer-widget-title { 
    font-size: 15px; 
    font-weight: 700; 
    color: #000; 
    margin: 0 0 25px; 
    text-transform: uppercase; 
}
.footer-menu-list, 
.social-links-list, 
.footer-bottom-menu-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.site-footer a { 
    text-decoration: none; 
    color: #333; 
}
.footer-divider, 
.footer-divider-pre-menu { 
    border: none; 
    border-top: 1px solid #e0e0e0; 
    margin: 30px 0; 
}
.footer-divider-pre-menu { 
    margin-bottom: 25px; 
}

/* --- 1. Tampilan MOBILE (Default) --- */

/* Sembunyikan blok desktop secara default */
.footer-desktop-wrapper { 
    display: none; 
} 
.footer-mobile-wrapper { 
    display: block; 
}

.footer-mobile-wrapper .footer-logo img { max-width: 160px; }
.footer-mobile-wrapper .footer-menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footer-mobile-wrapper .social-links-list { display: flex; justify-content: center; gap: 25px; }
.footer-mobile-wrapper .social-links-list i { font-size: 24px; color: #555; }
.footer-mobile-wrapper .copyright-text { font-weight: 600; margin-bottom: 10px; }
.footer-mobile-wrapper .copyright-description { color: #555; line-height: 1.6; margin-bottom: 25px; }
.footer-mobile-wrapper .footer-bottom-menu-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.footer-mobile-wrapper .footer-bottom-menu-list a { color: #555; font-weight: 600; }


/* --- 2. Tampilan DESKTOP (Layar > 992px) --- */
@media (min-width: 992px) {
    
    /* Balik aturannya: Tampilkan Desktop, Sembunyikan Mobile */
    .footer-mobile-wrapper { 
        display: none; 
    } 
    .footer-desktop-wrapper { 
        display: block; 
    }
    
    /* Struktur Utama 3 Kolom */
    .footer-desktop-wrapper .footer-main { 
        display: flex; 
        gap: 40px;
        padding-bottom: 30px;
    }

    /* Mengatur lebar masing-masing kolom */
    .footer-desktop-wrapper .footer-column.footer-about { flex: 2.5; }
    .footer-desktop-wrapper .footer-column.footer-menu-telusuri { flex: 2; }
    .footer-desktop-wrapper .footer-column.footer-social { flex: 1.5; }

    /* Kolom 1: Tentang & Logo */
    .footer-desktop-wrapper .footer-logo img { max-width: 160px; margin-bottom: 20px; }
    .footer-desktop-wrapper .footer-description, 
    .footer-desktop-wrapper .footer-address { 
        color: #555555; 
        line-height: 1.7;
        font-size: 14px;
        padding-right: 20px;
    }

    /* Kolom 2: Menu Telusuri */
    .footer-desktop-wrapper .footer-menu-telusuri .footer-menu-list { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr);
        gap: 15px 25px;
    }
    .footer-desktop-wrapper .footer-menu-telusuri .footer-menu-list a { font-size: 14px; }

    /* Kolom 3: Media Sosial */
    .footer-desktop-wrapper .social-links-list a { 
        display: flex; 
        align-items: center; 
        padding: 10px 12px; 
        border: 1px solid #e0e0e0; 
        border-radius: 4px; 
        transition: background-color 0.2s; 
        font-size: 13px; 
        color: #555; 
    }
    .footer-desktop-wrapper .social-links-list a:hover { background-color: #f5f5f5; }
    .footer-desktop-wrapper .social-links-list li { margin-bottom: 12px; }
    .footer-desktop-wrapper .social-links-list i { width: 25px; font-size: 16px; text-align: center; }
    .footer-desktop-wrapper .social-links-list .social-handle { margin-left: 8px; }
    
    /* Baris Bawah: Copyright & Menu Bawah */
    .footer-desktop-wrapper .footer-bottom { 
        font-size: 13px; 
        border-top: 1px solid #e7e7e7; 
        margin-top: 20px; 
        padding-top: 20px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    }
    .footer-desktop-wrapper .footer-bottom .copyright-text,
    .footer-desktop-wrapper .footer-bottom-menu-list a { 
        color: #555555; 
        font-weight: 400; 
        text-decoration: none;
    }
    .footer-desktop-wrapper .footer-bottom-menu-list { 
        display: flex; 
        gap: 25px;
    }
    .footer-desktop-wrapper .footer-bottom-menu-list a:hover { 
        color: #000000; 
    }
    
	/* Styling untuk Single Post */
.entry-single {
    max-width: 800px; /* Sesuaikan dengan lebar konten Anda */
    margin: 0 auto;
    padding: 20px;
}

/* 1. Breadcrumb */
.breadcrumb {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}
.breadcrumb a {
    text-decoration: none;
    color: #1d1d1d; /* Warna merah seperti di contoh */
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* 2. Judul Artikel */
.entry-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* 3. Meta Penulis dan Tanggal */
.entry-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}
.entry-meta .meta-author a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.entry-meta .meta-date {
    margin-left: 15px;
}

/* 4. Gambar Unggulan & Caption */
.post-thumbnail {
    margin: 0 0 20px 0;
}
.post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
}
.post-thumbnail .wp-caption-text {
    font-size: 14px;
    color: #777;
    font-style: italic;
    text-align: center;
    margin-top: 8px;
}

/* 5. Isi Artikel */
.entry-content {
    font-size: 18px;
    line-height: 1.7;
}
.entry-content p,
.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5em;
}

/* 6. Navigasi Halaman */
.page-links {
    margin: 30px 0;
    font-size: 16px;
    font-weight: bold;
}
.page-links .page-number {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
.page-links .page-number:hover {
    background-color: #f0f0f0;
}
.page-links > span.page-number { /* Halaman aktif */
    background-color: #cc0000;
    color: #fff;
    border-color: #cc0000;
}
.page-links a[rel="next"] { /* Tombol Selanjutnya */
    background-color: #cc0000;
    color: #fff;
    padding: 8px 14px;
    text-decoration: none;
}

/* 7. Tag Terkait */
.tags-links {
    margin: 30px 0;
}
.tags-links .tags-title {
    font-weight: bold;
    margin-right: 10px;
}
.tags-links a {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 5px 12px;
    margin: 2px;
    font-size: 14px;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}
.tags-links a:hover {
    background-color: #ddd;
}

/* 8. Tombol Bagikan */
.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}
.share-buttons .share-title {
    font-weight: bold;
}
.share-buttons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 18px; /* Ukuran untuk huruf F, X, W, T */
    font-weight: bold;
}
.share-facebook { background-color: #3b5998; }
.share-twitter { background-color: #1DA1F2; }
.share-whatsapp { background-color: #25D366; }
.share-telegram { background-color: #0088cc; }
    
	/*
 * Layout UNTUK SEMUA HALAMAN (Homepage & Single Post)
 *--------------------------------------------------*/

.homepage-layout {
    display: flex;
    flex-wrap: wrap; /* Agar bisa responsive di layar kecil */
    gap: 30px; /* Jarak antara konten utama dan sidebar */
    max-width: 1200px; /* Lebar maksimum container */
    margin: 0 auto;
    padding: 20px;
}

/* Area konten utama */
.main-content-area {
    flex: 1; 
    min-width: 0; 
    /* Kalkulasi lebar: 100% - lebar sidebar - jarak */
    width: calc(100% - 300px - 30px); 
}

/* Area sidebar */
.sidebar-area {
    width: 300px; /* Atur lebar sidebar sesuai keinginan Anda */
    flex-shrink: 0; 
}

/*
 * Media Query untuk Tampilan Responsif (Mobile)
 *--------------------------------------------------*/
@media (max-width: 768px) {
    .homepage-layout {
        flex-direction: column; /* Ubah layout menjadi satu kolom */
    }

    .main-content-area,
    .sidebar-area {
        width: 100%; /* Buat konten dan sidebar menjadi lebar penuh */
    }
}
	
	/*
 * ===================================================================
 * TAMPILAN MOBILE & TABLET
 * ===================================================================
 */
@media (max-width: 768px) {

    /* --- 1. Layout Utama --- */
    .homepage-layout {
        /* Mengubah layout menjadi satu kolom vertikal */
        flex-direction: column; 
        
        /* Mengurangi spasi di sisi kiri dan kanan untuk layar kecil */
        padding: 15px; 
    }

    .main-content-area,
    .sidebar-area {
        /* Membuat konten dan sidebar memenuhi lebar layar */
        width: 100%; 
    }

    /* --- 2. Tipografi (Ukuran Font) --- */
    .entry-title {
        /* Mengecilkan judul utama agar tidak terlalu besar di ponsel */
        font-size: 28px; 
        line-height: 1.3;
    }

    .entry-content {
        /* Menyesuaikan ukuran font konten agar nyaman dibaca */
        font-size: 16px; 
        line-height: 1.8;
    }
    
    .entry-meta,
    .breadcrumb {
        /* Mengecilkan font untuk meta dan breadcrumb */
        font-size: 13px;
    }

    /* --- 3. Elemen Lainnya --- */
    .share-buttons {
        /* Membuat tombol share berada di tengah */
        justify-content: center;
    }
    
    .page-links .page-number {
        /* Mengecilkan tombol navigasi halaman */
        padding: 6px 12px;
        font-size: 14px;
    }
    
	
}
	
}/* ============================================================
   KOMENTAR SIMPLE STYLE
   ============================================================ */

/* Area utama komentar */
.comments-area {
    margin-top: 40px;
}

/* Judul list komentar */
.comments-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

/* List komentar */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modern-comment {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.comment-avatar {
    margin-right: 12px;
}
.comment-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.comment-body {
    flex: 1;
}
.comment-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}
.comment-author {
    font-weight: 600;
    margin-right: 10px;
}
.comment-date {
    font-size: 12px;
    color: #999;
}
.comment-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
}
.comment-reply a {
    font-size: 13px;
    color: #cc0000;
    text-decoration: none;
    font-weight: 500;
}
.comment-reply a:hover {
    text-decoration: underline;
}

/* ============================================================
   FORM KOMENTAR
   ============================================================ */
.comment-reply-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
    border-left: 4px solid #cc0000;
    padding-left: 8px;
    text-transform: uppercase;
}

.comment-notes {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Input & textarea */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}
.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus {
    border-color: #cc0000;
    box-shadow: 0 0 0 2px rgba(204,0,0,0.1);
    outline: none;
}

/* Tombol submit */
.comment-form .submit {
    background: #cc0000;
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    float: right;
    transition: background 0.2s ease;
}
.comment-form .submit:hover {
    background: #cc0000;
}

/* Checkbox */
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 15px;
    color: #555;
}
.comment-form-cookies-consent input {
    margin-right: 8px;
}


/* ===============================================
   FINAL: CSS LENGKAP UNTUK SINGLE POST (STRUKTUR BARU)
   =============================================== */

/* --- 1. SAKLAR DASAR (PENTING JANGAN DIHAPUS) --- */
.d-desktop { display: block; }
.d-mobile { display: none; }

@media (max-width: 992px) {
    .d-desktop { display: none; }
    .d-mobile { display: block; }
}

/* --- 2. GAYA UTAMA UNTUK SEMUA UKURAN LAYAR --- */
.single-post-unified .entry-title {
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #111;
}

.single-post-unified .entry-meta {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

.single-post-unified .entry-meta .author-name {
    margin-bottom: 5px;
}

.single-post-unified .entry-meta a {
    text-decoration: none;
    color: #111;
    font-weight: 600;
}

.single-post-unified .post-thumbnail {
    margin-bottom: 10px;
}

.single-post-unified .post-thumbnail img {
    width: 100%;
    height: auto;
}

.single-post-unified .thumbnail-caption {
    font-size: 12px;
    font-style: italic;
    color: #777;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 20px;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.single-post-unified .entry-content {
    font-size: 16px;
    line-height: 1.8;
}

.single-post-unified .entry-footer {
    margin-top: 30px;
    border-top: none;
    padding-top: 0;
}

.single-post-unified .post-tags {
    margin-bottom: 20px;
}

.single-post-unified .post-tags h4 {
    font-size: 14px;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.single-post-unified .post-tags a {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 5px 12px;
    margin: 0 5px 5px 0;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    color: #555;
}

/* --- 3. GAYA KHUSUS DESKTOP --- */
.single-post-unified .entry-breadcrumbs {
    font-size: 14px;
    margin-bottom: -15px;
    color: #555;
}

.single-post-unified .entry-breadcrumbs a {
    text-decoration: none;
    color: #555;
    transition: color 0.2s;
}

.single-post-unified .entry-breadcrumbs a:hover {
    color: #cc0000;
}

.single-post-unified .entry-breadcrumbs .sep {
    margin: 0 3px;
    color: #999;
}

.single-post-unified .entry-share-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: none;
}

.single-post-unified .social-share-buttons span {
    font-weight: 600;
    margin-right: 5px;
    font-size: 14px;
}

.single-post-unified .social-share-buttons .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.single-post-unified .share-btn.facebook { background-color: #3b5998; }
.single-post-unified .share-btn.twitter { background-color: #000000; }
.single-post-unified .share-btn.whatsapp { background-color: #25d366; }
.single-post-unified .share-btn.telegram { background-color: #0088cc; }
.single-post-unified .share-btn.link { background-color: #888; }

.single-post-unified .comments-link a {
    background-color: #f5f5f5;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.single-post-unified .comments-link a i {
    margin-right: 5px;
}

.single-post-unified .social-share-buttons.bottom {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

/* --- 4. GAYA RESPONSIVE (KHUSUS MOBILE) --- */
@media (max-width: 1024px) {
    .single-post-unified {
        padding-top: 20px;
    }

    /* Breadcrumbs Mobile */
    .breadcrumb {
        font-size: 13px;
        margin-bottom: 8px;
        margin-top: -36px;
        padding-top: 1px;
        display: flex;
        align-items: center;
        gap: 1px;
    }
    .breadcrumb .home-link {
        background-color: #f0f2f5;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #616161;
    }
    .breadcrumb a.current {
        color: #333;
        text-decoration: none;
        font-weight: 500;
        background-color: #ffffff;
        padding: 5px 7px;
        border-bottom: 1px solid #e0e0e0;
        display: inline-block;
        margin-bottom: 2.4px;
    }
    .breadcrumb .sep { display: none; }

    /* Judul & Meta Mobile */
    .single-post-unified .entry-title {
        font-size: 22px;
        line-height: 1.4;
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .single-post-unified .entry-meta {
        font-size: 12px;
        margin-bottom: 15px;
    }

    /* Gambar Utama Full-width di Mobile */
    .single-post-unified .post-thumbnail {
        width: 100vw;
        max-width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-bottom: 20px;
    }
    .single-post-unified .post-thumbnail img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* Tag di Mobile */
    .single-post-unified .post-tags h4 {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .single-post-unified .post-tags a {
        padding: 5px 10px;
        margin: 0 6px 6px 0;
        font-size: 12px;
    }
    
    /* Tombol Share Melayang di Mobile */
    .single-post-unified .social-share-buttons.bottom.d-mobile {
        position: fixed;
        bottom: 14px;
        left: 50%;
        width: auto;
        background-color: #ffffff;
        padding: 4px 8px;
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 50px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }
    /* Kelas .is-visible ditambahkan oleh JavaScript untuk memunculkannya */
    .single-post-unified .social-share-buttons.bottom.d-mobile.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    .single-post-unified .social-share-buttons.bottom.d-mobile .share-btn {
        width: 25px;
        height: 25px;
        font-size: 15px;
    }
    .single-post-unified .social-share-buttons.bottom.d-mobile span:not(.comment-count) {
        display: none;
    }
    .single-post-unified .share-btn.comments .comment-count {
        position: absolute; top: -3px; right: -3px; background-color: #cc0000;
        color: #fff; width: 15px; height: 15px; border-radius: 50%;
        font-size: 8px; font-weight: 700; display: flex; align-items: center;
        justify-content: center; border: 1px solid #fff;
    }
    /* Beri ruang di bawah agar tidak tertutup share bar */
    .single-post-unified {
        padding-bottom: 70px;
    }
}


/* ===============================================
   RESPONSIVE FIX LIST VIEW DI MOBILE
   =============================================== */
@media (max-width: 768px) {
/* Setiap item artikel */
.article-list-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e9e9e9;
  align-items: stretch; /* Biar tinggi kiri-kanan sama */
}
    

/* Thumbnail kiri */
.article-thumbnail {
  flex: 0 0 100px;      /* lebar tetap 100px */
  height: 100px;        /* tinggi tetap 100px → kotak */
  overflow: hidden;     /* sembunyikan bagian yang kelebihan */
  border-radius: 4px;
}

.article-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop biar proporsional */
  display: block;
}

/* Konten kanan */
.article-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%; /* penting: isi tinggi penuh */
}

/* Meta top (kategori, tanggal) */
.article-meta-top {
  font-size: 12px;
  margin-bottom: 4px;
}

/* Judul isi ruang tengah */
.article-title {
  font-size: 14px;
  line-height: 1.3;
  margin: 4px 0;
  flex-grow: 1; /* isi ruang kosong */
	display: -webkit-box;
    -webkit-line-clamp: 3;       /* maksimal 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta bottom nempel ke bawah */
.article-meta-bottom {
  font-size: 11px;
  color: #777;
  margin-top: auto; /* kunci di bawah */
}   

    /* Membuat layout sedikit lebih lebar di mobile */
@media (max-width: 768px) {
    .site-main,
    .site-footer {
        padding-left: 12px;  /* Kurangi dari 20px */
        padding-right: 12px; /* Kurangi dari 20px */
    }

/*
==========================================================================
 KODE CSS FINAL FOOTER (STRUKTUR DIPERBAIKI)
==========================================================================
*/

/* --- Pengaturan Dasar & Latar Belakang --- */
.site-footer {
    background-color: #222 !important; 
    color: #f0f0f0 !important;
    padding: 40px 20px 20px !important;
    border-top: none !important;
}
.footer-container {
    max-width: 1140px;
    margin: 0 auto;
}
.site-footer a {
    text-decoration: none !important;
    color: #bdbdbd !important;
}

/* --- Tampilan MOBILE (Default - Dark Mode) --- */

.footer-desktop-wrapper {
    display: none !important;
}
.footer-mobile-wrapper {
    display: block !important;
}

/* 1. Logo */
.footer-mobile-wrapper .footer-logo {
    text-align: left !important;
    border-bottom: 1px solid #333333;
    margin-top: -20px;
    margin-bottom: 20px;
    padding-bottom: 10px; 
}
.footer-mobile-wrapper .footer-logo img {
    max-width: 200px !important;
    filter: none !important;
}

/* 2. Menu Kategori */
.footer-mobile-wrapper .footer-menu-telusuri {
    border-bottom: 1px solid #333333;
    padding-bottom: 17px;
    margin-bottom: 10px;
}
.footer-mobile-wrapper .footer-menu-list {
    list-style: none !important; padding: 0 !important; margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 0px !important;
}
.footer-mobile-wrapper .footer-menu-list li a {
    font-size: 14px !important;
    color: #bdbdbd !important;
    font-weight: 400 !important;
}
.footer-mobile-wrapper .footer-menu-list li a:hover {
    color: #ffffff !important;
}

/* 3. Ikon Sosial Media */
.footer-mobile-wrapper .social-links-list {
    list-style: none !important; padding: 0 !important; margin: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}
.footer-mobile-wrapper .social-links-list a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 30px !important; height: 30px !important;
    border: 1px solid #555555 !important;
    border-radius: 50% !important;
}
.footer-mobile-wrapper .social-links-list i {
    font-size: 16px !important;
    color: #bdbdbd !important;
}

/* 4. Teks Copyright Panjang */
.footer-mobile-wrapper .footer-copyright-mobile {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 10px;
    margin-bottom: 11px;
}
.footer-mobile-wrapper .footer-copyright-mobile .copyright-text,
.footer-mobile-wrapper .footer-copyright-mobile .copyright-description {
    font-size: 11px !important;
    color: #888888 !important;
    text-align: left !important;
    line-height: 1.6 !important;
    margin: 0 !important; padding: 0 !important;
}
.footer-mobile-wrapper .footer-copyright-mobile p { margin: 0 !important; }

/* 5. Menu Bawah */
.footer-mobile-wrapper .footer-bottom-menu-list {
    list-style: none !important; padding: 0 !important; margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}
.footer-mobile-wrapper .footer-bottom-menu-list li a {
    font-size: 10px !important;
    color: #bdbdbd !important;
    font-weight: 400 !important;
    padding-right: 1px; !important;
    margin-top; 10px
}
.footer-mobile-wrapper .footer-bottom-menu-list li a:hover {
    color: #ffffff !important;
}
.footer-mobile-wrapper .footer-bottom-menu-list li:not(:last-child)::after {
    content: '|' !important;
    color: #555555 !important;
    margin: 0 4px!important; /* Jarak disesuaikan agar lebih pas */
    font-size: 10px !important; /* Samakan ukurannya dengan font link */
    position: relative;
    top: -1px; /* Sesuaikan posisi vertikal agar pas di tengah */
}
/* Sembunyikan bawaan dari */
.footer-mobile-wrapper .footer-divider,
.footer-mobile-wrapper .footer-divider-pre-menu {
    display: none !important;
}


/* --- Tampilan DESKTOP (Tidak Berubah) --- */
@media (min-width: 992px) {
    /* (Semua kode desktop tetap sama seperti sebelumnya) */
    .site-footer { background-color: #ffffff !important; color: #333333 !important; border-top: 1px solid #e0e0e0 !important; }
    .site-footer a { color: #333333 !important; }
    .footer-widget-title { color: #000 !important; }
    .footer-mobile-wrapper { display: none !important; } 
    .footer-desktop-wrapper { display: block !important; }
    .footer-desktop-wrapper .footer-main { display: flex; gap: 40px; padding-bottom: 30px; }
    .footer-desktop-wrapper .footer-column.footer-about { flex: 2.5; }
    .footer-desktop-wrapper .footer-column.footer-menu-telusuri { flex: 2; }
    .footer-desktop-wrapper .footer-column.footer-social { flex: 1.5; }
    .footer-desktop-wrapper .footer-logo img { max-width: 160px; margin-bottom: 20px; filter: none; }
    .footer-desktop-wrapper .footer-description, 
    .footer-desktop-wrapper .footer-address { color: #555555; line-height: 1.7; font-size: 14px; padding-right: 20px; }
    .footer-desktop-wrapper .footer-menu-telusuri .footer-menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 25px; }
    .footer-desktop-wrapper .footer-menu-telusuri .footer-menu-list a { font-size: 14px; }
    .footer-desktop-wrapper .social-links-list a { display: flex; align-items: center; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 4px; transition: background-color 0.2s; font-size: 13px; color: #555; }
    .footer-desktop-wrapper .social-links-list a:hover { background-color: #f5f5f5; }
    .footer-desktop-wrapper .social-links-list li { margin-bottom: 12px; }
    .footer-desktop-wrapper .social-links-list i { width: 25px; font-size: 16px; text-align: center; }
    .footer-desktop-wrapper .social-links-list .social-handle { margin-left: 8px; }
    .footer-desktop-wrapper .footer-bottom { font-size: 13px; border-top: 1px solid #e7e7e7; margin-top: 20px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; }
    .footer-desktop-wrapper .footer-bottom .copyright-text,
    .footer-desktop-wrapper .footer-bottom-menu-list a { color: #555555; font-weight: 400; text-decoration: none; }
    .footer-desktop-wrapper .footer-bottom-menu-list { display: flex; gap: 25px; }
    .footer-desktop-wrapper .footer-bottom-menu-list a:hover { color: #000000; }
}
	
}

.ki-post-warning {
  border: 1px solid red;
  color: red;
  background-color: #fff0f0;
  padding: 12px 18px;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 768px) {
.ki-post-warning {
  border: 1px solid red;
  color: red;
  background-color: #fff0f0;
  padding: 12px 18px;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.3;
}
}

.baca-juga-box {
    border-left: 5px solid #d9534f; /* Garis merah di kiri */
    margin: 25px 0; /* Jarak atas dan bawah */
    padding: 1px 8px; /* Jarak di dalam kotak */
    font-size: 1.1em; /* Ukuran font */
}

.baca-juga-box p {
    margin: 0;
    padding: 0;
}

.baca-juga-box a {
    text-decoration: none; /* Menghilangkan garis bawah tautan */

}

}

.ki-post-warning {
  border: 1px solid red;
  color: red;
  background-color: #fff0f0;
  padding: 12px 18px;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 768px) {
.ki-post-warning {
  border: 1px solid red;
  color: red;
  background-color: #fff0f0;
  padding: 12px 18px;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.3;
}
}

.baca-juga-box {
    border-left: 5px solid #d9534f; /* Garis merah di kiri */
    margin: 25px 0; /* Jarak atas dan bawah */
    padding: 1px 8px; /* Jarak di dalam kotak */
    font-size: 1.1em; /* Ukuran font */
}

.baca-juga-box p {
    margin: 0;
    padding: 0;
}

.baca-juga-box a {
    text-decoration: none; /* Menghilangkan garis bawah tautan */

}

/* Menimpa inline style width pada caption agar responsif */
.entry-content .wp-caption {
    max-width: 100% !important; /* !important diperlukan untuk menimpa inline style */
    width: auto !important;     /* Memaksa lebar mengikuti konten/layar */
    margin-left: auto;
    margin-right: auto;
}

/* Memastikan gambar selalu responsif */
.entry-content .wp-caption img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0px; /* Opsional: estetika sudut melengkung */
}

/* Memberikan estetika pada teks keterangan gambar */
.entry-content .wp-caption-text {
    font-size: 0.85rem;
    color: #777;
    text-align: center;
    padding: 8px 10px;
    font-style: italic;
    line-height: 1.5;
}

/* ===============================================
   STYLE BLOCKQUOTE (KUTIPAN) MODERN
   =============================================== */

/* 1. Wadah Utama Blockquote */
.entry-content blockquote {
    position: relative; /* Penting: agar ikon kutip bisa diatur posisinya */
    margin: 30px 0;
    padding: 10px 20px 10px 25px; /* Memberi ruang agar teks tidak mepet */
    border-left: 4px solid #cc0000; /* Garis biru vertikal tebal */
    background: #fcfcfc; /* Warna latar abu-abu sangat muda (opsional, agar rapi) */
    border-radius: 0 4px 4px 0; /* Lengkungan halus di sisi kanan */
}

/* 2. Membuat Ikon Tanda Kutip Besar (Tanpa Gambar) */
.entry-content blockquote::before {
    content: "\201C"; /* Kode Unicode untuk tanda kutip buka (Left Double Quote) */
    font-family: sans-serif; /* Menggunakan font standar agar bentuknya tegas/modern */
    font-size: 60px; /* Ukuran jumbo */
    color: #cc0000; /* Warna biru (samakan dengan garis pinggir) */
    position: absolute;
    top: -10px; /* Posisi vertikal */
    left: 15px; /* Posisi horizontal (dekat garis biru) */
    line-height: 1;
    pointer-events: none; /* Agar ikon ini tidak ikut ter-blok saat select text */
}

/* 3. Pengaturan Teks di dalam Quote */
.entry-content blockquote p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
    
    /* Trik: Memberi jarak atas khusus paragraf pertama agar tidak menabrak ikon kutip */
    margin-top: 35px; 
}
/* Jika ada paragraf kedua dst, hilangkan margin top-nya */
.entry-content blockquote p + p {
    margin-top: 0; 
}

/* 4. Style untuk Nama Author (Cite) */
.entry-content blockquote cite {
    display: block; /* Memaksa turun ke baris baru */
    margin-top: 15px;
    font-size: 13px;
    color: #666; /* Warna abu-abu */
    font-style: italic; /* Miring */
    font-weight: 500;
}

/* Targetkan paragraf di dalam konten artikel */
.entry-content p {
    /* 1. Jenis Font: Mengutamakan font bawaan HP (sangat cepat & mirip screenshot) */
    font-family: sans-serif;

    /* 2. Ukuran Font: 18px adalah standar emas untuk bacaan mobile saat ini */
    font-size: 17px;

    /* 3. Jarak Antar Baris: Memberi ruang napas agar tidak sesak */
    line-height: 1.7;

    /* 4. Warna Teks: Abu-abu gelap (#2d2d2d) lebih nyaman daripada Hitam (#000) */
    color: #2d2d2d;

    /* 5. Jarak Antar Paragraf */
    margin-bottom: 1.5em;
    
    /* Opsional: Agar teks rata kiri (lebih nyaman dibaca di HP daripada Justify) */
    text-align: left; 
}

/* Untuk Link di dalam artikel agar kontras */
.entry-content a {
    color: #d93025; /* Merah khas portal berita seperti di screenshot (kata 'Huawei') */
    text-decoration: underline;
}

/* Untuk Bold (seperti kata 'JAKARTA') */
.entry-content strong, 
.entry-content b {
    font-weight: 700;
    color: #000; /* Hitam lebih pekat untuk penekanan */
}