/**
 * Prose (Article Content) Overrides Stylesheet for Lensa Natura Theme.
 *
 * 1. Base Text & Heading Fixes
 * 2. List & Image Wrapping Styles
 * 3. Pullquote (Blockquote) & Preformatted (Code)
 * 4. Special Blocks (Details, Audio, Table, Image Frames, Media & Text, Search)
 * * @package Lensa_Natura
 * @since 2.2.0 (Split from main.css)
 *
 * NOTE: CSS ini dioptimalkan untuk mobile-first dan performa (SEO 90+).
 */

/* ==========================================================================
   1. BASE TEXT & HEADING FIXES
   ========================================================================== */
.prose {
    /* Base style */
}
.prose h1, .prose h2, .prose h3 {
    font-family: 'Playfair Display', serif;
}

/* Paragraf Menjorok dan Spasi Otomatis */
.prose p {
    margin-bottom: 1.5em; 
    text-indent: 2em !important; 
    color: var(--color-text-primary) !important;
    line-height: 1.75;
    text-align: justify; /* PENAMBAHAN: Membuat teks rata kanan-kiri */
}

/* --- PERBAIKAN: Mengaktifkan align center pada paragraf editor --- */
.prose p.has-text-align-center {
    text-align: center !important; /* Timpa justify */
    text-indent: 0 !important; /* Hapus indentasi */
}
.prose p.has-text-align-left {
    text-align: left !important;
    text-indent: 0 !important;
}
.prose p.has-text-align-right {
    text-align: right !important;
    text-indent: 0 !important;
}
/* --- AKHIR PERBAIKAN --- */

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: 1.25em; 
    margin-bottom: 0.5em; 
    color: var(--color-text-primary) !important;
    text-indent: 0 !important;
}

.prose h1 {
    color: var(--color-text-primary) !important; 
}

/* PERBAIKAN: Memastikan warna heading juga berubah di mode gelap */
.dark-mode .prose h1,
.dark-mode .prose h2,
.dark-mode .prose h3,
.dark-mode .prose h4,
.dark-mode .prose h5,
.dark-mode .prose h6 {
    color: var(--color-text-primary) !important;
}

.prose h1 { font-size: 2rem !important; }
.prose h2 { font-size: 1.75rem !important; }
.prose h3 { font-size: 1.5rem !important; }
.prose h4 { font-size: 1.25rem !important; }
.prose h5 { font-size: 1.1rem !important; }
.prose h6 { font-size: 1rem !important; }

@media (min-width: 768px) {
    .prose h1 { font-size: 2.5rem !important; }
    .prose h2 { font-size: 2rem !important; }
    .prose h3 { font-size: 1.75rem !important; }
    .prose h4 { font-size: 1.5rem !important; }
    .prose h5 { font-size: 1.25rem !important; }
    .prose h6 { font-size: 1rem !important; }
}

/* ==========================================================================
   PERUBAHAN: Gaya Bercahaya untuk Bold & Italic
   ========================================================================== */
.prose strong,
.prose b,
.prose em,
.prose i {
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Transisi halus untuk perubahan mode */
}

/* Gaya untuk Bold (Default untuk Light Mode) */
.prose strong, 
.prose b {
    font-weight: 700 !important;
    color: #474747; /* Warna hijau tua (emerald-700) */
    text-shadow: 0 0 1px rgb(253, 255, 254); /* Cahaya hijau lembut */
}

/* Gaya untuk Italic (Default untuk Light Mode) */
.prose em, 
.prose i {
    font-style: italic !important;
    color: #025034; /* Warna hijau tua (blue-600) */
    text-shadow: 0 0 1px rgba(15, 61, 145, 0.4); /* Cahaya biru lembut */
}

/* Override Gaya untuk Dark Mode */
.dark-mode .prose strong,
.dark-mode .prose b {
    color: #f7f7f7; /* putih, abu sedikit (emerald-300) */
    text-shadow: 0 0 2px rgba(42, 91, 191, 0.6); /* Cahaya biru lembut */
}

