From b7f66119ce48cbcea161b357ac3db84caffb21a8 Mon Sep 17 00:00:00 2001
From: GuavaPopper <radityaindraputranto@gmail.com>
Date: Fri, 5 Jun 2026 01:59:14 +0700
Subject: [PATCH] feat: refresh RODA prod sync

---
 groups/RODA/index.html        | 2563 ++++++++++++++++++++++-----------
 groups/RODA/package-lock.json |   13 +
 groups/RODA/package.json      |   14 +
 groups/RODA/server.js         |  279 ++++
 groups/RODA/style.css         |  338 ++++-
 package-lock.json             |    1 -
 vite.config.js                |  125 ++
 7 files changed, 2460 insertions(+), 873 deletions(-)
 create mode 100644 groups/RODA/package-lock.json
 create mode 100644 groups/RODA/package.json
 create mode 100644 groups/RODA/server.js
 create mode 100644 vite.config.js
diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 720a508..20edd79 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1,302 +1,97 @@
-﻿<!DOCTYPE html>
-<html lang="id" class="scroll-smooth">
+<!DOCTYPE html>
+<html lang="id">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group 08 &ndash; RODA | 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">
+    <title>Sorotan dan Prestasi Karya Mahasiswa | Informatika UNTAN</title>
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome untuk Icon -->
     <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;
-        }
+    <!-- Google Fonts -->
+    <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">
 
-        #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;
+    <script>
+        tailwind.config = {
+            theme: {
+                screens: {
+                    'sm': '390px',      // Mobile: 390 x 844
+                    'md': '768px',      // Tablet: 768 x 1024
+                    'lg': '1366px',     // Laptop: 1366 x 768
+                    'xl': '1920px',     // Desktop: 1920 x 1080
+                    '2xl': '1920px'
+                },
+                extend: {
+                    fontFamily: {
+                        sans: ['Roboto', 'sans-serif'],
+                        condensed: ['"Roboto Condensed"', 'sans-serif'],
+                    },
+                    colors: {
+                        untan: {
+                            blue: '#005eb8',
+                            navy: '#003150',
+                            dark: '#001f36',
+                            yellow: '#feb401',
+                            light: '#f8fafc'
+                        }
+                    },
+                    boxShadow: {
+                        'soft': '0 20px 50px rgba(0, 49, 80, 0.08)',
+                        'soft-lg': '0 30px 60px rgba(0, 49, 80, 0.12)',
+                    },
+                    fontSize: {
+                        // Mobile (390px)
+                        'xs-mobile': ['11px', '14px'],
+                        'sm-mobile': ['13px', '16px'],
+                        'base-mobile': ['14px', '20px'],
+                        'lg-mobile': ['16px', '24px'],
+                        'xl-mobile': ['18px', '28px'],
+                        '2xl-mobile': ['22px', '32px'],
+                        '3xl-mobile': ['26px', '36px'],
+                        // Tablet (768px)
+                        'xs-tablet': ['12px', '15px'],
+                        'sm-tablet': ['14px', '18px'],
+                        'base-tablet': ['15px', '22px'],
+                        'lg-tablet': ['18px', '26px'],
+                        'xl-tablet': ['20px', '30px'],
+                        '2xl-tablet': ['24px', '34px'],
+                        '3xl-tablet': ['28px', '38px'],
+                        // Laptop (1366px)
+                        'xs-laptop': ['13px', '16px'],
+                        'sm-laptop': ['14px', '19px'],
+                        'base-laptop': ['16px', '23px'],
+                        'lg-laptop': ['18px', '27px'],
+                        'xl-laptop': ['20px', '31px'],
+                        '2xl-laptop': ['24px', '35px'],
+                        '3xl-laptop': ['30px', '40px'],
+                    }
+                }
             }
         }
-
-        #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;
-            }
-
-            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>
+    </script>
+    <script>
+        window.APP_CONFIG = window.APP_CONFIG || {
+            debugLogs: false,
+            dashboardRuntimeFetch: 'local',
+            dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
+            dashboardProxyTemplates: [
+                'https://api.allorigins.win/get?url={{url}}&ts={{ts}}',
+                'https://api.codetabs.com/v1/proxy?quest={{url}}',
+                'https://thingproxy.freeboard.io/fetch/{{rawUrl}}'
+            ]
+        };
+    </script>
+    <!-- RODA_DASHBOARD_DATA -->
+    <link rel="stylesheet" href="style.css">
 </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>
+<body
+    class="bg-gray-50 font-sans text-gray-800 antialiased selection:bg-untan-yellow selection:text-untan-navy pt-[120px] sm:pt-[125px] md:pt-[140px] lg:pt-[160px] xl:pt-[180px]">
 
+    <!-- Navbar & Header -->
     <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;">
@@ -434,75 +229,44 @@
                     <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="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>
+                                    <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>
+                                    <p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi sejak 1993.</p>
+                                    <a href="content.html?type=berita" class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">Selengkapnya <i class="fas fa-arrow-right"></i></a>
                                 </div>
                             </div>
                             <!-- Right: Links -->
                             <div class="col-span-8 grid grid-cols-2 gap-6">
                                 <a href="content.html?type=berita" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
-                                        <i class="fas fa-landmark"></i>
-                                    </div>
+                                    <div class="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>
+                                        <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 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>
+                                        <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 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>
+                                        <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 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>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_collaboration">Kerjasama & MoU</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_collaboration_desc">Mitra industri dan akademik</p>
                                     </div>
                                 </a>
                             </div>
@@ -511,481 +275,150 @@
                 </div>
 
                 <!-- Mega Menu: Program -->
-                <div id="mega-program" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                <div id="mega-program" class="mega-panel bg-white border-b-4 border-blue-600 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="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-32 h-32 bg-white/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-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>
+                                    <span class="inline-block px-3 py-1 bg-white text-blue-600 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4" data-i18n="nav_program">Program</span>
+                                    <h3 class="text-2xl font-bold mb-3">Program Studi & Kurikulum</h3>
+                                    <p class="text-slate-200 text-sm mb-6 leading-relaxed">Berbasis OBE dengan 4 konsentrasi keahlian</p>
+                                    <a href="subject-and-courses.html" class="inline-flex items-center gap-2 text-white font-semibold text-sm hover:gap-3 transition-all">Lihat Semua <i class="fas fa-arrow-right"></i></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 class="col-span-8 grid grid-cols-2 gap-6">
+                                <a href="subject-and-courses.html" 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-book"></i></div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_academic">Akademik</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">Jadwal, KRS, dan kalender akademik</p>
+                                    </div>
+                                </a>
+                                <a href="content.html?type=berita" 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-certificate"></i></div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_accreditation">Akreditasi</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_accreditation_desc">Status Unggul BAN-PT</p>
+                                    </div>
+                                </a>
+                                <a href="graduate-profile.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-user-check"></i></div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" 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-sky-50 text-sky-600 group-hover:bg-sky-600 group-hover:text-white"><i class="fas fa-list-check"></i></div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_courses">Mata Kuliah</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_courses_desc">144 SKS kurikulum</p>
+                                    </div>
+                                </a>
+                                <a href="academic-guidelines.html" 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-scroll"></i></div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_guideline">Panduan Akademik</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-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"><i class="fas fa-megaphone"></i></div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_announcements">Pengumuman</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_announcements_desc">Update program studi</p>
+                                    </div>
+                                </a>
                             </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 id="mega-sdm" class="mega-panel bg-white border-b-4 border-emerald-600 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 class="grid grid-cols-2 gap-12">
+                            <div>
+                                <h4 class="text-sm font-bold text-emerald-600 uppercase tracking-widest mb-4" data-i18n="nav_sdm">SDM</h4>
+                                <ul class="space-y-3">
+                                    <li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="btn_all_lecturers">Semua Dosen</a></li>
+                                    <li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_ai">Kecerdasan Buatan</a></li>
+                                    <li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_se">Rekayasa Perangkat Lunak</a></li>
+                                    <li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_network">Jaringan & Keamanan</a></li>
+                                    <li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_si">Sistem Informasi</a></li>
+                                </ul>
                             </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 class="bg-emerald-50 rounded-lg p-6">
+                                <h4 class="text-sm font-bold text-emerald-700 mb-3">Statistik SDM</h4>
+                                <p class="text-slate-600 text-sm leading-relaxed">Tim pengajar profesional dengan S2/S3 dari universitas terkemuka, siap membimbing generasi teknolog masa depan.</p>
                             </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 id="mega-fasilitas" class="mega-panel bg-white border-b-4 border-amber-600 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 class="grid grid-cols-2 gap-12">
+                            <div>
+                                <h4 class="text-sm font-bold text-amber-600 uppercase tracking-widest mb-4" data-i18n="nav_facilities">Fasilitas</h4>
+                                <ul class="space-y-3">
+                                    <li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_lab">Laboratorium</a></li>
+                                    <li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_dc">Data Center</a></li>
+                                    <li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_eresources">E-Resources</a></li>
+                                    <li><a href="ifuntanhub.html" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_ifuntanhub">IF UNTan Hub</a></li>
+                                </ul>
+                            </div>
+                            <div class="bg-amber-50 rounded-lg p-6">
+                                <h4 class="text-sm font-bold text-amber-700 mb-3">Akses Fasilitas</h4>
+                                <p class="text-slate-600 text-sm leading-relaxed">Fasilitas lengkap dengan teknologi terkini untuk mendukung pembelajaran dan penelitian.</p>
+                            </div>
                         </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 id="mega-karya" class="mega-panel bg-white border-b-4 border-pink-600 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 class="grid grid-cols-2 gap-12">
+                            <div>
+                                <h4 class="text-sm font-bold text-pink-600 uppercase tracking-widest mb-4" data-i18n="nav_works">Karya & Agenda</h4>
+                                <ul class="space-y-3">
+                                    <li><a href="karya.html" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_all_karya">Semua Karya</a></li>
+                                    <li><a href="karya.html?filter=penelitian" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_research">Riset</a></li>
+                                    <li><a href="karya.html?filter=pkm" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_community">Pengabdian Masyarakat</a></li>
+                                    <li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_achievements">Prestasi</a></li>
+                                </ul>
                             </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 class="bg-pink-50 rounded-lg p-6">
+                                <h4 class="text-sm font-bold text-pink-700 mb-3">Event Mendatang</h4>
+                                <p class="text-slate-600 text-sm leading-relaxed">Ikuti seminar, workshop, dan acara akademik kami sepanjang tahun.</p>
                             </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 id="mega-kontak" class="mega-panel bg-white border-b-4 border-violet-600 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 class="grid grid-cols-2 gap-12">
+                            <div>
+                                <h4 class="text-sm font-bold text-violet-600 uppercase tracking-widest mb-4" data-i18n="nav_contact">Kontak</h4>
+                                <ul class="space-y-3">
+                                    <li><a href="content.html?type=berita" class="text-slate-700 hover:text-violet-600 font-medium transition-colors" data-i18n="link_official_contact">Kontak Resmi</a></li>
+                                    <li><a href="mailto:info@informatika.untan.ac.id" class="text-slate-700 hover:text-violet-600 font-medium transition-colors" data-i18n="link_feedback">Saran & Masukan</a></li>
+                                    <li><a href="https://instagram.com/informatika.untan" target="_blank" class="text-slate-700 hover:text-violet-600 font-medium transition-colors"><i class="fab fa-instagram mr-2"></i>Instagram</a></li>
+                                </ul>
                             </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 class="bg-violet-50 rounded-lg p-6">
+                                <h4 class="text-sm font-bold text-violet-700 mb-3">Informasi Kontak</h4>
+                                <p class="text-slate-600 text-xs leading-relaxed">
+                                    📧 info@informatika.untan.ac.id<br>
+                                    📞 +62 851-7165-5161<br>
+                                    🏢 Jl. Jenderal A. Yani No. 111, Pontianak
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -999,12 +432,13 @@
         <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
     </div>
 
+    <!-- Mobile Menu -->
     <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>
+                <span class="font-bold text-lg text-white font-sans">Menu Utama</span>
                 <button
                     class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
                     aria-label="Ganti bahasa">
@@ -1029,14 +463,14 @@
 
             <!-- Tentang Kami -->
             <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_about">Tentang
                     Kami</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
                         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"
+                    <a href="profil.html" 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>
@@ -1045,7 +479,7 @@
 
             <!-- Program -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     data-i18n="nav_program">Program</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
@@ -1059,13 +493,13 @@
                     <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>
+                        data-i18n="link_statistics">Pengumuman</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>
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_sdm">SDM</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="people-based-on-kk.html"
                         class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
@@ -1083,7 +517,7 @@
 
             <!-- Fasilitas -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     data-i18n="nav_facilities">Fasilitas</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
@@ -1099,7 +533,7 @@
 
             <!-- Karya & Agenda -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_works">Karya &
                     Agenda</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
@@ -1111,14 +545,12 @@
                         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"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     data-i18n="nav_contact">Kontak</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
@@ -1130,33 +562,580 @@
                         class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
                         <i class="fab fa-instagram text-pink-500"></i> Instagram
                     </a>
-                    <a href="#"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-youtube text-red-500"></i> YouTube
-                    </a>
                 </div>
             </div>
         </div>
     </div>
-
-<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
-        <div class="container mx-auto px-4 lg:px-8 py-12">
-            <div class="mb-8 pb-8 border-b border-slate-200">
-                <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Riset &amp; Kelompok Bidang Keahlian (KBK)</h1>
-                <p class="text-slate-500 text-sm">Kelompok 08 &mdash; RODA &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
+    
+    <!-- Hero Section -->
+    <header class="bg-untan-navy relative reveal">
+        <div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 relative z-10 py-8 sm:py-12 md:py-16 lg:py-20 xl:py-24">
+            <div class="inline-block bg-untan-yellow text-untan-navy text-[10px] sm:text-xs md:text-xs lg:text-xs xl:text-sm font-bold px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-4 py-1 rounded mb-3 sm:mb-4 md:mb-4 lg:mb-4 xl:mb-5 uppercase tracking-wider"
+                data-i18n="badgeHero">
+                Riset & Kelompok Bidang Keahlian
             </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 ================= -->
