/* =========================================================
   GAYA UNTUK HALAMAN ARTIKEL TUNGGAL (SINGLE POST)
   ========================================================= */

/* KUNCI: Memastikan semua elemen menghitung lebar dengan benar */
* {
    box-sizing: border-box;
}

/* KUNCI: Mencegah body meluap ke samping */
body.single-post {
    overflow-x: hidden;
    width: 100%;
}

.single-main {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
    background-color: #fff;
    /* PERBAIKAN: Pagar agar tidak goyang */
    overflow-x: hidden; 
    width: 100%;
}

/* 1. Header Khusus Single Post */
.site-header-single {
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
}

.site-header-single .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.logo-text {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    text-decoration: none;
}

.blue-icon {
    background: #0066ff;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 5px;
}

.header-actions {
    display: flex;
    gap: 15px;
    color: #333;
}

/* 2. Judul dan Meta Data */
.single-category a {
    color: #222222; /* Warna hijau sesuai referensi */
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.single-title {
    font-size: 22px;
    line-height: 1.3;
    margin: 10px 0;
    font-weight: 800;
    color: #1a1a1a;
}

.single-author {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

/* =========================================================
   PERBAIKAN PERATAAN META (DATE & VIEWS)
   ========================================================= */

.single-meta {
    display: flex;
    flex-wrap: wrap; /* Agar rapi jika layar sangat kecil */
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #888;
    margin-bottom: 24px;
}

/* KUNCI PERBAIKAN: Membuat pembungkus date dan views menjadi flex */
.meta-date, .meta-views {
    display: flex;
    align-items: center; /* Menarik teks dan ikon ke tengah secara vertikal */
    line-height: 1; /* Menghilangkan ruang kosong tambahan di atas/bawah teks */
}

.single-meta svg {
    margin-right: 5px;
    /* Menghapus vertical-align lama agar tidak bentrok dengan flexbox */
    vertical-align: unset; 
    display: block; /* Menghilangkan whitespace di bawah SVG */
}

.meta-divider {
    color: #ccc;
    display: flex;
    align-items: center;
}

/* 3. Gambar Andalan & Keterangan */
.single-thumbnail-box {
    margin: 0 -15px 20px -15px; /* Mentok kanan-kiri di mobile */
}

.single-featured-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Memaksa kotak gambar menjadi rasio 16:9 secara matematis */
    object-fit: cover; /* Mengisi penuh area 16:9 tanpa mengubah proporsi asli gambar */
    object-position: center; /* Memastikan titik fokus pemotongan berada di tengah */
    display: block;
    border-radius: 0px; /* Opsional: Memberikan efek lengkungan halus di sudut gambar */
}

.thumbnail-caption {
    padding: 10px 15px;
    background-color: #f9f9f9;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    border-bottom: 1px solid #eee;
}

/* 4. Isi Artikel */
.single-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.single-content p {
    margin-bottom: 20px;
}

/* =========================================================
   PERBAIKAN BAGIAN BAWAH ARTIKEL (CLEAN STYLE)
   ========================================================= */

/* 5. Tag (#) - Dibuat Bold & Rapat */
.single-tags {
    margin: 30px 0 10px; /* Jarak bawah dikurangi agar tidak terlalu jauh dari share */
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

.single-tags a {
    color: #000;
    text-decoration: none;
    margin-right: 8px; /* Jarak antar tag yang lebih pas */
}

/* 6. Tombol Share - GARIS DIHILANGKAN */
.single-share {
    display: flex;
    justify-content: center;
    gap: 9px; /* Jarak antar icon sedikit dilebarkan agar lebih lega */
    margin: 20px 0; 
    padding: 10px 0;
    border-top: none; /* GARIS ILANG! */
}

.share-btn {
    width: 30px; /* Sedikit dibesarkan agar icon di dalamnya lebih jelas */
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

.share-btn svg {
    width: 16px;
    height: 16px;
}

/* Warna Brand Asli Tetap Dipertahankan */
.share-fb { background-color: #1877F2; }
.share-x  { background-color: #000000; }
.share-tg { background-color: #26A5E4; }
.share-wa { background-color: #25D366; }
.share-copy { background-color: #6e6e6e; }




/* =========================================================
   CONSOLIDATED DESKTOP LAYOUT (Gagah & Responsif)
   ========================================================= */

@media screen and (min-width: 1024px) {
    
    /* 1. Reset Container Utama */
    body.single-post .single-desktop-main {
        width: 100% !important;
        max-width: 100% !important; 
        display: block !important;
        background: #fff;
    }

    /* 2. Pagar Luar & Header (Sinkron di 1140px) */
    body.single-post .desktop-container,
    body.single-post .site-header-single .header-inner {
        width: 1140px !important; 
        max-width: 1140px !important; 
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    body.single-post .desktop-container {
        padding: 40px 20px !important;
        display: block !important;
    }

    /* 3. Area Judul */
    body.single-post .entry-header-desktop {
        width: 100% !important;
        margin-bottom: 30px !important;
        text-align: left !important;
    }

    body.single-post .single-title-desktop {
        font-size: 40px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        color: #111 !important;
    }

/* Update poin nomor 4 di CSS kamu */
body.single-post .desktop-layout-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 50px !important;
    width: 100% !important;
    /* KUNCI UTAMA: Agar sidebar tidak ditarik jadi setinggi artikel */
    align-items: flex-start !important; 
	 position: -webkit-sticky !important; /* Untuk Safari */
    position: sticky !important;
    top: 120px !important; /* Jarak dari atas layar */
    z-index: 99 !important;
    align-self: flex-start !important; /* Pengaman tambahan */
}
	

	
/* 6. Kolom Kanan (Sidebar Tetap) */
body.single-post .sidebar-column-desktop {
    width: 280px !important;
    flex: 0 0 280px !important;
    display: block !important;
    /* Efek Sticky */
    position: -webkit-sticky; /* Support Safari */
    position: sticky;
    top: 100px; /* Jarak dari atas layar saat melayang */
    z-index: 10;
}

    /* 7. Gambar Andalan */
    body.single-post .featured-img-desktop {
        width: 100% !important;
        height: auto !important;
        border-radius: 0px !important;
        object-fit: cover;
    }
}

/* =========================================================
   STYLE SIDEBAR PRO: BESAR & TANPA GARIS PEMISAH
   ========================================================= */

/* 1. Menghilangkan Garis Pemisah & Menambah Jarak Antar Item */
.sidebar-version .insight-post-card {
    margin-bottom: 30px; /* Jarak antar artikel ditambah */
    padding-bottom: 0;
    border-bottom: none !important; /* GARIS DIHAPUS */
}

/* 2. Memperbesar Thumbnail (Dibuat 100px) */
.sidebar-version .post-thumbnail-container {
    flex-shrink: 0;
}

.sidebar-version .post-thumbnail {
    width: 90px !important; /* Thumbnail lebih besar */
    height: 90px !important;
    object-fit: cover;
    border-radius: 0px; /* Sudut lebih tumpul agar modern */
}

/* 3. Menyesuaikan Kategori Vertikal dengan Tinggi Gambar Baru */
.sidebar-version .post-category-vertical {
    height: 100px !important; /* Disamakan dengan tinggi thumbnail */
    border-right: 1px solid #ddd;
    padding-right: 10px;
    width: 25px;
}

.sidebar-version .vertical-text {
    font-size: 10px; /* Sedikit diperbesar agar terbaca */
    letter-spacing: 1.5px;
}

/* 4. Memperbesar Judul Artikel */
.sidebar-version .post-title {
    font-size: 14px !important; /* Judul lebih besar */
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
}

.sidebar-version .post-title a {
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Maksimal 3 baris agar tetap rapi */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Merapikan Meta (Penulis & Tanggal) */
.sidebar-version .post-meta {
    font-size: 11px;
    color: #777;
}

.sidebar-version .post-author {
    color: #cc0000;
    font-weight: 700;
}

/* --- OPERASI PENYELAMATAN STICKY --- */
body.single-post, 
body.single-post #page, 
body.single-post #content, 
body.single-post .site-content,
body.single-post .single-desktop-main {
    overflow: visible !important; /* WAJIB visible agar sticky jalan */
}

/* Pastikan container tidak membatasi tinggi */
body.single-post .desktop-container {
    overflow: visible !important;
    display: block !important;
}

/* =========================================================
   HEADER SINGLE DESKTOP: LOGO | NAV | SEARCH
   ========================================================= */

.site-header-single-desktop {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    padding: 15px 0;
    position: sticky; /* Membuat header melayang jika diinginkan */
    top: 0;
    z-index: 1000;
}

.site-header-single-desktop .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Membuat jarak otomatis antar elemen */
}

/* --- Gaya Logo --- */
.site-branding-desktop .custom-logo-link img {
    max-height: 45px;
    width: auto;
    display: block;
}

.site-title-desktop a {
    font-size: 24px;
    font-weight: 900;
    color: #111;
    text-decoration: none;
    letter-spacing: -1px;
}

/* --- Gaya Navigasi --- */
.main-navigation-desktop {
    flex: 1; /* Mengambil sisa ruang di tengah */
    display: flex;
    justify-content: center; /* Menaruh menu di tengah-tengah logo dan search */
}

.nav-menu-desktop {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* Jarak antar menu */
}

/* =========================================================
   PENGATURAN FON NAVIGASI DESKTOP (BERSIH & MODERN)
   ========================================================= */

.nav-menu-desktop li a {
    /* Memaksa penggunaan fon modern tanpa sirip (sans-serif) */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    
    font-size: 14px !important; /* Ukuran yang ideal untuk layar lebar */
    font-weight: 700 !important; /* Ketebalan teks (Bold) */
    color: #111111 !important; /* Warna hitam pekat agar kontras */
    text-transform: uppercase !important; /* Memastikan huruf kapital semua */
    letter-spacing: 0.5px !important; /* Memberi sedikit jarak antar huruf agar mudah dibaca */
    text-decoration: none !important;
    transition: color 0.3s ease !important; /* Efek transisi warna yang halus */
}

/* Efek saat kursor diarahkan (Hover) */
.nav-menu-desktop li a:hover {
    color: #cc0000 !important; /* Berubah menjadi hijau tema Anda */
}
/* --- Gaya Search Icon --- */
.header-actions-desktop .search-toggle-desktop {
    color: #333;
    display: flex;
    align-items: center;
    padding: 5px;
    transition: transform 0.2s, color 0.2s;
}

.header-actions-desktop .search-toggle-desktop:hover {
    color: #cc0000;
    transform: scale(1.1);
}

/* --- Default: Sembunyikan Versi Desktop --- */
.header-desktop-only {
    display: none !important;
}

/* --- Mode Desktop (1024px ke atas) --- */
@media screen and (min-width: 1024px) {
    /* Sembunyikan Mobile */
    .header-mobile-only {
        display: none !important;
    }

    /* Tampilkan Desktop */
    .header-desktop-only {
        display: block !important;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 0;
    }

    .header-inner-desktop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1140px;
        margin: 0 auto;
    }

    /* Menu Memanjang Samping */
    .nav-menu-desktop {
        display: flex;
        list-style: none;
        gap: 30px;
        margin: 0;
        padding: 0;
    }

    .nav-menu-desktop li a {
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        color: #333;
        text-transform: uppercase;
    }
}

/* =========================================================
   FIX LOGO MEPET KIRI (MOBILE & DESKTOP)
   ========================================================= */

/* --- VERSI MOBILE --- */
.site-header-single .header-inner {
    padding-left: 15px !important; /* Jarak aman dari pinggir layar HP */
    justify-content: space-between !important;
}

.site-branding {
    margin-right: auto !important; /* Mendorong search & menu ke kanan */
    text-align: left !important;
    padding-left: 0 !important;
}

.site-branding .custom-logo-link {
    display: inline-block !important;
}

/* --- VERSI DESKTOP --- */
.header-desktop-only .header-inner-desktop {
    padding-left: 20px !important; /* Jarak aman pinggir layar laptop */
    justify-content: space-between !important;
}

.site-branding-desktop {
    margin-right: 0 !important;
    text-align: left !important;
    padding-left: 0 !important;
    flex: 0 0 auto !important; /* Mencegah kolom logo melebar ke tengah */
}

/* Memastikan gambar logo tidak punya margin bawaan */
.custom-logo-link img {
    margin-left: 0 !important;
    display: block !important;
    object-position: left; /* Jika gambar punya area transparan, paksa ke kiri */
}

/* --- 1. Wadah Menu Mobile (PAGAR UTAMA) --- */
.mobile-dropdown-container {
    display: none; /* Sembunyi secara default */
    
    /* KUNCI FULL WIDTH: Menggunakan posisi absolut agar lepas dari padding induk */
    position: absolute;
    left: 0;
    width: 100vw; /* Paksa lebar 100% lebar layar HP */
    z-index: 999;
    
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* KUNCI MUNCUL: Harus ada pemicu ini agar saat diklik menu keluar */
.menu-is-open .mobile-dropdown-container {
    display: block !important;
}

/* --- 2. Styling List Menu (VERSI BERSIH & FIX MEPET) --- */
.mobile-dropdown-container .mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-dropdown-container .mobile-nav-list li {
    border-bottom: 1px solid #f7f7f7 !important;
}

.mobile-dropdown-container .mobile-nav-list li a {
    text-decoration: none !important;
    color: #111 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    
    /* Ukuran font & ketebalan yang pas */
    font-size: 13px !important;
    font-weight: 700 !important; 
    text-transform: uppercase !important;
    display: block !important;
    
    /* KUNCI PERBAIKAN: Padding kiri 25px agar tidak mepet */
    /* 15px = atas bawah | 25px = kiri kanan */
    padding: 15px 25px !important; 
    
    transition: all 0.2s ease !important;
}

/* Efek saat menu ditekan/disentuh */
.mobile-dropdown-container .mobile-nav-list li a:active {
    background-color: #f9f9f9;
    color: #cc0000 !important;
    padding-left: 30px !important; /* Memberi kesan interaktif */
}

/* --- Menu Aktif (Jika Sedang Berada di Halaman Tersebut) --- */
.mobile-dropdown-container .mobile-nav-list li.current-menu-item a {
    color: #cc0000 !important;
}
/* --- 4. Efek Pas Diklik (Saat Ditekan Jempol) --- */
.mobile-dropdown-container .mobile-nav-list li a:active {
    font-size: 12px !important; /* Mengecil sedikit saat ditekan */
    color: #cc0000 !important; 
    padding-left: 5px !important; 
}

/* --- 5. Menu Aktif (Halaman yang sedang dibuka) --- */
.mobile-dropdown-container .mobile-nav-list li.current-menu-item a {
    color: #cc0000 !important;
    font-size: 13px !important; /* Disamakan dengan ukuran dasar agar tidak belang */
}

/* --- 3. Animasi Hamburger ke X --- */
.hamburger-icon {
    width: 22px;
    height: 16px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #111;
    transition: all 0.3s ease-in-out;
}

/* Efek saat terbuka */
.menu-is-open .hamburger-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-is-open .hamburger-icon span:nth-child(2) {
    opacity: 0; /* Garis tengah hilang */
}

.menu-is-open .hamburger-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 10px;
    font-weight: 600;
    color: #cc0000;
    letter-spacing: 1px;
}

.close-dropdown-btn {
    color: #ff4d4d;
    text-decoration: none;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-list li {
    border-bottom: 1px solid #f9f9f9;
    padding: 12px 0;
}

.mobile-nav-list li a {
    text-decoration: none;
    color: #111;
    font-weight: 700;
    font-size: 16px;
    display: block;
}

/* Fix Logo Tetap Kiri */
.site-branding, .site-branding-desktop {
    margin-right: auto !important;
    text-align: left !important;
}

.custom-logo-link img {
    margin-left: 0 !important;
}

/* =========================================================
   STYLE KOTAK PENCARIAN (GAYA OVERLAY HEADER)
   ========================================================= */

.search-overlay-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Asumsi tinggi rata-rata header mobile */
    background: #ffffff;
    z-index: 999999; /* Prioritas tertinggi agar menutupi segalanya */
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    
    /* Efek meluncur dari atas */
    transform: translateY(-100%); 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Kelas yang dipanggil JS untuk memunculkan kotak */
.search-overlay-header.is-active {
    transform: translateY(0);
}

.search-overlay-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    max-width: 1140px; /* Batas lebar untuk tampilan desktop */
    margin: 0 auto;
}

.search-overlay-form {
    flex: 1; /* Membuat form mengambil seluruh sisa ruang di sebelah kiri ikon X */
    margin-right: 15px;
}

.search-overlay-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px; /* Ukuran optimal agar browser mobile tidak otomatis zoom */
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
    color: #111;
    background: transparent;
    padding: 10px 0;
}

/* Mengatur warna teks placeholder */
.search-overlay-input::placeholder {
    color: #888;
    font-weight: 400;
}

/* Gaya Ikon X (Tutup) */
.close-search-btn {
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Efek mengecil sedikit saat ikon X ditekan */
.close-search-btn:active {
    transform: scale(0.85);
}

/* =========================================================
   JARAK ANTARA KONTEN UTAMA & ARTIKEL POPULER (SIDEBAR)
   ========================================================= */

/* Jarak dasar di bawah navigasi Sebelumnya/Selanjutnya */
.single-post-navigation {
    margin-bottom: 40px; 
}

/* Penyesuaian khusus untuk layar Mobile (HP) */
@media screen and (max-width: 1023px) {
    .sidebar-column {
        margin-top: 20px; /* Mendorong Artikel Populer ke bawah */
        padding-top: 20px;
        border-top: 0px; /* Garis pemisah yang tegas tapi lembut */
    }
    
    /* Memastikan judul "ARTIKEL POPULER" punya jarak yang pas */
    .sidebar-column h2, 
    .sidebar-column .widget-title {
        margin-top: 0;
        margin-bottom: 25px;
    }
}

/* =========================================================
   3. Gambar Andalan Utama (Di Atas Judul/Konten)
   ========================================================= */
.single-thumbnail-box {
    margin: 0 -15px 20px -15px; /* Mentok kanan-kiri di mobile */
}

.single-featured-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Memaksa kotak gambar menjadi rasio 16:9 secara matematis */
    object-fit: cover; /* Mengisi penuh area 16:9 tanpa mengubah proporsi asli gambar */
    object-position: center; /* Memastikan titik fokus pemotongan berada di tengah */
    display: block;
    border-radius: 0px; 
}

.thumbnail-caption {
    padding: 10px 15px;
    background-color: #f9f9f9;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    border-bottom: 1px solid #eee;
}

/* =========================================================
   4. Teks Konten Artikel
   ========================================================= */
.single-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.single-content p {
    margin-bottom: 20px;
}

/* =========================================================
   5. Gambar Sisipan DALAM Artikel (Proporsional & Caption Bersih)
   ========================================================= */

/* A. Menargetkan Wadah Gambar (Gutenberg Block) */
.single-content .wp-block-image,
.single-content figure,
.single-content .wp-caption {
    width: 100% !important; /* Lebar disamakan persis dengan teks paragraf */
    max-width: 800px !important; /* Batas maksimal di desktop kita besarkan sedikit */
    margin-left: auto !important; 
    margin-right: auto !important; 
    margin-top: 30px; /* Jarak atas dengan paragraf */
    margin-bottom: 30px; /* Jarak bawah dengan paragraf */
    display: block;
    box-sizing: border-box;
}

/* B. Memaksa Gambar menjadi 16:9 */
.single-content .wp-block-image img,
.single-content figure img,
.single-content .wp-caption img {
    width: 100% !important; 
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Tetap kunci rasio 16:9 */
    object-fit: cover !important; 
    border-radius: 6px; /* Sudut melengkung sedikit agar elegan */
    display: block;
}

/* C. Gaya Teks Keterangan (Caption) Tanpa Background */
.single-content figcaption,
.single-content .wp-caption-text {
    background-color: transparent !important; /* Hapus background */
    border: none !important; /* Hapus garis */
    padding: 0px 0 0 0 !important; /* Hanya beri jarak di bagian atas agar tidak nempel gambar */
    font-size: 13px;
    color: #888; /* Warna abu-abu yang pas */
    font-style: italic; /* Gaya huruf miring */
    line-height: 1.5;
    text-align: center; /* Tetap di tengah */
}

/* =========================================================
   6. RESPONSIVE MOBILE (MENETRALKAN FLOATS)
   ========================================================= */

@media screen and (max-width: 768px) {
    /* Di HP, jika ada gambar rata kiri/kanan, paksa jadi tengah proporsional */
    .single-content .wp-block-image.alignleft,
    .single-content .wp-block-image.alignright,
    .single-content img.alignleft,
    .single-content img.alignright {
        float: none !important; /* Matikan paksa rata kiri/kanan */
        width: 85% !important; /* Tetap pertahankan "agak kecil" */
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

/* =========================================================
   7. GAYA KUTIPAN (BLOCKQUOTE) DALAM ARTIKEL
   ========================================================= */

/* A. Wadah Utama Kutipan */
.single-content blockquote,
.single-content .wp-block-quote {
    border-left: 5px solid #cc0000; /* Garis vertikal hijau tema kamu */
    background-color: #fbfdfc; /* Latar belakang hijau/abu-abu super samar */
    padding: 20px 25px; /* Jarak ruang bernapas di dalam kotak */
    margin: 35px 0; /* Jarak tegas antara kutipan dan paragraf biasa */
    border-radius: 0 8px 8px 0; /* Sudut kanan melengkung halus */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.02); /* Bayangan tipis agar elegan */
}

/* B. Teks di Dalam Kutipan */
.single-content blockquote p,
.single-content .wp-block-quote p {
    font-size: 18px; /* Lebih besar dari paragraf biasa (16px) */
    font-weight: 500;
    font-style: italic; /* Huruf miring khas kutipan */
    color: #222;
    line-height: 1.6;
    margin-bottom: 0 !important; /* Mencegah jarak berlebih di bagian bawah */
}

/* C. Nama Sumber / Tokoh (Citation) */
.single-content blockquote cite,
.single-content .wp-block-quote cite {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    font-style: normal; /* Nama tokoh tegak, tidak miring */
    font-weight: 700;
    color: #555;
}

/* Menambahkan garis strip otomatis sebelum nama tokoh */
.single-content blockquote cite::before,
.single-content .wp-block-quote cite::before {
    content: "— ";
    color: #397a61;
    font-weight: 900;
}

/* =========================================================
   STYLE KOMENTAR (MINIMALIS TANPA BOX)
   ========================================================= */

.single-comments-area {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee; /* Garis pemisah halus di atas area komentar */
    width: 100%;
}

/* Form Komentar Menyatu dengan Background (Tanpa Box) */
#respond {
    background: transparent; /* Hilangkan warna latar abu-abu */
    padding: 0; /* Hilangkan jarak spasi di dalam kotak */
    margin-bottom: 40px;
    border: none; /* Hilangkan garis pinggir kotak */
}

#reply-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #111;
    display: block;
}

#commentform label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #444;
    margin-bottom: 8px;
}

/* Gaya Kotak Input (Nama, Email, Pesan) */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    background: #fff; /* Latar putih agar kotak isian tetap terlihat jelas */
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

/* Warna tepi kotak input saat pengguna sedang mengetik */
#commentform input:focus,
#commentform textarea:focus {
    border-color: #111;
    outline: none;
}

/* Tombol Kirim */
#commentform #submit {
    background: #111;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
}

#commentform #submit:hover {
    background: #cc0000; /* Merah saat disorot */
}

/* Penyesuaian Khusus Layar Mobile */
@media screen and (max-width: 1023px) {
    #commentform #submit { 
        width: 100%; /* Tombol melebar penuh di HP agar mudah ditekan jempol */
    }
}

