From 0173fbb679bd2f888852aa00caec4ab8892b1f67 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 16:39:49 +0700
Subject: [PATCH 01/36] chore: inisialisasi environment node dan penambahan
 dependensi

---
 groups/RODA/package-lock.json | 13 +++++++++++++
 groups/RODA/package.json      | 14 ++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 groups/RODA/package-lock.json
 create mode 100644 groups/RODA/package.json

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

From c9ae01f9ae7ce09c14e18d5f31630d44d14f73cf Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 16:40:24 +0700
Subject: [PATCH 02/36] feat: implementasi server lokal untuk injeksi
 konfigurasi dinamis

---
 groups/RODA/.env      |   4 +
 groups/RODA/server.js | 279 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 283 insertions(+)
 create mode 100644 groups/RODA/.env
 create mode 100644 groups/RODA/server.js

diff --git a/groups/RODA/.env b/groups/RODA/.env
new file mode 100644
index 0000000..ffbaf40
--- /dev/null
+++ b/groups/RODA/.env
@@ -0,0 +1,4 @@
+DASHBOARD_TARGET_URL=https://dashboard.informatika.untan.ac.id/index.php?penelitian
+DASHBOARD_PROXY_1=https://api.allorigins.win/get?url={{url}}&ts={{ts}}
+DASHBOARD_PROXY_2=https://api.codetabs.com/v1/proxy?quest={{url}}
+DASHBOARD_PROXY_3=https://thingproxy.freeboard.io/fetch/{{rawUrl}}
\ 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;
+});

From 3c540474746520fef5c604c8cb23e18986761337 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 16:41:07 +0700
Subject: [PATCH 03/36] style: penyempurnaan gaya komponen dan penyesuaian tata
 letak responsif

---
 groups/RODA/style.css | 333 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 295 insertions(+), 38 deletions(-)

diff --git a/groups/RODA/style.css b/groups/RODA/style.css
index 2bc5542..653b8d6 100644
--- a/groups/RODA/style.css
+++ b/groups/RODA/style.css
@@ -1,48 +1,305 @@
-: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;
+    }
+
+    #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;
+}
 

From f27b2a901ae0f5b94eb42914da48b0dfbeabb26f Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 16:41:39 +0700
Subject: [PATCH 04/36] feat: integrasi konfigurasi environment proxy pada
 antarmuka utama

---
 groups/RODA/index.html | 2572 +++++++++++++++++++++++++---------------
 1 file changed, 1615 insertions(+), 957 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 720a508..96aa64b 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1,302 +1,94 @@
-<!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 || {
+            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>
+    <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;">
@@ -338,8 +130,9 @@
                             class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
                     </div>
                     <div class="pl-5 border-l border-white/20 flex items-center gap-3">
-                        <button
-                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
+                        <button id="lang-toggle-btn"
+                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
+                            onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')">
                             <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
                         </button>
                         <button
@@ -434,75 +227,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 +273,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,164 +430,581 @@
         <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
     </div>
 
-    <div id="mobile-menu"
-        class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
-        role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
-        <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
-            <div class="flex items-center gap-4">
-                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
-                <button
-                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
-                    aria-label="Ganti bahasa">
-                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
-                </button>
-                <button
-                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
-                    aria-label="Pengaturan aksesibilitas"
-                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
-                    <i class="fas fa-universal-access" aria-hidden="true"></i>
-                </button>
-            </div>
-            <button id="close-mobile-menu"
-                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
-                aria-label="Tutup menu navigasi">
-                <i class="fas fa-times" aria-hidden="true"></i>
-            </button>
-        </div>
-        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
-            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
-                data-i18n="nav_home">Beranda</a>
-
-            <!-- Tentang Kami -->
-            <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
-                    Kami</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_history">Sejarah & Tonggak</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_org">Struktur Organisasi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_vision">Visi & Misi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_partnership">Kerjasama & MoU</a>
-                </div>
-            </div>
-
-            <!-- Program -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_program">Program</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_academic">Akademik</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_accreditation">Akreditasi</a>
-                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_graduate">Profil Lulusan</a>
-                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_courses">Mata Kuliah</a>
-                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_guideline">Panduan Akademik</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_statistics">Informatika Angka</a>
-                </div>
-            </div>
-
-            <!-- SDM -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="people-based-on-kk.html"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
-                        data-i18n="btn_all_lecturers">Semua Dosen</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_ai">Kecerdasan Buatan</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_network">Jaringan & Keamanan</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_is">Sistem Informasi</a>
-                </div>
-            </div>
-
-            <!-- Fasilitas -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_facilities">Fasilitas</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_lab">Laboratorium</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_dc">Data Center</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_eresources">E-Resources</a>
-                    <a href="ifuntanhub.html"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
-                </div>
-            </div>
-
-            <!-- Karya & Agenda -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
-                    Agenda</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_all_karya">Semua Karya</a>
-                    <a href="karya.html?filter=penelitian"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_research">Riset</a>
-                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_community">Pengabdian Masyarakat</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_achievements">Prestasi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_info_agenda">Info & Agenda</a>
-                </div>
-            </div>
-
-            <!-- Kontak -->
-            <div class="pt-2 border-t border-slate-200 pb-8">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_contact">Kontak</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_official_contact">Kontak Resmi</a>
-                    <a href="mailto:info@informatika.untan.ac.id"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_feedback">Saran & Masukan</a>
-                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-instagram text-pink-500"></i> Instagram
-                    </a>
-                    <a href="#"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-youtube text-red-500"></i> YouTube
-                    </a>
-                </div>
-            </div>
+    <!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
+    <div class="bg-white">
+        <div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">
+            <span data-i18n="home">BERANDA</span> <span class="mx-2">/</span> <span class="text-untan-blue font-bold"
+                data-i18n="pageTitle">RISET & KBK</span>
         </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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
+                    <!-- 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
+                                    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>
+                        <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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
+                    <!-- 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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
+                    <!-- 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">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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 +1067,815 @@
                 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 translations = {
+            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'
+            },
+            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'
+            }
+        };
+
+        let currentLang = 'id';
+        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 = {}) {
+            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?.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;
+        }
+
+        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>
+                `;
+            }
+
+            const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
+            const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
+                ? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
+                : [];
+
+            // Sumber utama: endpoint proxy lokal (server.js fetch server-side, tanpa CORS).
+            const proxyServers = [() => '/api/dashboard'];
+
+            // Fallback: proxy publik (butuh targetUrl untuk membangun URL).
+            if (targetUrl) {
+                proxyTemplates.forEach((template) => {
+                    proxyServers.push((url) => template
+                        .replaceAll('{{url}}', encodeURIComponent(url))
+                        .replaceAll('{{rawUrl}}', url)
+                        .replaceAll('{{ts}}', String(Date.now())));
+                });
+            }
+
+            let lastError = null;
+
+            for (const getProxyUrl of proxyServers) {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+                try {
+                    const proxyUrl = getProxyUrl(targetUrl);
+                    console.log(`Trying proxy: ${proxyUrl}`);
+
+                    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);
+
+                    const newData = [];
+                    rows.forEach((row, index) => {
+                        const cols = row.querySelectorAll('td');
+                        if (cols.length >= 3) {
+                            const indexVal = cols[0].innerText.trim();
+
+                            // Mencari elemen judul (biasanya di dalam <a> atau <b>)
+                            const linkEl = cols[1].querySelector('a');
+                            const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
+                            const url = linkEl ? linkEl.getAttribute('href') : '#';
+                            const title = titleEl.innerText.trim();
+
+                            // Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
+                            if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
+                                return;
+                            }
+
+                            // Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
+                            const authorsEl = cols[1].querySelector('font');
+                            const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
+
+                            // Tahun biasanya ada di kolom berikutnya
+                            const year = cols[2]?.innerText.trim() || '2025';
+
+                            const kbk = categorizeByKeywords(title);
+                            const kbkInfo = kbkMeta[kbk];
+
+                            newData.push({
+                                id: parseInt(indexVal) || (newData.length + 1),
+                                kbk: kbk,
+                                title_id: title,
+                                title_en: title,
+                                authors: authors,
+                                year: year,
+                                url: url,
+                                venue: 'Dashboard Informatika',
+                                badge_id: kbkInfo.label_id,
+                                badge_en: kbkInfo.label_en
+                            });
+                        }
+                    });
+
+                    if (newData.length > 0) {
+                        risetData = newData;
+                        isLoadingData = false;
+                        renderRisetCards();
+                        updateStatPub(newData.length);
+                        return; // Berhasil! Keluar dari loop
+                    }
+
+                    throw new Error('NO_ROWS_FOUND');
+                } catch (error) {
+                    clearTimeout(timeoutId);
+                    logAppError('dashboard-proxy', error, { targetUrl });
+                    lastError = error;
+                    // Lanjut ke proxy berikutnya...
+                }
+            }
+
+            // Jika semua proxy gagal
+            logAppError('fetchDashboardData', lastError);
+            renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError), 'Coba Lagi', 'fetchDashboardData()');
+        }
+
+
+        function updateLangButton() {
+            const desktopButton = document.getElementById('lang-toggle-btn');
+            if (desktopButton) {
+                desktopButton.innerHTML = currentLang === 'id'
+                    ? '<span class="font-bold text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-normal text-white">EN</span>'
+                    : '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
+            }
+
+            const mobileButton = document.getElementById('mobile-lang-toggle-btn');
+            if (mobileButton) {
+                mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
+            }
+        }
+
+        function applyTranslation(lang) {
+            document.querySelectorAll('[data-i18n]').forEach((element) => {
+                const key = element.getAttribute('data-i18n');
+                if (translations[lang][key]) {
+                    element.innerText = translations[lang][key];
+                }
+            });
+
+            document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
+                const key = element.getAttribute('data-i18n-placeholder');
+                if (translations[lang][key]) {
+                    element.setAttribute('placeholder', translations[lang][key]);
+                }
+            });
+        }
+
+        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) {
+                    countInfo.innerText = `Menampilkan ${itemsToShow.length} dari ${filteredItems.length} publikasi`;
+                }
+
+                // 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-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
+                        <div class="mb-6">
+                            <span class="bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
+                        </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;
+
+                return `
+                    <a href="dosen_kbk.html?kbk=${kbk}&lang=${currentLang}" 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 gap-2 text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors whitespace-nowrap">
+                                    ${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));
+        }
+
+        window.setLanguage = function (lang) {
+            currentLang = lang;
+            updateLangButton();
+            applyTranslation(lang);
+            renderKbkInsight();
+            renderRisetCards();
+            renderDosenCards();
+        };
+
+        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();
+                setLanguage(currentLang);
+                openKbkInsight(currentKbkInsight, false);
+                filterRiset(currentFilter);
+                searchRiset('');
+                fetchDashboardData().catch((error) => {
+                    logAppError('DOMContentLoaded.fetchDashboardData', 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 +1901,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 +1911,7 @@
                     if (panel) panel.classList.remove('active');
                 });
 
-                megaOverlay.classList.remove('active');
+                if (megaOverlay) megaOverlay.classList.remove('active');
                 setButtonState(null);
                 activeMenu = null;
             }
@@ -1269,7 +1926,7 @@
                 });
 
                 targetPanel.classList.add('active');
-                megaOverlay.classList.add('active');
+                if (megaOverlay) megaOverlay.classList.add('active');
                 setButtonState(menuId);
                 activeMenu = menuId;
             }
@@ -1293,7 +1950,9 @@
                 });
             });
 
-            megaOverlay.addEventListener('click', closeMenus);
+            if (megaOverlay) {
+                megaOverlay.addEventListener('click', closeMenus);
+            }
 
             document.addEventListener('click', (e) => {
                 const clickedInsideNav = e.target.closest('#main-nav');
@@ -1312,27 +1971,26 @@
         })();
     </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 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>
 </body>
+
 </html>
\ No newline at end of file

From 3dd522de3d7b8ef1a180c4eecfcdb07ed722dd0a Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 16:41:58 +0700
Subject: [PATCH 05/36] chore: update package-lock.json dependencies

---
 package-lock.json | 1 -
 1 file changed, 1 deletion(-)

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"
       },

From 123ce1be047b89ece1e7e51cf6d0444004261736 Mon Sep 17 00:00:00 2001
From: Rayhan <d1041231082@student.untan.ac.id>
Date: Thu, 4 Jun 2026 09:55:17 +0000
Subject: [PATCH 06/36] Update package-lock.json

---
 package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package-lock.json b/package-lock.json
index 43e70d0..a16578c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -917,6 +917,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },

From 263ffd1924d170501f9f06daf7fc5b0bc306a501 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:15:03 +0700
Subject: [PATCH 07/36] feat: penyesuaian hamburger menu dan penyempurnaan
 navigasi responsif

---
 groups/RODA/index.html | 136 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 96aa64b..cb8ea85 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -430,6 +430,142 @@
         <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>
+                <button id="lang-toggle-mobile"
+                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
+                    onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')"
+                    aria-label="Ganti bahasa">
+                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
+                </button>
+                <button
+                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
+                    aria-label="Pengaturan aksesibilitas"
+                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                    <i class="fas fa-universal-access" aria-hidden="true"></i>
+                </button>
+            </div>
+            <button id="close-mobile-menu"
+                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
+                aria-label="Tutup menu navigasi">
+                <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+        </div>
+        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
+            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
+                data-i18n="nav_home">Beranda</a>
+
+            <!-- Tentang Kami -->
+            <div class="pt-2">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                    Kami</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_history">Sejarah & Tonggak</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_org">Struktur Organisasi</a>
+                    <a href="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>
+                </div>
+            </div>
+
+            <!-- Program -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_program">Program</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_academic">Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_accreditation">Akreditasi</a>
+                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_graduate">Profil Lulusan</a>
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_courses">Mata Kuliah</a>
+                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_guideline">Panduan Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_statistics">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>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="people-based-on-kk.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
+                        data-i18n="btn_all_lecturers">Semua Dosen</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_ai">Kecerdasan Buatan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_network">Jaringan & Keamanan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_is">Sistem Informasi</a>
+                </div>
+            </div>
+
+            <!-- Fasilitas -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_facilities">Fasilitas</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_lab">Laboratorium</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_dc">Data Center</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_eresources">E-Resources</a>
+                    <a href="ifuntanhub.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
+                </div>
+            </div>
+
+            <!-- Karya & Agenda -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
+                    Agenda</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_all_karya">Semua Karya</a>
+                    <a href="karya.html?filter=penelitian"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_research">Riset</a>
+                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_community">Pengabdian Masyarakat</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_achievements">Prestasi</a>
+                </div>
+            </div>
+
+            <!-- Kontak -->
+            <div class="pt-2 border-t border-slate-200 pb-8">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_contact">Kontak</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_official_contact">Kontak Resmi</a>
+                    <a href="mailto:info@informatika.untan.ac.id"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_feedback">Saran & Masukan</a>
+                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
+                        <i class="fab fa-instagram text-pink-500"></i> Instagram
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
     <div class="bg-white">
         <div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">

From fbdcbe6472741045f9a3dd539e4240f4ec914d90 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:29:18 +0700
Subject: [PATCH 08/36] feat: menghapus breadcrumb dan menambahkan timestamp
 last updated di section publikasi & penelitian terkini

---
 groups/RODA/index.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index cb8ea85..d05912c 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -565,15 +565,7 @@
             </div>
         </div>
     </div>
-
-    <!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
-    <div class="bg-white">
-        <div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">
-            <span data-i18n="home">BERANDA</span> <span class="mx-2">/</span> <span class="text-untan-blue font-bold"
-                data-i18n="pageTitle">RISET & KBK</span>
-        </div>
-    </div>
-
+    
     <!-- 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">
@@ -927,6 +919,12 @@
                                 </div>
                             </div>
                         </div>
+                        <p>This page was last updated on: <span id="last-updated"></span></p>
+                        <script>
+                            const modificationDate = document.lastModified; 
+                            document.getElementById("last-updated").innerHTML = new Date(modificationDate).toLocaleString();
+                        </script>
+
                         <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...

From 46a7921bf0d8bbcae71cf5f1f8dec47f8ff1302a Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 17:35:25 +0700
Subject: [PATCH 09/36] chore: configure Netlify deployment

---
 README.md    | 10 ++++++++++
 netlify.toml |  6 ++++++
 2 files changed, 16 insertions(+)
 create mode 100644 netlify.toml

diff --git a/README.md b/README.md
index 50cdb3e..c8edaee 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,16 @@ Buka URL dari Vite (default: `http://localhost:5173`) lalu akses launcher di `/`
 | `npm run build` | Build static output ke folder `dist` |
 | `npm run preview` | Preview hasil build |
 
+## Deploy Netlify
+
+Project ini sudah punya konfigurasi Netlify di `netlify.toml`.
+
+Saat membuat site di Netlify:
+- Repository: `GuavaPopper/PPL_Staging`
+- Branch deploy: `Staging`
+- Build command: `npm run build`
+- Publish directory: `dist`
+
 ## Struktur Folder
 
 ```
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..0cab1ff
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "22"

From 6cb0ffc571adce167c4c1c6205fd64d084efb307 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:40:01 +0700
Subject: [PATCH 10/36] feat: menyesuaikan kembali untuk fitur bilingual

---
 groups/RODA/index.html | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index d05912c..421a461 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -919,11 +919,7 @@
                                 </div>
                             </div>
                         </div>
-                        <p>This page was last updated on: <span id="last-updated"></span></p>
-                        <script>
-                            const modificationDate = document.lastModified; 
-                            document.getElementById("last-updated").innerHTML = new Date(modificationDate).toLocaleString();
-                        </script>
+                        <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">
@@ -972,7 +968,7 @@
                     <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">5 laboratorium modern dengan 93 unit PC All-in-One
+                        <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>
@@ -1384,7 +1380,10 @@
                 ctaBtn: 'Hubungi Kami',
                 viewAll: 'Lihat Semua',
                 facultyDirectory: 'Direktori Dosen',
-                expertise: 'Keahlian'
+                expertise: 'Keahlian',
+                lastUpdatedText: 'Halaman ini terakhir diperbarui pada: ',
+                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.'
             },
             en: {
                 info: 'LATEST INFO',
@@ -1440,7 +1439,10 @@
                 ctaBtn: 'Contact Us',
                 viewAll: 'View All',
                 facultyDirectory: 'Faculty Directory',
-                expertise: 'Expertise'
+                expertise: 'Expertise',
+                lastUpdatedText: 'This page was last updated on: ',
+                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.'
             }
         };
 
@@ -1702,7 +1704,8 @@
                 // Update info jumlah data yang ditampilkan
                 const countInfo = document.getElementById('riset-count-info');
                 if (countInfo) {
-                    countInfo.innerText = `Menampilkan ${itemsToShow.length} dari ${filteredItems.length} publikasi`;
+                    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
@@ -1926,6 +1929,11 @@
             renderKbkInsight();
             renderRisetCards();
             renderDosenCards();
+
+            const lastUpdatedEl = document.getElementById("last-updated");
+            if (lastUpdatedEl) {
+                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(lang === 'id' ? 'id-ID' : 'en-US');
+            }
         };
 
         window.addEventListener('error', (event) => {

From c64abd8083fa419b028992110a058216945e0a4a Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 17:46:03 +0700
Subject: [PATCH 11/36] fix: include static pages in Netlify build

---
 package.json                     |  3 +-
 scripts/verify-netlify-build.mjs | 48 +++++++++++++++++++++++++++
 vite.config.js                   | 57 ++++++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 scripts/verify-netlify-build.mjs
 create mode 100644 vite.config.js

diff --git a/package.json b/package.json
index 31e8272..1374213 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:netlify-build": "node scripts/verify-netlify-build.mjs"
   },
   "devDependencies": {
     "vite": "^7.1.0"
diff --git a/scripts/verify-netlify-build.mjs b/scripts/verify-netlify-build.mjs
new file mode 100644
index 0000000..18535d5
--- /dev/null
+++ b/scripts/verify-netlify-build.mjs
@@ -0,0 +1,48 @@
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import path from 'node:path';
+
+const root = process.cwd();
+const dist = path.join(root, 'dist');
+const excludedDirs = new Set(['.git', 'dist', 'node_modules']);
+
+function collectFiles(dir, predicate = () => true) {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const files = [];
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (!excludedDirs.has(entry.name)) {
+        files.push(...collectFiles(fullPath, predicate));
+      }
+      continue;
+    }
+
+    if (entry.isFile() && predicate(fullPath)) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+if (!existsSync(dist) || !statSync(dist).isDirectory()) {
+  throw new Error('Missing dist directory. Run `npm run build` first.');
+}
+
+const missingHtmlFiles = collectFiles(root, (file) => file.endsWith('.html'))
+  .map((file) => path.relative(root, file))
+  .filter((relativePath) => !existsSync(path.join(dist, relativePath)));
+
+const missingAssetFiles = collectFiles(path.join(root, 'assets'))
+  .map((file) => path.relative(root, file))
+  .filter((relativePath) => !existsSync(path.join(dist, relativePath)));
+
+const missingFiles = [...missingHtmlFiles, ...missingAssetFiles];
+
+if (missingFiles.length > 0) {
+  throw new Error(`Missing built files:\n${missingFiles.join('\n')}`);
+}
+
+console.log('All source HTML and static asset files are present in dist.');
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..891b74f
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,57 @@
+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']);
+
+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 });
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [copyStaticAssets()],
+  build: {
+    rollupOptions: {
+      input: collectHtmlInputs(root),
+    },
+  },
+});

From d1a80838a5ea4ece59f9bd1d1dfd24a83947ec5e Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:55:01 +0700
Subject: [PATCH 12/36] fix: memperbarui tautan kartu dosen KBK ke direktori
 resmi

---
 groups/RODA/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 421a461..377afc9 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1764,7 +1764,7 @@
                 const rank = currentLang === 'id' ? leader.badge_id : leader.badge_en;
 
                 return `
-                    <a href="dosen_kbk.html?kbk=${kbk}&lang=${currentLang}" 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">
+                    <a href="https://informatika.untan.ac.id/people-based-on-kk.html" 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>

From 6f1e7d744b12a7c8529da1c134a8b8e6d76a1a0b Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 18:19:11 +0700
Subject: [PATCH 13/36] fix: improve RODA dosen cards on mobile

---
 groups/RODA/index.html           |  6 +++---
 package.json                     |  3 ++-
 scripts/verify-mobile-layout.mjs | 31 +++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 scripts/verify-mobile-layout.mjs

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 377afc9..5fa7b93 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -955,7 +955,7 @@
                         ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.</p>
                 </div>
 
-                <div id="dosen-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
+                <div id="dosen-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
                     <!-- Cards generated by JS -->
                 </div>
             </div>
@@ -1785,7 +1785,7 @@
                                 <span class="inline-flex flex-col gap-0.5 text-[8px] sm:text-[8px] md:text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400">
                                     ${rank.split(' ').join('<br>')}
                                 </span>
-                                <span class="inline-flex items-center gap-2 text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors whitespace-nowrap">
+                                <span class="inline-flex items-center justify-end gap-2 text-right text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors">
                                     ${translations[currentLang].viewMembers}
                                     <i class="fa-solid fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                                 </span>
@@ -2135,4 +2135,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index 1374213..52d04a1 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:netlify-build": "node scripts/verify-netlify-build.mjs"
+    "test:netlify-build": "node scripts/verify-netlify-build.mjs",
+    "test:mobile-layout": "node scripts/verify-mobile-layout.mjs"
   },
   "devDependencies": {
     "vite": "^7.1.0"
diff --git a/scripts/verify-mobile-layout.mjs b/scripts/verify-mobile-layout.mjs
new file mode 100644
index 0000000..615c106
--- /dev/null
+++ b/scripts/verify-mobile-layout.mjs
@@ -0,0 +1,31 @@
+import { readFileSync } from 'node:fs';
+
+const rodaPage = readFileSync('groups/RODA/index.html', 'utf8');
+
+const gridMatch = rodaPage.match(/<div id="dosen-grid" class="([^"]+)"/);
+
+if (!gridMatch) {
+  throw new Error('Missing dosen-grid container.');
+}
+
+const gridClasses = gridMatch[1].split(/\s+/);
+
+if (gridClasses.includes('sm:grid-cols-2')) {
+  throw new Error('Dosen cards must stay single-column at the 390px mobile breakpoint.');
+}
+
+if (!gridClasses.includes('grid-cols-1') || !gridClasses.includes('md:grid-cols-2')) {
+  throw new Error('Dosen cards must use one mobile column and switch to two columns at md.');
+}
+
+const viewMembersMatch = rodaPage.match(/<span class="([^"]+)"[^>]*>\s*\$\{translations\[currentLang\]\.viewMembers\}/);
+
+if (!viewMembersMatch) {
+  throw new Error('Missing view members link in dosen card template.');
+}
+
+if (viewMembersMatch[1].split(/\s+/).includes('whitespace-nowrap')) {
+  throw new Error('View members link must be allowed to wrap instead of clipping on narrow cards.');
+}
+
+console.log('Mobile layout classes keep dosen cards readable on phone viewports.');

From 11b8e518ac5a61d6623335ce36cf425af2cdc0a9 Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 18:23:57 +0700
Subject: [PATCH 14/36] chore: remove verification scripts

---
 package.json                     |  4 +--
 scripts/verify-mobile-layout.mjs | 31 ---------------------
 scripts/verify-netlify-build.mjs | 48 --------------------------------
 3 files changed, 1 insertion(+), 82 deletions(-)
 delete mode 100644 scripts/verify-mobile-layout.mjs
 delete mode 100644 scripts/verify-netlify-build.mjs

diff --git a/package.json b/package.json
index 52d04a1..31e8272 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "test:netlify-build": "node scripts/verify-netlify-build.mjs",
-    "test:mobile-layout": "node scripts/verify-mobile-layout.mjs"
+    "preview": "vite preview"
   },
   "devDependencies": {
     "vite": "^7.1.0"
diff --git a/scripts/verify-mobile-layout.mjs b/scripts/verify-mobile-layout.mjs
deleted file mode 100644
index 615c106..0000000
--- a/scripts/verify-mobile-layout.mjs
+++ /dev/null
@@ -1,31 +0,0 @@
-import { readFileSync } from 'node:fs';
-
-const rodaPage = readFileSync('groups/RODA/index.html', 'utf8');
-
-const gridMatch = rodaPage.match(/<div id="dosen-grid" class="([^"]+)"/);
-
-if (!gridMatch) {
-  throw new Error('Missing dosen-grid container.');
-}
-
-const gridClasses = gridMatch[1].split(/\s+/);
-
-if (gridClasses.includes('sm:grid-cols-2')) {
-  throw new Error('Dosen cards must stay single-column at the 390px mobile breakpoint.');
-}
-
-if (!gridClasses.includes('grid-cols-1') || !gridClasses.includes('md:grid-cols-2')) {
-  throw new Error('Dosen cards must use one mobile column and switch to two columns at md.');
-}
-
-const viewMembersMatch = rodaPage.match(/<span class="([^"]+)"[^>]*>\s*\$\{translations\[currentLang\]\.viewMembers\}/);
-
-if (!viewMembersMatch) {
-  throw new Error('Missing view members link in dosen card template.');
-}
-
-if (viewMembersMatch[1].split(/\s+/).includes('whitespace-nowrap')) {
-  throw new Error('View members link must be allowed to wrap instead of clipping on narrow cards.');
-}
-
-console.log('Mobile layout classes keep dosen cards readable on phone viewports.');
diff --git a/scripts/verify-netlify-build.mjs b/scripts/verify-netlify-build.mjs
deleted file mode 100644
index 18535d5..0000000
--- a/scripts/verify-netlify-build.mjs
+++ /dev/null
@@ -1,48 +0,0 @@
-import { existsSync, readdirSync, statSync } from 'node:fs';
-import path from 'node:path';
-
-const root = process.cwd();
-const dist = path.join(root, 'dist');
-const excludedDirs = new Set(['.git', 'dist', 'node_modules']);
-
-function collectFiles(dir, predicate = () => true) {
-  const entries = readdirSync(dir, { withFileTypes: true });
-  const files = [];
-
-  for (const entry of entries) {
-    const fullPath = path.join(dir, entry.name);
-
-    if (entry.isDirectory()) {
-      if (!excludedDirs.has(entry.name)) {
-        files.push(...collectFiles(fullPath, predicate));
-      }
-      continue;
-    }
-
-    if (entry.isFile() && predicate(fullPath)) {
-      files.push(fullPath);
-    }
-  }
-
-  return files;
-}
-
-if (!existsSync(dist) || !statSync(dist).isDirectory()) {
-  throw new Error('Missing dist directory. Run `npm run build` first.');
-}
-
-const missingHtmlFiles = collectFiles(root, (file) => file.endsWith('.html'))
-  .map((file) => path.relative(root, file))
-  .filter((relativePath) => !existsSync(path.join(dist, relativePath)));
-
-const missingAssetFiles = collectFiles(path.join(root, 'assets'))
-  .map((file) => path.relative(root, file))
-  .filter((relativePath) => !existsSync(path.join(dist, relativePath)));
-
-const missingFiles = [...missingHtmlFiles, ...missingAssetFiles];
-
-if (missingFiles.length > 0) {
-  throw new Error(`Missing built files:\n${missingFiles.join('\n')}`);
-}
-
-console.log('All source HTML and static asset files are present in dist.');