+            <h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-white mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6 leading-tight"
+                data-i18n="heroTitle">
+                Riset & Kelompok Bidang Keahlian
+            </h2>
+            <p class="text-gray-300 max-w-2xl text-xs sm:text-sm md:text-base lg:text-lg xl:text-lg mb-6 sm:mb-8 md:mb-8 lg:mb-8 xl:mb-10 leading-relaxed" data-i18n="heroDesc">
+                Kenali Kelompok Bidang Keahlian (KBK) kami. Jelajahi riset unggulan dosen dan mahasiswa di bidang
+                Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, hingga IoT
+            </p>
+            <div class="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 md:gap-4 lg:gap-5 xl:gap-6">
+                <a href="#kbk-section"
+                    class="inline-flex items-center justify-center sm:justify-start gap-2 px-4 sm:px-6 md:px-6 lg:px-6 xl:px-8 py-2.5 sm:py-3 md:py-3 lg:py-3 xl:py-4 rounded-xl bg-untan-yellow text-untan-navy font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-lg hover:bg-yellow-300 transition-colors">
+                    <i class="fa-solid fa-layer-group"></i>
+                    <span data-i18n="quickActionKbk">Jelajahi KBK</span>
+                </a>
+                <a href="#riset-section"
+                    class="inline-flex items-center justify-center sm:justify-start gap-2 px-4 sm:px-6 md:px-6 lg:px-6 xl:px-8 py-2.5 sm:py-3 md:py-3 lg:py-3 xl:py-4 rounded-xl border border-white/30 text-white font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-lg hover:bg-white/10 transition-colors">
+                    <i class="fa-solid fa-magnifying-glass-chart"></i>
+                    <span data-i18n="quickActionRiset">Cari Publikasi</span>
+                </a>
             </div>
         </div>
-    </main>
+    </header>
+    <!-- Main Content Sections -->
+     <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+    <main id="main-content">
+        <!-- KBK Section -->
+        <section class="bg-slate-50 py-10 sm:py-14 md:py-16 lg:py-20 xl:py-24 border-t border-gray-100 reveal" id="kbk-section">
+            <div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
+                <div class="text-center mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
+                    <span
+                        class="inline-block bg-untan-blue/10 text-untan-blue text-[9px] sm:text-[10px] md:text-xs lg:text-xs xl:text-[10px] font-bold px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-0.75 sm:py-1 md:py-1 lg:py-1 xl:py-1 rounded-full uppercase tracking-widest mb-3 sm:mb-4 md:mb-4 lg:mb-4 xl:mb-5"
+                        data-i18n="badgeHero">Kelompok Bidang Keahlian</span>
+                    <h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-untan-navy mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6" data-i18n="kbkTitle">
+                        4 Pilar Keilmuan Informatika UNTAN</h2>
+                    <p class="text-gray-500 max-w-2xl mx-auto text-xs sm:text-sm md:text-base lg:text-base xl:text-lg leading-relaxed" data-i18n="kbkDesc">Setiap KBK berfokus pada
+                        topik riset spesifik, dipimpin dosen berpengalaman, dan terbuka untuk kolaborasi.</p>
+                </div>
 