/* =========================================================
   BLUEPRINT TIPOGRAFI: KONTEN ARTIKEL (.single-content)
   ========================================================= */

/* 1. Paragraf Dasar */
.single-content p {
    font-size: 17px; /* Ukuran baca standar */
    line-height: 1.8; /* Jarak antar baris yang lega */
    color: #333;
    margin-bottom: 25px; /* Jarak bawah antar paragraf */
}

/* 2. Style Link (Tautan) Dalam Artikel */
.single-content p a,
.single-content li a {
    color: #cc0000; /* Menggunakan warna aksen tema kamu */
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dashed #cc0000; /* Garis bawah putus-putus */
    transition: all 0.2s ease-in-out;
}

.single-content p a:hover,
.single-content li a:hover {
    color: #111; /* Berubah hitam */
    border-bottom: 1px solid #111; /* Garis menjadi solid */
    background-color: #f9f9f9; /* Efek highlight tipis */
}

/* =========================================================
   PERBAIKAN: SUB-JUDUL & JARAK ARTIKEL (ANTI-NYUSUT DESKTOP)
   ========================================================= */

/* 3. Sub-Judul (H2, H3, H4) Dalam Artikel */
.single-content h2,
.single-content h3,
.single-content h4 {
    color: #111;
    font-weight: 800;
    
    /* PERBAIKAN: Kurangi margin-top dari 40px menjadi 25px */
    margin-top: 25px !important; 
    
    margin-bottom: 15px; /* Jarak bawah sub-judul */
    line-height: 1.4;
    display: block !important; /* KUNCI agar margin-top selalu dihitung */
}

