/**
 * Layout and Structural Stylesheet for Lensa Natura Theme.
 * * 1. Header Styles
 * 2. Sidebar & Archive Layouts
 * 3. Single Post Layouts (Taxonomy Panel, TOC)
 * 4. Comment Section -> Revamped to Adventure Log
 * * @package Lensa_Natura
 * @since 2.2.0 (Split from main.css)
 */


/* ==========================================================================
   1. HEADER STYLES
   ========================================================================== */
/* PERBAIKAN UKURAN LOGO KUSTOM */
.custom-logo {
    max-height: 50px; 
    width: auto;
}

.header-scrolled {
    background-color: rgba(12, 20, 18, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Efek Menu Header */
.main-navigation .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}
.main-navigation .menu-item a {
    position: relative;
    padding-bottom: 8px;
    color: var(--color-text-primary);
    text-shadow: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.dark-mode .main-navigation .menu-item a,
.dark-mode .site-branding a {
    color: white !important; 
    text-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.light-mode .main-navigation .menu-item a,
.light-mode .site-branding a {
    color: var(--color-text-primary) !important;
    text-shadow: none;
}

.main-navigation .menu-item a:hover {
    color: #f0fdf4 !important;
    text-shadow: 0 0 8px rgba(110, 231, 183, 0.7);
}

.main-navigation .menu-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #34d399;
    box-shadow: 0 0 10px #34d399, 0 0 5px #6ee7b7;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 2px;
}
.main-navigation .menu-item a:hover::after {
    width: 100%;
}

.mobile-navigation ul { padding: 0; margin: 0; }
.mobile-navigation li a { display: block; padding: 0.75rem 1.5rem; font-size: 0.875rem; color: white; }
.mobile-navigation li a:hover { background-color: #047857; }

#main-header a,
#main-header button {
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#main-header.header-scrolled a,
#main-header.header-scrolled button,
.dark-mode #main-header a,
.dark-mode #main-header button {
    color: white !important;
    text-shadow: none;
}

/* --- PERUBAHAN: Latar Belakang Hero yang Lebih Bersih --- */
@keyframes animated-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-animated-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #065f46, #1f2937, #374151, #064e3b);
    background-size: 400% 400%;
    animation: animated-gradient 18s ease infinite;
    z-index: 0;
}

.light-mode .hero-animated-bg {
    background: linear-gradient(-45deg, #d1fae5, #e5e7eb, #f3f4f6, #a7f3d0);
    background-size: 400% 400%;
}
/* --- AKHIR PERUBAHAN --- */

.dark-mode .mobile-navigation li a { color: var(--color-text-primary); }

/* ==========================================================================
   2. SIDEBAR & ARCHIVE LAYOUTS
   ========================================================================== */

@media (min-width: 1024px) { 
    .premium-sidebar-sticky-wrapper {
        position: -webkit-sticky; 
        position: sticky;
        top: 8rem; 
    }
}

/* --- PERBAIKAN SIDEBAR UTAMA (PENCARIAN & KATEGORI) --- */

/* Gaya Default (Dark Mode) */
.premium-search-form .premium-search-input {
    background-color: rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.2);
    border-radius: 9999px; padding: 0.75rem 3rem 0.75rem 1.5rem; color: white;
    font-weight: 500; transition: all 0.3s ease; backdrop-filter: blur(5px);
}
.premium-search-form .premium-search-input::placeholder { color: rgba(255,255,255,0.5); }
.premium-search-form .premium-search-input:focus {
    outline: none; border-color: #34d399; 
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.5); background-color: rgba(0,0,0,0.5);
}
.premium-search-form .premium-search-submit { color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; }
.premium-search-form .premium-search-submit:hover,
.premium-search-form .premium-search-input:focus + .premium-search-submit { color: #34d399; }

/* Light Mode Overrides: Hapus efek glass, gunakan warna dinamis */
.light-mode .premium-search-form .premium-search-input {
    background-color: var(--color-bg-primary); 
    border-color: var(--color-border-base);
    color: var(--color-text-primary);
    backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.light-mode .premium-search-form .premium-search-input::placeholder { color: var(--color-text-secondary); }
.light-mode .premium-search-form .premium-search-input:focus {
    outline: none; border-color: var(--color-emerald-base);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); 
    background-color: var(--color-bg-primary);
}
.light-mode .premium-search-form .premium-search-submit { color: var(--color-text-secondary); }
.light-mode .premium-search-form .premium-search-submit:hover,
.light-mode .premium-search-form .premium-search-input:focus + .premium-search-submit { color: var(--color-emerald-base); }


/* Gaya Default Kategori (Dark Mode) */
.premium-category-accordion .premium-accordion-item {
    border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem; backdrop-filter: blur(5px);
    transition: all 0.3s ease-in-out;
}
.premium-category-accordion .accordion-header { padding: 0.85rem 1rem; position: relative; z-index: 2; }
.premium-category-accordion .accordion-header .category-link {
    color: #d1d5db; font-weight: 500; text-decoration: none;
    transition: color 0.3s ease; flex-grow: 1;
}
.premium-category-accordion .accordion-header:hover .category-link { color: #ffffff; }
.premium-category-accordion .accordion-header .accordion-icon { color: rgba(255, 255, 255, 0.5); }

.premium-accordion-item.open, .premium-accordion-item:hover {
    box-shadow: 0 0 25px rgba(52, 211, 153, 0.3);
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(0, 0, 0, 0.4);
}
.premium-accordion-item.open .accordion-header .category-link { color: #6ee7b7; }
.premium-accordion-item.open .accordion-icon { transform: rotate(180deg); color: #6ee7b7; }

/* Light Mode Overrides: Kategori */
.light-mode .premium-category-accordion .premium-accordion-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-base);
    backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.light-mode .premium-category-accordion .accordion-header .category-link {
    color: var(--color-text-primary);
}
.light-mode .premium-category-accordion .accordion-header:hover .category-link { color: var(--color-emerald-base); }
.light-mode .premium-category-accordion .accordion-header .accordion-icon { color: var(--color-text-secondary); }
.light-mode .premium-accordion-item.open, .light-mode .premium-accordion-item:hover {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    border-color: var(--color-emerald-base);
    background: var(--color-bg-secondary);
}
.light-mode .premium-accordion-item.open .accordion-header .category-link { color: var(--color-emerald-base); }
.light-mode .premium-accordion-item.open .accordion-icon { transform: rotate(180deg); color: var(--color-emerald-base); }


.premium-subcategory-list { list-style: none; padding: 0; margin: 0; }
.premium-subcategory-list li a {
    display: block; padding: 0.5rem 1rem 0.5rem 2rem;
    color: #9ca3af; text-decoration: none;
    transition: all 0.2s ease; font-size: 0.9rem;
}
.premium-subcategory-list li a:hover {
    background-color: rgba(52, 211, 153, 0.1); color: #a7f3d0;
    transform: translateX(4px);
}

/* Light Mode Subkategori */
.light-mode .premium-subcategory-list li a {
    color: var(--color-text-secondary);
}
.light-mode .premium-subcategory-list li a:hover {
    background-color: rgba(16, 185, 129, 0.1); 
    color: var(--color-emerald-base);
}


.premium-no-results {
    background-color: var(--color-bg-secondary); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border-base);
    border-radius: 1rem; 
    padding: 4rem 2rem; 
    box-shadow: 0 15px 40px var(--color-shadow-base); 
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSmooth 0.6s ease-out forwards;
}
.premium-no-results .page-title { color: var(--color-text-primary); }
.premium-no-results .page-content {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* --- PERBAIKAN: GAYA PREMIUM PAGINATION (Disesuaikan untuk the_posts_pagination dan Mobile) --- */
.premium-pagination {
    text-align: center;
}
/* Menargetkan UL yang dibuat oleh the_posts_pagination() */
.premium-pagination .page-numbers { 
    list-style: none;
    display: inline-flex; /* Menggunakan inline-flex untuk memungkinkan wrap di mobile */
    flex-wrap: wrap; /* Memungkinkan tombol pagination wrap ke baris baru di mobile */
    justify-content: center;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.premium-pagination .page-numbers li {
    display: block;
    margin-bottom: 0.5rem; /* Menambahkan margin bawah untuk pemisahan di mobile */
}

/* TARGET Semua elemen tombol: a, span.current, dan span.dots/span.prev/span.next */
.premium-pagination .page-numbers li a,
.premium-pagination .page-numbers li span { 
    display: block;
    padding: 0.75rem 1.25rem; /* Meningkatkan padding untuk sentuhan yang lebih baik */
    border-radius: 0.75rem; /* Membuat sudut lebih bulat */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 50px; /* Meningkatkan min-width untuk target sentuh */
    box-sizing: border-box;
    cursor: pointer;
    line-height: 1; /* Memperbaiki line height agar teks center */
}
/* Target khusus untuk elipsis */
.premium-pagination .page-numbers li span.dots {
    cursor: default;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

/* Gaya Default (Dark Mode) */
.dark-mode .premium-pagination .page-numbers li a {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-base);
}
.dark-mode .premium-pagination .page-numbers li a:hover {
    background-color: var(--color-emerald-base);
    color: var(--color-bg-primary); 
    border-color: var(--color-emerald-base);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
    transform: translateY(-1px);
}
.dark-mode .premium-pagination .page-numbers li span.current {
    background-color: var(--color-emerald-base);
    color: var(--color-bg-primary); 
    border: 1px solid var(--color-emerald-base);
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.8);
    cursor: default;
}
/* Gaya Dark Mode untuk tombol Next/Previous yang non-aktif (SPAN) */
.dark-mode .premium-pagination .page-numbers li span:not(.current) {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary); 
    border: 1px solid var(--color-border-base);
    opacity: 0.6;
    cursor: default;
}


/* Gaya Light Mode */
.light-mode .premium-pagination .page-numbers li a {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-base);
}
.light-mode .premium-pagination .page-numbers li a:hover {
    background-color: var(--color-emerald-base);
    color: white;
    border-color: var(--color-emerald-base);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}
.light-mode .premium-pagination .page-numbers li span.current {
    background-color: var(--color-emerald-base);
    color: white;
    border: 1px solid var(--color-emerald-base);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
    cursor: default;
}
/* Gaya Light Mode untuk tombol Next/Previous yang non-aktif (SPAN) */
.light-mode .premium-pagination .page-numbers li span:not(.current) {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-base);
    opacity: 0.6;
    cursor: default;
}


