diff --git a/.gitignore b/.gitignore
index 3bdd52e..2c44880 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
 node_modules/
 dist/
 .DS_Store
+.env
+.env.local
+groups/**/.env
+groups/**/.env.local
diff --git a/assets/global/localization.js b/assets/global/localization.js
index 82d1ca7..9ff9d19 100644
--- a/assets/global/localization.js
+++ b/assets/global/localization.js
@@ -569,6 +569,33 @@ const translations = {
         kontrib_guideline_3: "Sertakan fakta dan data yang akurat dan dapat diverifikasi.",
         kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.",
         kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
+
+        // --- apeNameTeamE (Halaman Beasiswa) ---
+        ape_breadcrumb_profile: 'Profil',
+        ape_breadcrumb_scholarship: 'Beasiswa',
+        ape_hero_badge: 'Program Beasiswa',
+        ape_hero_title: 'Beasiswa Studi &amp;<br>Penelitian',
+        ape_hero_subtitle: 'Teknik Informatika Universitas Tanjungpura',
+        ape_hero_desc: 'Temukan berbagai peluang beasiswa untuk mendukung perjalanan akademik dan penelitian Anda. Program Studi Informatika UNTAN berkomitmen membantu mahasiswa meraih prestasi terbaik.',
+        ape_hero_cta: 'Lihat Daftar Beasiswa',
+        ape_stats_total: 'Total Mahasiswa Penerima<br>Beasiswa Semester Ini',
+        ape_stats_gov: 'Total Penerima Beasiswa<br>Pembiayaan Pemerintah',
+        ape_stats_private: 'Total Penerima Beasiswa<br>Pembiayaan Swasta',
+        ape_dir_label: 'Daftar Beasiswa',
+        ape_dir_title: 'Daftar Beasiswa',
+        ape_dir_desc: 'Temukan beragam beasiswa dari berbagai sumber resmi yang tersedia untuk mahasiswa aktif, alumni, dan calon mahasiswa Program Studi Informatika UNTAN.',
+        ape_dir_guide: 'Terima Bantuan Beasiswa?',
+        ape_filter_open: 'Sedang Buka',
+        ape_filter_closed: 'Ditutup',
+        ape_filter_gov: 'Pemerintah',
+        ape_filter_private: 'Swasta',
+        ape_search_placeholder: 'Cari Nama Beasiswa...',
+        ape_testimonial_title: 'Apa Kata Mereka?',
+        ape_testimonial_desc: 'Cerita inspiratif dari para penerima beasiswa Program Studi Informatika UNTAN',
+        ape_cta_title: 'Ingin Mengetahui Info Lebih Lanjut?',
+        ape_cta_desc: 'Hubungi admin prodi atau ikuti Instagram kemahasiswaan UNTAN untuk informasi terbaru tentang beasiswa dan program akademik.',
+        ape_cta_btn1: 'DAFTAR BEASISWA',
+        ape_cta_btn2: 'Hubungi Kami',
     },
 
     en: {
@@ -1135,6 +1162,33 @@ const translations = {
         kontrib_guideline_3: "Include accurate and verifiable facts and data.",
         kontrib_guideline_4: "Avoid plagiarism. Work must be original.",
         kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
+
+        // --- apeNameTeamE (Scholarship Page) ---
+        ape_breadcrumb_profile: 'Profile',
+        ape_breadcrumb_scholarship: 'Scholarship',
+        ape_hero_badge: 'Scholarship Program',
+        ape_hero_title: 'Study &amp; Research<br>Scholarships',
+        ape_hero_subtitle: 'Informatics Engineering, Tanjungpura University',
+        ape_hero_desc: 'Discover various scholarship opportunities to support your academic and research journey. The Informatics Study Program at UNTAN is committed to helping students achieve excellence.',
+        ape_hero_cta: 'View Scholarships',
+        ape_stats_total: 'Total Scholarship<br>Recipients This Semester',
+        ape_stats_gov: 'Total Government<br>Scholarship Recipients',
+        ape_stats_private: 'Total Private<br>Scholarship Recipients',
+        ape_dir_label: 'Scholarship Directory',
+        ape_dir_title: 'Scholarship Directory',
+        ape_dir_desc: 'Find various scholarships from official sources available for active students, alumni, and prospective students of the UNTAN Informatics Study Program.',
+        ape_dir_guide: 'Need Scholarship Aid?',
+        ape_filter_open: 'Open',
+        ape_filter_closed: 'Closed',
+        ape_filter_gov: 'Government',
+        ape_filter_private: 'Private',
+        ape_search_placeholder: 'Search Scholarship Name...',
+        ape_testimonial_title: 'What They Say?',
+        ape_testimonial_desc: 'Inspiring stories from scholarship recipients at UNTAN Informatics Study Program',
+        ape_cta_title: 'Want to Know More?',
+        ape_cta_desc: 'Contact the program admin or follow UNTAN student affairs Instagram for the latest scholarship and academic program information.',
+        ape_cta_btn1: 'SCHOLARSHIP LIST',
+        ape_cta_btn2: 'Contact Us',
     }
 };
 
diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index a781215..1be3821 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -997,7 +997,7 @@
 
         <!-- Overlay for mega menu -->
         <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