.single-content h2 { font-size: 24px; }
.single-content h3 { font-size: 20px; }
.single-content h4 { font-size: 18px; }

/* 4. Daftar (List) Bullet & Angka */
.single-content ul,
.single-content ol {
    margin-bottom: 25px;
    padding-left: 20px;
    line-height: 1.8;
    color: #333;
}

.single-content li {
    margin-bottom: 10px;
}

/* =========================================================
   PERBAIKAN: JARAK BAWAH KOTAK GAMBAR (ANTI-MELEBAR)
   ========================================================= */

/* A. Menargetkan Wadah Gambar (Gutenberg Block) */
.single-content .wp-block-image,
.single-content figure,
.single-content .wp-caption {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 25px; /* Jarak atas disamakan dengan sub-judul */
    
    /* PERBAIKAN: Kurangi margin-bottom dari 30px menjadi 15px */
    margin-bottom: 15px !important; 
    
    display: block;
    box-sizing: border-box;
}

/* 5. Gambar Sisipan Dalam Artikel (Proporsional) */
.single-content .wp-block-image img,
.single-content figure img,
.single-content .wp-caption img {
    width: 100% !important; 
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Paksa rasio 16:9 */
    object-fit: cover !important; 
    border-radius: 6px; 
    display: block;
}

/* 6. Gaya Teks Keterangan (Caption) Tanpa Background */
.single-content figcaption,
.single-content .wp-caption-text {
    background-color: transparent !important; 
    border: none !important; 
    padding: 5px 0 0 0 !important; /* Jarak minimalis di bawah gambar */
    font-size: 13px;
    color: #888; 
    font-style: italic; 
    line-height: 1.5;
    text-align: center; 
}