From 793a9e1dbc2cc4e78fba1d65dbb17d8adc71329c Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 18:36:25 +0700
Subject: [PATCH 15/36] fix: stack RODA KBK cards on mobile

---
 groups/RODA/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 5fa7b93..e87b2b8 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -611,7 +611,7 @@
                         topik riset spesifik, dipimpin dosen berpengalaman, dan terbuka untuk kolaborasi.</p>
                 </div>
 
-                <div id="kbk-card-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
+                <div id="kbk-card-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
                     <!-- AI Card -->
                     <article data-kbk-card="ai"
                         class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">

From 97a7cd1369d580429a82c6ad5af655eeb47bf6ee Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 18:44:26 +0700
Subject: [PATCH 16/36] fix: improve RODA publication cards on mobile

---
 groups/RODA/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index e87b2b8..87c4cbc 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -928,7 +928,7 @@
                     </div>
                 </div>
 
-                <div id="riset-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
+                <div id="riset-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
                     <!-- Cards generated by JS -->
                 </div>
 
@@ -1728,9 +1728,9 @@
                 }
 
                 grid.innerHTML = itemsToShow.map((item) => `
-                    <a href="${item.url}" target="_blank" class="bg-white rounded-3xl p-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
+                    <a href="${item.url}" target="_blank" class="bg-white rounded-3xl p-6 sm:p-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
                         <div class="mb-6">
-                            <span class="bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
+                            <span class="inline-block max-w-full bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider leading-tight text-center border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
                         </div>
                         <h3 class="text-lg font-bold text-untan-navy mb-4 leading-snug line-clamp-3 group-hover:text-untan-blue transition-colors">${currentLang === 'id' ? item.title_id : item.title_en}</h3>
                         <p class="text-gray-500 text-xs mb-1 italic">${item.authors}</p>

From 1d5b807fc7f2a80f024c5d571913755b8d1a2bb3 Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 18:53:02 +0700
Subject: [PATCH 17/36] fix: proxy dashboard through Netlify function

---
 netlify.toml                   |  9 +++++
 netlify/functions/dashboard.js | 68 ++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 netlify/functions/dashboard.js

diff --git a/netlify.toml b/netlify.toml
index 0cab1ff..2a8fe6c 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -4,3 +4,12 @@
 
 [build.environment]
   NODE_VERSION = "22"
+
+[functions]
+  directory = "netlify/functions"
+  node_bundler = "esbuild"
+
+[[redirects]]
+  from = "/api/dashboard"
+  to = "/.netlify/functions/dashboard"
+  status = 200
diff --git a/netlify/functions/dashboard.js b/netlify/functions/dashboard.js
new file mode 100644
index 0000000..c9fad0d
--- /dev/null
+++ b/netlify/functions/dashboard.js
@@ -0,0 +1,68 @@
+const DEFAULT_DASHBOARD_URL = 'https://dashboard.informatika.untan.ac.id/index.php?penelitian';
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+let dashboardCache = {
+  html: '',
+  timestamp: 0,
+};
+
+function getDashboardUrl() {
+  return process.env.DASHBOARD_TARGET_URL || DEFAULT_DASHBOARD_URL;
+}
+
+function response(statusCode, body, extraHeaders = {}) {
+  return {
+    statusCode,
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'public, max-age=60, stale-while-revalidate=300',
+      ...extraHeaders,
+    },
+    body,
+  };
+}
+
+exports.handler = async () => {
+  const now = Date.now();
+
+  if (dashboardCache.html && now - dashboardCache.timestamp < CACHE_TTL_MS) {
+    return response(200, dashboardCache.html, { 'X-Cache': 'HIT' });
+  }
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 12000);
+
+  try {
+    const dashboardResponse = await fetch(getDashboardUrl(), {
+      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 (!dashboardResponse.ok) {
+      throw new Error(`HTTP_ERROR_${dashboardResponse.status}`);
+    }
+
+    const html = await dashboardResponse.text();
+    dashboardCache = { html, timestamp: Date.now() };
+
+    return response(200, html, { 'X-Cache': 'MISS' });
+  } catch (error) {
+    if (dashboardCache.html) {
+      return response(200, dashboardCache.html, { 'X-Cache': 'STALE' });
+    }
+
+    return {
+      statusCode: 502,
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+      },
+      body: error && error.name === 'AbortError'
+        ? 'DASHBOARD_FETCH_TIMEOUT'
+        : 'DASHBOARD_FETCH_FAILED',
+    };
+  } finally {
+    clearTimeout(timeoutId);
+  }
+};

From 3b749e4c994dcb5f93c96748ef9372ba3bacab3d Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 19:03:28 +0700
Subject: [PATCH 18/36] fix: use RODA dashboard proxy config

---
 groups/RODA/index.html         | 15 ++++++--
 netlify.toml                   |  9 -----
 netlify/functions/dashboard.js | 68 ----------------------------------
 3 files changed, 12 insertions(+), 80 deletions(-)
 delete mode 100644 netlify/functions/dashboard.js

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 87c4cbc..1fd1020 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1541,6 +1541,11 @@
             return rows;
         }
 
+        function shouldUseLocalDashboardProxy() {
+            const hostname = window.location.hostname;
+            return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '';
+        }
+
         async function fetchDashboardData() {
             const grid = document.getElementById('riset-grid');
             if (grid) {
@@ -1557,10 +1562,10 @@
                 ? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
                 : [];
 
-            // Sumber utama: endpoint proxy lokal (server.js fetch server-side, tanpa CORS).
-            const proxyServers = [() => '/api/dashboard'];
+            // Endpoint server.js hanya ada saat development lokal.
+            const proxyServers = shouldUseLocalDashboardProxy() ? [() => '/api/dashboard'] : [];
 
-            // Fallback: proxy publik (butuh targetUrl untuk membangun URL).
+            // Deployment static memakai proxy publik karena tidak menjalankan server.js.
             if (targetUrl) {
                 proxyTemplates.forEach((template) => {
                     proxyServers.push((url) => template
@@ -1570,6 +1575,10 @@
                 });
             }
 
+            if (!proxyServers.length) {
+                throw new Error('DASHBOARD_PROXY_NOT_CONFIGURED');
+            }
+
             let lastError = null;
 
             for (const getProxyUrl of proxyServers) {
diff --git a/netlify.toml b/netlify.toml
index 2a8fe6c..0cab1ff 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -4,12 +4,3 @@
 
 [build.environment]
   NODE_VERSION = "22"
-
-[functions]
-  directory = "netlify/functions"
-  node_bundler = "esbuild"
-
-[[redirects]]
-  from = "/api/dashboard"
-  to = "/.netlify/functions/dashboard"
-  status = 200
diff --git a/netlify/functions/dashboard.js b/netlify/functions/dashboard.js
deleted file mode 100644
index c9fad0d..0000000
--- a/netlify/functions/dashboard.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const DEFAULT_DASHBOARD_URL = 'https://dashboard.informatika.untan.ac.id/index.php?penelitian';
-const CACHE_TTL_MS = 5 * 60 * 1000;
-
-let dashboardCache = {
-  html: '',
-  timestamp: 0,
-};
-
-function getDashboardUrl() {
-  return process.env.DASHBOARD_TARGET_URL || DEFAULT_DASHBOARD_URL;
-}
-
-function response(statusCode, body, extraHeaders = {}) {
-  return {
-    statusCode,
-    headers: {
-      'Content-Type': 'text/html; charset=utf-8',
-      'Cache-Control': 'public, max-age=60, stale-while-revalidate=300',
-      ...extraHeaders,
-    },
-    body,
-  };
-}
-
-exports.handler = async () => {
-  const now = Date.now();
-
-  if (dashboardCache.html && now - dashboardCache.timestamp < CACHE_TTL_MS) {
-    return response(200, dashboardCache.html, { 'X-Cache': 'HIT' });
-  }
-
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 12000);
-
-  try {
-    const dashboardResponse = await fetch(getDashboardUrl(), {
-      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 (!dashboardResponse.ok) {
-      throw new Error(`HTTP_ERROR_${dashboardResponse.status}`);
-    }
-
-    const html = await dashboardResponse.text();
-    dashboardCache = { html, timestamp: Date.now() };
-
-    return response(200, html, { 'X-Cache': 'MISS' });
-  } catch (error) {
-    if (dashboardCache.html) {
-      return response(200, dashboardCache.html, { 'X-Cache': 'STALE' });
-    }
-
-    return {
-      statusCode: 502,
-      headers: {
-        'Content-Type': 'text/plain; charset=utf-8',
-      },
-      body: error && error.name === 'AbortError'
-        ? 'DASHBOARD_FETCH_TIMEOUT'
-        : 'DASHBOARD_FETCH_FAILED',
-    };
-  } finally {
-    clearTimeout(timeoutId);
-  }
-};

From 56c34eddc344080a3f06b21879b799f12ec58be2 Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 19:12:21 +0700
Subject: [PATCH 19/36] fix: silence RODA dashboard proxy logs

---
 groups/RODA/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 1fd1020..d3d46c4 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -74,6 +74,7 @@
     </script>
     <script>
         window.APP_CONFIG = window.APP_CONFIG || {
+            debugLogs: false,
             dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
             dashboardProxyTemplates: [
                 'https://api.allorigins.win/get?url={{url}}&ts={{ts}}',
@@ -1471,6 +1472,7 @@
         }
 
         function logAppError(scope, error, extra = {}) {
+            if (window.APP_CONFIG?.debugLogs !== true) return;
             console.error(`[${scope}]`, error, extra);
         }
 
@@ -1481,6 +1483,7 @@
             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?.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.';
         }
@@ -1576,7 +1579,8 @@
             }
 
             if (!proxyServers.length) {
-                throw new Error('DASHBOARD_PROXY_NOT_CONFIGURED');
+                renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(new Error('DASHBOARD_PROXY_NOT_CONFIGURED')), 'Coba Lagi', 'fetchDashboardData()');
+                return;
             }
 
             let lastError = null;
@@ -1587,7 +1591,6 @@
 
                 try {
                     const proxyUrl = getProxyUrl(targetUrl);
-                    console.log(`Trying proxy: ${proxyUrl}`);
 
                     const response = await fetch(proxyUrl, { signal: controller.signal });
                     clearTimeout(timeoutId);
@@ -1651,14 +1654,12 @@
                     throw new Error('NO_ROWS_FOUND');
                 } catch (error) {
                     clearTimeout(timeoutId);
-                    logAppError('dashboard-proxy', error, { targetUrl });
                     lastError = error;
                     // Lanjut ke proxy berikutnya...
                 }
             }
 
             // Jika semua proxy gagal
-            logAppError('fetchDashboardData', lastError);
             renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError), 'Coba Lagi', 'fetchDashboardData()');
         }
 
@@ -2018,7 +2019,6 @@
                 filterRiset(currentFilter);
                 searchRiset('');
                 fetchDashboardData().catch((error) => {
-                    logAppError('DOMContentLoaded.fetchDashboardData', error);
                     renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(error), 'Coba Lagi', 'fetchDashboardData()');
                 });
             } catch (error) {

From 478d48c237a018970ed502bdb6cca9dab80646ba Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 19:21:53 +0700
Subject: [PATCH 20/36] fix: embed RODA dashboard data at build

---
 groups/RODA/index.html | 144 +++++++++++++++++++++++++----------------
 vite.config.js         |  70 +++++++++++++++++++-
 2 files changed, 159 insertions(+), 55 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index d3d46c4..6f8cfc0 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -75,6 +75,7 @@
     <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}}',
@@ -83,6 +84,7 @@
             ]
         };
     </script>
+    <!-- RODA_DASHBOARD_DATA -->
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -1484,6 +1486,7 @@
             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.';
         }
@@ -1549,6 +1552,75 @@
             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) {
@@ -1560,6 +1632,22 @@
                 `;
             }
 
+            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)
@@ -1583,8 +1671,6 @@
                 return;
             }
 
-            let lastError = null;
-
             for (const getProxyUrl of proxyServers) {
                 const controller = new AbortController();
                 const timeoutId = setTimeout(() => controller.abort(), 15000);
@@ -1600,58 +1686,8 @@
                     const responseData = await response.text();
                     const html = extractDashboardHtml(responseData);
                     const rows = parseDashboardRows(html);
-
-                    const newData = [];
-                    rows.forEach((row, index) => {
-                        const cols = row.querySelectorAll('td');
-                        if (cols.length >= 3) {
-                            const indexVal = cols[0].innerText.trim();
-
-                            // Mencari elemen judul (biasanya di dalam <a> atau <b>)
-                            const linkEl = cols[1].querySelector('a');
-                            const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
-                            const url = linkEl ? linkEl.getAttribute('href') : '#';
-                            const title = titleEl.innerText.trim();
-
-                            // Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
-                            if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
-                                return;
-                            }
-
-                            // Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
-                            const authorsEl = cols[1].querySelector('font');
-                            const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
-
-                            // Tahun biasanya ada di kolom berikutnya
-                            const year = cols[2]?.innerText.trim() || '2025';
-
-                            const kbk = categorizeByKeywords(title);
-                            const kbkInfo = kbkMeta[kbk];
-
-                            newData.push({
-                                id: parseInt(indexVal) || (newData.length + 1),
-                                kbk: kbk,
-                                title_id: title,
-                                title_en: title,
-                                authors: authors,
-                                year: year,
-                                url: url,
-                                venue: 'Dashboard Informatika',
-                                badge_id: kbkInfo.label_id,
-                                badge_en: kbkInfo.label_en
-                            });
-                        }
-                    });
-
-                    if (newData.length > 0) {
-                        risetData = newData;
-                        isLoadingData = false;
-                        renderRisetCards();
-                        updateStatPub(newData.length);
-                        return; // Berhasil! Keluar dari loop
-                    }
-
-                    throw new Error('NO_ROWS_FOUND');
+                    applyDashboardRows(rows);
+                    return; // Berhasil! Keluar dari loop
                 } catch (error) {
                     clearTimeout(timeoutId);
                     lastError = error;
diff --git a/vite.config.js b/vite.config.js
index 891b74f..e65cacf 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,9 @@ 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 = {};
@@ -47,8 +50,73 @@ function copyStaticAssets() {
   };
 }
 
+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: [copyStaticAssets()],
+  plugins: [embedRodaDashboardData(), copyStaticAssets()],
   build: {
     rollupOptions: {
       input: collectHtmlInputs(root),

From 91136a58a10a5d194dd077f479d80ae10412d794 Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 19:50:37 +0700
Subject: [PATCH 21/36] fix:Nambah animasi statistik counter

---
 groups/RODA/index.html | 49 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 6f8cfc0..cbb4f6b 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -2178,6 +2178,55 @@
             }
         })();
     </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>
 </body>
 
 </html>

From 027bd253594b8886df0aabbcba1aad49540d99da Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 20:24:38 +0700
Subject: [PATCH 22/36] chore: inisialisasi environment node dan penambahan
 dependensi

---
 groups/RODA/package-lock.json | 13 +++++++++++++
 groups/RODA/package.json      | 14 ++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 groups/RODA/package-lock.json
 create mode 100644 groups/RODA/package.json

diff --git a/groups/RODA/package-lock.json b/groups/RODA/package-lock.json
new file mode 100644
index 0000000..41aefa8
--- /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"
+        }
+    }
+}
\ No newline at end of file
diff --git a/groups/RODA/package.json b/groups/RODA/package.json
new file mode 100644
index 0000000..8602450
--- /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"
+}

From 112447c6bc3ef9afd178226d86c0fc497f3e605f Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 20:24:55 +0700
Subject: [PATCH 23/36] feat: implementasi server lokal untuk injeksi
 konfigurasi dinamis

---
 groups/RODA/.env      |   4 +
 groups/RODA/server.js | 279 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 283 insertions(+)
 create mode 100644 groups/RODA/.env
 create mode 100644 groups/RODA/server.js

diff --git a/groups/RODA/.env b/groups/RODA/.env
new file mode 100644
index 0000000..ffbaf40
--- /dev/null
+++ b/groups/RODA/.env
@@ -0,0 +1,4 @@
+DASHBOARD_TARGET_URL=https://dashboard.informatika.untan.ac.id/index.php?penelitian
+DASHBOARD_PROXY_1=https://api.allorigins.win/get?url={{url}}&ts={{ts}}
+DASHBOARD_PROXY_2=https://api.codetabs.com/v1/proxy?quest={{url}}
+DASHBOARD_PROXY_3=https://thingproxy.freeboard.io/fetch/{{rawUrl}}
\ 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;
+});

From 4d828814da89db1e949072bc57eb3fc6bed8a7c1 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 20:25:03 +0700
Subject: [PATCH 24/36] style: penyempurnaan gaya komponen dan penyesuaian tata
 letak responsif

---
 groups/RODA/style.css | 333 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 295 insertions(+), 38 deletions(-)

diff --git a/groups/RODA/style.css b/groups/RODA/style.css
index 2bc5542..653b8d6 100644
--- a/groups/RODA/style.css
+++ b/groups/RODA/style.css
@@ -1,48 +1,305 @@
-: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;
+    }
+
+    #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;
+}
 

From 49cd290d5a739daacf9b003167edd5cf0b4ce0e9 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 20:25:09 +0700
Subject: [PATCH 25/36] feat: integrasi konfigurasi environment proxy pada
 antarmuka utama

---
 groups/RODA/index.html | 2570 +++++++++++++++++++++++++---------------
 1 file changed, 1614 insertions(+), 956 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 720a508..276d378 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1,302 +1,94 @@
 <!DOCTYPE html>
-<html lang="id" class="scroll-smooth">
+<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 || {
+            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>
+    <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;">
@@ -338,8 +130,9 @@
                             class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
                     </div>
                     <div class="pl-5 border-l border-white/20 flex items-center gap-3">
-                        <button
-                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
+                        <button id="lang-toggle-btn"
+                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
+                            onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')">
                             <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
                         </button>
                         <button
@@ -434,75 +227,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 +273,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,164 +430,581 @@
         <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
     </div>
 
-    <div id="mobile-menu"
-        class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
-        role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
-        <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
-            <div class="flex items-center gap-4">
-                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
-                <button
-                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
-                    aria-label="Ganti bahasa">
-                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
-                </button>
-                <button
-                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
-                    aria-label="Pengaturan aksesibilitas"
-                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
-                    <i class="fas fa-universal-access" aria-hidden="true"></i>
-                </button>
-            </div>
-            <button id="close-mobile-menu"
-                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
-                aria-label="Tutup menu navigasi">
-                <i class="fas fa-times" aria-hidden="true"></i>
-            </button>
-        </div>
-        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
-            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
-                data-i18n="nav_home">Beranda</a>
-
-            <!-- Tentang Kami -->
-            <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
-                    Kami</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_history">Sejarah & Tonggak</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_org">Struktur Organisasi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_vision">Visi & Misi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_partnership">Kerjasama & MoU</a>
-                </div>
-            </div>
-
-            <!-- Program -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_program">Program</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_academic">Akademik</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_accreditation">Akreditasi</a>
-                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_graduate">Profil Lulusan</a>
-                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_courses">Mata Kuliah</a>
-                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_guideline">Panduan Akademik</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_statistics">Informatika Angka</a>
-                </div>
-            </div>
-
-            <!-- SDM -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="people-based-on-kk.html"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
-                        data-i18n="btn_all_lecturers">Semua Dosen</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_ai">Kecerdasan Buatan</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_network">Jaringan & Keamanan</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_is">Sistem Informasi</a>
-                </div>
-            </div>
-
-            <!-- Fasilitas -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_facilities">Fasilitas</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_lab">Laboratorium</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_dc">Data Center</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_eresources">E-Resources</a>
-                    <a href="ifuntanhub.html"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
-                </div>
-            </div>
-
-            <!-- Karya & Agenda -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
-                    Agenda</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_all_karya">Semua Karya</a>
-                    <a href="karya.html?filter=penelitian"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_research">Riset</a>
-                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_community">Pengabdian Masyarakat</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_achievements">Prestasi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_info_agenda">Info & Agenda</a>
-                </div>
-            </div>
-
-            <!-- Kontak -->
-            <div class="pt-2 border-t border-slate-200 pb-8">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_contact">Kontak</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_official_contact">Kontak Resmi</a>
-                    <a href="mailto:info@informatika.untan.ac.id"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_feedback">Saran & Masukan</a>
-                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-instagram text-pink-500"></i> Instagram
-                    </a>
-                    <a href="#"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-youtube text-red-500"></i> YouTube
-                    </a>
-                </div>
-            </div>
+    <!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
+    <div class="bg-white">
+        <div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">
+            <span data-i18n="home">BERANDA</span> <span class="mx-2">/</span> <span class="text-untan-blue font-bold"
+                data-i18n="pageTitle">RISET & KBK</span>
         </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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
+                    <!-- 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
+                                    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>
+                        <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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
+                    <!-- 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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
+                    <!-- 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">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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 Mahasiswa
+                                </span>
+                            </div>
+                        </div>
+                        <h4 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 +1067,815 @@
                 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 translations = {
+            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'
+            },
+            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'
+            }
+        };
+
+        let currentLang = 'id';
+        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 = {}) {
+            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?.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;
+        }
+
+        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>
+                `;
+            }
+
+            const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
+            const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
+                ? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
+                : [];
+
+            // Sumber utama: endpoint proxy lokal (server.js fetch server-side, tanpa CORS).
+            const proxyServers = [() => '/api/dashboard'];
+
+            // Fallback: proxy publik (butuh targetUrl untuk membangun URL).
+            if (targetUrl) {
+                proxyTemplates.forEach((template) => {
+                    proxyServers.push((url) => template
+                        .replaceAll('{{url}}', encodeURIComponent(url))
+                        .replaceAll('{{rawUrl}}', url)
+                        .replaceAll('{{ts}}', String(Date.now())));
+                });
+            }
+
+            let lastError = null;
+
+            for (const getProxyUrl of proxyServers) {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+                try {
+                    const proxyUrl = getProxyUrl(targetUrl);
+                    console.log(`Trying proxy: ${proxyUrl}`);
+
+                    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);
+
+                    const newData = [];
+                    rows.forEach((row, index) => {
+                        const cols = row.querySelectorAll('td');
+                        if (cols.length >= 3) {
+                            const indexVal = cols[0].innerText.trim();
+
+                            // Mencari elemen judul (biasanya di dalam <a> atau <b>)
+                            const linkEl = cols[1].querySelector('a');
+                            const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
+                            const url = linkEl ? linkEl.getAttribute('href') : '#';
+                            const title = titleEl.innerText.trim();
+
+                            // Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
+                            if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
+                                return;
+                            }
+
+                            // Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
+                            const authorsEl = cols[1].querySelector('font');
+                            const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
+
+                            // Tahun biasanya ada di kolom berikutnya
+                            const year = cols[2]?.innerText.trim() || '2025';
+
+                            const kbk = categorizeByKeywords(title);
+                            const kbkInfo = kbkMeta[kbk];
+
+                            newData.push({
+                                id: parseInt(indexVal) || (newData.length + 1),
+                                kbk: kbk,
+                                title_id: title,
+                                title_en: title,
+                                authors: authors,
+                                year: year,
+                                url: url,
+                                venue: 'Dashboard Informatika',
+                                badge_id: kbkInfo.label_id,
+                                badge_en: kbkInfo.label_en
+                            });
+                        }
+                    });
+
+                    if (newData.length > 0) {
+                        risetData = newData;
+                        isLoadingData = false;
+                        renderRisetCards();
+                        updateStatPub(newData.length);
+                        return; // Berhasil! Keluar dari loop
+                    }
+
+                    throw new Error('NO_ROWS_FOUND');
+                } catch (error) {
+                    clearTimeout(timeoutId);
+                    logAppError('dashboard-proxy', error, { targetUrl });
+                    lastError = error;
+                    // Lanjut ke proxy berikutnya...
+                }
+            }
+
+            // Jika semua proxy gagal
+            logAppError('fetchDashboardData', lastError);
+            renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError), 'Coba Lagi', 'fetchDashboardData()');
+        }
+
+
+        function updateLangButton() {
+            const desktopButton = document.getElementById('lang-toggle-btn');
+            if (desktopButton) {
+                desktopButton.innerHTML = currentLang === 'id'
+                    ? '<span class="font-bold text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-normal text-white">EN</span>'
+                    : '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
+            }
+
+            const mobileButton = document.getElementById('mobile-lang-toggle-btn');
+            if (mobileButton) {
+                mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
+            }
+        }
+
+        function applyTranslation(lang) {
+            document.querySelectorAll('[data-i18n]').forEach((element) => {
+                const key = element.getAttribute('data-i18n');
+                if (translations[lang][key]) {
+                    element.innerText = translations[lang][key];
+                }
+            });
+
+            document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
+                const key = element.getAttribute('data-i18n-placeholder');
+                if (translations[lang][key]) {
+                    element.setAttribute('placeholder', translations[lang][key]);
+                }
+            });
+        }
+
+        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) {
+                    countInfo.innerText = `Menampilkan ${itemsToShow.length} dari ${filteredItems.length} publikasi`;
+                }
+
+                // 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-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
+                        <div class="mb-6">
+                            <span class="bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
+                        </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;
+
+                return `
+                    <a href="dosen_kbk.html?kbk=${kbk}&lang=${currentLang}" 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 gap-2 text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors whitespace-nowrap">
+                                    ${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));
+        }
+
+        window.setLanguage = function (lang) {
+            currentLang = lang;
+            updateLangButton();
+            applyTranslation(lang);
+            renderKbkInsight();
+            renderRisetCards();
+            renderDosenCards();
+        };
+
+        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();
+                setLanguage(currentLang);
+                openKbkInsight(currentKbkInsight, false);
+                filterRiset(currentFilter);
+                searchRiset('');
+                fetchDashboardData().catch((error) => {
+                    logAppError('DOMContentLoaded.fetchDashboardData', 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 +1901,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 +1911,7 @@
                     if (panel) panel.classList.remove('active');
                 });
 
-                megaOverlay.classList.remove('active');
+                if (megaOverlay) megaOverlay.classList.remove('active');
                 setButtonState(null);
                 activeMenu = null;
             }
@@ -1269,7 +1926,7 @@
                 });
 
                 targetPanel.classList.add('active');
-                megaOverlay.classList.add('active');
+                if (megaOverlay) megaOverlay.classList.add('active');
                 setButtonState(menuId);
                 activeMenu = menuId;
             }
@@ -1293,7 +1950,9 @@
                 });
             });
 
-            megaOverlay.addEventListener('click', closeMenus);
+            if (megaOverlay) {
+                megaOverlay.addEventListener('click', closeMenus);
+            }
 
             document.addEventListener('click', (e) => {
                 const clickedInsideNav = e.target.closest('#main-nav');
@@ -1312,27 +1971,26 @@
         })();
     </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 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>
 </body>
+
 </html>
\ No newline at end of file

From 30091e68cce7b760e95568a840f01b29a433b866 Mon Sep 17 00:00:00 2001
From: Tazyeuu <126654209+Tazyeuu@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:03:30 +0700
Subject: [PATCH 26/36] fix hamburger

---
 groups/ACAAB/index.html | 3239 +++++++++++++++++++++++----------------
 groups/RODA/index.html  |   79 +-
 groups/RODA/style.css   |    7 +-
 3 files changed, 1994 insertions(+), 1331 deletions(-)

diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index a781215..ec40fee 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1,1338 +1,2017 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="id" class="scroll-smooth">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Group 06 &ndash; ACAAB | Informatika UNTAN</title>
-    <link rel="stylesheet" href="../../assets/global/output.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-        <style>
-        /* ===== MOBILE NAV STABILITY FIX =====
+    <link rel="stylesheet" href="../../assets/global/output.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <style>
+      /* ===== MOBILE NAV STABILITY FIX =====
            Prevents logo bar from collapsing/shifting on Android when
            address bar hides/shows and triggers viewport reflow.
         ===================================== */
-        #nav-wrapper {
-            position: fixed !important;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 50;
-            backface-visibility: hidden;
-            -webkit-backface-visibility: hidden;
-            will-change: box-shadow;
+      #nav-wrapper {
+        position: fixed !important;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 50;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+        will-change: box-shadow;
+      }
+
+      #nav-wrapper > div:first-child {
+        transform: translateZ(0);
+        -webkit-transform: translateZ(0);
+      }
+
+      @media (max-width: 1023px) {
+        #nav-wrapper > div:first-child {
+          min-height: 0 !important;
+          max-height: none;
+        }
+      }
+
+      #pengumuman-bar {
+        z-index: 40;
+      }
+
+      #pengumuman-bar.is-stuck {
+        position: fixed;
+        left: 0;
+        right: 0;
+        z-index: 40;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+      /* Skip Link Styling */
+      .skip-link {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: #003150;
+        color: white;
+        padding: 8px 16px;
+        z-index: 100;
+        transition: top 0.3s;
+      }
+
+      .skip-link:focus {
+        top: 0;
+      }
+
+      /* Focus visible for better keyboard navigation */
+      :focus-visible {
+        outline: 3px solid #feb401;
+        outline-offset: 2px;
+      }
+
+      /* Mega Menu Styles */
+      .hero-pagination .swiper-pagination-bullet {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.4);
+        display: inline-block;
+        margin: 0 4px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .hero-pagination .swiper-pagination-bullet-active {
+        background: rgba(255, 255, 255, 1);
+        width: 24px;
+        border-radius: 4px;
+      }
+
+      .mega-panel {
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.2s ease,
+          visibility 0.2s ease;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+      }
+
+      .mega-panel.active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Overlay transition */
+      #mega-overlay {
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.2s ease,
+          visibility 0.2s ease;
+      }
+
+      #mega-overlay.active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .mega-link-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 1rem;
+        border-radius: 0.75rem;
+        border: 1px solid #e2e8f0;
+        background: white;
+        transition: all 0.2s ease;
+      }
+
+      .mega-link-card:hover {
+        border-color: #3b82f6;
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+        transform: translateY(-2px);
+      }
+
+      .mega-link-icon {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        transition: all 0.2s ease;
+      }
+
+      .nav-menu-btn.active {
+        background: rgba(255, 255, 255, 0.9);
+        color: #1e40af;
+      }
+
+      .nav-menu-btn:hover {
+        background: rgba(255, 255, 255, 0.8);
+      }
+
+      /* Mega menu positioning - no gap */
+      #main-nav {
+        position: relative;
+      }
+
+      #mega-menu-container {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+      }
+
+      #mega-menu-container .mega-panel {
+        pointer-events: auto;
+      }
+
+      /* Keep pointer bridge under nav to prevent hover loss */
+      .nav-menu-item {
+        position: relative;
+      }
+
+      .nav-menu-item::after {
+        content: "";
+        position: absolute;
+        bottom: -12px;
+        left: 0;
+        right: 0;
+        height: 12px;
+      }
+
+      /* ===== Luco Chatbot Animations ===== */
+      @keyframes slideInRight {
+        from {
+          transform: translateX(100px);
+          opacity: 0;
         }
 
-        #nav-wrapper>div:first-child {
-            transform: translateZ(0);
-            -webkit-transform: translateZ(0);
+        to {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          transform: translateY(10px);
+          opacity: 0;
         }
 
-        @media (max-width: 1023px) {
-            #nav-wrapper>div:first-child {
-                min-height: 0 !important;
-                max-height: none;
-            }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      @keyframes lucoPulse {
+        0%,
+        100% {
+          transform: scale(1);
         }
 
-        #pengumuman-bar {
-            z-index: 40;
+        50% {
+          transform: scale(1.05);
+        }
+      }
+
+      #luco-container {
+        animation: slideInRight 0.5s ease-out forwards;
+      }
+
+      #luco-bubble {
+        animation: fadeInUp 0.3s ease-out forwards;
+        width: min(18rem, calc(100vw - 2rem));
+      }
+
+      #luco-btn {
+        animation: lucoPulse 2s ease-in-out infinite;
+      }
+
+      #luco-btn:hover {
+        animation: none;
+      }
+
+      /* Typing indicator */
+      .typing-indicator span {
+        display: inline-block;
+        animation: bounce 1.4s infinite ease-in-out;
+      }
+
+      .typing-indicator span:nth-child(1) {
+        animation-delay: 0s;
+      }
+
+      .typing-indicator span:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      .typing-indicator span:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+
+      @keyframes bounce {
+        0%,
+        80%,
+        100% {
+          transform: translateY(0);
         }
 
-        #pengumuman-bar.is-stuck {
-            position: fixed;
-            left: 0;
-            right: 0;
-            z-index: 40;
+        40% {
+          transform: translateY(-6px);
         }
+      }
 
-        @media (prefers-reduced-motion: reduce) {
-
-            *,
-            *::before,
-            *::after {
-                animation-duration: 0.01ms !important;
-                animation-iteration-count: 1 !important;
-                transition-duration: 0.01ms !important;
-            }
-        }
-
-        /* Skip Link Styling */
-        .skip-link {
-            position: absolute;
-            top: -40px;
-            left: 0;
-            background: #003150;
-            color: white;
-            padding: 8px 16px;
-            z-index: 100;
-            transition: top 0.3s;
-        }
-
-        .skip-link:focus {
-            top: 0;
-        }
-
-        /* Focus visible for better keyboard navigation */
-        :focus-visible {
-            outline: 3px solid #feb401;
-            outline-offset: 2px;
-        }
-
-        /* Mega Menu Styles */
-        .hero-pagination .swiper-pagination-bullet {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.4);
-            display: inline-block;
-            margin: 0 4px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .hero-pagination .swiper-pagination-bullet-active {
-            background: rgba(255, 255, 255, 1);
-            width: 24px;
-            border-radius: 4px;
-        }
-
-        .mega-panel {
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.2s ease, visibility 0.2s ease;
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-        }
-
-        .mega-panel.active {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        /* Overlay transition */
-        #mega-overlay {
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.2s ease, visibility 0.2s ease;
-        }
-
-        #mega-overlay.active {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        .mega-link-card {
-            display: flex;
-            align-items: flex-start;
-            gap: 1rem;
-            padding: 1rem;
-            border-radius: 0.75rem;
-            border: 1px solid #e2e8f0;
-            background: white;
-            transition: all 0.2s ease;
-        }
-
-        .mega-link-card:hover {
-            border-color: #3b82f6;
-            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
-            transform: translateY(-2px);
-        }
-
-        .mega-link-icon {
-            width: 2.5rem;
-            height: 2.5rem;
-            border-radius: 0.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            transition: all 0.2s ease;
-        }
-
-        .nav-menu-btn.active {
-            background: rgba(255, 255, 255, 0.9);
-            color: #1e40af;
-        }
-
-        .nav-menu-btn:hover {
-            background: rgba(255, 255, 255, 0.8);
-        }
-
-        /* Mega menu positioning - no gap */
-        #main-nav {
-            position: relative;
-        }
-
-        #mega-menu-container {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            pointer-events: none;
-        }
-
-        #mega-menu-container .mega-panel {
-            pointer-events: auto;
-        }
-
-        /* Keep pointer bridge under nav to prevent hover loss */
-        .nav-menu-item {
-            position: relative;
-        }
-
-        .nav-menu-item::after {
-            content: '';
-            position: absolute;
-            bottom: -12px;
-            left: 0;
-            right: 0;
-            height: 12px;
-        }
-
-        /* ===== Luco Chatbot Animations ===== */
-        @keyframes slideInRight {
-            from {
-                transform: translateX(100px);
-                opacity: 0;
-            }
-
-            to {
-                transform: translateX(0);
-                opacity: 1;
-            }
-        }
-
-        @keyframes fadeInUp {
-            from {
-                transform: translateY(10px);
-                opacity: 0;
-            }
-
-            to {
-                transform: translateY(0);
-                opacity: 1;
-            }
-        }
-
-        @keyframes lucoPulse {
-
-            0%,
-            100% {
-                transform: scale(1);
-            }
-
-            50% {
-                transform: scale(1.05);
-            }
-        }
-
-        #luco-container {
-            animation: slideInRight 0.5s ease-out forwards;
-        }
-
-        #luco-bubble {
-            animation: fadeInUp 0.3s ease-out forwards;
-            width: min(18rem, calc(100vw - 2rem));
-        }
-
-        #luco-btn {
-            animation: lucoPulse 2s ease-in-out infinite;
-        }
-
-        #luco-btn:hover {
-            animation: none;
-        }
-
-        /* Typing indicator */
-        .typing-indicator span {
-            display: inline-block;
-            animation: bounce 1.4s infinite ease-in-out;
-        }
-
-        .typing-indicator span:nth-child(1) {
-            animation-delay: 0s;
-        }
-
-        .typing-indicator span:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-
-        .typing-indicator span:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-
-        @keyframes bounce {
-
-            0%,
-            80%,
-            100% {
-                transform: translateY(0);
-            }
-
-            40% {
-                transform: translateY(-6px);
-            }
-        }
-
-        /* Luco speech bubble arrow */
-        #luco-bubble .bubble-arrow {
-            position: absolute;
-            right: 24px;
-            bottom: -6px;
-            width: 12px;
-            height: 12px;
-            background: white;
-            transform: rotate(45deg);
-            border-right: 1px solid #e2e8f0;
-            border-bottom: 1px solid #e2e8f0;
-        }
+      /* Luco speech bubble arrow */
+      #luco-bubble .bubble-arrow {
+        position: absolute;
+        right: 24px;
+        bottom: -6px;
+        width: 12px;
+        height: 12px;
+        background: white;
+        transform: rotate(45deg);
+        border-right: 1px solid #e2e8f0;
+        border-bottom: 1px solid #e2e8f0;
+      }
     </style>
-</head>
-<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
+  </head>
+  <body
+    class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black"
+  >
+    <a href="#main-content" class="skip-link" data-i18n="skip_to_content"
+      >Langsung ke Konten Utama</a
+    >
 
-    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
+    <div
+      id="nav-wrapper"
+      class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto"
+    >
+      <div
+        class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden"
+        style="min-height: 0"
+      >
+        <div
+          class="absolute inset-0 w-full overflow-hidden pointer-events-none"
+          aria-hidden="true"
+        >
+          <div
+            class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
+            style="overflow: hidden; max-height: 100%"
+          >
+            01101001 01101110 01100110 01101111 01110010 01101101 01100001
+            01110100 01101001 01101011 01100001 00100000 01110101 01101110
+            01110100 01100001 01101110 00100000 01100010 01101001 01110011
+            01100001 01101001 01101110 01100110 01101111 01110010 01101101
+            01100001 01110100 01101001 01101011 01100001 00100000 01110101
+            01101110 01110100 01100001 01101110 00100000 01100010 01101001
+            01110011 01100001 01010101 01001110 01010100 01000001 01001110
+            00100000 00110010 00110000 00110010 00110101 00100000 01100110
+            01110101 01110100 01110101 01110010 01100101 00100000 01110010
+            01100101 01100001 01100100 01111001 01101001 01101110 01100110
+            01101111 01110010 01101101 01100001 01110100 01101001 01101011
+            01100001 00100000 01110101 01101110
+          </div>
+          <div
+            class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"
+          ></div>
+        </div>
 
-    <div id="nav-wrapper"
-        class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
-        <div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
-            <div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
-                <div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
-                    style="overflow:hidden;max-height:100%;">
-                    01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
-                    01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
-                    01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
-                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
-                    01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
-                    01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
-                    00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
-                    01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
-                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
-                </div>
-                <div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
+        <div
+          class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10"
+        >
+          <a href="../../index.html" class="flex items-center gap-4 group">
+            <div
+              class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0"
+            >
+              <img
+                src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+                alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
+                class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10"
+              />
+            </div>
+            <div
+              class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center"
+            >
+              <span
+                class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase"
+                >INFORMATIKA</span
+              >
+              <span
+                class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans"
+                >UNIVERSITAS TANJUNGPURA</span
+              >
+            </div>
+          </a>
+
+          <div class="hidden lg:flex items-center gap-5">
+            <div class="flex items-center gap-3 text-sm">
+              <a
+                href="https://satu.untan.ac.id"
+                target="_blank"
+                class="hover:text-untan-yellow transition-colors font-medium"
+                >SATU UNTAN</a
+              >
+            </div>
+            <div class="pl-5 border-l border-white/20 flex items-center gap-3">
+              <button
+                class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
+              >
+                <span class="font-bold">ID</span>
+                <span class="text-white/40">|</span> EN
+              </button>
+              <button
+                class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+                aria-label="Pengaturan aksesibilitas"
+                onclick="
+                  const p = document.getElementById('access-panel');
+                  if (p) {
+                    p.classList.toggle('hidden');
+                    p.classList.toggle('flex');
+                  }
+                "
+              >
+                <i class="fas fa-universal-access" aria-hidden="true"></i>
+              </button>
+              <button
+                class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+                aria-label="Cari konten"
+              >
+                <i class="fas fa-search" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+
+          <button
+            id="mobile-menu-button"
+            class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+            aria-label="Buka menu navigasi"
+            aria-expanded="false"
+            aria-controls="mobile-menu"
+          >
+            <i class="fas fa-bars" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+
+      <nav
+        class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative"
+        id="main-nav"
+        aria-label="Menu navigasi utama"
+      >
+        <div class="container mx-auto px-6">
+          <div
+            class="flex items-center justify-center w-full gap-1 py-2"
+            role="menubar"
+          >
+            <!-- Menu: Tentang Kami -->
+            <div class="nav-menu-item relative" data-menu="tentang">
+              <button
+                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
+              >
+                <span data-i18n="nav_about">Tentang Kami</span>
+                <i
+                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
+                ></i>
+              </button>
             </div>
 
-            <div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
-                <a href="../../index.html" class="flex items-center gap-4 group">
-                    <div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
-                        <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
-                            alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
-                            class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
+            <!-- Menu: Program -->
+            <div class="nav-menu-item relative" data-menu="program">
+              <button
+                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
+              >
+                <span data-i18n="nav_program">Program</span>
+                <i
+                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
+                ></i>
+              </button>
+            </div>
+
+            <!-- Menu: SDM -->
+            <div class="nav-menu-item relative" data-menu="sdm">
+              <button
+                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
+              >
+                <span data-i18n="nav_sdm">SDM</span>
+                <i
+                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
+                ></i>
+              </button>
+            </div>
+
+            <!-- Menu: Fasilitas -->
+            <div class="nav-menu-item relative" data-menu="fasilitas">
+              <button
+                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
+              >
+                <span data-i18n="nav_facilities">Fasilitas</span>
+                <i
+                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
+                ></i>
+              </button>
+            </div>
+
+            <!-- Menu: Karya & Agenda -->
+            <div class="nav-menu-item relative" data-menu="karya">
+              <button
+                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
+              >
+                <span data-i18n="nav_works">Karya & Agenda</span>
+                <i
+                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
+                ></i>
+              </button>
+            </div>
+
+            <!-- Menu: Kontak -->
+            <div class="nav-menu-item relative" data-menu="kontak">
+              <button
+                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
+              >
+                <span data-i18n="nav_contact">Kontak</span>
+                <i
+                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
+                ></i>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
+        <div
+          id="mega-menu-container"
+          class="absolute left-0 right-0 top-full z-50"
+        >
+          <!-- Mega Menu: Tentang Kami -->
+          <div
+            id="mega-tentang"
+            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
+          >
+            <div class="container mx-auto px-6 py-8">
+              <div class="grid grid-cols-12 gap-8">
+                <!-- Left: Featured -->
+                <div
+                  class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden"
+                >
+                  <div
+                    class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16"
+                  ></div>
+                  <div
+                    class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12"
+                  ></div>
+                  <div class="relative z-10">
+                    <span
+                      class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
+                      data-i18n="mega_about_title"
+                      >Tentang Kami</span
+                    >
+                    <h3 class="text-2xl font-bold mb-3">
+                      Mengenal Informatika UNTAN
+                    </h3>
+                    <p
+                      class="text-slate-300 text-sm mb-6 leading-relaxed"
+                      data-i18n="mega_about_desc"
+                    >
+                      Terakreditasi Unggul, mencetak lulusan kompeten di bidang
+                      teknologi informasi sejak 1993.
+                    </p>
+                    <a
+                      href="content.html?type=berita"
+                      class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
+                    >
+                      Selengkapnya <i class="fas fa-arrow-right"></i>
+                    </a>
+                  </div>
+                </div>
+                <!-- Right: Links -->
+                <div class="col-span-8 grid grid-cols-2 gap-6">
+                  <a
+                    href="content.html?type=berita"
+                    class="mega-link-card group"
+                  >
+                    <div
+                      class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-landmark"></i>
                     </div>
-                    <div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
-                        <span
-                            class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
-                        <span
-                            class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
-                            TANJUNGPURA</span>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                        data-i18n="link_history"
+                      >
+                        Sejarah & Tonggak
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_history_desc"
+                      >
+                        Perjalanan panjang membangun generasi digital
+                      </p>
                     </div>
+                  </a>
+                  <a
+                    href="content.html?type=berita"
+                    class="mega-link-card group"
+                  >
+                    <div
+                      class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-users"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                        data-i18n="link_org"
+                      >
+                        Struktur Organisasi
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_org_desc"
+                      >
+                        Pimpinan dan jajaran pengelola
+                      </p>
+                    </div>
+                  </a>
+                  <a href="profil.html" class="mega-link-card group">
+                    <div
+                      class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-bullseye"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                        data-i18n="link_vision"
+                      >
+                        Visi & Misi
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_vision_desc"
+                      >
+                        Arah dan tujuan pengembangan prodi
+                      </p>
+                    </div>
+                  </a>
+                  <a
+                    href="content.html?type=berita"
+                    class="mega-link-card group"
+                  >
+                    <div
+                      class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-handshake"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                        data-i18n="link_partnership"
+                      >
+                        Kerjasama & MoU
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_partnership_desc"
+                      >
+                        Mitra industri dan akademik
+                      </p>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Mega Menu: Program -->
+          <div
+            id="mega-program"
+            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
+          >
+            <div class="container mx-auto px-6 py-8">
+              <div class="grid grid-cols-12 gap-8">
+                <!-- Left: Featured -->
+                <div
+                  class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden"
+                >
+                  <div
+                    class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"
+                  ></div>
+                  <div class="relative z-10">
+                    <span
+                      class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
+                      >Program Akademik</span
+                    >
+                    <h3
+                      class="text-2xl font-bold mb-3"
+                      data-i18n="mega_program_obe"
+                    >
+                      Kurikulum Berbasis OBE
+                    </h3>
+                    <p class="text-blue-100 text-sm mb-6 leading-relaxed">
+                      Outcome-Based Education dengan 4 jalur konsentrasi: AI,
+                      Software Engineering, Network, dan Information Systems.
+                    </p>
+                    <a
+                      href="subject-and-courses.html"
+                      class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
+                      data-i18n="btn_krs_sim"
+                    >
+                      <i class="fas fa-play-circle"></i> Simulasi KRS
+                    </a>
+                  </div>
+                </div>
+                <!-- Right: Links Grid -->
+                <div class="col-span-8">
+                  <div class="grid grid-cols-3 gap-4">
+                    <a
+                      href="subject-and-courses.html"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-graduation-cap"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_academic"
+                        >
+                          Akademik
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_academic_desc"
+                        >
+                          Jadwal, KRS, dan kalender
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="content.html?type=berita"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-award"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_accreditation"
+                        >
+                          Akreditasi
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_accred_desc"
+                        >
+                          Status Unggul BAN-PT
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="graduate-profile.html"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-user-graduate"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_graduate"
+                        >
+                          Profil Lulusan
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_graduate_desc"
+                        >
+                          Kompetensi & karir
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="subject-and-courses.html"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-book-open"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_courses"
+                        >
+                          Mata Kuliah
+                        </h4>
+                        <p class="text-xs text-slate-500 mt-1">
+                          144 SKS kurikulum
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="academic-guidelines.html"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-file-alt"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_guideline"
+                        >
+                          Panduan
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_guideline_desc"
+                        >
+                          Buku panduan akademik
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="content.html?type=berita"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-chart-bar"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_statistics"
+                        >
+                          Informatika Angka
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_statistics_desc"
+                        >
+                          Statistik & data
+                        </p>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Mega Menu: SDM -->
+          <div
+            id="mega-sdm"
+            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
+          >
+            <div class="container mx-auto px-6 py-8">
+              <div class="grid grid-cols-12 gap-8">
+                <!-- Left: Featured Dosen -->
+                <div
+                  class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden"
+                >
+                  <div class="absolute inset-0 opacity-10">
+                    <div
+                      class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full"
+                    ></div>
+                    <div
+                      class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full"
+                    ></div>
+                  </div>
+                  <div class="relative z-10">
+                    <span
+                      class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
+                      data-i18n="mega_sdm_title"
+                      >Sumber Daya Manusia</span
+                    >
+                    <h3
+                      class="text-2xl font-bold mb-3"
+                      data-i18n="mega_sdm_desc"
+                    >
+                      Tim Pengajar Profesional
+                    </h3>
+                    <p class="text-slate-300 text-sm mb-4 leading-relaxed">
+                      30+ dosen berkualifikasi S2/S3 dari universitas terkemuka
+                      dalam dan luar negeri.
+                    </p>
+                    <div class="flex gap-4 mb-6">
+                      <div class="text-center">
+                        <div class="text-2xl font-bold text-untan-yellow">
+                          15+
+                        </div>
+                        <div class="text-[10px] text-slate-400 uppercase">
+                          Doktor
+                        </div>
+                      </div>
+                      <div class="text-center">
+                        <div class="text-2xl font-bold text-untan-yellow">
+                          20+
+                        </div>
+                        <div class="text-[10px] text-slate-400 uppercase">
+                          Magister
+                        </div>
+                      </div>
+                      <div class="text-center">
+                        <div class="text-2xl font-bold text-untan-yellow">
+                          5
+                        </div>
+                        <div class="text-[10px] text-slate-400 uppercase">
+                          Guru Besar
+                        </div>
+                      </div>
+                    </div>
+                    <a
+                      href="people-based-on-kk.html"
+                      class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
+                      data-i18n="btn_all_lecturers"
+                    >
+                      Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
+                    </a>
+                  </div>
+                </div>
+                <!-- Right: KK Groups -->
+                <div class="col-span-7">
+                  <h4
+                    class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
+                    data-i18n="label_expertise"
+                  >
+                    Kelompok Keahlian
+                  </h4>
+                  <div class="grid grid-cols-2 gap-4">
+                    <a
+                      href="people-based-on-kk.html"
+                      class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all"
+                    >
+                      <div class="flex items-start gap-4">
+                        <div
+                          class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
+                        >
+                          <i class="fas fa-brain"></i>
+                        </div>
+                        <div>
+                          <h5 class="font-bold text-slate-800 mb-1">
+                            KK Kecerdasan Buatan
+                          </h5>
+                          <p class="text-xs text-slate-500">
+                            Machine Learning, Computer Vision, NLP
+                          </p>
+                          <span
+                            class="inline-block mt-2 text-xs text-purple-600 font-semibold"
+                            >8 Dosen <i class="fas fa-chevron-right ml-1"></i
+                          ></span>
+                        </div>
+                      </div>
+                    </a>
+                    <a
+                      href="people-based-on-kk.html"
+                      class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all"
+                    >
+                      <div class="flex items-start gap-4">
+                        <div
+                          class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
+                        >
+                          <i class="fas fa-code"></i>
+                        </div>
+                        <div>
+                          <h5 class="font-bold text-slate-800 mb-1">
+                            KK Rekayasa Perangkat Lunak
+                          </h5>
+                          <p class="text-xs text-slate-500">
+                            Software Engineering, DevOps, Testing
+                          </p>
+                          <span
+                            class="inline-block mt-2 text-xs text-blue-600 font-semibold"
+                            >10 Dosen <i class="fas fa-chevron-right ml-1"></i
+                          ></span>
+                        </div>
+                      </div>
+                    </a>
+                    <a
+                      href="people-based-on-kk.html"
+                      class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all"
+                    >
+                      <div class="flex items-start gap-4">
+                        <div
+                          class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
+                        >
+                          <i class="fas fa-network-wired"></i>
+                        </div>
+                        <div>
+                          <h5 class="font-bold text-slate-800 mb-1">
+                            KK Jaringan & Keamanan
+                          </h5>
+                          <p class="text-xs text-slate-500">
+                            Network, Cybersecurity, Cloud
+                          </p>
+                          <span
+                            class="inline-block mt-2 text-xs text-emerald-600 font-semibold"
+                            >7 Dosen <i class="fas fa-chevron-right ml-1"></i
+                          ></span>
+                        </div>
+                      </div>
+                    </a>
+                    <a
+                      href="people-based-on-kk.html"
+                      class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all"
+                    >
+                      <div class="flex items-start gap-4">
+                        <div
+                          class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
+                        >
+                          <i class="fas fa-database"></i>
+                        </div>
+                        <div>
+                          <h5 class="font-bold text-slate-800 mb-1">
+                            KK Sistem Informasi
+                          </h5>
+                          <p class="text-xs text-slate-500">
+                            Data Science, GIS, Business Intel
+                          </p>
+                          <span
+                            class="inline-block mt-2 text-xs text-orange-600 font-semibold"
+                            >6 Dosen <i class="fas fa-chevron-right ml-1"></i
+                          ></span>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Mega Menu: Fasilitas -->
+          <div
+            id="mega-fasilitas"
+            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
+          >
+            <div class="container mx-auto px-6 py-8">
+              <div class="grid grid-cols-4 gap-6">
+                <a
+                  href="content.html?type=rubrik"
+                  class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
+                >
+                  <div
+                    class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
+                  ></div>
+                  <i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
+                  <h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">
+                    Laboratorium
+                  </h4>
+                  <p
+                    class="text-sm text-cyan-100 mb-4"
+                    data-i18n="mega_lab_desc"
+                  >
+                    8 lab modern dengan peralatan terkini
+                  </p>
+                  <span
+                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
+                    data-i18n="btn_explore"
+                  >
+                    Jelajahi <i class="fas fa-arrow-right"></i>
+                  </span>
                 </a>
-
-                <div class="hidden lg:flex items-center gap-5">
-                    <div class="flex items-center gap-3 text-sm">
-                        <a href="https://satu.untan.ac.id" target="_blank"
-                            class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
-                    </div>
-                    <div class="pl-5 border-l border-white/20 flex items-center gap-3">
-                        <button
-                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
-                            <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
-                        </button>
-                        <button
-                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
-                            aria-label="Pengaturan aksesibilitas"
-                            onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
-                            <i class="fas fa-universal-access" aria-hidden="true"></i>
-                        </button>
-                        <button
-                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
-                            aria-label="Cari konten">
-                            <i class="fas fa-search" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <button id="mobile-menu-button"
-                    class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
-                    aria-label="Buka menu navigasi" aria-expanded="false" aria-controls="mobile-menu">
-                    <i class="fas fa-bars" aria-hidden="true"></i>
-                </button>
+                <a
+                  href="content.html?type=rubrik"
+                  class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
+                >
+                  <div
+                    class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
+                  ></div>
+                  <i class="fas fa-server text-4xl mb-4 opacity-80"></i>
+                  <h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">
+                    Data Center
+                  </h4>
+                  <p
+                    class="text-sm text-violet-100 mb-4"
+                    data-i18n="mega_dc_desc"
+                  >
+                    Server & infrastruktur cloud lokal
+                  </p>
+                  <span
+                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
+                    data-i18n="btn_explore"
+                  >
+                    Jelajahi <i class="fas fa-arrow-right"></i>
+                  </span>
+                </a>
+                <a
+                  href="content.html?type=rubrik"
+                  class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
+                >
+                  <div
+                    class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
+                  ></div>
+                  <i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
+                  <h4
+                    class="text-lg font-bold mb-2"
+                    data-i18n="mega_eresources"
+                  >
+                    E-Resources
+                  </h4>
+                  <p
+                    class="text-sm text-emerald-100 mb-4"
+                    data-i18n="mega_eresources_desc"
+                  >
+                    Akses jurnal & database ilmiah
+                  </p>
+                  <span
+                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
+                    data-i18n="btn_explore"
+                  >
+                    Jelajahi <i class="fas fa-arrow-right"></i>
+                  </span>
+                </a>
+                <a
+                  href="ifuntanhub.html"
+                  class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
+                >
+                  <div
+                    class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12"
+                  ></div>
+                  <i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
+                  <h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
+                  <p
+                    class="text-sm text-slate-300 mb-4"
+                    data-i18n="mega_hub_desc"
+                  >
+                    Platform PaaS untuk mahasiswa
+                  </p>
+                  <span
+                    class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all"
+                  >
+                    Launch <i class="fas fa-external-link-alt"></i>
+                  </span>
+                </a>
+              </div>
             </div>