.dark-mode .prose em,
.dark-mode .prose i {
    color: #f7f7f7; /* Warna putih, abu sedikit (blue-300) */
    text-shadow: 0 0 2px rgba(96, 165, 250, 0.8); /* Cahaya biru yang lebih terlihat */
}

/* --- PENAMBAHAN: Pengecualian Gaya Bercahaya untuk Heading --- */
.prose h1 strong, .prose h1 b, .prose h1 em, .prose h1 i,
.prose h2 strong, .prose h2 b, .prose h2 em, .prose h2 i,
.prose h3 strong, .prose h3 b, .prose h3 em, .prose h3 i,
.prose h4 strong, .prose h4 b, .prose h4 em, .prose h4 i,
.prose h5 strong, .prose h5 b, .prose h5 em, .prose h5 i,
.prose h6 strong, .prose h6 b, .prose h6 em, .prose h6 i {
    color: inherit; /* Mengambil warna dari heading induknya */
    text-shadow: none; /* Menghapus efek cahaya */
}
/* --- AKHIR PERUBAHAN --- */


/* ==========================================================================
   2. LIST & IMAGE WRAPPING STYLES
   ========================================================================== */

/* --- Gaya untuk List (Unordered & Ordered) --- */
.prose ul, .prose ol {
    margin-left: 0.5rem;
    margin-bottom: 1.5em;
    padding-left: 1.25rem;
    color: var(--color-text-primary) !important;
    text-indent: 0 !important;
    /* PERBAIKAN KRUSIAL: Properti ini memaksa list untuk membuat "block formatting context" baru,
       sehingga ia akan mengalir di samping elemen float (gambar) daripada memulai di bawahnya. */
    
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: 0.75em;
    padding-left: 0.5rem;
    text-indent: 0 !important;
    color: var(--color-text-primary) !important; /* PERBAIKAN: Menambahkan ini untuk memastikan warna teks konsisten */
}

/* Memberi warna pada bullet/nomor list */
.prose li::marker {
    color: var(--color-emerald-base);
    font-weight: 600;
}

/* --- Perbaikan Text Wrapping untuk Gambar --- */
/* * Aturan dasar untuk gambar yang diratakan. 
 * Di tampilan mobile, gambar akan tetap memenuhi lebar kontainer.
*/
.prose .alignleft,
.prose .alignright,
.prose .aligncenter {
    margin-top: 1em;
    margin-bottom: 1em; 
    text-align: center; /* Untuk caption */
}

.prose .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Juga tengahkan caption jika ada */
}

/* * Terapkan float HANYA di layar besar (desktop/tablet).
 * Ini akan membuat teks membungkus gambar.
*/
@media (min-width: 768px) {
    .prose .alignleft {
        float: left;
        margin-right: 1.5em;
        max-width:fit-content;
    }

    .prose .alignright {
        float: right;
        margin-left: 1.5em;
        max-width:fit-content;
    }
}

/* --- PERBAIKAN BARU: Warna Teks Keterangan Gambar (Caption) --- */
.prose figcaption,
.prose .wp-element-caption {
    color: var(--color-text-secondary) !important; /* Gunakan warna teks sekunder yang adaptif */
    font-size: 0.9em; /* Sedikit lebih kecil dari teks paragraf */
    text-align: center; /* Posisikan di tengah */
    margin-top: 0.5em; /* Beri sedikit jarak dari gambar */
    text-indent: 0 !important; /* Hapus indentasi jika ada */
}


/* ==========================================================================
   3. PULLQUOTE & PREFORMATTED
   ========================================================================== */

.prose pre {
    background-color: var(--color-bg-secondary);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--color-text-primary) !important; 
    padding: 1.25rem;
    border-radius: 0.75rem;
    position: relative;
    overflow: auto;
    margin: 2em 0; 
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    border: 2px solid transparent;
    border-image: linear-gradient(to right, #6ee7b7, #10b981, #6ee7b7) 1;
    box-shadow: 0 0 15px var(--color-shadow-base);
    transition: all 0.5s ease;
    text-indent: 0 !important;
}