/* --- PENAMBAHAN BARU: Tata Letak Quote Section --- */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* Efek tata letak unik untuk desktop */
@media (min-width: 768px) {
    .quote-card:nth-child(3n+2) {
         margin-top: 3rem;
    }
}
@media (min-width: 1024px) {
    .quote-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .quote-card:nth-child(3n+2) {
         margin-top: 0;
    }
    .quote-card:nth-child(4n-1) {
        margin-top: -2rem;
    }
    .quote-card:nth-child(4n) {
        margin-top: 2rem;
    }
}

/* --- PENAMBAHAN BARU: Linimasa (Timeline) Styles (Memperbaiki garis) --- */
/* Garis Timeline - Menggunakan variabel dari CSS */
.timeline-line {
    /* Menggunakan variabel agar konsisten dengan tema */
    background-color: var(--color-emerald-base);
}

/* Titik Timeline */
.timeline-item .flex-shrink-0 {
    position: relative;
    z-index: 10;
}

.timeline-item .ml-5 {
    position: relative;
    z-index: 1;
}

.light-mode .timeline-item .ml-5 {
    border-color: #a7f3d0;
}

.dark-mode .timeline-item .ml-5 {
    border-color: #064e3b;
}
/* --- AKHIR PENAMBAHAN LINIMASA --- */