-    </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"
diff --git a/groups/ApeNameTeamE/assets/css/style.css b/groups/ApeNameTeamE/assets/css/style.css
index b5d684b..9ea0015 100644
--- a/groups/ApeNameTeamE/assets/css/style.css
+++ b/groups/ApeNameTeamE/assets/css/style.css
@@ -80,20 +80,28 @@ body {
 
 .navbar-logo-name {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-  font-size: 15px;
-  font-weight: 800;
+  font-size: 1.125rem; /* text-lg = 18px */
+  font-weight: 700;
   color: #ffffff;
   line-height: 1;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.1em; /* tracking-widest */
+  text-transform: uppercase;
+  margin-bottom: 0.25rem;
 }
 
 .navbar-logo-sub {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-  font-size: 9px;
-  font-weight: 600;
-  color: rgba(255,255,255,0.55);
-  letter-spacing: 1px;
-  margin-top: 2px;
+  font-size: 10px; /* text-[10px] */
+  font-weight: 400;
+  color: rgba(226, 232, 240, 0.9); /* text-slate-200 opacity-90 */
+  letter-spacing: 0.15em; /* tracking-[0.15em] */
+  margin-top: 0.125rem;
+  text-transform: uppercase;
+}
+
+@media (min-width: 1024px) {
+  .navbar-logo-name { font-size: 1.5rem; } /* lg:text-2xl = 24px */
+  .navbar-logo-sub  { font-size: 0.875rem; letter-spacing: 0.3em; } /* lg:text-sm, lg:tracking-[0.3em] */
 }
 
 /* "SATU UNTAN" text */
@@ -179,10 +187,14 @@ body {
 .navbar-main {
   background: var(--color-secondary);
   height: 48px;
-  display: flex;
+  display: none;
   align-items: center;
 }
 
+@media (min-width: 1024px) {
+  .navbar-main { display: flex; }
+}
+
 /* Nav links — teks gelap di atas latar kuning */
 .nav-link {
   position: relative;
@@ -1270,6 +1282,10 @@ body {
 }
 
 /* ===== FOOTER ===== */
+footer {
+  font-family: 'Roboto', sans-serif;
+}
+
 .site-footer {
   background: var(--color-primary);
   color: white;
diff --git a/groups/ApeNameTeamE/assets/js/API.js b/groups/ApeNameTeamE/assets/js/API.js
new file mode 100644
index 0000000..2bf36b7
--- /dev/null
+++ b/groups/ApeNameTeamE/assets/js/API.js
@@ -0,0 +1,74 @@
+// =====================================================
+// API.js — Mekanisme Fetch Data Beasiswa (terpusat)
+// -----------------------------------------------------
+// Alur: coba API remote (Directus publik) → jika gagal,
+// fallback ke berkas lokal `data/beasiswa.json`.
+//
+// Data remote dinormalisasi ke skema UI yang sama dengan
+// data lokal agar filter.js dan popup.js tidak perlu berubah.
+// =====================================================
+
+(function (global) {
+  'use strict';
+
+  const CONFIG = {
+    baseUrl: 'https://api.ifuntanhub.dev',
+    collection: '/items/beasiswa',
+    localSource: 'data/beasiswa.json',
+  };
+
+  // Normalise status remote → nilai yang dipakai UI
+  function normalizeStatus(s) {
+    if (!s) return 'Ditutup';
+    const lower = s.toLowerCase();
+    if (lower === 'dibuka' || lower === 'buka') return 'Buka';
+    if (lower === 'ditutup') return 'Ditutup';
+    return s; // "Segera Dibuka" atau nilai lain: tampilkan apa adanya
+  }
+
+  // Petakan satu item Directus ke skema yang diharapkan filter.js / popup.js
+  function normalizeItem(item) {
+    const parts = [item.jenjang, item.negara, item.tipe_pendanaan].filter(Boolean);
+    return {
+      id: String(item.id),
+      nama: item.nama || '',
+      status: normalizeStatus(item.status),
+      kategori: item.tipe_pendanaan || '',
+      thumbnail: '',
+      deskripsi_singkat: parts.join(' · ') || 'Info beasiswa tersedia di sumber resmi.',
+      tanggal_buka: item.tanggal_buka || '',
+      tanggal_tutup: item.tenggat_waktu || '',
+      url_sumber: item.url || '',
+      syarat_umum: [],
+      kontak: '',
+      tags: parts,
+    };
+  }
+
+  async function fetchRemote() {
+    const res = await fetch(CONFIG.baseUrl + CONFIG.collection);
+    if (!res.ok) throw new Error(`API merespons HTTP ${res.status}`);
+    const json = await res.json();
+    return (json.data || []).map(normalizeItem);
+  }
+
+  async function fetchLocal() {
+    const res = await fetch(CONFIG.localSource);
+    if (!res.ok) throw new Error(`Gagal memuat data lokal (HTTP ${res.status})`);
+    const json = await res.json();
+    return Array.isArray(json) ? json : json.data || [];
+  }
+
+  async function getBeasiswa() {
+    try {
+      const data = await fetchRemote();
+      return { data, source: 'remote' };
+    } catch (err) {
+      console.warn('[BeasiswaAPI] API remote gagal, fallback ke data lokal:', err.message);
+      const data = await fetchLocal();
+      return { data, source: 'local' };
+    }
+  }
+
+  global.BeasiswaAPI = { config: CONFIG, getBeasiswa, fetchRemote, fetchLocal };
+})(window);
diff --git a/groups/ApeNameTeamE/assets/js/filter.js b/groups/ApeNameTeamE/assets/js/filter.js
index adc1ac6..97bff7e 100644
--- a/groups/ApeNameTeamE/assets/js/filter.js
+++ b/groups/ApeNameTeamE/assets/js/filter.js
@@ -32,7 +32,7 @@ function sanitize(str) {
  * Gunakan textContent/setAttribute — hindari langsung innerHTML dari user input
  */
 function createCard(bsw) {
-  const isBuka = bsw.status === 'Buka';
+  const isBuka = bsw.status === 'Buka' || bsw.status === 'Dibuka';
 
   const article = document.createElement('article');
   article.className = 'scholarship-card fade-in-up';
@@ -207,21 +207,25 @@ function initSearch() {
   });
 }
 
-/** Fetch data JSON dan render */
+/** Fetch data via API.js (BeasiswaAPI) lalu render */
 async function initDirectory() {
   const grid = document.getElementById('beasiswa-grid');
 
   try {
-    const res = await fetch('data/beasiswa.json');
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    if (!window.BeasiswaAPI) {
+      throw new Error('Modul API.js (BeasiswaAPI) belum dimuat');
+    }
 
-    allData = await res.json();
+    const { data, source } = await window.BeasiswaAPI.getBeasiswa();
+    allData = data;
+    console.info(`[items] beasiswa dimuat dari sumber: ${source} (${allData.length} item)`);
 
     // Simpan ke window agar popup.js bisa akses
     window.beasiswaData = allData;
 
     renderCards();
   } catch (err) {
+    console.error('[items] gagal memuat beasiswa', err);
     grid.innerHTML = `
       <div class="empty-state" style="grid-column:1/-1">
         <i class="fas fa-exclamation-triangle" style="color:#fca5a5;"></i>
@@ -229,7 +233,7 @@ async function initDirectory() {
           Gagal memuat data beasiswa
         </p>
         <p style="font-size:13px;color:#cbd5e1;">
-          Pastikan menggunakan live server. Silakan refresh atau hubungi admin.
+          Tidak dapat terhubung ke server. Silakan refresh atau hubungi admin.
         </p>
       </div>`;
   }
diff --git a/groups/ApeNameTeamE/assets/js/i18n.js b/groups/ApeNameTeamE/assets/js/i18n.js
index 963b8fc..387579a 100644
--- a/groups/ApeNameTeamE/assets/js/i18n.js
+++ b/groups/ApeNameTeamE/assets/js/i18n.js
@@ -105,24 +105,32 @@ function applyTranslations(lang) {
   document.documentElement.lang = lang === 'id' ? 'id' : 'en';
 }
 
+// Override setLanguage to delegate to localization.js when available,
+// so both systems stay in sync (localization.js dispatches 'languageChanged'
+// which triggers our listener below to re-apply dot-key translations).
 function setLanguage(lang) {
   if (lang !== 'id' && lang !== 'en') return;
-  currentLang = lang;
-  sessionStorage.setItem('lang', lang);
-
-  // Update button visual states
-  document.querySelectorAll('.lang-btn').forEach(btn => {
-    const isActive = btn.dataset.lang === lang;
-    btn.classList.toggle('active', isActive);
-  });
-
-  applyTranslations(lang);
+  if (typeof setLang === 'function') {
+    setLang(lang); // localization.js handles state + dispatches languageChanged
+  } else {
+    currentLang = lang;
+    sessionStorage.setItem('lang', lang);
+    applyTranslations(lang);
+  }
 }
-
-// Expose globally so onclick in HTML works
 window.setLanguage = setLanguage;
 
+// Re-apply dot-key translations whenever localization.js changes the language.
+// This fixes the race where localization.js overwrites dot-key elements with the
+// raw key string (its fallback for unknown keys).
+document.addEventListener('languageChanged', (e) => {
+  applyTranslations(e.detail.lang);
+});
+
 // Initialize on DOM ready
 document.addEventListener('DOMContentLoaded', () => {
-  setLanguage(currentLang);
+  // Use localization.js state if it's already loaded, otherwise fall back.
+  const initLang = (typeof getLang === 'function') ? getLang()
+    : (sessionStorage.getItem('lang') || 'id');
+  applyTranslations(initLang);
 });
diff --git a/groups/ApeNameTeamE/assets/js/main.js b/groups/ApeNameTeamE/assets/js/main.js
index 9bf70cf..21228c0 100644
--- a/groups/ApeNameTeamE/assets/js/main.js
+++ b/groups/ApeNameTeamE/assets/js/main.js
@@ -55,24 +55,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
   // ─── Hamburger Menu (Mobile) ─────────────────────────
-  const hamburger  = document.getElementById('hamburger');
-  const mobileMenu = document.getElementById('mobile-menu');
+  const mobileBtn      = document.getElementById('mobile-menu-button');
+  const mobileMenu     = document.getElementById('mobile-menu');
+  const closeMobileBtn = document.getElementById('close-mobile-menu');
 
-  hamburger?.addEventListener('click', () => {
-    const isOpen = !mobileMenu.classList.contains('hidden');
-    mobileMenu.classList.toggle('hidden');
+  const closeMobileMenu = () => {
+    mobileMenu?.classList.add('-translate-x-full');
+    mobileBtn?.setAttribute('aria-expanded', 'false');
+  };
 
-    // Toggle icon
-    const icon = hamburger.querySelector('i');
-    if (isOpen) {
-      icon.className = 'fas fa-bars text-lg';
-    } else {
-      icon.className = 'fas fa-times text-lg';
-    }
-
-    // Aksesibilitas
-    hamburger.setAttribute('aria-expanded', String(!isOpen));
-  });
+  // openMobileMenu handled by inline script in HTML; this covers close-on-scroll
+  closeMobileBtn?.addEventListener('click', closeMobileMenu);
 
 
   // ─── Smooth Scroll untuk anchor links ──────────────
@@ -90,9 +83,7 @@ document.addEventListener('DOMContentLoaded', () => {
       window.scrollTo({ top, behavior: 'smooth' });
 
       // Tutup mobile menu jika sedang terbuka
-      mobileMenu?.classList.add('hidden');
-      const icon = hamburger?.querySelector('i');
-      if (icon) icon.className = 'fas fa-bars text-lg';
+      closeMobileMenu();
     });
   });
 
diff --git a/groups/ApeNameTeamE/assets/js/popup.js b/groups/ApeNameTeamE/assets/js/popup.js
index 759f4d9..7736bbb 100644
--- a/groups/ApeNameTeamE/assets/js/popup.js
+++ b/groups/ApeNameTeamE/assets/js/popup.js
@@ -29,7 +29,7 @@ function openPopup(id) {
   const bsw  = data.find(b => b.id === id);
   if (!bsw) return;
 
-  const isBuka = bsw.status === 'Buka';
+  const isBuka = bsw.status === 'Buka' || bsw.status === 'Dibuka';
   const badgeClass = isBuka ? 'badge-buka' : 'badge-ditutup';
 
   // Bangun list syarat umum
diff --git a/groups/ApeNameTeamE/index.html b/groups/ApeNameTeamE/index.html
index 43767bd..028b88d 100644
--- a/groups/ApeNameTeamE/index.html
+++ b/groups/ApeNameTeamE/index.html
@@ -1,601 +1,1689 @@
 <!DOCTYPE html>
-<html lang="id">
+<html lang="id" class="scroll-smooth">
+
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Group 10 &ndash; ApeNameTeamE | Informatika UNTAN</title>
+    <link rel="stylesheet" href="../../assets/global/output.css">
+    <link rel="stylesheet" href="assets/css/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
-  <!-- SEO -->
-  <title>Beasiswa Studi & Penelitian — Informatika Universitas Tanjungpura</title>
-  <meta name="description" content="Temukan informasi beasiswa terlengkap untuk mahasiswa Informatika Universitas Tanjungpura. Beasiswa studi, penelitian, magang dari sumber resmi pemerintah dan swasta." />
-  <meta name="keywords" content="beasiswa, informatika, UNTAN, Tanjungpura, KIP, LPDP, Pertamina, Pelindo, beasiswa 2026" />
+    <!-- AOS.js -->
+    <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />
 
-  <!-- Open Graph -->
-  <meta property="og:title" content="Beasiswa Informatika UNTAN" />
-  <meta property="og:description" content="Portal informasi beasiswa Program Studi Informatika Universitas Tanjungpura." />
-  <meta property="og:type" content="website" />
+    <!-- Swiper.js -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 
-  <!-- System Fonts diprioritaskan, Roboto Condensed untuk heading (sebagai font-serif) -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet" />
 
-  <!-- Font Awesome 6 -->
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  />
+    <style>
+        /* ===== MOBILE NAV STABILITY FIX =====
+           Prevents logo bar from collapsing/shifting on Android when
+           address bar hides/shows and triggers viewport reflow.
+        ===================================== */
+        #nav-wrapper {
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            will-change: box-shadow;
+        }
 
-  <!-- AOS.js -->
-  <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />
+        #nav-wrapper>div:first-child {
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+        }
 
-  <!-- Swiper.js -->
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
-  />
+        @media (max-width: 1023px) {
+            #nav-wrapper>div:first-child {
+                min-height: 0 !important;
+                max-height: none;
+            }
+        }
 
-  <!-- Tailwind CSS (CDN) -->
-  <script>
-    // Tailwind config harus sebelum CDN dimuat
-    window.tailwind = window.tailwind || {};
-  </script>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary:   '#003150',
-            secondary: '#feb404',
-          },
-        },
-      },
-      corePlugins: { preflight: false }, // gunakan CSS kita sendiri untuk reset
-    };
-  </script>
+        #pengumuman-bar {
+            z-index: 40;
+        }
 