/* =========================================================
   PERBAIKAN: PROPORSIONALITAS DESKTOP (SIDEBAR LEBIH LUWES)
   ========================================================= */

@media screen and (min-width: 1024px) {
    
    /* 1. Melebarkan Sidebar agar lebih lega dan modern */
    body.single-post .sidebar-column-desktop {
        width: 340px !important; /* Naik dari 280px menjadi 340px */
        flex: 0 0 340px !important;
    }

    /* 2. Mengatur Area Artikel Utama agar tidak terlalu melar */
    body.single-post .content-column-desktop {
        flex: 1 !important; /* Mengambil sisa ruang... */
        min-width: 0 !important; /* ...tapi tidak boleh mendesak sidebar */
        max-width: calc(100% - 380px) !important; /* 340px sidebar + 40px gap */
    }

    /* 3. Menyesuaikan Jarak Kosong di Tengah (Gap) */
    body.single-post .desktop-layout-wrapper {
        gap: 40px !important; /* Mengurangi gap dari 50px agar lebih padat */
    }
    
    /* 4. Perbaikan Gambar di Sidebar agar lebih proporsional dengan lebar baru */
    body.single-post .sidebar-version .post-thumbnail {
        width: 100px !important; /* Gambar diperbesar sedikit agar seimbang */
        height: 100px !important;
    }
    
    body.single-post .sidebar-version .post-category-vertical {
        height: 110px !important; /* Garis kategori disesuaikan dengan gambar */
    }
}