/* ==========================================================================
   3. SINGLE POST LAYOUTS
   ========================================================================== */

/* Latar belakang utama untuk seluruh halaman artikel */
.single-post .site-main {
    background-color: var(--color-bg-primary);
}

/* Pastikan <article> transparan agar tidak menimpa warna .site-main */
.single-post article {
    background-color: transparent;
}

/* PERUBAHAN: Menghapus padding dari CSS agar dikontrol oleh Tailwind di PHP */
.article-content-wrapper {
    background-color: var(--color-bg-secondary);
    border-radius: 1rem;
    box-shadow: 0 5px 25px var(--color-shadow-base);
}


/* Meta Glow Effect (PENULIS & TANGGAL) */
@keyframes metallic-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.entry-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
}
/* Pastikan warna meta di header dinamis */
.entry-header .entry-meta {
	color: var(--color-text-primary);
}

.meta-glow-item {
    font-weight: 900; 
    color: transparent; 
    /* PERUBAHAN: Mengganti gradient menjadi monokrom (hitam-putih) untuk efek metalik yang lebih halus */
    background: linear-gradient(90deg, #999, #fff, #999, #444, #999);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0); 
    animation: metallic-shimmer 6s infinite linear;
    animation-delay: var(--a); 
    /* PERUBAHAN: Transisi dibuat lebih responsif untuk efek hover */
    transition: text-shadow 0.4s ease;
}

.meta-glow-item:hover {
    /* PERUBAHAN: Memberikan efek glow putih lembut saat di-hover */
    text-shadow: 0 0 8px rgba(220, 220, 220, 0.6);
}

/* --- PERUBAHAN: Hapus Ikon Situs --- */
/* Menambahkan 'display: none;' untuk menyembunyikan ikon SVG di sebelah nama penulis. */
.site-icon {
    display: none;
}

.site-icon svg {
    filter: none; 
    color: var(--color-emerald-base); 
    filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.5));
}