+          </div>
+
+          <!-- Mega Menu: Karya & Agenda -->
+          <div
+            id="mega-karya"
+            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
+          >
+            <div class="container mx-auto px-6 py-8">
+              <div class="grid grid-cols-12 gap-8">
+                <!-- Left: Research Highlight -->
+                <div class="col-span-5">
+                  <div
+                    class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4"
+                  >
+                    <span
+                      class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
+                      data-i18n="mega_research_title"
+                      >Riset Unggulan</span
+                    >
+                    <h3
+                      class="text-xl font-bold mb-2"
+                      data-i18n="mega_sinta_title"
+                    >
+                      Indeks SINTA Terbaik
+                    </h3>
+                    <p
+                      class="text-amber-100 text-sm mb-4"
+                      data-i18n="mega_sinta_desc"
+                    >
+                      Publikasi dosen terindeks Scopus, WoS, dan jurnal nasional
+                      terakreditasi.
+                    </p>
+                    <a
+                      href="content.html?type=berita"
+                      class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
+                      data-i18n="btn_publications"
+                    >
+                      Lihat Publikasi
+                    </a>
+                  </div>
+                  <a
+                    href="content.html?type=berita"
+                    class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all"
+                  >
+                    <div class="flex items-center gap-3">
+                      <div
+                        class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600"
+                      >
+                        <i class="fas fa-calendar-alt"></i>
+                      </div>
+                      <div>
+                        <h5
+                          class="font-bold text-slate-800 text-sm"
+                          data-i18n="link_info_agenda"
+                        >
+                          Info & Agenda
+                        </h5>
+                        <p
+                          class="text-xs text-slate-500"
+                          data-i18n="link_info_agenda_desc"
+                        >
+                          Pengumuman dan jadwal kegiatan
+                        </p>
+                      </div>
+                      <i
+                        class="fas fa-chevron-right text-slate-400 ml-auto"
+                      ></i>
+                    </div>
+                  </a>
+                </div>
+                <!-- Right: Grid -->
+                <div class="col-span-7 grid grid-cols-2 gap-4">
+                  <a href="karya.html" class="mega-link-card group">
+                    <div
+                      class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-layer-group"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue"
+                      >
+                        Semua Karya
+                      </h4>
+                      <p class="text-xs text-slate-500 mt-1">
+                        Lihat seluruh karya dalam satu halaman
+                      </p>
+                    </div>
+                  </a>
+                  <a
+                    href="karya.html?filter=penelitian"
+                    class="mega-link-card group"
+                  >
+                    <div
+                      class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-microscope"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue"
+                        data-i18n="link_research"
+                      >
+                        Riset
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_research_desc"
+                      >
+                        Penelitian dosen dan mahasiswa
+                      </p>
+                    </div>
+                  </a>
+                  <a href="karya.html?filter=pkm" class="mega-link-card group">
+                    <div
+                      class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-hands-helping"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue"
+                        data-i18n="link_community"
+                      >
+                        Pengabdian
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_community_desc"
+                      >
+                        Program pengabdian masyarakat
+                      </p>
+                    </div>
+                  </a>
+                  <a
+                    href="content.html?type=rubrik"
+                    class="mega-link-card group"
+                  >
+                    <div
+                      class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"
+                    >
+                      <i class="fas fa-trophy"></i>
+                    </div>
+                    <div>
+                      <h4
+                        class="font-bold text-slate-800 group-hover:text-untan-blue"
+                        data-i18n="link_achievements"
+                      >
+                        Prestasi
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 mt-1"
+                        data-i18n="link_achievements_desc"
+                      >
+                        Pencapaian dosen & mahasiswa
+                      </p>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Mega Menu: Kontak -->
+          <div
+            id="mega-kontak"
+            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
+          >
+            <div class="container mx-auto px-6 py-8">
+              <div class="grid grid-cols-12 gap-8">
+                <!-- Left: Contact Info -->
+                <div
+                  class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white"
+                >
+                  <h3
+                    class="text-xl font-bold mb-4"
+                    data-i18n="mega_contact_title"
+                  >
+                    Hubungi Kami
+                  </h3>
+                  <div class="space-y-4">
+                    <div class="flex items-start gap-3">
+                      <div
+                        class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
+                      >
+                        <i class="fas fa-map-marker-alt text-untan-yellow"></i>
+                      </div>
+                      <div>
+                        <p class="text-sm text-slate-300">
+                          Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Pontianak
+                          Tenggara
+                        </p>
+                        <p class="text-xs text-slate-400 mt-1">
+                          Kalimantan Barat 78124
+                        </p>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <div
+                        class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
+                      >
+                        <i class="fab fa-whatsapp text-untan-yellow"></i>
+                      </div>
+                      <div>
+                        <p class="text-sm text-white font-medium">
+                          +62 851-7165-5161
+                        </p>
+                        <p class="text-xs text-slate-400">
+                          Senin - Jumat, 08:00 - 16:00
+                        </p>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <div
+                        class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
+                      >
+                        <i class="fas fa-envelope text-untan-yellow"></i>
+                      </div>
+                      <div>
+                        <p class="text-sm text-white font-medium">
+                          info@informatika.untan.ac.id
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- Right: Quick Links & Social -->
+                <div class="col-span-7">
+                  <div class="grid grid-cols-2 gap-4 mb-6">
+                    <a
+                      href="content.html?type=berita"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-id-card"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_official_contact"
+                        >
+                          Kontak Resmi
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_contact_desc"
+                        >
+                          Direktori kontak staf
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="mailto:info@informatika.untan.ac.id"
+                      class="mega-link-card group"
+                    >
+                      <div
+                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
+                      >
+                        <i class="fas fa-comment-dots"></i>
+                      </div>
+                      <div>
+                        <h4
+                          class="font-bold text-slate-800 group-hover:text-untan-blue"
+                          data-i18n="link_feedback"
+                        >
+                          Saran & Masukan
+                        </h4>
+                        <p
+                          class="text-xs text-slate-500 mt-1"
+                          data-i18n="link_feedback_desc"
+                        >
+                          Kirim feedback Anda
+                        </p>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="bg-slate-50 rounded-xl p-5">
+                    <h4
+                      class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
+                      data-i18n="follow_us"
+                    >
+                      Ikuti Kami
+                    </h4>
+                    <div class="flex gap-3">
+                      <a
+                        href="https://instagram.com/informatika.untan"
+                        target="_blank"
+                        class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
+                      >
+                        <i class="fab fa-instagram text-xl"></i>
+                      </a>
+                      <a
+                        href="#"
+                        class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
+                      >
+                        <i class="fab fa-youtube text-xl"></i>
+                      </a>
+                      <a
+                        href="#"
+                        class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
+                      >
+                        <i class="fab fa-facebook-f text-xl"></i>
+                      </a>
+                      <a
+                        href="#"
+                        class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
+                      >
+                        <i class="fab fa-twitter text-xl"></i>
+                      </a>
+                      <a
+                        href="#"
+                        class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
+                      >
+                        <i class="fab fa-linkedin-in text-xl"></i>
+                      </a>
+                      <a
+                        href="#"
+                        class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
+                      >
+                        <i class="fab fa-tiktok text-xl"></i>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+        <!-- End mega-menu-container -->
+      </nav>
 
-        <nav class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative" id="main-nav"
-            aria-label="Menu navigasi utama">
-            <div class="container mx-auto px-6">
-                <div class="flex items-center justify-center w-full gap-1 py-2" role="menubar">
-
-                    <!-- Menu: Tentang Kami -->
-                    <div class="nav-menu-item relative" data-menu="tentang">
-                        <button
-                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_about">Tentang Kami</span>
-                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
-                        </button>
-                    </div>
-
-                    <!-- Menu: Program -->
-                    <div class="nav-menu-item relative" data-menu="program">
-                        <button
-                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_program">Program</span>
-                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
-                        </button>
-                    </div>
-
-                    <!-- Menu: SDM -->
-                    <div class="nav-menu-item relative" data-menu="sdm">
-                        <button
-                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_sdm">SDM</span>
-                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
-                        </button>
-                    </div>
-
-                    <!-- Menu: Fasilitas -->
-                    <div class="nav-menu-item relative" data-menu="fasilitas">
-                        <button
-                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_facilities">Fasilitas</span>
-                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
-                        </button>
-                    </div>
-
-                    <!-- Menu: Karya & Agenda -->
-                    <div class="nav-menu-item relative" data-menu="karya">
-                        <button
-                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_works">Karya & Agenda</span>
-                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
-                        </button>
-                    </div>
-
-                    <!-- Menu: Kontak -->
-                    <div class="nav-menu-item relative" data-menu="kontak">
-                        <button
-                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_contact">Kontak</span>
-                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
-                        </button>
-                    </div>
-
-                </div>
-            </div>
-
-            <!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
-            <div id="mega-menu-container" class="absolute left-0 right-0 top-full z-50">
-
-                <!-- Mega Menu: Tentang Kami -->
-                <div id="mega-tentang" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
-                    <div class="container mx-auto px-6 py-8">
-                        <div class="grid grid-cols-12 gap-8">
-                            <!-- Left: Featured -->
-                            <div
-                                class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden">
-                                <div
-                                    class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16">
-                                </div>
-                                <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12">
-                                </div>
-                                <div class="relative z-10">
-                                    <span
-                                        class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
-                                        data-i18n="mega_about_title">Tentang Kami</span>
-                                    <h3 class="text-2xl font-bold mb-3">Mengenal Informatika UNTAN</h3>
-                                    <p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">
-                                        Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi
-                                        sejak 1993.</p>
-                                    <a href="content.html?type=berita"
-                                        class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">
-                                        Selengkapnya <i class="fas fa-arrow-right"></i>
-                                    </a>
-                                </div>
-                            </div>
-                            <!-- Right: Links -->
-                            <div class="col-span-8 grid grid-cols-2 gap-6">
-                                <a href="content.html?type=berita" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
-                                        <i class="fas fa-landmark"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                                            data-i18n="link_history">Sejarah & Tonggak</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_history_desc">Perjalanan
-                                            panjang membangun generasi digital</p>
-                                    </div>
-                                </a>
-                                <a href="content.html?type=berita" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
-                                        <i class="fas fa-users"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                                            data-i18n="link_org">Struktur Organisasi</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_org_desc">Pimpinan dan
-                                            jajaran pengelola</p>
-                                    </div>
-                                </a>
-                                <a href="profil.html" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white">
-                                        <i class="fas fa-bullseye"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                                            data-i18n="link_vision">Visi & Misi</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_vision_desc">Arah dan
-                                            tujuan pengembangan prodi</p>
-                                    </div>
-                                </a>
-                                <a href="content.html?type=berita" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white">
-                                        <i class="fas fa-handshake"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                                            data-i18n="link_partnership">Kerjasama & MoU</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_partnership_desc">Mitra
-                                            industri dan akademik</p>
-                                    </div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Mega Menu: Program -->
-                <div id="mega-program" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
-                    <div class="container mx-auto px-6 py-8">
-                        <div class="grid grid-cols-12 gap-8">
-                            <!-- Left: Featured -->
-                            <div
-                                class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden">
-                                <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20">
-                                </div>
-                                <div class="relative z-10">
-                                    <span
-                                        class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4">Program
-                                        Akademik</span>
-                                    <h3 class="text-2xl font-bold mb-3" data-i18n="mega_program_obe">Kurikulum Berbasis
-                                        OBE</h3>
-                                    <p class="text-blue-100 text-sm mb-6 leading-relaxed">Outcome-Based Education dengan
-                                        4 jalur konsentrasi: AI, Software Engineering, Network, dan Information Systems.
-                                    </p>
-                                    <a href="subject-and-courses.html"
-                                        class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
-                                        data-i18n="btn_krs_sim">
-                                        <i class="fas fa-play-circle"></i> Simulasi KRS
-                                    </a>
-                                </div>
-                            </div>
-                            <!-- Right: Links Grid -->
-                            <div class="col-span-8">
-                                <div class="grid grid-cols-3 gap-4">
-                                    <a href="subject-and-courses.html" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
-                                            <i class="fas fa-graduation-cap"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_academic">Akademik</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">
-                                                Jadwal, KRS, dan kalender</p>
-                                        </div>
-                                    </a>
-                                    <a href="content.html?type=berita" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white">
-                                            <i class="fas fa-award"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_accreditation">Akreditasi</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_accred_desc">Status
-                                                Unggul BAN-PT</p>
-                                        </div>
-                                    </a>
-                                    <a href="graduate-profile.html" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
-                                            <i class="fas fa-user-graduate"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_graduate">Profil Lulusan</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_graduate_desc">
-                                                Kompetensi & karir</p>
-                                        </div>
-                                    </a>
-                                    <a href="subject-and-courses.html" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white">
-                                            <i class="fas fa-book-open"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_courses">Mata Kuliah</h4>
-                                            <p class="text-xs text-slate-500 mt-1">144 SKS kurikulum</p>
-                                        </div>
-                                    </a>
-                                    <a href="academic-guidelines.html" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white">
-                                            <i class="fas fa-file-alt"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_guideline">Panduan</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_guideline_desc">Buku
-                                                panduan akademik</p>
-                                        </div>
-                                    </a>
-                                    <a href="content.html?type=berita" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white">
-                                            <i class="fas fa-chart-bar"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_statistics">Informatika Angka</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_statistics_desc">
-                                                Statistik & data</p>
-                                        </div>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Mega Menu: SDM -->
-                <div id="mega-sdm" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
-                    <div class="container mx-auto px-6 py-8">
-                        <div class="grid grid-cols-12 gap-8">
-                            <!-- Left: Featured Dosen -->
-                            <div
-                                class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden">
-                                <div class="absolute inset-0 opacity-10">
-                                    <div class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full">
-                                    </div>
-                                    <div class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full">
-                                    </div>
-                                </div>
-                                <div class="relative z-10">
-                                    <span
-                                        class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
-                                        data-i18n="mega_sdm_title">Sumber Daya Manusia</span>
-                                    <h3 class="text-2xl font-bold mb-3" data-i18n="mega_sdm_desc">Tim Pengajar
-                                        Profesional</h3>
-                                    <p class="text-slate-300 text-sm mb-4 leading-relaxed">30+ dosen berkualifikasi
-                                        S2/S3 dari universitas terkemuka dalam dan luar negeri.</p>
-                                    <div class="flex gap-4 mb-6">
-                                        <div class="text-center">
-                                            <div class="text-2xl font-bold text-untan-yellow">15+</div>
-                                            <div class="text-[10px] text-slate-400 uppercase">Doktor</div>
-                                        </div>
-                                        <div class="text-center">
-                                            <div class="text-2xl font-bold text-untan-yellow">20+</div>
-                                            <div class="text-[10px] text-slate-400 uppercase">Magister</div>
-                                        </div>
-                                        <div class="text-center">
-                                            <div class="text-2xl font-bold text-untan-yellow">5</div>
-                                            <div class="text-[10px] text-slate-400 uppercase">Guru Besar</div>
-                                        </div>
-                                    </div>
-                                    <a href="people-based-on-kk.html"
-                                        class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
-                                        data-i18n="btn_all_lecturers">
-                                        Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
-                                    </a>
-                                </div>
-                            </div>
-                            <!-- Right: KK Groups -->
-                            <div class="col-span-7">
-                                <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
-                                    data-i18n="label_expertise">Kelompok Keahlian</h4>
-                                <div class="grid grid-cols-2 gap-4">
-                                    <a href="people-based-on-kk.html"
-                                        class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all">
-                                        <div class="flex items-start gap-4">
-                                            <div
-                                                class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
-                                                <i class="fas fa-brain"></i>
-                                            </div>
-                                            <div>
-                                                <h5 class="font-bold text-slate-800 mb-1">KK Kecerdasan Buatan</h5>
-                                                <p class="text-xs text-slate-500">Machine Learning, Computer Vision, NLP
-                                                </p>
-                                                <span class="inline-block mt-2 text-xs text-purple-600 font-semibold">8
-                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
-                                            </div>
-                                        </div>
-                                    </a>
-                                    <a href="people-based-on-kk.html"
-                                        class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all">
-                                        <div class="flex items-start gap-4">
-                                            <div
-                                                class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
-                                                <i class="fas fa-code"></i>
-                                            </div>
-                                            <div>
-                                                <h5 class="font-bold text-slate-800 mb-1">KK Rekayasa Perangkat Lunak
-                                                </h5>
-                                                <p class="text-xs text-slate-500">Software Engineering, DevOps, Testing
-                                                </p>
-                                                <span class="inline-block mt-2 text-xs text-blue-600 font-semibold">10
-                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
-                                            </div>
-                                        </div>
-                                    </a>
-                                    <a href="people-based-on-kk.html"
-                                        class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all">
-                                        <div class="flex items-start gap-4">
-                                            <div
-                                                class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
-                                                <i class="fas fa-network-wired"></i>
-                                            </div>
-                                            <div>
-                                                <h5 class="font-bold text-slate-800 mb-1">KK Jaringan & Keamanan</h5>
-                                                <p class="text-xs text-slate-500">Network, Cybersecurity, Cloud</p>
-                                                <span class="inline-block mt-2 text-xs text-emerald-600 font-semibold">7
-                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
-                                            </div>
-                                        </div>
-                                    </a>
-                                    <a href="people-based-on-kk.html"
-                                        class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all">
-                                        <div class="flex items-start gap-4">
-                                            <div
-                                                class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
-                                                <i class="fas fa-database"></i>
-                                            </div>
-                                            <div>
-                                                <h5 class="font-bold text-slate-800 mb-1">KK Sistem Informasi</h5>
-                                                <p class="text-xs text-slate-500">Data Science, GIS, Business Intel</p>
-                                                <span class="inline-block mt-2 text-xs text-orange-600 font-semibold">6
-                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
-                                            </div>
-                                        </div>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Mega Menu: Fasilitas -->
-                <div id="mega-fasilitas" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
-                    <div class="container mx-auto px-6 py-8">
-                        <div class="grid grid-cols-4 gap-6">
-                            <a href="content.html?type=rubrik"
-                                class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
-                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
-                                </div>
-                                <i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
-                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">Laboratorium</h4>
-                                <p class="text-sm text-cyan-100 mb-4" data-i18n="mega_lab_desc">8 lab modern dengan
-                                    peralatan terkini</p>
-                                <span
-                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
-                                    data-i18n="btn_explore">
-                                    Jelajahi <i class="fas fa-arrow-right"></i>
-                                </span>
-                            </a>
-                            <a href="content.html?type=rubrik"
-                                class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
-                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
-                                </div>
-                                <i class="fas fa-server text-4xl mb-4 opacity-80"></i>
-                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">Data Center</h4>
-                                <p class="text-sm text-violet-100 mb-4" data-i18n="mega_dc_desc">Server & infrastruktur
-                                    cloud lokal</p>
-                                <span
-                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
-                                    data-i18n="btn_explore">
-                                    Jelajahi <i class="fas fa-arrow-right"></i>
-                                </span>
-                            </a>
-                            <a href="content.html?type=rubrik"
-                                class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
-                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
-                                </div>
-                                <i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
-                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_eresources">E-Resources</h4>
-                                <p class="text-sm text-emerald-100 mb-4" data-i18n="mega_eresources_desc">Akses jurnal &
-                                    database ilmiah</p>
-                                <span
-                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
-                                    data-i18n="btn_explore">
-                                    Jelajahi <i class="fas fa-arrow-right"></i>
-                                </span>
-                            </a>
-                            <a href="ifuntanhub.html"
-                                class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
-                                <div
-                                    class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12">
-                                </div>
-                                <i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
-                                <h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
-                                <p class="text-sm text-slate-300 mb-4" data-i18n="mega_hub_desc">Platform PaaS untuk
-                                    mahasiswa</p>
-                                <span
-                                    class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all">
-                                    Launch <i class="fas fa-external-link-alt"></i>
-                                </span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Mega Menu: Karya & Agenda -->
-                <div id="mega-karya" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
-                    <div class="container mx-auto px-6 py-8">
-                        <div class="grid grid-cols-12 gap-8">
-                            <!-- Left: Research Highlight -->
-                            <div class="col-span-5">
-                                <div
-                                    class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4">
-                                    <span
-                                        class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
-                                        data-i18n="mega_research_title">Riset Unggulan</span>
-                                    <h3 class="text-xl font-bold mb-2" data-i18n="mega_sinta_title">Indeks SINTA Terbaik
-                                    </h3>
-                                    <p class="text-amber-100 text-sm mb-4" data-i18n="mega_sinta_desc">Publikasi dosen
-                                        terindeks Scopus, WoS, dan jurnal nasional terakreditasi.</p>
-                                    <a href="content.html?type=berita"
-                                        class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
-                                        data-i18n="btn_publications">
-                                        Lihat Publikasi
-                                    </a>
-                                </div>
-                                <a href="content.html?type=berita"
-                                    class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all">
-                                    <div class="flex items-center gap-3">
-                                        <div
-                                            class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600">
-                                            <i class="fas fa-calendar-alt"></i>
-                                        </div>
-                                        <div>
-                                            <h5 class="font-bold text-slate-800 text-sm" data-i18n="link_info_agenda">
-                                                Info & Agenda</h5>
-                                            <p class="text-xs text-slate-500" data-i18n="link_info_agenda_desc">
-                                                Pengumuman dan jadwal kegiatan</p>
-                                        </div>
-                                        <i class="fas fa-chevron-right text-slate-400 ml-auto"></i>
-                                    </div>
-                                </a>
-                            </div>
-                            <!-- Right: Grid -->
-                            <div class="col-span-7 grid grid-cols-2 gap-4">
-                                <a href="karya.html" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
-                                        <i class="fas fa-layer-group"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue">Semua Karya
-                                        </h4>
-                                        <p class="text-xs text-slate-500 mt-1">Lihat seluruh karya dalam satu halaman
-                                        </p>
-                                    </div>
-                                </a>
-                                <a href="karya.html?filter=penelitian" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
-                                        <i class="fas fa-microscope"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                            data-i18n="link_research">Riset</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_research_desc">Penelitian
-                                            dosen dan mahasiswa</p>
-                                    </div>
-                                </a>
-                                <a href="karya.html?filter=pkm" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
-                                        <i class="fas fa-hands-helping"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                            data-i18n="link_community">Pengabdian</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_community_desc">Program
-                                            pengabdian masyarakat</p>
-                                    </div>
-                                </a>
-                                <a href="content.html?type=rubrik" class="mega-link-card group">
-                                    <div
-                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
-                                        <i class="fas fa-trophy"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                            data-i18n="link_achievements">Prestasi</h4>
-                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_achievements_desc">
-                                            Pencapaian dosen & mahasiswa</p>
-                                    </div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Mega Menu: Kontak -->
-                <div id="mega-kontak" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
-                    <div class="container mx-auto px-6 py-8">
-                        <div class="grid grid-cols-12 gap-8">
-                            <!-- Left: Contact Info -->
-                            <div class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white">
-                                <h3 class="text-xl font-bold mb-4" data-i18n="mega_contact_title">Hubungi Kami</h3>
-                                <div class="space-y-4">
-                                    <div class="flex items-start gap-3">
-                                        <div
-                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
-                                            <i class="fas fa-map-marker-alt text-untan-yellow"></i>
-                                        </div>
-                                        <div>
-                                            <p class="text-sm text-slate-300">Jl. Prof. Dr. H. Hadari Nawawi, Bansir
-                                                Laut, Pontianak Tenggara</p>
-                                            <p class="text-xs text-slate-400 mt-1">Kalimantan Barat 78124</p>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center gap-3">
-                                        <div
-                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
-                                            <i class="fab fa-whatsapp text-untan-yellow"></i>
-                                        </div>
-                                        <div>
-                                            <p class="text-sm text-white font-medium">+62 851-7165-5161</p>
-                                            <p class="text-xs text-slate-400">Senin - Jumat, 08:00 - 16:00</p>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center gap-3">
-                                        <div
-                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
-                                            <i class="fas fa-envelope text-untan-yellow"></i>
-                                        </div>
-                                        <div>
-                                            <p class="text-sm text-white font-medium">info@informatika.untan.ac.id</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Right: Quick Links & Social -->
-                            <div class="col-span-7">
-                                <div class="grid grid-cols-2 gap-4 mb-6">
-                                    <a href="content.html?type=berita" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
-                                            <i class="fas fa-id-card"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_official_contact">Kontak Resmi</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_contact_desc">
-                                                Direktori kontak staf</p>
-                                        </div>
-                                    </a>
-                                    <a href="mailto:info@informatika.untan.ac.id" class="mega-link-card group">
-                                        <div
-                                            class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
-                                            <i class="fas fa-comment-dots"></i>
-                                        </div>
-                                        <div>
-                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
-                                                data-i18n="link_feedback">Saran & Masukan</h4>
-                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_feedback_desc">Kirim
-                                                feedback Anda</p>
-                                        </div>
-                                    </a>
-                                </div>
-                                <div class="bg-slate-50 rounded-xl p-5">
-                                    <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
-                                        data-i18n="follow_us">Ikuti Kami</h4>
-                                    <div class="flex gap-3">
-                                        <a href="https://instagram.com/informatika.untan" target="_blank"
-                                            class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
-                                            <i class="fab fa-instagram text-xl"></i>
-                                        </a>
-                                        <a href="#"
-                                            class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
-                                            <i class="fab fa-youtube text-xl"></i>
-                                        </a>
-                                        <a href="#"
-                                            class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
-                                            <i class="fab fa-facebook-f text-xl"></i>
-                                        </a>
-                                        <a href="#"
-                                            class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
-                                            <i class="fab fa-twitter text-xl"></i>
-                                        </a>
-                                        <a href="#"
-                                            class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
-                                            <i class="fab fa-linkedin-in text-xl"></i>
-                                        </a>
-                                        <a href="#"
-                                            class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
-                                            <i class="fab fa-tiktok text-xl"></i>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-            <!-- End mega-menu-container -->
-        </nav>
-
-        <!-- Overlay for mega menu -->
-        <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
+      <!-- Overlay for mega menu -->
+      <div
+        id="mega-overlay"
+        class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"
+      ></div>
     </div>
 
-    <div id="mobile-menu"
-        class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
-        role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
-        <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
-            <div class="flex items-center gap-4">
-                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
-                <button
-                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
-                    aria-label="Ganti bahasa">
-                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
-                </button>
-                <button
-                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
-                    aria-label="Pengaturan aksesibilitas"
-                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
-                    <i class="fas fa-universal-access" aria-hidden="true"></i>
-                </button>
-            </div>
-            <button id="close-mobile-menu"
-                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
-                aria-label="Tutup menu navigasi">
-                <i class="fas fa-times" aria-hidden="true"></i>
-            </button>
+    <div
+      id="mobile-menu"
+      class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Menu navigasi mobile"
+    >
+      <div
+        class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy"
+      >
+        <div class="flex items-center gap-4">
+          <span class="font-bold text-lg text-white font-serif"
+            >Menu Utama</span
+          >
+          <button
+            class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
+            aria-label="Ganti bahasa"
+          >
+            <span class="font-bold">ID</span>
+            <span class="text-white/40" aria-hidden="true">|</span> EN
+          </button>
+          <button
+            class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
+            aria-label="Pengaturan aksesibilitas"
+            onclick="
+              const p = document.getElementById('access-panel');
+              if (p) {
+                p.classList.toggle('hidden');
+                p.classList.toggle('flex');
+              }
+            "
+          >
+            <i class="fas fa-universal-access" aria-hidden="true"></i>
+          </button>
         </div>
