diff --git a/README.md b/README.md
index 50cdb3e..c8edaee 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,16 @@ Buka URL dari Vite (default: `http://localhost:5173`) lalu akses launcher di `/`
 | `npm run build` | Build static output ke folder `dist` |
 | `npm run preview` | Preview hasil build |
 
+## Deploy Netlify
+
+Project ini sudah punya konfigurasi Netlify di `netlify.toml`.
+
+Saat membuat site di Netlify:
+- Repository: `GuavaPopper/PPL_Staging`
+- Branch deploy: `Staging`
+- Build command: `npm run build`
+- Publish directory: `dist`
+
 ## Struktur Folder
 
 ```
diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index a781215..ec40fee 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1,1338 +1,2017 @@
-﻿<!DOCTYPE html>
+﻿<!doctype html>
 <html lang="id" class="scroll-smooth">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Group 06 &ndash; ACAAB | Informatika UNTAN</title>
-    <link rel="stylesheet" href="../../assets/global/output.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">
-        <style>
-        /* ===== MOBILE NAV STABILITY FIX =====
+    <link rel="stylesheet" href="../../assets/global/output.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"
+    />
+    <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;
+      #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;
+      }
+
+      #nav-wrapper > div:first-child {
+        transform: translateZ(0);
+        -webkit-transform: translateZ(0);
+      }
+
+      @media (max-width: 1023px) {
+        #nav-wrapper > div:first-child {
+          min-height: 0 !important;
+          max-height: none;
+        }
+      }
+
+      #pengumuman-bar {
+        z-index: 40;
+      }
+
+      #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;
         }
 
-        #nav-wrapper>div:first-child {
-            transform: translateZ(0);
-            -webkit-transform: translateZ(0);
+        to {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          transform: translateY(10px);
+          opacity: 0;
         }
 
-        @media (max-width: 1023px) {
-            #nav-wrapper>div:first-child {
-                min-height: 0 !important;
-                max-height: none;
-            }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      @keyframes lucoPulse {
+        0%,
+        100% {
+          transform: scale(1);
         }
 
-        #pengumuman-bar {
-            z-index: 40;
+        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);
         }
 
-        #pengumuman-bar.is-stuck {
-            position: fixed;
-            left: 0;
-            right: 0;
-            z-index: 40;
+        40% {
+          transform: translateY(-6px);
         }
+      }
 
-        @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;
-        }
+      /* 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="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
+  </head>
+  <body
+    class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black"
+  >
+    <a href="#main-content" class="skip-link" data-i18n="skip_to_content"
+      >Langsung ke Konten Utama</a
+    >
 
-    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
+    <div
+      id="nav-wrapper"
+      class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto"
+    >
+      <div
+        class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden"
+        style="min-height: 0"
+      >
+        <div
+          class="absolute inset-0 w-full overflow-hidden pointer-events-none"
+          aria-hidden="true"
+        >
+          <div
+            class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
+            style="overflow: hidden; max-height: 100%"
+          >
+            01101001 01101110 01100110 01101111 01110010 01101101 01100001
+            01110100 01101001 01101011 01100001 00100000 01110101 01101110
+            01110100 01100001 01101110 00100000 01100010 01101001 01110011
+            01100001 01101001 01101110 01100110 01101111 01110010 01101101
+            01100001 01110100 01101001 01101011 01100001 00100000 01110101
+            01101110 01110100 01100001 01101110 00100000 01100010 01101001
+            01110011 01100001 01010101 01001110 01010100 01000001 01001110
+            00100000 00110010 00110000 00110010 00110101 00100000 01100110
+            01110101 01110100 01110101 01110010 01100101 00100000 01110010
+            01100101 01100001 01100100 01111001 01101001 01101110 01100110
+            01101111 01110010 01101101 01100001 01110100 01101001 01101011
+            01100001 00100000 01110101 01101110
+          </div>
+          <div
+            class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"
+          ></div>
+        </div>
 
-    <div 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
+          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>
+      </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>
 
-            <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">
+            <!-- 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 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>
+                      <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>
-
-                <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>
+                <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>
 
-        <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>
+      <!-- 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
+      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>
-        <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>
+        <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>
+        <!-- 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="container mx-auto px-4 lg:px-8 py-12">
-            <div class="mb-8 pb-8 border-b border-slate-200">
-                <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Sorotan dan Prestasi Karya Mahasiswa</h1>
-                <p class="text-slate-500 text-sm">Kelompok 06 &mdash; ACAAB &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
-            </div>
-            <div id="assignment-body" class="prose prose-slate max-w-none">
-                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
-                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-            </div>
+    <main
+      id="main-content"
+      class="pt-[88px] lg:pt-[160px] min-h-screen bg-white"
+    >
+      <div class="container mx-auto px-4 lg:px-8 py-12">
+        <div class="mb-8 pb-8 border-b border-slate-200">
+          <span
+            class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3"
+            >Tugas Halaman Statis</span
+          >
+          <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">
+            Sorotan dan Prestasi Karya Mahasiswa
+          </h1>
+          <p class="text-slate-500 text-sm">
+            Kelompok 06 &mdash; ACAAB &nbsp;&middot;&nbsp; Informatika UNTAN
+            2026
+          </p>
         </div>
+        <div id="assignment-body" class="prose prose-slate max-w-none">
+          <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+          <p>Tulis konten halaman kelompok di sini.</p>
+          <h3>Subjudul</h3>
+          <p>
+            Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.
+          </p>
+          <!-- ================= 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>
-
+    <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="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
+          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>
-        (function () {
-            const menuItems = document.querySelectorAll('[data-menu]');
-            const megaOverlay = document.getElementById('mega-overlay');
+      (function () {
+        const menuItems = document.querySelectorAll("[data-menu]");
+        const megaOverlay = document.getElementById("mega-overlay");
 
-            let activeMenu = null;
+        let activeMenu = null;
 
-            const menuMap = {
-                tentang: 'mega-tentang',
-                program: 'mega-program',
-                sdm: 'mega-sdm',
-                fasilitas: 'mega-fasilitas',
-                karya: 'mega-karya',
-                kontak: 'mega-kontak'
-            };
+        const menuMap = {
+          tentang: "mega-tentang",
+          program: "mega-program",
+          sdm: "mega-sdm",
+          fasilitas: "mega-fasilitas",
+          karya: "mega-karya",
+          kontak: "mega-kontak",
+        };
 
-            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');
+        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");
 
-                    btn.classList.toggle('active', isActive);
-                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
-                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
-                });
+            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);
             }
+          });
+        });
 
-            function closeMenus() {
-                Object.values(menuMap).forEach(panelId => {
-                    const panel = document.getElementById(panelId);
-                    if (panel) panel.classList.remove('active');
-                });
+        megaOverlay.addEventListener("click", closeMenus);
 
-                megaOverlay.classList.remove('active');
-                setButtonState(null);
-                activeMenu = null;
-            }
+        document.addEventListener("click", (e) => {
+          const clickedInsideNav = e.target.closest("#main-nav");
+          const clickedInsidePanel = e.target.closest(".mega-panel");
 
-            function openMenu(menuId) {
-                const targetPanel = document.getElementById(menuMap[menuId]);
-                if (!targetPanel) return;
+          if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
+            closeMenus();
+          }
+        });
 
-                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();
-                }
-            });
-        })();
+        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');
+    <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');
-            });
+          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');
-            });
+          closeMobileBtn.addEventListener("click", function () {
+            mobileMenu.classList.add("-translate-x-full");
+            if (mobileBtn) mobileBtn.setAttribute("aria-expanded", "false");
+          });
         }
-    })();
-</script>
+      })();
+    </script>
 
-<script src="../../assets/global/localization.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <script src="../../assets/global/localization.js"></script>
+  </body>
+</html>
diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index ba679c8..b3e8519 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id">
 
 <head>
@@ -74,6 +74,8 @@
     </script>
     <script>
         window.APP_CONFIG = window.APP_CONFIG || {
+            debugLogs: false,
+            dashboardRuntimeFetch: 'local',
             dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
             dashboardProxyTemplates: [
                 'https://api.allorigins.win/get?url={{url}}&ts={{ts}}',
@@ -82,6 +84,7 @@
             ]
         };
     </script>
+    <!-- RODA_DASHBOARD_DATA -->
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -130,9 +133,8 @@
                             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 id="lang-toggle-btn"
-                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
-                            onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')">
+                        <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
@@ -436,10 +438,9 @@
         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 id="lang-toggle-mobile"
+                <span class="font-bold text-lg text-white font-sans">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"
-                    onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')"
                     aria-label="Ganti bahasa">
                     <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
                 </button>
@@ -462,7 +463,7 @@
 
             <!-- Tentang Kami -->
             <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" 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"
@@ -478,7 +479,7 @@
 
             <!-- Program -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     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"
@@ -498,7 +499,7 @@
 
             <!-- 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>
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" 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"
@@ -516,7 +517,7 @@
 
             <!-- Fasilitas -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     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"
@@ -532,7 +533,7 @@
 
             <!-- 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 &
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" 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"
@@ -549,7 +550,7 @@
 
             <!-- Kontak -->
             <div class="pt-2 border-t border-slate-200 pb-8">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     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"
@@ -611,7 +612,7 @@
                         topik riset spesifik, dipimpin dosen berpengalaman, dan terbuka untuk kolaborasi.</p>
                 </div>
 
-                <div id="kbk-card-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
+                <div id="kbk-card-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
                     <!-- AI Card -->
                     <article data-kbk-card="ai"
                         class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
@@ -928,7 +929,7 @@
                     </div>
                 </div>
 
-                <div id="riset-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
+                <div id="riset-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
                     <!-- Cards generated by JS -->
                 </div>
 
@@ -955,7 +956,7 @@
                         ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.</p>
                 </div>
 
-                <div id="dosen-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
+                <div id="dosen-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
                     <!-- Cards generated by JS -->
                 </div>
             </div>
@@ -1325,7 +1326,7 @@
             }
         };
 
-        const translations = {
+        const rodaTranslations = {
             id: {
                 info: 'INFO TERBARU',
                 tickerItem1: 'Selamat datang di antarmuka situs web Informatika terbaru!',
@@ -1446,7 +1447,7 @@
             }
         };
 
-        let currentLang = 'id';
+
         let currentFilter = 'all';
         let currentQuery = '';
         let currentKbkInsight = 'ai';
@@ -1471,6 +1472,7 @@
         }
 
         function logAppError(scope, error, extra = {}) {
+            if (window.APP_CONFIG?.debugLogs !== true) return;
             console.error(`[${scope}]`, error, extra);
         }
 
@@ -1481,6 +1483,8 @@
             if (error.message === 'INVALID_RESPONSE') return 'Respons dari proxy tidak valid dan tidak bisa diproses.';
             if (error.message === 'EMPTY_RESPONSE') return 'Dashboard mengembalikan data kosong atau struktur halaman berubah.';
             if (error.message === 'NO_ROWS_FOUND') return 'Data penelitian tidak ditemukan pada halaman dashboard.';
+            if (error.message === 'DASHBOARD_PROXY_NOT_CONFIGURED') return 'Proxy dashboard belum dikonfigurasi.';
+            if (error.message === 'DASHBOARD_RUNTIME_FETCH_DISABLED') return 'Data publikasi belum tersedia pada build ini.';
             if (error.message?.startsWith('HTTP_ERROR_')) return `Proxy merespons gagal (${error.message.replace('HTTP_ERROR_', 'HTTP ')}).`;
             return 'Gagal mengambil data. Server dashboard mungkin sedang sibuk atau memblokir akses.';
         }
@@ -1541,6 +1545,80 @@
             return rows;
         }
 
+        function shouldUseLocalDashboardProxy() {
+            const hostname = window.location.hostname;
+            return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '';
+        }
+
+        function isDashboardRuntimeFetchAllowed() {
+            const mode = window.APP_CONFIG?.dashboardRuntimeFetch;
+            return mode === true || mode === 'always' || (mode === 'local' && shouldUseLocalDashboardProxy());
+        }
+
+        function readEmbeddedDashboardHtml() {
+            const source = document.getElementById('roda-dashboard-html');
+            if (!source) return '';
+
+            try {
+                return JSON.parse(source.textContent || '""') || '';
+            } catch (error) {
+                return source.textContent || '';
+            }
+        }
+
+        function applyDashboardRows(rows) {
+            const newData = [];
+            rows.forEach((row) => {
+                const cols = row.querySelectorAll('td');
+                if (cols.length >= 3) {
+                    const indexVal = cols[0].innerText.trim();
+
+                    // Mencari elemen judul (biasanya di dalam <a> atau <b>)
+                    const linkEl = cols[1].querySelector('a');
+                    const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
+                    const url = linkEl ? linkEl.getAttribute('href') : '#';
+                    const title = titleEl.innerText.trim();
+
+                    // Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
+                    if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
+                        return;
+                    }
+
+                    // Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
+                    const authorsEl = cols[1].querySelector('font');
+                    const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
+
+                    // Tahun biasanya ada di kolom berikutnya
+                    const year = cols[2]?.innerText.trim() || '2025';
+
+                    const kbk = categorizeByKeywords(title);
+                    const kbkInfo = kbkMeta[kbk];
+
+                    newData.push({
+                        id: parseInt(indexVal) || (newData.length + 1),
+                        kbk: kbk,
+                        title_id: title,
+                        title_en: title,
+                        authors: authors,
+                        year: year,
+                        url: url,
+                        venue: 'Dashboard Informatika',
+                        badge_id: kbkInfo.label_id,
+                        badge_en: kbkInfo.label_en
+                    });
+                }
+            });
+
+            if (!newData.length) {
+                throw new Error('NO_ROWS_FOUND');
+            }
+
+            risetData = newData;
+            isLoadingData = false;
+            renderRisetCards();
+            updateStatPub(newData.length);
+        }
+
         async function fetchDashboardData() {
             const grid = document.getElementById('riset-grid');
             if (grid) {
@@ -1552,15 +1630,31 @@
                 `;
             }
 