/* Float Kanan untuk Infobox di Desktop */
@media (min-width: 1024px) { 
    .float-right-desktop {
        float: right;
        width: 300px;
        margin-left: 1.5rem;
        margin-bottom: 1.5rem;
        clear: right;
    }
}


/* Sidebar Panel Umum (Aksi & Sumber Daya, TOC) */
.sidebar-panel {
    border-radius: 0.75rem;
    padding: 1.25rem;
    font-size: 0.875rem;
    transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

.sidebar-panel h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
}

.sidebar-panel ul { list-style: none; padding: 0; margin: 0; }
.sidebar-panel li a { 
	display: block;
	padding: 0.25rem 0;
	transition: color 0.3s ease, transform 0.3s ease;
}
.sidebar-panel li a:hover {
	transform: translateX(4px);
}
.sidebar-panel li a span {
	transition: color 0.3s ease;
}

/* Dark Mode Sidebar Panel */
.dark-mode .sidebar-panel {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-base);
}
.dark-mode .sidebar-panel h3 { color: var(--color-emerald-base); border-bottom-color: var(--color-border-base); }
.dark-mode .sidebar-panel a { color: var(--color-text-primary); }
.dark-mode .sidebar-panel a:hover { color: var(--color-emerald-base); }
.dark-mode .sidebar-panel a span { color: var(--color-text-secondary); }