-  <!-- Custom CSS -->
-  <link rel="stylesheet" href="assets/css/style.css" />
+        #pengumuman-bar.is-stuck {
+            position: fixed;
+            left: 0;
+            right: 0;
+            z-index: 40;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+
+            *,
+            *::before,
+            *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+
+        /* Skip Link Styling */
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: #003150;
+            color: white;
+            padding: 8px 16px;
+            z-index: 100;
+            transition: top 0.3s;
+        }
+
+        .skip-link:focus {
+            top: 0;
+        }
+
+        /* Focus visible for better keyboard navigation */
+        :focus-visible {
+            outline: 3px solid #feb401;
+            outline-offset: 2px;
+        }
+
+        /* Mega Menu Styles */
+        .hero-pagination .swiper-pagination-bullet {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.4);
+            display: inline-block;
+            margin: 0 4px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .hero-pagination .swiper-pagination-bullet-active {
+            background: rgba(255, 255, 255, 1);
+            width: 24px;
+            border-radius: 4px;
+        }
+
+        .mega-panel {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+        }
+
+        .mega-panel.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        /* Overlay transition */
+        #mega-overlay {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+        }
+
+        #mega-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .mega-link-card {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+            padding: 1rem;
+            border-radius: 0.75rem;
+            border: 1px solid #e2e8f0;
+            background: white;
+            transition: all 0.2s ease;
+        }
+
+        .mega-link-card:hover {
+            border-color: #3b82f6;
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+            transform: translateY(-2px);
+        }
+
+        .mega-link-icon {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.2s ease;
+        }
+
+        .nav-menu-btn.active {
+            background: rgba(255, 255, 255, 0.9);
+            color: #1e40af;
+        }
+
+        .nav-menu-btn:hover {
+            background: rgba(255, 255, 255, 0.8);
+        }
+
+        /* Mega menu positioning - no gap */
+        #main-nav {
+            position: relative;
+        }
+
+        #mega-menu-container {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            pointer-events: none;
+        }
+
+        #mega-menu-container .mega-panel {
+            pointer-events: auto;
+        }
+
+        /* Keep pointer bridge under nav to prevent hover loss */
+        .nav-menu-item {
+            position: relative;
+        }
+
+        .nav-menu-item::after {
+            content: '';
+            position: absolute;
+            bottom: -12px;
+            left: 0;
+            right: 0;
+            height: 12px;
+        }
+
+        /* ===== Luco Chatbot Animations ===== */
+        @keyframes slideInRight {
+            from {
+                transform: translateX(100px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeInUp {
+            from {
+                transform: translateY(10px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes lucoPulse {
+
+            0%,
+            100% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.05);
+            }
+        }
+
+        #luco-container {
+            animation: slideInRight 0.5s ease-out forwards;
+        }
+
+        #luco-bubble {
+            animation: fadeInUp 0.3s ease-out forwards;
+            width: min(18rem, calc(100vw - 2rem));
+        }
+
+        #luco-btn {
+            animation: lucoPulse 2s ease-in-out infinite;
+        }
+
+        #luco-btn:hover {
+            animation: none;
+        }
+
+        /* Typing indicator */
+        .typing-indicator span {
+            display: inline-block;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+
+        .typing-indicator span:nth-child(1) {
+            animation-delay: 0s;
+        }
+
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes bounce {
+
+            0%,
+            80%,
+            100% {
+                transform: translateY(0);
+            }
+
+            40% {
+                transform: translateY(-6px);
+            }
+        }
+
+        /* Luco speech bubble arrow */
+        #luco-bubble .bubble-arrow {
+            position: absolute;
+            right: 24px;
+            bottom: -6px;
+            width: 12px;
+            height: 12px;
+            background: white;
+            transform: rotate(45deg);
+            border-right: 1px solid #e2e8f0;
+            border-bottom: 1px solid #e2e8f0;
+        }
+    </style>
 </head>
 
-<body class="font-sans">
+<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
 
-  <!-- ================================================
-       STICKY NAVBAR
-       ================================================ -->
-  <header id="navbar" role="banner">
+    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
 