+            let lastError = null;
+            const embeddedHtml = readEmbeddedDashboardHtml();
+            if (embeddedHtml) {
+                try {
+                    applyDashboardRows(parseDashboardRows(embeddedHtml));
+                    return;
+                } catch (error) {
+                    lastError = error;
+                }
+            }
+
+            if (!isDashboardRuntimeFetchAllowed()) {
+                renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError || new Error('DASHBOARD_RUNTIME_FETCH_DISABLED')), 'Coba Lagi', 'fetchDashboardData()');
+                return;
+            }
+
             const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
             const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
                 ? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
                 : [];
 
-            // Sumber utama: endpoint proxy lokal (server.js fetch server-side, tanpa CORS).
-            const proxyServers = [() => '/api/dashboard'];
+            // Endpoint server.js hanya ada saat development lokal.
+            const proxyServers = shouldUseLocalDashboardProxy() ? [() => '/api/dashboard'] : [];
 
-            // Fallback: proxy publik (butuh targetUrl untuk membangun URL).
+            // Deployment static memakai proxy publik karena tidak menjalankan server.js.
             if (targetUrl) {
                 proxyTemplates.forEach((template) => {
                     proxyServers.push((url) => template
@@ -1570,7 +1664,10 @@
                 });
             }
 
-            let lastError = null;
+            if (!proxyServers.length) {
+                renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(new Error('DASHBOARD_PROXY_NOT_CONFIGURED')), 'Coba Lagi', 'fetchDashboardData()');
+                return;
+            }
 
             for (const getProxyUrl of proxyServers) {
                 const controller = new AbortController();
@@ -1578,7 +1675,6 @@
 
                 try {
                     const proxyUrl = getProxyUrl(targetUrl);
-                    console.log(`Trying proxy: ${proxyUrl}`);
 
                     const response = await fetch(proxyUrl, { signal: controller.signal });
                     clearTimeout(timeoutId);
@@ -1588,101 +1684,21 @@
                     const responseData = await response.text();
                     const html = extractDashboardHtml(responseData);
                     const rows = parseDashboardRows(html);
-
-                    const newData = [];
-                    rows.forEach((row, index) => {
-                        const cols = row.querySelectorAll('td');
-                        if (cols.length >= 3) {
-                            const indexVal = cols[0].innerText.trim();
-
-                            // Mencari elemen judul (biasanya di dalam <a> atau <b>)
-                            const linkEl = cols[1].querySelector('a');
-                            const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
-                            const url = linkEl ? linkEl.getAttribute('href') : '#';
-                            const title = titleEl.innerText.trim();
-
-                            // Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
-                            if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
-                                return;
-                            }
-
-                            // Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
-                            const authorsEl = cols[1].querySelector('font');
-                            const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
-
-                            // Tahun biasanya ada di kolom berikutnya
-                            const year = cols[2]?.innerText.trim() || '2025';
-
-                            const kbk = categorizeByKeywords(title);
-                            const kbkInfo = kbkMeta[kbk];
-
-                            newData.push({
-                                id: parseInt(indexVal) || (newData.length + 1),
-                                kbk: kbk,
-                                title_id: title,
-                                title_en: title,
-                                authors: authors,
-                                year: year,
-                                url: url,
-                                venue: 'Dashboard Informatika',
-                                badge_id: kbkInfo.label_id,
-                                badge_en: kbkInfo.label_en
-                            });
-                        }
-                    });
-
-                    if (newData.length > 0) {
-                        risetData = newData;
-                        isLoadingData = false;
-                        renderRisetCards();
-                        updateStatPub(newData.length);
-                        return; // Berhasil! Keluar dari loop
-                    }
-
-                    throw new Error('NO_ROWS_FOUND');
+                    applyDashboardRows(rows);
+                    return; // Berhasil! Keluar dari loop
                 } catch (error) {
                     clearTimeout(timeoutId);
-                    logAppError('dashboard-proxy', error, { targetUrl });
                     lastError = error;
                     // Lanjut ke proxy berikutnya...
                 }
             }
 
             // Jika semua proxy gagal