/* Light Mode Sidebar Panel */
.light-mode .sidebar-panel {
    background-color: #f0fdf4; 
    border: 1px solid #a7f3d0;
}
.light-mode .sidebar-panel h3 { color: #065f46; border-bottom-color: #6ee7b7; }
.light-mode .sidebar-panel a { color: #047857; }
.light-mode .sidebar-panel a:hover { color: #065f46; }
.light-mode .sidebar-panel a span { color: #047857; }


/* Panel Taksonomi */
.taxonomy-panel {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-base) !important;
    color: var(--color-text-primary) !important;
}
.taxonomy-panel h3 {
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border-base) !important;
}
.taxonomy-panel ul li {
    border-bottom-color: var(--color-border-base) !important;
}
.taxonomy-panel ul li span.text-gray-800 {
    color: var(--color-text-primary) !important;
}
.taxonomy-panel ul li span.text-gray-600 {
    color: var(--color-text-secondary) !important;
}

/* PERBAIKAN: Memastikan semua paragraf di dalam panel taksonomi rata tengah,
   mengatasi konflik dengan gaya .prose p { text-align: justify; } */
.taxonomy-panel p {
    text-align: center !important; /* Paksa rata tengah */
    text-indent: 0 !important;    /* Hapus indentasi paragraf */
}

/* --- PENAMBAHAN & PENYESUAIAN GAYA PANEL TAKSONOMI --- */
.taxonomy-panel-species-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

/* --- PERBAIKAN: Memperbaiki posisi tengah & animasi jam --- */
.taxonomy-panel-lifespan {
    display: flex; /* Diubah agar 'margin: auto' berfungsi */
    width: -moz-fit-content; /* Fallback untuk Firefox */
    width: fit-content;   /* Ditambahkan agar lebar sesuai konten */
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto; /* Sekarang akan menengahkan elemen */
    padding: 0.25rem 0.75rem;
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--color-emerald-base);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}


/* --- PENAMBAHAN: Animasi Ikon Jam --- */
@keyframes spin-clock {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.taxonomy-panel-lifespan svg {
    animation: spin-clock 15s linear infinite;
}

.light-mode .taxonomy-panel-lifespan {
    background-color: #e6fef7;
    border-color: #a7f3d0;
    color: #047857;
}

.taxonomy-panel-image-wrapper {
    width: 100%;
    max-width: 200px; /* Batasi lebar maksimum gambar agar pas */
    aspect-ratio: 1 / 1; /* PERUBAHAN: Memaksa rasio 1:1 (persegi) */
    overflow: hidden;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px var(--color-shadow-base), 0 2px 4px -2px var(--color-shadow-base); /* shadow-md */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.taxonomy-panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.taxonomy-panel:hover .taxonomy-panel-image {
    transform: scale(1.05);
}
/* --- AKHIR PENAMBAHAN & PENYESUAIAN --- */


/* Status Konservasi Effects */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.conservation-magic {
    position: relative;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.5s ease-out;
    overflow: hidden;
    isolation: isolate;
}
/* Efek hover conservation-magic sudah dihapus di sini di langkah sebelumnya */


/* --- PENAMBAHAN BARU: FIX PERATAAN SINONIM --- */
.sinonim-fix p {
    /* Menimpa margin kiri/kanan yang dibawa oleh tema WordPress pada elemen <p> */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Memastikan perataan teks di dalam elemen */
    text-align: center !important;
    /* Penting untuk menengahkan konten inline/inline-block */
    width: 100%;
}
/* --- AKHIR FIX PERATAAN SINONIM --- */


/* TOC Panel (Daftar Isi) */
.toc-panel {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInSmooth 0.5s 0.2s ease-out forwards;
}

.toc-panel-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
}

.toc-panel-list {
    max-height: calc(100vh - 25rem);
    overflow-y: auto;
    padding-right: 0.5rem;
}
/* Custom Scrollbar for TOC */
.toc-panel-list::-webkit-scrollbar {
    width: 6px;
}
.toc-panel-list::-webkit-scrollbar-track {
    background: transparent;
}
.toc-panel-list::-webkit-scrollbar-thumb {
    background-color: var(--color-border-base);
    border-radius: 6px;
}
.dark-mode .toc-panel-list::-webkit-scrollbar-thumb:hover {
    background-color: #6ee7b7;
}
.light-mode .toc-panel-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-emerald-base);
}

.toc-panel-list li a {
    display: block;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    position: relative;
    padding-left: 1rem;
}

.toc-panel-list li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