-    <footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
+                <div id="kbk-card-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
+                    <!-- AI Card -->
+                    <article data-kbk-card="ai"
+                        class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
+                        <div
+                            class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
+                            <i class="fa-solid fa-brain"></i>
+                        </div>
+                        <h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterAI">Kecerdasan Buatan</h3>
+                        <p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkAIDesc">Sistem cerdas berbasis AI, deep
+                            learning, vision, dan NLP untuk solusi nyata.</p>
+                        <div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Vision</span>
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">NLP</span>
+                        </div>
+                        <div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
+                            <div class="flex -space-x-2">
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    AS</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    RH</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+                                    +6</div>
+                            </div>
+                            <button type="button" onclick="openKbkInsight('ai')"
+                                aria-label="Lihat detail Kecerdasan Buatan"
+                                class="text-untan-yellow group-hover:translate-x-1 transition-transform">
+                                <i class="fas fa-arrow-right"></i>
+                            </button>
+                        </div>
+                    </article>
+
+                    <!-- RPL Card -->
+                    <article data-kbk-card="rpl"
+                        class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
+                        <div
+                            class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
+                            <i class="fa-solid fa-code"></i>
+                        </div>
+                        <h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterRPL">Rekayasa Perangkat
+                            Lunak</h3>
+                        <p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkRPLDesc">Metodologi, arsitektur, dan
+                            kualitas perangkat lunak modern serta DevOps.</p>
+                        <div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">DevOps</span>
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Agile</span>
+                        </div>
+                        <div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
+                            <div class="flex -space-x-2">
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    DW</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    PN</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+                                    +8</div>
+                            </div>
+                            <button type="button" onclick="openKbkInsight('rpl')"
+                                aria-label="Lihat detail Rekayasa Perangkat Lunak"
+                                class="text-untan-yellow group-hover:translate-x-1 transition-transform">
+                                <i class="fas fa-arrow-right"></i>
+                            </button>
+                        </div>
+                    </article>
+
+                    <!-- Net Card -->
+                    <article data-kbk-card="net"
+                        class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
+                        <div
+                            class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
+                            <i class="fa-solid fa-shield-halved"></i>
+                        </div>
+                        <h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterNet">Jaringan & Keamanan
+                        </h3>
+                        <p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkNetDesc">Infrastruktur jaringan handal,
+                            keamanan siber, dan teknologi Cloud/IoT.</p>
+                        <div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Cybersec</span>
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">IoT</span>
+                        </div>
+                        <div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
+                            <div class="flex -space-x-2">
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    HF</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    SA</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+                                    +5</div>
+                            </div>
+                            <button type="button" onclick="openKbkInsight('net')"
+                                aria-label="Lihat detail Jaringan dan Keamanan"
+                                class="text-untan-yellow group-hover:translate-x-1 transition-transform">
+                                <i class="fas fa-arrow-right"></i>
+                            </button>
+                        </div>
+                    </article>
+
+                    <!-- SI Card -->
+                    <article data-kbk-card="si"
+                        class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
+                        <div
+                            class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
+                            <i class="fa-solid fa-database"></i>
+                        </div>
+                        <h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterSI">Sistem Informasi</h3>
+                        <p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkSIDesc">Manajemen informasi, GIS, big
+                            data, dan sistem pendukung keputusan.</p>
+                        <div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Big
+                                Data</span>
+                            <span
+                                class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">GIS</span>
+                        </div>
+                        <div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
+                            <div class="flex -space-x-2">
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    LP</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
+                                    FN</div>
+                                <div
+                                    class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+                                    +4</div>
+                            </div>
+                            <button type="button" onclick="openKbkInsight('si')"
+                                aria-label="Lihat detail Sistem Informasi"
+                                class="text-untan-yellow group-hover:translate-x-1 transition-transform">
+                                <i class="fas fa-arrow-right"></i>
+                            </button>
+                        </div>
+                    </article>
+                </div>
+
+                <section id="kbk-insight-section"
+                    class="mt-8 sm:mt-10 md:mt-12 lg:mt-12 xl:mt-12 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-white shadow-soft overflow-hidden">
+                    <div class="grid lg:grid-cols-[0.95fr_1.05fr]">
+                        <div id="kbk-insight-hero"
+                            class="p-5 sm:p-6 md:p-8 lg:p-10 xl:p-10 border-b lg:border-b-0 lg:border-r border-slate-100 bg-gradient-to-br from-untan-blue/10 via-white to-untan-yellow/10">
+                            <div
+                                class="inline-flex items-center gap-2 rounded-full bg-white/80 px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-1.75 md:py-2 lg:py-2 xl:py-2 text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.24em] text-untan-blue">
+                                <i id="kbk-insight-icon" class="fa-solid fa-brain"></i>
+                                <span id="kbk-insight-badge">KBK Insight</span>
+                            </div>
+                            <h3 id="kbk-insight-title"
+                                class="mt-4 sm:mt-5 md:mt-6 lg:mt-6 xl:mt-6 text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-4xl font-bold font-condensed text-untan-navy"></h3>
+                            <p id="kbk-insight-desc" class="mt-3 sm:mt-4 md:mt-5 lg:mt-5 xl:mt-5 text-slate-600 text-xs sm:text-sm md:text-base lg:text-base xl:text-base leading-relaxed"></p>
+                            <div class="mt-6 sm:mt-7 md:mt-8 lg:mt-8 xl:mt-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-white/80 bg-white/90 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6 shadow-soft">
+                                <p id="kbk-insight-lead-label"
+                                    class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
+                                <div class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 flex items-center gap-3 sm:gap-3.5 md:gap-4 lg:gap-4 xl:gap-4">
+                                    <div id="kbk-insight-lead-initials"
+                                        class="flex h-12 w-12 sm:h-12 md:h-14 lg:h-16 xl:h-16 sm:w-12 md:w-14 lg:w-16 xl:w-16 items-center justify-center rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl bg-untan-navy text-white text-lg sm:text-lg md:text-xl lg:text-xl xl:text-xl font-bold">
+                                    </div>
+                                    <div>
+                                        <h4 id="kbk-insight-lead-name" class="text-base sm:text-base md:text-lg lg:text-lg xl:text-lg font-bold text-untan-navy"></h4>
+                                        <p id="kbk-insight-lead-rank" class="text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-500"></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-5 sm:p-6 md:p-8 lg:p-10 xl:p-10">
+                            <div class="grid md:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-6 xl:gap-6">
+                                <div class="rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-slate-50 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6">
+                                    <p id="kbk-focus-label"
+                                        class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
+                                    <p id="kbk-focus-text" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-600 leading-relaxed"></p>
+                                </div>
+                                <div class="rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-slate-50 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6">
+                                    <p id="kbk-output-label"
+                                        class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
+                                    <p id="kbk-output-text" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-600 leading-relaxed"></p>
+                                </div>
+                                <div class="rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-slate-50 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6">
+                                    <p id="kbk-collab-label"
+                                        class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
+                                    <p id="kbk-collab-text" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-600 leading-relaxed"></p>
+                                </div>
+                            </div>
+                            <div class="mt-6 sm:mt-7 md:mt-8 lg:mt-8 xl:mt-8">
+                                <p id="kbk-topic-label"
+                                    class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
+                                <div id="kbk-topic-tags" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 flex flex-wrap gap-2.5 sm:gap-3 md:gap-3 lg:gap-3 xl:gap-3"></div>
+                            </div>
+                        </div>
+                    </div>
+            </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="bg-untan-navy py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 relative overflow-hidden reveal">
+            <div class="absolute inset-0 opacity-[0.03] bg-pattern pointer-events-none"></div>
+            <div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 relative z-10">
+                <div class="grid grid-cols-2 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10 lg:gap-12 xl:gap-10 text-center">
+                    <div>
+                        <div id="stat-pub" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-untan-yellow mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">400+</div>
+                        <p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold" data-i18n="statsPub">
+                            Hasil Penelitian</p>
+                    </div>
+                    <div>
+                        <div id="stat-sinta" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-white mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">7.555</div>
+                        <p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold"
+                            data-i18n="statsSinta">Skor SINTA</p>
+                    </div>
+                    <div>
+                        <div id="stat-dosen" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-untan-yellow mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">33</div>
+                        <p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold"
+                            data-i18n="statsDosen">Dosen Homebase</p>
+                    </div>
+                    <div>
+                        <div id="stat-collab" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-white mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">10+</div>
+                        <p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold"
+                            data-i18n="statsKolaborasi">Kerjasama Aktif</p>
+                    </div>
+                    <div class="col-span-2 lg:col-span-1">
+                        <div id="stat-mhs" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-untan-yellow mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">518</div>
+                        <p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold" data-i18n="statsMhs">Mahasiswa Aktif</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Riset & Publikasi Section -->
+        <section class="py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 bg-white reveal" id="riset-section">
+            <div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
+                <div class="flex flex-col lg:flex-row lg:items-start justify-between mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20 gap-6 sm:gap-8 md:gap-10 lg:gap-8">
+                    <div class="max-w-2xl">
+                        <span class="text-untan-blue font-bold text-[9px] sm:text-[10px] md:text-xs lg:text-xs xl:text-xs uppercase tracking-widest mb-2 sm:mb-3 md:mb-3 lg:mb-3 xl:mb-3 block">Academic
+                            Achievements</span>
+                        <h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-untan-navy mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6"
+                            data-i18n="risetTitle">Publikasi & Penelitian Terkini</h2>
+                        <div class="w-20 sm:w-20 md:w-24 lg:w-24 xl:w-24 h-0.75 sm:h-1 md:h-1 lg:h-1 xl:h-1 bg-untan-yellow rounded-full"></div>
+                    </div>
+
+                    <!-- Filter Controls -->
+                    <div class="w-full lg:w-auto space-y-2 sm:space-y-2.5 md:space-y-3 lg:space-y-3 xl:space-y-3">
+                        <label for="riset-search"
+                            class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-wider text-slate-500 block"
+                            data-i18n="searchLabel">Cari publikasi</label>
+                        <div class="relative">
+                            <i
+                                class="fa-solid fa-magnifying-glass absolute left-3 sm:left-3.5 md:left-4 lg:left-4 xl:left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
+                            <input id="riset-search" oninput="searchRiset(this.value)"
+                                data-i18n-placeholder="searchPlaceholder" type="text"
+                                class="w-full lg:w-[300px] xl:w-[320px] pl-9 sm:pl-10 md:pl-10 lg:pl-10 xl:pl-10 pr-9 sm:pr-10 md:pr-10 lg:pr-10 xl:pr-10 py-2.5 sm:py-3 md:py-3 lg:py-3 xl:py-3 rounded-xl border border-slate-200 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:border-untan-blue focus:ring-2 focus:ring-untan-blue/10"
+                                placeholder="Cari judul, penulis, atau venue...">
+                            <button id="clear-riset-search"
+                                onclick="document.getElementById('riset-search').value=''; searchRiset('')"
+                                aria-label="Reset pencarian publikasi"
+                                class="hidden absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 sm:w-6 sm:h-6 md:w-6 md:h-6 lg:w-6 lg:h-6 xl:w-6 xl:h-6 rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors">
+                                <i class="fa-solid fa-xmark text-xs"></i>
+                            </button>
+                        </div>
+                        <div class="flex flex-col sm:flex-row flex-wrap items-start sm:items-center gap-3 sm:gap-4 md:gap-4 lg:gap-3 xl:gap-4">
+                            <div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-1.5 xl:gap-2 p-1 sm:p-1.5 md:p-1.5 lg:p-1.5 xl:p-1.5 bg-gray-50 rounded-xl border border-gray-100 w-full sm:w-auto">
+                                <button onclick="filterRiset('all')" data-filter="all"
+                                    class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg bg-untan-navy text-white shadow-soft font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
+                                    data-i18n="filterAll">Semua</button>
+                                <button onclick="filterRiset('ai')" data-filter="ai"
+                                    class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
+                                    data-i18n="filterAI">AI</button>
+                                <button onclick="filterRiset('algo')" data-filter="algo"
+                                    class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
+                                    data-i18n="filterAlgo">Algoritma</button>
+                                <button onclick="filterRiset('rpl')" data-filter="rpl"
+                                    class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
+                                    data-i18n="filterRPL">RPL</button>
+                                <button onclick="filterRiset('net')" data-filter="net"
+                                    class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
+                                    data-i18n="filterNet">Jaringan</button>
+                                <button onclick="filterRiset('si')" data-filter="si"
+                                    class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
+                                    data-i18n="filterSI">SI</button>
+                            </div>
+
+                            <div class="flex items-center gap-2 sm:gap-2.5 md:gap-3 lg:gap-3 xl:gap-3">
+                                <span data-i18n="showingRiset"
+                                    class="text-[9px] sm:text-[10px] md:text-[10px] lg:text-[10px] xl:text-[10px] font-bold text-slate-400 uppercase tracking-wider">Tampilkan:</span>
+                                <div class="flex gap-1 sm:gap-1.5 md:gap-1.5 lg:gap-1.5 xl:gap-1.5">
+                                    <button onclick="setLimit(9)" data-limit="9"
+                                        class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-untan-navy text-white shadow-soft text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">9</button>
+                                    <button onclick="setLimit(50)" data-limit="50"
+                                        class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">50</button>
+                                    <button onclick="setLimit(100)" data-limit="100"
+                                        class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">100</button>
+                                    <button onclick="setLimit(200)" data-limit="200"
+                                        class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">200</button>
+                                    <button onclick="setLimit(500)" data-limit="500"
+                                        class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">500</button>
+                                </div>
+                            </div>
+                        </div>
+                        <p><span data-i18n="lastUpdatedText">This page was last updated on: </span><span id="last-updated"></span></p>
+
+                        <div id="riset-count-info"
+                            class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-3 xl:mt-4 text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-medium text-slate-400 uppercase tracking-widest">
+                            Menghitung data...
+                        </div>
+                    </div>
+                </div>
+
+                <div id="riset-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
+                    <!-- Cards generated by JS -->
+                </div>
+
+                <div id="view-all-section" class="text-center" style="display: none;">
+                    <button onclick="setLimit(50)"
+                        class="group inline-flex items-center gap-3 px-8 sm:px-10 md:px-10 lg:px-10 xl:px-12 py-3 sm:py-4 md:py-4 lg:py-4 xl:py-5 bg-white border-2 border-untan-navy text-untan-navy font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base rounded-full hover:bg-untan-navy hover:text-white transition-all duration-300">
+                        <span data-i18n="viewAll">Lihat Publikasi Lainnya</span>
+                        <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Dosen Section -->
+        <section class="py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 bg-gray-50 reveal" id="dosen-section">
+            <div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
+                <div class="text-center mb-12 sm:mb-16 md:mb-20 lg:mb-24 xl:mb-28">
+                    <span
+                        class="inline-block bg-blue-100 text-untan-blue text-[10px] sm:text-[10px] md:text-xs lg:text-xs xl:text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest mb-3 sm:mb-4 md:mb-4 lg:mb-4 xl:mb-5">Experts
+                        Directory</span>
+                    <h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-gray-900 mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6" data-i18n="dosenTitle">
+                        Peneliti & Dosen per Kelompok Keahlian</h2>
+                    <p class="max-w-3xl mx-auto text-slate-500 text-xs sm:text-sm md:text-base lg:text-base xl:text-lg leading-relaxed" data-i18n="dosenLeadDesc">Bagian ini menampilkan
+                        ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.</p>
+                </div>
+
+                <div id="dosen-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
+                    <!-- Cards generated by JS -->
+                </div>
+            </div>
+        </section>
+
+        <!-- Labs Section -->
+        <section class="py-12 sm:py-16 md:py-20 lg:py-24 xl:py-32 bg-white reveal" id="lab-section">
+            <div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
+                <div class="flex flex-col lg:flex-row lg:items-center justify-between mb-12 sm:mb-16 md:mb-20 lg:mb-24 xl:mb-28 gap-8 sm:gap-10 md:gap-12 lg:gap-12 xl:gap-12">
+                    <div class="max-w-2xl">
+                        <h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-untan-navy mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 leading-tight"
+                            data-i18n="labTitle">Laboratorium Pendukung Riset</h2>
+                        <p class="text-slate-500 text-xs sm:text-sm md:text-base lg:text-base xl:text-lg leading-relaxed" data-i18n="labDesc">5 laboratorium modern dengan 93 unit PC All-in-One
+                            yang mendukung kegiatan riset strategis dan pengembangan teknologi dosen serta mahasiswa.
+                        </p>
+                    </div>
+                    <div class="shrink-0">
+                        <div class="bg-slate-50 p-6 sm:p-7 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 text-center shadow-soft">
+                            <div class="text-4xl sm:text-4xl md:text-5xl lg:text-5xl xl:text-5xl font-bold text-untan-navy mb-2">05</div>
+                            <div class="text-[9px] sm:text-[10px] md:text-[10px] lg:text-[10px] xl:text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">Labs Modern
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-7 md:gap-8 lg:gap-8 xl:gap-8">
+                    <!-- Lab 1: Komputer & Pemrograman -->
+                    <div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
+                        <div class="flex items-start justify-between mb-6 sm:mb-7">
+                            <div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
+                                <i class="fa-solid fa-laptop-code"></i>
+                            </div>
+                            <div class="flex flex-col items-end gap-1.5">
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
+                                    <i class="fa-solid fa-desktop text-[9px]"></i> 25 PC
+                                </span>
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 25 <span data-i18n="mhs">Mahasiswa</span>
+                                </span>
+                            </div>
+                        </div>
+                        <h4 data-i18n="labKom" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Komputer & Pemrograman</h4>
+                        <p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/D48 &mdash; Kepala: Helen Sastypratiwi, S.T., M.Eng.</p>
+                        <p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labComputerDesc">Mendukung mata kuliah pemrograman dasar hingga lanjut, pengembangan aplikasi web, mobile, dan rekayasa perangkat lunak.</p>
+                        <div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">VS Code</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Node.js</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Android Studio</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Python 3</span>
+                        </div>
+                    </div>
+
+                    <!-- Lab 2: Jaringan, Keamanan & IoT -->
+                    <div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
+                        <div class="flex items-start mb-6 sm:mb-7">
+                            <div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
+                                <i class="fa-solid fa-network-wired"></i>
+                            </div>
+                        </div>
+                        <h4 data-i18n="labNet" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Jaringan, Keamanan & IoT</h4>
+                        <p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/02 &mdash; Kepala: Heri Priyanto, ST., MT.</p>
+                        <p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labNetDesc">Sarana praktik jaringan, konfigurasi router/switch, keamanan siber, administrasi sistem, dan pengembangan perangkat IoT.</p>
+                        <div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Cisco Packet</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Wireshark</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Raspberry Pi</span>
+                        </div>
+                    </div>
+
+                    <!-- Lab 3: Rekayasa PL & Data -->
+                    <div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
+                        <div class="flex items-start justify-between mb-6 sm:mb-7">
+                            <div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
+                                <i class="fa-solid fa-database"></i>
+                            </div>
+                            <div class="flex flex-col items-end gap-1.5">
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
+                                    <i class="fa-solid fa-desktop text-[9px]"></i> 25 PC
+                                </span>
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 25 <span data-i18n="mhs">Mahasiswa</span>
+                                </span>
+                            </div>
+                        </div>
+                        <h4 data-i18n="labData" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Rekayasa PL & Data</h4>
+                        <p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/03 &mdash; Kepala: Rudy Dwi Nyoto, ST., M.Eng.</p>
+                        <p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labDataDesc">Mendukung pembelajaran basis data, pemodelan data, data warehousing, dan analitik data skala besar.</p>
+                        <div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">MySQL</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">PostgreSQL</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">MongoDB</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">RapidMiner</span>
+                        </div>
+                    </div>
+
+                    <!-- Lab 4: Teknologi & Sistem Informasi -->
+                    <div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
+                        <div class="flex items-start justify-between mb-6 sm:mb-7">
+                            <div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
+                                <i class="fa-solid fa-sitemap"></i>
+                            </div>
+                            <div class="flex flex-col items-end gap-1.5">
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
+                                    <i class="fa-solid fa-desktop text-[9px]"></i> 21 PC
+                                </span>
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 21 <span data-i18n="mhs">Mahasiswa</span>
+                                </span>
+                            </div>
+                        </div>
+                        <h4 data-i18n="labSI" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Teknologi & Sistem Informasi</h4>
+                        <p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/04 &mdash; Kepala: Anggi Srimurdianti Sukamto, ST., MT.</p>
+                        <p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labInfoDesc">Merancang arsitektur sistem informasi, memodelkan proses bisnis digital, serta menumbuhkan jiwa technopreneurship.</p>
+                        <div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Bizagi</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Power BI</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Figma</span>
+                        </div>
+                    </div>
+
+                    <!-- Lab 5: Komputasi & Kecerdasan Buatan -->
+                    <div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
+                        <div class="flex items-start justify-between mb-6 sm:mb-7">
+                            <div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
+                                <i class="fa-solid fa-brain"></i>
+                            </div>
+                            <div class="flex flex-col items-end gap-1.5">
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
+                                    <i class="fa-solid fa-desktop text-[9px]"></i> 22 PC
+                                </span>
+                                <span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 22 <span data-i18n="mhs">Mahasiswa</span>
+                                </span>
+                            </div>
+                        </div>
+                        <h4 data-i18n="labAI" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Komputasi & Kecerdasan Buatan</h4>
+                        <p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/05 &mdash; Kepala: Tursina, ST, M.Cs.</p>
+                        <p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labAIDesc">Pusat riset machine learning, deep learning, computer vision, NLP, dan pengembangan sistem kecerdasan buatan berbasis data.</p>
+                        <div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">TensorFlow</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">PyTorch</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">OpenCV</span>
+                            <span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Jupyter</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="bg-slate-50 relative py-16 sm:py-20 md:py-24 lg:py-28 xl:py-28 border-t border-slate-100 reveal" id="cta-section">
+            <div class="max-w-4xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 text-center">
+                <div
+                    class="inline-flex items-center justify-center w-20 h-20 sm:w-20 md:w-24 lg:w-24 xl:w-24 sm:h-20 md:h-24 lg:h-24 xl:h-24 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl bg-white text-untan-navy mb-8 sm:mb-10 md:mb-12 lg:mb-12 xl:mb-12 shadow-soft rotate-3 hover:rotate-0 transition-transform duration-500">
+                    <i class="fa-solid fa-handshake-angle text-3xl sm:text-3xl md:text-4xl lg:text-4xl xl:text-4xl"></i>
+                </div>
+                <h3 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold text-untan-navy mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8 font-condensed tracking-tight"
+                    data-i18n="ctaTitle">Tertarik Berkolaborasi dengan KBK Kami?</h3>
+                <p class="text-slate-500 mb-10 sm:mb-12 md:mb-14 lg:mb-14 xl:mb-14 text-xs sm:text-sm md:text-base lg:text-lg xl:text-lg leading-relaxed px-2 sm:px-4 md:px-6 lg:px-8 xl:px-10 opacity-80" data-i18n="ctaDesc">
+                    Kami membuka peluang kerja sama riset lintas institusi, kemitraan strategis dengan industri, serta
+                    riset mahasiswa (skripsi/tesis) di bawah supervisi ahli kami.
+                </p>
+                <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-5 md:gap-6 lg:gap-6 xl:gap-6">
+                    <a href="mailto:info@informatika.untan.ac.id"
+                        class="group inline-flex items-center justify-center gap-3 px-10 sm:px-12 md:px-14 lg:px-14 xl:px-14 py-3 sm:py-4 md:py-5 lg:py-5 xl:py-5 text-base sm:text-lg md:text-lg lg:text-lg xl:text-lg font-bold text-untan-navy transition-all bg-untan-yellow rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl shadow-soft hover:bg-yellow-400 hover:-translate-y-1 active:scale-95">
+                        <i class="fa-solid fa-envelope text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl group-hover:animate-bounce"></i>
+                        <span data-i18n="ctaBtn">Hubungi Kami</span>
+                    </a>
+                    <a href="https://informatika.untan.ac.id/people-based-on-kk.html"
+                        class="inline-flex items-center justify-center gap-3 px-10 sm:px-11 md:px-12 lg:px-12 xl:px-12 py-3 sm:py-4 md:py-5 lg:py-5 xl:py-5 text-base sm:text-lg md:text-lg lg:text-lg xl:text-lg font-bold text-slate-600 transition-all bg-white border border-slate-200 rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl shadow-soft hover:bg-slate-50 hover:border-slate-300">
+                        <span data-i18n="facultyDirectory">Direktori Dosen</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+    <!-- Footer -->
+<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">
@@ -1219,6 +1198,870 @@
                 style="object-position: bottom;">
         </div>
     </footer>