-            logAppError('fetchDashboardData', lastError);
             renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError), 'Coba Lagi', 'fetchDashboardData()');
         }
 
 
-        function updateLangButton() {
-            const desktopButton = document.getElementById('lang-toggle-btn');
-            if (desktopButton) {
-                desktopButton.innerHTML = currentLang === 'id'
-                    ? '<span class="font-bold text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-normal text-white">EN</span>'
-                    : '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
-            }
-
-            const mobileButton = document.getElementById('lang-toggle-mobile');
-            if (mobileButton) {
-                mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
-            }
-        }
-
-        function applyTranslation(lang) {
-            document.querySelectorAll('[data-i18n]').forEach((element) => {
-                const key = element.getAttribute('data-i18n');
-                if (translations[lang][key]) {
-                    element.innerText = translations[lang][key];
-                }
-            });
-
-            document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
-                const key = element.getAttribute('data-i18n-placeholder');
-                if (translations[lang][key]) {
-                    element.setAttribute('placeholder', translations[lang][key]);
-                }
-            });
-        }
+        // Global localization.js handles translations and language toggle
 
         function matchesQuery(item, query) {
             const haystack = [item.title_id, item.title_en, item.authors, item.venue, item.year].join(' ').toLowerCase();
@@ -1728,9 +1744,9 @@
                 }
 
                 grid.innerHTML = itemsToShow.map((item) => `
-                    <a href="${item.url}" target="_blank" class="bg-white rounded-3xl p-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
+                    <a href="${item.url}" target="_blank" class="bg-white rounded-3xl p-6 sm:p-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
                         <div class="mb-6">
-                            <span class="bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
+                            <span class="inline-block max-w-full bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider leading-tight text-center border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
                         </div>
                         <h3 class="text-lg font-bold text-untan-navy mb-4 leading-snug line-clamp-3 group-hover:text-untan-blue transition-colors">${currentLang === 'id' ? item.title_id : item.title_en}</h3>
                         <p class="text-gray-500 text-xs mb-1 italic">${item.authors}</p>
@@ -1785,7 +1801,7 @@
                                 <span class="inline-flex flex-col gap-0.5 text-[8px] sm:text-[8px] md:text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400">
                                     ${rank.split(' ').join('<br>')}
                                 </span>
-                                <span class="inline-flex items-center gap-2 text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors whitespace-nowrap">
+                                <span class="inline-flex items-center justify-end gap-2 text-right text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors">
                                     ${translations[currentLang].viewMembers}
                                     <i class="fa-solid fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                                 </span>
@@ -1922,19 +1938,17 @@
             revealElements.forEach((element) => observer.observe(element));
         }
 
-        window.setLanguage = function (lang) {
-            currentLang = lang;
-            updateLangButton();
-            applyTranslation(lang);
+        document.addEventListener('languageChanged', (e) => {
+            currentLang = e.detail.lang;
             renderKbkInsight();
             renderRisetCards();
             renderDosenCards();
 
             const lastUpdatedEl = document.getElementById("last-updated");
             if (lastUpdatedEl) {
-                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(lang === 'id' ? 'id-ID' : 'en-US');
+                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(currentLang === 'id' ? 'id-ID' : 'en-US');
             }
-        };
+        });
 
         window.addEventListener('error', (event) => {
             logAppError('window-error', event.error || new Error(event.message));
@@ -2004,12 +2018,20 @@
                 });
 
                 setupRevealAnimations();
-                setLanguage(currentLang);
+                if (typeof translations !== 'undefined') {
+                    Object.assign(translations.id, rodaTranslations.id);
+                    Object.assign(translations.en, rodaTranslations.en);
+                    if (typeof applyLang === 'function') applyLang();
+                } else {
+                    currentLang = 'id';
+                    renderKbkInsight();
+                    renderRisetCards();
+                    renderDosenCards();
+                }
                 openKbkInsight(currentKbkInsight, false);
                 filterRiset(currentFilter);
                 searchRiset('');
                 fetchDashboardData().catch((error) => {
-                    logAppError('DOMContentLoaded.fetchDashboardData', error);
                     renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(error), 'Coba Lagi', 'fetchDashboardData()');
                 });
             } catch (error) {
@@ -2133,6 +2155,57 @@
             }
         })();
     </script>
+
+    <script>
+        (function () {
+            const stats = [
+                { id: 'stat-pub',    target: 400, suffix: '+', decimals: 0 },
+                { id: 'stat-sinta',  target: 7555, suffix: '',  decimals: 0, format: 'dot-thousands' },
+                { id: 'stat-dosen',  target: 33,  suffix: '',  decimals: 0 },
+                { id: 'stat-collab', target: 10,  suffix: '+', decimals: 0 },
+                { id: 'stat-mhs',    target: 518, suffix: '',  decimals: 0 },
+            ];
+
+            function easeOutQuart(t) {
+                return 1 - Math.pow(1 - t, 4);
+            }
+
+            function formatValue(value, fmt) {
+                if (fmt === 'dot-thousands') {
+                    return Math.floor(value).toLocaleString('id-ID');
+                }
+                return Math.floor(value).toString();
+            }
+
+            function animateStat(el, target, suffix, fmt, duration) {
+                const start = performance.now();
+                function step(now) {
+                    const elapsed = now - start;
+                    const progress = Math.min(elapsed / duration, 1);
+                    const current = easeOutQuart(progress) * target;
+                    el.textContent = formatValue(current, fmt) + suffix;
+                    if (progress < 1) requestAnimationFrame(step);
+                }
+                requestAnimationFrame(step);
+            }
+
+            const observer = new IntersectionObserver(function (entries) {
+                entries.forEach(function (entry) {
+                    if (!entry.isIntersecting) return;
+                    observer.unobserve(entry.target);
+                    stats.forEach(function (s) {
+                        const el = document.getElementById(s.id);
+                        if (el) animateStat(el, s.target, s.suffix, s.format, 1800);
+                    });
+                });
+            }, { threshold: 0.3 });
+
+            const section = document.querySelector('#stat-pub');
+            if (section) observer.observe(section.closest('section'));
+        })();
+    </script>
+
+    <script src="../../assets/global/localization.js"></script>
 </body>
 
 </html>
diff --git a/groups/RODA/package-lock.json b/groups/RODA/package-lock.json
index 41aefa8..2155203 100644
--- a/groups/RODA/package-lock.json
+++ b/groups/RODA/package-lock.json
@@ -1,13 +1,13 @@
 {
-    "name": "roda",
-    "version": "1.0.0",
-    "lockfileVersion": 3,
-    "requires": true,
-    "packages": {
-        "": {
-            "name": "roda",
-            "version": "1.0.0",
-            "license": "ISC"
-        }
+  "name": "roda",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "roda",
+      "version": "1.0.0",
+      "license": "ISC"
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/groups/RODA/package.json b/groups/RODA/package.json
index 8602450..b0606c6 100644
--- a/groups/RODA/package.json
+++ b/groups/RODA/package.json
@@ -1,14 +1,14 @@
 {
-  "name": "roda",
-  "version": "1.0.0",
-  "description": "Project website untuk menampilkan sorotan dan prestasi karya mahasiswa program studi Informatika Universitas Tanjungpura.",
-  "main": "server.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js",
-    "dev": "node server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+    "name": "roda",
+    "version": "1.0.0",
+    "description": "Project website untuk menampilkan sorotan dan prestasi karya mahasiswa program studi Informatika Universitas Tanjungpura.",
+    "main": "server.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "start": "node server.js",
+        "dev": "node server.js"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC"
+}
\ No newline at end of file
diff --git a/groups/RODA/style.css b/groups/RODA/style.css
index 653b8d6..4a23817 100644
--- a/groups/RODA/style.css
+++ b/groups/RODA/style.css
@@ -1,4 +1,4 @@
-﻿.bg-pattern {
+.bg-pattern {
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
@@ -173,6 +173,11 @@ html {
         display: flex !important;
     }
 
+    /* Hide hamburger button on desktop (aligns with ACAAB lg:1024px) */
+    #mobile-menu-button {
+        display: none !important;
+    }
+
     #kbk-card-grid {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..0cab1ff
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "22"
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..e65cacf
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,125 @@
+import { cpSync, existsSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const root = path.dirname(fileURLToPath(import.meta.url));
+const excludedDirs = new Set(['.git', 'dist', 'node_modules']);
+const rodaDashboardUrl = 'https://dashboard.informatika.untan.ac.id/index.php?penelitian';
+
+let rodaDashboardHtmlCache;
+
+function collectHtmlInputs(dir) {
+  const inputs = {};
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (!excludedDirs.has(entry.name)) {
+        Object.assign(inputs, collectHtmlInputs(fullPath));
+      }
+      continue;
+    }
+
+    if (entry.isFile() && entry.name.endsWith('.html')) {
+      const relativePath = path.relative(root, fullPath);
+      const inputName = relativePath
+        .replace(/\.html$/, '')
+        .replace(/[^a-zA-Z0-9_-]+/g, '_');
+
+      inputs[inputName] = fullPath;
+    }
+  }
+
+  return inputs;
+}
+
+function copyStaticAssets() {
+  return {
+    name: 'copy-static-assets',
+    closeBundle() {
+      const source = path.join(root, 'assets');
+      const destination = path.join(root, 'dist', 'assets');
+
+      if (existsSync(source)) {
+        cpSync(source, destination, { recursive: true });
+      }
+    },
+  };
+}
+
+async function fetchRodaDashboardHtml() {
+  if (rodaDashboardHtmlCache !== undefined) {
+    return rodaDashboardHtmlCache;
+  }
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 12000);
+
+  try {
+    const response = await fetch(rodaDashboardUrl, {
+      signal: controller.signal,
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    rodaDashboardHtmlCache = await response.text();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn(`[roda-dashboard] Build-time dashboard fetch skipped: ${message}`);
+    rodaDashboardHtmlCache = '';
+  } finally {
+    clearTimeout(timeoutId);
+  }
+
+  return rodaDashboardHtmlCache;
+}
+
+function escapeJsonScriptContent(value) {
+  return JSON.stringify(value)
+    .replaceAll('<', '\\u003c')
+    .replaceAll('>', '\\u003e')
+    .replaceAll('&', '\\u0026')
+    .replaceAll('\u2028', '\\u2028')
+    .replaceAll('\u2029', '\\u2029');
+}
+
+function embedRodaDashboardData() {
+  let command = 'serve';
+
+  return {
+    name: 'embed-roda-dashboard-data',
+    configResolved(config) {
+      command = config.command;
+    },
+    async transformIndexHtml(html, context) {
+      const filename = context?.filename ? path.resolve(context.filename) : '';
+      const rodaIndex = path.join(root, 'groups', 'RODA', 'index.html');
+
+      if (filename !== rodaIndex || command !== 'build') {
+        return html.replace('<!-- RODA_DASHBOARD_DATA -->', '');
+      }
+
+      const dashboardHtml = await fetchRodaDashboardHtml();
+      const payload = `<script type="application/json" id="roda-dashboard-html">${escapeJsonScriptContent(dashboardHtml)}</script>`;
+
+      return html.replace('<!-- RODA_DASHBOARD_DATA -->', payload);
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [embedRodaDashboardData(), copyStaticAssets()],
+  build: {
+    rollupOptions: {
+      input: collectHtmlInputs(root),
+    },
+  },
+});