/* TOC Colors - Light Mode */
.light-mode .toc-panel-title { color: #065f46; border-bottom: 1px solid #6ee7b7; }
.light-mode .toc-panel-list li a { color: #047857; }
.light-mode .toc-panel-list li a::before { background-color: #34d399; }
.light-mode .toc-panel-list li a:hover { background-color: #a7f3d0; color: #064e3b; }
.light-mode .toc-panel-list li a.is-active { background-color: #10b981; color: white; }

/* TOC Colors - Dark Mode */
.dark-mode .toc-panel-title { color: #34d399; border-bottom: 1px solid var(--color-border-base); }
.dark-mode .toc-panel-list li a { color: #a7f3d0; }
.dark-mode .toc-panel-list li a::before { background-color: #6ee7b7; }
.dark-mode .toc-panel-list li a:hover { background-color: #1f2937; color: #f9fafb; }
.dark-mode .toc-panel-list li a.is-active { background-color: #34d399; color: #1f2937; }

/* TOC Nested List */
.toc-nested-list {
    list-style: none;
    padding-left: 0.75rem; 
    margin: 0.25rem 0;
}

.toc-nested-list li a::before {
    background-color: #6ee7b7;
}

/* ==========================================================================
   4. ADVENTURE LOG COMMENT SECTION
   ========================================================================== */

/* Area Utama Komentar (Container) */
.single-post-comments-wrapper {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    box-shadow: none;
    border-radius: 1rem;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .single-post-comments-wrapper {
        padding: 2rem;
    }
}

.comments-title {
    color: var(--color-emerald-base) !important;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}

.comment-list .children {
    list-style: none;
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 2px dashed var(--color-border-base);
}
@media (min-width: 768px) {
    .comment-list .children {
       padding-left: 2rem;
    }
}


/* --- Adventure Log Individual Comment Item --- */
.adventure-log-comment .comment-body-wrapper {
    background: var(--color-bg-secondary);
    border-radius: 0.75rem;
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, var(--color-border-base), rgba(var(--color-border-base-rgb), 0.2));
    padding: 1rem;
    box-shadow: 0 5px 25px var(--color-shadow-base);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.adventure-log-comment:hover .comment-body-wrapper {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px var(--color-shadow-base), 0 0 20px rgba(52, 211, 153, 0.2);
    border-image-source: linear-gradient(to bottom right, var(--color-emerald-base), rgba(var(--color-emerald-base-rgb), 0.4));
}


.comment-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--color-border-base);
}

.log-date-location {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}
.log-date-location .expedition-day {
    font-weight: 700;
    color: var(--color-text-primary);
    background-color: rgba(52, 211, 153, 0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
}
.dark-mode .log-date-location .expedition-day {
    color: #a7f3d0;
}
.light-mode .log-date-location .expedition-day {
    color: #047857;
}


.author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.avatar-wrapper img {
    border-radius: 50%;
    border: 2px solid var(--color-emerald-base);
}
.author-details .author-title {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: block;
}
.author-details .author-name a {
    font-weight: 600;
    color: var(--color-text-primary);
    font-style: normal;
    text-decoration: none;
    transition: color 0.3s ease;
}
.author-details .author-name a:hover {
    color: var(--color-emerald-base);
}

.comment-content {
    color: var(--color-text-primary);
    line-height: 1.7;
}

.comment-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border-base);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 640px) {
    .comment-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


.log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
.weather-info, .coordinates-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.log-meta svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
    color: var(--color-emerald-base);
}

.comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.rating-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-stones {
    display: flex;
    gap: 0.2rem;
}
.rating-stones .stone {
    cursor: pointer;
    color: var(--color-border-base);
    transition: color 0.2s ease, transform 0.2s ease;
}
.rating-stones .stone svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}
.rating-stones:not(.rated) .stone:hover,
.rating-stones:not(.rated) .stone.hover {
    color: #facc15; /* yellow-400 */
    transform: scale(1.1);
}
.rating-stones .stone.active {
    color: #f59e0b; /* amber-500 */
}

.rating-stones.rated .stone {
    cursor: default;
}
.rating-stones.rated .stone:hover {
    transform: none;
}
.rating-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}


.reply-button-wrapper .comment-reply-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    background-color: transparent;
    border: 1px solid var(--color-emerald-base);
    color: var(--color-emerald-base) !important;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.reply-button-wrapper .comment-reply-link:hover {
    background-color: var(--color-emerald-base);
    color: var(--color-bg-primary) !important;
    box-shadow: 0 0 10px var(--color-emerald-base);
}


/* --- Filter dan Template Komentar --- */
.adventure-log-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-border-base);
}
.comment-filter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
.filter-label {
    font-weight: 500;
    color: var(--color-text-secondary);
}
.expedition-day-filter {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-base);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.expedition-day-filter:focus {
    outline: none;
    border-color: var(--color-emerald-base);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.quick-templates-wrapper {
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.templates-title {
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-right: 0.75rem;
    display: block;
    margin-bottom: 0.5rem;
}
.templates-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.quick-template-btn {
    padding: 0.3rem 0.8rem;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-base);
    color: var(--color-text-secondary);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.quick-template-btn:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-emerald-base);
}


/* --- Comment Form Styles --- */
.magic-form-field { margin-bottom: 1.5rem; }
.magic-input-field,
.comment-form textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--color-bg-primary); 
    border: 1px solid var(--color-border-base);
    color: var(--color-text-primary);
    box-shadow: inset 0 1px 3px var(--color-shadow-base);
    resize: vertical;
}

.magic-input-field:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-emerald-base);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), inset 0 1px 3px rgba(0,0,0,0.1);
}