+<!-- Data Shared -->
+
+    <!-- JavaScript untuk Logic Bilingual, Data Dummy, dan Filtering -->
+    <script>
+        let risetData = []; // Akan diisi dari data dashboard
+
+
+        const dosenData = {
+            ai: [
+                { initials: 'T', name: 'Tursina, S.T.,M.Cs.', nip: '197205102005011002', expertise: 'Machine Learning, Deep Learning', badge_id: 'Lektor Kepala', badge_en: 'Associate Professor' },
+                { initials: 'RH', name: 'Rina Hartati, Ph.D', nip: '197809142009012003', expertise: 'Computer Vision, NLP', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'MT', name: 'Dr. M. Taufik, M.T', nip: '197403062000031001', expertise: 'Algoritma Optimasi, AI', badge_id: 'Guru Besar', badge_en: 'Professor' },
+                { initials: 'YR', name: 'Yusuf Rizky, M.Kom', nip: '198811072015041001', expertise: 'Data Mining, Fuzzy Logic', badge_id: 'Lektor', badge_en: 'Assistant Professor' }
+            ],
+            algo: [
+                { initials: 'IS', name: 'Dr. Irwan Syaiful, S.T., M.T.', nip: '197508252003121001', expertise: 'Algorithm Design, Complexity Analysis', badge_id: 'Guru Besar', badge_en: 'Professor' },
+                { initials: 'WK', name: 'Wardani Kusuma, M.Kom', nip: '198704112016042001', expertise: 'Data Structures, Graph Theory', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'RP', name: 'Rachmat Purba, M.Sc', nip: '198806202015041002', expertise: 'Dynamic Programming, Optimization', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'LS', name: 'Liza Surya, M.Kom', nip: '199003142018031001', expertise: 'Competitive Programming, Algorithms', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
+            ],
+            rpl: [
+                { initials: 'HA', name: 'H. Hengky Anra, S.T., M.Kom.', nip: '197602142003121001', expertise: 'Software Testing, DevOps', badge_id: 'Lektor Kepala', badge_en: 'Associate Professor' },
+                { initials: 'PN', name: 'Putri Nabila, M.Kom', nip: '199005132017042001', expertise: 'UX Research, Agile', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' },
+                { initials: 'YS', name: 'Dr. Yudha Santosa, M.T', nip: '197801152003121002', expertise: 'Cloud Engineering, SRE', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'BW', name: 'Bayu Wicaksono, M.Kom', nip: '198706122015041002', expertise: 'Mobile Dev, React Native', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
+            ],
+            net: [
+                { initials: 'HP', name: 'Heri Priyanto, S.T., M.T.', nip: '197604212003121001', expertise: 'Network Security, Cloud', badge_id: 'Guru Besar', badge_en: 'Professor' },
+                { initials: 'SA', name: 'Siti Aisyah, M.Kom', nip: '198912082016042001', expertise: 'Cybersecurity, Forensik', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'BK', name: 'Budi Kurniawan, M.T', nip: '198204062009121001', expertise: 'IoT, Wireless Sensor', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'HM', name: 'Hamid Maulana, M.T', nip: '198507162012121001', expertise: 'Network Admin, SDN', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
+            ],
+            si: [
+                { initials: 'YS', name: 'Dr. Ir. Yus Sholva, S.T., M.T.', nip: '197809252004012001', expertise: 'GIS, Geospatial Analytics', badge_id: 'Lektor Kepala', badge_en: 'Associate Professor' },
+                { initials: 'FN', name: 'Fadli Nugraha, M.Sc', nip: '198512072012121001', expertise: 'Data Science, BI', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
+                { initials: 'TH', name: 'Dr. Tria Hastuti, M.T', nip: '197711132003122001', expertise: 'E-Government, MIS', badge_id: 'Guru Besar', badge_en: 'Professor' },
+                { initials: 'KS', name: 'Krisna Santoso, M.Kom', nip: '199201212018031001', expertise: 'Big Data, ETL', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
+            ]
+        };
+
+        const kbkMeta = {
+            ai: {
+                label_id: 'Kecerdasan Buatan',
+                label_en: 'Artificial Intelligence',
+                accent: 'from-sky-500/15 to-cyan-400/10',
+                icon: 'fa-solid fa-brain',
+                insightBadge_id: 'KBK Insight',
+                insightBadge_en: 'KBK Insight',
+                insightDesc_id: 'KBK ini berfokus pada pengembangan sistem cerdas yang mampu memahami pola, bahasa, citra, dan pengambilan keputusan adaptif.',
+                insightDesc_en: 'This group focuses on intelligent systems that can understand patterns, language, images, and adaptive decision making.',
+                focus_id: 'Eksplorasi machine learning, deep learning, NLP, dan computer vision untuk menjawab problem nyata lintas sektor.',
+                focus_en: 'Explores machine learning, deep learning, NLP, and computer vision to address practical cross-sector problems.',
+                output_id: 'Luaran utama berupa model prediktif, prototipe sistem cerdas, dataset terkurasi, dan publikasi berbasis eksperimen.',
+                output_en: 'Primary outputs include predictive models, intelligent system prototypes, curated datasets, and experiment-driven publications.',
+                collab_id: 'Cocok untuk kolaborasi pada analitik data, otomasi proses, klasifikasi citra, dan pengolahan bahasa Indonesia.',
+                collab_en: 'Suitable for collaborations in data analytics, process automation, image classification, and Indonesian language processing.',
+                topics: ['Vision', 'NLP', 'Deep Learning', 'Data Mining']
+            },
+            algo: {
+                label_id: 'Algoritma Pemrograman',
+                label_en: 'Programming & Algorithms',
+                accent: 'from-purple-500/15 to-pink-400/10',
+                icon: 'fa-solid fa-code-branch',
+                insightBadge_id: 'KBK Insight',
+                insightBadge_en: 'KBK Insight',
+                insightDesc_id: 'KBK ini berfokus pada desain algoritma efisien, analisis kompleksitas, struktur data, dan optimasi performa kode.',
+                insightDesc_en: 'This group focuses on efficient algorithm design, complexity analysis, data structures, and code performance optimization.',
+                focus_id: 'Eksplorasi paradigma pemrograman, algoritma greedy, dynamic programming, graph algorithms, dan competitive programming.',
+                focus_en: 'Explores programming paradigms, greedy algorithms, dynamic programming, graph algorithms, and competitive programming.',
+                output_id: 'Luaran berupa library algoritma, tool analisis kompleksitas, dokumentasi best practices, dan publikasi penelitian algoritmik.',
+                output_en: 'Outputs include algorithm libraries, complexity analysis tools, best practice documentation, and algorithmic research publications.',
+                collab_id: 'Cocok untuk optimasi sistem, analisis performa aplikasi, pengembangan competitive programming, dan research komputasi.',
+                collab_en: 'Suitable for system optimization, application performance analysis, competitive programming development, and computational research.',
+                topics: ['Algorithms', 'Data Structures', 'Complexity', 'Optimization']
+            },
+            rpl: {
+                label_id: 'Rekayasa PL',
+                label_en: 'Software Engineering',
+                accent: 'from-amber-400/20 to-orange-400/10',
+                icon: 'fa-solid fa-code',
+                insightBadge_id: 'KBK Insight',
+                insightBadge_en: 'KBK Insight',
+                insightDesc_id: 'KBK ini menggarap proses rekayasa perangkat lunak dari perancangan, implementasi, pengujian, hingga keberlanjutan sistem.',
+                insightDesc_en: 'This group works across the full software engineering lifecycle from design and implementation to testing and system sustainability.',
+                focus_id: 'Fokus pada arsitektur modern, kualitas perangkat lunak, DevOps, pengujian, serta pengalaman pengguna yang terukur.',
+                focus_en: 'Focuses on modern architecture, software quality, DevOps, testing, and measurable user experience.',
+                output_id: 'Luaran berupa aplikasi siap pakai, pipeline CI/CD, framework pengujian, dokumentasi teknis, dan studi evaluasi kualitas.',
+                output_en: 'Outputs include production-ready applications, CI/CD pipelines, testing frameworks, technical documentation, and quality evaluation studies.',
+                collab_id: 'Relevan untuk pengembangan platform digital, audit kualitas aplikasi, transformasi proses bisnis, dan modernisasi sistem lama.',
+                collab_en: 'Relevant for digital platform development, application quality audits, business process transformation, and legacy modernization.',
+                topics: ['DevOps', 'Agile', 'Testing', 'Architecture']
+            },
+            net: {
+                label_id: 'Jaringan & Keamanan',
+                label_en: 'Network & Security',
+                accent: 'from-emerald-500/15 to-teal-400/10',
+                icon: 'fa-solid fa-shield-halved',
+                insightBadge_id: 'KBK Insight',
+                insightBadge_en: 'KBK Insight',
+                insightDesc_id: 'KBK ini menitikberatkan pada infrastruktur jaringan yang tangguh, aman, dan siap mendukung layanan digital berskala besar.',
+                insightDesc_en: 'This group emphasizes resilient, secure network infrastructure ready to support large-scale digital services.',
+                focus_id: 'Riset mencakup keamanan siber, cloud, IoT, monitoring jaringan, forensik digital, dan desain arsitektur terpercaya.',
+                focus_en: 'Research spans cybersecurity, cloud, IoT, network monitoring, digital forensics, and trusted architecture design.',
+                output_id: 'Luaran berupa rancangan arsitektur, sistem monitoring, simulasi keamanan, dashboard operasional, dan rekomendasi mitigasi risiko.',
+                output_en: 'Outputs include architecture blueprints, monitoring systems, security simulations, operational dashboards, and risk mitigation recommendations.',
+                collab_id: 'Tepat untuk kerja sama pada audit keamanan, monitoring infrastruktur, smart device, dan penerapan zero trust.',
+                collab_en: 'Well suited for partnerships in security audits, infrastructure monitoring, smart devices, and zero-trust adoption.',
+                topics: ['Cybersec', 'IoT', 'Cloud', 'Forensics']
+            },
+            si: {
+                label_id: 'Sistem Informasi',
+                label_en: 'Information Systems',
+                accent: 'from-indigo-500/15 to-blue-400/10',
+                icon: 'fa-solid fa-database',
+                insightBadge_id: 'KBK Insight',
+                insightBadge_en: 'KBK Insight',
+                insightDesc_id: 'KBK ini membangun solusi berbasis data untuk mendukung pengambilan keputusan, tata kelola informasi, dan pemetaan kebutuhan organisasi.',
+                insightDesc_en: 'This group builds data-driven solutions to support decision making, information governance, and organizational needs mapping.',
+                focus_id: 'Topik utama mencakup business intelligence, GIS, big data, data warehouse, dan sistem pendukung keputusan.',
+                focus_en: 'Its main topics include business intelligence, GIS, big data, data warehousing, and decision support systems.',
+                output_id: 'Luaran berupa dashboard analitik, model pelaporan, sistem berbasis geospasial, serta integrasi data untuk kebutuhan strategis.',
+                output_en: 'Outputs include analytics dashboards, reporting models, geospatial systems, and data integration for strategic needs.',
+                collab_id: 'Sangat relevan untuk proyek tata kelola data, pemetaan wilayah, evaluasi kebijakan, dan insight operasional lembaga.',
+                collab_en: 'Highly relevant for data governance projects, regional mapping, policy evaluation, and institutional operational insights.',
+                topics: ['Big Data', 'GIS', 'BI', 'Decision Support']
+            }
+        };
+
+        const rodaTranslations = {
+            id: {
+                info: 'INFO TERBARU',
+                tickerItem1: 'Selamat datang di antarmuka situs web Informatika terbaru!',
+                tickerItem2: 'Pendaftaran kolaborasi riset semester genap telah dibuka.',
+                tickerItem3: 'Pantau publikasi dosen dan mahasiswa secara real-time.',
+                home: 'BERANDA',
+                pageTitle: 'RISET & KBK',
+                badgeHero: 'Riset & Kelompok Bidang Keahlian',
+                heroTitle: 'Riset & Kelompok Bidang Keahlian',
+                heroDesc: 'Kenali Kelompok Bidang Keahlian (KBK) kami. Jelajahi riset unggulan dosen dan mahasiswa di bidang Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, hingga IoT',
+                quickActionKbk: 'Jelajahi KBK',
+                quickActionRiset: 'Cari Publikasi',
+                kbkTitle: '4 Pilar Keilmuan Informatika UNTAN',
+                kbkDesc: 'Setiap KBK berfokus pada topik riset spesifik, dipimpin dosen berpengalaman.',
+                kbkLeadLabel: 'Dipimpin oleh',
+                kbkFocusLabel: 'Arah Riset',
+                kbkOutputLabel: 'Luaran Utama',
+                kbkCollabLabel: 'Peluang Kolaborasi',
+                kbkTopicLabel: 'Topik Kunci',
+                statsPub: 'Hasil Penelitian',
+                statsSinta: 'Skor SINTA',
+                statsDosen: 'Dosen Homebase',
+                statsKolaborasi: 'Kerjasama Aktif',
+                statsMhs: 'Mahasiswa Aktif',
+                risetTitle: 'Publikasi & Penelitian Terkini',
+                searchLabel: 'Cari publikasi',
+                searchPlaceholder: 'Cari judul, penulis, atau venue...',
+                noResultTitle: 'Tidak ada publikasi yang cocok',
+                noResultDesc: 'Coba kata kunci lain atau ganti filter KBK.',
+                filterAll: 'Semua',
+                filterAI: 'Kecerdasan Buatan',
+                filterAlgo: 'Algoritma Pemrograman',
+                filterRPL: 'Rekayasa PL',
+                filterNet: 'Jaringan & Keamanan',
+                filterSI: 'Sistem Informasi',
+                dosenTitle: 'Peneliti & Dosen per Kelompok Keahlian',
+                dosenLeadDesc: 'Bagian ini menampilkan ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.',
+                kbkLeader: 'Ketua KBK',
+                viewMembers: 'Lihat dosen lainnya',
+                kbkAIDesc: 'Sistem cerdas berbasis AI, deep learning, vision, dan NLP untuk solusi nyata.',
+                kbkRPLDesc: 'Metodologi, arsitektur, dan kualitas perangkat lunak modern serta DevOps.',
+                kbkNetDesc: 'Infrastruktur jaringan handal, keamanan siber, dan teknologi Cloud/IoT.',
+                kbkSIDesc: 'Manajemen informasi, GIS, big data, dan sistem pendukung keputusan.',
+                labComputerDesc: 'Mendukung mata kuliah pemrograman dasar hingga lanjut, pengembangan aplikasi web, mobile, dan rekayasa perangkat lunak.',
+                labDataDesc: 'Mendukung pembelajaran basis data, pemodelan data, data warehousing, dan analitik data skala besar.',
+                labInfoDesc: 'Merancang arsitektur sistem informasi, memodelkan proses bisnis digital, serta menumbuhkan jiwa technopreneurship.',
+                labAIDesc: 'Pusat riset machine learning, deep learning, computer vision, NLP, dan pengembangan sistem kecerdasan buatan berbasis data.',
+                labNetDesc: 'Sarana praktik jaringan, konfigurasi router/switch, keamanan siber, administrasi sistem, dan pengembangan perangkat IoT.',
+                labTitle: 'Laboratorium Pendukung Riset',
+                ctaTitle: 'Tertarik Berkolaborasi dengan KBK Kami?',
+                ctaDesc: 'Kami terbuka untuk kolaborasi riset, kemitraan industri, maupun skripsi bersama dosen ahli kami.',
+                ctaBtn: 'Hubungi Kami',
+                viewAll: 'Lihat Semua',
+                facultyDirectory: 'Direktori Dosen',
+                expertise: 'Keahlian',
+                lastUpdatedText: 'Halaman ini terakhir diperbarui pada: ',
+                showingRiset: 'Tampilkan',
+                showingPubs: 'Menampilkan {0} dari {1} publikasi',
+                labDesc: '5 laboratorium modern dengan 93 unit PC All-in-One yang mendukung kegiatan riset strategis dan pengembangan teknologi dosen serta mahasiswa.',
+                labKom: 'Lab Komputer & Pemrograman',
+                labNet: 'Lab Jaringan, Keamanan & IoT',
+                labData: 'Lab Rekayasa PL & Data',
+                labSI: 'Lab Teknologi & Sistem Informasi',
+                labAI: 'Lab Komputasi & Kecerdasan Buatan',
+                mhs: 'Mahasiswa'
+            },
+            en: {
+                info: 'LATEST INFO',
+                tickerItem1: 'Welcome to the new Informatics website interface!',
+                tickerItem2: 'Research collaboration registration for this semester is open.',
+                tickerItem3: 'Track faculty and student publications in one place.',
+                home: 'HOME',
+                pageTitle: 'RESEARCH & KBK',
+                badgeHero: 'Research & Research Groups',
+                heroTitle: 'Research & Research Groups',
+                heroDesc: 'Get to know our Research Groups (KBK). Explore leading research by faculty and students in the fields of AI, Software Engineering, and IoT.',
+                quickActionKbk: 'Explore KBK',
+                quickActionRiset: 'Search Publications',
+                kbkTitle: '4 Pillars of Informatics Science at UNTAN',
+                kbkDesc: 'Each group focuses on specific research topics, led by experienced faculty.',
+                kbkLeadLabel: 'Led by',
+                kbkFocusLabel: 'Research Direction',
+                kbkOutputLabel: 'Primary Outputs',
+                kbkCollabLabel: 'Collaboration Potential',
+                kbkTopicLabel: 'Key Topics',
+                statsPub: 'Research Output',
+                statsSinta: 'SINTA Score',
+                statsDosen: 'Faculty Members',
+                statsKolaborasi: 'Active Partnerships',
+                statsMhs: 'Active Students',
+                risetTitle: 'Latest Publications & Research',
+                searchLabel: 'Search publications',
+                searchPlaceholder: 'Search by title, author, or venue...',
+                noResultTitle: 'No matching publications found',
+                noResultDesc: 'Try another keyword or switch KBK filter.',
+                filterAll: 'All',
+                filterAI: 'Artificial Intelligence',
+                filterAlgo: 'Programming & Algorithms',
+                filterRPL: 'Software Engineering',
+                filterNet: 'Network & Security',
+                filterSI: 'Information Systems',
+                dosenTitle: 'Faculty & Researchers by Research Group',
+                dosenLeadDesc: 'This section shows the head of each research group. Open a card to view the other faculty members in that group.',
+                kbkLeader: 'Head of KBK',
+                viewMembers: 'View other faculty',
+                kbkAIDesc: 'AI-based intelligent systems, deep learning, computer vision, and NLP for real-world solutions.',
+                kbkRPLDesc: 'Methodology, architecture, and quality of modern software and DevOps.',
+                kbkNetDesc: 'Reliable network infrastructure, cybersecurity, and Cloud/IoT technology.',
+                kbkSIDesc: 'Information management, GIS, big data, and decision support systems.',
+                labComputerDesc: 'Support for basic to advanced programming courses, web application development, mobile, and software engineering.',
+                labDataDesc: 'Support for database learning, data modeling, data warehousing, and large-scale data analytics.',
+                labInfoDesc: 'Design information system architecture, model digital business processes, and foster entrepreneurship spirit.',
+                labAIDesc: 'Center for machine learning, deep learning, computer vision, NLP research, and data-driven AI system development.',
+                labNetDesc: 'Network practice facilities, router/switch configuration, cybersecurity, system administration, and IoT device development.',
+                labTitle: 'Research Support Laboratories',
+                ctaTitle: 'Interested in Collaborating with Us?',
+                ctaDesc: 'We are open to research collaborations, industry partnerships, or thesis projects with our experts.',
+                ctaBtn: 'Contact Us',
+                viewAll: 'View All',
+                facultyDirectory: 'Faculty Directory',
+                expertise: 'Expertise',
+                lastUpdatedText: 'This page was last updated on: ',
+                showingRiset: 'Showing',
+                showingPubs: 'Showing {0} of {1} publications',
+                labDesc: '5 modern laboratories with 93 All-in-One PCs supporting strategic research and technological development for faculty and students.',
+                labKom: 'Computer & Programming Lab',
+                labNet: 'Networking, Security & IoT Lab',
+                labData: 'Software & Data Engineering Lab',
+                labSI: 'Information Technology & Systems Lab',
+                labAI: 'Computing & Artificial Intelligence Lab',
+                mhs: 'Student'
+            }
+        };
+
+
+        let currentFilter = 'all';
+        let currentQuery = '';
+        let currentKbkInsight = 'ai';
+        let isLoadingData = true;
+        let displayLimit = 9; // Default limit
+
+
+        const KBK_KEYWORDS = {
+            ai: ['kecerdasan', 'artificial', 'intelligence', 'neural', 'cnn', 'rnn', 'deep', 'machine', 'vision', 'nlp', 'genetika', 'optimasi', 'mining', 'pakar', 'heurisitik'],
+            algo: ['algoritma', 'algorithm', 'pemrograman', 'programming', 'structure', 'data structure', 'sorting', 'searching', 'complexity', 'kompleksitas'],
+            rpl: ['perangkat lunak', 'software', 'microservices', 'devops', 'testing', 'agile', 'scrum', 'framework', 'ux', 'mobile', 'react', 'kualitas', 'arsitektur'],
+            net: ['jaringan', 'network', 'cloud', 'iot', 'internet', 'things', 'security', 'keamanan', 'cyber', 'zero trust', 'wireless', 'sensor', 'routing', 'switching'],
+            si: ['sistem informasi', 'information systems', 'gis', 'geospatial', 'big data', 'bi', 'business', 'warehouse', 'mis', 'government', 'spk', 'keputusan', 'tata kelola']
+        };
+
+        function categorizeByKeywords(title) {
+            const lowTitle = title.toLowerCase();
+            for (const [kbk, keywords] of Object.entries(KBK_KEYWORDS)) {
+                if (keywords.some(k => lowTitle.includes(k))) return kbk;
+            }
+            return 'si'; // Default to SI if no match
+        }
+
+        function logAppError(scope, error, extra = {}) {
+            if (window.APP_CONFIG?.debugLogs !== true) return;
+            console.error(`[${scope}]`, error, extra);
+        }
+
+        function getDashboardErrorMessage(error) {
+            if (!error) return 'Terjadi kendala yang tidak diketahui saat memuat data.';
+            if (error.name === 'AbortError') return 'Koneksi ke dashboard terlalu lambat (timeout).';
+            if (error.message === 'INVALID_CONFIG') return 'Konfigurasi API belum lengkap. Periksa file .env dan jalankan lewat server lokal.';
+            if (error.message === 'INVALID_RESPONSE') return 'Respons dari proxy tidak valid dan tidak bisa diproses.';
+            if (error.message === 'EMPTY_RESPONSE') return 'Dashboard mengembalikan data kosong atau struktur halaman berubah.';
+            if (error.message === 'NO_ROWS_FOUND') return 'Data penelitian tidak ditemukan pada halaman dashboard.';
+            if (error.message === 'DASHBOARD_PROXY_NOT_CONFIGURED') return 'Proxy dashboard belum dikonfigurasi.';
+            if (error.message === 'DASHBOARD_RUNTIME_FETCH_DISABLED') return 'Data publikasi belum tersedia pada build ini.';
+            if (error.message?.startsWith('HTTP_ERROR_')) return `Proxy merespons gagal (${error.message.replace('HTTP_ERROR_', 'HTTP ')}).`;
+            return 'Gagal mengambil data. Server dashboard mungkin sedang sibuk atau memblokir akses.';
+        }
+
+        function renderRisetFeedback(title, message, buttonLabel = '', buttonAction = '') {
+            const grid = document.getElementById('riset-grid');
+            if (!grid) return;
+
+            const actionHtml = buttonLabel && buttonAction
+                ? `<button onclick="${buttonAction}" class="px-6 py-2 bg-red-500 text-white rounded-xl font-bold text-sm hover:bg-red-600 transition-colors">${buttonLabel}</button>`
+                : '';
+
+            grid.innerHTML = `
+                <div class="md:col-span-2 lg:col-span-3 bg-red-50 border border-red-100 rounded-3xl p-12 text-center">
+                    <div class="w-14 h-14 rounded-2xl bg-white text-red-500 mx-auto mb-4 flex items-center justify-center shadow-soft">
+                        <i class="fa-solid fa-triangle-exclamation text-lg"></i>
+                    </div>
+                    <h3 class="text-lg font-bold text-red-900 mb-2">${title}</h3>
+                    <p class="text-red-700 text-sm mb-4">${message}</p>
+                    ${actionHtml}
+                </div>
+            `;
+        }
+
+        function extractDashboardHtml(responseData) {
+            if (!responseData || !responseData.trim()) {
+                throw new Error('EMPTY_RESPONSE');
+            }
+
+            if (!responseData.trim().startsWith('{')) {
+                return responseData;
+            }
+
+            try {
+                const json = JSON.parse(responseData);
+                if (typeof json.contents === 'string' && json.contents.trim()) {
+                    return json.contents;
+                }
+            } catch (error) {
+                throw new Error('INVALID_RESPONSE');
+            }
+
+            throw new Error('INVALID_RESPONSE');
+        }
+
+        function parseDashboardRows(html) {
+            if (!html || html.length < 500) {
+                throw new Error('EMPTY_RESPONSE');
+            }
+
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const rows = doc.querySelectorAll('table tbody tr');
+            if (!rows.length) {
+                throw new Error('NO_ROWS_FOUND');
+            }
+
+            return rows;
+        }
+
+        function shouldUseLocalDashboardProxy() {
+            const hostname = window.location.hostname;
+            return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '';
+        }
+
+        function isDashboardRuntimeFetchAllowed() {
+            const mode = window.APP_CONFIG?.dashboardRuntimeFetch;
+            return mode === true || mode === 'always' || (mode === 'local' && shouldUseLocalDashboardProxy());
+        }
+
+        function readEmbeddedDashboardHtml() {
+            const source = document.getElementById('roda-dashboard-html');
+            if (!source) return '';
+
+            try {
+                return JSON.parse(source.textContent || '""') || '';
+            } catch (error) {
+                return source.textContent || '';
+            }
+        }
+
+        function applyDashboardRows(rows) {
+            const newData = [];
+            rows.forEach((row) => {
+                const cols = row.querySelectorAll('td');
+                if (cols.length >= 3) {
+                    const indexVal = cols[0].innerText.trim();
+
+                    // Mencari elemen judul (biasanya di dalam <a> atau <b>)
+                    const linkEl = cols[1].querySelector('a');
+                    const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
+                    const url = linkEl ? linkEl.getAttribute('href') : '#';
+                    const title = titleEl.innerText.trim();
+
+                    // Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
+                    if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
+                        return;
+                    }
+
+                    // Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
+                    const authorsEl = cols[1].querySelector('font');
+                    const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
+
+                    // Tahun biasanya ada di kolom berikutnya
+                    const year = cols[2]?.innerText.trim() || '2025';
+
+                    const kbk = categorizeByKeywords(title);
+                    const kbkInfo = kbkMeta[kbk];
+
+                    newData.push({
+                        id: parseInt(indexVal) || (newData.length + 1),
+                        kbk: kbk,
+                        title_id: title,
+                        title_en: title,
+                        authors: authors,
+                        year: year,
+                        url: url,
+                        venue: 'Dashboard Informatika',
+                        badge_id: kbkInfo.label_id,
+                        badge_en: kbkInfo.label_en
+                    });
+                }
+            });
+
+            if (!newData.length) {
+                throw new Error('NO_ROWS_FOUND');
+            }
+
+            risetData = newData;
+            isLoadingData = false;
+            renderRisetCards();
+            updateStatPub(newData.length);
+        }
+
+        async function fetchDashboardData() {
+            const grid = document.getElementById('riset-grid');
+            if (grid) {
+                grid.innerHTML = `
+                    <div class="md:col-span-2 lg:col-span-3 py-20 text-center">
+                        <div class="inline-block animate-spin w-10 h-10 border-4 border-untan-blue border-t-transparent rounded-full mb-4"></div>
+                        <p class="text-slate-500 font-bold">Mengambil data dari Dashboard...</p>
+                    </div>
+                `;
+            }
+
+            let lastError = null;
+            const embeddedHtml = readEmbeddedDashboardHtml();
+            if (embeddedHtml) {
+                try {
+                    applyDashboardRows(parseDashboardRows(embeddedHtml));
+                    return;
+                } catch (error) {
+                    lastError = error;
+                }
+            }
+
+            if (!isDashboardRuntimeFetchAllowed()) {
+                renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError || new Error('DASHBOARD_RUNTIME_FETCH_DISABLED')), 'Coba Lagi', 'fetchDashboardData()');
+                return;
+            }
+
+            const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
+            const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
+                ? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
+                : [];
+
+            // Endpoint server.js hanya ada saat development lokal.
+            const proxyServers = shouldUseLocalDashboardProxy() ? [() => '/api/dashboard'] : [];
+
+            // Deployment static memakai proxy publik karena tidak menjalankan server.js.
+            if (targetUrl) {
+                proxyTemplates.forEach((template) => {
+                    proxyServers.push((url) => template
+                        .replaceAll('{{url}}', encodeURIComponent(url))
+                        .replaceAll('{{rawUrl}}', url)
+                        .replaceAll('{{ts}}', String(Date.now())));
+                });
+            }
+
+            if (!proxyServers.length) {
+                renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(new Error('DASHBOARD_PROXY_NOT_CONFIGURED')), 'Coba Lagi', 'fetchDashboardData()');
+                return;
+            }
+
+            for (const getProxyUrl of proxyServers) {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+                try {
+                    const proxyUrl = getProxyUrl(targetUrl);
+
+                    const response = await fetch(proxyUrl, { signal: controller.signal });
+                    clearTimeout(timeoutId);
+
+                    if (!response.ok) throw new Error(`HTTP_ERROR_${response.status}`);
+
+                    const responseData = await response.text();
+                    const html = extractDashboardHtml(responseData);
+                    const rows = parseDashboardRows(html);
+                    applyDashboardRows(rows);
+                    return; // Berhasil! Keluar dari loop
+                } catch (error) {
+                    clearTimeout(timeoutId);
+                    lastError = error;
+                    // Lanjut ke proxy berikutnya...
+                }
+            }
+
+            // Jika semua proxy gagal
+            renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError), 'Coba Lagi', 'fetchDashboardData()');
+        }
+
+
+        // Global localization.js handles translations and language toggle
+
+        function matchesQuery(item, query) {
+            const haystack = [item.title_id, item.title_en, item.authors, item.venue, item.year].join(' ').toLowerCase();
+            return haystack.includes(query);
+        }
+
+        function renderRisetCards() {
+            const grid = document.getElementById('riset-grid');
+            if (!grid) return;
+
+            try {
+                const normalizedQuery = currentQuery.trim().toLowerCase();
+                const filteredByCategory = currentFilter === 'all' ? risetData : risetData.filter((item) => item.kbk === currentFilter);
+                const filteredItems = normalizedQuery ? filteredByCategory.filter((item) => matchesQuery(item, normalizedQuery)) : filteredByCategory;
+
+                // Terapkan limit tampilan
+                const itemsToShow = filteredItems.slice(0, displayLimit);
+
+                // Update info jumlah data yang ditampilkan
+                const countInfo = document.getElementById('riset-count-info');
+                if (countInfo) {
+                    const template = translations[currentLang].showingPubs || `Menampilkan {0} dari {1} publikasi`;
+                    countInfo.innerText = template.replace('{0}', itemsToShow.length).replace('{1}', filteredItems.length);
+                }
+
+                // Tampilkan/Sembunyikan tombol "Lihat Semua" berdasarkan sisa data
+                const viewAllSection = document.getElementById('view-all-section');
+                if (viewAllSection) {
+                    viewAllSection.style.display = filteredItems.length > displayLimit ? 'block' : 'none';
+                }
+
+                if (!itemsToShow.length) {
+                    grid.innerHTML = `
+                        <div class="md:col-span-2 lg:col-span-3 bg-slate-50 border border-slate-100 rounded-3xl p-12 text-center">
+                            <div class="w-14 h-14 rounded-2xl bg-white text-untan-navy mx-auto mb-4 flex items-center justify-center shadow-soft">
+                                <i class="fa-solid fa-magnifying-glass text-lg"></i>
+                            </div>
+                            <h3 class="text-lg font-bold text-untan-navy mb-2">${translations[currentLang].noResultTitle}</h3>
+                            <p class="text-slate-500 text-sm">${translations[currentLang].noResultDesc}</p>
+                        </div>
+                    `;
+                    return;
+                }
+
+                grid.innerHTML = itemsToShow.map((item) => `
+                    <a href="${item.url}" target="_blank" class="bg-white rounded-3xl p-6 sm:p-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
+                        <div class="mb-6">
+                            <span class="inline-block max-w-full bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider leading-tight text-center border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-untan-navy mb-4 leading-snug line-clamp-3 group-hover:text-untan-blue transition-colors">${currentLang === 'id' ? item.title_id : item.title_en}</h3>
+                        <p class="text-gray-500 text-xs mb-1 italic">${item.authors}</p>
+                        <p class="text-gray-400 text-[10px] font-mono mb-8">${item.year}</p>
+                        <div class="mt-auto pt-6 border-t border-gray-50 flex justify-between items-center text-slate-400">
+                            <span class="text-[11px] font-medium line-clamp-1 italic">${item.venue}</span>
+                            <i class="fa-regular fa-file-lines group-hover:text-untan-yellow transition-colors"></i>
+                        </div>
+                    </a>
+                `).join('');
+            } catch (error) {
+                logAppError('renderRisetCards', error);
+                renderRisetFeedback('Tampilan Publikasi Bermasalah', 'Terjadi kesalahan saat menampilkan daftar publikasi.', 'Muat Ulang Data', 'fetchDashboardData()');
+            }
+        }
+
+        function updateStatPub(count) {
+            const el = document.getElementById('stat-pub');
+            if (!el) return;
+            const rounded = count >= 400 ? '400+' : count >= 300 ? '300+' : count >= 200 ? '200+' : count + '+';
+            el.textContent = rounded;
+        }
+
+        function renderDosenCards() {
+            const grid = document.getElementById('dosen-grid');
+            if (!grid) return;
+            grid.innerHTML = Object.entries(dosenData).filter(([kbk]) => kbk !== 'algo').map(([kbk, members]) => {
+                const leader = members[0];
+                const meta = kbkMeta[kbk];
+                const label = currentLang === 'id' ? meta.label_id : meta.label_en;
+                const rank = currentLang === 'id' ? leader.badge_id : leader.badge_en;
+                let kbk_id = '#kk-4';
+                if (kbk === 'ai') {
+                    kbk_id = '#kk-1';
+                } else if (kbk === 'rpl') {
+                    kbk_id = '#kk-3';
+                } else if (kbk === 'net') {
+                    kbk_id = '#kk-2';
+                } else if (kbk === 'si') {
+                    kbk_id = '#kk-4';
+                }
+                return `
+                    <a href="https://informatika.untan.ac.id/people-based-on-kk.html${kbk_id}" class="group block rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl overflow-hidden border border-slate-100 bg-white shadow-soft hover:-translate-y-2 hover:shadow-soft-lg transition-all duration-500">                        <div class="p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 bg-gradient-to-br ${meta.accent} border-b border-slate-100">
+                            <div class="flex items-start justify-between gap-3 sm:gap-4">
+                                <div>
+                                    <span class="inline-flex items-center gap-1.5 text-[9px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-[0.22em] text-untan-blue/80">
+                                        <i class="${meta.icon}"></i>
+                                        ${label}
+                                    </span>
+                                    <p class="mt-2 text-[9px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-[0.22em] text-slate-400">${translations[currentLang].kbkLeader}</p>
+                                </div>
+                                <div class="w-12 h-12 sm:w-12 md:w-14 lg:w-14 xl:w-14 sm:h-12 md:h-14 lg:h-14 xl:h-14 rounded-xl sm:rounded-xl md:rounded-2xl bg-untan-navy flex items-center justify-center text-white font-bold text-lg sm:text-lg md:text-xl lg:text-xl shadow-soft flex-shrink-0">${leader.initials}</div>
+                            </div>
+                            <h4 class="text-base sm:text-base md:text-lg lg:text-lg font-bold text-untan-navy leading-snug mt-5 sm:mt-5 md:mt-6">${leader.name}</h4>
+                            <p class="mt-1.5 text-[9px] sm:text-[9px] md:text-[10px] font-mono text-slate-400">NIP ${leader.nip}</p>
+                        </div>
+                        <div class="p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 flex flex-col">
+                            <p class="text-xs sm:text-xs md:text-sm text-slate-500 leading-relaxed">${translations[currentLang].expertise}: ${leader.expertise}</p>
+                            <div class="mt-auto pt-5 sm:pt-6 flex items-end justify-between gap-3">
+                                <span class="inline-flex flex-col gap-0.5 text-[8px] sm:text-[8px] md:text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400">
+                                    ${rank.split(' ').join('<br>')}
+                                </span>
+                                <span class="inline-flex items-center justify-end gap-2 text-right text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors">
+                                    ${translations[currentLang].viewMembers}
+                                    <i class="fa-solid fa-arrow-right transition-transform group-hover:translate-x-1"></i>
+                                </span>
+                            </div>
+                        </div>
+                    </a>
+                `;
+            }).join('');
+        }
+
+        function renderKbkInsight() {
+            const meta = kbkMeta[currentKbkInsight];
+            const leader = dosenData[currentKbkInsight][0];
+            if (!meta || !leader) return;
+
+            const title = currentLang === 'id' ? meta.label_id : meta.label_en;
+            const badge = currentLang === 'id' ? meta.insightBadge_id : meta.insightBadge_en;
+            const desc = currentLang === 'id' ? meta.insightDesc_id : meta.insightDesc_en;
+            const focus = currentLang === 'id' ? meta.focus_id : meta.focus_en;
+            const output = currentLang === 'id' ? meta.output_id : meta.output_en;
+            const collab = currentLang === 'id' ? meta.collab_id : meta.collab_en;
+            const rank = currentLang === 'id' ? leader.badge_id : leader.badge_en;
+
+            const badgeEl = document.getElementById('kbk-insight-badge');
+            const iconEl = document.getElementById('kbk-insight-icon');
+            const titleEl = document.getElementById('kbk-insight-title');
+            const descEl = document.getElementById('kbk-insight-desc');
+            const leadLabelEl = document.getElementById('kbk-insight-lead-label');
+            const leadInitialsEl = document.getElementById('kbk-insight-lead-initials');
+            const leadNameEl = document.getElementById('kbk-insight-lead-name');
+            const leadRankEl = document.getElementById('kbk-insight-lead-rank');
+            const focusLabelEl = document.getElementById('kbk-focus-label');
+            const focusTextEl = document.getElementById('kbk-focus-text');
+            const outputLabelEl = document.getElementById('kbk-output-label');
+            const outputTextEl = document.getElementById('kbk-output-text');
+            const collabLabelEl = document.getElementById('kbk-collab-label');
+            const collabTextEl = document.getElementById('kbk-collab-text');
+            const topicLabelEl = document.getElementById('kbk-topic-label');
+            const topicTagsEl = document.getElementById('kbk-topic-tags');
+            const heroEl = document.getElementById('kbk-insight-hero');
+
+            if (!badgeEl || !iconEl || !titleEl || !descEl || !leadLabelEl || !leadInitialsEl || !leadNameEl || !leadRankEl || !focusLabelEl || !focusTextEl || !outputLabelEl || !outputTextEl || !collabLabelEl || !collabTextEl || !topicLabelEl || !topicTagsEl || !heroEl) return;
+
+            heroEl.className = `p-8 lg:p-10 border-b lg:border-b-0 lg:border-r border-slate-100 bg-gradient-to-br ${meta.accent}`;
+            iconEl.className = meta.icon;
+            badgeEl.textContent = badge;
+            titleEl.textContent = title;
+            descEl.textContent = desc;
+            leadLabelEl.textContent = translations[currentLang].kbkLeadLabel;
+            leadInitialsEl.textContent = leader.initials;
+            leadNameEl.textContent = leader.name;
+            leadRankEl.textContent = rank;
+            focusLabelEl.textContent = translations[currentLang].kbkFocusLabel;
+            focusTextEl.textContent = focus;
+            outputLabelEl.textContent = translations[currentLang].kbkOutputLabel;
+            outputTextEl.textContent = output;
+            collabLabelEl.textContent = translations[currentLang].kbkCollabLabel;
+            collabTextEl.textContent = collab;
+            topicLabelEl.textContent = translations[currentLang].kbkTopicLabel;
+            topicTagsEl.innerHTML = meta.topics.map((topic) => `
+                <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-[11px] font-bold text-slate-500">${topic}</span>
+            `).join('');
+
+            document.querySelectorAll('[data-kbk-card]').forEach((card) => {
+                const active = card.getAttribute('data-kbk-card') === currentKbkInsight;
+                card.classList.toggle('border-untan-yellow', active);
+                card.classList.toggle('ring-2', active);
+                card.classList.toggle('ring-untan-blue/10', active);
+            });
+        }
+
+        window.openKbkInsight = function (kbk, shouldScroll = true) {
+            if (!kbkMeta[kbk]) return;
+            currentKbkInsight = kbk;
+            renderKbkInsight();
+
+            if (shouldScroll) {
+                const section = document.getElementById('kbk-insight-section');
+                if (section) {
+                    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            }
+        };
+
+        window.searchRiset = function (query) {
+            currentQuery = String(query || '').trim().toLowerCase();
+            const clearButton = document.getElementById('clear-riset-search');
+            if (clearButton) {
+                clearButton.classList.toggle('hidden', currentQuery.length === 0);
+            }
+            renderRisetCards();
+        };
+
+        window.filterRiset = function (category) {
+            currentFilter = category;
+            displayLimit = 9; // Reset limit saat ganti filter
+            document.querySelectorAll('.filter-btn').forEach((button) => {
+                const active = button.getAttribute('data-filter') === category;
+                button.className = `filter-btn px-5 py-2.5 rounded-lg font-bold text-[11px] uppercase tracking-wider transition-all ${active ? 'bg-untan-navy text-white shadow-soft' : 'text-slate-400 hover:bg-slate-100 hover:text-untan-navy'}`;
+            });
+            renderRisetCards();
+        };
+
+        window.setLimit = function (limit) {
+            displayLimit = limit;
+            renderRisetCards();
+
+            // Highlight active limit button
+            document.querySelectorAll('.limit-btn').forEach(btn => {
+                const isActive = parseInt(btn.getAttribute('data-limit')) === limit;
+                btn.className = `limit-btn px-4 py-2 rounded-xl text-[11px] font-bold transition-all ${isActive ? 'bg-untan-navy text-white shadow-soft' : 'bg-white text-slate-500 border border-slate-200 hover:bg-slate-50'}`;
+            });
+        };
+
+
+        function setupRevealAnimations() {
+            const revealElements = document.querySelectorAll('.reveal');
+            if (!revealElements.length) return;
+            document.body.classList.add('reveal-ready');
+
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                revealElements.forEach((element) => element.classList.add('is-visible'));
+                return;
+            }
+
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (!entry.isIntersecting) return;
+                    entry.target.classList.add('is-visible');
+                    observer.unobserve(entry.target);
+                });
+            }, { threshold: 0.12 });
+
+            revealElements.forEach((element) => observer.observe(element));
+        }
+
+        document.addEventListener('languageChanged', (e) => {
+            currentLang = e.detail.lang;
+            renderKbkInsight();
+            renderRisetCards();
+            renderDosenCards();
+
+            const lastUpdatedEl = document.getElementById("last-updated");
+            if (lastUpdatedEl) {
+                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(currentLang === 'id' ? 'id-ID' : 'en-US');
+            }
+        });
+
+        window.addEventListener('error', (event) => {
+            logAppError('window-error', event.error || new Error(event.message));
+        });
+
+        window.addEventListener('unhandledrejection', (event) => {
+            logAppError('unhandledrejection', event.reason instanceof Error ? event.reason : new Error(String(event.reason)));
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            try {
+                // Handle responsive behavior using matchMedia for reliable breakpoint detection
+                function handleResponsive() {
+                    // Use window.matchMedia for CSS breakpoint detection
+                    const isLgOrLarger = window.matchMedia('(min-width: 1024px)').matches;
+                    
+                    // Find yellow navbar (bg-[#feb401] hidden lg:block)
+                    const navs = document.querySelectorAll('nav');
+                    navs.forEach((nav) => {
+                        const classes = nav.getAttribute('class') || '';
+                        const isYellowNav = classes.includes('bg-[#feb401]');
+                        if (isYellowNav) {
+                            if (isLgOrLarger) {
+                                nav.style.setProperty('display', 'block', 'important');
+                            } else {
+                                nav.style.display = 'none';
+                            }
+                        }
+                    });
+                    
+                    // Find right list (hidden lg:flex)
+                    const rightList = document.querySelector('[class*="hidden"][class*="lg:flex"]');
+                    if (rightList) {
+                        const classes = rightList.getAttribute('class') || '';
+                        const hasHidden = classes.includes('hidden');
+                        const hasLgFlex = classes.includes('lg:flex');
+                        if (hasHidden && hasLgFlex) {
+                            if (isLgOrLarger) {
+                                rightList.style.setProperty('display', 'flex', 'important');
+                            } else {
+                                rightList.style.display = 'none';
+                            }
+                        }
+                    }
+                }
+
+                // Keep body padding-top in sync with the actual fixed navbar height
+                function syncNavHeight() {
+                    const nav = document.getElementById('nav-wrapper');
+                    if (!nav) return;
+                    document.body.style.paddingTop = nav.offsetHeight + 'px';
+                }
+
+                // Listen for real CSS media query breakpoints
+                const mediaQueryList = window.matchMedia('(min-width: 1024px)');
+                mediaQueryList.addListener((e) => {
+                    handleResponsive();
+                    syncNavHeight();
+                });
+
+                handleResponsive();
+                syncNavHeight();
+                window.addEventListener('resize', syncNavHeight);
+                window.addEventListener('load', syncNavHeight);
+                document.querySelectorAll('#nav-wrapper img').forEach((img) => {
+                    if (!img.complete) img.addEventListener('load', syncNavHeight);
+                });
+
+                setupRevealAnimations();
+                if (typeof translations !== 'undefined') {
+                    Object.assign(translations.id, rodaTranslations.id);
+                    Object.assign(translations.en, rodaTranslations.en);
+                    if (typeof applyLang === 'function') applyLang();
+                } else {
+                    currentLang = 'id';
+                    renderKbkInsight();
+                    renderRisetCards();
+                    renderDosenCards();
+                }
+                openKbkInsight(currentKbkInsight, false);
+                filterRiset(currentFilter);
+                searchRiset('');
+                fetchDashboardData().catch((error) => {
+                    renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(error), 'Coba Lagi', 'fetchDashboardData()');
+                });
+            } catch (error) {
+                logAppError('DOMContentLoaded', error);
+                renderRisetFeedback('Aplikasi Gagal Dimulai', 'Terjadi kesalahan saat inisialisasi halaman. Silakan muat ulang halaman.');
+            }
+        });
+    </script>
 
     <script>
         (function () {
@@ -1244,7 +2087,7 @@
 
                     btn.classList.toggle('active', isActive);
                     btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
-                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
+                    if (chevron) chevron.style.transform = isActive ? 'rotate(180deg)' : '';
                 });
             }
 