/* =========================================================
   JURUS POSISI RELATIF: GESER PAKSA KE KIRI
   ========================================================= */

@media screen and (max-width: 1023px) {
    
	.sidebar-column h2,
    .sidebar-column .widget-title {
        position: relative !important;
        
        /* MANTRA UTAMA: Samakan angka -25px ini dengan angka yang 
           kamu pakai untuk menggeser daftar berita sebelumnya! */
        left: -15px !important; 
        
        /* Memastikan teks judul tidak terpotong di sebelah kanan */
        width: calc(100% + 25px) !important; 
    }
	
    /* 1. Paksa pindah kordinat ke kiri */
    .sidebar-column .widget ul,
    .sidebar-version ul,
    .sidebar-popular-list {
        position: relative !important;
        left: -25px !important; /* MANTRA UTAMA: Ubah angka ini untuk mengatur seberapa jauh gesernya */
        
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style-type: none !important;
        width: calc(100% + 25px) !important; /* Mencegah teks kanan terpotong */
    }

    /* 2. Mengembalikan garis bawah antar artikel */
    .sidebar-column .insight-post-card,
    .sidebar-version .insight-post-card {
        border-bottom: 1px solid #eee !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }

    /* 3. Menghapus garis di artikel paling bawah */
    .sidebar-column .insight-post-card:last-child,
    .sidebar-version .insight-post-card:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   STYLE NAVIGASI ARTIKEL (STANDARD & CLEAN)
   ========================================================= */

.single-post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin: 40px 0;
    padding-top: 25px;
    border-top: 1px solid #f2f2f2; /* Garis lebih tipis */
    width: 100%;
    font-family: Arial, Helvetica, sans-serif; /* Ganti ke font standar */
}

/* Base Style untuk Kolom Navigasi */
.nav-prev, .nav-next {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Perataan Teks */
.nav-prev { text-align: left; }
.nav-next { text-align: right; }

/* Label "SEBELUMNYA / SELANJUTNYA" */
.nav-label {
    font-size: 11px;
    font-weight: 400; /* Tidak tebal */
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
}

/* Gaya Link Judul Artikel */
.nav-prev a, .nav-next a {
    font-size: 15px;
    font-weight: 500; /* Medium, tidak terlalu bold */
    color: #333;      /* Warna hitam yang lebih lembut */
    text-decoration: none;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

/* Efek Panah */
.nav-prev a::before {
    content: "« "; /* Pakai simbol yang lebih klasik */
}
.nav-next a::after {
    content: " »";
}

/* Efek Hover */
.nav-prev a:hover, .nav-next a:hover {
    color: #000; /* Cukup berubah jadi hitam pekat saat disentuh */
    text-decoration: underline; /* Garis bawah standar */
}

/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {
    .single-post-navigation {
        gap: 15px;
        padding-top: 20px;
    }
    
    .nav-prev a, .nav-next a {
        font-size: 14px;
    }
}

/* =========================================================
   FIX GARIS GANDA DI BAWAH HEADER (DESKTOP)
   ========================================================= */

@media screen and (min-width: 1024px) {
    /* 1. Matikan garis pada kontainer luar */
    .header-desktop-only {
        border-bottom: none !important;
    }

    /* 2. Biarkan hanya header ini yang punya garis, agar konsisten */
    .site-header-single-desktop {
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* 3. Pastikan tidak ada border-top tak sengaja di area konten */
    body.single-post .single-desktop-main {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   MENGGESER HEADER ARTIKEL (JUDUL & META) KE KIRI - DESKTOP
   ========================================================= */

@media screen and (min-width: 1024px) {
    
    body.single-post .entry-header-single {
        /* MANTRA PENGGESER: Gunakan margin-left negatif */
        /* Ubah angka -15px ini sampai sejajar dengan pinggiran gambar di bawahnya */
        margin-left: -15px !important; 
        
        /* Memberikan sedikit ruang tambahan di kanan agar teks tidak mentok sidebar */
        padding-right: 15px !important; 
        
        width: auto !important;
        display: block !important;
    }

    /* Memastikan breadcrumb di atas judul juga ikut bergeser jika ada */
    body.single-post .enews-breadcrumbs {
        margin-left: -15px !important;
        padding-left: 0 !important;
    }
}

/* =========================================================
   REPARASI TOTAL KOMENTAR (TARGET: .commentlist)
   ========================================================= */

/* 1. Hapus Angka 1 dan Reset Jarak */
ol.commentlist, 
ol.commentlist li {
    list-style: none !important;
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important; /* Kunci pembunuh angka */
}

/* 2. Sejajarkan Foto, Nama, dan Teks "Berkata" */
.comment-author.vcard {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px; /* Jarak antar elemen */
    margin-bottom: 10px;
}

/* Mengatur Nama (asad) agar tidak miring dan tebal */
.comment-author cite.fn {
    font-style: normal !important;
    font-weight: 700;
    color: #111;
    font-size: 16px;
}

/* Mengatur teks "berkata:" agar ramping di samping nama */
.comment-author .says {
    color: #999;
    font-size: 14px;
}

/* Mengatur Foto Profil agar Bulat */
.comment-author img.avatar {
    border-radius: 50% !important;
    margin: 0 !important;
    width: 40px;
    height: 40px;
}

/* 3. Menghidupkan Style Link (Tanggal & Sunting) */
.commentmetadata a {
    color: #302f2f !important; /* Merah khas News 12 */
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px dashed #383737;
    transition: all 0.2s ease;
}

.commentmetadata a:hover {
    color: #000 !important;
    border-bottom-style: solid;
}

/* Jarak untuk isi teks komentar */
.comment-body p {
    margin: 10px 0 !important;
    line-height: 1.6;
    color: #333;
}

/* 4. Tombol BALAS (Reply) */
.reply a {
    display: inline-block;
    background: #f1f1f1;
    color: #444 !important;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 3px;
}

.reply a:hover {
    background: #302f2f;
    color: #fff !important;
}