.magic-input-field::placeholder,
.comment-form textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}


/* ==========================================================================
   5. PENAMBAHAN: Gaya untuk Panel Tambahan (Artikel Terkait & Populer)
   ========================================================================== */
.article-addendum-section {
	margin-top: 3rem;
	margin-bottom: 3rem;
	display: grid;
	gap: 2rem;
}

.addendum-panel {
	background-color: var(--color-bg-secondary);
	border: 1px solid var(--color-border-base);
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 5px 25px var(--color-shadow-base);
}

@media (min-width: 768px) {
	.addendum-panel {
		padding: 2rem;
	}
}

.addendum-panel-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border-base);
}

.kategori-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.kategori-pill {
	display: inline-block;
	background-color: var(--color-emerald-base);
	color: white !important;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.kategori-pill:hover {
	background-color: #059669;
}

.addendum-post-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
}

/* PENAMBAHAN: Aturan untuk garis pemisah */
.addendum-post-list > li:not(:last-child) {
	border-bottom: 1px solid var(--color-border-base);
}

.addendum-post-item-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0.5rem; /* Menyesuaikan padding agar garis terlihat bagus */
	border-radius: 0; /* Menghapus border-radius dari link agar tidak aneh */
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.addendum-post-item-link:hover {
	background-color: rgba(0,0,0,0.05); /* Efek hover yang lebih halus */
}
.dark-mode .addendum-post-item-link:hover {
	background-color: rgba(255,255,255,0.05);
}


.addendum-post-thumbnail {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 0.5rem;
	flex-shrink: 0;
}

.addendum-post-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--color-text-primary) !important;
	line-height: 1.3;
	margin: 0 0 0.25rem 0;
	transition: color 0.3s ease;
}

.addendum-post-item-link:hover .addendum-post-title {
	color: var(--color-emerald-base) !important;
}

.addendum-post-meta {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
}

/* ==========================================================================
   6. PENAMBAHAN: Gaya untuk Tombol Bagikan
   ========================================================================== */
