From 5080517d4dc92578ca9996b58c5a6e02ec28bbe2 Mon Sep 17 00:00:00 2001
From: Tazyeuu <d1041231073@student.untan.ac.id>
Date: Thu, 4 Jun 2026 17:21:08 +0000
Subject: [PATCH] sorry yah - Tazyeuu

mengembalikan yang tidak sengaja terganti - RODA
---
 groups/ACAAB/index.html | 3215 +++++++++++++++------------------------
 1 file changed, 1268 insertions(+), 1947 deletions(-)
diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index ec40fee..a781215 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1,2017 +1,1338 @@
-﻿<!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 > 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 {
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            will-change: box-shadow;
         }
 
-        to {
-          transform: translateX(0);
-          opacity: 1;
-        }
-      }
-
-      @keyframes fadeInUp {
-        from {
-          transform: translateY(10px);
-          opacity: 0;
+        #nav-wrapper>div:first-child {
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
         }
 
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
-      }
-
-      @keyframes lucoPulse {
-        0%,
-        100% {
-          transform: scale(1);
+        @media (max-width: 1023px) {
+            #nav-wrapper>div:first-child {
+                min-height: 0 !important;
+                max-height: none;
+            }
         }
 
-        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 {
+            z-index: 40;
         }
 
-        40% {
-          transform: translateY(-6px);
+        #pengumuman-bar.is-stuck {
+            position: fixed;
+            left: 0;
+            right: 0;
+            z-index: 40;
         }
-      }
 
-      /* 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;
-      }
+        @media (prefers-reduced-motion: reduce) {
+
+            *,
+            *::before,
+            *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+
+        /* Skip Link Styling */
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: #003150;
+            color: white;
+            padding: 8px 16px;
+            z-index: 100;
+            transition: top 0.3s;
+        }
+
+        .skip-link:focus {
+            top: 0;
+        }
+
+        /* Focus visible for better keyboard navigation */
+        :focus-visible {
+            outline: 3px solid #feb401;
+            outline-offset: 2px;
+        }
+
+        /* Mega Menu Styles */
+        .hero-pagination .swiper-pagination-bullet {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.4);
+            display: inline-block;
+            margin: 0 4px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .hero-pagination .swiper-pagination-bullet-active {
+            background: rgba(255, 255, 255, 1);
+            width: 24px;
+            border-radius: 4px;
+        }
+
+        .mega-panel {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+        }
+
+        .mega-panel.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        /* Overlay transition */
+        #mega-overlay {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+        }
+
+        #mega-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .mega-link-card {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+            padding: 1rem;
+            border-radius: 0.75rem;
+            border: 1px solid #e2e8f0;
+            background: white;
+            transition: all 0.2s ease;
+        }
+
+        .mega-link-card:hover {
+            border-color: #3b82f6;
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+            transform: translateY(-2px);
+        }
+
+        .mega-link-icon {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.2s ease;
+        }
+
+        .nav-menu-btn.active {
+            background: rgba(255, 255, 255, 0.9);
+            color: #1e40af;
+        }
+
+        .nav-menu-btn:hover {
+            background: rgba(255, 255, 255, 0.8);
+        }
+
+        /* Mega menu positioning - no gap */
+        #main-nav {
+            position: relative;
+        }
+
+        #mega-menu-container {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            pointer-events: none;
+        }
+
+        #mega-menu-container .mega-panel {
+            pointer-events: auto;
+        }
+
+        /* Keep pointer bridge under nav to prevent hover loss */
+        .nav-menu-item {
+            position: relative;
+        }
+
+        .nav-menu-item::after {
+            content: '';
+            position: absolute;
+            bottom: -12px;
+            left: 0;
+            right: 0;
+            height: 12px;
+        }
+
+        /* ===== Luco Chatbot Animations ===== */
+        @keyframes slideInRight {
+            from {
+                transform: translateX(100px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeInUp {
+            from {
+                transform: translateY(10px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes lucoPulse {
+
+            0%,
+            100% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.05);
+            }
+        }
+
+        #luco-container {
+            animation: slideInRight 0.5s ease-out forwards;
+        }
+
+        #luco-bubble {
+            animation: fadeInUp 0.3s ease-out forwards;
+            width: min(18rem, calc(100vw - 2rem));
+        }
+
+        #luco-btn {
+            animation: lucoPulse 2s ease-in-out infinite;
+        }
+
+        #luco-btn:hover {
+            animation: none;
+        }
+
+        /* Typing indicator */
+        .typing-indicator span {
+            display: inline-block;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+
+        .typing-indicator span:nth-child(1) {
+            animation-delay: 0s;
+        }
+
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes bounce {
+
+            0%,
+            80%,
+            100% {
+                transform: translateY(0);
+            }
+
+            40% {
+                transform: translateY(-6px);
+            }
+        }
+
+        /* Luco speech bubble arrow */
+        #luco-bubble .bubble-arrow {
+            position: absolute;
+            right: 24px;
+            bottom: -6px;
+            width: 12px;
+            height: 12px;
+            background: white;
+            transform: rotate(45deg);
+            border-right: 1px solid #e2e8f0;
+            border-bottom: 1px solid #e2e8f0;
+        }
     </style>