@@ -1254,7 +2097,7 @@
                     if (panel) panel.classList.remove('active');
                 });
 
-                megaOverlay.classList.remove('active');
+                if (megaOverlay) megaOverlay.classList.remove('active');
                 setButtonState(null);
                 activeMenu = null;
             }
@@ -1269,7 +2112,7 @@
                 });
 
                 targetPanel.classList.add('active');
-                megaOverlay.classList.add('active');
+                if (megaOverlay) megaOverlay.classList.add('active');
                 setButtonState(menuId);
                 activeMenu = menuId;
             }
@@ -1293,7 +2136,9 @@
                 });
             });
 
-            megaOverlay.addEventListener('click', closeMenus);
+            if (megaOverlay) {
+                megaOverlay.addEventListener('click', closeMenus);
+            }
 
             document.addEventListener('click', (e) => {
                 const clickedInsideNav = e.target.closest('#main-nav');
@@ -1312,27 +2157,77 @@
         })();
     </script>
 
-<script>
-    (function() {
-        const mobileBtn     = document.getElementById('mobile-menu-button');
-        const mobileMenu    = document.getElementById('mobile-menu');
-        const closeMobileBtn= document.getElementById('close-mobile-menu');
-        if (mobileBtn && mobileMenu) {
-            mobileBtn.addEventListener('click', function() {
-                const isOpen = !mobileMenu.classList.contains('-translate-x-full');
-                mobileMenu.classList.toggle('-translate-x-full');
-                mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
-            });
-        }
-        if (closeMobileBtn && mobileMenu) {
-            closeMobileBtn.addEventListener('click', function() {
-                mobileMenu.classList.add('-translate-x-full');
-                if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
-            });
-        }
-    })();
-</script>
+    <script>
+        (function() {
+            const mobileBtn     = document.getElementById('mobile-menu-button');
+            const mobileMenu    = document.getElementById('mobile-menu');
+            const closeMobileBtn= document.getElementById('close-mobile-menu');
+            if (mobileBtn && mobileMenu) {
+                mobileBtn.addEventListener('click', function() {
+                    const isOpen = !mobileMenu.classList.contains('-translate-x-full');
+                    mobileMenu.classList.toggle('-translate-x-full');
+                    mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+                });
+            }
+            if (closeMobileBtn && mobileMenu) {
+                closeMobileBtn.addEventListener('click', function() {
+                    mobileMenu.classList.add('-translate-x-full');
+                    if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
+                });
+            }
+        })();
+    </script>
 
