/* --- Font Modern (Opsional, bisa disesuaikan) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body { /* Anda mungkin sudah punya ini, sesuaikan jika perlu */
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333; /* Warna teks standar */
}

/* --- Styling Sidebar Modern --- */
.modern-journal-sidebar {
    background-color: #f9fafb; /* Warna latar belakang sidebar yang sangat terang */
    padding: 25px;
    border-radius: 12px; /* Sudut lebih membulat */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Bayangan lebih halus */
    margin-bottom: 30px; /* Jarak dengan elemen di bawahnya */
}

.modern-journal-sidebar .sidebar-title {
    font-size: 1.75em; /* Ukuran font judul */
    font-weight: 700; /* Ketebalan font */
    color: #E53935; /* Merah Terang Utama */
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0e0e0; /* Garis bawah tipis dengan hint merah */
}

.modern-journal-sidebar .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modern-journal-sidebar .sidebar-menu li {
    margin-bottom: 10px; /* Jarak antar item menu */
}

.modern-journal-sidebar .sidebar-menu li a {
    display: block; /* Ubah ke block, karena tidak ada ikon untuk disejajarkan dengan flex */
    padding: 12px 18px; /* Padding konsisten di semua sisi */
    text-decoration: none;
    color: #455A64; /* Warna teks link (biru keabuan gelap) */
    border-radius: 8px; /* Sudut membulat untuk link */
    transition: all 0.3s ease-in-out;
    font-weight: 500; /* Sedikit lebih tebal dari teks biasa */
    background-color: #fff; /* Latar belakang putih untuk setiap item */
    border: 1px solid #e0e0e0; /* Border tipis untuk setiap item */
}

/* Alternatif: Jika Anda ingin menambahkan penanda kecil sebelum teks menggunakan CSS */
/* .modern-journal-sidebar .sidebar-menu li a::before {
    content: "›"; /* Karakter panah kanan sederhana */
/*    margin-right: 8px;
    color: #E53935; /* Warna merah untuk penanda */
/*    font-weight: bold;
} */


.modern-journal-sidebar .sidebar-menu li a:hover,
.modern-journal-sidebar .sidebar-menu li a:focus { /* :focus untuk aksesibilitas */
    background-color: #E53935; /* Merah Terang Utama sebagai latar saat hover/focus */
    color: #ffffff; /* Teks menjadi putih */
    transform: translateY(-2px) translateX(3px); /* Efek sedikit terangkat dan ke kanan */
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3); /* Bayangan merah saat hover */
    border-color: #E53935;
}

/* Jika menggunakan ::before untuk penanda, pastikan warnanya juga berubah saat hover */
/* .modern-journal-sidebar .sidebar-menu li a:hover::before,
.modern-journal-sidebar .sidebar-menu li a:focus::before {
    color: #ffffff;
} */


/* --- Style untuk teks khusus pembaca layar (jika belum ada) --- */
.pkp_screen_reader {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}






/* --- Font Modern & Variabel (Sama seperti sebelumnya) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap');

:root {
    --primary-red: #E53935;
    --primary-red-darker: #C62828;
    --text-color-dark: #212529;
    --text-color-light: #495057;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
    --card-background: #ffffff;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 5px 15px rgba(0,0,0,0.08);
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --column-gap: 30px; /* Jarak antar kolom */
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
    color: var(--text-color-dark);
    background-color: var(--background-light);
    margin: 0;
    padding: 0;
}

.modern-about-page {
    max-width: 1100px; /* Lebar bisa sedikit lebih besar untuk 2 kolom */
    margin: 30px auto;
    padding: 20px;
    /* Background dan shadow bisa dihilangkan dari sini jika layout utama sudah cukup */
    /* background-color: var(--card-background); */
    /* box-shadow: var(--shadow-md); */
    /* border-radius: var(--border-radius-lg); */
}