.share-buttons-container {
	padding: 1rem 0;
}
.share-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-text-primary);
	margin-bottom: 1rem;
}
.share-buttons-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.share-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--color-border-base);
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary) !important;
	transition: all 0.3s ease;
}
.share-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px var(--color-shadow-base);
}
.share-whatsapp:hover { background-color: #25D366; color: white !important; border-color: #25D366;}
.share-facebook:hover { background-color: #1877F2; color: white !important; border-color: #1877F2;}
.share-instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white !important; border-color: transparent;}
.share-x:hover { background-color: #000000; color: white !important; border-color: #000000;}
.share-telegram:hover { background-color: #229ED9; color: white !important; border-color: #229ED9;}
.share-copy.copied { background-color: var(--color-emerald-base); color: white !important; border-color: var(--color-emerald-base); }

/* ==========================================================================
   7. PENAMBAHAN: Gaya untuk Panel Sumber Informasi
   ========================================================================== */
.sumber-informasi-container {
    padding-bottom: 1.5rem; /* Jarak antara sumber dan tombol bagikan */
    margin-bottom: 1.5rem; /* Jarak dari konten di atasnya */
    border-bottom: 1px solid var(--color-border-base); /* Garis pemisah */
}
.sumber-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}
.sumber-informasi-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Jarak antar item sumber */
}
.sumber-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--color-border-base);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary) !important;
    transition: all 0.3s ease;
}
.sumber-item:not(.non-link):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--color-shadow-base);
    background-color: var(--color-emerald-base);
    color: white !important;
    border-color: var(--color-emerald-base);
}
.sumber-item.non-link {
    cursor: default;
    background-color: var(--color-bg-secondary);
}

/* ==========================================================================
   8. PENAMBAHAN: Gaya untuk Kuis Otomatis
   ========================================================================== */
.lanara-quiz-container {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-base);
    box-shadow: 0 5px 25px var(--color-shadow-base);
    transition: all 0.3s ease;
}
@media (min-width: 768px) {
	.lanara-quiz-container {
		padding: 2rem;
	}
}

.quiz-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 0.5rem;
}

.quiz-section-description {
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem auto;
}

.quiz-start-wrapper {
    text-align: center;
}

.quiz-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    background-color: var(--color-emerald-base);
    color: white !important;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.quiz-start-button:hover {
    background-color: #059669;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    transform: translateY(-2px);
}

.quiz-panel {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border-base);
    padding-top: 2rem;
}

.quiz-panel.hidden {
    display: none;
}

.quiz-loading, .quiz-results-summary {
    text-align: center;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 2rem;
}

.quiz-results-summary h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}


.quiz-question-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-base);
}
.quiz-question-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.quiz-question-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-option-label {
    display: block;
    padding: 1rem;
    border: 1px solid var(--color-border-base);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.5;
    color: var(--color-text-primary); /* PERBAIKAN: Menambahkan warna teks dinamis */
}
.light-mode .quiz-option-label:hover {
    background-color: #f0fdf4;
    border-color: var(--color-emerald-base);
}
.dark-mode .quiz-option-label:hover {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: var(--color-emerald-base);
}

.quiz-option-label input {
    margin-right: 0.75rem;
}

/* Styles for when quiz is submitted */
.quiz-panel.submitted .quiz-option-label {
    cursor: default;
    pointer-events: none; /* Disable further clicks */
}
.quiz-panel.submitted .quiz-option-label:hover {
    background-color: transparent;
}
.light-mode .quiz-panel.submitted .quiz-option-label:hover { background-color: transparent; }
.dark-mode .quiz-panel.submitted .quiz-option-label:hover { background-color: transparent; }


.quiz-option-label.user-selected.wrong {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
}
.light-mode .quiz-option-label.user-selected.wrong { color: #b91c1c; }
.dark-mode .quiz-option-label.user-selected.wrong { color: #fca5a5; }

.quiz-option-label.correct {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.5);
    font-weight: 600;
}
.light-mode .quiz-option-label.correct { color: #065f46; }
.dark-mode .quiz-option-label.correct { color: #6ee7b7; }


.quiz-submit-wrapper {
    text-align: center;
    margin-top: 2.5rem;
}
#quiz-submit-btn {
    /* Reuse start button styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    background-color: var(--color-emerald-base);
    color: white !important;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
#quiz-submit-btn:hover {
    background-color: #059669;
}
#quiz-submit-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.dark-mode #quiz-submit-btn:disabled {
    background-color: #4b5563;
}