export function navigationTemplate() {
    return `    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>

    <div id="nav-wrapper"
        class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
        <div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
            <div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
                <div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
                    style="overflow:hidden;max-height:100%;">
                    01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
                    01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
                    01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
                    01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
                    01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
                    00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
                    01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
                </div>
                <div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
            </div>

            <div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
                <a href="../../index.html" class="flex items-center gap-4 group">
                    <div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
                        <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
                            alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
                            class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
                    </div>
                    <div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
                        <span
                            class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
                        <span
                            class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
                            TANJUNGPURA</span>
                    </div>
                </a>

                <div class="hidden lg:flex items-center gap-5">
                    <div class="flex items-center gap-3 text-sm">
                        <a href="https://satu.untan.ac.id" target="_blank"
                            class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
                    </div>
                    <div class="pl-5 border-l border-white/20 flex items-center gap-3">
                        <button
                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
                            <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
                        </button>
                        <button
                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
                            aria-label="Pengaturan aksesibilitas" data-accessibility-toggle>
                            <i class="fas fa-universal-access" aria-hidden="true"></i>
                        </button>
                        <button
                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
                            aria-label="Cari konten">
                            <i class="fas fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>

                <button id="mobile-menu-button"
                    class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
                    aria-label="Buka menu navigasi" aria-expanded="false" aria-controls="mobile-menu">
                    <i class="fas fa-bars" aria-hidden="true"></i>
                </button>
            </div>
        </div>

        <nav class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative" id="main-nav"
            aria-label="Menu navigasi utama">
            <div class="container mx-auto px-6">
                <div class="flex items-center justify-center w-full gap-1 py-2" role="menubar">

                    <!-- Menu: Tentang Kami -->
                    <div class="nav-menu-item relative" data-menu="tentang">
                        <button
                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
                            <span data-i18n="nav_about">Tentang Kami</span>
                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                        </button>
                    </div>

                    <!-- Menu: Program -->
                    <div class="nav-menu-item relative" data-menu="program">
                        <button
                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
                            <span data-i18n="nav_program">Program</span>
                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                        </button>
                    </div>

                    <!-- Menu: SDM -->
                    <div class="nav-menu-item relative" data-menu="sdm">
                        <button
                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
                            <span data-i18n="nav_sdm">SDM</span>
                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                        </button>
                    </div>

                    <!-- Menu: Fasilitas -->
                    <div class="nav-menu-item relative" data-menu="fasilitas">
                        <button
                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
                            <span data-i18n="nav_facilities">Fasilitas</span>
                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                        </button>
                    </div>

                    <!-- Menu: Karya & Agenda -->
                    <div class="nav-menu-item relative" data-menu="karya">
                        <button
                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
                            <span data-i18n="nav_works">Karya & Agenda</span>
                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                        </button>
                    </div>

                    <!-- Menu: Kontak -->
                    <div class="nav-menu-item relative" data-menu="kontak">
                        <button
                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
                            <span data-i18n="nav_contact">Kontak</span>
                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                        </button>
                    </div>

                </div>
            </div>

            <!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
            <div id="mega-menu-container" class="absolute left-0 right-0 top-full z-50">

                <!-- Mega Menu: Tentang Kami -->
                <div id="mega-tentang" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
                    <div class="container mx-auto px-6 py-8">
                        <div class="grid grid-cols-12 gap-8">
                            <!-- Left: Featured -->
                            <div
                                class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden">
                                <div
                                    class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16">
                                </div>
                                <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12">
                                </div>
                                <div class="relative z-10">
                                    <span
                                        class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
                                        data-i18n="mega_about_title">Tentang Kami</span>
                                    <h3 class="text-2xl font-bold mb-3">Mengenal Informatika UNTAN</h3>
                                    <p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">
                                        Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi
                                        sejak 1993.</p>
                                    <a href="content.html?type=berita"
                                        class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">
                                        Selengkapnya <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                            <!-- Right: Links -->
                            <div class="col-span-8 grid grid-cols-2 gap-6">
                                <a href="content.html?type=berita" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
                                        <i class="fas fa-landmark"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
                                            data-i18n="link_history">Sejarah & Tonggak</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_history_desc">Perjalanan
                                            panjang membangun generasi digital</p>
                                    </div>
                                </a>
                                <a href="content.html?type=berita" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
                                            data-i18n="link_org">Struktur Organisasi</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_org_desc">Pimpinan dan
                                            jajaran pengelola</p>
                                    </div>
                                </a>
                                <a href="profil.html" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white">
                                        <i class="fas fa-bullseye"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
                                            data-i18n="link_vision">Visi & Misi</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_vision_desc">Arah dan
                                            tujuan pengembangan prodi</p>
                                    </div>
                                </a>
                                <a href="content.html?type=berita" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white">
                                        <i class="fas fa-handshake"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
                                            data-i18n="link_partnership">Kerjasama & MoU</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_partnership_desc">Mitra
                                            industri dan akademik</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mega Menu: Program -->
                <div id="mega-program" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
                    <div class="container mx-auto px-6 py-8">
                        <div class="grid grid-cols-12 gap-8">
                            <!-- Left: Featured -->
                            <div
                                class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden">
                                <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20">
                                </div>
                                <div class="relative z-10">
                                    <span
                                        class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4">Program
                                        Akademik</span>
                                    <h3 class="text-2xl font-bold mb-3" data-i18n="mega_program_obe">Kurikulum Berbasis
                                        OBE</h3>
                                    <p class="text-blue-100 text-sm mb-6 leading-relaxed">Outcome-Based Education dengan
                                        4 jalur konsentrasi: AI, Software Engineering, Network, dan Information Systems.
                                    </p>
                                    <a href="subject-and-courses.html"
                                        class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
                                        data-i18n="btn_krs_sim">
                                        <i class="fas fa-play-circle"></i> Simulasi KRS
                                    </a>
                                </div>
                            </div>
                            <!-- Right: Links Grid -->
                            <div class="col-span-8">
                                <div class="grid grid-cols-3 gap-4">
                                    <a href="subject-and-courses.html" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
                                            <i class="fas fa-graduation-cap"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_academic">Akademik</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">
                                                Jadwal, KRS, dan kalender</p>
                                        </div>
                                    </a>
                                    <a href="content.html?type=berita" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white">
                                            <i class="fas fa-award"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_accreditation">Akreditasi</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_accred_desc">Status
                                                Unggul BAN-PT</p>
                                        </div>
                                    </a>
                                    <a href="graduate-profile.html" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
                                            <i class="fas fa-user-graduate"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_graduate">Profil Lulusan</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_graduate_desc">
                                                Kompetensi & karir</p>
                                        </div>
                                    </a>
                                    <a href="subject-and-courses.html" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white">
                                            <i class="fas fa-book-open"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_courses">Mata Kuliah</h4>
                                            <p class="text-xs text-slate-500 mt-1">144 SKS kurikulum</p>
                                        </div>
                                    </a>
                                    <a href="academic-guidelines.html" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white">
                                            <i class="fas fa-file-alt"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_guideline">Panduan</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_guideline_desc">Buku
                                                panduan akademik</p>
                                        </div>
                                    </a>
                                    <a href="content.html?type=berita" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white">
                                            <i class="fas fa-chart-bar"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_statistics">Informatika Angka</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_statistics_desc">
                                                Statistik & data</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mega Menu: SDM -->
                <div id="mega-sdm" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
                    <div class="container mx-auto px-6 py-8">
                        <div class="grid grid-cols-12 gap-8">
                            <!-- Left: Featured Dosen -->
                            <div
                                class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden">
                                <div class="absolute inset-0 opacity-10">
                                    <div class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full">
                                    </div>
                                    <div class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full">
                                    </div>
                                </div>
                                <div class="relative z-10">
                                    <span
                                        class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
                                        data-i18n="mega_sdm_title">Sumber Daya Manusia</span>
                                    <h3 class="text-2xl font-bold mb-3" data-i18n="mega_sdm_desc">Tim Pengajar
                                        Profesional</h3>
                                    <p class="text-slate-300 text-sm mb-4 leading-relaxed">30+ dosen berkualifikasi
                                        S2/S3 dari universitas terkemuka dalam dan luar negeri.</p>
                                    <div class="flex gap-4 mb-6">
                                        <div class="text-center">
                                            <div class="text-2xl font-bold text-untan-yellow">15+</div>
                                            <div class="text-[10px] text-slate-400 uppercase">Doktor</div>
                                        </div>
                                        <div class="text-center">
                                            <div class="text-2xl font-bold text-untan-yellow">20+</div>
                                            <div class="text-[10px] text-slate-400 uppercase">Magister</div>
                                        </div>
                                        <div class="text-center">
                                            <div class="text-2xl font-bold text-untan-yellow">5</div>
                                            <div class="text-[10px] text-slate-400 uppercase">Guru Besar</div>
                                        </div>
                                    </div>
                                    <a href="people-based-on-kk.html"
                                        class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
                                        data-i18n="btn_all_lecturers">
                                        Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                            <!-- Right: KK Groups -->
                            <div class="col-span-7">
                                <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
                                    data-i18n="label_expertise">Kelompok Keahlian</h4>
                                <div class="grid grid-cols-2 gap-4">
                                    <a href="people-based-on-kk.html"
                                        class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
                                                <i class="fas fa-brain"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-bold text-slate-800 mb-1">KK Kecerdasan Buatan</h5>
                                                <p class="text-xs text-slate-500">Machine Learning, Computer Vision, NLP
                                                </p>
                                                <span class="inline-block mt-2 text-xs text-purple-600 font-semibold">8
                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="people-based-on-kk.html"
                                        class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
                                                <i class="fas fa-code"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-bold text-slate-800 mb-1">KK Rekayasa Perangkat Lunak
                                                </h5>
                                                <p class="text-xs text-slate-500">Software Engineering, DevOps, Testing
                                                </p>
                                                <span class="inline-block mt-2 text-xs text-blue-600 font-semibold">10
                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="people-based-on-kk.html"
                                        class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
                                                <i class="fas fa-network-wired"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-bold text-slate-800 mb-1">KK Jaringan & Keamanan</h5>
                                                <p class="text-xs text-slate-500">Network, Cybersecurity, Cloud</p>
                                                <span class="inline-block mt-2 text-xs text-emerald-600 font-semibold">7
                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="people-based-on-kk.html"
                                        class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
                                                <i class="fas fa-database"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-bold text-slate-800 mb-1">KK Sistem Informasi</h5>
                                                <p class="text-xs text-slate-500">Data Science, GIS, Business Intel</p>
                                                <span class="inline-block mt-2 text-xs text-orange-600 font-semibold">6
                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mega Menu: Fasilitas -->
                <div id="mega-fasilitas" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
                    <div class="container mx-auto px-6 py-8">
                        <div class="grid grid-cols-4 gap-6">
                            <a href="content.html?type=rubrik"
                                class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
                                </div>
                                <i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">Laboratorium</h4>
                                <p class="text-sm text-cyan-100 mb-4" data-i18n="mega_lab_desc">8 lab modern dengan
                                    peralatan terkini</p>
                                <span
                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
                                    data-i18n="btn_explore">
                                    Jelajahi <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                            <a href="content.html?type=rubrik"
                                class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
                                </div>
                                <i class="fas fa-server text-4xl mb-4 opacity-80"></i>
                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">Data Center</h4>
                                <p class="text-sm text-violet-100 mb-4" data-i18n="mega_dc_desc">Server & infrastruktur
                                    cloud lokal</p>
                                <span
                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
                                    data-i18n="btn_explore">
                                    Jelajahi <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                            <a href="content.html?type=rubrik"
                                class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
                                </div>
                                <i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_eresources">E-Resources</h4>
                                <p class="text-sm text-emerald-100 mb-4" data-i18n="mega_eresources_desc">Akses jurnal &
                                    database ilmiah</p>
                                <span
                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
                                    data-i18n="btn_explore">
                                    Jelajahi <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                            <a href="ifuntanhub.html"
                                class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
                                <div
                                    class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12">
                                </div>
                                <i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
                                <h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
                                <p class="text-sm text-slate-300 mb-4" data-i18n="mega_hub_desc">Platform PaaS untuk
                                    mahasiswa</p>
                                <span
                                    class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all">
                                    Launch <i class="fas fa-external-link-alt"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Mega Menu: Karya & Agenda -->
                <div id="mega-karya" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
                    <div class="container mx-auto px-6 py-8">
                        <div class="grid grid-cols-12 gap-8">
                            <!-- Left: Research Highlight -->
                            <div class="col-span-5">
                                <div
                                    class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4">
                                    <span
                                        class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
                                        data-i18n="mega_research_title">Riset Unggulan</span>
                                    <h3 class="text-xl font-bold mb-2" data-i18n="mega_sinta_title">Indeks SINTA Terbaik
                                    </h3>
                                    <p class="text-amber-100 text-sm mb-4" data-i18n="mega_sinta_desc">Publikasi dosen
                                        terindeks Scopus, WoS, dan jurnal nasional terakreditasi.</p>
                                    <a href="content.html?type=berita"
                                        class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
                                        data-i18n="btn_publications">
                                        Lihat Publikasi
                                    </a>
                                </div>
                                <a href="content.html?type=berita"
                                    class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600">
                                            <i class="fas fa-calendar-alt"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-bold text-slate-800 text-sm" data-i18n="link_info_agenda">
                                                Info & Agenda</h5>
                                            <p class="text-xs text-slate-500" data-i18n="link_info_agenda_desc">
                                                Pengumuman dan jadwal kegiatan</p>
                                        </div>
                                        <i class="fas fa-chevron-right text-slate-400 ml-auto"></i>
                                    </div>
                                </a>
                            </div>
                            <!-- Right: Grid -->
                            <div class="col-span-7 grid grid-cols-2 gap-4">
                                <a href="karya.html" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
                                        <i class="fas fa-layer-group"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue">Semua Karya
                                        </h4>
                                        <p class="text-xs text-slate-500 mt-1">Lihat seluruh karya dalam satu halaman
                                        </p>
                                    </div>
                                </a>
                                <a href="karya.html?filter=penelitian" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
                                        <i class="fas fa-microscope"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                            data-i18n="link_research">Riset</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_research_desc">Penelitian
                                            dosen dan mahasiswa</p>
                                    </div>
                                </a>
                                <a href="karya.html?filter=pkm" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
                                        <i class="fas fa-hands-helping"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                            data-i18n="link_community">Pengabdian</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_community_desc">Program
                                            pengabdian masyarakat</p>
                                    </div>
                                </a>
                                <a href="content.html?type=rubrik" class="mega-link-card group">
                                    <div
                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
                                        <i class="fas fa-trophy"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                            data-i18n="link_achievements">Prestasi</h4>
                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_achievements_desc">
                                            Pencapaian dosen & mahasiswa</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mega Menu: Kontak -->
                <div id="mega-kontak" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
                    <div class="container mx-auto px-6 py-8">
                        <div class="grid grid-cols-12 gap-8">
                            <!-- Left: Contact Info -->
                            <div class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white">
                                <h3 class="text-xl font-bold mb-4" data-i18n="mega_contact_title">Hubungi Kami</h3>
                                <div class="space-y-4">
                                    <div class="flex items-start gap-3">
                                        <div
                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-map-marker-alt text-untan-yellow"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm text-slate-300">Jl. Prof. Dr. H. Hadari Nawawi, Bansir
                                                Laut, Pontianak Tenggara</p>
                                            <p class="text-xs text-slate-400 mt-1">Kalimantan Barat 78124</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <i class="fab fa-whatsapp text-untan-yellow"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm text-white font-medium">+62 851-7165-5161</p>
                                            <p class="text-xs text-slate-400">Senin - Jumat, 08:00 - 16:00</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-envelope text-untan-yellow"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm text-white font-medium">info@informatika.untan.ac.id</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Right: Quick Links & Social -->
                            <div class="col-span-7">
                                <div class="grid grid-cols-2 gap-4 mb-6">
                                    <a href="content.html?type=berita" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
                                            <i class="fas fa-id-card"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_official_contact">Kontak Resmi</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_contact_desc">
                                                Direktori kontak staf</p>
                                        </div>
                                    </a>
                                    <a href="https://mail.google.com/mail/?view=cm&fs=1&to=info@informatika.untan.ac.id" target="_blank" rel="noopener noreferrer" class="mega-link-card group">
                                        <div
                                            class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
                                            <i class="fas fa-comment-dots"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
                                                data-i18n="link_feedback">Saran & Masukan</h4>
                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_feedback_desc">Kirim
                                                feedback Anda</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="bg-slate-50 rounded-xl p-5">
                                    <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
                                        data-i18n="follow_us">Ikuti Kami</h4>
                                    <div class="flex gap-3">
                                        <a href="https://instagram.com/informatika.untan" target="_blank"
                                            class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
                                            <i class="fab fa-instagram text-xl"></i>
                                        </a>
                                        <a href="#"
                                            class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
                                            <i class="fab fa-youtube text-xl"></i>
                                        </a>
                                        <a href="#"
                                            class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
                                            <i class="fab fa-facebook-f text-xl"></i>
                                        </a>
                                        <a href="#"
                                            class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
                                            <i class="fab fa-twitter text-xl"></i>
                                        </a>
                                        <a href="#"
                                            class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
                                            <i class="fab fa-linkedin-in text-xl"></i>
                                        </a>
                                        <a href="#"
                                            class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
                                            <i class="fab fa-tiktok text-xl"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- End mega-menu-container -->
        </nav>

        <!-- Overlay for mega menu -->
        <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
    </div>

    <div id="mobile-menu"
        class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
        role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
        <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
            <div class="flex items-center gap-4">
                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
                <button
                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
                    aria-label="Ganti bahasa">
                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
                </button>
                <button
                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
                    aria-label="Pengaturan aksesibilitas" data-accessibility-toggle>
                    <i class="fas fa-universal-access" aria-hidden="true"></i>
                </button>
            </div>
            <button id="close-mobile-menu"
                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
                aria-label="Tutup menu navigasi">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
                data-i18n="nav_home">Beranda</a>

            <!-- Tentang Kami -->
            <div class="pt-2">
                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
                    Kami</span>
                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_history">Sejarah & Tonggak</a>
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_org">Struktur Organisasi</a>
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_vision">Visi & Misi</a>
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_partnership">Kerjasama & MoU</a>
                </div>
            </div>

            <!-- Program -->
            <div class="pt-2 border-t border-slate-200">
                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
                    data-i18n="nav_program">Program</span>
                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_academic">Akademik</a>
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_accreditation">Akreditasi</a>
                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_graduate">Profil Lulusan</a>
                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_courses">Mata Kuliah</a>
                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_guideline">Panduan Akademik</a>
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_statistics">Informatika Angka</a>
                </div>
            </div>

            <!-- SDM -->
            <div class="pt-2 border-t border-slate-200">
                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                    <a href="people-based-on-kk.html"
                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
                        data-i18n="btn_all_lecturers">Semua Dosen</a>
                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="kk_ai">Kecerdasan Buatan</a>
                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="kk_network">Jaringan & Keamanan</a>
                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="kk_is">Sistem Informasi</a>
                </div>
            </div>

            <!-- Fasilitas -->
            <div class="pt-2 border-t border-slate-200">
                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
                    data-i18n="nav_facilities">Fasilitas</span>
                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="mega_lab">Laboratorium</a>
                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="mega_dc">Data Center</a>
                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="mega_eresources">E-Resources</a>
                    <a href="ifuntanhub.html"
                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
                </div>
            </div>

            <!-- Karya & Agenda -->
            <div class="pt-2 border-t border-slate-200">
                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
                    Agenda</span>
                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_all_karya">Semua Karya</a>
                    <a href="karya.html?filter=penelitian"
                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_research">Riset</a>
                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_community">Pengabdian Masyarakat</a>
                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_achievements">Prestasi</a>
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_info_agenda">Info & Agenda</a>
                </div>
            </div>

            <!-- Kontak -->
            <div class="pt-2 border-t border-slate-200 pb-8">
                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
                    data-i18n="nav_contact">Kontak</span>
                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_official_contact">Kontak Resmi</a>
                    <a href="https://mail.google.com/mail/?view=cm&fs=1&to=info@informatika.untan.ac.id" target="_blank" rel="noopener noreferrer"
                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                        data-i18n="link_feedback">Saran & Masukan</a>
                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
                        <i class="fab fa-instagram text-pink-500"></i> Instagram
                    </a>
                    <a href="#"
                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
                        <i class="fab fa-youtube text-red-500"></i> YouTube
                    </a>
                </div>
            </div>
        </div>
    </div>`;
}