.prose pre:hover {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5), 0 0 5px rgba(110, 231, 183, 0.5);
    transform: translateY(-2px);
}

.single .prose blockquote,
.page .prose blockquote {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary) !important;
    padding: 1.5rem 1rem;
    margin: 3em 0; 
    border-radius: 1rem; 
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;
    position: relative;
    max-width: 100%;
    text-indent: 0 !important;
    border: 3px solid transparent;
    box-shadow: 0 0 10px var(--color-shadow-base);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
    .single .prose blockquote,
    .page .prose blockquote {
        padding: 2.5rem 1.5rem;
        font-size: 1.25rem;
    }
}

.single .prose blockquote:hover,
.page .prose blockquote:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 30px var(--color-shadow-base), 0 0 20px rgba(16, 185, 129, 0.5);
    border-image: linear-gradient(45deg, var(--color-emerald-base), #059669, var(--color-emerald-base)) 1;
}

/* ==========================================================================
   4. SPECIAL BLOCKS (DETAILS, AUDIO, TABLE, IMAGE FRAMES, Media & Text, Search) - JARAK GAMBAR DIPERBAIKI
   ========================================================================== */

/* PERBAIKAN JARAK HEADER (MOBILE) */
/* Nilai 'padding-top' ini menambahkan jarak antara header transparan di atas dan konten artikel di bawahnya, khusus untuk tampilan mobile. */
/* Anda bisa mengubah nilai '90px' ini. Kurangi (misal: 80px) untuk membuat jarak lebih dekat, atau tambah (misal: 110px) untuk membuatnya lebih jauh. */
body.single-post main#primary {
    padding-top: 60px;
}
@media (min-width: 1024px) {
    body.single-post main#primary {
        padding-top: 0; /* Hapus padding di desktop karena layout berubah */
    }
}

/* PERBAIKAN BARU: Panel taksonomi (klasifikasi) dibuat float di desktop */
/* Default (Mobile): Panel akan berada di tengah */
.prose .taxonomy-panel-content {
    text-align: center;
    margin: 2em auto; /* Menambahkan margin atas/bawah dan tetap di tengah */
    clear: both; /* Memastikan panel tidak terpengaruh float sebelumnya */
    max-width: max-content; /* Membatasi lebar maksimum agar tidak terlalu melebar */
}
.prose .taxonomy-panel-content ul {
    text-align: left; 
    display: inline-block; 
    margin: 0 auto;
}

/* Desktop (Layar > 1024px): Panel akan float ke kanan */
@media (min-width: 1024px) {
    .prose .taxonomy-panel-content {
        float: right;
        width: 100%;
        max-width: 20rem; /* Sesuaikan lebar sesuai kebutuhan */
        margin: 0.5rem 0 1rem 2rem; /* Atas, Kanan, Bawah, Kiri */
        text-align: left; /* Ratakan teks ke kiri di dalam panel */
        clear: none; /* Hapus clear agar bisa float */
    }

    /* Hapus style centering untuk <ul> di desktop */
    .prose .taxonomy-panel-content ul {
        display: block;
        margin: 0;
    }
}


.prose details {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-base);
    border-radius: 0.75rem;
    margin: 2em 0;
    box-shadow: 0 5px 15px var(--color-shadow-base);
    transition: all 0.3s ease;
    text-indent: 0 !important; 
}

.prose details:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15), 0 0 15px rgba(110, 231, 183, 0.3);
    border-color: #34d399;
}

.prose details summary {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary) !important;
    font-family: 'Poppins', sans-serif;
    outline: none;
    text-indent: 0 !important; 
}

