@media (max-width: 768px) {
    /* Tampilkan ikon hamburger, yang tersembunyi di desktop */
    .hamburger-icon {
        display: block;
    }

    /* Ubah #main-nav dari item flex di header menjadi panel geser yang fixed */
    #main-nav {
        position: fixed;
        top: 75px;      /* Posisi di bawah header + margin */
        right: 10px;    /* Jarak dari kanan */
        width: 250px;
        height: auto;   /* Tinggi sesuai konten */
        background-color: #ffffff;
        border-radius: 10px; /* Sudut membulat */
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        transform: translateX(calc(100% + 20px)); /* Sembunyikan di luar layar + margin */
        transition: transform 0.35s ease-in-out;
        z-index: 1000;
        overflow: hidden; /* Agar konten mengikuti sudut membulat */
    }

    /* Atur ulang daftar di dalam nav menjadi vertikal */
    #main-nav ul {
        padding: 10px 0;
        flex-direction: column;
    }

    #main-nav ul li {
        margin: 0;
        text-align: left;
    }

    #main-nav ul li a {
        display: block;
        padding: 15px 30px;
    }

    /* --- KONDISI SAAT NAVIGASI TERBUKA --- */

    /* Munculkan panel navigasi */
    body.nav-open #main-nav {
        transform: translateX(0);
    }

    /* Animasikan ikon hamburger menjadi 'X' */
    body.nav-open .hamburger-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    body.nav-open .hamburger-icon span:nth-child(2) { opacity: 0; }
    body.nav-open .hamburger-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Tampilkan overlay */
    body.nav-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    /* --- GAYA TRANSISI HALAMAN (HANYA MOBILE) --- */
    .content.fade-out {
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    }

    /* --- Tata Letak Tombol Navigasi Artikel Responsif --- */
    .navigasi-artikel {
        flex-direction: column;
        gap: 15px; /* Jarak antar tombol */
    }

    .navigasi-artikel a {
        width: 100%;
        text-align: center;
        box-sizing: border-box; /* Pastikan padding tidak merusak lebar */
    }
}