-<script src="../../assets/global/localization.js"></script>
+    <script>
+        (function () {
+            const stats = [
+                { id: 'stat-pub',    target: 400, suffix: '+', decimals: 0 },
+                { id: 'stat-sinta',  target: 7555, suffix: '',  decimals: 0, format: 'dot-thousands' },
+                { id: 'stat-dosen',  target: 33,  suffix: '',  decimals: 0 },
+                { id: 'stat-collab', target: 10,  suffix: '+', decimals: 0 },
+                { id: 'stat-mhs',    target: 518, suffix: '',  decimals: 0 },
+            ];
+
+            function easeOutQuart(t) {
+                return 1 - Math.pow(1 - t, 4);
+            }
+
+            function formatValue(value, fmt) {
+                if (fmt === 'dot-thousands') {
+                    return Math.floor(value).toLocaleString('id-ID');
+                }
+                return Math.floor(value).toString();
+            }
+
+            function animateStat(el, target, suffix, fmt, duration) {
+                const start = performance.now();
+                function step(now) {
+                    const elapsed = now - start;
+                    const progress = Math.min(elapsed / duration, 1);
+                    const current = easeOutQuart(progress) * target;
+                    el.textContent = formatValue(current, fmt) + suffix;
+                    if (progress < 1) requestAnimationFrame(step);
+                }
+                requestAnimationFrame(step);
+            }
+
+            const observer = new IntersectionObserver(function (entries) {
+                entries.forEach(function (entry) {
+                    if (!entry.isIntersecting) return;
+                    observer.unobserve(entry.target);
+                    stats.forEach(function (s) {
+                        const el = document.getElementById(s.id);
+                        if (el) animateStat(el, s.target, s.suffix, s.format, 1800);
+                    });
+                });
+            }, { threshold: 0.3 });
+
+            const section = document.querySelector('#stat-pub');
+            if (section) observer.observe(section.closest('section'));
+        })();
+    </script>
+
+    <script src="../../assets/global/localization.js"></script>
 </body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/groups/RODA/package-lock.json b/groups/RODA/package-lock.json