-  </head>
-  <body
-    class="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
-    >
+</head>
+<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
 
-    <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>
+    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
+
+    <div id="nav-wrapper"
+        class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
+        <div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
+            <div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
+                <div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
+                    style="overflow:hidden;max-height:100%;">
+                    01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
+                    01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
+                    01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
+                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
+                    01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
+                    01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
+                    00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
+                    01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
+                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
+                </div>
+                <div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
+            </div>
+
+            <div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
+                <a href="../../index.html" class="flex items-center gap-4 group">
+                    <div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
+                        <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+                            alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
+                            class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
+                    </div>
+                    <div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
+                        <span
+                            class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
+                        <span
+                            class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
+                            TANJUNGPURA</span>
+                    </div>
+                </a>
+
+                <div class="hidden lg:flex items-center gap-5">
+                    <div class="flex items-center gap-3 text-sm">
+                        <a href="https://satu.untan.ac.id" target="_blank"
+                            class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
+                    </div>
+                    <div class="pl-5 border-l border-white/20 flex items-center gap-3">
+                        <button
+                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
+                            <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
+                        </button>
+                        <button
+                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+                            aria-label="Pengaturan aksesibilitas"
+                            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>
 
-        <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>
+        <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">
 
-          <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>
+                    <!-- 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>
 
-          <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>
+                    <!-- 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>
 
-      <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: 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: 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: 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: 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: 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: 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: 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>
 
-            <!-- 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>
+            <!-- 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>
-                <!-- 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>
+
+                <!-- 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>
-              </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>
-          </div>
+            <!-- End mega-menu-container -->
+        </nav>
 
-          <!-- 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 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>
-        <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
-        >
+        <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>
+            <!-- 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>
+            <!-- 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>
+            <!-- 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>
+            <!-- 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>
+            <!-- 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>
+            <!-- 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>
     </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>
+<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>
-        <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>
+    <footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
+        <div class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center">
+
+            <h3 class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4" data-i18n="footer_follow_us">
+                Ikuti Kami</h3>
+            <div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-instagram text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-youtube text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-facebook-f text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-twitter text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-linkedin-in text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-tiktok text-xl sm:text-2xl"></i></a>
+            </div>
+
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left">
+                <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+                    class="h-16 sm:h-20 shrink-0" alt="Logo UNTAN">
+                <div
+                    class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight">
+                    <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1">INFORMATIKA</h2>
+                    <h2 class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5">
+                        UNIVERSITAS TANJUNGPURA</h2>
+                </div>
+            </div>
+
+            <div class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light">
+                <p class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1">
+                    <i class="fas fa-map-marker-alt text-untan-yellow"></i>
+                    Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,
+                </p>
+                <p>Kota Pontianak, Kalimantan Barat 78124</p>
+            </div>
+
+            <div
+                class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide">
+                <span>E: info@informatika.untan.ac.id</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>P: +62 851-7165-5161</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>F: +62(561) 739637</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>WA: +62 851-7165-5161</span>
+            </div>
+
         </div>
 
-        <div
-          class="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 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>
-
-        <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)" : "";
-          });
-        }
-
-        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);
+                    btn.classList.toggle('active', isActive);
+                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
+                });
             }
-          });
-        });
 
-        megaOverlay.addEventListener("click", closeMenus);
+            function closeMenus() {
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
 
-        document.addEventListener("click", (e) => {
-          const clickedInsideNav = e.target.closest("#main-nav");
-          const clickedInsidePanel = e.target.closest(".mega-panel");
+                megaOverlay.classList.remove('active');
+                setButtonState(null);
+                activeMenu = null;
+            }
 
-          if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
-            closeMenus();
-          }
-        });
+            function openMenu(menuId) {
+                const targetPanel = document.getElementById(menuMap[menuId]);
+                if (!targetPanel) return;
 
-        document.addEventListener("keydown", (e) => {
-          if (e.key === "Escape" && 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();
+                }
+            });
+        })();
     </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>
+<script src="../../assets/global/localization.js"></script>
+</body>
+</html>
\ No newline at end of file