.prose details summary::before {
    content: '▶';
    font-size: 0.75em;
    margin-right: 0.75rem;
    color: #10b981;
    transition: transform 0.3s ease;
}

.prose details[open] > summary::before {
    transform: rotate(90deg);
}

.prose details .details-content {
    padding: 0 1.5rem 1.5rem 1.5rem !important; 
    border-top: 1px solid var(--color-border-base);
    color: var(--color-text-secondary) !important;
}

.prose .wp-block-audio, .prose audio {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 2em 0;
    padding: 0 0.5rem; 
    border-radius: 9999px; 
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 5px var(--color-shadow-base), 0 0 5px rgba(52, 211, 153, 0.2);
    transition: all 0.3s ease;
    text-indent: 0 !important; 
}

.prose .wp-block-audio audio {
    filter: invert(var(--audio-invert-filter, 0)) hue-rotate(var(--audio-hue-rotation, 0deg));
    min-height: 40px; 
    height: 40px; 
    width: 100%;
}

.dark-mode .prose .wp-block-audio audio {
    filter: invert(1) hue-rotate(180deg) brightness(0.9);
}
.light-mode .prose .wp-block-audio audio {
    filter: none;
}

.prose .wp-block-table th,
.prose .wp-block-table td {
    padding: 0.75rem 1rem !important;
}

.prose .wp-block-audio:hover, .prose audio:hover,
.prose .wp-block-audio:focus, .prose audio:focus,
.prose audio.is-playing {
    box-shadow: 0 0 25px rgba(52, 211, 153, 0.8), 0 0 15px rgba(110, 231, 183, 0.6);
    transform: scale(1.01);
}

/* --- PERBAIKAN FINAL UNTUK SEMUA TABEL --- */

/* Aturan dasar untuk semua tabel, termasuk yang standar (tanpa is-style-stripes) */
.prose .wp-block-table {
    margin: 2em 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    border-spacing: 0;
    border-collapse: separate; 
    overflow-x: auto; 
    text-indent: 0 !important; 
}

.prose .wp-block-table table {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--color-shadow-base);
}

.prose .wp-block-table th,
.prose .wp-block-table td {
    border: 1px solid var(--color-border-base);
    padding: 0.75rem 1rem !important;
    color: var(--color-text-primary) !important;
}

.prose .wp-block-table th {
    background-color: var(--color-bg-secondary);
    font-family: 'Playfair Display', serif;
}


/* Aturan khusus untuk tabel BERGARIS (is-style-stripes) */
.prose .wp-block-table.is-style-stripes table {
    background-color: transparent;
    border: 1px solid var(--color-border-base);
    transition: all 0.4s ease;
}
.prose .wp-block-table.is-style-stripes table:hover {
    box-shadow: 0 12px 40px var(--color-shadow-base), 0 0 20px rgba(52, 211, 153, 0.4);
    transform: translateY(-5px);
}
.prose .wp-block-table.is-style-stripes th {
    background-color: var(--color-border-base);
}
.prose .wp-block-table.is-style-stripes td {
    border-bottom: 1px solid var(--color-border-base);
    border-top: none;
    border-left: none;
    border-right: none;
    transition: background-color 0.3s ease;
}
.prose .wp-block-table.is-style-stripes tr:last-child td { border-bottom: none; }
.prose .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: var(--color-bg-secondary);
}
.prose .wp-block-table.is-style-stripes tbody tr:hover { 
    background-color: var(--color-border-base); 
}

/* --- ATURAN GLOBAL MODE GELAP UNTUK SEMUA TABEL --- */
.dark-mode .prose .wp-block-table th,
.dark-mode .prose .wp-block-table td {
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-base);
}
.dark-mode .prose .wp-block-table th {
    background-color: rgba(255, 255, 255, 0.07);
}