new file mode 100644
index 0000000..2155203
--- /dev/null
+++ b/groups/RODA/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "roda",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "roda",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
+}
diff --git a/groups/RODA/package.json b/groups/RODA/package.json
new file mode 100644
index 0000000..b0606c6
--- /dev/null
+++ b/groups/RODA/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "roda",
+    "version": "1.0.0",
+    "description": "Project website untuk menampilkan sorotan dan prestasi karya mahasiswa program studi Informatika Universitas Tanjungpura.",
+    "main": "server.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "start": "node server.js",
+        "dev": "node server.js"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC"
+}
\ No newline at end of file
diff --git a/groups/RODA/server.js b/groups/RODA/server.js
new file mode 100644
index 0000000..42dd119
--- /dev/null
+++ b/groups/RODA/server.js
@@ -0,0 +1,279 @@
+const fs = require('fs');
+const http = require('http');
+const path = require('path');
+const { URL } = require('url');
+
+const ROOT_DIR = __dirname;
+const PARENT_DIR = path.join(__dirname, '..', '..');
+const INDEX_PATH = path.join(ROOT_DIR, 'index.html');
+const ENV_PATH = path.join(ROOT_DIR, '.env');
+const HOST = '127.0.0.1';
+const PORT = Number(process.env.PORT || 3000);
+
+function logServerError(scope, error, extra = {}) {
+    console.error(`[${scope}]`, error && error.stack ? error.stack : error, extra);
+}
+
+function parseEnvFile(filePath) {
+    if (!fs.existsSync(filePath)) {
+        return {};
+    }
+
+    const env = {};
+    const lines = fs.readFileSync(filePath, 'utf8').split(/\r?\n/);
+
+    for (const rawLine of lines) {
+        const line = rawLine.trim();
+        if (!line || line.startsWith('#')) {
+            continue;
+        }
+
+        const separatorIndex = line.indexOf('=');
+        if (separatorIndex === -1) {
+            continue;
+        }
+
+        const key = line.slice(0, separatorIndex).trim();
+        let value = line.slice(separatorIndex + 1).trim();
+
+        if (
+            (value.startsWith('"') && value.endsWith('"')) ||
+            (value.startsWith("'") && value.endsWith("'"))
+        ) {
+            value = value.slice(1, -1);
+        }
+
+        env[key] = value;
+    }
+
+    return env;
+}
+
+function getAppConfig() {
+    const env = {
+        ...parseEnvFile(ENV_PATH),
+        ...process.env
+    };
+
+    const dashboardProxyTemplates = [
+        env.DASHBOARD_PROXY_1,
+        env.DASHBOARD_PROXY_2,
+        env.DASHBOARD_PROXY_3
+    ].filter(Boolean);
+
+    return {
+        dashboardTargetUrl: env.DASHBOARD_TARGET_URL || '',
+        dashboardProxyTemplates
+    };
+}
+
+const DASHBOARD_CACHE_TTL_MS = 5 * 60 * 1000;
+let dashboardCache = { html: null, timestamp: 0 };
+
+async function fetchDashboardHtml() {
+    const targetUrl = getAppConfig().dashboardTargetUrl;
+    if (!targetUrl) {
+        throw new Error('DASHBOARD_TARGET_URL kosong');
+    }
+
+    const now = Date.now();
+    if (dashboardCache.html && (now - dashboardCache.timestamp) < DASHBOARD_CACHE_TTL_MS) {
+        return { html: dashboardCache.html, cached: 'HIT' };
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 12000);
+    try {
+        const response = await fetch(targetUrl, {
+            signal: controller.signal,
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36'
+            }
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP_ERROR_${response.status}`);
+        }
+        const html = await response.text();
+        dashboardCache = { html, timestamp: Date.now() };
+        return { html, cached: 'MISS' };
+    } catch (error) {
+        if (dashboardCache.html) {
+            return { html: dashboardCache.html, cached: 'STALE' };
+        }
+        throw error;
+    } finally {
+        clearTimeout(timeoutId);
+    }
+}
+
+function validateAppConfig(config) {
+    const errors = [];
+
+    if (!config.dashboardTargetUrl) {
+        errors.push('DASHBOARD_TARGET_URL belum diisi.');
+    }
+
+    if (!Array.isArray(config.dashboardProxyTemplates) || !config.dashboardProxyTemplates.length) {
+        errors.push('Minimal satu DASHBOARD_PROXY_* harus diisi.');
+    }
+
+    return errors;
+}
+
+function injectConfig(html) {
+    const configScript = `<script>window.APP_CONFIG = ${JSON.stringify(getAppConfig())};</script>`;
+    const defaultConfigScript = '<script>\n        window.APP_CONFIG = window.APP_CONFIG || {\n            dashboardTargetUrl: \'\',\n            dashboardProxyTemplates: []\n        };\n    </script>';
+
+    if (html.includes(defaultConfigScript)) {
+        return html.replace(defaultConfigScript, configScript);
+    }
+
+    return html.replace('</head>', `    ${configScript}\n</head>`);
+}
+
+function sendHtml(res) {
+    try {
+        const html = fs.readFileSync(INDEX_PATH, 'utf8');
+        const configErrors = validateAppConfig(getAppConfig());
+        if (configErrors.length) {
+            logServerError('config', new Error('Invalid app config'), { configErrors });
+        }
+
+        const withConfig = injectConfig(html);
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(withConfig);
+    } catch (error) {
+        logServerError('sendHtml', error);
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+        res.end('Internal Server Error');
+    }
+}
+
+function getMimeType(pathname) {
+    const ext = path.extname(pathname).toLowerCase();
+    const mimeTypes = {
+        '.html': 'text/html; charset=utf-8',
+        '.css': 'text/css; charset=utf-8',
+        '.js': 'application/javascript; charset=utf-8',
+        '.json': 'application/json; charset=utf-8',
+        '.png': 'image/png',
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
+        '.ico': 'image/x-icon',
+        '.webp': 'image/webp',
+        '.woff': 'font/woff',
+        '.woff2': 'font/woff2',
+        '.ttf': 'font/ttf',
+        '.eot': 'application/vnd.ms-fontobject'
+    };
+    return mimeTypes[ext] || 'application/octet-stream';
+}
+
+function sendStaticFile(res, filepath) {
+    try {
+        if (!fs.existsSync(filepath)) {
+            res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+            res.end('Not found');
+            return;
+        }
+
+        const content = fs.readFileSync(filepath);
+        const mimeType = getMimeType(filepath);
+        res.writeHead(200, { 'Content-Type': mimeType });
+        res.end(content);
+    } catch (error) {
+        logServerError('sendStaticFile', error, { filepath });
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+        res.end('Internal Server Error');
+    }
+}
+
+function sendNotFound(res) {
+    res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+    res.end('Not found');
+}
+
+const server = http.createServer((req, res) => {
+    try {
+        const requestUrl = new URL(req.url, `http://${req.headers.host}`);
+        const pathname = requestUrl.pathname;
+
+        if (pathname === '/' || pathname === '/index.html') {
+            sendHtml(res);
+            return;
+        }
+
+        if (pathname === '/api/dashboard') {
+            fetchDashboardHtml()
+                .then(({ html, cached }) => {
+                    res.writeHead(200, {
+                        'Content-Type': 'text/html; charset=utf-8',
+                        'X-Cache': cached
+                    });
+                    res.end(html);
+                })
+                .catch((error) => {
+                    logServerError('api-dashboard', error);
+                    res.writeHead(502, { 'Content-Type': 'text/plain; charset=utf-8' });
+                    res.end('DASHBOARD_FETCH_FAILED');
+                });
+            return;
+        }
+
+        // Handle /assets/ from parent directory
+        if (pathname.startsWith('/assets/')) {
+            const assetsFilepath = path.join(PARENT_DIR, pathname);
+            const normalizedAssetsPath = path.normalize(assetsFilepath);
+            
+            if (!normalizedAssetsPath.startsWith(path.normalize(PARENT_DIR))) {
+                sendNotFound(res);
+                return;
+            }
+            
+            sendStaticFile(res, normalizedAssetsPath);
+            return;
+        }
+
+        // Serve static files from ROOT_DIR
+        const filepath = path.join(ROOT_DIR, pathname);
+        const normalizedPath = path.normalize(filepath);
+        
+        // Security check: ensure the requested file is within ROOT_DIR
+        if (!normalizedPath.startsWith(path.normalize(ROOT_DIR))) {
+            sendNotFound(res);
+            return;
+        }
+
+        sendStaticFile(res, normalizedPath);
+    } catch (error) {
+        logServerError('request-handler', error, { url: req.url });
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+        res.end('Internal Server Error');
+    }
+});
+
+server.on('clientError', (error, socket) => {
+    logServerError('clientError', error);
+    socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
+});
+
+server.listen(PORT, HOST, () => {
+    console.log(`Server ready at http://${HOST}:${PORT}`);
+});
+
+server.on('error', (error) => {
+    logServerError('server', error, { host: HOST, port: PORT });
+    process.exitCode = 1;
+});
+
+process.on('uncaughtException', (error) => {
+    logServerError('uncaughtException', error);
+    process.exitCode = 1;
+});
+
+process.on('unhandledRejection', (reason) => {
+    logServerError('unhandledRejection', reason instanceof Error ? reason : new Error(String(reason)));
+    process.exitCode = 1;
+});
diff --git a/groups/RODA/style.css b/groups/RODA/style.css
index 2bc5542..4a23817 100644
--- a/groups/RODA/style.css
+++ b/groups/RODA/style.css
@@ -1,48 +1,310 @@
-﻿:root {
-    --brand-navy: #003150;
-    --brand-yellow: #feb401;
-    --text-main: #1e293b;
-    --text-soft: #64748b;
-    --bg-soft: #f8fafc;
-    --line: #e2e8f0;
+.bg-pattern {
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; }
-body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
-.container { width: min(1100px, 92%); margin-inline: auto; }
+/* Navbar & Accessibility Fixes */
+#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 { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
-.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+#nav-wrapper>div:first-child {
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+}
 