/* --- Breadcrumbs (Sama seperti sebelumnya) --- */
.modern-breadcrumbs {
    margin-bottom: 25px;
    font-size: 0.9em;
}
.modern-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.modern-breadcrumbs li { margin-right: 5px; }
.modern-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 5px; color: var(--text-color-light); }
.modern-breadcrumbs a { text-decoration: none; color: var(--primary-red); transition: color 0.2s ease; }
.modern-breadcrumbs a:hover { color: var(--primary-red-darker); text-decoration: underline; }
.modern-breadcrumbs li[aria-current="page"] { color: var(--text-color-light); font-weight: 500; }


/* --- Main Layout: Two Columns --- */
.journal-main-layout {
    display: flex;
    gap: var(--column-gap); /* Jarak antara kolom gambar dan kolom teks */
    align-items: flex-start; /* Menjaga bagian atas kolom sejajar */
}

.journal-cover-column {
    flex: 0 0 300px; /* Lebar tetap untuk kolom gambar, tidak akan menyusut/melebar */
    /* Atau bisa pakai persentase: flex-basis: 30%; max-width: 320px; */
    position: sticky; /* Membuat cover "mengikuti" saat scroll di layar besar */
    top: 20px; /* Jarak dari atas viewport saat sticky */
    align-self: flex-start; /* Pastikan sticky bekerja dengan benar dari atas */
}

.journal-cover-image {
    width: 100%; /* Mengisi lebar kolomnya */
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md); /* Bayangan lebih menonjol untuk cover */
    object-fit: cover;
    display: block; /* Menghilangkan spasi ekstra di bawah gambar jika ada */
}

.journal-details-column {
    flex: 1; /* Mengambil sisa ruang yang tersedia */
    min-width: 0; /* Penting untuk flex item agar bisa menyusut dengan benar jika kontennya panjang */
}

/* --- Content Wrapper & Sections (Sebagian besar sama, mungkin ada penyesuaian kecil) --- */
.journal-content-wrapper {
    /* Padding top bisa dihilangkan jika .journal-main-layout sudah memberi jarak yang cukup */
    /* padding-top: 20px; */
}

.journal-section {
    margin-bottom: 30px; /* Sedikit kurangi margin antar section jika perlu */
    padding: 25px;
    background-color: var(--card-background);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.journal-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--primary-red);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-red);
    display: inline-block;
}

.journal-section p {
    font-size: 1em;
    color: var(--text-color-light);
    margin-bottom: 15px;
}

/* --- Scope List Styling (Sama seperti sebelumnya) --- */
.modern-scope-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}
.modern-scope-list li {
    background-color: var(--background-light);
    padding: 12px 20px;
    margin-bottom: 10px;
    border-left: 4px solid var(--primary-red);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    color: var(--text-color-dark);
    font-weight: 500;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.modern-scope-list li:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

/* --- Responsiveness --- */
@media (max-width: 992px) { /* Tablet dan di bawahnya */
    .journal-main-layout {
        flex-direction: column; /* Susun kolom secara vertikal */
        gap: 20px; /* Jarak antar kolom saat vertikal */
    }
    .journal-cover-column {
        flex: 0 0 auto; /* Kembalikan flex agar tidak tetap lebarnya */
        width: 100%; /* Gambar bisa mengambil lebar penuh atau dibatasi */
        max-width: 350px; /* Batas maksimal lebar gambar di mobile */
        margin: 0 auto 20px auto; /* Pusatkan gambar dan beri margin bawah */
        position: static; /* Hapus sticky di mobile */
    }
    .journal-details-column {
        width: 100%;
    }
    .modern-about-page {
        max-width: 720px; /* Sesuaikan max-width untuk tampilan satu kolom */
    }
}

@media (max-width: 768px) {
    .modern-about-page {
        margin: 15px;
        padding: 15px;
    }
    .section-title {
        font-size: 1.5em;
    }
    .journal-section {
        padding: 20px;
    }
    .modern-scope-list li {
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.3em;
    }
}