/* ATURAN KHUSUS MODE GELAP HANYA UNTUK TABEL STRIPES */
.dark-mode .prose .wp-block-table.is-style-stripes tbody tr {
    background-color: transparent; /* Membuat baris ganjil transparan */
}
.dark-mode .prose .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.04); /* Memberi warna pada baris genap */
}
.dark-mode .prose .wp-block-table.is-style-stripes tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
/* --- AKHIR PERBAIKAN --- */


/* --- GAYA BARU: BLOK CARI (wp-block-search) --- */
.prose .wp-block-search {
    margin: 2em 0 !important;
    text-indent: 0 !important;
}
.prose .wp-block-search__input {
    background-color: var(--color-bg-primary); 
    border: 1px solid var(--color-border-base);
    color: var(--color-text-primary);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px var(--color-shadow-base);
    flex-grow: 1;
    min-height: 44px;
    box-sizing: border-box;
}
.prose .wp-block-search__input:focus {
    outline: none; 
    border-color: var(--color-emerald-base);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.prose .wp-block-search__button {
    background-color: var(--color-emerald-base);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-left: 0.5rem;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
}
.prose .wp-block-search__button:hover {
    background-color: #059669; /* emerald-600 */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}


/* ==========================================================================
   5. BLOK KHUSUS (BUTTONS)
   ========================================================================== */

.prose .wp-block-button {
    margin: 2em 0 !important; 
    text-indent: 0 !important; 
    text-align: center;
}

.prose .wp-block-button a {
    text-decoration: none !important;
    font-size: 1rem !important;
}

.prose .wp-block-button .wp-block-button__link {
    @apply inline-flex items-center justify-center rounded-full;
    transition: all 0.4s ease;
    padding: 0.75rem 2rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: white !important; 
    background-color: var(--color-emerald-base) !important; 
    border: 1px solid var(--color-emerald-base) !important;
    min-height: 44px;
    box-sizing: border-box;
}
.prose .wp-block-button .wp-block-button__link:hover {
    background-color: #059669 !important; /* emerald-600 */
    box-shadow: 0 0 25px rgba(16, 185, 129, 1), 0 0 15px rgba(110, 231, 183, 0.8) !important;
    transform: translateY(-2px);
}

.prose .wp-block-button.is-style-outline .wp-block-button__link,
.prose .wp-block-button.is-style-ghost .wp-block-button__link,
.prose .wp-block-button.is-style-ghost .wp-block-button__link {
    background-color: transparent !important;
    color: var(--color-emerald-base) !important;
    border: 2px solid var(--color-emerald-base) !important;
    box-shadow: none !important;
}

.prose .wp-block-button.is-style-outline .wp-block-button__link:hover,
.prose .wp-block-button.is-style-ghost .wp-block-button__link:hover {
    background-color: var(--color-emerald-base) !important;
    color: var(--color-bg-primary) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-2px);
}

.light-mode .prose .wp-block-button .wp-block-button__link {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.light-mode .prose .wp-block-button .wp-block-button__link:hover {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.8) !important;
}

.light-mode .prose .wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: white !important;
}

/* --- PAGINASI ARTIKEL (wp_link_pages) STYLES --- */

/* Gaya untuk tautan halaman (halaman tidak aktif) */
.page-links a span {
    /* Kelas default yang Anda gunakan di single.php */
    background-color: var(--color-bg-secondary) !important; 
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-base);
    font-weight: 500 !important;
    box-shadow: 0 2px 5px var(--color-shadow-base);
}

.page-links a:hover span {
    background-color: var(--color-emerald-base) !important;
    color: white !important;
    border-color: var(--color-emerald-base);
}

/* Gaya untuk halaman AKTIF (span.current) */
.page-links .post-page-numbers.current,
.page-links span:not([class]) { /* WordPress sering menggunakan span tanpa kelas untuk halaman saat ini */
    /* Menggunakan gaya yang menyala */
    background-color: #10b981 !important; /* emerald-500 */
    color: white !important;
    border: 1px solid #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
    font-weight: 700 !important;
}

/* --- END PAGINasi ARTIKEL STYLES --- */