-.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
-.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
-.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
-.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
-.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+@media (max-width: 1023px) {
+    #nav-wrapper>div:first-child {
+        min-height: 0 !important;
+        max-height: none;
+    }
+}
 
-.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
-@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+html {
+    scroll-behavior: smooth;
+}
 
-.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
-.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
-.cover img { width: 100%; height: auto; display: block; }
+.ticker-wrap {
+    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
+}
 
-.article-body > * + * { margin-top: 1.1em; }
-.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
-.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
-.article-body p { margin: 0 0 1em; }
-.article-body ul, .article-body ol { padding-left: 1.4rem; }
-.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
-.article-body a { color: #005eb8; }
-.article-body img { max-width: 100%; border-radius: 8px; }
-.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.ticker-track {
+    display: inline-flex;
+    white-space: nowrap;
+    min-width: max-content;
+    animation: tickerMove 30s linear infinite;
+    will-change: transform;
+}
 
-.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
-.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+.ticker-wrap:hover .ticker-track {
+    animation-play-state: paused;
+}
 
-.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
-.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
-.footer-logo { height: 28px; width: auto; }
-.footer-ornament { width: 100%; display: block; opacity: .9; }
+@keyframes tickerMove {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+/* Responsive animation timing */
+@media (max-width: 768px) {
+    .ticker-track {
+        animation-duration: 25s;
+    }
+}
+
+@media (min-width: 1366px) {
+    .ticker-track {
+        animation-duration: 35s;
+    }
+}
+
+.line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+
+.line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+.reveal {
+    opacity: 1;
+    transform: none;
+}
+
+.reveal-ready .reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 0.65s ease, transform 0.65s ease;
+}
+
+.reveal-ready .reveal.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+
+    .ticker-track {
+        animation: none;
+    }
+
+    .reveal {
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+}
+
+/* Dosen grid: subgrid rows agar header & footer setiap card sejajar */
+@media (min-width: 1024px) {
+    #dosen-grid {
+        grid-template-rows: auto auto;
+    }
+    #dosen-grid > a {
+        grid-row: span 2;
+        display: grid;
+        grid-template-rows: subgrid;
+    }
+    /* White section: flex column so expertise sits at top, rank/link pinned to bottom */
+    #dosen-grid > a > div:last-child {
+        display: flex !important;
+        flex-direction: column !important;
+        padding-top: 1rem !important;
+    }
+    #dosen-grid > a > div:last-child > div:last-child {
+        margin-top: auto;
+    }
+}
+
+/* Custom responsive breakpoints - overriding Tailwind CDN defaults */
+/* Mobile: 390px and up */
+@media (min-width: 390px) {
+    body {
+        font-size: 14px;
+    }
+}
+
+/* Tablet: 768px and up */
+@media (min-width: 768px) {
+    #kbk-card-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+/* Laptop/Desktop: 1024px and up */
+@media (min-width: 1024px) {
+    nav.bg-\[#feb401\] {
+        display: block !important;
+    }
+
+    #lang-toggle-btn {
+        display: flex !important;
+    }
+
+    .hidden.lg\:flex {
+        display: flex !important;
+    }
+
+    /* Hide hamburger button on desktop (aligns with ACAAB lg:1024px) */
+    #mobile-menu-button {
+        display: none !important;
+    }
+
+    #kbk-card-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    #dosen-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    #riset-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+/* Desktop: 1366px and up */
+@media (min-width: 1366px) {
+    #kbk-card-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    #riset-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    #dosen-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+
+/* Extra Large Desktop: 1920px and up */
+@media (min-width: 1920px) {
+    body {
+        font-size: 16px;
+    }
+}
+
+/* ===== MEGA MENU STYLES FROM LIMAEM ===== */
+.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;
+}
+
+#mega-overlay {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    pointer-events: none;
+}
+
+#mega-overlay.active {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.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);
+}
+
+#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;
+}
+
+.nav-menu-item {
+    position: relative;
+}
+
+.nav-menu-item::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 0;
+    right: 0;
+    height: 12px;
+}
 
diff --git a/package-lock.json b/package-lock.json
index a16578c..43e70d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -917,7 +917,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..e65cacf
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,125 @@
+import { cpSync, existsSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const root = path.dirname(fileURLToPath(import.meta.url));
+const excludedDirs = new Set(['.git', 'dist', 'node_modules']);
+const rodaDashboardUrl = 'https://dashboard.informatika.untan.ac.id/index.php?penelitian';
+
+let rodaDashboardHtmlCache;
+
+function collectHtmlInputs(dir) {
+  const inputs = {};
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (!excludedDirs.has(entry.name)) {
+        Object.assign(inputs, collectHtmlInputs(fullPath));
+      }
+      continue;
+    }
+
+    if (entry.isFile() && entry.name.endsWith('.html')) {
+      const relativePath = path.relative(root, fullPath);
+      const inputName = relativePath
+        .replace(/\.html$/, '')
+        .replace(/[^a-zA-Z0-9_-]+/g, '_');
+
+      inputs[inputName] = fullPath;
+    }
+  }
+
+  return inputs;
+}
+
+function copyStaticAssets() {
+  return {
+    name: 'copy-static-assets',
+    closeBundle() {
+      const source = path.join(root, 'assets');
+      const destination = path.join(root, 'dist', 'assets');
+
+      if (existsSync(source)) {
+        cpSync(source, destination, { recursive: true });
+      }
+    },
+  };
+}
+
+async function fetchRodaDashboardHtml() {
+  if (rodaDashboardHtmlCache !== undefined) {
+    return rodaDashboardHtmlCache;
+  }
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 12000);
+
+  try {
+    const response = await fetch(rodaDashboardUrl, {
+      signal: controller.signal,
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    rodaDashboardHtmlCache = await response.text();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn(`[roda-dashboard] Build-time dashboard fetch skipped: ${message}`);
+    rodaDashboardHtmlCache = '';
+  } finally {
+    clearTimeout(timeoutId);
+  }
+
+  return rodaDashboardHtmlCache;
+}
+
+function escapeJsonScriptContent(value) {
+  return JSON.stringify(value)
+    .replaceAll('<', '\\u003c')
+    .replaceAll('>', '\\u003e')
+    .replaceAll('&', '\\u0026')
+    .replaceAll('\u2028', '\\u2028')
+    .replaceAll('\u2029', '\\u2029');
+}
+
+function embedRodaDashboardData() {
+  let command = 'serve';
+
+  return {
+    name: 'embed-roda-dashboard-data',
+    configResolved(config) {
+      command = config.command;
+    },
+    async transformIndexHtml(html, context) {
+      const filename = context?.filename ? path.resolve(context.filename) : '';
+      const rodaIndex = path.join(root, 'groups', 'RODA', 'index.html');
+
+      if (filename !== rodaIndex || command !== 'build') {
+        return html.replace('<!-- RODA_DASHBOARD_DATA -->', '');
+      }
+
+      const dashboardHtml = await fetchRodaDashboardHtml();
+      const payload = `<script type="application/json" id="roda-dashboard-html">${escapeJsonScriptContent(dashboardHtml)}</script>`;
+
+      return html.replace('<!-- RODA_DASHBOARD_DATA -->', payload);
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [embedRodaDashboardData(), copyStaticAssets()],
+  build: {
+    rollupOptions: {
+      input: collectHtmlInputs(root),
+    },
+  },
+});