-        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
-            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
-                data-i18n="nav_home">Beranda</a>
+        <button
+          id="close-mobile-menu"
+          class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
+          aria-label="Tutup menu navigasi"
+        >
+          <i class="fas fa-times" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
+        <a
+          href="../../index.html"
+          class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
+          data-i18n="nav_home"
+          >Beranda</a
+        >
 
-            <!-- Tentang Kami -->
-            <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
-                    Kami</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_history">Sejarah & Tonggak</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_org">Struktur Organisasi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_vision">Visi & Misi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_partnership">Kerjasama & MoU</a>
-                </div>
-            </div>
-
-            <!-- Program -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_program">Program</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_academic">Akademik</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_accreditation">Akreditasi</a>
-                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_graduate">Profil Lulusan</a>
-                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_courses">Mata Kuliah</a>
-                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_guideline">Panduan Akademik</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_statistics">Informatika Angka</a>
-                </div>
-            </div>
-
-            <!-- SDM -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="people-based-on-kk.html"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
-                        data-i18n="btn_all_lecturers">Semua Dosen</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_ai">Kecerdasan Buatan</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_network">Jaringan & Keamanan</a>
-                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="kk_is">Sistem Informasi</a>
-                </div>
-            </div>
-
-            <!-- Fasilitas -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_facilities">Fasilitas</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_lab">Laboratorium</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_dc">Data Center</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="mega_eresources">E-Resources</a>
-                    <a href="ifuntanhub.html"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
-                </div>
-            </div>
-
-            <!-- Karya & Agenda -->
-            <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
-                    Agenda</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_all_karya">Semua Karya</a>
-                    <a href="karya.html?filter=penelitian"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_research">Riset</a>
-                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_community">Pengabdian Masyarakat</a>
-                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_achievements">Prestasi</a>
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_info_agenda">Info & Agenda</a>
-                </div>
-            </div>
-
-            <!-- Kontak -->
-            <div class="pt-2 border-t border-slate-200 pb-8">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
-                    data-i18n="nav_contact">Kontak</span>
-                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_official_contact">Kontak Resmi</a>
-                    <a href="mailto:info@informatika.untan.ac.id"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-                        data-i18n="link_feedback">Saran & Masukan</a>
-                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-instagram text-pink-500"></i> Instagram
-                    </a>
-                    <a href="#"
-                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
-                        <i class="fab fa-youtube text-red-500"></i> YouTube
-                    </a>
-                </div>
-            </div>
+        <!-- Tentang Kami -->
+        <div class="pt-2">
+          <span
+            class="text-xs font-bold text-slate-400 uppercase font-serif"
+            data-i18n="nav_about"
+            >Tentang Kami</span
+          >
+          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_history"
+              >Sejarah & Tonggak</a
+            >
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_org"
+              >Struktur Organisasi</a
+            >
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_vision"
+              >Visi & Misi</a
+            >
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_partnership"
+              >Kerjasama & MoU</a
+            >
+          </div>
         </div>
+
+        <!-- Program -->
+        <div class="pt-2 border-t border-slate-200">
+          <span
+            class="text-xs font-bold text-slate-400 uppercase font-serif"
+            data-i18n="nav_program"
+            >Program</span
+          >
+          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+            <a
+              href="subject-and-courses.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_academic"
+              >Akademik</a
+            >
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_accreditation"
+              >Akreditasi</a
+            >
+            <a
+              href="graduate-profile.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_graduate"
+              >Profil Lulusan</a
+            >
+            <a
+              href="subject-and-courses.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_courses"
+              >Mata Kuliah</a
+            >
+            <a
+              href="academic-guidelines.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_guideline"
+              >Panduan Akademik</a
+            >
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_statistics"
+              >Informatika Angka</a
+            >
+          </div>
+        </div>
+
+        <!-- SDM -->
+        <div class="pt-2 border-t border-slate-200">
+          <span
+            class="text-xs font-bold text-slate-400 uppercase font-serif"
+            data-i18n="nav_sdm"
+            >SDM</span
+          >
+          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+            <a
+              href="people-based-on-kk.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
+              data-i18n="btn_all_lecturers"
+              >Semua Dosen</a
+            >
+            <a
+              href="people-based-on-kk.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="kk_ai"
+              >Kecerdasan Buatan</a
+            >
+            <a
+              href="people-based-on-kk.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="kk_se"
+              >Rekayasa Perangkat Lunak</a
+            >
+            <a
+              href="people-based-on-kk.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="kk_network"
+              >Jaringan & Keamanan</a
+            >
+            <a
+              href="people-based-on-kk.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="kk_is"
+              >Sistem Informasi</a
+            >
+          </div>
+        </div>
+
+        <!-- Fasilitas -->
+        <div class="pt-2 border-t border-slate-200">
+          <span
+            class="text-xs font-bold text-slate-400 uppercase font-serif"
+            data-i18n="nav_facilities"
+            >Fasilitas</span
+          >
+          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+            <a
+              href="content.html?type=rubrik"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="mega_lab"
+              >Laboratorium</a
+            >
+            <a
+              href="content.html?type=rubrik"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="mega_dc"
+              >Data Center</a
+            >
+            <a
+              href="content.html?type=rubrik"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="mega_eresources"
+              >E-Resources</a
+            >
+            <a
+              href="ifuntanhub.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              >IFUNTANHUB</a
+            >
+          </div>
+        </div>
+
+        <!-- Karya & Agenda -->
+        <div class="pt-2 border-t border-slate-200">
+          <span
+            class="text-xs font-bold text-slate-400 uppercase font-serif"
+            data-i18n="nav_works"
+            >Karya & Agenda</span
+          >
+          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+            <a
+              href="karya.html"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_all_karya"
+              >Semua Karya</a
+            >
+            <a
+              href="karya.html?filter=penelitian"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_research"
+              >Riset</a
+            >
+            <a
+              href="karya.html?filter=pkm"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_community"
+              >Pengabdian Masyarakat</a
+            >
+            <a
+              href="content.html?type=rubrik"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_achievements"
+              >Prestasi</a
+            >
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_info_agenda"
+              >Info & Agenda</a
+            >
+          </div>
+        </div>
+
+        <!-- Kontak -->
+        <div class="pt-2 border-t border-slate-200 pb-8">
+          <span
+            class="text-xs font-bold text-slate-400 uppercase font-serif"
+            data-i18n="nav_contact"
+            >Kontak</span
+          >
+          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+            <a
+              href="content.html?type=berita"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_official_contact"
+              >Kontak Resmi</a
+            >
+            <a
+              href="mailto:info@informatika.untan.ac.id"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+              data-i18n="link_feedback"
+              >Saran & Masukan</a
+            >
+            <a
+              href="https://instagram.com/informatika.untan"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2"
+            >
+              <i class="fab fa-instagram text-pink-500"></i> Instagram
+            </a>
+            <a
+              href="#"
+              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2"
+            >
+              <i class="fab fa-youtube text-red-500"></i> YouTube
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
 
-<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
-        <div class="container mx-auto px-4 lg:px-8 py-12">
-            <div class="mb-8 pb-8 border-b border-slate-200">
-                <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Sorotan dan Prestasi Karya Mahasiswa</h1>
-                <p class="text-slate-500 text-sm">Kelompok 06 &mdash; ACAAB &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
-            </div>
-            <div id="assignment-body" class="prose prose-slate max-w-none">
-                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
-                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-            </div>
+    <main
+      id="main-content"
+      class="pt-[88px] lg:pt-[160px] min-h-screen bg-white"
+    >
+      <div class="container mx-auto px-4 lg:px-8 py-12">
+        <div class="mb-8 pb-8 border-b border-slate-200">
+          <span
+            class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3"
+            >Tugas Halaman Statis</span
+          >
+          <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">
+            Sorotan dan Prestasi Karya Mahasiswa
+          </h1>
+          <p class="text-slate-500 text-sm">
+            Kelompok 06 &mdash; ACAAB &nbsp;&middot;&nbsp; Informatika UNTAN
+            2026
+          </p>
         </div>
+        <div id="assignment-body" class="prose prose-slate max-w-none">
+          <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+          <p>Tulis konten halaman kelompok di sini.</p>
+          <h3>Subjudul</h3>
+          <p>
+            Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.
+          </p>
+          <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+        </div>
+      </div>
     </main>
 
-    <footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
-        <div class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center">
-
-            <h3 class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4" data-i18n="footer_follow_us">
-                Ikuti Kami</h3>
-            <div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
-                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-untan-yellow transition-colors"><i
-                        class="fab fa-instagram text-xl sm:text-2xl"></i></a>
-                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-untan-yellow transition-colors"><i
-                        class="fab fa-youtube text-xl sm:text-2xl"></i></a>
-                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-untan-yellow transition-colors"><i
-                        class="fab fa-facebook-f text-xl sm:text-2xl"></i></a>
-                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-untan-yellow transition-colors"><i
-                        class="fab fa-twitter text-xl sm:text-2xl"></i></a>
-                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-untan-yellow transition-colors"><i
-                        class="fab fa-linkedin-in text-xl sm:text-2xl"></i></a>
-                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-untan-yellow transition-colors"><i
-                        class="fab fa-tiktok text-xl sm:text-2xl"></i></a>
-            </div>
-
-            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left">
-                <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
-                    class="h-16 sm:h-20 shrink-0" alt="Logo UNTAN">
-                <div
-                    class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight">
-                    <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1">INFORMATIKA</h2>
-                    <h2 class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5">
-                        UNIVERSITAS TANJUNGPURA</h2>
-                </div>
-            </div>
-
-            <div class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light">
-                <p class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1">
-                    <i class="fas fa-map-marker-alt text-untan-yellow"></i>
-                    Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,
-                </p>
-                <p>Kota Pontianak, Kalimantan Barat 78124</p>
-            </div>
-
-            <div
-                class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide">
-                <span>E: info@informatika.untan.ac.id</span>
-                <span class="hidden sm:inline opacity-50">|</span>
-                <span>P: +62 851-7165-5161</span>
-                <span class="hidden sm:inline opacity-50">|</span>
-                <span>F: +62(561) 739637</span>
-                <span class="hidden sm:inline opacity-50">|</span>
-                <span>WA: +62 851-7165-5161</span>
-            </div>
-
+    <footer
+      class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0"
+    >
+      <div
+        class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center"
+      >
+        <h3
+          class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4"
+          data-i18n="footer_follow_us"
+        >
+          Ikuti Kami
+        </h3>
+        <div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
+          <a
+            href="https://instagram.com/informatika.untan"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-white hover:text-untan-yellow transition-colors"
+            ><i class="fab fa-instagram text-xl sm:text-2xl"></i
+          ></a>
+          <a
+            href="https://instagram.com/informatika.untan"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-white hover:text-untan-yellow transition-colors"
+            ><i class="fab fa-youtube text-xl sm:text-2xl"></i
+          ></a>
+          <a
+            href="https://instagram.com/informatika.untan"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-white hover:text-untan-yellow transition-colors"
+            ><i class="fab fa-facebook-f text-xl sm:text-2xl"></i
+          ></a>
+          <a
+            href="https://instagram.com/informatika.untan"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-white hover:text-untan-yellow transition-colors"
+            ><i class="fab fa-twitter text-xl sm:text-2xl"></i
+          ></a>
+          <a
+            href="https://instagram.com/informatika.untan"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-white hover:text-untan-yellow transition-colors"
+            ><i class="fab fa-linkedin-in text-xl sm:text-2xl"></i
+          ></a>
+          <a
+            href="https://instagram.com/informatika.untan"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-white hover:text-untan-yellow transition-colors"
+            ><i class="fab fa-tiktok text-xl sm:text-2xl"></i
+          ></a>
         </div>
 
-        <div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
-            <img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom"
-                style="object-position: bottom;">
+        <div
+          class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left"
+        >
+          <img
+            src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+            class="h-16 sm:h-20 shrink-0"
+            alt="Logo UNTAN"
+          />
+          <div
+            class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight"
+          >
+            <h2
+              class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1"
+            >
+              INFORMATIKA
+            </h2>
+            <h2
+              class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5"
+            >
+              UNIVERSITAS TANJUNGPURA
+            </h2>
+          </div>
         </div>
+
+        <div
+          class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light"
+        >
+          <p
+            class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1"
+          >
+            <i class="fas fa-map-marker-alt text-untan-yellow"></i>
+            Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak
+            Tenggara,
+          </p>
+          <p>Kota Pontianak, Kalimantan Barat 78124</p>
+        </div>
+
+        <div
+          class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide"
+        >
+          <span>E: info@informatika.untan.ac.id</span>
+          <span class="hidden sm:inline opacity-50">|</span>
+          <span>P: +62 851-7165-5161</span>
+          <span class="hidden sm:inline opacity-50">|</span>
+          <span>F: +62(561) 739637</span>
+          <span class="hidden sm:inline opacity-50">|</span>
+          <span>WA: +62 851-7165-5161</span>
+        </div>
+      </div>
+
+      <div
+        class="w-full relative z-0 mt-4 pointer-events-none flex justify-center"
+      >
+        <img
+          src="../../assets/global/footer.png"
+          alt="Footer Illustration"
+          class="w-full h-auto object-cover object-bottom"
+          style="object-position: bottom"
+        />
+      </div>
     </footer>
 
     <script>
-        (function () {
-            const menuItems = document.querySelectorAll('[data-menu]');
-            const megaOverlay = document.getElementById('mega-overlay');
+      (function () {
+        const menuItems = document.querySelectorAll("[data-menu]");
+        const megaOverlay = document.getElementById("mega-overlay");
 
-            let activeMenu = null;
+        let activeMenu = null;
 
-            const menuMap = {
-                tentang: 'mega-tentang',
-                program: 'mega-program',
-                sdm: 'mega-sdm',
-                fasilitas: 'mega-fasilitas',
-                karya: 'mega-karya',
-                kontak: 'mega-kontak'
-            };
+        const menuMap = {
+          tentang: "mega-tentang",
+          program: "mega-program",
+          sdm: "mega-sdm",
+          fasilitas: "mega-fasilitas",
+          karya: "mega-karya",
+          kontak: "mega-kontak",
+        };
 
-            function setButtonState(menuId) {
-                menuItems.forEach(item => {
-                    const isActive = item.getAttribute('data-menu') === menuId;
-                    const btn = item.querySelector('.nav-menu-btn');
-                    const chevron = item.querySelector('.fa-chevron-down');
+        function setButtonState(menuId) {
+          menuItems.forEach((item) => {
+            const isActive = item.getAttribute("data-menu") === menuId;
+            const btn = item.querySelector(".nav-menu-btn");
+            const chevron = item.querySelector(".fa-chevron-down");
 
-                    btn.classList.toggle('active', isActive);
-                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
-                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
-                });
+            btn.classList.toggle("active", isActive);
+            btn.setAttribute("aria-expanded", isActive ? "true" : "false");
+            chevron.style.transform = isActive ? "rotate(180deg)" : "";
+          });
+        }
+
+        function closeMenus() {
+          Object.values(menuMap).forEach((panelId) => {
+            const panel = document.getElementById(panelId);
+            if (panel) panel.classList.remove("active");
+          });
+
+          megaOverlay.classList.remove("active");
+          setButtonState(null);
+          activeMenu = null;
+        }
+
+        function openMenu(menuId) {
+          const targetPanel = document.getElementById(menuMap[menuId]);
+          if (!targetPanel) return;
+
+          Object.values(menuMap).forEach((panelId) => {
+            const panel = document.getElementById(panelId);
+            if (panel) panel.classList.remove("active");
+          });
+
+          targetPanel.classList.add("active");
+          megaOverlay.classList.add("active");
+          setButtonState(menuId);
+          activeMenu = menuId;
+        }
+
+        menuItems.forEach((item) => {
+          const menuId = item.getAttribute("data-menu");
+          const button = item.querySelector(".nav-menu-btn");
+
+          button.setAttribute("aria-haspopup", "true");
+          button.setAttribute("aria-expanded", "false");
+
+          button.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (activeMenu === menuId) {
+              closeMenus();
+            } else {
+              openMenu(menuId);
             }
+          });
+        });
 
-            function closeMenus() {
-                Object.values(menuMap).forEach(panelId => {
-                    const panel = document.getElementById(panelId);
-                    if (panel) panel.classList.remove('active');
-                });
+        megaOverlay.addEventListener("click", closeMenus);
 
-                megaOverlay.classList.remove('active');
-                setButtonState(null);
-                activeMenu = null;
-            }
+        document.addEventListener("click", (e) => {
+          const clickedInsideNav = e.target.closest("#main-nav");
+          const clickedInsidePanel = e.target.closest(".mega-panel");
 
-            function openMenu(menuId) {
-                const targetPanel = document.getElementById(menuMap[menuId]);
-                if (!targetPanel) return;
+          if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
+            closeMenus();
+          }
+        });
 
-                Object.values(menuMap).forEach(panelId => {
-                    const panel = document.getElementById(panelId);
-                    if (panel) panel.classList.remove('active');
-                });
-
-                targetPanel.classList.add('active');
-                megaOverlay.classList.add('active');
-                setButtonState(menuId);
-                activeMenu = menuId;
-            }
-
-            menuItems.forEach(item => {
-                const menuId = item.getAttribute('data-menu');
-                const button = item.querySelector('.nav-menu-btn');
-
-                button.setAttribute('aria-haspopup', 'true');
-                button.setAttribute('aria-expanded', 'false');
-
-                button.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    if (activeMenu === menuId) {
-                        closeMenus();
-                    } else {
-                        openMenu(menuId);
-                    }
-                });
-            });
-
-            megaOverlay.addEventListener('click', closeMenus);
-
-            document.addEventListener('click', (e) => {
-                const clickedInsideNav = e.target.closest('#main-nav');
-                const clickedInsidePanel = e.target.closest('.mega-panel');
-
-                if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
-                    closeMenus();
-                }
-            });
-
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && activeMenu) {
-                    closeMenus();
-                }
-            });
-        })();
+        document.addEventListener("keydown", (e) => {
+          if (e.key === "Escape" && activeMenu) {
+            closeMenus();
+          }
+        });
+      })();
     </script>
 
-<script>
-    (function() {
-        const mobileBtn     = document.getElementById('mobile-menu-button');
-        const mobileMenu    = document.getElementById('mobile-menu');
-        const closeMobileBtn= document.getElementById('close-mobile-menu');
+    <script>
+      (function () {
+        const mobileBtn = document.getElementById("mobile-menu-button");
+        const mobileMenu = document.getElementById("mobile-menu");
+        const closeMobileBtn = document.getElementById("close-mobile-menu");
         if (mobileBtn && mobileMenu) {
-            mobileBtn.addEventListener('click', function() {
-                const isOpen = !mobileMenu.classList.contains('-translate-x-full');
-                mobileMenu.classList.toggle('-translate-x-full');
-                mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
-            });
+          mobileBtn.addEventListener("click", function () {
+            const isOpen = !mobileMenu.classList.contains("-translate-x-full");
+            mobileMenu.classList.toggle("-translate-x-full");
+            mobileBtn.setAttribute("aria-expanded", isOpen ? "false" : "true");
+          });
         }
         if (closeMobileBtn && mobileMenu) {
-            closeMobileBtn.addEventListener('click', function() {
-                mobileMenu.classList.add('-translate-x-full');
-                if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
-            });
+          closeMobileBtn.addEventListener("click", function () {
+            mobileMenu.classList.add("-translate-x-full");
+            if (mobileBtn) mobileBtn.setAttribute("aria-expanded", "false");
+          });
         }
-    })();
-</script>
+      })();
+    </script>
 
-<script src="../../assets/global/localization.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <script src="../../assets/global/localization.js"></script>
+  </body>
+</html>
diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index cbb4f6b..b3e8519 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -133,9 +133,8 @@
                             class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
                     </div>
                     <div class="pl-5 border-l border-white/20 flex items-center gap-3">
-                        <button id="lang-toggle-btn"
-                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
-                            onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')">
+                        <button
+                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
                             <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
                         </button>
                         <button
@@ -439,10 +438,9 @@
         role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
         <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
             <div class="flex items-center gap-4">
-                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
-                <button id="lang-toggle-mobile"
+                <span class="font-bold text-lg text-white font-sans">Menu Utama</span>
+                <button
                     class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
-                    onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')"
                     aria-label="Ganti bahasa">
                     <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
                 </button>
@@ -465,7 +463,7 @@
 
             <!-- Tentang Kami -->
             <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_about">Tentang
                     Kami</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
@@ -481,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"
@@ -501,7 +499,7 @@
 
             <!-- SDM -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_sdm">SDM</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="people-based-on-kk.html"
                         class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
@@ -519,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"
@@ -535,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"
@@ -552,7 +550,7 @@
 
             <!-- Kontak -->
             <div class="pt-2 border-t border-slate-200 pb-8">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     data-i18n="nav_contact">Kontak</span>
                 <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
                     <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
@@ -1328,7 +1326,7 @@
             }
         };
 
-        const translations = {
+        const rodaTranslations = {
             id: {
                 info: 'INFO TERBARU',
                 tickerItem1: 'Selamat datang di antarmuka situs web Informatika terbaru!',
@@ -1449,7 +1447,7 @@
             }
         };
 
-        let currentLang = 'id';
+
         let currentFilter = 'all';
         let currentQuery = '';
         let currentKbkInsight = 'ai';
@@ -1700,35 +1698,7 @@
         }
 
 
-        function updateLangButton() {
-            const desktopButton = document.getElementById('lang-toggle-btn');
-            if (desktopButton) {
-                desktopButton.innerHTML = currentLang === 'id'
-                    ? '<span class="font-bold text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-normal text-white">EN</span>'
-                    : '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
-            }
-
-            const mobileButton = document.getElementById('mobile-lang-toggle-btn');
-            if (mobileButton) {
-                mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
-            }
-        }
-
-        function applyTranslation(lang) {
-            document.querySelectorAll('[data-i18n]').forEach((element) => {
-                const key = element.getAttribute('data-i18n');
-                if (translations[lang][key]) {
-                    element.innerText = translations[lang][key];
-                }
-            });
-
-            document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
-                const key = element.getAttribute('data-i18n-placeholder');
-                if (translations[lang][key]) {
-                    element.setAttribute('placeholder', translations[lang][key]);
-                }
-            });
-        }
+        // Global localization.js handles translations and language toggle
 
         function matchesQuery(item, query) {
             const haystack = [item.title_id, item.title_en, item.authors, item.venue, item.year].join(' ').toLowerCase();
@@ -1968,19 +1938,17 @@
             revealElements.forEach((element) => observer.observe(element));
         }
 
-        window.setLanguage = function (lang) {
-            currentLang = lang;
-            updateLangButton();
-            applyTranslation(lang);
+        document.addEventListener('languageChanged', (e) => {
+            currentLang = e.detail.lang;
             renderKbkInsight();
             renderRisetCards();
             renderDosenCards();
 
             const lastUpdatedEl = document.getElementById("last-updated");
             if (lastUpdatedEl) {
-                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(lang === 'id' ? 'id-ID' : 'en-US');
+                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(currentLang === 'id' ? 'id-ID' : 'en-US');
             }
-        };
+        });
 
         window.addEventListener('error', (event) => {
             logAppError('window-error', event.error || new Error(event.message));
@@ -2050,7 +2018,16 @@
                 });
 
                 setupRevealAnimations();
-                setLanguage(currentLang);
+                if (typeof translations !== 'undefined') {
+                    Object.assign(translations.id, rodaTranslations.id);
+                    Object.assign(translations.en, rodaTranslations.en);
+                    if (typeof applyLang === 'function') applyLang();
+                } else {
+                    currentLang = 'id';
+                    renderKbkInsight();
+                    renderRisetCards();
+                    renderDosenCards();
+                }
                 openKbkInsight(currentKbkInsight, false);
                 filterRiset(currentFilter);
                 searchRiset('');
@@ -2227,6 +2204,8 @@
             if (section) observer.observe(section.closest('section'));
         })();
     </script>
+
+    <script src="../../assets/global/localization.js"></script>
 </body>
 
 </html>
diff --git a/groups/RODA/style.css b/groups/RODA/style.css
index 653b8d6..4a23817 100644
--- a/groups/RODA/style.css
+++ b/groups/RODA/style.css
@@ -1,4 +1,4 @@
-.bg-pattern {
+.bg-pattern {
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
@@ -173,6 +173,11 @@ html {
         display: flex !important;
     }
 
+    /* Hide hamburger button on desktop (aligns with ACAAB lg:1024px) */
+    #mobile-menu-button {
+        display: none !important;
+    }
+
     #kbk-card-grid {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }

From 986477ab58afa840aaf97a1a47069bf164f8c971 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:15:03 +0700
Subject: [PATCH 27/36] feat: penyesuaian hamburger menu dan penyempurnaan
 navigasi responsif

---
 groups/RODA/index.html | 136 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 276d378..12da859 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -430,6 +430,142 @@
         <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>
+                <button id="lang-toggle-mobile"
+                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
+                    onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')"
+                    aria-label="Ganti bahasa">
+                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
+                </button>
+                <button
+                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
+                    aria-label="Pengaturan aksesibilitas"
+                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                    <i class="fas fa-universal-access" aria-hidden="true"></i>
+                </button>
+            </div>
+            <button id="close-mobile-menu"
+                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
+                aria-label="Tutup menu navigasi">
+                <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+        </div>
+        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
+            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
+                data-i18n="nav_home">Beranda</a>
+
+            <!-- Tentang Kami -->
+            <div class="pt-2">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                    Kami</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_history">Sejarah & Tonggak</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_org">Struktur Organisasi</a>
+                    <a href="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>
+                </div>
+            </div>
+
+            <!-- Program -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_program">Program</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_academic">Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_accreditation">Akreditasi</a>
+                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_graduate">Profil Lulusan</a>
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_courses">Mata Kuliah</a>
+                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_guideline">Panduan Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_statistics">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>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="people-based-on-kk.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
+                        data-i18n="btn_all_lecturers">Semua Dosen</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_ai">Kecerdasan Buatan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_network">Jaringan & Keamanan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_is">Sistem Informasi</a>
+                </div>
+            </div>
+
+            <!-- Fasilitas -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_facilities">Fasilitas</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_lab">Laboratorium</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_dc">Data Center</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_eresources">E-Resources</a>
+                    <a href="ifuntanhub.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
+                </div>
+            </div>
+
+            <!-- Karya & Agenda -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
+                    Agenda</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_all_karya">Semua Karya</a>
+                    <a href="karya.html?filter=penelitian"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_research">Riset</a>
+                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_community">Pengabdian Masyarakat</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_achievements">Prestasi</a>
+                </div>
+            </div>
+
+            <!-- Kontak -->
+            <div class="pt-2 border-t border-slate-200 pb-8">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_contact">Kontak</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_official_contact">Kontak Resmi</a>
+                    <a href="mailto:info@informatika.untan.ac.id"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_feedback">Saran & Masukan</a>
+                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
+                        <i class="fab fa-instagram text-pink-500"></i> Instagram
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
     <div class="bg-white">
         <div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">

From b65a581ed461de77b5d08955388a61ddca7c774d Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:29:18 +0700
Subject: [PATCH 28/36] feat: menghapus breadcrumb dan menambahkan timestamp
 last updated di section publikasi & penelitian terkini

---
 groups/RODA/index.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 12da859..3880faa 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -565,15 +565,7 @@
             </div>
         </div>
     </div>
-
-    <!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
-    <div class="bg-white">
-        <div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">
-            <span data-i18n="home">BERANDA</span> <span class="mx-2">/</span> <span class="text-untan-blue font-bold"
-                data-i18n="pageTitle">RISET & KBK</span>
-        </div>
-    </div>
-
+    
     <!-- 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">
@@ -927,6 +919,12 @@
                                 </div>
                             </div>
                         </div>
+                        <p>This page was last updated on: <span id="last-updated"></span></p>
+                        <script>
+                            const modificationDate = document.lastModified; 
+                            document.getElementById("last-updated").innerHTML = new Date(modificationDate).toLocaleString();
+                        </script>
+
                         <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...

From 99de2a31678f2dd9eed746ac985c9f6f7ce89d5e Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:40:01 +0700
Subject: [PATCH 29/36] feat: menyesuaikan kembali untuk fitur bilingual

---
 groups/RODA/index.html | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 3880faa..c977233 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -919,11 +919,7 @@
                                 </div>
                             </div>
                         </div>
-                        <p>This page was last updated on: <span id="last-updated"></span></p>
-                        <script>
-                            const modificationDate = document.lastModified; 
-                            document.getElementById("last-updated").innerHTML = new Date(modificationDate).toLocaleString();
-                        </script>
+                        <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">
@@ -972,7 +968,7 @@
                     <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">5 laboratorium modern dengan 93 unit PC All-in-One
+                        <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>
@@ -1384,7 +1380,10 @@
                 ctaBtn: 'Hubungi Kami',
                 viewAll: 'Lihat Semua',
                 facultyDirectory: 'Direktori Dosen',
-                expertise: 'Keahlian'
+                expertise: 'Keahlian',
+                lastUpdatedText: 'Halaman ini terakhir diperbarui pada: ',
+                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.'
             },
             en: {
                 info: 'LATEST INFO',
@@ -1440,7 +1439,10 @@
                 ctaBtn: 'Contact Us',
                 viewAll: 'View All',
                 facultyDirectory: 'Faculty Directory',
-                expertise: 'Expertise'
+                expertise: 'Expertise',
+                lastUpdatedText: 'This page was last updated on: ',
+                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.'
             }
         };
 
