/* style.css */

/* Salin SEMUA KODE DARI <style> DI index.html ke sini */
    :root {
        /* Light Mode Colors */
        --body-bg: #f0f4f8;
        --header-gradient-start: #60a5fa; /* Biru Langit */
        --header-gradient-mid: #34d399; /* Hijau Mint */
        --header-gradient-end: #fde047; /* Kuning Cerah */
        --menu-bg: #e0e7ff; /* Biru Sangat Muda (default for closed nav desktop) */
        --menu-item-bg: #e0e7ff; /* Default menu item background */
        --menu-item-text: #000000; /* Hitam pekat untuk light mode */
        --menu-item-hover-bg: #a7b5ed; /* Biru Keunguan Muda */
        --menu-item-active-bg: #4a90e2; /* Biru Sedang */
        --menu-item-active-text: #ffffff; /* Teks putih untuk item aktif */
        --content-bg: #ffffff; /* Latar belakang konten putih */
        --content-text: #2d3748; /* Teks konten gelap */
        --heading-color: #1a73e8; /* Biru Cerah */
        --subheading-color: #3182ce; /* Biru Standar */
        --card-bg-blue: #e0f2fe; /* Biru Sangat Pucat */
        --card-bg-green: #d1fae5; /* Hijau Sangat Pucat */
        --card-bg-yellow: #fffbeb; /* Kuning Sangat Pucat */
        --card-bg-purple: #f3e8ff; /* Ungu Sangat Pucat */
        --announcement-gradient-start: #34d399; /* Hijau Mint */
        --announcement-gradient-end: #fde047; /* Kuning Cerah */
        --footer-bg: #2d3748; /* Warna footer default */
        --footer-text: #e2e8f0; /* Warna teks footer default */

        /* Welcome Section Card Backgrounds (Light Mode) */
        --welcome-card-bg-blue: #e0f2fe;
        --welcome-card-bg-green: #d1fae5;
        --welcome-card-bg-yellow: #fffbeb;
        --welcome-card-heading-blue: #2563eb; /* text-blue-700 */
        --welcome-card-heading-green: #16a34a; /* text-green-700 */
        --welcome-card-heading-yellow: #ca8a04; /* text-yellow-700 */
        --welcome-card-text-dark: #1f2937; /* text-gray-800 */

        /* Agenda Card Colors (Light Mode) */
        --agenda-card-bg-1: #e0f7fa; /* Light Cyan */
        --agenda-card-text-1: #00796b; /* Dark Cyan */
        --agenda-card-date-1: #004d40; /* Even Darker Cyan */

        --agenda-card-bg-2: #e8f5e9; /* Light Green */
        --agenda-card-text-2: #388e3c; /* Dark Green */
        --agenda-card-date-2: #1b5e20; /* Even Darker Green */

        --agenda-card-bg-3: #fff3e0; /* Light Orange */
        --agenda-card-text-3: #ef6c00; /* Dark Orange */
        --agenda-card-date-3: #e65100; /* Even Darker Orange */

        --agenda-card-bg-4: #f3e8ff; /* Light Purple */
        --agenda-card-text-4: #8e24aa; /* Dark Purple */
        --agenda-card-date-4: #4a148c; /* Even Darker Purple */
    }

    body.dark-mode {
        /* Dark Mode Colors */
        --body-bg: #1a202c; /* Charcoal Gelap */
        --header-gradient-start: #1e3a8a; /* Biru Tua */
        --header-gradient-mid: #065f46; /* Hijau Tua */
        --header-gradient-end: #b45309; /* Oranye Tua */
        --menu-bg: #2d3748; /* Abu-abu Biru Tua */
        --menu-item-bg: #2d3748;
        --menu-item-text: #ffffff; /* Putih murni untuk kontras yang lebih baik */
        --menu-item-hover-bg: #4a5568; /* Abu-abu Sedang Tua */
        --menu-item-active-bg: #667eea; /* Biru Keunguan Sedang */
        --menu-item-active-text: #ffffff;
        --content-bg: #2d3748; /* Latar belakang konten gelap */
        --content-text: #ffffff; /* Putih murni untuk kontras yang lebih baik */
        --heading-color: #90cdf4; /* Biru Muda */
        --subheading-color: #a7b5ed; /* Biru Keunguan Muda */
        
        /* Variabel card untuk mode gelap */
        --card-bg-blue: #2a4365; /* Biru Tua Gelap */
        --card-bg-green: #22543d; /* Hijau Tua Gelap */
        --card-bg-yellow: #744210; /* Kuning Tua Gelap */
        --card-bg-purple: #4a148c; /* Ungu Tua Gelap (Contoh, sesuaikan jika perlu, diambil dari agenda) */

        --announcement-gradient-start: #065f46;
        --announcement-gradient-end: #b45309;
        --footer-bg: #1a202c; /* Warna footer dark mode */
        --footer-text: #cbd5e0; /* Warna teks footer dark mode */

        /* Welcome Section Card Backgrounds (Dark Mode) */
        --welcome-card-bg-blue: #2a4365;
        --welcome-card-bg-green: #22543d;
        --welcome-card-bg-yellow: #744210;
        --welcome-card-heading-blue: #90cdf4; /* text-blue-300 */
        --welcome-card-heading-green: #68d391; /* text-green-300 */
        --welcome-card-heading-yellow: #f6e05e; /* text-yellow-300 */
        --welcome-card-text-dark: #e2e8f0; /* text-gray-200 */

        /* Agenda Card Colors (Dark Mode) */
        --agenda-card-bg-1: #004d40; /* Dark Cyan */
        --agenda-card-text-1: #e0f7fa; /* Light Cyan */
        --agenda-card-date-1: #80cbc4; /* Medium Cyan */

        --agenda-card-bg-2: #1b5e20; /* Dark Green */
        --agenda-card-text-2: #e8f5e9; /* Light Green */
        --agenda-card-date-2: #a5d6a7; /* Medium Green */

        --agenda-card-bg-3: #e65100; /* Dark Orange */
        --agenda-card-text-3: #fff3e0; /* Light Orange */
        --agenda-card-date-3: #ffb74d; /* Medium Orange */

        --agenda-card-bg-4: #4a148c; /* Dark Purple */
        --agenda-card-text-4: #f3e5f5; /* Light Purple */
        --agenda-card-date-4: #ce93d8; /* Medium Purple */
    }

    body {
        font-family: 'Inter', sans-serif;
        background-color: var(--body-bg); /* Ini akan mengambil nilai dari :root atau body.dark-mode */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        color: var(--content-text);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Header Enhancements */
    header {
        background: linear-gradient(to right, var(--header-gradient-start), var(--header-gradient-mid), var(--header-gradient-end));
        padding: 2rem 1rem;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        animation: headerFadeIn 1s ease-out forwards;
        position: relative;
        color: #ffffff;
    }

    @keyframes headerFadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    header h1 {
        font-weight: 900;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
        line-height: 1.2;
        font-size: 1.75rem;
    }
    @media (min-width: 768px) { header h1 { font-size: 2.5rem; } }
    @media (min-width: 1024px) { header h1 { font-size: 3rem; } }

    header .tagline {
        font-size: 0.875rem;
        font-weight: 600;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        margin-top: 0.5rem;
    }
    @media (min-width: 768px) { header .tagline { font-size: 1rem; } }

    header .tutwuri-logo { height: 4rem; width: auto; border: none; box-shadow: none; }

    #theme-toggle {
        position: absolute; top: 1rem; right: 1rem;
        background-color: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 9999px;
        padding: 0.5rem;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 60; /* Pastikan di atas konten header */
    }
    #theme-toggle:hover { background-color: rgba(255, 255, 255, 0.4); transform: scale(1.05); }
    #theme-toggle img { width: 24px; height: 24px; filter: invert(100%); }

    .mobile-nav-header { position: absolute; top: 1rem; left: 1rem; z-index: 60; padding: 0; background: transparent; }
    #mobile-menu-toggle {
        display: flex; flex-direction: column; justify-content: space-around;
        width: 30px; height: 24px; background-color: transparent;
        border: none; cursor: pointer; z-index: 60; padding: 0; position: relative;
    }
    #mobile-menu-toggle span {
        display: block; width: 100%; height: 2px;
        background-color: #ffffff; border-radius: 9999px;
        transition: all 0.3s ease-in-out;
    }

    nav {
        background-color: var(--menu-bg); padding: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        position: sticky; top: 0; z-index: 50;
        transition: background-color 0.3s ease;
    }

    /* --- PERBAIKAN: CSS untuk Navigasi agar Tidak Terpengaruh Bullet Numbering --- */
    nav ul, nav ol, nav li {
        list-style: none !important; /* Hilangkan bullet/numbering di navigasi */
        margin: 0 !important; /* Hapus margin/padding tambahan di navigasi */
        padding: 0 !important; /* Hapus margin/padding tambahan di navigasi */
    }
    /* --- AKHIR PERBAIKAN NAVIGASI --- */


    @media (max-width: 767px) {
        nav {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, var(--header-gradient-start), var(--header-gradient-mid));
            transform: translateY(-100%); transition: transform 0.5s ease-in-out;
            box-shadow: none; padding-top: 7rem; display: block; overflow-y: auto;
        }
        nav.nav-open { transform: translateY(0); }
        body.dark-mode nav { background: linear-gradient(to right, var(--header-gradient-start), var(--header-gradient-mid)); }
        nav .menu-item { color: #000000; background-color: transparent; padding: 0.6rem 0.6rem; }
        nav .menu-item img { filter: invert(0%); }
        body.dark-mode nav .menu-item { color: #ffffff; background-color: transparent; }
        body.dark-mode nav .menu-item img { filter: invert(100%); }
        nav .menu-item:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.03); }
        body:not(.dark-mode) nav .menu-item:hover { color: #000000; }
        body.dark-mode nav .menu-item:hover { color: #ffffff; }
        nav .active-menu-item { background-color: rgba(255, 255, 255, 0.2); color: white !important; }
        nav .active-menu-item img { filter: invert(100%) !important; }
        .tab-container {
            display: grid; grid-template-columns: repeat(2, 1fr);
            column-gap: 0.8rem; row-gap: 0.8rem; padding: 1rem 0.5rem;
            max-height: none; height: calc(100% - 7rem);
            align-items: start; justify-items: center;
        }
        .content-section h2 { font-size: 1.75rem; }
    }

    @media (min-width: 768px) {
        .mobile-nav-header { display: none; }
        nav {
            position: sticky; top: 0; z-index: 50; /* Z-index 50 agar di atas konten, tapi di bawah modal */
            background-color: var(--menu-bg); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(0); height: auto; padding-top: 0; /* Pastikan tidak ada padding atas tambahan */
        }
        .tab-container {
            max-height: none; overflow: visible; flex-direction: row;
            display: flex; padding: 0.4rem 1rem; background-color: transparent;
            justify-content: flex-end; gap: 0.4rem;
        }
        .menu-item { color: var(--menu-item-text); background-color: var(--menu-item-bg); }
        .menu-item img { filter: none; }
        body.dark-mode .menu-item:not(.active-menu-item) img { filter: invert(100%); }
        #close-mobile-menu { display: none !important; }
    }

    .menu-item {
        cursor: pointer; transition: all 0.3s ease-in-out;
        background-color: var(--menu-item-bg); color: var(--menu-item-text);
        font-weight: 600; display: flex; flex-direction: column;
        align-items: center; justify-content: center; white-space: nowrap;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); border-radius: 0.6rem;
        padding: 0.6rem 1.2rem; flex-grow: 1; text-align: center;
        gap: 0.25rem; height: 80px; min-width: unset; width: 100%;
        box-sizing: border-box; margin: 0;
    }
    @media (min-width: 768px) {
        .menu-item { margin: 0 0.25rem; min-width: 90px; width: auto; }
    }
    .menu-item:hover {
        background-color: var(--menu-item-hover-bg); transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
    .active-menu-item {
        background-color: var(--menu-item-active-bg); color: var(--menu-item-active-text);
        font-weight: 700; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        transform: translateY(-4px);
    }
    .menu-item img {
        width: 24px; height: 24px; object-fit: contain;
        margin-bottom: 0.25rem; filter: none;
    }
    body.dark-mode .menu-item:not(.active-menu-item) img { filter: invert(100%); }
    .menu-item.active-menu-item img { filter: invert(100%) !important; }

    .content-section {
        opacity: 0; transform: translateY(20px); animation: fadeInSlideUp 0.5s forwards;
        background-color: var(--content-bg); color: var(--content-text);
    }
    @keyframes fadeInSlideUp { to { opacity: 1; transform: translateY(0); } }
    .content-section h2, .content-section h3 { color: var(--heading-color); }
    .content-section strong { color: var(--subheading-color); }
    body.dark-mode .content-section p,
    body.dark-mode .content-section ul,
    body.dark-mode .content-section li { color: var(--content-text); }
    
    body.dark-mode .content-section .bg-blue-50 p,
    body.dark-mode .content-section .bg-green-50 p,
    body.dark-mode .content-section .bg-yellow-50 p,
    body.dark-mode .content-section .bg-purple-50 p,
    body.dark-mode .content-section .bg-blue-50 ul,
    body.dark-mode .content-section .bg-green-50 ul,
    body.dark-mode .content-section .bg-yellow-50 ul,
    body.dark-mode .content-section .bg-purple-50 ul,
    body.dark-mode .content-section .bg-blue-50 li,
    body.dark-mode .content-section .bg-green-50 li,
    body.dark-mode .content-section .bg-yellow-50 li,
    body.dark-mode .content-section .bg-purple-50 li { color: var(--content-text); }

    .map-responsive {
        overflow: hidden; position: relative; height: 250px;
        width: 100%; border-radius: 0.5rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .map-responsive iframe {
        left:0; top:0; height:100%; width:100%; position:absolute; border:0;
    }

    .teacher-card {
        background-color: var(--content-bg); padding: 1.5rem; border-radius: 0.75rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08); text-align: center;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        transition: transform 0.2s ease;
    }
    .teacher-card:hover { transform: translateY(-5px); }
    .teacher-card img {
        width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
        margin-bottom: 1rem; border: 3px solid var(--subheading-color);
    }
    .teacher-card h4 { font-size: 1rem; font-weight: 700; color: var(--heading-color); margin-bottom: 0.25rem; }
    .teacher-card p { color: var(--content-text); font-size: 0.95rem; }
    .teacher-card .role { font-weight: 600; color: var(--subheading-color); margin-top: 0.5rem; }

    .announcement-button {
        display: block; width: 100%; padding: 1rem 1.5rem; margin-bottom: 1rem;
        background: linear-gradient(to right, var(--header-gradient-start), var(--header-gradient-mid));
        color: white; font-size: 1.125rem; font-weight: 700; border-radius: 0.75rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.3s ease;
        text-align: left; display: flex; align-items: center; justify-content: space-between;
    }
    .announcement-button:hover {
        background: linear-gradient(to right, var(--header-gradient-mid), var(--header-gradient-end));
        transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }
    .announcement-button .date { font-size: 0.875rem; font-weight: 400; opacity: 0.9; }

    body:not(.dark-mode) .bg-blue-50 { background-color: var(--card-bg-blue); }
    body:not(.dark-mode) .bg-green-50 { background-color: var(--card-bg-green); }
    body:not(.dark-mode) .bg-yellow-50 { background-color: var(--card-bg-yellow); }
    body:not(.dark-mode) .bg-purple-50 { background-color: var(--card-bg-purple); }
    body:not(.dark-mode) .bg-gray-50 { background-color: var(--content-bg); }

    /* OPSI 1: Latar belakang kartu seragam di mode gelap (seperti sebelumnya) */
    body.dark-mode .bg-blue-50,
    body.dark-mode .bg-green-50,
    body.dark-mode .bg-yellow-50,
    body.dark-mode .bg-purple-50 {
        background-color: var(--content-bg);
        color: var(--content-text);
    }
    
    /* OPSI 2: Latar belakang kartu bervariasi di mode gelap (hapus komentar di bawah dan komentari OPSI 1 jika ini yang diinginkan) */
    /*
    body.dark-mode .bg-blue-50 { background-color: var(--card-bg-blue); color: var(--content-text); }
    body.dark-mode .bg-green-50 { background-color: var(--card-bg-green); color: var(--content-text); }
    body.dark-mode .bg-yellow-50 { background-color: var(--card-bg-yellow); color: var(--content-text); }
    body.dark-mode .bg-purple-50 { background-color: var(--card-bg-purple); color: var(--content-text); }
    */
    
    body.dark-mode .bg-gray-50 {
        background-color: var(--content-bg);
        color: var(--content-text);
    }

    body.dark-mode .bg-blue-50 h3,
    body.dark-mode .bg-green-50 h3,
    body.dark-mode .bg-yellow-50 h3,
    body.dark-mode .bg-purple-50 h3 {
        color: var(--subheading-color);
    }

    .agenda-card {
        padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .agenda-card.color-1 { background-color: var(--agenda-card-bg-1); }
    .agenda-card.color-1 h3 { color: var(--agenda-card-text-1); }
    .agenda-card.color-1 p { color: var(--agenda-card-text-1); }
    .agenda-card.color-1 .agenda-date { color: var(--agenda-card-date-1); }
    .agenda-card.color-2 { background-color: var(--agenda-card-bg-2); }
    .agenda-card.color-2 h3 { color: var(--agenda-card-text-2); }
    .agenda-card.color-2 p { color: var(--agenda-card-text-2); }
    .agenda-card.color-2 .agenda-date { color: var(--agenda-card-date-2); }
    .agenda-card.color-3 { background-color: var(--agenda-card-bg-3); }
    .agenda-card.color-3 h3 { color: var(--agenda-card-text-3); }
    .agenda-card.color-3 p { color: var(--agenda-card-text-3); }
    .agenda-card.color-3 .agenda-date { color: var(--agenda-card-date-3); }
    .agenda-card.color-4 { background-color: var(--agenda-card-bg-4); }
    .agenda-card.color-4 h3 { color: var(--agenda-card-text-4); }
    .agenda-card.color-4 p { color: var(--agenda-card-text-4); }
    .agenda-card.color-4 .agenda-date { color: var(--agenda-card-date-4); }

    .agenda-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
    .agenda-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
    .agenda-card p { font-size: 0.95rem; }
    .agenda-card .agenda-date { font-size: 0.875rem; font-weight: 600; margin-top: 1rem; text-align: right; }

    .countdown-container { display: flex; justify-content: center; gap: 0.3rem; margin-top: 1rem; flex-wrap: wrap; }
    .countdown-box {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background-color: rgba(0,0,0,0.1); border-radius: 0.375rem; padding: 0.3rem 0.2rem;
        min-width: 40px; color: var(--content-text); flex-shrink: 0;
    }
    body.dark-mode .countdown-box { background-color: rgba(255,255,255,0.1); }
    .countdown-value { font-size: 1rem; font-weight: 800; line-height: 1; color: var(--heading-color); }
    body.dark-mode .countdown-value { color: var(--subheading-color); }
    .countdown-label { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; margin-top: 0.2rem; color: var(--content-text); }

    .image-gallery { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
    @media (min-width: 640px) { .image-gallery { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }

    .news-card {
        background-color: var(--content-bg); border-radius: 0.75rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08); padding: 1rem;
        display: flex; flex-direction: column;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden; cursor: pointer;
    }
    .news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
    .news-image-wrapper {
        position: relative; width: 100%; height: 180px; margin-bottom: 1rem;
        border-radius: 0.5rem; overflow: hidden;
    }
    .news-image-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; }
    .news-date-overlay {
        position: absolute; top: 0.5rem; left: 0.5rem; background-color: rgba(0,0,0,0.65);
        color: white; padding: 0.4rem 0.6rem; border-radius: 0.375rem; text-align: center; z-index: 10;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        line-height: 1.1; pointer-events: none;
    }
    .news-date-day { font-size: 1.6rem; font-weight: 800; }
    .news-date-month-year { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
    .news-author-section {
        display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; margin-bottom: 0.8rem;
        color: var(--subheading-color); font-size: 0.875rem; font-weight: 500;
    }
    body.dark-mode .news-author-section { color: var(--content-text); }
    .news-author-icon { width: 14px; height: 14px; object-fit: contain; filter: none; }
    body.dark-mode .news-author-icon { filter: invert(100%); }
    .news-card h4 { font-size: 1.1rem; font-weight: 700; color: var(--heading-color); margin-bottom: 0.5rem; line-height: 1.3; }
    @media (min-width: 768px) { .news-card h4 { font-size: 1.25rem; } }
    .news-card p {
        font-size: 0.85rem; color: var(--content-text); margin-bottom: 1rem; flex-grow: 1;
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
        -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    }
    @media (min-width: 768px) { .news-card p { font-size: 1rem; } }
    .read-more-button {
        display: block; width: fit-content; padding: 0.4rem 0.8rem; margin-top: auto;
        background-color: var(--menu-item-active-bg); color: var(--menu-item-active-text);
        font-weight: 600; border-radius: 0.5rem; text-align: center;
        transition: background-color 0.3s ease, transform 0.2s ease;
        cursor: pointer; text-decoration: none; align-self: flex-start; font-size: 0.8rem;
    }
    @media (min-width: 768px) { .read-more-button { padding: 0.5rem 1rem; font-size: 0.9rem; } }

    .full-news-article-container {
        display: flex; flex-direction: column; gap: 2rem; width: 100%;
        margin-left: auto; margin-right: auto;
    }
    @media (min-width: 768px) { .full-news-article-container { flex-direction: row; align-items: flex-start; max-width: 1300px; } }
    .full-news-main-content {
        background-color: var(--content-bg); padding: 0.8rem; border-radius: 0.75rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08); color: var(--content-text); width: 100%;
        opacity: 0; transform: translateY(20px); animation: fadeInSlideUp 0.5s ease-out forwards;
    }
    @media (min-width: 768px) { .full-news-main-content { padding: 2rem; width: 100%; } }
    .full-news-article-image-container { display: block; margin-bottom: 1.5rem; cursor: pointer; }
    .full-news-article-image-container img {
        width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 0.5rem;
    }
    .full-news-main-content h2 {
        font-weight: 800; color: var(--heading-color); margin-bottom: 1rem;
        line-height: 1.25; font-size: 1.8rem;
    }
    body.dark-mode .full-news-main-content h2 { color: var(--subheading-color); }
    @media (min-width: 480px) { .full-news-main-content h2 { font-size: 2rem; } }
    @media (min-width: 768px) { .full-news-main-content h2 { font-size: 2.3rem; } }
    @media (min-width: 1024px) { .full-news-main-content h2 { font-size: 2.6rem; } }

        .full-news-main-content .article-meta {
        display: flex;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--subheading-color); /* Perbaikan: Gunakan sub-heading color untuk meta */
        margin-bottom: 0.5rem; /* Kurangi margin-bottom agar lebih dekat dengan tombol aksi */
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    body.dark-mode .full-news-main-content .article-meta { color: var(--content-text); }
    .full-news-main-content .article-meta img { display: none; }
    
    /* Ini adalah p yang diatur oleh JS di .article-content */
    .article-content { line-height: 1.8; text-align: justify; transition: font-size 0.2s ease; }
    .article-content p { font-size: inherit; } /* Ini akan mengikuti ukuran font yang disetel */

    /* --- PERBAIKAN: CSS untuk Bullet Numbering pada Konten Artikel --- */
    .article-content ul, .article-content ol {
        list-style-position: outside; /* Bullet/number di luar teks */
        margin-left: 1.25em; /* Memberi ruang untuk bullet/number */
        padding-left: 0; /* Pastikan tidak ada padding berlebih dari Tailwind */
        margin-bottom: 1em; /* Jarak bawah antar daftar */
    }

    .article-content ul {
        list-style-type: disc; /* Bullet default */
    }

    .article-content ol {
        list-style-type: decimal; /* Numbering default */
    }

    .article-content ul ul,
    .article-content ol ol,
    .article-content ul ol,
    .article-content ol ul {
        margin-top: 0.5em; /* Jarak antar nested list */
        margin-bottom: 0.5em;
    }

    .article-content li {
        margin-bottom: 0.5em; /* Jarak antar item daftar */
        text-align: justify; /* Menjaga justify untuk teks dalam list item */
    }
    /* --- AKHIR PERBAIKAN CSS UNTUK BULLET NUMBERING --- */

    /* CSS untuk konten yang dimuat dari TinyMCE */
    .tinymce-content ul {
        list-style-type: disc; /* Menggunakan bullet */
        padding-left: 1.5em; /* Jarak dari tepi untuk bullet */
        margin-left: 0; /* Pastikan tidak ada margin ekstra dari Tailwind */
        margin-bottom: 1em; /* Jarak antar list */
    }

    .tinymce-content ol {
        list-style-type: decimal; /* Menggunakan numbering */
        padding-left: 1.5em; /* Jarak dari tepi untuk nomor */
        margin-left: 0;
        margin-bottom: 1em;
    }

    .tinymce-content li {
        margin-bottom: 0.5em; /* Jarak antar item list */
    }

    /* Jika ada nested lists, pastikan mereka juga memiliki padding yang benar */
    .tinymce-content ul ul,
    .tinymce-content ol ol,
    .tinymce-content ul ol,
    .tinymce-content ol ul {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    /* Tambahkan styling dasar untuk elemen lain yang mungkin ada di konten TinyMCE */
    .tinymce-content p {
        margin-bottom: 1em; /* Jarak antar paragraf */
        line-height: 1.6;
        text-align: justify; /* Jika Anda ingin teks justified */
    }

    .tinymce-content h1,
    .tinymce-content h2,
    .tinymce-content h3,
    .tinymce-content h4,
    .tinymce-content h5,
    .tinymce-content h6 {
        color: var(--heading-color); /* Menyesuaikan warna heading */
        margin-top: 1.5em;
        margin-bottom: 0.8em;
        font-weight: bold;
    }
    .tinymce-content h1 { font-size: 2.5em; }
    .tinymce-content h2 { font-size: 2em; }
    .tinymce-content h3 { font-size: 1.75em; }
    .tinymce-content h4 { font-size: 1.5em; }
    .tinymce-content h5 { font-size: 1.25em; }
    .tinymce-content h6 { font-size: 1em; }

    .tinymce-content strong {
        font-weight: bold;
    }

    .tinymce-content em {
        font-style: italic;
    }

    .tinymce-content a {
        color: var(--subheading-color); /* Contoh warna link */
        text-decoration: underline;
    }
    body.dark-mode .tinymce-content a {
        color: var(--heading-color); /* Link warna di dark mode */
    }

    .tinymce-content img {
        max-width: 100%;
        height: auto;
        display: block; /* Agar gambar tidak inline dan margin auto bekerja */
        margin: 1.5em auto; /* Pusatkan gambar dengan jarak atas/bawah */
        border-radius: 0.5rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 100px; }
    input[type="range"]::-webkit-slider-runnable-track { background: var(--subheading-color); border-radius: 0.5rem; height: 6px; transition: background-color 0.3s ease; }
    input[type="range"]::-moz-range-track { background: var(--subheading-color); border-radius: 0.5rem; height: 6px; transition: background-color 0.3s ease; }
    body.dark-mode input[type="range"]::-webkit-slider-runnable-track { background: var(--menu-item-hover-bg); }
    body.dark-mode input[type="range"]::-moz-range-track { background: var(--menu-item-hover-bg); }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none; background-color: var(--menu-item-active-bg);
        border: 2px solid var(--menu-item-active-text); border-radius: 50%; height: 16px; width: 16px;
        margin-top: -5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    }
    input[type="range"]::-moz-range-thumb {
        background-color: var(--menu-item-active-bg); border: 2px solid var(--menu-item-active-text);
        border-radius: 50%; height: 16px; width: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    }
    input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]::-moz-range-thumb:hover { transform: scale(1.1); }
    body.dark-mode input[type="range"]::-webkit-slider-thumb, body.dark-mode input[type="range"]::-moz-range-thumb {
        background-color: var(--menu-item-active-bg); border-color: var(--menu-item-active-text);
    }
    /* Ukuran slider di mobile */
    @media (max-width: 767px) { 
        input[type="range"] { width: 60px; min-width: 60px; } /* Sesuaikan dengan lebar di mobile */
    }

    /* --- PERBAIKAN: CSS untuk tombol A kecil/besar dan kontainer ukuran font --- */
    .flex.items-center.space-x-2 { /* Kontainer tombol A dan slider */
        flex-wrap: nowrap; /* Pastikan tidak pecah baris */
        justify-content: flex-end; /* Dorong ke kanan (desktop) */
        gap: 0.5rem; /* Jarak antar elemen */
    }

    /* Ukuran font default untuk tombol A kecil/besar */
    #font-size-decrease {
        font-size: 0.85rem; /* Ukuran 'A' kecil sedikit lebih kecil dari default */
    }

    #font-size-increase {
        font-size: 1.15rem; /* Ukuran 'A' besar sedikit lebih besar dari default */
    }

    /* Responsif untuk mobile */
    @media (max-width: 767px) {
        .flex.items-center.space-x-2 {
            justify-content: center; /* Tengahkan di mobile */
            gap: 0.3rem; /* Jarak lebih rapat di mobile */
        }

        #font-size-decrease, #font-size-increase {
            padding: 0.3rem 0.5rem; /* Padding lebih kecil */
            font-size: 0.75rem !important; /* Ukuran font tombol lebih kecil */
        }
    }
    /* --- AKHIR PERBAIKAN CSS UNTUK KONTROL UKURAN FONT --- */

    /* --- CSS BARU UNTUK FONT SIZE & SHARE MODAL/SLIDE --- */
    /* Container untuk tombol aA dan Share di dalam Artikel Penuh */
    .article-actions-container {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end; /* Dorong ke kanan */
        margin-top: -10px; /* Sedikit naik agar dekat dengan meta */
        margin-bottom: 15px; /* Jarak ke konten artikel */
        padding-bottom: 5px;
        border-bottom: 1px solid var(--body-bg); /* Garis pemisah */
        padding-top: 5px;
    }
    /* --- Perbaikan untuk tampilan tombol aA & Bagikan di mobile --- */
    @media (max-width: 767px) {
        .article-actions-container {
            justify-content: flex-start; /* Pindahkan ke kiri di mobile */
            gap: 5px; /* Kurangi jarak antar tombol di mobile */
            padding: 8px 0; /* Sesuaikan padding */
        }
        .action-button {
            padding: 0.4rem; /* Kurangi padding tombol di mobile */
            font-size: 0.8rem; /* Ukuran font ikon sedikit lebih kecil */
        }
        .action-button i {
            font-size: 1rem; /* Ukuran ikon lebih kecil di mobile */
        }
    }
    /* --- Akhir Perbaikan untuk tombol aA & Bagikan di mobile --- */

    .action-button {
        background-color: var(--menu-item-hover-bg); /* Menggunakan warna dari tema */
        color: var(--menu-item-text);
        border: none;
        border-radius: 9999px;
        padding: 0.6rem; /* Ukuran lebih besar agar lebih mudah diklik */
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    body.dark-mode .action-button {
        background-color: var(--content-bg); /* Di dark mode, mungkin kontras lebih baik dengan bg konten */
        color: var(--content-text);
    }
    .action-button:hover { 
        background-color: var(--menu-item-active-bg); 
        color: var(--menu-item-active-text);
        transform: translateY(-2px); 
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .action-button i { font-size: 1.25rem; }
    
    /* Modal/Slide untuk Font Size & Share */
    .overlay-modal {
        display: none; /* Default hidden */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparan */
        z-index: 1000; /* Pastikan di atas semua elemen lain */
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .overlay-modal.show {
        display: flex;
        opacity: 1;
    }

    .modal-content {
        background-color: var(--content-bg);
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        padding: 20px;
        max-width: 400px;
        width: 90%;
        transform: translateY(-20px) scale(0.95); /* Awalnya sedikit di atas dan kecil */
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        position: relative;
    }
    .overlay-modal.show .modal-content {
        transform: translateY(0) scale(1); /* Bergerak ke tengah dan ukuran normal */
        opacity: 1;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--body-bg); /* Garis pemisah */
        padding-bottom: 10px;
    }
    .modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        color: var(--heading-color);
    }
    .modal-close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-color);
        transition: color 0.2s ease;
    }
    .modal-close-btn:hover { color: var(--primary-color); }

    .modal-body {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Share Modal Specific */
    .share-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-top: 15px;
    }
    .share-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--text-color);
        font-size: 0.85rem;
        text-align: center;
    }
    .share-option i {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 5px;
        transition: transform 0.2s ease;
    }
    .share-option:hover i { transform: scale(1.1); }
    .share-option.facebook i { color: #1877F2; }
    .share-option.twitter i { color: #1DA1F2; }
    .share-option.whatsapp i { color: #25D366; }
    .share-option.telegram i { color: #0088CC; }
    .share-option.linkedin i { color: #0A66C2; }
    .share-option.email i { color: #EA4335; }
    .share-option.copy i { color: #6c757d; }

    /* Font Size Modal Specific */
    .font-size-controls {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        padding: 15px 0;
    }
    .font-size-controls button {
        background-color: var(--menu-item-hover-bg);
        color: var(--menu-item-text);
        border: 1px solid var(--subheading-color);
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        font-weight: 600;
    }
    body.dark-mode .font-size-controls button {
        color: var(--content-text);
    }
    .font-size-controls button:hover {
        background-color: var(--menu-item-active-bg);
        color: var(--menu-item-active-text);
        border-color: var(--menu-item-active-bg);
    }
    .font-size-controls input[type="range"] {
        width: 150px; /* Lebar slider di modal */
    }


    /* Mobile-specific slide-up modal (hanya untuk layar kecil) */
    @media (max-width: 767px) {
        .modal-content {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            max-width: none; /* Hilangkan max-width */
            border-radius: 12px 12px 0 0;
            transform: translateY(100%); /* Sembunyikan di bawah layar */
            opacity: 0;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            padding-bottom: 40px; /* Tambahan padding agar konten tidak terpotong nav bawah mobile */
        }
        .overlay-modal.show .modal-content {
            transform: translateY(0); /* Geser ke atas */
            opacity: 1;
        }
        header .action-button-container { /* Tombol di header paling atas */
            position: absolute;
            top: 1rem;
            right: 4rem; /* Jarak dari kanan di mobile header */
        }
        .full-news-main-content .article-actions-container { /* Tombol di dalam artikel penuh */
            position: static; /* Kembali ke aliran dokumen normal */
            justify-content: flex-start; /* Pindahkan ke kiri */
            gap: 5px; /* Kurangi jarak */
            padding: 8px 0; /* Sesuaikan padding */
        }
        .action-button { /* Ukuran tombol di mobile */
            padding: 0.4rem; /* Kurangi padding */
            font-size: 0.9rem; /* Ukuran font ikon sedikit lebih kecil */
        }
        .action-button i {
            font-size: 1rem; /* Ukuran ikon lebih kecil */
        }
    }
    /* --- AKHIR CSS BARU --- */


    .latest-news-sidebar {
        display: none; width: 100%; background-color: var(--content-bg); padding: 1.5rem;
        border-radius: 0.75rem; box-shadow: 0 4px 10px rgba(0,0,0,0.08); color: var(--content-text);
        opacity: 0; transform: translateY(20px); animation: fadeInSlideUp 0.5s ease-out forwards;
        animation-delay: 0.15s;
    }
    @media (min-width: 768px) { .latest-news-sidebar { display: block; width: 25%; position: sticky; top: 7rem; } }
    .latest-news-sidebar h3 { font-size: 1.25rem; font-weight: 700; color: var(--heading-color); margin-bottom: 1rem; }
    .latest-news-sidebar ul { list-style: none; padding: 0; } /* Ini untuk sidebar, bukan konten utama */
    .latest-news-sidebar li {
        margin-bottom: 0.5rem; padding: 0.75rem; border-radius: 0.5rem;
        transition: all 0.3s ease; cursor: pointer;
    }
    .latest-news-sidebar li:last-child { margin-bottom: 0; }
    .latest-news-sidebar li:hover {
        background-color: var(--menu-item-hover-bg); transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    body.dark-mode .latest-news-sidebar li:hover { background-color: var(--menu-item-hover-bg); }
    .latest-news-sidebar .sidebar-news-image {
        width: 50px; height: 50px; object-fit: cover; border-radius: 0.375rem;
        margin-right: 0.75rem; flex-shrink: 0;
    }
    .latest-news-sidebar .sidebar-news-link {
        color: var(--subheading-color); font-size: 0.9rem; font-weight: 500;
        text-decoration: none; transition: color 0.2s ease; display: flex;
        align-items: center; gap: 0.75rem; flex-grow: 1;
    }
    .latest-news-sidebar li:hover .sidebar-news-link { color: var(--menu-item-active-bg); }
    body.dark-mode .latest-news-sidebar .sidebar-news-link { color: var(--content-text); }
    body.dark-mode .latest-news-sidebar li:hover .sidebar-news-link { color: var(--menu-item-active-text); }
    .latest-news-sidebar .sidebar-news-time { font-size: 0.75rem; color: var(--subheading-color); opacity: 0.8; margin-top: 0.2rem; display: block; }
    body.dark-mode .latest-news-sidebar .sidebar-news-time { color: var(--footer-text); }

    .latest-news-mobile-container {
        display: block; background-color: var(--content-bg); padding: 1.5rem;
        border-radius: 0.75rem; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        color: var(--content-text); margin-top: 2rem;
    }
    @media (min-width: 768px) { .latest-news-mobile-container { display: none; } }
    .latest-news-mobile-container h3 { font-size: 1.25rem; font-weight: 700; color: var(--heading-color); margin-bottom: 1rem; }
    .latest-news-mobile-container ul { list-style: none; padding: 0; } /* Ini juga untuk mobile sidebar, bukan konten utama */
    .latest-news-mobile-container li {
        margin-bottom: 0.5rem; padding: 0.75rem; border-radius: 0.5rem;
        transition: all 0.3s ease; cursor: pointer;
    }
    .latest-news-mobile-container li:last-child { border-bottom: none; }
    .latest-news-mobile-container li:hover {
        background-color: var(--menu-item-hover-bg); transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    body.dark-mode .latest-news-mobile-container li:hover { background-color: var(--menu-item-hover-bg); }
    .latest-news-mobile-container .mobile-news-image {
        width: 60px; height: 60px; object-fit: cover; border-radius: 0.375rem;
        margin-right: 1rem; flex-shrink: 0;
    }
    .latest-news-mobile-container .mobile-news-link {
        color: var(--subheading-color); font-size: 1rem; font-weight: 500;
        text-decoration: none; transition: color 0.2s ease; display: flex;
        align-items: center; gap: 0.75rem;
    }
    .latest-news-mobile-container li:hover .mobile-news-link { color: var(--menu-item-active-bg); }
    body.dark-mode .latest-news-mobile-container .mobile-news-link { color: var(--content-text); }
    body.dark-mode .latest-news-mobile-container li:hover .mobile-news-link { color: var(--menu-item-active-text); }
    .latest-news-mobile-container .mobile-news-text-content { display: flex; flex-direction: column; flex-grow: 1; }
    .latest-news-mobile-container .mobile-news-title { flex-grow: 1; }
    .latest-news-mobile-container .mobile-news-time { font-size: 0.75rem; color: var(--subheading-color); opacity: 0.8; margin-top: 0.2rem; }
    body.dark-mode .latest-news-mobile-container .mobile-news-time { color: var(--footer-text); }

    footer {
        background-color: var(--footer-bg); color: var(--footer-text); padding: 1.5rem;
        margin-top: auto; box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    .social-link img { filter: none; transition: filter 0.3s ease; }
    body.dark-mode .social-link img { filter: invert(100%); }
    .social-link img[alt="WhatsApp Icon"] { filter: none; }
    body.dark-mode .social-link img[alt="WhatsApp Icon"] { filter: none; }

    .welcome-stat-card {
        background-color: var(--welcome-card-bg-blue); color: var(--welcome-card-text-dark);
        transition: background-color 0.3s ease, color 0.3s ease;
        display: flex; align-items: center; justify-content: space-between;
    }
    .welcome-stat-card h3 { color: var(--welcome-card-heading-blue); font-size: 1rem; }
    .welcome-stat-card p { color: var(--welcome-card-text-dark); font-size: 1.25rem; }
    body.dark-mode .welcome-stat-card { background-color: var(--content-bg); color: var(--content-text); }
    body.dark-mode .welcome-stat-card h3 { color: var(--heading-color); }
    body.dark-mode .welcome-stat-card p { color: var(--content-text); }
    .welcome-stat-card.blue-card { background-color: var(--welcome-card-bg-blue); }
    .welcome-stat-card.green-card { background-color: var(--card-bg-green); }
    .welcome-stat-card.yellow-card { background-color: var(--card-bg-yellow); }
    .welcome-stat-card.blue-card h3 { color: var(--welcome-card-heading-blue); }
    .welcome-stat-card.green-card h3 { color: var(--welcome-card-heading-green); }
    .welcome-card.yellow-card h3 { color: var(--welcome-card-heading-yellow); }
    body.dark-mode .welcome-stat-card.blue-card h3 { color: var(--welcome-card-heading-blue); }
    body.dark-mode .welcome-stat-card.green-card h3 { color: var(--welcome-card-heading-green); }
    body.dark-mode .welcome-stat-card.yellow-card h3 { color: var(--welcome-card-heading-yellow); }
    .welcome-stat-icon { filter: none; transition: filter 0.3s ease; }
    body.dark-mode .welcome-stat-icon { filter: invert(100%); }

    #close-mobile-menu { display: none; border: none; cursor: pointer; transition: background-color 0.3s ease; }
    nav.nav-open #close-mobile-menu {
        display: flex; align-items: center; justify-content: center; position: absolute;
        top: 1rem; left: 1rem; z-index: 70; background-color: rgba(255,255,255,0.2);
        padding: 0.5rem; border-radius: 9999px;
    }
    nav.nav-open #close-mobile-menu:hover { background-color: rgba(255,255,255,0.4); }
    nav.nav-open #close-menu img { width: 24px; height: 24px; filter: invert(100%); } /* Perbaiki typo di sini */

    .pagination-controls {
        display: flex; justify-content: center; align-items: center; margin-top: 2rem;
        padding-top: 1rem; border-top: 1px solid var(--body-bg); flex-wrap: wrap; gap: 0.5rem;
    }
    body.dark-mode .pagination-controls { border-top-color: var(--menu-item-bg); }
    .pagination-button {
        padding: 0.5rem 0.9rem; font-size: 0.9rem; margin: 0; text-decoration: none;
        border: 1px solid var(--subheading-color); border-radius: 0.375rem;
        background-color: var(--content-bg); color: var(--content-text); font-weight: 600;
        cursor: pointer; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .pagination-button:hover:not(:disabled) {
        background-color: var(--menu-item-hover-bg); transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    body:not(.dark-mode) .pagination-button:hover:not(:disabled) { color: var(--menu-item-text); }
    body.dark-mode .pagination-button:hover:not(:disabled) { color: var(--menu-item-active-text); }
    .pagination-button.active-page {
        background-color: var(--menu-item-active-bg); color: var(--menu-item-active-text);
        border-color: var(--menu-item-active-bg); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }
    .pagination-button:disabled {
        opacity: 0.5; cursor: not-allowed; background-color: var(--body-bg);
        color: var(--subheading-color); box-shadow: none; transform: none;
    }
    /* Ukuran tombol paginasi di mobile */
    @media (max-width: 767px) { .pagination-button { padding: 0.3rem 0.6rem; font-size: 0.8rem; } }
    
    .image-modal {
        display: none; position: fixed; z-index: 1000; padding-top: 50px;
        left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
        background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center;
    }
    .image-modal-content {
        margin: auto; display: block; max-width: 90%; max-height: 85vh;
        animation-name: zoom; animation-duration: 0.4s;
    }
    @keyframes zoom { from {transform:scale(0.1)} to {transform:scale(1)} }
    .image-modal-close {
        position: absolute; top: 15px; right: 35px; color: #f1f1f1;
        font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; user-select: none;
    }
    .image-modal-close:hover, .image-modal-close:focus { color: #bbb; text-decoration: none; }

    /* CSS for 3-column News Slider */
    .slider-container-placeholder { width: 100%; margin-bottom: 2rem; }
    .slider-instance-wrapper {
        overflow: hidden; position: relative; width: 100%; border-radius: 0.5rem;
        background-color: var(--content-bg);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
    .slider-wrapper { display: flex; height: 320px; }

    /* Default for larger screens (3 slides) */
    .slide {
        width: calc(100% / 3); flex-shrink: 0; box-sizing: border-box;
        padding: 0 8px; height: 100%; display: flex; align-items: center;
    }

    /* Mobile specific styling for slider (1 slide) */
    @media (max-width: 767px) {
        .slide {
            width: 100%; /* Make each slide take full width on mobile */
            padding: 0 4px; /* Adjust padding for mobile */
        }
        /* Re-enable slider buttons and dots for mobile if desired, or remove them */
        .slider-button-nav, .pagination-dot-container-slider {
            opacity: 1;
            visibility: visible;
        }
        .slider-wrapper {
            height: 280px; /* Adjust height for mobile if needed */
        }
        .news-card-wrapper-slider {
            height: 250px; /* Adjust news card height for mobile */
            transform: scale(0.95); /* Less scaling for mobile to make it larger */
        }
        .slide.is-focused .news-card-wrapper-slider {
            transform: scale(1);
        }
        .news-content-slider h2 {
            font-size: 0.95rem; /* Adjust font size for mobile */
        }
        .news-content-slider p {
            font-size: 0.7rem; /* Adjust font size for mobile */
        }
        .news-content-slider a.slider-detail-button {
            font-size: 0.65rem; /* Adjust button font size for mobile */
            padding: 0.2rem 0.5rem;
        }
        .slider-button-nav {
            padding: 0.3rem; /* Smaller buttons */
        }
        .slider-button-nav svg {
            width: 18px; /* Smaller icons */
            height: 18px;
        }
    }

    .news-card-wrapper-slider {
        width: 100%; height: 280px; transform: scale(0.85); opacity: 0.6;
        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
        border-radius: 0.5rem; overflow: hidden; position: relative;
        background-color: var(--body-bg);
    }
    .slide.is-focused .news-card-wrapper-slider {
        transform: scale(1); opacity: 1;
        box-shadow: 0 12px 25px -8px rgba(0,0,0,0.2), 0 8px 12px -6px rgba(0,0,0,0.1);
    }
    .news-card-slider { background-size: cover; background-position: center; height: 100%; position: relative; }
    .news-card-slider::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0) 100%);
        z-index: 1; border-radius: 0.5rem;
    }
    .news-content-slider {
        position: relative; z-index: 2; padding: 1rem; color: white;
        display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
    }
    .news-content-slider h2 {
        opacity: 0; transform: translateY(20px);
        transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
        font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; line-height: 1.3;
        color: #ffffff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    }
    .slide.is-focused .news-content-slider h2 { opacity: 1; transform: translateY(0); }
    .news-content-slider p {
        font-size: 0.75rem; margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .news-content-slider a.slider-detail-button {
        padding-top: 0.3rem; padding-bottom: 0.3rem; padding-left: 0.6rem; padding-right: 0.6rem;
        font-size: 0.75rem; font-weight: 600; border-radius: 0.375rem;
        align-self: flex-start; text-decoration: none; color: white;
        background-color: #1d4ed8; transition: background-color 0.3s ease;
    }
    .news-content-slider a.slider-detail-button:hover { background-color: #1e3a8a; }

    .slider-button-nav {
        z-index: 20; opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        position: absolute; top: 50%; transform: translateY(-50%);
        background-color: rgba(55,65,81,0.6); color: white;
        padding: 0.5rem; border-radius: 9999px;
    }
    .slider-button-nav:hover { background-color: rgba(55,65,81,0.8); }
    .slider-button-nav:focus {
        opacity: 1; visibility: visible; outline: 2px solid transparent;
        outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,0.75);
    }
    .slider-instance-wrapper:hover .slider-button-nav,
    .slider-instance-wrapper:focus-within .slider-button-nav { opacity: 1; visibility: visible; }
    .prev-button-slider { left: 0.5rem; }
    .next-button-slider { right: 0.5rem; }

    .pagination-dot-container-slider {
        position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%);
        display: flex; gap: 0.5rem; z-index: 10;
    }
    .pagination-dot-slider {
        transition: opacity 0.3s ease;
        /*transition: background-color 0.3s ease, transform 0.3s ease;*/
        width: 0.5rem; height: 0.5rem; border-radius: 9999px;
        background-color: #cbd5e0; cursor: pointer;
    }
    .pagination-dot-slider:hover { background-color: #a0aec0; }
    .pagination-dot-slider.active-dot { background-color: #4a5568; transform: scale(1.3); }
    .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
    }

/* CSS Variables for Theme */
:root {
    /* Light Mode Colors */
    --body-bg: #f0f4f8;
    /* ... semua variabel lainnya ... */
}

body.dark-mode {
    /* Dark Mode Colors */
    --body-bg: #1a202c;
    /* ... semua variabel lainnya ... */
}
/* Untuk mode light (default), atur warna strong menjadi hitam */
body:not(.dark-mode) strong {
    color: #000000; /* Warna hitam */
}

/* Pastikan di dark-mode, strong tetap menggunakan warna teks primary */
body.dark-mode strong {
    color: var(--text-color-primary); /* Menggunakan variabel warna teks utama dark mode */
}