/* ==========================================================================
   6. RESPONSIVE FIXES
   ========================================================================== */
   
.float-right-desktop {
    /* PENAMBAHAN: Membuat panel menjadi block dan di tengah secara default */
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 20rem; /* Membatasi lebar agar tidak terlalu besar di mobile */
}

@media (min-width: 1024px) {
    .float-right-desktop {
        float: right;
        margin-left: 2rem;
        margin-bottom: 1rem;
    }
}
/* --- PENAMBAHAN: Gaya Foto Unggulan di Desktop --- */

/* Default (Mobile): .featured-image diatur oleh Tailwind */

@media (min-width: 1024px) { /* Terapkan hanya di desktop (lg) */

    /* Skenario 1: TIDAK ADA panel taksonomi (Foto di kiri, teks membungkus) */
    .prose .featured-image-float-left-desktop {
        float: left;
        max-width: 55%; /* Lebar gambar 55% */
        margin-right: 2em; /* Jarak dari teks yang membungkus */
        margin-top: 0.5em;
        margin-bottom: 1em;
    }

    /* Skenario 2: ADA panel taksonomi (Foto di atas, lebih kecil, dan di tengah) */
    .prose .featured-image-has-panel {
        max-width: 70%; /* Lebar gambar 70% */
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 2em; /* Beri jarak lebih ke teks di bawah */
    }
}
/* --- AKHIR PENAMBAHAN --- */

/* ==========================================================================
   7. IMAGE WITH TEXT OVERLAY UTILITIES (SOLUSI)
   ========================================================================== */

/*
 * Gunakan kelas-kelas ini untuk menempatkan teks di atas gambar.
 * 1. Bungkus Gambar dan Teks Anda dalam satu blok "Grup".
 * 2. Di pengaturan blok "Grup", tambahkan kelas CSS: image-overlay-container
 * 3. Pada blok Teks (Paragraf/Judul), tambahkan kelas CSS: image-overlay-text
 * 4. Tambahkan salah satu kelas posisi ke blok Teks (misal: overlay-bottom-left).
*/

/* Jadikan container sebagai acuan untuk posisi absolut */
.prose .image-overlay-container {
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    display: flow-root; /* PERBAIKAN: Mencegah container "collapsing" saat gambar di dalamnya di-float, sehingga posisi teks absolut berfungsi. */
}

/* --- PERUBAHAN: Atur teks agar bisa diposisikan secara bebas di dalam container --- */
.prose .image-overlay-text {
    position: absolute;
    z-index: 10;
    padding: 0.5rem 1rem;
    background-color: transparent; /* Hapus latar belakang */
    color: white !important;
    font-weight: 600; /* Membuat font lebih tebal */
    text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 2px black; /* Memberi outline hitam yang jelas */
    border-radius: 0.5rem;
    text-indent: 0 !important; /* Hapus indentasi paragraf default */
    max-width: 90%; /* Pastikan teks tidak keluar dari gambar */
}

/* --- Kelas Posisi --- */

.prose .overlay-top-left {
    top: 1rem;
    left: 1rem;
}

.prose .overlay-top-right {
    top: 1rem;
    right: 1rem;
}

.prose .overlay-bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.prose .overlay-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.prose .overlay-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*---------Penambahan gaya untuk link-----*/
/*----Light mode---*/
/*----Gaya tautan (Default)*/ 
.prose a {
	color: #059669 !important; /*hijau (gantikan biru standar) */
}
/* Opsi: Gaya saat tautan di sentuh mouse */
.prose a:hover {
	color: #047857 !important; /* Hijau lebih tua saat hover */
}

/* Override Gaya Tautan DARK MODE */
.dark-mode .prose a{
	color: #34d399 !important; /* Hijau terang mode gelap */
}
/* Opsi: Gaya hover DARK MODE */
.dark-mode .prose a:hover {
		color: #6ee7b7 !important; /* Hijau lebih terang lagi saat hover */
}