/* ==========================================================================
   HALAMAN ARTIKEL (SINGLE POST) - DIPERBAIKI DENGAN !IMPORTANT & FONT MODERN
   ========================================================================== */

.single-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important; /* Jarak antara konten kiri dan sidebar */
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; /* KUNCI: Font Modern Sans-Serif */
}

.single-main {
    flex: 1 !important;
    min-width: 0 !important; 
    max-width: 800px !important;
}

/* 1. Breadcrumbs */
.single-breadcrumbs {
    font-size: 15px !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}
.single-breadcrumbs a {
    color: #333 !important;
    text-decoration: none !important;
}
.single-breadcrumbs .sep {
    margin: 0 6px !important;
    color: #888 !important;
}

/* 2. Judul */
.single-title {
    font-size: 26px !important; /* Ukuran untuk Laptop/PC (sebelumnya 34px) */
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 20px 0 !important;
    color: #111 !important;
}

/* Mengubah ukuran ikon sosial media (Tes 2) */
.single-share {
    display: flex !important;
    gap: 10px !important; /* Jarak antar ikon dirapatkan (sebelumnya 12px) */
    margin-bottom: 20px !important;
}

.share-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; /* Lingkaran diperkecil (sebelumnya 38px) */
    height: 32px !important; /* Lingkaran diperkecil (sebelumnya 38px) */
    border: 1px solid #222 !important; /* Garis tepi dibuat lebih tipis (sebelumnya 1.5px) */
    border-radius: 50% !important;
    color: #111 !important;
    font-size: 14px !important; /* Ukuran logo sosmed di dalamnya diperkecil */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.share-icon:hover {
    background-color: #111 !important;
    color: #fff !important;
}

/* 4. Meta Author & Date */
.single-meta {
    margin-bottom: 25px !important;
    display: flex !important;
    flex-direction: column !important; /* Memaksa tanggal turun di bawah penulis */
    gap: 4px !important; /* Jarak antara penulis dan tanggal saya rapatkan sedikit agar lebih menyatu */
}
.meta-author {
    font-size: 14px !important; /* Ukuran font penulis */
    color: #111 !important;
}
.meta-author a {
    color: #111 !important;
    text-decoration: none !important; /* GARIS BAWAH DIHILANGKAN */
    font-weight: 600 !important; /* Saya tebalkan sedikit agar nama penulis lebih tegas */
}
.meta-date {
    font-size: 13px !important; /* Ukuran font tanggal dibuat lebih kecil */
    color: #666 !important; /* Abu-abu sedikit dilembutkan */
}

/* ==========================================================================
   5. FEATURED IMAGE & CAPTION (FIX FINAL - MATH CALCULATION 16:9)
   ========================================================================== */

/* 1. Jadikan Figure sebagai Patokan Ukur Utama (Container) */
figure.single-featured-image {
    width: 100% !important;
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    
    /* KUNCI SAKTI: Aktifkan fitur Container untuk referensi ukuran gambar */
    container-type: inline-size !important;
}

/* 2. Gambar dipaksa 16:9 menggunakan rumus matematika dari lebar Container */
figure.single-featured-image img {
    /* Fallback standar */
    width: 100% !important;
    display: block !important;
    
    /* RUMUS MATEMATIKA: 
       Paksa lebar 100% dari Figure, lalu hitung tinggi mutlak 16:9.
       Trik ini membunuh atribut tinggi bawaan WordPress secara total! */
    width: 100cqw !important; 
    height: calc(100cqw * (9 / 16)) !important; 
    
    object-fit: cover !important;    
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important; 
}

/* 3. Teks Caption di bawah gambar */
figure.single-featured-image .image-caption {
    font-size: 13px !important;
    color: #444 !important;
    margin: 10px 0 0 0 !important;   
    padding: 0 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    text-align: left !important;
    display: block !important;
}


	/* 6. Isi Artikel - Modern Inter Sans-Serif */
.single-content {
    /* Mengutamakan Inter, dengan fallback sistem modern */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; 
    font-size: 18px !important;       
    line-height: 1.8 !important;      /* Inter terlihat sangat bagus dengan spasi sedikit lebih lega */
    font-weight: 400 !important;      
    color: #333333 !important;        
    margin-bottom: 40px !important;
    letter-spacing: -0.011em !important; /* Inter paling cakep kalau dirapatkan sedikit (khas UI modern) */
    text-align: left !important;      
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Style link di dalam artikel - Elegan & Klasik */
.single-content a {
    color: #0056b3 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important; /* Garis dibuat tipis */
    text-underline-offset: 3px !important; /* Memberi jarak antara teks dan garis */
    transition: color 0.2s !important;
}

.single-content a:hover {
    color: #d87040 !important; /* Berubah jadi oranye (senada dengan tag pill kamu) saat hover */
    text-decoration-thickness: 2px !important; /* Garis menebal saat hover */
}

/* ==========================================================================
   FIX GAMBAR BOCOR KE SIDEBAR - KUNCI 16:9 PATEN
   ========================================================================== */

.single-content img {
    /* Pagar Utama: Jangan pernah lebih lebar dari kolom artikel */
    max-width: 100% !important; 
    width: 100% !important;
    
    /* Rasio Paten */
    aspect-ratio: 16 / 9 !important; 
    object-fit: cover !important; 
    object-position: center !important; 
    
    height: auto !important; 
    margin: 25px 0 8px 0 !important;
    display: block !important;
    border-radius: 4px !important;
}

/* Memastikan wadah bawaan WordPress (figure/div) juga tidak meluber */
.wp-block-image, .wp-caption, .aligncenter, .alignnone {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   STYLE CAPTION GAMBAR DALAM ARTIKEL
   ========================================================================== */

/* Menargetkan semua kemungkinan class caption di WordPress */
.single-content figcaption,
.single-content .wp-caption-text,
.single-content .gallery-caption {
    font-family: -apple-system, Arial, sans-serif !important; /* Gunakan Sans-Serif agar kontras dengan Serif isi berita */
    font-size: 14px !important; /* Ukuran lebih kecil dari artikel (18px) */
    line-height: 1.5 !important;
    color: #666 !important; /* Warna abu-abu agar tidak terlalu mencolok */
    margin-top: 10px !important; /* Jarak pas di bawah gambar */
    margin-bottom: 25px !important;
    text-align: left !important; /* Rata kiri sesuai standar AP News */
    font-style: normal !important;
    display: block !important;
    width: 100% !important;
}

/* Jika ada teks tebal (seperti nama fotografer) di dalam caption */
.single-content figcaption strong,
.single-content .wp-caption-text b {
    color: #333 !important;
    font-weight: 600 !important;
}

/* 7. Tags (Desain Kotak Pill Modern) */
.single-tags-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* Jarak antar tag lebih rapat dan rapi */
    margin-bottom: 40px !important;
    margin-top: 20px !important;
}

.tag-pill {
    display: inline-block !important;
    padding: 6px 14px !important; /* Ukuran kotak lebih proporsional */
    background-color: #f5f5f5 !important; /* Warna dasar abu-abu sangat muda */
    border: 1px solid #e0e0e0 !important; /* Garis tepi halus */
    border-radius: 4px !important; /* Diubah dari bulat (20px) jadi kotak sedikit tumpul agar lebih formal */
    color: #444 !important; /* Warna teks netral */
    font-size: 12px !important; /* Ukuran font lebih kecil dan bersih */
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.tag-pill:hover {
    background-color: #111 !important; /* Berubah hitam saat disentuh */
    color: #fff !important; /* Teks jadi putih */
    border-color: #111 !important;
}
/* 8. Warning Box / Pemberitahuan - VERSI RAMPING & PIPIH */
.single-warning-box {
    display: flex !important;
    align-items: center !important; /* Biar ikon dan teks sejajar di tengah secara vertikal */
    gap: 12px !important;
    background-color: #fcf2f2 !important; 
    border-left: 4px solid #b02a2a !important; /* Tambahan aksen garis di kiri agar lebih tegas */
    border-radius: 4px !important; /* Sudut sedikit lebih tegas */
    padding: 12px 16px !important; /* Padding diperkecil agar lebih pipih (sebelumnya 20px) */
    margin-bottom: 35px !important;
}

.warning-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: #b02a2a !important;
    font-size: 16px !important; /* Ukuran ikon disesuaikan */
}

.warning-text {
    color: #b02a2a !important; 
    font-size: 14px !important; /* Ukuran font dikecilkan (sebelumnya 15px) */
    line-height: 1.4 !important; /* Spasi baris dipadatkan */
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* ==========================================================================
   PENGATURAN SIDEBAR KANAN
   ========================================================================== */
.single-container .sidebar-area {
    width: 320px !important; /* Lebar standar sidebar PC */
    flex-shrink: 0 !important; /* Mencegah sidebar mengecil tertekan konten */
}

/* ==========================================================================
   TAMPILAN MOBILE - LEBAR SEDANG (TIDAK TERLALU MEPET)
   ========================================================================== */
@media (max-width: 768px) {
    .single-container {
        max-width: 100% !important;
        /* Naik ke 15px agar ada sedikit jarak aman dari pinggir layar */
        padding-left: 15px !important; 
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .single-main {
        max-width: 100% !important;
        width: 100% !important;
    }


    /* 2. Hapus padding tambahan di teks karena wadah utama sudah punya jarak */
    .single-breadcrumbs,
    .single-title,
    .single-share,
    .single-meta,
    .single-content,
    .single-tags-wrapper,
    .single-warning-box,
    .image-caption {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .single-title {
        font-size: 20px !important; /* Ukuran untuk HP yang jauh lebih kecil (sebelumnya 28px) */
    }

	/* Mengubah ukuran ikon sosial media (Tes 2) */
.single-share {
    display: flex !important;
    gap: 6px !important; /* Jarak antar ikon dirapatkan (sebelumnya 12px) */
    margin-bottom: 20px !important;
}

.share-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; /* Lingkaran diperkecil (sebelumnya 38px) */
    height: 32px !important; /* Lingkaran diperkecil (sebelumnya 38px) */
    border: 1px solid #222 !important; /* Garis tepi dibuat lebih tipis (sebelumnya 1.5px) */
    border-radius: 50% !important;
    color: #111 !important;
    font-size: 14px !important; /* Ukuran logo sosmed di dalamnya diperkecil */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.share-icon:hover {
    background-color: #111 !important;
    color: #fff !important;
}
	
    /* 3. FEATURED IMAGE: Rapi di dalam bingkai, 16:9, tidak meluber */
    .single-featured-image {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        border-radius: 4px !important; /* Bonus: Diberi lengkungan sedikit agar elegan */
        overflow: hidden !important;
    }
	
	/* 7. Tags (Versi Lebih Kecil & Ramping) */
.single-tags-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important; /* Jarak antar tag dipersempit */
    margin-bottom: 30px !important; /* Jarak bawah dikurangi */
    margin-top: 15px !important;
}

.tag-pill {
    display: inline-block !important;
    padding: 4px 10px !important; /* Padding dikurangi agar kotak lebih kecil */
    background-color: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 3px !important; /* Sudut tumpul diperhalus */
    color: #444 !important;
    font-size: 12px !important; /* Font diturunkan ke 11px agar lebih 'clean' */
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.tag-pill:hover {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}
	
	/* 6. Isi Artikel - Modern Inter Sans-Serif */
.single-content {
    /* Mengutamakan Inter, dengan fallback sistem modern */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; 
    font-size: 16px !important;       
    line-height: 1.6 !important;      /* Inter terlihat sangat bagus dengan spasi sedikit lebih lega */
    font-weight: 400 !important;      
    color: #333333 !important;        
    margin-bottom: 40px !important;
    letter-spacing: -0.011em !important; /* Inter paling cakep kalau dirapatkan sedikit (khas UI modern) */
    text-align: left !important;      
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mengatur jarak antar paragraf */
.single-content p {
    margin-top: 0 !important;
    margin-bottom: 1.7em !important; /* Jarak antar paragraf sedikit ditambah agar lebih bersih */
}

/* Mempertegas kutipan atau teks penting */
.single-content strong, .single-content b {
    font-weight: 650 !important; /* Inter sudah sangat tegas di weight 650-700 */
    color: #000 !important;
}

/* Style link di dalam artikel - Elegan & Klasik */
.single-content a {
    color: #0056b3 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important; /* Garis dibuat tipis */
    text-underline-offset: 3px !important; /* Memberi jarak antara teks dan garis */
    transition: color 0.2s !important;
}

.single-content a:hover {
    color: #d87040 !important; /* Berubah jadi oranye (senada dengan tag pill kamu) saat hover */
    text-decoration-thickness: 2px !important; /* Garis menebal saat hover */
}

    /* GAMBAR DALAM ARTIKEL */
    .single-content img {
        width: 100% !important;
        margin: 20px 0 !important;
        border-radius: 8px !important;
    }
	
	/* ==========================================================================
   STYLE CAPTION - PAKSA NAIK KE ATAS (MENEMPEL GAMBAR)
   ========================================================================== */

/* Menargetkan semua kemungkinan class caption di WordPress */
.single-content figcaption,
.single-content .wp-caption-text,
.single-content .gallery-caption {
    font-family: -apple-system, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #666 !important;
    
    /* TEKNIK PAKSA NAIK: Margin top negatif untuk melawan jarak dari gambar */
    margin-top: -5px !important; 
    
    margin-bottom: 25px !important;
    text-align: left !important;
    font-style: normal !important;
    display: block !important;
    width: 100% !important;
    padding-top: 0 !important;
}

/* Memastikan elemen pembungkus (figure) tidak memberikan jarak tambahan */
.single-content figure, 
.single-content .wp-caption {
    margin-bottom: 5px !important; /* Perkecil jarak bawah wadah gambar */
    padding-bottom: 0 !important;
}

/* Jika ada teks tebal (seperti nama fotografer) di dalam caption */
.single-content figcaption strong,
.single-content .wp-caption-text b {
    color: #333 !important;
    font-weight: 600 !important;
}
    /* 8. Warning Box Mobile - Dibuat Lebih Pipih */
    .single-warning-box {
        padding: 10px 14px !important; /* Padding lebih tipis di HP */
        gap: 10px !important; /* Jarak ikon dan teks dirapatkan */
        margin-bottom: 30px !important;
        border-left-width: 3px !important; /* Garis samping diperkecil agar tidak kaku */
    }

    .warning-text {
        font-size: 13px !important; /* Font lebih kecil agar tidak memenuhi layar HP */
        line-height: 1.4 !important;
    }

    .warning-icon {
        font-size: 14px !important; /* Ikon menyesuaikan ukuran teks */
    }
		
	
    /* SIDEBAR MOBILE */
    .single-container .sidebar-area {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   STYLE BERITA TERKAIT - MODEL EDITOR'S PICKS
   ========================================================================== */

.related-posts-section {
    margin-top: 40px !important;
    border-top: 2px solid #eee !important;
    padding-top: 20px !important;
}

.related-title {
    font-size: 18px !important;
    font-weight: 700 !important; /* Menggunakan bold yang tegas tapi elegan */
    color: #333333 !important; /* Warna hitam netral/gelap sesuai contoh */
    margin-bottom: 20px !important;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* Font sistem yang bersih mirip contoh */
    letter-spacing: -0.3px !important; /* Sedikit dirapatkan agar lebih modern */
    text-transform: capitalize !important; /* Memastikan format judul rapi */
}

/* Desktop: Grid 3 Kolom */
.related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important;
}

.related-item {
    margin-bottom: 20px !important;
}

/* Pagar kuat untuk membungkus gambar */
.related-thumb {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* Ini adalah rumus ajaib untuk rasio 16:9 */
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Memaksa gambar mengikuti pagar di atas */
.related-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; /* Paksa tinggi penuh mengikuti padding wadahnya */
    object-fit: cover !important;
    object-position: center !important;
}

/* ==========================================================================
   MENGHILANGKAN GARIS DI ATAS EDITOR'S PICKS
   ========================================================================== */

.related-posts-section {
    margin-top: 40px !important;
    border-top: none !important; /* GARIS DIHAPUS */
    padding-top: 0 !important;   /* Padding disesuaikan karena garis sudah hilang */
}


.related-post-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 0 5px 0 !important;
    /* Batasi judul 3 baris agar rapi */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

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

/* ==========================================================================
   TAMPILAN MOBILE (Tetap Grid 2 Kolom & Gambar Kotak)
   ========================================================================== */
@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .related-item:nth-child(n+5) {
        display: none !important; /* Tampil 4 saja di mobile */
    }

   /* Update Rasio Berita Terkait Agar Tidak Memanjang */
.related-thumb img {
    width: 100% !important;
    height: 150px !important; /* Kita patenkan tingginya agar seragam */
    aspect-ratio: 16 / 9 !important; 
    object-fit: cover !important; /* Memotong gambar agar pas di kotak 16:9 */
    object-position: center !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

    .related-post-title {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* ==========================================================================
   STYLE KOMENTAR - CLEAN & NO BOX
   ========================================================================== */

.single-comments-section {
    margin-top: 50px !important;
    padding: 0 !important; /* Hapus padding agar tidak seperti box */
    background: transparent !important; /* Hilangkan latar belakang */
    border: none !important; /* Hilangkan garis pinggir */
}

/* Judul Bagian Komentar */
#comments-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin-bottom: 30px !important;
    font-family: -apple-system, sans-serif !important;
    border-bottom: 2px solid #111 !important; /* Garis bawah judul saja sebagai aksen */
    display: inline-block !important;
    padding-bottom: 5px !important;
}

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

.comment-body {
    padding: 20px 0 !important;
    border-bottom: 1px solid #eee !important; /* Garis tipis antar komentar */
}

/* Identitas Pengomentar */
.comment-author cite {
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #111 !important;
}

.comment-metadata {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 10px !important;
}

/* Isi Teks Komentar */
.comment-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* Form Komentar (Dibuat Minimalis) */
#respond {
    margin-top: 40px !important;
}

#reply-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

#commentform textarea {
    width: 100% !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important; /* Kotak siku agar lebih formal */
    padding: 15px !important;
    background: #fcfcfc !important;
    font-family: inherit !important;
    transition: border-color 0.3s !important;
}

#commentform textarea:focus {
    border-color: #111 !important; /* Berubah hitam saat diketik */
    outline: none !important;
}

/* Tombol Kirim Komentar */
#submit {
    background: #111 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 30px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 15px !important;
    transition: background 0.3s !important;
}

#submit:hover {
    background: #333 !important;
}

/* ==========================================================================
   STYLE FORM KOMENTAR - UKURAN SEDANG (PROPORSIONAL)
   ========================================================================== */

/* 1. Kotak Input Nama, Email, dan Situs Web */
.comment-form-author input, 
.comment-form-email input, 
.comment-form-url input {
    width: 100% !important;
    max-width: 700px !important; /* Ukuran sedang agar lebih lega */
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    font-size: 15px !important; /* Font sedikit diperbesar agar nyaman dibaca */
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    display: block !important;
}

/* 2. Kotak Pesan Komentar (Textarea) */
#commentform textarea {
    width: 100% !important;
    max-width: 700px !important; /* Samakan dengan input lainnya */
    height: 160px !important; /* Dibuat lebih tinggi agar enak mengetik panjang */
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fcfcfc !important;
    font-family: inherit !important;
    font-size: 15px !important;
    display: block !important;
    transition: border-color 0.3s !important;
    outline: none !important;
    resize: vertical !important; /* Izinkan user menarik tinggi kotak jika perlu */
}

/* 3. Label Form */
.comment-form-author label, 
.comment-form-email label, 
.comment-form-url label,
.comment-form-comment label {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #333 !important;
}

/* Efek Focus saat diklik */
#commentform textarea:focus,
.comment-form-author input:focus, 
.comment-form-email input:focus, 
.comment-form-url input:focus {
    border-color: #111 !important;
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}


/* Merapikan Checkbox Simpan Nama/Email */
.comment-form-cookies-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.comment-form-cookies-consent input {
    margin-top: 4px !important;
}

.comment-form-cookies-consent label {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   STYLE FORM KOMENTAR - VERSI RAPI DI MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Kontainer Utama */
    .single-comments-section {
        padding: 15px !important; /* Memberikan ruang napas di pinggir layar */
        margin-top: 30px !important;
    }

    /* 2. Menyesuaikan Input & Textarea */
    .comment-form-author input, 
    .comment-form-email input, 
    .comment-form-url input,
    #commentform textarea {
        width: 100% !important; /* Lebar penuh mengikuti layar HP */
        max-width: 100% !important; /* Pastikan tidak melebihi batas layar */
        box-sizing: border-box !important; /* Padding tidak menambah lebar kotak */
        font-size: 16px !important; /* Standar agar tidak auto-zoom di iPhone */
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    /* 3. Kotak Pesan (Textarea) */
    #commentform textarea {
        height: 120px !important; /* Tinggi dikurangi agar tidak terlalu memanjang ke bawah */
    }

    /* 4. Bagian Checkbox (Cookies) */
    .comment-form-cookies-consent {
        display: flex !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .comment-form-cookies-consent label {
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #666 !important;
    }

    /* 5. Tombol Kirim */
    #submit {
        width: 100% !important; /* Tombol dibuat penuh agar mudah ditekan jari */
        padding: 14px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }
}

/* ==========================================================================
   STYLE BACA JUGA - MODERN UNDERLINE (SANGAT BERSIH & RAMPING)
   ========================================================================== */

.baca-juga-box {
    margin: 30px 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
}

/* Label BACA JUGA dengan garis bawah tipis agar terlihat elegan */
.baca-juga-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #2b4191 !important; /* Warna biru brand kamu */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 4px !important;
    width: fit-content !important;
}

.baca-juga-box a {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    transition: color 0.2s !important;
}

.baca-juga-box a:hover {
    color: #2b4191 !important;
}

/* Penyesuaian khusus Mobile agar tidak memakan ruang */
@media (max-width: 768px) {
    .baca-juga-box {
        margin: 20px 0 !important;
    }

    .baca-juga-box a {
        font-size: 15px !important; /* Ukuran teks ideal untuk HP */
        line-height: 1.4 !important;
    }

    .baca-juga-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
}