@@ -1702,7 +1704,8 @@
                 // Update info jumlah data yang ditampilkan
                 const countInfo = document.getElementById('riset-count-info');
                 if (countInfo) {
-                    countInfo.innerText = `Menampilkan ${itemsToShow.length} dari ${filteredItems.length} publikasi`;
+                    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
@@ -1926,6 +1929,11 @@
             renderKbkInsight();
             renderRisetCards();
             renderDosenCards();
+
+            const lastUpdatedEl = document.getElementById("last-updated");
+            if (lastUpdatedEl) {
+                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(lang === 'id' ? 'id-ID' : 'en-US');
+            }
         };
 
         window.addEventListener('error', (event) => {

From b3a34dd60868989cdf29c5f2ba87fd2a1d3fc7a2 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Thu, 4 Jun 2026 17:55:01 +0700
Subject: [PATCH 30/36] fix: memperbarui tautan kartu dosen KBK ke direktori
 resmi

---
 groups/RODA/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index c977233..4444965 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1764,7 +1764,7 @@
                 const rank = currentLang === 'id' ? leader.badge_id : leader.badge_en;
 
                 return `
-                    <a href="dosen_kbk.html?kbk=${kbk}&lang=${currentLang}" 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">
+                    <a href="https://informatika.untan.ac.id/people-based-on-kk.html" 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>

From 68cd20864eff513e1be498f41f7e8febf1d684d1 Mon Sep 17 00:00:00 2001
From: GuavaPopper <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 22:42:29 +0700
Subject: [PATCH 31/36] fix: sinkronkan toggle bahasa mobile RODA

---
 groups/RODA/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 4444965..ba679c8 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -1662,7 +1662,7 @@
                     : '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
             }
 
-            const mobileButton = document.getElementById('mobile-lang-toggle-btn');
+            const mobileButton = document.getElementById('lang-toggle-mobile');
             if (mobileButton) {
                 mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
             }
@@ -2135,4 +2135,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

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

mengembalikan yang tidak sengaja terganti - RODA
---
 groups/ACAAB/index.html | 3215 +++++++++++++++------------------------
 1 file changed, 1268 insertions(+), 1947 deletions(-)

diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index ec40fee..a781215 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1,2017 +1,1338 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Group 06 &ndash; ACAAB | Informatika UNTAN</title>
-    <link rel="stylesheet" href="../../assets/global/output.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
-    <style>
-      /* ===== MOBILE NAV STABILITY FIX =====
+    <link rel="stylesheet" href="../../assets/global/output.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+        <style>
+        /* ===== MOBILE NAV STABILITY FIX =====
            Prevents logo bar from collapsing/shifting on Android when
            address bar hides/shows and triggers viewport reflow.
         ===================================== */
-      #nav-wrapper {
-        position: fixed !important;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 50;
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
-        will-change: box-shadow;
-      }
-
-      #nav-wrapper > div:first-child {
-        transform: translateZ(0);
-        -webkit-transform: translateZ(0);
-      }
-
-      @media (max-width: 1023px) {
-        #nav-wrapper > div:first-child {
-          min-height: 0 !important;
-          max-height: none;
-        }
-      }
-
-      #pengumuman-bar {
-        z-index: 40;
-      }
-
-      #pengumuman-bar.is-stuck {
-        position: fixed;
-        left: 0;
-        right: 0;
-        z-index: 40;
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        *,
-        *::before,
-        *::after {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          transition-duration: 0.01ms !important;
-        }
-      }
-
-      /* Skip Link Styling */
-      .skip-link {
-        position: absolute;
-        top: -40px;
-        left: 0;
-        background: #003150;
-        color: white;
-        padding: 8px 16px;
-        z-index: 100;
-        transition: top 0.3s;
-      }
-
-      .skip-link:focus {
-        top: 0;
-      }
-
-      /* Focus visible for better keyboard navigation */
-      :focus-visible {
-        outline: 3px solid #feb401;
-        outline-offset: 2px;
-      }
-
-      /* Mega Menu Styles */
-      .hero-pagination .swiper-pagination-bullet {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.4);
-        display: inline-block;
-        margin: 0 4px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-      }
-
-      .hero-pagination .swiper-pagination-bullet-active {
-        background: rgba(255, 255, 255, 1);
-        width: 24px;
-        border-radius: 4px;
-      }
-
-      .mega-panel {
-        opacity: 0;
-        visibility: hidden;
-        transition:
-          opacity 0.2s ease,
-          visibility 0.2s ease;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-      }
-
-      .mega-panel.active {
-        opacity: 1;
-        visibility: visible;
-      }
-
-      /* Overlay transition */
-      #mega-overlay {
-        opacity: 0;
-        visibility: hidden;
-        transition:
-          opacity 0.2s ease,
-          visibility 0.2s ease;
-      }
-
-      #mega-overlay.active {
-        opacity: 1;
-        visibility: visible;
-      }
-
-      .mega-link-card {
-        display: flex;
-        align-items: flex-start;
-        gap: 1rem;
-        padding: 1rem;
-        border-radius: 0.75rem;
-        border: 1px solid #e2e8f0;
-        background: white;
-        transition: all 0.2s ease;
-      }
-
-      .mega-link-card:hover {
-        border-color: #3b82f6;
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
-        transform: translateY(-2px);
-      }
-
-      .mega-link-icon {
-        width: 2.5rem;
-        height: 2.5rem;
-        border-radius: 0.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        transition: all 0.2s ease;
-      }
-
-      .nav-menu-btn.active {
-        background: rgba(255, 255, 255, 0.9);
-        color: #1e40af;
-      }
-
-      .nav-menu-btn:hover {
-        background: rgba(255, 255, 255, 0.8);
-      }
-
-      /* Mega menu positioning - no gap */
-      #main-nav {
-        position: relative;
-      }
-
-      #mega-menu-container {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-        pointer-events: none;
-      }
-
-      #mega-menu-container .mega-panel {
-        pointer-events: auto;
-      }
-
-      /* Keep pointer bridge under nav to prevent hover loss */
-      .nav-menu-item {
-        position: relative;
-      }
-
-      .nav-menu-item::after {
-        content: "";
-        position: absolute;
-        bottom: -12px;
-        left: 0;
-        right: 0;
-        height: 12px;
-      }
-
-      /* ===== Luco Chatbot Animations ===== */
-      @keyframes slideInRight {
-        from {
-          transform: translateX(100px);
-          opacity: 0;
+        #nav-wrapper {
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            will-change: box-shadow;
         }
 
-        to {
-          transform: translateX(0);
-          opacity: 1;
-        }
-      }
-
-      @keyframes fadeInUp {
-        from {
-          transform: translateY(10px);
-          opacity: 0;
+        #nav-wrapper>div:first-child {
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
         }
 
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
-      }
-
-      @keyframes lucoPulse {
-        0%,
-        100% {
-          transform: scale(1);
+        @media (max-width: 1023px) {
+            #nav-wrapper>div:first-child {
+                min-height: 0 !important;
+                max-height: none;
+            }
         }
 
-        50% {
-          transform: scale(1.05);
-        }
-      }
-
-      #luco-container {
-        animation: slideInRight 0.5s ease-out forwards;
-      }
-
-      #luco-bubble {
-        animation: fadeInUp 0.3s ease-out forwards;
-        width: min(18rem, calc(100vw - 2rem));
-      }
-
-      #luco-btn {
-        animation: lucoPulse 2s ease-in-out infinite;
-      }
-
-      #luco-btn:hover {
-        animation: none;
-      }
-
-      /* Typing indicator */
-      .typing-indicator span {
-        display: inline-block;
-        animation: bounce 1.4s infinite ease-in-out;
-      }
-
-      .typing-indicator span:nth-child(1) {
-        animation-delay: 0s;
-      }
-
-      .typing-indicator span:nth-child(2) {
-        animation-delay: 0.2s;
-      }
-
-      .typing-indicator span:nth-child(3) {
-        animation-delay: 0.4s;
-      }
-
-      @keyframes bounce {
-        0%,
-        80%,
-        100% {
-          transform: translateY(0);
+        #pengumuman-bar {
+            z-index: 40;
         }
 
-        40% {
-          transform: translateY(-6px);
+        #pengumuman-bar.is-stuck {
+            position: fixed;
+            left: 0;
+            right: 0;
+            z-index: 40;
         }
-      }
 
-      /* Luco speech bubble arrow */
-      #luco-bubble .bubble-arrow {
-        position: absolute;
-        right: 24px;
-        bottom: -6px;
-        width: 12px;
-        height: 12px;
-        background: white;
-        transform: rotate(45deg);
-        border-right: 1px solid #e2e8f0;
-        border-bottom: 1px solid #e2e8f0;
-      }
+        @media (prefers-reduced-motion: reduce) {
+
+            *,
+            *::before,
+            *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+
+        /* Skip Link Styling */
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: #003150;
+            color: white;
+            padding: 8px 16px;
+            z-index: 100;
+            transition: top 0.3s;
+        }
+
+        .skip-link:focus {
+            top: 0;
+        }
+
+        /* Focus visible for better keyboard navigation */
+        :focus-visible {
+            outline: 3px solid #feb401;
+            outline-offset: 2px;
+        }
+
+        /* Mega Menu Styles */
+        .hero-pagination .swiper-pagination-bullet {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.4);
+            display: inline-block;
+            margin: 0 4px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .hero-pagination .swiper-pagination-bullet-active {
+            background: rgba(255, 255, 255, 1);
+            width: 24px;
+            border-radius: 4px;
+        }
+
+        .mega-panel {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+        }
+
+        .mega-panel.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        /* Overlay transition */
+        #mega-overlay {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+        }
+
+        #mega-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .mega-link-card {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+            padding: 1rem;
+            border-radius: 0.75rem;
+            border: 1px solid #e2e8f0;
+            background: white;
+            transition: all 0.2s ease;
+        }
+
+        .mega-link-card:hover {
+            border-color: #3b82f6;
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+            transform: translateY(-2px);
+        }
+
+        .mega-link-icon {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.2s ease;
+        }
+
+        .nav-menu-btn.active {
+            background: rgba(255, 255, 255, 0.9);
+            color: #1e40af;
+        }
+
+        .nav-menu-btn:hover {
+            background: rgba(255, 255, 255, 0.8);
+        }
+
+        /* Mega menu positioning - no gap */
+        #main-nav {
+            position: relative;
+        }
+
+        #mega-menu-container {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            pointer-events: none;
+        }
+
+        #mega-menu-container .mega-panel {
+            pointer-events: auto;
+        }
+
+        /* Keep pointer bridge under nav to prevent hover loss */
+        .nav-menu-item {
+            position: relative;
+        }
+
+        .nav-menu-item::after {
+            content: '';
+            position: absolute;
+            bottom: -12px;
+            left: 0;
+            right: 0;
+            height: 12px;
+        }
+
+        /* ===== Luco Chatbot Animations ===== */
+        @keyframes slideInRight {
+            from {
+                transform: translateX(100px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeInUp {
+            from {
+                transform: translateY(10px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes lucoPulse {
+
+            0%,
+            100% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.05);
+            }
+        }
+
+        #luco-container {
+            animation: slideInRight 0.5s ease-out forwards;
+        }
+
+        #luco-bubble {
+            animation: fadeInUp 0.3s ease-out forwards;
+            width: min(18rem, calc(100vw - 2rem));
+        }
+
+        #luco-btn {
+            animation: lucoPulse 2s ease-in-out infinite;
+        }
+
+        #luco-btn:hover {
+            animation: none;
+        }
+
+        /* Typing indicator */
+        .typing-indicator span {
+            display: inline-block;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+
+        .typing-indicator span:nth-child(1) {
+            animation-delay: 0s;
+        }
+
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes bounce {
+
+            0%,
+            80%,
+            100% {
+                transform: translateY(0);
+            }
+
+            40% {
+                transform: translateY(-6px);
+            }
+        }
+
+        /* Luco speech bubble arrow */
+        #luco-bubble .bubble-arrow {
+            position: absolute;
+            right: 24px;
+            bottom: -6px;
+            width: 12px;
+            height: 12px;
+            background: white;
+            transform: rotate(45deg);
+            border-right: 1px solid #e2e8f0;
+            border-bottom: 1px solid #e2e8f0;
+        }
     </style>
-  </head>
-  <body
-    class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black"
-  >
-    <a href="#main-content" class="skip-link" data-i18n="skip_to_content"
-      >Langsung ke Konten Utama</a
-    >
+</head>
+<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
 
-    <div
-      id="nav-wrapper"
-      class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto"
-    >
-      <div
-        class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden"
-        style="min-height: 0"
-      >
-        <div
-          class="absolute inset-0 w-full overflow-hidden pointer-events-none"
-          aria-hidden="true"
-        >
-          <div
-            class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
-            style="overflow: hidden; max-height: 100%"
-          >
-            01101001 01101110 01100110 01101111 01110010 01101101 01100001
-            01110100 01101001 01101011 01100001 00100000 01110101 01101110
-            01110100 01100001 01101110 00100000 01100010 01101001 01110011
-            01100001 01101001 01101110 01100110 01101111 01110010 01101101
-            01100001 01110100 01101001 01101011 01100001 00100000 01110101
-            01101110 01110100 01100001 01101110 00100000 01100010 01101001
-            01110011 01100001 01010101 01001110 01010100 01000001 01001110
-            00100000 00110010 00110000 00110010 00110101 00100000 01100110
-            01110101 01110100 01110101 01110010 01100101 00100000 01110010
-            01100101 01100001 01100100 01111001 01101001 01101110 01100110
-            01101111 01110010 01101101 01100001 01110100 01101001 01101011
-            01100001 00100000 01110101 01101110
-          </div>
-          <div
-            class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"
-          ></div>
+    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
+
+    <div id="nav-wrapper"
+        class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
+        <div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
+            <div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
+                <div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
+                    style="overflow:hidden;max-height:100%;">
+                    01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
+                    01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
+                    01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
+                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
+                    01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
+                    01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
+                    00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
+                    01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
+                    01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
+                </div>
+                <div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
+            </div>
+
+            <div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
+                <a href="../../index.html" class="flex items-center gap-4 group">
+                    <div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
+                        <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+                            alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
+                            class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
+                    </div>
+                    <div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
+                        <span
+                            class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
+                        <span
+                            class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
+                            TANJUNGPURA</span>
+                    </div>
+                </a>
+
+                <div class="hidden lg:flex items-center gap-5">
+                    <div class="flex items-center gap-3 text-sm">
+                        <a href="https://satu.untan.ac.id" target="_blank"
+                            class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
+                    </div>
+                    <div class="pl-5 border-l border-white/20 flex items-center gap-3">
+                        <button
+                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
+                            <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
+                        </button>
+                        <button
+                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+                            aria-label="Pengaturan aksesibilitas"
+                            onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                            <i class="fas fa-universal-access" aria-hidden="true"></i>
+                        </button>
+                        <button
+                            class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+                            aria-label="Cari konten">
+                            <i class="fas fa-search" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <button id="mobile-menu-button"
+                    class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
+                    aria-label="Buka menu navigasi" aria-expanded="false" aria-controls="mobile-menu">
+                    <i class="fas fa-bars" aria-hidden="true"></i>
+                </button>
+            </div>
         </div>
 
-        <div
-          class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10"
-        >
-          <a href="../../index.html" class="flex items-center gap-4 group">
-            <div
-              class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0"
-            >
-              <img
-                src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
-                alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
-                class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10"
-              />
-            </div>
-            <div
-              class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center"
-            >
-              <span
-                class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase"
-                >INFORMATIKA</span
-              >
-              <span
-                class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans"
-                >UNIVERSITAS TANJUNGPURA</span
-              >
-            </div>
-          </a>
+        <nav class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative" id="main-nav"
+            aria-label="Menu navigasi utama">
+            <div class="container mx-auto px-6">
+                <div class="flex items-center justify-center w-full gap-1 py-2" role="menubar">
 
-          <div class="hidden lg:flex items-center gap-5">
-            <div class="flex items-center gap-3 text-sm">
-              <a
-                href="https://satu.untan.ac.id"
-                target="_blank"
-                class="hover:text-untan-yellow transition-colors font-medium"
-                >SATU UNTAN</a
-              >
-            </div>
-            <div class="pl-5 border-l border-white/20 flex items-center gap-3">
-              <button
-                class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
-              >
-                <span class="font-bold">ID</span>
-                <span class="text-white/40">|</span> EN
-              </button>
-              <button
-                class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
-                aria-label="Pengaturan aksesibilitas"
-                onclick="
-                  const p = document.getElementById('access-panel');
-                  if (p) {
-                    p.classList.toggle('hidden');
-                    p.classList.toggle('flex');
-                  }
-                "
-              >
-                <i class="fas fa-universal-access" aria-hidden="true"></i>
-              </button>
-              <button
-                class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
-                aria-label="Cari konten"
-              >
-                <i class="fas fa-search" aria-hidden="true"></i>
-              </button>
-            </div>
-          </div>
+                    <!-- Menu: Tentang Kami -->
+                    <div class="nav-menu-item relative" data-menu="tentang">
+                        <button
+                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
+                            <span data-i18n="nav_about">Tentang Kami</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
+                        </button>
+                    </div>
 
-          <button
-            id="mobile-menu-button"
-            class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
-            aria-label="Buka menu navigasi"
-            aria-expanded="false"
-            aria-controls="mobile-menu"
-          >
-            <i class="fas fa-bars" aria-hidden="true"></i>
-          </button>
-        </div>
-      </div>
+                    <!-- Menu: Program -->
+                    <div class="nav-menu-item relative" data-menu="program">
+                        <button
+                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
+                            <span data-i18n="nav_program">Program</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
+                        </button>
+                    </div>
 
-      <nav
-        class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative"
-        id="main-nav"
-        aria-label="Menu navigasi utama"
-      >
-        <div class="container mx-auto px-6">
-          <div
-            class="flex items-center justify-center w-full gap-1 py-2"
-            role="menubar"
-          >
-            <!-- Menu: Tentang Kami -->
-            <div class="nav-menu-item relative" data-menu="tentang">
-              <button
-                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
-              >
-                <span data-i18n="nav_about">Tentang Kami</span>
-                <i
-                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
-                ></i>
-              </button>
-            </div>
+                    <!-- Menu: SDM -->
+                    <div class="nav-menu-item relative" data-menu="sdm">
+                        <button
+                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
+                            <span data-i18n="nav_sdm">SDM</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
+                        </button>
+                    </div>
 
-            <!-- Menu: Program -->
-            <div class="nav-menu-item relative" data-menu="program">
-              <button
-                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
-              >
-                <span data-i18n="nav_program">Program</span>
-                <i
-                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
-                ></i>
-              </button>
-            </div>
+                    <!-- Menu: Fasilitas -->
+                    <div class="nav-menu-item relative" data-menu="fasilitas">
+                        <button
+                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
+                            <span data-i18n="nav_facilities">Fasilitas</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
+                        </button>
+                    </div>
 
-            <!-- Menu: SDM -->
-            <div class="nav-menu-item relative" data-menu="sdm">
-              <button
-                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
-              >
-                <span data-i18n="nav_sdm">SDM</span>
-                <i
-                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
-                ></i>
-              </button>
-            </div>
+                    <!-- Menu: Karya & Agenda -->
+                    <div class="nav-menu-item relative" data-menu="karya">
+                        <button
+                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
+                            <span data-i18n="nav_works">Karya & Agenda</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
+                        </button>
+                    </div>
 
-            <!-- Menu: Fasilitas -->
-            <div class="nav-menu-item relative" data-menu="fasilitas">
-              <button
-                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
-              >
-                <span data-i18n="nav_facilities">Fasilitas</span>
-                <i
-                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
-                ></i>
-              </button>
-            </div>
+                    <!-- Menu: Kontak -->
+                    <div class="nav-menu-item relative" data-menu="kontak">
+                        <button
+                            class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
+                            <span data-i18n="nav_contact">Kontak</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
+                        </button>
+                    </div>
 
-            <!-- Menu: Karya & Agenda -->
-            <div class="nav-menu-item relative" data-menu="karya">
-              <button
-                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
-              >
-                <span data-i18n="nav_works">Karya & Agenda</span>
-                <i
-                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
-                ></i>
-              </button>
-            </div>
-
-            <!-- Menu: Kontak -->
-            <div class="nav-menu-item relative" data-menu="kontak">
-              <button
-                class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
-              >
-                <span data-i18n="nav_contact">Kontak</span>
-                <i
-                  class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
-                ></i>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
-        <div
-          id="mega-menu-container"
-          class="absolute left-0 right-0 top-full z-50"
-        >
-          <!-- Mega Menu: Tentang Kami -->
-          <div
-            id="mega-tentang"
-            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
-          >
-            <div class="container mx-auto px-6 py-8">
-              <div class="grid grid-cols-12 gap-8">
-                <!-- Left: Featured -->
-                <div
-                  class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden"
-                >
-                  <div
-                    class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16"
-                  ></div>
-                  <div
-                    class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12"
-                  ></div>
-                  <div class="relative z-10">
-                    <span
-                      class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
-                      data-i18n="mega_about_title"
-                      >Tentang Kami</span
-                    >
-                    <h3 class="text-2xl font-bold mb-3">
-                      Mengenal Informatika UNTAN
-                    </h3>
-                    <p
-                      class="text-slate-300 text-sm mb-6 leading-relaxed"
-                      data-i18n="mega_about_desc"
-                    >
-                      Terakreditasi Unggul, mencetak lulusan kompeten di bidang
-                      teknologi informasi sejak 1993.
-                    </p>
-                    <a
-                      href="content.html?type=berita"
-                      class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
-                    >
-                      Selengkapnya <i class="fas fa-arrow-right"></i>
-                    </a>
-                  </div>
                 </div>
-                <!-- Right: Links -->
-                <div class="col-span-8 grid grid-cols-2 gap-6">
-                  <a
-                    href="content.html?type=berita"
-                    class="mega-link-card group"
-                  >
-                    <div
-                      class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-landmark"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                        data-i18n="link_history"
-                      >
-                        Sejarah & Tonggak
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_history_desc"
-                      >
-                        Perjalanan panjang membangun generasi digital
-                      </p>
-                    </div>
-                  </a>
-                  <a
-                    href="content.html?type=berita"
-                    class="mega-link-card group"
-                  >
-                    <div
-                      class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-users"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                        data-i18n="link_org"
-                      >
-                        Struktur Organisasi
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_org_desc"
-                      >
-                        Pimpinan dan jajaran pengelola
-                      </p>
-                    </div>
-                  </a>
-                  <a href="profil.html" class="mega-link-card group">
-                    <div
-                      class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-bullseye"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                        data-i18n="link_vision"
-                      >
-                        Visi & Misi
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_vision_desc"
-                      >
-                        Arah dan tujuan pengembangan prodi
-                      </p>
-                    </div>
-                  </a>
-                  <a
-                    href="content.html?type=berita"
-                    class="mega-link-card group"
-                  >
-                    <div
-                      class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-handshake"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
-                        data-i18n="link_partnership"
-                      >
-                        Kerjasama & MoU
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_partnership_desc"
-                      >
-                        Mitra industri dan akademik
-                      </p>
-                    </div>
-                  </a>
-                </div>
-              </div>
             </div>
-          </div>
 
-          <!-- Mega Menu: Program -->
-          <div
-            id="mega-program"
-            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
-          >
-            <div class="container mx-auto px-6 py-8">
-              <div class="grid grid-cols-12 gap-8">
-                <!-- Left: Featured -->
-                <div
-                  class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden"
-                >
-                  <div
-                    class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"
-                  ></div>
-                  <div class="relative z-10">
-                    <span
-                      class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
-                      >Program Akademik</span
-                    >
-                    <h3
-                      class="text-2xl font-bold mb-3"
-                      data-i18n="mega_program_obe"
-                    >
-                      Kurikulum Berbasis OBE
-                    </h3>
-                    <p class="text-blue-100 text-sm mb-6 leading-relaxed">
-                      Outcome-Based Education dengan 4 jalur konsentrasi: AI,
-                      Software Engineering, Network, dan Information Systems.
-                    </p>
-                    <a
-                      href="subject-and-courses.html"
-                      class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
-                      data-i18n="btn_krs_sim"
-                    >
-                      <i class="fas fa-play-circle"></i> Simulasi KRS
-                    </a>
-                  </div>
+            <!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
+            <div id="mega-menu-container" class="absolute left-0 right-0 top-full z-50">
+
+                <!-- Mega Menu: Tentang Kami -->
+                <div id="mega-tentang" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                    <div class="container mx-auto px-6 py-8">
+                        <div class="grid grid-cols-12 gap-8">
+                            <!-- Left: Featured -->
+                            <div
+                                class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden">
+                                <div
+                                    class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16">
+                                </div>
+                                <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12">
+                                </div>
+                                <div class="relative z-10">
+                                    <span
+                                        class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
+                                        data-i18n="mega_about_title">Tentang Kami</span>
+                                    <h3 class="text-2xl font-bold mb-3">Mengenal Informatika UNTAN</h3>
+                                    <p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">
+                                        Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi
+                                        sejak 1993.</p>
+                                    <a href="content.html?type=berita"
+                                        class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">
+                                        Selengkapnya <i class="fas fa-arrow-right"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <!-- Right: Links -->
+                            <div class="col-span-8 grid grid-cols-2 gap-6">
+                                <a href="content.html?type=berita" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
+                                        <i class="fas fa-landmark"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                                            data-i18n="link_history">Sejarah & Tonggak</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_history_desc">Perjalanan
+                                            panjang membangun generasi digital</p>
+                                    </div>
+                                </a>
+                                <a href="content.html?type=berita" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
+                                        <i class="fas fa-users"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                                            data-i18n="link_org">Struktur Organisasi</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_org_desc">Pimpinan dan
+                                            jajaran pengelola</p>
+                                    </div>
+                                </a>
+                                <a href="profil.html" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white">
+                                        <i class="fas fa-bullseye"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                                            data-i18n="link_vision">Visi & Misi</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_vision_desc">Arah dan
+                                            tujuan pengembangan prodi</p>
+                                    </div>
+                                </a>
+                                <a href="content.html?type=berita" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white">
+                                        <i class="fas fa-handshake"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
+                                            data-i18n="link_partnership">Kerjasama & MoU</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_partnership_desc">Mitra
+                                            industri dan akademik</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <!-- Right: Links Grid -->
-                <div class="col-span-8">
-                  <div class="grid grid-cols-3 gap-4">
-                    <a
-                      href="subject-and-courses.html"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-graduation-cap"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_academic"
-                        >
-                          Akademik
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_academic_desc"
-                        >
-                          Jadwal, KRS, dan kalender
-                        </p>
-                      </div>
-                    </a>
-                    <a
-                      href="content.html?type=berita"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-award"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_accreditation"
-                        >
-                          Akreditasi
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_accred_desc"
-                        >
-                          Status Unggul BAN-PT
-                        </p>
-                      </div>
-                    </a>
-                    <a
-                      href="graduate-profile.html"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-user-graduate"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_graduate"
-                        >
-                          Profil Lulusan
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_graduate_desc"
-                        >
-                          Kompetensi & karir
-                        </p>
-                      </div>
-                    </a>
-                    <a
-                      href="subject-and-courses.html"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-book-open"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_courses"
-                        >
-                          Mata Kuliah
-                        </h4>
-                        <p class="text-xs text-slate-500 mt-1">
-                          144 SKS kurikulum
-                        </p>
-                      </div>
-                    </a>
-                    <a
-                      href="academic-guidelines.html"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-file-alt"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_guideline"
-                        >
-                          Panduan
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_guideline_desc"
-                        >
-                          Buku panduan akademik
-                        </p>
-                      </div>
-                    </a>
-                    <a
-                      href="content.html?type=berita"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-chart-bar"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_statistics"
-                        >
-                          Informatika Angka
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_statistics_desc"
-                        >
-                          Statistik & data
-                        </p>
-                      </div>
-                    </a>
-                  </div>
+
+                <!-- Mega Menu: Program -->
+                <div id="mega-program" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                    <div class="container mx-auto px-6 py-8">
+                        <div class="grid grid-cols-12 gap-8">
+                            <!-- Left: Featured -->
+                            <div
+                                class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden">
+                                <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20">
+                                </div>
+                                <div class="relative z-10">
+                                    <span
+                                        class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4">Program
+                                        Akademik</span>
+                                    <h3 class="text-2xl font-bold mb-3" data-i18n="mega_program_obe">Kurikulum Berbasis
+                                        OBE</h3>
+                                    <p class="text-blue-100 text-sm mb-6 leading-relaxed">Outcome-Based Education dengan
+                                        4 jalur konsentrasi: AI, Software Engineering, Network, dan Information Systems.
+                                    </p>
+                                    <a href="subject-and-courses.html"
+                                        class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
+                                        data-i18n="btn_krs_sim">
+                                        <i class="fas fa-play-circle"></i> Simulasi KRS
+                                    </a>
+                                </div>
+                            </div>
+                            <!-- Right: Links Grid -->
+                            <div class="col-span-8">
+                                <div class="grid grid-cols-3 gap-4">
+                                    <a href="subject-and-courses.html" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
+                                            <i class="fas fa-graduation-cap"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_academic">Akademik</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">
+                                                Jadwal, KRS, dan kalender</p>
+                                        </div>
+                                    </a>
+                                    <a href="content.html?type=berita" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white">
+                                            <i class="fas fa-award"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_accreditation">Akreditasi</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_accred_desc">Status
+                                                Unggul BAN-PT</p>
+                                        </div>
+                                    </a>
+                                    <a href="graduate-profile.html" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
+                                            <i class="fas fa-user-graduate"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_graduate">Profil Lulusan</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_graduate_desc">
+                                                Kompetensi & karir</p>
+                                        </div>
+                                    </a>
+                                    <a href="subject-and-courses.html" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white">
+                                            <i class="fas fa-book-open"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_courses">Mata Kuliah</h4>
+                                            <p class="text-xs text-slate-500 mt-1">144 SKS kurikulum</p>
+                                        </div>
+                                    </a>
+                                    <a href="academic-guidelines.html" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white">
+                                            <i class="fas fa-file-alt"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_guideline">Panduan</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_guideline_desc">Buku
+                                                panduan akademik</p>
+                                        </div>
+                                    </a>
+                                    <a href="content.html?type=berita" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white">
+                                            <i class="fas fa-chart-bar"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_statistics">Informatika Angka</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_statistics_desc">
+                                                Statistik & data</p>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
+
+                <!-- Mega Menu: SDM -->
+                <div id="mega-sdm" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                    <div class="container mx-auto px-6 py-8">
+                        <div class="grid grid-cols-12 gap-8">
+                            <!-- Left: Featured Dosen -->
+                            <div
+                                class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden">
+                                <div class="absolute inset-0 opacity-10">
+                                    <div class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full">
+                                    </div>
+                                    <div class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full">
+                                    </div>
+                                </div>
+                                <div class="relative z-10">
+                                    <span
+                                        class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
+                                        data-i18n="mega_sdm_title">Sumber Daya Manusia</span>
+                                    <h3 class="text-2xl font-bold mb-3" data-i18n="mega_sdm_desc">Tim Pengajar
+                                        Profesional</h3>
+                                    <p class="text-slate-300 text-sm mb-4 leading-relaxed">30+ dosen berkualifikasi
+                                        S2/S3 dari universitas terkemuka dalam dan luar negeri.</p>
+                                    <div class="flex gap-4 mb-6">
+                                        <div class="text-center">
+                                            <div class="text-2xl font-bold text-untan-yellow">15+</div>
+                                            <div class="text-[10px] text-slate-400 uppercase">Doktor</div>
+                                        </div>
+                                        <div class="text-center">
+                                            <div class="text-2xl font-bold text-untan-yellow">20+</div>
+                                            <div class="text-[10px] text-slate-400 uppercase">Magister</div>
+                                        </div>
+                                        <div class="text-center">
+                                            <div class="text-2xl font-bold text-untan-yellow">5</div>
+                                            <div class="text-[10px] text-slate-400 uppercase">Guru Besar</div>
+                                        </div>
+                                    </div>
+                                    <a href="people-based-on-kk.html"
+                                        class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
+                                        data-i18n="btn_all_lecturers">
+                                        Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <!-- Right: KK Groups -->
+                            <div class="col-span-7">
+                                <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
+                                    data-i18n="label_expertise">Kelompok Keahlian</h4>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <a href="people-based-on-kk.html"
+                                        class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all">
+                                        <div class="flex items-start gap-4">
+                                            <div
+                                                class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
+                                                <i class="fas fa-brain"></i>
+                                            </div>
+                                            <div>
+                                                <h5 class="font-bold text-slate-800 mb-1">KK Kecerdasan Buatan</h5>
+                                                <p class="text-xs text-slate-500">Machine Learning, Computer Vision, NLP
+                                                </p>
+                                                <span class="inline-block mt-2 text-xs text-purple-600 font-semibold">8
+                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                    <a href="people-based-on-kk.html"
+                                        class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all">
+                                        <div class="flex items-start gap-4">
+                                            <div
+                                                class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
+                                                <i class="fas fa-code"></i>
+                                            </div>
+                                            <div>
+                                                <h5 class="font-bold text-slate-800 mb-1">KK Rekayasa Perangkat Lunak
+                                                </h5>
+                                                <p class="text-xs text-slate-500">Software Engineering, DevOps, Testing
+                                                </p>
+                                                <span class="inline-block mt-2 text-xs text-blue-600 font-semibold">10
+                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                    <a href="people-based-on-kk.html"
+                                        class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all">
+                                        <div class="flex items-start gap-4">
+                                            <div
+                                                class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
+                                                <i class="fas fa-network-wired"></i>
+                                            </div>
+                                            <div>
+                                                <h5 class="font-bold text-slate-800 mb-1">KK Jaringan & Keamanan</h5>
+                                                <p class="text-xs text-slate-500">Network, Cybersecurity, Cloud</p>
+                                                <span class="inline-block mt-2 text-xs text-emerald-600 font-semibold">7
+                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                    <a href="people-based-on-kk.html"
+                                        class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all">
+                                        <div class="flex items-start gap-4">
+                                            <div
+                                                class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
+                                                <i class="fas fa-database"></i>
+                                            </div>
+                                            <div>
+                                                <h5 class="font-bold text-slate-800 mb-1">KK Sistem Informasi</h5>
+                                                <p class="text-xs text-slate-500">Data Science, GIS, Business Intel</p>
+                                                <span class="inline-block mt-2 text-xs text-orange-600 font-semibold">6
+                                                    Dosen <i class="fas fa-chevron-right ml-1"></i></span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Mega Menu: Fasilitas -->
+                <div id="mega-fasilitas" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                    <div class="container mx-auto px-6 py-8">
+                        <div class="grid grid-cols-4 gap-6">
+                            <a href="content.html?type=rubrik"
+                                class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
+                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
+                                </div>
+                                <i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
+                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">Laboratorium</h4>
+                                <p class="text-sm text-cyan-100 mb-4" data-i18n="mega_lab_desc">8 lab modern dengan
+                                    peralatan terkini</p>
+                                <span
+                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
+                                    data-i18n="btn_explore">
+                                    Jelajahi <i class="fas fa-arrow-right"></i>
+                                </span>
+                            </a>
+                            <a href="content.html?type=rubrik"
+                                class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
+                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
+                                </div>
+                                <i class="fas fa-server text-4xl mb-4 opacity-80"></i>
+                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">Data Center</h4>
+                                <p class="text-sm text-violet-100 mb-4" data-i18n="mega_dc_desc">Server & infrastruktur
+                                    cloud lokal</p>
+                                <span
+                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
+                                    data-i18n="btn_explore">
+                                    Jelajahi <i class="fas fa-arrow-right"></i>
+                                </span>
+                            </a>
+                            <a href="content.html?type=rubrik"
+                                class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
+                                <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
+                                </div>
+                                <i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
+                                <h4 class="text-lg font-bold mb-2" data-i18n="mega_eresources">E-Resources</h4>
+                                <p class="text-sm text-emerald-100 mb-4" data-i18n="mega_eresources_desc">Akses jurnal &
+                                    database ilmiah</p>
+                                <span
+                                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
+                                    data-i18n="btn_explore">
+                                    Jelajahi <i class="fas fa-arrow-right"></i>
+                                </span>
+                            </a>
+                            <a href="ifuntanhub.html"
+                                class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
+                                <div
+                                    class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12">
+                                </div>
+                                <i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
+                                <h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
+                                <p class="text-sm text-slate-300 mb-4" data-i18n="mega_hub_desc">Platform PaaS untuk
+                                    mahasiswa</p>
+                                <span
+                                    class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all">
+                                    Launch <i class="fas fa-external-link-alt"></i>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Mega Menu: Karya & Agenda -->
+                <div id="mega-karya" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                    <div class="container mx-auto px-6 py-8">
+                        <div class="grid grid-cols-12 gap-8">
+                            <!-- Left: Research Highlight -->
+                            <div class="col-span-5">
+                                <div
+                                    class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4">
+                                    <span
+                                        class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
+                                        data-i18n="mega_research_title">Riset Unggulan</span>
+                                    <h3 class="text-xl font-bold mb-2" data-i18n="mega_sinta_title">Indeks SINTA Terbaik
+                                    </h3>
+                                    <p class="text-amber-100 text-sm mb-4" data-i18n="mega_sinta_desc">Publikasi dosen
+                                        terindeks Scopus, WoS, dan jurnal nasional terakreditasi.</p>
+                                    <a href="content.html?type=berita"
+                                        class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
+                                        data-i18n="btn_publications">
+                                        Lihat Publikasi
+                                    </a>
+                                </div>
+                                <a href="content.html?type=berita"
+                                    class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all">
+                                    <div class="flex items-center gap-3">
+                                        <div
+                                            class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600">
+                                            <i class="fas fa-calendar-alt"></i>
+                                        </div>
+                                        <div>
+                                            <h5 class="font-bold text-slate-800 text-sm" data-i18n="link_info_agenda">
+                                                Info & Agenda</h5>
+                                            <p class="text-xs text-slate-500" data-i18n="link_info_agenda_desc">
+                                                Pengumuman dan jadwal kegiatan</p>
+                                        </div>
+                                        <i class="fas fa-chevron-right text-slate-400 ml-auto"></i>
+                                    </div>
+                                </a>
+                            </div>
+                            <!-- Right: Grid -->
+                            <div class="col-span-7 grid grid-cols-2 gap-4">
+                                <a href="karya.html" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
+                                        <i class="fas fa-layer-group"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue">Semua Karya
+                                        </h4>
+                                        <p class="text-xs text-slate-500 mt-1">Lihat seluruh karya dalam satu halaman
+                                        </p>
+                                    </div>
+                                </a>
+                                <a href="karya.html?filter=penelitian" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
+                                        <i class="fas fa-microscope"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                            data-i18n="link_research">Riset</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_research_desc">Penelitian
+                                            dosen dan mahasiswa</p>
+                                    </div>
+                                </a>
+                                <a href="karya.html?filter=pkm" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
+                                        <i class="fas fa-hands-helping"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                            data-i18n="link_community">Pengabdian</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_community_desc">Program
+                                            pengabdian masyarakat</p>
+                                    </div>
+                                </a>
+                                <a href="content.html?type=rubrik" class="mega-link-card group">
+                                    <div
+                                        class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
+                                        <i class="fas fa-trophy"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                            data-i18n="link_achievements">Prestasi</h4>
+                                        <p class="text-xs text-slate-500 mt-1" data-i18n="link_achievements_desc">
+                                            Pencapaian dosen & mahasiswa</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Mega Menu: Kontak -->
+                <div id="mega-kontak" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
+                    <div class="container mx-auto px-6 py-8">
+                        <div class="grid grid-cols-12 gap-8">
+                            <!-- Left: Contact Info -->
+                            <div class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white">
+                                <h3 class="text-xl font-bold mb-4" data-i18n="mega_contact_title">Hubungi Kami</h3>
+                                <div class="space-y-4">
+                                    <div class="flex items-start gap-3">
+                                        <div
+                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                                            <i class="fas fa-map-marker-alt text-untan-yellow"></i>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm text-slate-300">Jl. Prof. Dr. H. Hadari Nawawi, Bansir
+                                                Laut, Pontianak Tenggara</p>
+                                            <p class="text-xs text-slate-400 mt-1">Kalimantan Barat 78124</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-3">
+                                        <div
+                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                                            <i class="fab fa-whatsapp text-untan-yellow"></i>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm text-white font-medium">+62 851-7165-5161</p>
+                                            <p class="text-xs text-slate-400">Senin - Jumat, 08:00 - 16:00</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-3">
+                                        <div
+                                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                                            <i class="fas fa-envelope text-untan-yellow"></i>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm text-white font-medium">info@informatika.untan.ac.id</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Right: Quick Links & Social -->
+                            <div class="col-span-7">
+                                <div class="grid grid-cols-2 gap-4 mb-6">
+                                    <a href="content.html?type=berita" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
+                                            <i class="fas fa-id-card"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_official_contact">Kontak Resmi</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_contact_desc">
+                                                Direktori kontak staf</p>
+                                        </div>
+                                    </a>
+                                    <a href="mailto:info@informatika.untan.ac.id" class="mega-link-card group">
+                                        <div
+                                            class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
+                                            <i class="fas fa-comment-dots"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
+                                                data-i18n="link_feedback">Saran & Masukan</h4>
+                                            <p class="text-xs text-slate-500 mt-1" data-i18n="link_feedback_desc">Kirim
+                                                feedback Anda</p>
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="bg-slate-50 rounded-xl p-5">
+                                    <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
+                                        data-i18n="follow_us">Ikuti Kami</h4>
+                                    <div class="flex gap-3">
+                                        <a href="https://instagram.com/informatika.untan" target="_blank"
+                                            class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
+                                            <i class="fab fa-instagram text-xl"></i>
+                                        </a>
+                                        <a href="#"
+                                            class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
+                                            <i class="fab fa-youtube text-xl"></i>
+                                        </a>
+                                        <a href="#"
+                                            class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
+                                            <i class="fab fa-facebook-f text-xl"></i>
+                                        </a>
+                                        <a href="#"
+                                            class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
+                                            <i class="fab fa-twitter text-xl"></i>
+                                        </a>
+                                        <a href="#"
+                                            class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
+                                            <i class="fab fa-linkedin-in text-xl"></i>
+                                        </a>
+                                        <a href="#"
+                                            class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
+                                            <i class="fab fa-tiktok text-xl"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
             </div>
-          </div>
+            <!-- End mega-menu-container -->
+        </nav>
 
-          <!-- Mega Menu: SDM -->
-          <div
-            id="mega-sdm"
-            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
-          >
-            <div class="container mx-auto px-6 py-8">
-              <div class="grid grid-cols-12 gap-8">
-                <!-- Left: Featured Dosen -->
-                <div
-                  class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden"
-                >
-                  <div class="absolute inset-0 opacity-10">
-                    <div
-                      class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full"
-                    ></div>
-                    <div
-                      class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full"
-                    ></div>
-                  </div>
-                  <div class="relative z-10">
-                    <span
-                      class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
-                      data-i18n="mega_sdm_title"
-                      >Sumber Daya Manusia</span
-                    >
-                    <h3
-                      class="text-2xl font-bold mb-3"
-                      data-i18n="mega_sdm_desc"
-                    >
-                      Tim Pengajar Profesional
-                    </h3>
-                    <p class="text-slate-300 text-sm mb-4 leading-relaxed">
-                      30+ dosen berkualifikasi S2/S3 dari universitas terkemuka
-                      dalam dan luar negeri.
-                    </p>
-                    <div class="flex gap-4 mb-6">
-                      <div class="text-center">
-                        <div class="text-2xl font-bold text-untan-yellow">
-                          15+
-                        </div>
-                        <div class="text-[10px] text-slate-400 uppercase">
-                          Doktor
-                        </div>
-                      </div>
-                      <div class="text-center">
-                        <div class="text-2xl font-bold text-untan-yellow">
-                          20+
-                        </div>
-                        <div class="text-[10px] text-slate-400 uppercase">
-                          Magister
-                        </div>
-                      </div>
-                      <div class="text-center">
-                        <div class="text-2xl font-bold text-untan-yellow">
-                          5
-                        </div>
-                        <div class="text-[10px] text-slate-400 uppercase">
-                          Guru Besar
-                        </div>
-                      </div>
-                    </div>
-                    <a
-                      href="people-based-on-kk.html"
-                      class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
-                      data-i18n="btn_all_lecturers"
-                    >
-                      Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
-                    </a>
-                  </div>
-                </div>
-                <!-- Right: KK Groups -->
-                <div class="col-span-7">
-                  <h4
-                    class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
-                    data-i18n="label_expertise"
-                  >
-                    Kelompok Keahlian
-                  </h4>
-                  <div class="grid grid-cols-2 gap-4">
-                    <a
-                      href="people-based-on-kk.html"
-                      class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all"
-                    >
-                      <div class="flex items-start gap-4">
-                        <div
-                          class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
-                        >
-                          <i class="fas fa-brain"></i>
-                        </div>
-                        <div>
-                          <h5 class="font-bold text-slate-800 mb-1">
-                            KK Kecerdasan Buatan
-                          </h5>
-                          <p class="text-xs text-slate-500">
-                            Machine Learning, Computer Vision, NLP
-                          </p>
-                          <span
-                            class="inline-block mt-2 text-xs text-purple-600 font-semibold"
-                            >8 Dosen <i class="fas fa-chevron-right ml-1"></i
-                          ></span>
-                        </div>
-                      </div>
-                    </a>
-                    <a
-                      href="people-based-on-kk.html"
-                      class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all"
-                    >
-                      <div class="flex items-start gap-4">
-                        <div
-                          class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
-                        >
-                          <i class="fas fa-code"></i>
-                        </div>
-                        <div>
-                          <h5 class="font-bold text-slate-800 mb-1">
-                            KK Rekayasa Perangkat Lunak
-                          </h5>
-                          <p class="text-xs text-slate-500">
-                            Software Engineering, DevOps, Testing
-                          </p>
-                          <span
-                            class="inline-block mt-2 text-xs text-blue-600 font-semibold"
-                            >10 Dosen <i class="fas fa-chevron-right ml-1"></i
-                          ></span>
-                        </div>
-                      </div>
-                    </a>
-                    <a
-                      href="people-based-on-kk.html"
-                      class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all"
-                    >
-                      <div class="flex items-start gap-4">
-                        <div
-                          class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
-                        >
-                          <i class="fas fa-network-wired"></i>
-                        </div>
-                        <div>
-                          <h5 class="font-bold text-slate-800 mb-1">
-                            KK Jaringan & Keamanan
-                          </h5>
-                          <p class="text-xs text-slate-500">
-                            Network, Cybersecurity, Cloud
-                          </p>
-                          <span
-                            class="inline-block mt-2 text-xs text-emerald-600 font-semibold"
-                            >7 Dosen <i class="fas fa-chevron-right ml-1"></i
-                          ></span>
-                        </div>
-                      </div>
-                    </a>
-                    <a
-                      href="people-based-on-kk.html"
-                      class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all"
-                    >
-                      <div class="flex items-start gap-4">
-                        <div
-                          class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
-                        >
-                          <i class="fas fa-database"></i>
-                        </div>
-                        <div>
-                          <h5 class="font-bold text-slate-800 mb-1">
-                            KK Sistem Informasi
-                          </h5>
-                          <p class="text-xs text-slate-500">
-                            Data Science, GIS, Business Intel
-                          </p>
-                          <span
-                            class="inline-block mt-2 text-xs text-orange-600 font-semibold"
-                            >6 Dosen <i class="fas fa-chevron-right ml-1"></i
-                          ></span>
-                        </div>
-                      </div>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Mega Menu: Fasilitas -->
-          <div
-            id="mega-fasilitas"
-            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
-          >
-            <div class="container mx-auto px-6 py-8">
-              <div class="grid grid-cols-4 gap-6">
-                <a
-                  href="content.html?type=rubrik"
-                  class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
-                >
-                  <div
-                    class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
-                  ></div>
-                  <i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
-                  <h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">
-                    Laboratorium
-                  </h4>
-                  <p
-                    class="text-sm text-cyan-100 mb-4"
-                    data-i18n="mega_lab_desc"
-                  >
-                    8 lab modern dengan peralatan terkini
-                  </p>
-                  <span
-                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
-                    data-i18n="btn_explore"
-                  >
-                    Jelajahi <i class="fas fa-arrow-right"></i>
-                  </span>
-                </a>
-                <a
-                  href="content.html?type=rubrik"
-                  class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
-                >
-                  <div
-                    class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
-                  ></div>
-                  <i class="fas fa-server text-4xl mb-4 opacity-80"></i>
-                  <h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">
-                    Data Center
-                  </h4>
-                  <p
-                    class="text-sm text-violet-100 mb-4"
-                    data-i18n="mega_dc_desc"
-                  >
-                    Server & infrastruktur cloud lokal
-                  </p>
-                  <span
-                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
-                    data-i18n="btn_explore"
-                  >
-                    Jelajahi <i class="fas fa-arrow-right"></i>
-                  </span>
-                </a>
-                <a
-                  href="content.html?type=rubrik"
-                  class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
-                >
-                  <div
-                    class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
-                  ></div>
-                  <i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
-                  <h4
-                    class="text-lg font-bold mb-2"
-                    data-i18n="mega_eresources"
-                  >
-                    E-Resources
-                  </h4>
-                  <p
-                    class="text-sm text-emerald-100 mb-4"
-                    data-i18n="mega_eresources_desc"
-                  >
-                    Akses jurnal & database ilmiah
-                  </p>
-                  <span
-                    class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
-                    data-i18n="btn_explore"
-                  >
-                    Jelajahi <i class="fas fa-arrow-right"></i>
-                  </span>
-                </a>
-                <a
-                  href="ifuntanhub.html"
-                  class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
-                >
-                  <div
-                    class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12"
-                  ></div>
-                  <i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
-                  <h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
-                  <p
-                    class="text-sm text-slate-300 mb-4"
-                    data-i18n="mega_hub_desc"
-                  >
-                    Platform PaaS untuk mahasiswa
-                  </p>
-                  <span
-                    class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all"
-                  >
-                    Launch <i class="fas fa-external-link-alt"></i>
-                  </span>
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <!-- Mega Menu: Karya & Agenda -->
-          <div
-            id="mega-karya"
-            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
-          >
-            <div class="container mx-auto px-6 py-8">
-              <div class="grid grid-cols-12 gap-8">
-                <!-- Left: Research Highlight -->
-                <div class="col-span-5">
-                  <div
-                    class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4"
-                  >
-                    <span
-                      class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
-                      data-i18n="mega_research_title"
-                      >Riset Unggulan</span
-                    >
-                    <h3
-                      class="text-xl font-bold mb-2"
-                      data-i18n="mega_sinta_title"
-                    >
-                      Indeks SINTA Terbaik
-                    </h3>
-                    <p
-                      class="text-amber-100 text-sm mb-4"
-                      data-i18n="mega_sinta_desc"
-                    >
-                      Publikasi dosen terindeks Scopus, WoS, dan jurnal nasional
-                      terakreditasi.
-                    </p>
-                    <a
-                      href="content.html?type=berita"
-                      class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
-                      data-i18n="btn_publications"
-                    >
-                      Lihat Publikasi
-                    </a>
-                  </div>
-                  <a
-                    href="content.html?type=berita"
-                    class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all"
-                  >
-                    <div class="flex items-center gap-3">
-                      <div
-                        class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600"
-                      >
-                        <i class="fas fa-calendar-alt"></i>
-                      </div>
-                      <div>
-                        <h5
-                          class="font-bold text-slate-800 text-sm"
-                          data-i18n="link_info_agenda"
-                        >
-                          Info & Agenda
-                        </h5>
-                        <p
-                          class="text-xs text-slate-500"
-                          data-i18n="link_info_agenda_desc"
-                        >
-                          Pengumuman dan jadwal kegiatan
-                        </p>
-                      </div>
-                      <i
-                        class="fas fa-chevron-right text-slate-400 ml-auto"
-                      ></i>
-                    </div>
-                  </a>
-                </div>
-                <!-- Right: Grid -->
-                <div class="col-span-7 grid grid-cols-2 gap-4">
-                  <a href="karya.html" class="mega-link-card group">
-                    <div
-                      class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-layer-group"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue"
-                      >
-                        Semua Karya
-                      </h4>
-                      <p class="text-xs text-slate-500 mt-1">
-                        Lihat seluruh karya dalam satu halaman
-                      </p>
-                    </div>
-                  </a>
-                  <a
-                    href="karya.html?filter=penelitian"
-                    class="mega-link-card group"
-                  >
-                    <div
-                      class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-microscope"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue"
-                        data-i18n="link_research"
-                      >
-                        Riset
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_research_desc"
-                      >
-                        Penelitian dosen dan mahasiswa
-                      </p>
-                    </div>
-                  </a>
-                  <a href="karya.html?filter=pkm" class="mega-link-card group">
-                    <div
-                      class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-hands-helping"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue"
-                        data-i18n="link_community"
-                      >
-                        Pengabdian
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_community_desc"
-                      >
-                        Program pengabdian masyarakat
-                      </p>
-                    </div>
-                  </a>
-                  <a
-                    href="content.html?type=rubrik"
-                    class="mega-link-card group"
-                  >
-                    <div
-                      class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"
-                    >
-                      <i class="fas fa-trophy"></i>
-                    </div>
-                    <div>
-                      <h4
-                        class="font-bold text-slate-800 group-hover:text-untan-blue"
-                        data-i18n="link_achievements"
-                      >
-                        Prestasi
-                      </h4>
-                      <p
-                        class="text-xs text-slate-500 mt-1"
-                        data-i18n="link_achievements_desc"
-                      >
-                        Pencapaian dosen & mahasiswa
-                      </p>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Mega Menu: Kontak -->
-          <div
-            id="mega-kontak"
-            class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
-          >
-            <div class="container mx-auto px-6 py-8">
-              <div class="grid grid-cols-12 gap-8">
-                <!-- Left: Contact Info -->
-                <div
-                  class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white"
-                >
-                  <h3
-                    class="text-xl font-bold mb-4"
-                    data-i18n="mega_contact_title"
-                  >
-                    Hubungi Kami
-                  </h3>
-                  <div class="space-y-4">
-                    <div class="flex items-start gap-3">
-                      <div
-                        class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
-                      >
-                        <i class="fas fa-map-marker-alt text-untan-yellow"></i>
-                      </div>
-                      <div>
-                        <p class="text-sm text-slate-300">
-                          Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Pontianak
-                          Tenggara
-                        </p>
-                        <p class="text-xs text-slate-400 mt-1">
-                          Kalimantan Barat 78124
-                        </p>
-                      </div>
-                    </div>
-                    <div class="flex items-center gap-3">
-                      <div
-                        class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
-                      >
-                        <i class="fab fa-whatsapp text-untan-yellow"></i>
-                      </div>
-                      <div>
-                        <p class="text-sm text-white font-medium">
-                          +62 851-7165-5161
-                        </p>
-                        <p class="text-xs text-slate-400">
-                          Senin - Jumat, 08:00 - 16:00
-                        </p>
-                      </div>
-                    </div>
-                    <div class="flex items-center gap-3">
-                      <div
-                        class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
-                      >
-                        <i class="fas fa-envelope text-untan-yellow"></i>
-                      </div>
-                      <div>
-                        <p class="text-sm text-white font-medium">
-                          info@informatika.untan.ac.id
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!-- Right: Quick Links & Social -->
-                <div class="col-span-7">
-                  <div class="grid grid-cols-2 gap-4 mb-6">
-                    <a
-                      href="content.html?type=berita"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-id-card"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_official_contact"
-                        >
-                          Kontak Resmi
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_contact_desc"
-                        >
-                          Direktori kontak staf
-                        </p>
-                      </div>
-                    </a>
-                    <a
-                      href="mailto:info@informatika.untan.ac.id"
-                      class="mega-link-card group"
-                    >
-                      <div
-                        class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
-                      >
-                        <i class="fas fa-comment-dots"></i>
-                      </div>
-                      <div>
-                        <h4
-                          class="font-bold text-slate-800 group-hover:text-untan-blue"
-                          data-i18n="link_feedback"
-                        >
-                          Saran & Masukan
-                        </h4>
-                        <p
-                          class="text-xs text-slate-500 mt-1"
-                          data-i18n="link_feedback_desc"
-                        >
-                          Kirim feedback Anda
-                        </p>
-                      </div>
-                    </a>
-                  </div>
-                  <div class="bg-slate-50 rounded-xl p-5">
-                    <h4
-                      class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
-                      data-i18n="follow_us"
-                    >
-                      Ikuti Kami
-                    </h4>
-                    <div class="flex gap-3">
-                      <a
-                        href="https://instagram.com/informatika.untan"
-                        target="_blank"
-                        class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
-                      >
-                        <i class="fab fa-instagram text-xl"></i>
-                      </a>
-                      <a
-                        href="#"
-                        class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
-                      >
-                        <i class="fab fa-youtube text-xl"></i>
-                      </a>
-                      <a
-                        href="#"
-                        class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
-                      >
-                        <i class="fab fa-facebook-f text-xl"></i>
-                      </a>
-                      <a
-                        href="#"
-                        class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
-                      >
-                        <i class="fab fa-twitter text-xl"></i>
-                      </a>
-                      <a
-                        href="#"
-                        class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
-                      >
-                        <i class="fab fa-linkedin-in text-xl"></i>
-                      </a>
-                      <a
-                        href="#"
-                        class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
-                      >
-                        <i class="fab fa-tiktok text-xl"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- End mega-menu-container -->
-      </nav>
-
-      <!-- Overlay for mega menu -->
-      <div
-        id="mega-overlay"
-        class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"
-      ></div>
+        <!-- Overlay for mega menu -->
+        <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
     </div>
 
-    <div
-      id="mobile-menu"
-      class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Menu navigasi mobile"
-    >
-      <div
-        class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy"
-      >
-        <div class="flex items-center gap-4">
-          <span class="font-bold text-lg text-white font-serif"
-            >Menu Utama</span
-          >
-          <button
-            class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
-            aria-label="Ganti bahasa"
-          >
-            <span class="font-bold">ID</span>
-            <span class="text-white/40" aria-hidden="true">|</span> EN
-          </button>
-          <button
-            class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
-            aria-label="Pengaturan aksesibilitas"
-            onclick="
-              const p = document.getElementById('access-panel');
-              if (p) {
-                p.classList.toggle('hidden');
-                p.classList.toggle('flex');
-              }
-            "
-          >
-            <i class="fas fa-universal-access" aria-hidden="true"></i>
-          </button>
+    <div id="mobile-menu"
+        class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
+        role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
+        <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
+            <div class="flex items-center gap-4">
+                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
+                <button
+                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
+                    aria-label="Ganti bahasa">
+                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
+                </button>
+                <button
+                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
+                    aria-label="Pengaturan aksesibilitas"
+                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                    <i class="fas fa-universal-access" aria-hidden="true"></i>
+                </button>
+            </div>
+            <button id="close-mobile-menu"
+                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
+                aria-label="Tutup menu navigasi">
+                <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
         </div>
-        <button
-          id="close-mobile-menu"
-          class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
-          aria-label="Tutup menu navigasi"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
-        <a
-          href="../../index.html"
-          class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
-          data-i18n="nav_home"
-          >Beranda</a
-        >
+        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
+            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
+                data-i18n="nav_home">Beranda</a>
 
-        <!-- Tentang Kami -->
-        <div class="pt-2">
-          <span
-            class="text-xs font-bold text-slate-400 uppercase font-serif"
-            data-i18n="nav_about"
-            >Tentang Kami</span
-          >
-          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_history"
-              >Sejarah & Tonggak</a
-            >
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_org"
-              >Struktur Organisasi</a
-            >
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_vision"
-              >Visi & Misi</a
-            >
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_partnership"
-              >Kerjasama & MoU</a
-            >
-          </div>
-        </div>
+            <!-- Tentang Kami -->
+            <div class="pt-2">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                    Kami</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_history">Sejarah & Tonggak</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_org">Struktur Organisasi</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_vision">Visi & Misi</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_partnership">Kerjasama & MoU</a>
+                </div>
+            </div>
 
-        <!-- Program -->
-        <div class="pt-2 border-t border-slate-200">
-          <span
-            class="text-xs font-bold text-slate-400 uppercase font-serif"
-            data-i18n="nav_program"
-            >Program</span
-          >
-          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-            <a
-              href="subject-and-courses.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_academic"
-              >Akademik</a
-            >
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_accreditation"
-              >Akreditasi</a
-            >
-            <a
-              href="graduate-profile.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_graduate"
-              >Profil Lulusan</a
-            >
-            <a
-              href="subject-and-courses.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_courses"
-              >Mata Kuliah</a
-            >
-            <a
-              href="academic-guidelines.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_guideline"
-              >Panduan Akademik</a
-            >
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_statistics"
-              >Informatika Angka</a
-            >
-          </div>
-        </div>
+            <!-- Program -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_program">Program</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_academic">Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_accreditation">Akreditasi</a>
+                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_graduate">Profil Lulusan</a>
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_courses">Mata Kuliah</a>
+                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_guideline">Panduan Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_statistics">Informatika Angka</a>
+                </div>
+            </div>
 
-        <!-- SDM -->
-        <div class="pt-2 border-t border-slate-200">
-          <span
-            class="text-xs font-bold text-slate-400 uppercase font-serif"
-            data-i18n="nav_sdm"
-            >SDM</span
-          >
-          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-            <a
-              href="people-based-on-kk.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
-              data-i18n="btn_all_lecturers"
-              >Semua Dosen</a
-            >
-            <a
-              href="people-based-on-kk.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="kk_ai"
-              >Kecerdasan Buatan</a
-            >
-            <a
-              href="people-based-on-kk.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="kk_se"
-              >Rekayasa Perangkat Lunak</a
-            >
-            <a
-              href="people-based-on-kk.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="kk_network"
-              >Jaringan & Keamanan</a
-            >
-            <a
-              href="people-based-on-kk.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="kk_is"
-              >Sistem Informasi</a
-            >
-          </div>
-        </div>
+            <!-- SDM -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="people-based-on-kk.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
+                        data-i18n="btn_all_lecturers">Semua Dosen</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_ai">Kecerdasan Buatan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_network">Jaringan & Keamanan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_is">Sistem Informasi</a>
+                </div>
+            </div>
 
-        <!-- Fasilitas -->
-        <div class="pt-2 border-t border-slate-200">
-          <span
-            class="text-xs font-bold text-slate-400 uppercase font-serif"
-            data-i18n="nav_facilities"
-            >Fasilitas</span
-          >
-          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-            <a
-              href="content.html?type=rubrik"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="mega_lab"
-              >Laboratorium</a
-            >
-            <a
-              href="content.html?type=rubrik"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="mega_dc"
-              >Data Center</a
-            >
-            <a
-              href="content.html?type=rubrik"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="mega_eresources"
-              >E-Resources</a
-            >
-            <a
-              href="ifuntanhub.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              >IFUNTANHUB</a
-            >
-          </div>
-        </div>
+            <!-- Fasilitas -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_facilities">Fasilitas</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_lab">Laboratorium</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_dc">Data Center</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_eresources">E-Resources</a>
+                    <a href="ifuntanhub.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
+                </div>
+            </div>
 
-        <!-- Karya & Agenda -->
-        <div class="pt-2 border-t border-slate-200">
-          <span
-            class="text-xs font-bold text-slate-400 uppercase font-serif"
-            data-i18n="nav_works"
-            >Karya & Agenda</span
-          >
-          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-            <a
-              href="karya.html"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_all_karya"
-              >Semua Karya</a
-            >
-            <a
-              href="karya.html?filter=penelitian"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_research"
-              >Riset</a
-            >
-            <a
-              href="karya.html?filter=pkm"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_community"
-              >Pengabdian Masyarakat</a
-            >
-            <a
-              href="content.html?type=rubrik"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_achievements"
-              >Prestasi</a
-            >
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_info_agenda"
-              >Info & Agenda</a
-            >
-          </div>
-        </div>
+            <!-- Karya & Agenda -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
+                    Agenda</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_all_karya">Semua Karya</a>
+                    <a href="karya.html?filter=penelitian"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_research">Riset</a>
+                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_community">Pengabdian Masyarakat</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_achievements">Prestasi</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_info_agenda">Info & Agenda</a>
+                </div>
+            </div>
 
-        <!-- Kontak -->
-        <div class="pt-2 border-t border-slate-200 pb-8">
-          <span
-            class="text-xs font-bold text-slate-400 uppercase font-serif"
-            data-i18n="nav_contact"
-            >Kontak</span
-          >
-          <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
-            <a
-              href="content.html?type=berita"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_official_contact"
-              >Kontak Resmi</a
-            >
-            <a
-              href="mailto:info@informatika.untan.ac.id"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
-              data-i18n="link_feedback"
-              >Saran & Masukan</a
-            >
-            <a
-              href="https://instagram.com/informatika.untan"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2"
-            >
-              <i class="fab fa-instagram text-pink-500"></i> Instagram
-            </a>
-            <a
-              href="#"
-              class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2"
-            >
-              <i class="fab fa-youtube text-red-500"></i> YouTube
-            </a>
-          </div>
+            <!-- Kontak -->
+            <div class="pt-2 border-t border-slate-200 pb-8">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_contact">Kontak</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_official_contact">Kontak Resmi</a>
+                    <a href="mailto:info@informatika.untan.ac.id"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_feedback">Saran & Masukan</a>
+                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
+                        <i class="fab fa-instagram text-pink-500"></i> Instagram
+                    </a>
+                    <a href="#"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
+                        <i class="fab fa-youtube text-red-500"></i> YouTube
+                    </a>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
 
-    <main
-      id="main-content"
-      class="pt-[88px] lg:pt-[160px] min-h-screen bg-white"
-    >
-      <div class="container mx-auto px-4 lg:px-8 py-12">
-        <div class="mb-8 pb-8 border-b border-slate-200">
-          <span
-            class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3"
-            >Tugas Halaman Statis</span
-          >
-          <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">
-            Sorotan dan Prestasi Karya Mahasiswa
-          </h1>
-          <p class="text-slate-500 text-sm">
-            Kelompok 06 &mdash; ACAAB &nbsp;&middot;&nbsp; Informatika UNTAN
-            2026
-          </p>
+<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
+        <div class="container mx-auto px-4 lg:px-8 py-12">
+            <div class="mb-8 pb-8 border-b border-slate-200">
+                <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
+                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Sorotan dan Prestasi Karya Mahasiswa</h1>
+                <p class="text-slate-500 text-sm">Kelompok 06 &mdash; ACAAB &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
+            </div>
+            <div id="assignment-body" class="prose prose-slate max-w-none">
+                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+                <p>Tulis konten halaman kelompok di sini.</p>
+                <h3>Subjudul</h3>
+                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
+                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+            </div>
         </div>
-        <div id="assignment-body" class="prose prose-slate max-w-none">
-          <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-          <p>Tulis konten halaman kelompok di sini.</p>
-          <h3>Subjudul</h3>
-          <p>
-            Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.
-          </p>
-          <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-        </div>
-      </div>
     </main>
 
-    <footer
-      class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0"
-    >
-      <div
-        class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center"
-      >
-        <h3
-          class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4"
-          data-i18n="footer_follow_us"
-        >
-          Ikuti Kami
-        </h3>
-        <div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
-          <a
-            href="https://instagram.com/informatika.untan"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-white hover:text-untan-yellow transition-colors"
-            ><i class="fab fa-instagram text-xl sm:text-2xl"></i
-          ></a>
-          <a
-            href="https://instagram.com/informatika.untan"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-white hover:text-untan-yellow transition-colors"
-            ><i class="fab fa-youtube text-xl sm:text-2xl"></i
-          ></a>
-          <a
-            href="https://instagram.com/informatika.untan"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-white hover:text-untan-yellow transition-colors"
-            ><i class="fab fa-facebook-f text-xl sm:text-2xl"></i
-          ></a>
-          <a
-            href="https://instagram.com/informatika.untan"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-white hover:text-untan-yellow transition-colors"
-            ><i class="fab fa-twitter text-xl sm:text-2xl"></i
-          ></a>
-          <a
-            href="https://instagram.com/informatika.untan"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-white hover:text-untan-yellow transition-colors"
-            ><i class="fab fa-linkedin-in text-xl sm:text-2xl"></i
-          ></a>
-          <a
-            href="https://instagram.com/informatika.untan"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-white hover:text-untan-yellow transition-colors"
-            ><i class="fab fa-tiktok text-xl sm:text-2xl"></i
-          ></a>
+    <footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
+        <div class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center">
+
+            <h3 class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4" data-i18n="footer_follow_us">
+                Ikuti Kami</h3>
+            <div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-instagram text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-youtube text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-facebook-f text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-twitter text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-linkedin-in text-xl sm:text-2xl"></i></a>
+                <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                    class="text-white hover:text-untan-yellow transition-colors"><i
+                        class="fab fa-tiktok text-xl sm:text-2xl"></i></a>
+            </div>
+
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left">
+                <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
+                    class="h-16 sm:h-20 shrink-0" alt="Logo UNTAN">
+                <div
+                    class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight">
+                    <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1">INFORMATIKA</h2>
+                    <h2 class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5">
+                        UNIVERSITAS TANJUNGPURA</h2>
+                </div>
+            </div>
+
+            <div class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light">
+                <p class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1">
+                    <i class="fas fa-map-marker-alt text-untan-yellow"></i>
+                    Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,
+                </p>
+                <p>Kota Pontianak, Kalimantan Barat 78124</p>
+            </div>
+
+            <div
+                class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide">
+                <span>E: info@informatika.untan.ac.id</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>P: +62 851-7165-5161</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>F: +62(561) 739637</span>
+                <span class="hidden sm:inline opacity-50">|</span>
+                <span>WA: +62 851-7165-5161</span>
+            </div>
+
         </div>
 
-        <div
-          class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left"
-        >
-          <img
-            src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
-            class="h-16 sm:h-20 shrink-0"
-            alt="Logo UNTAN"
-          />
-          <div
-            class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight"
-          >
-            <h2
-              class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1"
-            >
-              INFORMATIKA
-            </h2>
-            <h2
-              class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5"
-            >
-              UNIVERSITAS TANJUNGPURA
-            </h2>
-          </div>
+        <div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
+            <img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom"
+                style="object-position: bottom;">
         </div>
-
-        <div
-          class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light"
-        >
-          <p
-            class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1"
-          >
-            <i class="fas fa-map-marker-alt text-untan-yellow"></i>
-            Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak
-            Tenggara,
-          </p>
-          <p>Kota Pontianak, Kalimantan Barat 78124</p>
-        </div>
-
-        <div
-          class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide"
-        >
-          <span>E: info@informatika.untan.ac.id</span>
-          <span class="hidden sm:inline opacity-50">|</span>
-          <span>P: +62 851-7165-5161</span>
-          <span class="hidden sm:inline opacity-50">|</span>
-          <span>F: +62(561) 739637</span>
-          <span class="hidden sm:inline opacity-50">|</span>
-          <span>WA: +62 851-7165-5161</span>
-        </div>
-      </div>
-
-      <div
-        class="w-full relative z-0 mt-4 pointer-events-none flex justify-center"
-      >
-        <img
-          src="../../assets/global/footer.png"
-          alt="Footer Illustration"
-          class="w-full h-auto object-cover object-bottom"
-          style="object-position: bottom"
-        />
-      </div>
     </footer>
 
     <script>
-      (function () {
-        const menuItems = document.querySelectorAll("[data-menu]");
-        const megaOverlay = document.getElementById("mega-overlay");
+        (function () {
+            const menuItems = document.querySelectorAll('[data-menu]');
+            const megaOverlay = document.getElementById('mega-overlay');
 
-        let activeMenu = null;
+            let activeMenu = null;
 
-        const menuMap = {
-          tentang: "mega-tentang",
-          program: "mega-program",
-          sdm: "mega-sdm",
-          fasilitas: "mega-fasilitas",
-          karya: "mega-karya",
-          kontak: "mega-kontak",
-        };
+            const menuMap = {
+                tentang: 'mega-tentang',
+                program: 'mega-program',
+                sdm: 'mega-sdm',
+                fasilitas: 'mega-fasilitas',
+                karya: 'mega-karya',
+                kontak: 'mega-kontak'
+            };
 
-        function setButtonState(menuId) {
-          menuItems.forEach((item) => {
-            const isActive = item.getAttribute("data-menu") === menuId;
-            const btn = item.querySelector(".nav-menu-btn");
-            const chevron = item.querySelector(".fa-chevron-down");
+            function setButtonState(menuId) {
+                menuItems.forEach(item => {
+                    const isActive = item.getAttribute('data-menu') === menuId;
+                    const btn = item.querySelector('.nav-menu-btn');
+                    const chevron = item.querySelector('.fa-chevron-down');
 
-            btn.classList.toggle("active", isActive);
-            btn.setAttribute("aria-expanded", isActive ? "true" : "false");
-            chevron.style.transform = isActive ? "rotate(180deg)" : "";
-          });
-        }
-
-        function closeMenus() {
-          Object.values(menuMap).forEach((panelId) => {
-            const panel = document.getElementById(panelId);
-            if (panel) panel.classList.remove("active");
-          });
-
-          megaOverlay.classList.remove("active");
-          setButtonState(null);
-          activeMenu = null;
-        }
-
-        function openMenu(menuId) {
-          const targetPanel = document.getElementById(menuMap[menuId]);
-          if (!targetPanel) return;
-
-          Object.values(menuMap).forEach((panelId) => {
-            const panel = document.getElementById(panelId);
-            if (panel) panel.classList.remove("active");
-          });
-
-          targetPanel.classList.add("active");
-          megaOverlay.classList.add("active");
-          setButtonState(menuId);
-          activeMenu = menuId;
-        }
-
-        menuItems.forEach((item) => {
-          const menuId = item.getAttribute("data-menu");
-          const button = item.querySelector(".nav-menu-btn");
-
-          button.setAttribute("aria-haspopup", "true");
-          button.setAttribute("aria-expanded", "false");
-
-          button.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (activeMenu === menuId) {
-              closeMenus();
-            } else {
-              openMenu(menuId);
+                    btn.classList.toggle('active', isActive);
+                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
+                });
             }
-          });
-        });
 
-        megaOverlay.addEventListener("click", closeMenus);
+            function closeMenus() {
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
 
-        document.addEventListener("click", (e) => {
-          const clickedInsideNav = e.target.closest("#main-nav");
-          const clickedInsidePanel = e.target.closest(".mega-panel");
+                megaOverlay.classList.remove('active');
+                setButtonState(null);
+                activeMenu = null;
+            }
 
-          if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
-            closeMenus();
-          }
-        });
+            function openMenu(menuId) {
+                const targetPanel = document.getElementById(menuMap[menuId]);
+                if (!targetPanel) return;
 
-        document.addEventListener("keydown", (e) => {
-          if (e.key === "Escape" && activeMenu) {
-            closeMenus();
-          }
-        });
-      })();
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
+
+                targetPanel.classList.add('active');
+                megaOverlay.classList.add('active');
+                setButtonState(menuId);
+                activeMenu = menuId;
+            }
+
+            menuItems.forEach(item => {
+                const menuId = item.getAttribute('data-menu');
+                const button = item.querySelector('.nav-menu-btn');
+
+                button.setAttribute('aria-haspopup', 'true');
+                button.setAttribute('aria-expanded', 'false');
+
+                button.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (activeMenu === menuId) {
+                        closeMenus();
+                    } else {
+                        openMenu(menuId);
+                    }
+                });
+            });
+
+            megaOverlay.addEventListener('click', closeMenus);
+
+            document.addEventListener('click', (e) => {
+                const clickedInsideNav = e.target.closest('#main-nav');
+                const clickedInsidePanel = e.target.closest('.mega-panel');
+
+                if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
+                    closeMenus();
+                }
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && activeMenu) {
+                    closeMenus();
+                }
+            });
+        })();
     </script>
 
-    <script>
-      (function () {
-        const mobileBtn = document.getElementById("mobile-menu-button");
-        const mobileMenu = document.getElementById("mobile-menu");
-        const closeMobileBtn = document.getElementById("close-mobile-menu");
+<script>
+    (function() {
+        const mobileBtn     = document.getElementById('mobile-menu-button');
+        const mobileMenu    = document.getElementById('mobile-menu');
+        const closeMobileBtn= document.getElementById('close-mobile-menu');
         if (mobileBtn && mobileMenu) {
-          mobileBtn.addEventListener("click", function () {
-            const isOpen = !mobileMenu.classList.contains("-translate-x-full");
-            mobileMenu.classList.toggle("-translate-x-full");
-            mobileBtn.setAttribute("aria-expanded", isOpen ? "false" : "true");
-          });
+            mobileBtn.addEventListener('click', function() {
+                const isOpen = !mobileMenu.classList.contains('-translate-x-full');
+                mobileMenu.classList.toggle('-translate-x-full');
+                mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+            });
         }
         if (closeMobileBtn && mobileMenu) {
-          closeMobileBtn.addEventListener("click", function () {
-            mobileMenu.classList.add("-translate-x-full");
-            if (mobileBtn) mobileBtn.setAttribute("aria-expanded", "false");
-          });
+            closeMobileBtn.addEventListener('click', function() {
+                mobileMenu.classList.add('-translate-x-full');
+                if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
+            });
         }
-      })();
-    </script>
+    })();
+</script>
 
-    <script src="../../assets/global/localization.js"></script>
-  </body>
-</html>
+<script src="../../assets/global/localization.js"></script>
+</body>
+</html>
\ No newline at end of file

From 859e5387613bdcf3973402420d88706a0789f5a7 Mon Sep 17 00:00:00 2001
From: z0rayy <ravrbae.dwi.p@gmail.com>
Date: Fri, 5 Jun 2026 01:05:31 +0700
Subject: [PATCH 33/36] fix: memperbaiki fitur bilingual yang masih ada miss di
 section laboratorium dan memperbaruhi tautan untuk kartu dosen kbk ke
 direktori resmi

---
 groups/RODA/index.html | 52 ++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index b3e8519..20edd79 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -904,7 +904,7 @@
                             </div>
 
                             <div class="flex items-center gap-2 sm:gap-2.5 md:gap-3 lg:gap-3 xl:gap-3">
-                                <span
+                                <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"
@@ -994,11 +994,11 @@
                                     <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 Mahasiswa
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 25 <span data-i18n="mhs">Mahasiswa</span>
                                 </span>
                             </div>
                         </div>
-                        <h4 class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Komputer & Pemrograman</h4>
+                        <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">
@@ -1016,7 +1016,7 @@
                                 <i class="fa-solid fa-network-wired"></i>
                             </div>
                         </div>
-                        <h4 class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Jaringan, Keamanan & IoT</h4>
+                        <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">
@@ -1037,11 +1037,11 @@
                                     <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 Mahasiswa
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 25 <span data-i18n="mhs">Mahasiswa</span>
                                 </span>
                             </div>
                         </div>
-                        <h4 class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Rekayasa PL & Data</h4>
+                        <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">
@@ -1063,11 +1063,11 @@
                                     <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 Mahasiswa
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 21 <span data-i18n="mhs">Mahasiswa</span>
                                 </span>
                             </div>
                         </div>
-                        <h4 class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Teknologi & Sistem Informasi</h4>
+                        <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">
@@ -1088,11 +1088,11 @@
                                     <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 Mahasiswa
+                                    <i class="fa-solid fa-user-group text-[9px]"></i> 22 <span data-i18n="mhs">Mahasiswa</span>
                                 </span>
                             </div>
                         </div>
-                        <h4 class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Komputasi & Kecerdasan Buatan</h4>
+                        <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">
@@ -1383,8 +1383,15 @@
                 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.'
+                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',
@@ -1442,8 +1449,15 @@
                 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.'
+                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'
             }
         };
 
@@ -1778,10 +1792,18 @@
                 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" 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">
+                    <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">

From 4ed5c20d808f537c587d9bfb584f025d2abe0760 Mon Sep 17 00:00:00 2001
From: GuavaPopper <radityaindraputranto@gmail.com>
Date: Fri, 5 Jun 2026 01:16:41 +0700
Subject: [PATCH 34/36] chore: update package lock metadata

---
 package-lock.json | 1 -
 1 file changed, 1 deletion(-)

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"
       },

From cff21cbf9298ed6d53094275a8c0e66aa036d9aa Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <d1041231009@student.untan.ac.id>
Date: Thu, 4 Jun 2026 18:50:19 +0000
Subject: [PATCH 35/36] -

---
 groups/RODA/.env | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 groups/RODA/.env

diff --git a/groups/RODA/.env b/groups/RODA/.env
deleted file mode 100644
index ffbaf40..0000000
--- a/groups/RODA/.env
+++ /dev/null
@@ -1,4 +0,0 @@
-DASHBOARD_TARGET_URL=https://dashboard.informatika.untan.ac.id/index.php?penelitian
-DASHBOARD_PROXY_1=https://api.allorigins.win/get?url={{url}}&ts={{ts}}
-DASHBOARD_PROXY_2=https://api.codetabs.com/v1/proxy?quest={{url}}
-DASHBOARD_PROXY_3=https://thingproxy.freeboard.io/fetch/{{rawUrl}}
\ No newline at end of file

From f42afb5b81cb08679859367365d0ea04df938851 Mon Sep 17 00:00:00 2001
From: GuavaPopper <radityaindraputranto@gmail.com>
Date: Fri, 5 Jun 2026 02:15:27 +0700
Subject: [PATCH 36/36] chore: selaraskan berkas proyek

---
 README.md    | 10 ----------
 netlify.toml |  6 ------
 2 files changed, 16 deletions(-)
 delete mode 100644 netlify.toml

diff --git a/README.md b/README.md
index c8edaee..50cdb3e 100644
--- a/README.md
+++ b/README.md
@@ -20,16 +20,6 @@ Buka URL dari Vite (default: `http://localhost:5173`) lalu akses launcher di `/`
 | `npm run build` | Build static output ke folder `dist` |
 | `npm run preview` | Preview hasil build |
 
-## Deploy Netlify
-
-Project ini sudah punya konfigurasi Netlify di `netlify.toml`.
-
-Saat membuat site di Netlify:
-- Repository: `GuavaPopper/PPL_Staging`
-- Branch deploy: `Staging`
-- Build command: `npm run build`
-- Publish directory: `dist`
-
 ## Struktur Folder
 
 ```
diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index 0cab1ff..0000000
--- a/netlify.toml
+++ /dev/null
@@ -1,6 +0,0 @@
-[build]
-  command = "npm run build"
-  publish = "dist"
-
-[build.environment]
-  NODE_VERSION = "22"