-    <!-- ── TOP UTILITY BAR (putih) ── -->
-    <div class="navbar-top">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex items-center justify-between h-full">
-
-        <!-- Logo UNTAN + Informatika -->
-        <a href="#hero" class="flex items-center gap-3 no-underline" aria-label="Beranda Informatika UNTAN">
-          <!-- Lambang UNTAN (SVG inline) -->
-          <div class="navbar-logo-emblem">
-            <img src="assets/images/logo/logo-untan.png" alt="Logo UNTAN" class="w-11 h-11 object-contain">
-          </div>
-          <div class="leading-tight">
-            <div class="navbar-logo-name">INFORMATIKA</div>
-            <div class="navbar-logo-sub">UNIVERSITAS TANJUNGPURA</div>
-          </div>
-        </a>
-
-        <!-- Right: SATU UNTAN + Language + Icons -->
-        <div class="flex items-center gap-4">
-          <!-- SATU UNTAN label -->
-          <span class="navbar-satu hidden sm:block">SATU UNTAN</span>
-          <div class="w-px h-5 bg-gray-300 hidden sm:block"></div>
-
-          <!-- Language Toggle (UC-08) -->
-          <div id="lang-toggle" role="group" aria-label="Pilih bahasa">
-            <button id="btn-id" class="lang-btn active" data-lang="id" onclick="setLanguage('id')" aria-label="Bahasa Indonesia">ID</button>
-            <span class="lang-divider">|</span>
-            <button id="btn-en" class="lang-btn" data-lang="en" onclick="setLanguage('en')" aria-label="English">EN</button>
-          </div>
-
-          <!-- Contrast icon -->
-          <button class="navbar-search-btn" aria-label="Mode Gelap/Terang">
-            <i class="fas fa-circle-half-stroke text-sm"></i>
-          </button>
-
-          <!-- Search icon -->
-          <button class="navbar-search-btn" aria-label="Cari">
-            <i class="fas fa-search text-sm"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── MAIN NAV BAR (kuning, links CENTERED) ── -->
-    <nav class="navbar-main" aria-label="Navigasi utama">
-
-      <!-- Desktop: links centered across full width -->
-      <div class="hidden lg:flex items-center justify-center h-full w-full" id="nav-links" role="list">
-        <a href="#hero"        class="nav-link h-full flex items-center gap-1.5 px-5 text-xs font-semibold" role="listitem"><span data-i18n="nav.tentang">TENTANG KAMI</span> <i class="fas fa-chevron-down" style="font-size:8px;"></i></a>
-        <a href="#directory"   class="nav-link h-full flex items-center gap-1.5 px-5 text-xs font-semibold" role="listitem"><span data-i18n="nav.program">PROGRAM</span> <i class="fas fa-chevron-down" style="font-size:8px;"></i></a>
-        <a href="#hero"        class="nav-link h-full flex items-center gap-1.5 px-5 text-xs font-semibold" role="listitem"><span data-i18n="nav.sdm">SDM</span> <i class="fas fa-chevron-down" style="font-size:8px;"></i></a>
-        <a href="#hero"        class="nav-link h-full flex items-center gap-1.5 px-5 text-xs font-semibold" role="listitem"><span data-i18n="nav.fasilitas">FASILITAS</span> <i class="fas fa-chevron-down" style="font-size:8px;"></i></a>
-        <a href="#hero"        class="nav-link h-full flex items-center gap-1.5 px-5 text-xs font-semibold" role="listitem"><span data-i18n="nav.agenda">KARYA &amp; AGENDA</span> <i class="fas fa-chevron-down" style="font-size:8px;"></i></a>
-        <a href="#cta"         class="nav-link h-full flex items-center gap-1.5 px-5 text-xs font-semibold" role="listitem"><span data-i18n="nav.kontak">KONTAK</span> <i class="fas fa-chevron-down" style="font-size:8px;"></i></a>
-      </div>
-
-      <!-- Mobile: hamburger only -->
-      <div class="lg:hidden max-w-7xl mx-auto px-4 w-full flex items-center justify-between h-full">
-        <span class="text-primary font-bold text-sm">MENU</span>
-        <button
-          id="hamburger"
-          class="p-2 rounded-md transition-colors"
-          style="color:#003150;"
-          aria-label="Buka menu navigasi"
-          aria-expanded="false"
-          aria-controls="mobile-menu"
-        >
-          <i class="fas fa-bars text-lg"></i>
-        </button>
-      </div>
-
-      <!-- Mobile Menu -->
-      <div
-        id="mobile-menu"
-        class="hidden lg:hidden px-4 py-3 border-t border-yellow-300"
-        style="background:#feb404;"
-        role="navigation"
-        aria-label="Navigasi mobile"
-      >
-        <a href="#hero"      class="block py-2.5 text-xs font-semibold text-primary hover:text-blue-800" data-i18n="nav.tentang">TENTANG KAMI</a>
-        <a href="#directory" class="block py-2.5 text-xs font-semibold text-primary hover:text-blue-800" data-i18n="nav.program">PROGRAM</a>
-        <a href="#hero"      class="block py-2.5 text-xs font-semibold text-primary hover:text-blue-800" data-i18n="nav.sdm">SDM</a>
-        <a href="#hero"      class="block py-2.5 text-xs font-semibold text-primary hover:text-blue-800" data-i18n="nav.fasilitas">FASILITAS</a>
-        <a href="#hero"      class="block py-2.5 text-xs font-semibold text-primary hover:text-blue-800" data-i18n="nav.agenda">KARYA &amp; AGENDA</a>
-        <a href="#cta"       class="block py-2.5 text-xs font-semibold text-primary hover:text-blue-800" data-i18n="nav.kontak">KONTAK</a>
-      </div>
-    </nav>
-  </header>
-
-  <!-- Spacer untuk fixed navbar (60px top + 48px main nav = 108px) -->
-  <div style="height: 108px;" aria-hidden="true"></div>
-
-  <!-- ================================================
-       INFO TICKER — dua salinan teks untuk infinite scroll
-       ================================================ -->
-  <div class="ticker-wrapper" aria-label="Pengumuman beasiswa terbaru" role="marquee">
-    <!-- Badge block -->
-    <div class="ticker-badge-block">
-      <span class="ticker-badge" aria-hidden="true">INFO TERBARU</span>
-    </div>
-    <!-- Scroll area: inner wrapper berisi 2 copy teks, dianimasikan bersamaan -->
-    <div class="ticker-scroll-area">
-      <div class="ticker-inner" aria-live="off">
-        <span class="ticker-track">Selamat datang di antarmuka situs web Informatika terbaru! &nbsp;|&nbsp; Pendaftaran kolaborasi riset semester genap telah dibuka. &nbsp;|&nbsp; Pantau publikasi dosen dan mahasiswa secara real-time. &nbsp;|&nbsp; Beasiswa KIP Kuliah 2026 dibuka — Daftar sekarang! &nbsp;|&nbsp; Beasiswa LPDP S2 tersedia hingga September 2026. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span class="ticker-track" aria-hidden="true">Selamat datang di antarmuka situs web Informatika terbaru! &nbsp;|&nbsp; Pendaftaran kolaborasi riset semester genap telah dibuka. &nbsp;|&nbsp; Pantau publikasi dosen dan mahasiswa secara real-time. &nbsp;|&nbsp; Beasiswa KIP Kuliah 2026 dibuka — Daftar sekarang! &nbsp;|&nbsp; Beasiswa LPDP S2 tersedia hingga September 2026. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-      </div>
-    </div>
-  </div>
-
-
-  <!-- ================================================
-       HERO SECTION (#hero)
-       ================================================ -->
-  <section id="hero" class="hero-section" aria-label="Header halaman beasiswa">
-    <div class="hero-bg"></div>
-
-    <div class="hero-content max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
-      <!-- Breadcrumb -->
-      <nav class="breadcrumb" aria-label="Breadcrumb">
-        <a href="#" data-i18n="breadcrumb.home">Beranda</a>
-        <span class="sep"><i class="fas fa-chevron-right" style="font-size:7px;"></i></span>
-        <a href="#" data-i18n="breadcrumb.profile">Pendidikan</a>
-        <span class="sep"><i class="fas fa-chevron-right" style="font-size:7px;"></i></span>
-        <span class="current" data-i18n="breadcrumb.scholarship">Beasiswa</span>
-      </nav>
-
-      <div class="grid lg:grid-cols-2 gap-10 lg:gap-20 items-center">
-
-        <!-- Left: Text Content -->
-        <div data-aos="fade-right" data-aos-duration="700">
-          <!-- Badge (outline style seperti Figma) -->
-          <div class="hero-badge">
-            <span data-i18n="hero.badge">PROGRAM BEASISWA</span>
-          </div>
-
-          <!-- H1 -->
-          <h1 class="hero-title" data-i18n="hero.title">
-            Beasiswa Studi &amp;<br>Penelitian
-          </h1>
-
-          <!-- Subtitle -->
-          <p class="hero-subtitle" data-i18n="hero.subtitle">
-            Teknik Informatika Universitas Tanjungpura
-          </p>
-
-          <!-- Description (sesuai teks Figma) -->
-          <p class="hero-desc" data-i18n="hero.desc">
-            Beasiswa adalah program keuangan yang disediakan untuk membantu mahasiswa yang membutuhkan dalam menyelesaikan studi mereka. Beasiswa ini dapat diberikan berdasarkan kriteria akademik, kebutuhan finansial, atau prestasi di luar kelas.
-          </p>
-
-          <!-- CTA Button (kuning, teks gelap — sesuai Figma) -->
-          <a href="#directory" class="hero-cta" aria-label="Lihat daftar beasiswa">
-            <span data-i18n="hero.cta">Lihat Daftar Beasiswa</span>
-            <i class="fas fa-arrow-right"></i>
-          </a>
-        </div>
-
-        <!-- Right: Hero Image -->
-        <div class="hidden lg:block" data-aos="fade-left" data-aos-delay="150" data-aos-duration="700">
-          <div class="hero-image-wrap">
-            <img
-              src="assets/images/hero/mahasiswa.png"
-              alt="Mahasiswa Informatika UNTAN berprestasi"
-              width="480"
-              height="400"
-              onerror="this.src='https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=500&q=80'"
-            >
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </section>
-
-
-  <!-- ================================================
-       STATISTIK COUNTER (#statistics)
-       ================================================ -->
-  <section id="statistics" class="stats-section" aria-label="Statistik penerima beasiswa">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-3 divide-x divide-white/20">
-
-        <!-- Total Penerima -->
-        <div class="stat-item" data-aos="fade-up" data-aos-delay="0">
-          <div class="stat-number" data-counter="20" id="ctr-total">0</div>
-          <div class="stat-label" data-i18n="stats.total">
-            Total Mahasiswa Penerima<br>Beasiswa Semester Ini
-          </div>
-        </div>
-
-        <!-- Pemerintah -->
-        <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
-          <div class="stat-number" data-counter="12" id="ctr-gov">0</div>
-          <div class="stat-label" data-i18n="stats.gov">
-            Total Penerima Beasiswa<br>Pembiayaan Pemerintah
-          </div>
-        </div>
-
-        <!-- Swasta -->
-        <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
-          <div class="stat-number" data-counter="8" id="ctr-pvt">0</div>
-          <div class="stat-label" data-i18n="stats.private">
-            Total Penerima Beasiswa<br>Pembiayaan Swasta
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </section>
-
-
-  <!-- ================================================
-       DIREKTORI BEASISWA (#directory)
-       ================================================ -->
-  <section id="directory" class="py-16 bg-white" aria-label="Direktori beasiswa">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-
-      <!-- Section Header -->
-      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-10">
-        <div data-aos="fade-right">
-          <!-- Label Badge "DAFTAR LENGKAP" -->
-          <div class="section-badge mb-3">
-            <span data-i18n="dir.label">DAFTAR LENGKAP</span>
-          </div>
-          <h2 class="section-title" data-i18n="dir.title">Daftar Beasiswa</h2>
-          <p class="section-desc" data-i18n="dir.desc">
-            Universitas menawarkan berbagai program bantuan keuangan untuk mahasiswa. Program ini berdasarkan prestasi akademik, kebutuhan finansial, atau prestasi di luar akademik.
-          </p>
-        </div>
-        <div class="flex-shrink-0 mt-2" data-aos="fade-left">
-          <!-- Button "Buku Panduan Beasiswa" -->
-          <a href="#" class="btn-panduan" aria-label="Unduh Buku Panduan Beasiswa">
-            <i class="far fa-file-alt"></i>
-            <span data-i18n="dir.guide">Buku Panduan Beasiswa</span>
-          </a>
-        </div>
-      </div>
-
-      <!-- Filter & Search Row (UC-02, UC-03) -->
-      <div class="flex flex-col lg:flex-row gap-4 mb-8" data-aos="fade-up" data-aos-delay="50">
-        <!-- Filter Tabs -->
-        <div class="filter-tabs flex-1" id="filter-tabs" role="tablist" aria-label="Filter beasiswa">
-          <button class="filter-tab active" data-filter="semua"     role="tab" aria-selected="true"  data-i18n="filter.all">Semua</button>
-          <button class="filter-tab"        data-filter="Buka"      role="tab" aria-selected="false" data-i18n="filter.open">Sedang Buka</button>
-          <button class="filter-tab"        data-filter="Ditutup"   role="tab" aria-selected="false" data-i18n="filter.closed">Ditutup</button>
-          <button class="filter-tab"        data-filter="Pemerintah"role="tab" aria-selected="false" data-i18n="filter.gov">Pemerintah</button>
-          <button class="filter-tab"        data-filter="Swasta"    role="tab" aria-selected="false" data-i18n="filter.private">Swasta</button>
-        </div>
-
-        <!-- Real-Time Search & Sort -->
-        <div class="flex flex-col sm:flex-row gap-3 flex-shrink-0">
-          <div class="search-wrapper w-full sm:w-64">
-            <i class="fas fa-search search-icon" aria-hidden="true"></i>
-            <input
-              type="search"
-              id="search-input"
-              class="search-input"
-              placeholder="Cari beasiswa..."
-              data-i18n-placeholder="search.placeholder"
-              aria-label="Cari beasiswa"
-              autocomplete="off"
-            />
-          </div>
-          <!-- Sort Button (Mockup) -->
-          <button class="btn-sort" aria-label="Urutkan beasiswa">
-            <i class="fas fa-bars"></i>
-            <span data-i18n="filter.sort">Urutkan berdasarkan</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Cards Grid (rendered by filter.js) -->
-      <div
-        id="beasiswa-grid"
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-        role="list"
-        aria-label="Daftar kartu beasiswa"
-      >
-        <!-- Skeleton loading state -->
-        <div class="col-span-full flex flex-col items-center justify-center py-20 text-gray-300">
-          <i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
-          <p class="text-sm font-medium">Memuat data beasiswa...</p>
-        </div>
-      </div>
-
-      <!-- Pagination (rendered by filter.js) -->
-      <div
-        id="pagination"
-        class="pagination-container"
-        role="navigation"
-        aria-label="Navigasi halaman beasiswa"
-      ></div>
-
-    </div>
-  </section>
-
-
-  <!-- ================================================
-       POPUP MODAL DETAIL BEASISWA (UC-04, UC-05)
-       ================================================ -->
-  <div
-    id="popup-overlay"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="popup-title"
-  >
-    <!-- Backdrop (klik untuk tutup - UC-04) -->
-    <div id="popup-backdrop" class="popup-backdrop"></div>
-
-    <!-- Modal Card -->
-    <div id="popup-modal" class="popup-modal" tabindex="-1">
-      <!-- Close Button (×) -->
-      <button
-        id="popup-close"
-        class="popup-close"
-        aria-label="Tutup detail beasiswa"
-      >
-        <i class="fas fa-times"></i>
-      </button>
-
-      <!-- Content (rendered by popup.js) -->
-      <div id="popup-content"></div>
-    </div>
-  </div>
-
-
-  <!-- ================================================
-       POPUP MODAL HUBUNGI KAMI
-       ================================================ -->
-  <div
-    id="contact-overlay"
-    class="fixed inset-0 z-[2000] hidden items-center justify-center p-4 transition-opacity duration-300 opacity-0"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="contact-title"
-  >
-    <!-- Backdrop -->
-    <div id="contact-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"></div>
-
-    <!-- Modal Card -->
-    <div class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col transform transition-transform duration-300 scale-95" id="contact-modal">
-      
-      <!-- Header -->
-      <div class="bg-[#003150] px-6 py-4 flex items-center justify-between">
-        <h3 id="contact-title" class="text-white font-bold font-serif m-0 text-lg">Hubungi Kami</h3>
-        <button id="contact-close" class="text-white/70 hover:text-white transition-colors bg-transparent border-none cursor-pointer p-0" style="background: transparent; border: none; outline: none;" aria-label="Tutup">
-          <i class="fas fa-times text-xl"></i>
-        </button>
-      </div>
-
-      <!-- Body -->
-      <div class="p-8">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-          
-          <!-- Card Admin WhatsApp -->
-          <div class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(34,197,94,0.12)] transition-shadow">
-            <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500 text-2xl">
-              <i class="fab fa-whatsapp"></i>
+    <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>
-            <h4 class="font-bold text-gray-900 mb-1">Admin Beasiswa</h4>
-            <p class="text-xs text-gray-500 mb-6">Senin - Jumat | 08.00 - 15.00 WIB</p>
-            <a href="https://wa.me/628115719999" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-[#25D366] hover:bg-[#1ebd57] text-white text-sm font-semibold rounded-lg transition-colors gap-2">
-              Chat Whatsapp <i class="fas fa-arrow-right text-xs"></i>
-            </a>
-          </div>
 
-          <!-- Card Instagram -->
-          <div class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(236,72,153,0.12)] transition-shadow">
-            <div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4 text-pink-500 text-2xl">
-              <i class="fab fa-instagram"></i>
+            <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"
+                            onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                            <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>
-            <h4 class="font-bold text-gray-900 mb-1">@kemahasiswaan.untan</h4>
-            <p class="text-xs text-gray-500 mb-6">Informasi Beasiswa Terkini</p>
-            <a href="https://instagram.com/kemahasiswaan.untan" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#F56040] hover:opacity-90 text-white text-sm font-semibold rounded-lg transition-colors gap-2">
-              Buka Instagram <i class="fas fa-arrow-right text-xs"></i>
-            </a>
-          </div>
-
-        </div>
-        
-        <p class="text-center text-[10px] text-gray-400 m-0">*Pastikan WhatsApp Kamu aktif sebelum menghubungi admin.</p>
-      </div>
-    </div>
-  </div>
-
-
-  <!-- ================================================
-       TESTIMONI (#testimonial) — UC-07
-       ================================================ -->
-  <section id="testimonial" class="testimonials-section" aria-label="Testimoni penerima beasiswa">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-
-      <!-- Header -->
-      <div class="text-center mb-12" data-aos="fade-up">
-        <h2 class="section-title text-center" data-i18n="testimonial.title">Apa Kata Mereka?</h2>
-        <p class="section-desc mx-auto text-center" data-i18n="testimonial.desc">
-          Cerita nyata dari mahasiswa yang telah meraih beasiswa
-        </p>
-      </div>
-
-      <!-- Swiper Carousel -->
-      <div class="swiper testimonial-swiper" data-aos="fade-up" data-aos-delay="100">
-        <div class="swiper-wrapper pb-14" id="testimonial-wrapper">
-          <!-- Rendered by carousel.js -->
-        </div>
-        <div class="swiper-pagination testimonial-pagination"></div>
-      </div>
-
-    </div>
-  </section>
-
-
-  <!-- ================================================
-       CTA SECTION (#cta) — UC-06
-       ================================================ -->
-  <section id="cta" class="cta-section" aria-label="Hubungi admin beasiswa">
-    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="cta-card" data-aos="zoom-in" data-aos-duration="600">
-        <h2 class="cta-title" data-i18n="cta.title">
-          Ingin Mengetahui Info Lebih Lanjut?
-        </h2>
-        <p class="cta-desc" data-i18n="cta.desc">
-          Bersama kami membangun sumber daya manusia unggul melalui program beasiswa dan kolaborasi riset
-        </p>
-        <div class="cta-buttons">
-          <!-- Scroll ke direktori -->
-          <a href="#directory" class="cta-btn-primary" aria-label="Lihat daftar beasiswa">
-            <span data-i18n="cta.btn1">Daftar Beasiswa</span>
-          </a>
-          <!-- Kontak CTA -->
-          <button
-            id="btn-open-contact"
-            class="cta-btn-secondary"
-            aria-label="Hubungi admin"
-          >
-            <span data-i18n="cta.btn2">Hubungi Kami</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </section>
-
-
-  <!-- ================================================
-       FOOTER (#footer)
-       ================================================ -->
-  <footer id="footer" class="site-footer" role="contentinfo">
-    <div class="footer-top">
-      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-
-        <!-- FOLLOW US -->
-        <h3 class="footer-follow-title">FOLLOW US</h3>
-
-        <!-- Social Media Icons -->
-        <div class="social-icons">
-          <a href="#" class="social-icon" aria-label="Instagram Informatika UNTAN"><i class="fab fa-instagram"></i></a>
-          <a href="#" class="social-icon" aria-label="YouTube Informatika UNTAN"><i class="fab fa-youtube"></i></a>
-          <a href="#" class="social-icon" aria-label="Facebook Informatika UNTAN"><i class="fab fa-facebook-f"></i></a>
-          <a href="#" class="social-icon" aria-label="X (Twitter) Informatika UNTAN"><i class="fab fa-twitter"></i></a>
-          <a href="#" class="social-icon" aria-label="LinkedIn Informatika UNTAN"><i class="fab fa-linkedin-in"></i></a>
-          <a href="#" class="social-icon" aria-label="TikTok Informatika UNTAN"><i class="fab fa-tiktok"></i></a>
         </div>
 
-        <!-- Logo & Info -->
-        <div class="footer-logo">
-          <div class="w-14 h-14 flex items-center justify-center flex-shrink-0">
-            <img src="assets/images/logo/logo-untan.png" alt="Logo UNTAN" class="w-full h-full object-contain">
-          </div>
-          <div class="footer-logo-text">
-            <div class="name">INFORMATIKA</div>
-            <div class="sub">UNIVERSITAS TANJUNGPURA</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="mailto:info@informatika.untan.ac.id" 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"
+                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                    <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="mailto:info@informatika.untan.ac.id"
+                        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>
+
+    <main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
+        <div class="ticker-wrapper" aria-label="Pengumuman beasiswa terbaru" role="marquee">
+            <!-- Badge block -->
+            <div class="ticker-badge-block">
+                <span class="ticker-badge" aria-hidden="true">INFO TERBARU</span>
+            </div>
+            <!-- Scroll area: inner wrapper berisi 2 copy teks, dianimasikan bersamaan -->
+            <div class="ticker-scroll-area">
+                <div class="ticker-inner" aria-live="off">
+                    <span class="ticker-track">Selamat datang di antarmuka situs web Informatika terbaru!
+                        &nbsp;|&nbsp; Pendaftaran
+                        kolaborasi riset semester genap telah dibuka. &nbsp;|&nbsp; Pantau publikasi dosen dan
+                        mahasiswa secara
+                        real-time. &nbsp;|&nbsp; Beasiswa KIP Kuliah 2026 dibuka — Daftar sekarang!
+                        &nbsp;|&nbsp; Beasiswa LPDP S2
+                        tersedia hingga September 2026. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                    <span class="ticker-track" aria-hidden="true">Selamat datang di antarmuka situs web
+                        Informatika terbaru!
+                        &nbsp;|&nbsp; Pendaftaran kolaborasi riset semester genap telah dibuka. &nbsp;|&nbsp;
+                        Pantau publikasi dosen
+                        dan mahasiswa secara real-time. &nbsp;|&nbsp; Beasiswa KIP Kuliah 2026 dibuka — Daftar
+                        sekarang! &nbsp;|&nbsp;
+                        Beasiswa LPDP S2 tersedia hingga September 2026. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                </div>
+            </div>
         </div>
 
-        <!-- Address & Contact -->
-        <address class="footer-address not-italic">
-          <p class="address-main">
-            <i class="fas fa-map-marker-alt"></i>
-            Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,<br>Kota Pontianak, Kalimantan Barat 78124
-          </p>
-          <p class="address-contact">
-            E: info@informatika.untan.ac.id &nbsp;|&nbsp; P: +62 851-7165-5161 &nbsp;|&nbsp; F: +62(561) 739637 &nbsp;|&nbsp; WA: +62 851-7165-5161
-          </p>
-        </address>
+        <!-- ================================================
+        HERO SECTION (#hero)
+        ================================================ -->
+        <section id="hero" class="hero-section" aria-label="Header halaman beasiswa">
+            <div class="hero-bg"></div>
 
-      </div>
-    </div>
+            <div class="hero-content max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
+                <!-- Breadcrumb -->
+                <nav class="breadcrumb" aria-label="Breadcrumb">
+                    <a href="#" data-i18n="breadcrumb_home">Beranda</a>
+                    <span class="sep"><i class="fas fa-chevron-right" style="font-size:7px;"></i></span>
+                    <a href="#" data-i18n="ape_breadcrumb_profile">Pendidikan</a>
+                    <span class="sep"><i class="fas fa-chevron-right" style="font-size:7px;"></i></span>
+                    <span class="current" data-i18n="ape_breadcrumb_scholarship">Beasiswa</span>
+                </nav>
 
-    <!-- Pontianak Illustration (Dekorasi) -->
-    <div style="overflow:hidden;max-height:180px;">
-      <img
-        src="assets/images/hero/pontianak-illustration.png?v=2"
-        alt="Ilustrasi Kota Pontianak"
-        class="footer-illustration"
-        loading="lazy"
-        onerror="this.style.display='none'"
-      >
-    </div>
-  </footer>
+                <div class="grid lg:grid-cols-2 gap-10 lg:gap-20 items-center">
+
+                    <!-- Left: Text Content -->
+                    <div data-aos="fade-right" data-aos-duration="700">
+                        <!-- Badge (outline style seperti Figma) -->
+                        <div class="hero-badge">
+                            <span data-i18n="ape_hero_badge">PROGRAM BEASISWA</span>
+                        </div>
+
+                        <!-- H1 -->
+                        <h1 class="hero-title" data-i18n-html="ape_hero_title">
+                            Beasiswa Studi &amp;<br>Penelitian
+                        </h1>
+
+                        <!-- Subtitle -->
+                        <p class="hero-subtitle" data-i18n="ape_hero_subtitle">
+                            Teknik Informatika Universitas Tanjungpura
+                        </p>
+
+                        <!-- Description (sesuai teks Figma) -->
+                        <p class="hero-desc" data-i18n="ape_hero_desc">
+                            Temukan berbagai peluang beasiswa untuk mendukung perjalanan akademik dan penelitian Anda.
+                        </p>
+
+                        <!-- CTA Button (kuning, teks gelap — sesuai Figma) -->
+                        <a href="#directory" class="hero-cta" aria-label="Lihat daftar beasiswa">
+                            <span data-i18n="ape_hero_cta">Lihat Daftar Beasiswa</span>
+                            <i class="fas fa-arrow-right"></i>
+                        </a>
+                    </div>
+
+                    <!-- Right: Hero Image -->
+                    <div class="hidden lg:block" data-aos="fade-left" data-aos-delay="150"
+                        data-aos-duration="700">
+                        <div class="hero-image-wrap">
+                            <img src="assets/images/hero/mahasiswa.png"
+                                alt="Mahasiswa Informatika UNTAN berprestasi" width="480" height="400"
+                                onerror="this.src='https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=500&q=80'">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+
+        <!-- ================================================
+        STATISTIK COUNTER (#statistics)
+        ================================================ -->
+        <section id="statistics" class="stats-section" aria-label="Statistik penerima beasiswa">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid grid-cols-3 divide-x divide-white/20">
+
+                    <!-- Total Penerima -->
+                    <div class="stat-item" data-aos="fade-up" data-aos-delay="0">
+                        <div class="stat-number" data-counter="20" id="ctr-total">0</div>
+                        <div class="stat-label" data-i18n-html="ape_stats_total">
+                            Total Mahasiswa Penerima<br>Beasiswa Semester Ini
+                        </div>
+                    </div>
+
+                    <!-- Pemerintah -->
+                    <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
+                        <div class="stat-number" data-counter="12" id="ctr-gov">0</div>
+                        <div class="stat-label" data-i18n-html="ape_stats_gov">
+                            Total Penerima Beasiswa<br>Pembiayaan Pemerintah
+                        </div>
+                    </div>
+
+                    <!-- Swasta -->
+                    <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
+                        <div class="stat-number" data-counter="8" id="ctr-pvt">0</div>
+                        <div class="stat-label" data-i18n-html="ape_stats_private">
+                            Total Penerima Beasiswa<br>Pembiayaan Swasta
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+
+        <!-- ================================================
+        DIREKTORI BEASISWA (#directory)
+        ================================================ -->
+        <section id="directory" class="py-16 bg-white" aria-label="Direktori beasiswa">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+                <!-- Section Header -->
+                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-10">
+                    <div data-aos="fade-right">
+                        <!-- Label Badge "DAFTAR LENGKAP" -->
+                        <div class="section-badge mb-3">
+                            <span data-i18n="ape_dir_label">DAFTAR LENGKAP</span>
+                        </div>
+                        <h2 class="section-title" data-i18n="ape_dir_title">Daftar Beasiswa</h2>
+                        <p class="section-desc" data-i18n="ape_dir_desc">
+                            Temukan beragam beasiswa dari berbagai sumber resmi yang tersedia untuk mahasiswa aktif.
+                        </p>
+                    </div>
+                    <div class="flex-shrink-0 mt-2" data-aos="fade-left">
+                        <!-- Button "Buku Panduan Beasiswa" -->
+                        <a href="#" class="btn-panduan" aria-label="Unduh Buku Panduan Beasiswa">
+                            <i class="far fa-file-alt"></i>
+                            <span data-i18n="ape_dir_guide">Buku Panduan Beasiswa</span>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Filter & Search Row (UC-02, UC-03) -->
+                <div class="flex flex-col lg:flex-row gap-4 mb-8" data-aos="fade-up" data-aos-delay="50">
+                    <!-- Filter Tabs -->
+                    <div class="filter-tabs flex-1" id="filter-tabs" role="tablist"
+                        aria-label="Filter beasiswa">
+                        <button class="filter-tab active" data-filter="semua" role="tab" aria-selected="true"
+                            data-i18n="filter_all">Semua</button>
+                        <button class="filter-tab" data-filter="Buka" role="tab" aria-selected="false"
+                            data-i18n="ape_filter_open">Sedang Buka</button>
+                        <button class="filter-tab" data-filter="Ditutup" role="tab" aria-selected="false"
+                            data-i18n="ape_filter_closed">Ditutup</button>
+                        <button class="filter-tab" data-filter="Pemerintah" role="tab" aria-selected="false"
+                            data-i18n="ape_filter_gov">Pemerintah</button>
+                        <button class="filter-tab" data-filter="Swasta" role="tab" aria-selected="false"
+                            data-i18n="ape_filter_private">Swasta</button>
+                    </div>
+
+                    <!-- Real-Time Search -->
+                    <div class="flex flex-col sm:flex-row gap-3 flex-shrink-0">
+                        <div class="search-wrapper w-full sm:w-64">
+                            <i class="fas fa-search search-icon" aria-hidden="true"></i>
+                            <input type="search" id="search-input" class="search-input"
+                                placeholder="Cari beasiswa..." data-i18n-placeholder="ape_search_placeholder"
+                                aria-label="Cari beasiswa" autocomplete="off" />
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Cards Grid (rendered by filter.js) -->
+                <div id="beasiswa-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" role="list"
+                    aria-label="Daftar kartu beasiswa">
+                    <!-- Skeleton loading state -->
+                    <div class="col-span-full flex flex-col items-center justify-center py-20 text-gray-300">
+                        <i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
+                        <p class="text-sm font-medium">Memuat data beasiswa...</p>
+                    </div>
+                </div>
+
+                <!-- Pagination (rendered by filter.js) -->
+                <div id="pagination" class="pagination-container" role="navigation"
+                    aria-label="Navigasi halaman beasiswa"></div>
+
+            </div>
+        </section>
+
+        <!-- ================================================
+        POPUP MODAL DETAIL BEASISWA (UC-04, UC-05)
+        ================================================ -->
+        <div id="popup-overlay" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+            <!-- Backdrop (klik untuk tutup - UC-04) -->
+            <div id="popup-backdrop" class="popup-backdrop"></div>
+
+            <!-- Modal Card -->
+            <div id="popup-modal" class="popup-modal" tabindex="-1">
+                <!-- Close Button (×) -->
+                <button id="popup-close" class="popup-close" aria-label="Tutup detail beasiswa">
+                    <i class="fas fa-times"></i>
+                </button>
+
+                <!-- Content (rendered by popup.js) -->
+                <div id="popup-content"></div>
+            </div>
+        </div>
+
+        <!-- ================================================
+        POPUP MODAL HUBUNGI KAMI
+        ================================================ -->
+        <div id="contact-overlay"
+            class="fixed inset-0 z-[2000] hidden items-center justify-center p-4 transition-opacity duration-300 opacity-0"
+            role="dialog" aria-modal="true" aria-labelledby="contact-title">
+            <!-- Backdrop -->
+            <div id="contact-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer">
+            </div>
+
+            <!-- Modal Card -->
+            <div class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col transform transition-transform duration-300 scale-95"
+                id="contact-modal">
+
+                <!-- Header -->
+                <div class="bg-[#003150] px-6 py-4 flex items-center justify-between">
+                    <h3 id="contact-title" class="text-white font-bold font-serif m-0 text-lg">Hubungi Kami</h3>
+                    <button id="contact-close"
+                        class="text-white/70 hover:text-white transition-colors bg-transparent border-none cursor-pointer p-0"
+                        style="background: transparent; border: none; outline: none;" aria-label="Tutup">
+                        <i class="fas fa-times text-xl"></i>
+                    </button>
+                </div>
+
+                <!-- Body -->
+                <div class="p-8">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+
+                        <!-- Card Admin WhatsApp -->
+                        <div
+                            class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(34,197,94,0.12)] transition-shadow">
+                            <div
+                                class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500 text-2xl">
+                                <i class="fab fa-whatsapp"></i>
+                            </div>
+                            <h4 class="font-bold text-gray-900 mb-1">Admin Beasiswa</h4>
+                            <p class="text-xs text-gray-500 mb-6">Senin - Jumat | 08.00 - 15.00 WIB</p>
+                            <a href="https://wa.me/628115719999" target="_blank" rel="noopener noreferrer"
+                                class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-[#25D366] hover:bg-[#1ebd57] text-white text-sm font-semibold rounded-lg transition-colors gap-2">
+                                Chat Whatsapp <i class="fas fa-arrow-right text-xs"></i>
+                            </a>
+                        </div>
+
+                        <!-- Card Instagram -->
+                        <div
+                            class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(236,72,153,0.12)] transition-shadow">
+                            <div
+                                class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4 text-pink-500 text-2xl">
+                                <i class="fab fa-instagram"></i>
+                            </div>
+                            <h4 class="font-bold text-gray-900 mb-1">@kemahasiswaan.untan</h4>
+                            <p class="text-xs text-gray-500 mb-6">Informasi Beasiswa Terkini</p>
+                            <a href="https://instagram.com/kemahasiswaan.untan" target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#F56040] hover:opacity-90 text-white text-sm font-semibold rounded-lg transition-colors gap-2">
+                                Buka Instagram <i class="fas fa-arrow-right text-xs"></i>
+                            </a>
+                        </div>
+
+                    </div>
+
+                    <p class="text-center text-[10px] text-gray-400 m-0">*Pastikan WhatsApp Kamu aktif sebelum
+                        menghubungi admin.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- ================================================
+        TESTIMONI (#testimonial) — UC-07
+        ================================================ -->
+        <section id="testimonial" class="testimonials-section" aria-label="Testimoni penerima beasiswa">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+                <!-- Header -->
+                <div class="text-center mb-12" data-aos="fade-up">
+                    <h2 class="section-title text-center" data-i18n="ape_testimonial_title">Apa Kata Mereka?</h2>
+                    <p class="section-desc mx-auto text-center" data-i18n="ape_testimonial_desc">
+                        Cerita nyata dari mahasiswa yang telah meraih beasiswa
+                    </p>
+                </div>
+
+                <!-- Swiper Carousel -->
+                <div class="swiper testimonial-swiper" data-aos="fade-up" data-aos-delay="100">
+                    <div class="swiper-wrapper pb-14" id="testimonial-wrapper">
+                        <!-- Rendered by carousel.js -->
+                    </div>
+                    <div class="swiper-pagination testimonial-pagination"></div>
+                </div>
+
+            </div>
+        </section>
+
+        <!-- ================================================
+        CTA SECTION (#cta) — UC-06
+        ================================================ -->
+        <section id="cta" class="cta-section" aria-label="Hubungi admin beasiswa">
+            <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="cta-card" data-aos="zoom-in" data-aos-duration="600">
+                    <h2 class="cta-title" data-i18n="ape_cta_title">
+                        Ingin Mengetahui Info Lebih Lanjut?
+                    </h2>
+                    <p class="cta-desc" data-i18n="ape_cta_desc">
+                        Bersama kami membangun sumber daya manusia unggul melalui program beasiswa dan
+                        kolaborasi riset
+                    </p>
+                    <div class="cta-buttons">
+                        <!-- Scroll ke direktori -->
+                        <a href="#directory" class="cta-btn-primary" aria-label="Lihat daftar beasiswa">
+                            <span data-i18n="ape_cta_btn1">Daftar Beasiswa</span>
+                        </a>
+                        <!-- Kontak CTA -->
+                        <button id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin">
+                            <span data-i18n="ape_cta_btn2">Hubungi Kami</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <div class="container mx-auto px-4 lg:px-8 py-12">
+            <div id="assignment-body" class="prose prose-slate max-w-none">
+                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+                
+
+                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
+        <div class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center">
+
+            <h3 class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4" data-i18n="footer_follow_us">
+                Ikuti Kami</h3>
+            <div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-instagram text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-youtube text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-facebook-f text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-twitter text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-linkedin-in text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-tiktok text-xl sm:text-2xl"></i></a>
+            </div>
+
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left">
+                <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+                    class="h-16 sm:h-20 shrink-0" alt="Logo UNTAN">
+                <div
+                    class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight">
+                    <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1">INFORMATIKA</h2>
+                    <h2 class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5">
+                        UNIVERSITAS TANJUNGPURA</h2>
+                </div>
+            </div>
+
+            <div class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light">
+                <p class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1">
+                    <i class="fas fa-map-marker-alt text-untan-yellow"></i>
+                    Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,
+                </p>
+                <p>Kota Pontianak, Kalimantan Barat 78124</p>
+            </div>
+
+            <div
+                class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide">
+                <span>E: info@informatika.untan.ac.id</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>P: +62 851-7165-5161</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>F: +62(561) 739637</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>WA: +62 851-7165-5161</span>
+            </div>
+
+        </div>
+
+        <div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
+            <img src="../../assets/global/footer.png" alt="Footer Illustration"
+                class="w-full h-auto object-cover object-bottom" style="object-position: bottom;">
+        </div>
+    </footer>
+
+    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
 
-  <!-- ================================================
-       BACK TO TOP BUTTON
-       ================================================ -->
-  <button
-    id="back-to-top"
-    class="fixed bottom-6 right-6 z-50 w-11 h-11 rounded-full bg-primary text-white shadow-lg flex items-center justify-center transition-all duration-300 opacity-0 pointer-events-none hover:bg-blue-800 hover:-translate-y-1"
-    aria-label="Kembali ke atas"
-  >
-    <i class="fas fa-chevron-up text-sm"></i>
-  </button>
+    <script src="assets/js/counter.js"></script>
+    <script src="assets/js/API.js"></script>
+    <script src="assets/js/popup.js"></script>
+    <script src="assets/js/filter.js"></script>
+    <script src="assets/js/carousel.js"></script>
+    <script src="assets/js/main.js"></script>
 
+    <script>
+        (function () {
+            const menuItems = document.querySelectorAll('[data-menu]');
+            const megaOverlay = document.getElementById('mega-overlay');
 
-  <!-- ================================================
-       SCRIPTS — urutan: libraries → modules → main
-       ================================================ -->
+            let activeMenu = null;
 
-  <!-- AOS.js -->
-  <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
+            const menuMap = {
+                tentang: 'mega-tentang',
+                program: 'mega-program',
+                sdm: 'mega-sdm',
+                fasilitas: 'mega-fasilitas',
+                karya: 'mega-karya',
+                kontak: 'mega-kontak'
+            };
 
-  <!-- Swiper.js -->
-  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+            function setButtonState(menuId) {
+                menuItems.forEach(item => {
+                    const isActive = item.getAttribute('data-menu') === menuId;
+                    const btn = item.querySelector('.nav-menu-btn');
+                    const chevron = item.querySelector('.fa-chevron-down');
 
-  <!-- App Modules (order matters) -->
-  <script src="assets/js/i18n.js"></script>
-  <script src="assets/js/counter.js"></script>
-  <script src="assets/js/popup.js"></script>
-  <script src="assets/js/filter.js"></script>
-  <script src="assets/js/carousel.js"></script>
-  <script src="assets/js/main.js"></script>
+                    btn.classList.toggle('active', isActive);
+                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
+                });
+            }
 
+            function closeMenus() {
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
+
+                megaOverlay.classList.remove('active');
+                setButtonState(null);
+                activeMenu = null;
+            }
+
+            function openMenu(menuId) {
+                const targetPanel = document.getElementById(menuMap[menuId]);
+                if (!targetPanel) return;
+
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
+
+                targetPanel.classList.add('active');
+                megaOverlay.classList.add('active');
+                setButtonState(menuId);
+                activeMenu = menuId;
+            }
+
+            menuItems.forEach(item => {
+                const menuId = item.getAttribute('data-menu');
+                const button = item.querySelector('.nav-menu-btn');
+
+                button.setAttribute('aria-haspopup', 'true');
+                button.setAttribute('aria-expanded', 'false');
+
+                button.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (activeMenu === menuId) {
+                        closeMenus();
+                    } else {
+                        openMenu(menuId);
+                    }
+                });
+            });
+
+            megaOverlay.addEventListener('click', closeMenus);
+
+            document.addEventListener('click', (e) => {
+                const clickedInsideNav = e.target.closest('#main-nav');
+                const clickedInsidePanel = e.target.closest('.mega-panel');
+
+                if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
+                    closeMenus();
+                }
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && activeMenu) {
+                    closeMenus();
+                }
+            });
+        })();
+    </script>
+
+    <script>
+        (function () {
+            const mobileBtn = document.getElementById('mobile-menu-button');
+            const mobileMenu = document.getElementById('mobile-menu');
+            const closeMobileBtn = document.getElementById('close-mobile-menu');
+            if (mobileBtn && mobileMenu) {
+                mobileBtn.addEventListener('click', function () {
+                    const isOpen = !mobileMenu.classList.contains('-translate-x-full');
+                    mobileMenu.classList.toggle('-translate-x-full');
+                    mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+                });
+            }
+            if (closeMobileBtn && mobileMenu) {
+                closeMobileBtn.addEventListener('click', function () {
+                    mobileMenu.classList.add('-translate-x-full');
+                    if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
+                });
+            }
+        })();
+    </script>
+
+    <script src="../../assets/global/localization.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/groups/ApeNameTeamE/page1.json b/groups/ApeNameTeamE/page1.json
index 07c302a..3970938 100644
--- a/groups/ApeNameTeamE/page1.json
+++ b/groups/ApeNameTeamE/page1.json
@@ -178,6 +178,9 @@
       "deadline": "2026-09-25",
       "status": "Pendaftaran dibuka",
       "url": "https://www.schoters.com/id/beasiswa/deakin-university-vice-chancellor-s-international-scholarship-10"
+    },
+    {
+      
     }
   ],
   "pagination": {
diff --git a/package-lock.json b/package-lock.json
index a16578c..451b48d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -886,9 +886,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
       "dev": true,
       "funding": [
         {
@@ -917,7 +917,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -926,9 +925,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.8",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
-      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "dev": true,
       "funding": [
         {
@@ -946,7 +945,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },