From caf930dd452ca29bbc6fa5c64f3aa40efabe03af Mon Sep 17 00:00:00 2001
From: ilham_gmail <milham652@gmail.com>
Date: Thu, 4 Jun 2026 18:31:27 +0700
Subject: [PATCH] fix(limaem): correct asset paths

---
 groups/LimaEm/index.html | 3093 ++++++++++++++++++++++++++------------
 1 file changed, 2123 insertions(+), 970 deletions(-)
diff --git a/groups/LimaEm/index.html b/groups/LimaEm/index.html
index 50f73ba..719ee39 100644
--- a/groups/LimaEm/index.html
+++ b/groups/LimaEm/index.html
@@ -1,1050 +1,2203 @@
 ﻿<!DOCTYPE html>
-<html lang="id">
-
+<html lang="id" class="scroll-smooth">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kehidupan Mahasiswa & Himpunan (HMIF)</title>
-
+    <title>Group 07 &ndash; LIMA EM | Informatika UNTAN</title>
     <link href="./assets/css/output.css" rel="stylesheet">
-</head>
+    <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;
+        }
 
-<body class="bg-[#EEF2FC] text-slate-800">
-    <!-- Header -->
-    <div id="site-header" class="fixed top-0 left-0 right-0 z-50 shadow-sm">
-        <div class="bg-hmif-primary text-white border-b border-white/10">
-            <div
-                class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-4 lg:px-6 py-3 lg:py-4 flex items-center justify-between">
-                <a href="#" class="flex items-center gap-3">
-                    <img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
-                        alt="Logo Universitas Tanjungpura" class="w-9 h-9 lg:w-11 lg:h-11 object-contain" />
-                    <div class="border-l border-white/25 pl-3 leading-tight">
-                        <p class="text-sm lg:text-xl font-bold tracking-widest uppercase text-white">INFORMATIKA</p>
-                        <p class="text-[9px] lg:text-[11px] tracking-[0.2em] uppercase text-slate-200">UNIVERSITAS
-                            TANJUNGPURA</p>
+        #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;
+            }
+
+            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>
+
+    <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 text-[11px] tracking-wide uppercase">
-                    <a href="https://satu.untan.ac.id" target="_blank" rel="noopener noreferrer"
-                        class="font-semibold hover:text-hmif-secondary transition-colors">SATU UNTAN</a>
-                    <div class="h-5 w-px bg-white/20"></div>
-                    <button id="language-toggle" data-language-toggle type="button"
-                        class="hover:text-hmif-secondary transition-colors" aria-label="Ganti bahasa"
-                        aria-pressed="false">ID | EN</button>
-                    <button class="w-7 h-7 rounded hover:bg-white/10 transition-colors" aria-label="Aksesibilitas">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                            stroke="currentColor" class="w-4 h-4 mx-auto">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M12 4.5m-1.5 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M9 21l3-6 3 6M6 9.75h12M12 6v9" />
-                        </svg>
-                    </button>
-                    <button class="w-7 h-7 rounded hover:bg-white/10 transition-colors" aria-label="Cari">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                            stroke="currentColor" class="w-4 h-4 mx-auto">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="m21 21-4.35-4.35m0 0A7.5 7.5 0 1 0 6 6a7.5 7.5 0 0 0 10.65 10.65Z" />
-                        </svg>
-                    </button>
+                <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-white w-9 h-9 inline-flex items-center justify-center rounded hover:bg-white/10 transition-colors"
-                    aria-label="Buka menu" aria-expanded="false" aria-controls="mobile-menu">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                        stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M3.75 6.75h16.5m-16.5 5.25h16.5m-16.5 5.25h16.5" />
-                    </svg>
+                    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="hidden lg:block bg-hmif-secondary border-t border-white/30 shadow-md">
-            <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6">
-                <ul class="flex items-center justify-center gap-1 py-2">
-                    <li><a href="#"
-                            class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">ABOUT
-                            US</a></li>
-                    <li><a href="#"
-                            class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">PROGRAMS</a>
-                    </li>
-                    <li><a href="#"
-                            class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">HUMAN
-                            RESOURCES</a></li>
-                    <li><a href="#"
-                            class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">FACILITIES</a>
-                    </li>
-                    <li><a href="#"
-                            class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">WORKS
-                            &amp; EVENTS</a></li>
-                    <li><a href="#"
-                            class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">CONTACT</a>
-                    </li>
-                </ul>
+        <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>
 
-        <div id="mobile-menu" class="lg:hidden hidden bg-hmif-secondary border-t border-white/30 shadow-md">
-            <div class="px-4 py-3 grid grid-cols-1 gap-1">
-                <a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">ABOUT US</a>
-                <a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">PROGRAMS</a>
-                <a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">HUMAN
-                    RESOURCES</a>
-                <a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">FACILITIES</a>
-                <a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">WORKS &amp;
-                    EVENTS</a>
-                <a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">CONTACT</a>
-                <button data-language-toggle type="button"
-                    class="py-2 text-left text-[11px] font-bold uppercase tracking-wide text-slate-800"
-                    aria-label="Ganti bahasa" aria-pressed="false">ID | EN</button>
+        <!-- Overlay for mega menu -->
+        <div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
+    </div>
+
+    <div id="mobile-menu"
+        class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
+        role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
+        <div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
+            <div class="flex items-center gap-4">
+                <span class="font-bold text-lg text-white font-serif">Menu Utama</span>
+                <button
+                    class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
+                    aria-label="Ganti bahasa">
+                    <span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
+                </button>
+                <button
+                    class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
+                    aria-label="Pengaturan aksesibilitas"
+                    onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
+                    <i class="fas fa-universal-access" aria-hidden="true"></i>
+                </button>
+            </div>
+            <button id="close-mobile-menu"
+                class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
+                aria-label="Tutup menu navigasi">
+                <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+        </div>
+        <div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
+            <a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
+                data-i18n="nav_home">Beranda</a>
+
+            <!-- Tentang Kami -->
+            <div class="pt-2">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                    Kami</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_history">Sejarah & Tonggak</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_org">Struktur Organisasi</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_vision">Visi & Misi</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_partnership">Kerjasama & MoU</a>
+                </div>
+            </div>
+
+            <!-- Program -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_program">Program</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_academic">Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_accreditation">Akreditasi</a>
+                    <a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_graduate">Profil Lulusan</a>
+                    <a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_courses">Mata Kuliah</a>
+                    <a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_guideline">Panduan Akademik</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_statistics">Informatika Angka</a>
+                </div>
+            </div>
+
+            <!-- SDM -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="people-based-on-kk.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
+                        data-i18n="btn_all_lecturers">Semua Dosen</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_ai">Kecerdasan Buatan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_network">Jaringan & Keamanan</a>
+                    <a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="kk_is">Sistem Informasi</a>
+                </div>
+            </div>
+
+            <!-- Fasilitas -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_facilities">Fasilitas</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_lab">Laboratorium</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_dc">Data Center</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="mega_eresources">E-Resources</a>
+                    <a href="ifuntanhub.html"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
+                </div>
+            </div>
+
+            <!-- Karya & Agenda -->
+            <div class="pt-2 border-t border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
+                    Agenda</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_all_karya">Semua Karya</a>
+                    <a href="karya.html?filter=penelitian"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_research">Riset</a>
+                    <a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_community">Pengabdian Masyarakat</a>
+                    <a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_achievements">Prestasi</a>
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_info_agenda">Info & Agenda</a>
+                </div>
+            </div>
+
+            <!-- Kontak -->
+            <div class="pt-2 border-t border-slate-200 pb-8">
+                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                    data-i18n="nav_contact">Kontak</span>
+                <div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
+                    <a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_official_contact">Kontak Resmi</a>
+                    <a href="mailto:info@informatika.untan.ac.id"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
+                        data-i18n="link_feedback">Saran & Masukan</a>
+                    <a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
+                        <i class="fab fa-instagram text-pink-500"></i> Instagram
+                    </a>
+                    <a href="#"
+                        class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
+                        <i class="fab fa-youtube text-red-500"></i> YouTube
+                    </a>
+                </div>
             </div>
         </div>
     </div>
 
-    <!-- Hero Section -->
-    <header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]">
-
-        <img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
-            class="absolute inset-0 w-full h-full object-cover z-0" />
-
-        <div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
-
-        <div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
-
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-
-                <div class="flex flex-col items-start text-left space-y-6">
-
-                    <div
-                        class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
-                        COMMUNITY & LEADERSHIP
-                    </div>
-
-                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
-                        Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
-                    </h1>
-
-                    <p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
-                        Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
-                        kreativitas, membentuk calon pemimpin industri masa depan.
-                    </p>
-
-                    <button
-                        class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer">
-                        Lihat Struktur Kepengurusan
-                    </button>
-
-                </div>
-
-                <div class="hidden lg:block"></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">Kehidupan Mahasiswa &amp; Himpunan (HMIF)</h1>
+                <p class="text-slate-500 text-sm">Kelompok 07 &mdash; LIMA EM &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
             </div>
-        </div>
-    </header>
+            <div id="assignment-body" class="prose prose-slate max-w-none">
+                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+                <!-- Hero Section -->
+                <header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]">
 
-    <!-- About Section -->
-    <section id="about" class="bg-white overflow-hidden">
-        <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16">
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
+                    <img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
+                        class="absolute inset-0 w-full h-full object-cover z-0" />
 
-                <!-- ─── Left: Text Content ─── -->
-                <div class="flex flex-col gap-8 order-1 lg:pr-6">
+                    <div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
 
-                    <!-- Heading -->
-                    <h2 class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
-                        Ruang Tumbuh Bagi<br>Mahasiswa Informatika
-                    </h2>
+                    <div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
 
-                    <!-- Paragraf -->
-                    <div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
-                        <p>
-                            Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar
-                            organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa
-                            pendidikan formal adalah fondasi, namun komunitas adalah akselerator.
-                        </p>
-                        <p>
-                            Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
-                            akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
-                            dan integritas ilmiah.
-                        </p>
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+                            <div class="flex flex-col items-start text-left space-y-6">
+
+                                <div
+                                    class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
+                                    COMMUNITY & LEADERSHIP
+                                </div>
+
+                                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
+                                    Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
+                                </h1>
+
+                                <p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
+                                    Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
+                                    kreativitas, membentuk calon pemimpin industri masa depan.
+                                </p>
+
+                                <button
+                                    class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer">
+                                    Lihat Struktur Kepengurusan
+                                </button>
+
+                            </div>
+
+                            <div class="hidden lg:block"></div>
+
+                        </div>
                     </div>
+                </header>
 
-                    <!-- Stats -->
-                    <div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
-                        <div>
-                            <p
-                                class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
-                                518</p>
-                            <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
-                                Mahasiswa Aktif
+                <!-- About Section -->
+                <section id="about" class="bg-white overflow-hidden">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16">
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
+
+                            <!-- ─── Left: Text Content ─── -->
+                            <div class="flex flex-col gap-8 order-1 lg:pr-6">
+
+                                <!-- Heading -->
+                                <h2 class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
+                                    Ruang Tumbuh Bagi<br>Mahasiswa Informatika
+                                </h2>
+
+                                <!-- Paragraf -->
+                                <div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
+                                    <p>
+                                        Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar
+                                        organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa
+                                        pendidikan formal adalah fondasi, namun komunitas adalah akselerator.
+                                    </p>
+                                    <p>
+                                        Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
+                                        akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
+                                        dan integritas ilmiah.
+                                    </p>
+                                </div>
+
+                                <!-- Stats -->
+                                <div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
+                                    <div>
+                                        <p
+                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
+                                            518</p>
+                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
+                                            Mahasiswa Aktif
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p
+                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
+                                            8</p>
+                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
+                                            MITRA
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- ─── Right: Photo ─── -->
+                            <div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
+
+                                <!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
+                                <div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
+                                            bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
+
+                                <!-- Frame foto — overflow hidden, foto full width tanpa crop -->
+                                <div
+                                    class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
+                                    <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
+                                        alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
+                                                transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
+                                    <!-- Gradient overlay bawah -->
+                                    <div class="absolute inset-0
+                                                bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
+                                                opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
+                                </div>
+
+                                <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
+                                <div class="absolute z-20 bottom-[-3%] left-[0%]
+                                            bg-hmif-secondary text-hmif-primary
+                                            rounded-xl px-4 py-3 text-center shadow-2xl
+                                            border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                        stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+                                    </svg>
+                                    <p class="text-[11px] lg:text-xs font-bold leading-snug">
+                                        Inklusivitas &<br>Kolaborasi
+                                    </p>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </section>
+
+
+                <!-- Partner & Kolaborator -->
+                <section id="partners" class="bg-white py-16">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
+                        <h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
+                            Partner dan Kolaborator
+                        </h2>
+
+                        <div class="flex flex-wrap gap-6 lg:gap-10 items-center">
+                            <!-- Partner Aktif (Terbaru) -->
+                            <a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
+                                rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
+                                <img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
+                                            hover:scale-110 transition-transform duration-200 cursor-pointer"
+                                    title="Partner Terbaru" />
+                            </a>
+                            <!-- Partner Aktif (Sobat Konveksi) -->
+                            <a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
+                                rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
+                                <img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
+                                            hover:scale-110 transition-transform duration-200 cursor-pointer"
+                                    title="Partner Aktif" />
+                            </a>
+
+                            <!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
+                            <div class="relative group">
+                                <img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
+                                            hover:scale-110 hover:shadow-lg transition-all duration-300" />
+                            </div>
+                            <div class="relative group">
+                                <img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
+                                            hover:scale-110 hover:shadow-lg transition-all duration-300" />
+                            </div>
+                            <div class="relative group">
+                                <img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
+                                            hover:scale-110 hover:shadow-lg transition-all duration-300" />
+                            </div>
+                            <div class="relative group">
+                                <img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
+                                            hover:scale-110 hover:shadow-lg transition-all duration-300" />
+                            </div>
+                            <div class="relative group">
+                                <img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
+                                            hover:scale-110 hover:shadow-lg transition-all duration-300" />
+                            </div>
+                            <div class="relative group">
+                                <img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
+                                            hover:scale-110 hover:shadow-lg transition-all duration-300" />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Divisi Kepengurusan HMIF Section -->
+                <section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
+                        <!-- Header -->
+                        <div class="mb-12 md:mb-16 max-w-3xl">
+                            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
+                                Divisi Kepengurusan HMIF
+                            </h2>
+                            <p class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
+                                Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai
+                                bidang strategis.
                             </p>
                         </div>
-                        <div>
-                            <p
-                                class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
-                                8</p>
-                            <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
-                                MITRA
+
+                        <!-- Grid Card Container -->
+                        <div
+                            class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
+                            <!-- Bidang 1 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span
+                                    class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
+                                    Bidang 1
+                                </span>
+                                <h3
+                                    class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
+                                    Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
+                                </h3>
+                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                    Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
+                                    kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
+                                    workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
+                                    tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan
+                                    menjaga regenerasi organisasi.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 2 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span
+                                    class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
+                                    Bidang 2
+                                </span>
+                                <h3
+                                    class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
+                                    Media Komunikasi dan Konten Digital
+                                </h3>
+                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                    Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
+                                    perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
+                                    kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
+                                    identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 3 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span
+                                    class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
+                                    Bidang 3
+                                </span>
+                                <h3
+                                    class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
+                                    Inovasi dan Kompetisi Teknologi
+                                </h3>
+                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                    Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
+                                    coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
+                                    Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
+                                    bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website
+                                    dan dashboard untuk mendukung ekosistem inovasi HMIF.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 4 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span
+                                    class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
+                                    Bidang 4
+                                </span>
+                                <h3
+                                    class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
+                                    Pengembangan Organisasi
+                                </h3>
+                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                    Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
+                                    pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
+                                    mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
+                                    kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur
+                                    dan efisien.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 5 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span
+                                    class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
+                                    Bidang 5
+                                </span>
+                                <h3
+                                    class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
+                                    Sosial Masyarakat
+                                </h3>
+                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                    Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
+                                    berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
+                                    meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
+                                    dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 6 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span
+                                    class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
+                                    Bidang 6
+                                </span>
+                                <h3
+                                    class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
+                                    Kewirausahaan dan Kemitraan
+                                </h3>
+                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                    Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
+                                    dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
+                                    kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
+                                    pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan
+                                    profesional.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Kegiatan Unggulan Section -->
+                <section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
+                    <div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
+                        <!-- Header -->
+                        <div class="mb-12">
+                            <h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
+                                Kegiatan Unggulan
+                            </h2>
+                            <p class="text-sm text-gray-500 mt-2 font-medium">
+                                Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
                             </p>
                         </div>
-                    </div>
-                </div>
 
-                <!-- ─── Right: Photo ─── -->
-                <div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
+                        <!-- Slider Container with Arrows -->
+                        <div class="relative flex items-center">
+                            <!-- Left Arrow Button -->
+                            <button id="slider-prev"
+                                class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Sebelumnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                                </svg>
+                            </button>
 
-                    <!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
-                    <div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
-                                bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
+                            <!-- Viewport / Overflow Wrapper -->
+                            <div class="overflow-hidden w-full" id="slider-viewport">
+                                <!-- Track holds all cards in a single row -->
+                                <div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
 
-                    <!-- Frame foto — overflow hidden, foto full width tanpa crop -->
-                    <div
-                        class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
-                        <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
-                            alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
-                                    transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
-                        <!-- Gradient overlay bawah -->
-                        <div class="absolute inset-0
-                                    bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
-                                    opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
-                    </div>
+                                    <!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                        <div
+                                            class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+                                            <img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
+                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        </div>
+                                        <div class="flex items-start gap-4 mt-6">
+                                            <div
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    Silaturahmi Keluarga Besar Informatika</h3>
+                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
+                                                    seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
+                                            </div>
+                                        </div>
+                                    </div>
 
-                    <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
-                    <div class="absolute z-20 bottom-[-3%] left-[0%]
-                                bg-hmif-secondary text-hmif-primary
-                                rounded-xl px-4 py-3 text-center shadow-2xl
-                                border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                            stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
-                        </svg>
-                        <p class="text-[11px] lg:text-xs font-bold leading-snug">
-                            Inklusivitas &<br>Kolaborasi
-                        </p>
-                    </div>
-                </div>
+                                    <!-- Card 2 Gemastik -->
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                        <div
+                                            class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+                                            <img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
+                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        </div>
+                                        <div class="flex items-start gap-4 mt-6">
+                                            <div
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">1</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Jul</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    GEMASTIK</h3>
+                                                <p class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. 
+                                                    Wadah bagi mahasiswa Informatika UNTAN untuk unjuk 
+                                                    gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX.
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
 
-            </div>
-        </div>
-    </section>
+                                    <!-- Card 3 17 agustus -->
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                        <div
+                                            class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+                                            <img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
+                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        </div>
+                                        <div class="flex items-start gap-4 mt-6">
+                                            <div
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    Perayaan 17 Agustus</h3>
+                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
+                                                    Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
+                                            </div>
+                                        </div>
+                                    </div>
 
+                                    <!-- Card 3 Bootcamp -->
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                        <div
+                                            class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+                                            <img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
+                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        </div>
+                                        <div class="flex items-start gap-4 mt-6">
+                                            <div
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    Bootcamp HMIF</h3>
+                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
+                                                    pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
+                                                    industri.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- Card 5 UPC 2025 -->
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                        <div
+                                            class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+                                            <img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
+                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        </div>
+                                        <div class="flex items-start gap-4 mt-6">
+                                            <div
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">13</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    UPC</h3>
+                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
+                                                    mengasah skill coding mahasiswa Informatika.</p>
+                                            </div>
+                                        </div>
+                                    </div>
 
-    <!-- Partner & Kolaborator -->
-    <section id="partners" class="bg-white py-16">
-        <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
-            <h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
-                Partner dan Kolaborator
-            </h2>
+                                    <!-- Card 6 Informers -->
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                        <div
+                                            class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
+                                            <img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
+                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        </div>
+                                        <div class="flex items-start gap-4 mt-6">
+                                            <div
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    INFORMERS</h3>
+                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
+                                                    Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
+                                                    Informatika.</p>
+                                            </div>
+                                        </div>
+                                    </div>
 
-            <div class="flex flex-wrap gap-6 lg:gap-10 items-center">
-                <!-- Partner Aktif (Terbaru) -->
-                <a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
-                    rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
-                    <img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
-                                hover:scale-110 transition-transform duration-200 cursor-pointer"
-                        title="Partner Terbaru" />
-                </a>
-                <!-- Partner Aktif (Sobat Konveksi) -->
-                <a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
-                    rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
-                    <img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
-                                hover:scale-110 transition-transform duration-200 cursor-pointer"
-                        title="Partner Aktif" />
-                </a>
+                                </div><!-- end slider-track -->
+                            </div><!-- end slider-viewport -->
 
-                <!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
-                <div class="relative group">
-                    <img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
-                                hover:scale-110 hover:shadow-lg transition-all duration-300" />
-                </div>
-                <div class="relative group">
-                    <img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
-                                hover:scale-110 hover:shadow-lg transition-all duration-300" />
-                </div>
-                <div class="relative group">
-                    <img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
-                                hover:scale-110 hover:shadow-lg transition-all duration-300" />
-                </div>
-                <div class="relative group">
-                    <img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
-                                hover:scale-110 hover:shadow-lg transition-all duration-300" />
-                </div>
-                <div class="relative group">
-                    <img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
-                                hover:scale-110 hover:shadow-lg transition-all duration-300" />
-                </div>
-                <div class="relative group">
-                    <img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
-                                hover:scale-110 hover:shadow-lg transition-all duration-300" />
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Divisi Kepengurusan HMIF Section -->
-    <section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
-        <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
-            <!-- Header -->
-            <div class="mb-12 md:mb-16 max-w-3xl">
-                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
-                    Divisi Kepengurusan HMIF
-                </h2>
-                <p class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
-                    Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai
-                    bidang strategis.
-                </p>
-            </div>
-
-            <!-- Grid Card Container -->
-            <div
-                class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
-                <!-- Bidang 1 -->
-                <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                    <span
-                        class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
-                        Bidang 1
-                    </span>
-                    <h3
-                        class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
-                        Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
-                    </h3>
-                    <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
-                        Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
-                        kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
-                        workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
-                        tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan
-                        menjaga regenerasi organisasi.
-                    </p>
-                </div>
-
-                <!-- Bidang 2 -->
-                <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                    <span
-                        class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
-                        Bidang 2
-                    </span>
-                    <h3
-                        class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
-                        Media Komunikasi dan Konten Digital
-                    </h3>
-                    <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
-                        Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
-                        perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
-                        kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
-                        identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.
-                    </p>
-                </div>
-
-                <!-- Bidang 3 -->
-                <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                    <span
-                        class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
-                        Bidang 3
-                    </span>
-                    <h3
-                        class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
-                        Inovasi dan Kompetisi Teknologi
-                    </h3>
-                    <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
-                        Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
-                        coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
-                        Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
-                        bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website
-                        dan dashboard untuk mendukung ekosistem inovasi HMIF.
-                    </p>
-                </div>
-
-                <!-- Bidang 4 -->
-                <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                    <span
-                        class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
-                        Bidang 4
-                    </span>
-                    <h3
-                        class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
-                        Pengembangan Organisasi
-                    </h3>
-                    <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
-                        Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
-                        pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
-                        mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
-                        kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur
-                        dan efisien.
-                    </p>
-                </div>
-
-                <!-- Bidang 5 -->
-                <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                    <span
-                        class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
-                        Bidang 5
-                    </span>
-                    <h3
-                        class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
-                        Sosial Masyarakat
-                    </h3>
-                    <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
-                        Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
-                        berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
-                        meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
-                        dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.
-                    </p>
-                </div>
-
-                <!-- Bidang 6 -->
-                <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                    <span
-                        class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
-                        Bidang 6
-                    </span>
-                    <h3
-                        class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
-                        Kewirausahaan dan Kemitraan
-                    </h3>
-                    <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
-                        Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
-                        dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
-                        kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
-                        pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan
-                        profesional.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Kegiatan Unggulan Section -->
-    <section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
-        <div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
-            <!-- Header -->
-            <div class="mb-12">
-                <h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
-                    Kegiatan Unggulan
-                </h2>
-                <p class="text-sm text-gray-500 mt-2 font-medium">
-                    Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
-                </p>
-            </div>
-
-            <!-- Slider Container with Arrows -->
-            <div class="relative flex items-center">
-                <!-- Left Arrow Button -->
-                <button id="slider-prev"
-                    class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
-                    aria-label="Sebelumnya">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                        stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-                    </svg>
-                </button>
-
-                <!-- Viewport / Overflow Wrapper -->
-                <div class="overflow-hidden w-full" id="slider-viewport">
-                    <!-- Track holds all cards in a single row -->
-                    <div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
-
-                        <!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
-                        <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
-                            <div
-                                class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                <img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
-                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                            </div>
-                            <div class="flex items-start gap-4 mt-6">
-                                <div
-                                    class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
-                                    <span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
-                                    <span
-                                        class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
-                                </div>
-                                <div class="space-y-1">
-                                    <h3
-                                        class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
-                                        Silaturahmi Keluarga Besar Informatika</h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
-                                        seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
-                                </div>
-                            </div>
+                            <!-- Right Arrow Button -->
+                            <button id="slider-next"
+                                class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Berikutnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </button>
                         </div>
 
-                        <!-- Card 2 Gemastik -->
-                        <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                        <!-- Dot Indicators -->
+                        <div id="slider-dots" class="flex justify-center gap-2 mt-10">
+                            <button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
+                                data-index="0" aria-label="Slide 1"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="1" aria-label="Slide 2"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="2" aria-label="Slide 3"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="3" aria-label="Slide 4"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="4" aria-label="Slide 5"></button>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Study Club Section -->
+                <section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
+                    <div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full">
+                        <!-- Centered Header -->
+                        <div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
+                            <h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
+                                STUDY CLUB
+                            </h2>
+                            <div class="w-16 h-1 bg-hmif-secondary mt-3 rounded-full"></div>
+                        </div>
+
+                        <!-- Cards Grid -->
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                            <!-- CP Card -->
                             <div
-                                class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                <img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
-                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                            </div>
-                            <div class="flex items-start gap-4 mt-6">
-                                <div
-                                    class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
-                                    <span class="text-lg font-extrabold text-hmif-primary leading-none">1</span>
-                                    <span
-                                        class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Jul</span>
+                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608]">
+                                    <!-- Brackets Icon -->
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                                        stroke="currentColor" class="w-8 h-8">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                                    </svg>
                                 </div>
-                                <div class="space-y-1">
-                                    <h3
-                                        class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
-                                        GEMASTIK</h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. 
-                                        Wadah bagi mahasiswa Informatika UNTAN untuk unjuk 
-                                        gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX.
+                                <div class="space-y-3">
+                                    <h3 class="text-lg font-bold text-hmif-primary">
+                                        ARISE
+                                    </h3>
+                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                        Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang
+                                        mengikuti kompetisi pemrograman di berbagai level.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <!-- Data Mining Card -->
+                            <div
+                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608]">
+                                    <!-- Shield Icon -->
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                                        stroke="currentColor" class="w-8 h-8">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                                    </svg>
+                                </div>
+                                <div class="space-y-3">
+                                    <h3 class="text-lg font-bold text-hmif-primary">
+                                        MINERVA
+                                    </h3>
+                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                        Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
+                                        algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model
+                                        prediktif untuk menghasilkan <em>insight</em> yang bermakna.
+                                    </p>
+                                </div>
+                            </div>
+                            <!-- Software Development Card -->
+                            <div
+                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608]">
+                                    <!-- Layout Dashboard Icon -->
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                                        stroke="currentColor" class="w-8 h-8">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
+                                    </svg>
+                                </div>
+                                <div class="space-y-3">
+                                    <h3 class="text-lg font-bold text-hmif-primary">
+                                        Software Development (Soon)
+                                    </h3>
+                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                        Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang
+                                        <em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
+                                        mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
                                     </p>
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </section>
 
-                        <!-- Card 3 17 agustus -->
-                        <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
-                            <div
-                                class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                <img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
-                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                            </div>
-                            <div class="flex items-start gap-4 mt-6">
-                                <div
-                                    class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
-                                    <span class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
-                                    <span
-                                        class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
+                <!-- Galeri Keseruan Section -->
+                <section id="galeri" class="bg-white py-20 lg:py-24">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
+
+                        <!-- Header -->
+                        <div class="text-center mb-12">
+                            <h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
+                                Galeri Keseruan
+                            </h2>
+                        </div>
+
+                        <!-- Slider Wrapper -->
+                        <div class="relative">
+
+                            <!-- Left Arrow Button -->
+                            <button id="galeri-prev" style="top: 50%; transform: translateY(-50%);"
+                                class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Sebelumnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                                </svg>
+                            </button>
+
+                            <!-- Viewport: overflow-hidden agar slide lain tidak terlihat -->
+                            <div id="galeri-viewport" class="overflow-hidden rounded-2xl">
+
+                                <!-- Track: semua slide berjejer horizontal -->
+                                <div id="galeri-track" class="flex transition-transform duration-700 ease-in-out">
+
+                                    <!-- ====== Slide 1 ====== -->
+                                    <div class="flex-shrink-0 w-full">
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
+
+                                            <!-- Foto besar kiri (span 2 baris) -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 1 -->
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg" alt="Gemastik"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 2 -->
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
+                                                target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto lebar kanan bawah (span 2 kolom) -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                        </div>
+                                    </div>
+
+                                    <!-- ====== Slide 2 ====== -->
+                                    <div class="flex-shrink-0 w-full">
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
+
+                                            <!-- Foto besar kiri -->
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                                class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
+                                                    alt="Ulang Tahun Informatika"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 1 -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 2 -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC03316.jpg"
+                                                    alt="Silaturahmi Keluarga Besar Informatika"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto lebar kanan bawah -->
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
+                                                target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                        </div>
+                                    </div>
+
+                                    <!-- ====== Slide 3 ====== -->
+                                    <div class="flex-shrink-0 w-full">
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
+
+                                            <!-- Foto besar kiri -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 1 -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 2 -->
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
+                                                target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                            <!-- Foto lebar kanan bawah -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
+                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+
+                                        </div>
+                                    </div>
+
+                                </div><!-- end galeri-track -->
+                            </div><!-- end galeri-viewport -->
+
+                            <!-- Right Arrow Button -->
+                            <button id="galeri-next" style="top: 50%; transform: translateY(-50%);"
+                                class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Berikutnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </button>
+
+                        </div><!-- end slider wrapper -->
+
+                        <!-- Dot Indicators -->
+                        <div id="galeri-dots" class="flex justify-center gap-2 mt-8">
+                            <button class="galeri-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
+                                data-index="0" aria-label="Slide 1"></button>
+                            <button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="1" aria-label="Slide 2"></button>
+                            <button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="2" aria-label="Slide 3"></button>
+                        </div>
+
+                    </div>
+                </section>
+
+                <!-- CTA Section -->
+                <section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
+                        <div
+                            class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
+
+                            <div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
+                            <div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl"></div>
+                            <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
+
+                            <div class="relative z-10">
+                                <div class="mx-auto max-w-4xl text-center">
+                                    <h2 class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
+                                        Ada yang Ingin Ditanyakan Seputar HMIF?
+                                    </h2>
+
+                                    <p
+                                        class="mx-auto mt-4 max-w-2xl text-xs sm:text-sm lg:text-[15px] leading-relaxed text-white/72">
+                                        Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan
+                                        menciptakan dampak nyata.
+                                    </p>
+
+                                    <div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
+                                        <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                            class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
+                                            Hubungi Kami
+                                        </a>
+
+                                        <div class="flex items-center justify-center gap-3">
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                                class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
+                                                aria-label="Instagram HMIF">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                                                    class="h-4.5 w-4.5">
+                                                    <path
+                                                        d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
+                                                </svg>
+                                            </a>
+
+                                            <a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
+                                                class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
+                                                aria-label="YouTube HMIF">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                                                    class="h-4.5 w-4.5">
+                                                    <path
+                                                        d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="space-y-1">
-                                    <h3
-                                        class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
-                                        Perayaan 17 Agustus</h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
-                                        Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
+
+                                <div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
+                                    <div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
+                                        <div class="text-center md:px-4">
+                                            <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
+                                                Sekretariat
+                                            </p>
+                                            <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
+                                                Gedung Fakultas Teknik Lt. 2<br>
+                                                Jl. Prof. Dr. H. Hadari Nawawi
+                                            </p>
+                                        </div>
+
+                                        <div class="text-center md:px-4 md:border-x md:border-white/10">
+                                            <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
+                                                Jam Operasional
+                                            </p>
+                                            <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
+                                                Senin - Jumat<br>
+                                                08:00 - 17:00 WIB
+                                            </p>
+                                        </div>
+
+                                        <div class="text-center md:px-4">
+                                            <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
+                                                Media Sosial
+                                            </p>
+                                            <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
+                                                @hmif.untan<br>
+                                                YouTube: HMIF UNTAN TV
+                                            </p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-
-                        <!-- Card 3 Bootcamp -->
-                        <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
-                            <div
-                                class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                <img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
-                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                            </div>
-                            <div class="flex items-start gap-4 mt-6">
-                                <div
-                                    class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
-                                    <span class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
-                                    <span
-                                        class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
-                                </div>
-                                <div class="space-y-1">
-                                    <h3
-                                        class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
-                                        Bootcamp HMIF</h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
-                                        pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
-                                        industri.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Card 5 UPC 2025 -->
-                        <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
-                            <div
-                                class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                <img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
-                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                            </div>
-                            <div class="flex items-start gap-4 mt-6">
-                                <div
-                                    class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
-                                    <span class="text-lg font-extrabold text-hmif-primary leading-none">13</span>
-                                    <span
-                                        class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</span>
-                                </div>
-                                <div class="space-y-1">
-                                    <h3
-                                        class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
-                                        UPC</h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
-                                        mengasah skill coding mahasiswa Informatika.</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Card 6 Informers -->
-                        <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
-                            <div
-                                class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                <img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
-                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                            </div>
-                            <div class="flex items-start gap-4 mt-6">
-                                <div
-                                    class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
-                                    <span class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
-                                    <span
-                                        class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
-                                </div>
-                                <div class="space-y-1">
-                                    <h3
-                                        class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
-                                        INFORMERS</h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
-                                        Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
-                                        Informatika.</p>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div><!-- end slider-track -->
-                </div><!-- end slider-viewport -->
-
-                <!-- Right Arrow Button -->
-                <button id="slider-next"
-                    class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
-                    aria-label="Berikutnya">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                        stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                    </svg>
-                </button>
-            </div>
-
-            <!-- Dot Indicators -->
-            <div id="slider-dots" class="flex justify-center gap-2 mt-10">
-                <button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
-                    data-index="0" aria-label="Slide 1"></button>
-                <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
-                    data-index="1" aria-label="Slide 2"></button>
-                <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
-                    data-index="2" aria-label="Slide 3"></button>
-                <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
-                    data-index="3" aria-label="Slide 4"></button>
-                <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
-                    data-index="4" aria-label="Slide 5"></button>
+                    </div>
+                </section>
+                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
             </div>
         </div>
-    </section>
+    </main>
 
-    <!-- Study Club Section -->
-    <section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
-        <div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full">
-            <!-- Centered Header -->
-            <div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
-                <h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
-                    STUDY CLUB
-                </h2>
-                <div class="w-16 h-1 bg-hmif-secondary mt-3 rounded-full"></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>
 
-            <!-- Cards Grid -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- CP Card -->
-                <div
-                    class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
-                    <div class="text-[#b48608]">
-                        <!-- Brackets Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                            stroke="currentColor" class="w-8 h-8">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
-                        </svg>
-                    </div>
-                    <div class="space-y-3">
-                        <h3 class="text-lg font-bold text-hmif-primary">
-                            ARISE
-                        </h3>
-                        <p class="text-sm text-gray-500 leading-relaxed font-light">
-                            Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang
-                            mengikuti kompetisi pemrograman di berbagai level.
-                        </p>
-                    </div>
-                </div>
-
-                <!-- Data Mining Card -->
-                <div
-                    class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
-                    <div class="text-[#b48608]">
-                        <!-- Shield Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                            stroke="currentColor" class="w-8 h-8">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
-                        </svg>
-                    </div>
-                    <div class="space-y-3">
-                        <h3 class="text-lg font-bold text-hmif-primary">
-                            MINERVA
-                        </h3>
-                        <p class="text-sm text-gray-500 leading-relaxed font-light">
-                            Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
-                            algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model
-                            prediktif untuk menghasilkan <em>insight</em> yang bermakna.
-                        </p>
-                    </div>
-                </div>
-                <!-- Software Development Card -->
-                <div
-                    class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
-                    <div class="text-[#b48608]">
-                        <!-- Layout Dashboard Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                            stroke="currentColor" class="w-8 h-8">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
-                        </svg>
-                    </div>
-                    <div class="space-y-3">
-                        <h3 class="text-lg font-bold text-hmif-primary">
-                            Software Development (Soon)
-                        </h3>
-                        <p class="text-sm text-gray-500 leading-relaxed font-light">
-                            Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang
-                            <em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
-                            mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Galeri Keseruan Section -->
-    <section id="galeri" class="bg-white py-20 lg:py-24">
-        <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
-
-            <!-- Header -->
-            <div class="text-center mb-12">
-                <h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
-                    Galeri Keseruan
-                </h2>
-            </div>
-
-            <!-- Slider Wrapper -->
-            <div class="relative">
-
-                <!-- Left Arrow Button -->
-                <button id="galeri-prev" style="top: 50%; transform: translateY(-50%);"
-                    class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
-                    aria-label="Sebelumnya">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                        stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-                    </svg>
-                </button>
-
-                <!-- Viewport: overflow-hidden agar slide lain tidak terlihat -->
-                <div id="galeri-viewport" class="overflow-hidden rounded-2xl">
-
-                    <!-- Track: semua slide berjejer horizontal -->
-                    <div id="galeri-track" class="flex transition-transform duration-700 ease-in-out">
-
-                        <!-- ====== Slide 1 ====== -->
-                        <div class="flex-shrink-0 w-full">
-                            <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
-
-                                <!-- Foto besar kiri (span 2 baris) -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC00636.JPG" alt="UPC V"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto kecil kanan atas 1 -->
-                                <a href="https://instagram.com/hmif_ftuntan" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\Copy of DSC09492.JPG" alt="Gemastik"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto kecil kanan atas 2 -->
-                                <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
-                                    target="_blank" rel="noopener noreferrer"
-                                    class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\IMG_0204.JPG" alt="INFORMERS"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto lebar kanan bawah (span 2 kolom) -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC00456.JPG" alt="UPC V"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                            </div>
-                        </div>
-
-                        <!-- ====== Slide 2 ====== -->
-                        <div class="flex-shrink-0 w-full">
-                            <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
-
-                                <!-- Foto besar kiri -->
-                                <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
-                                    class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSCF8922.JPG"
-                                        alt="Ulang Tahun Informatika"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto kecil kanan atas 1 -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC00091.JPG" alt="UPC V"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto kecil kanan atas 2 -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
-                                    class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC03316.JPG"
-                                        alt="Silaturahmi Keluarga Besar Informatika"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto lebar kanan bawah -->
-                                <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
-                                    target="_blank" rel="noopener noreferrer"
-                                    class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\IMG_5705.JPG" alt="INFORMERS"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                            </div>
-                        </div>
-
-                        <!-- ====== Slide 3 ====== -->
-                        <div class="flex-shrink-0 w-full">
-                            <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
-
-                                <!-- Foto besar kiri -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC00252.JPG" alt="UPC V"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto kecil kanan atas 1 -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC00519.JPG" alt="UPC V"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto kecil kanan atas 2 -->
-                                <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
-                                    target="_blank" rel="noopener noreferrer"
-                                    class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\IMG_0030.JPG" alt="INFORMERS"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                                <!-- Foto lebar kanan bawah -->
-                                <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                    <img src=".\assets\images\galeri-keseruan\DSC01002.JPG" alt="UPC V"
-                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                </a>
-
-                            </div>
-                        </div>
-
-                    </div><!-- end galeri-track -->
-                </div><!-- end galeri-viewport -->
-
-                <!-- Right Arrow Button -->
-                <button id="galeri-next" style="top: 50%; transform: translateY(-50%);"
-                    class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
-                    aria-label="Berikutnya">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                        stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                    </svg>
-                </button>
-
-            </div><!-- end slider wrapper -->
-
-            <!-- Dot Indicators -->
-            <div id="galeri-dots" class="flex justify-center gap-2 mt-8">
-                <button class="galeri-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
-                    data-index="0" aria-label="Slide 1"></button>
-                <button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
-                    data-index="1" aria-label="Slide 2"></button>
-                <button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
-                    data-index="2" aria-label="Slide 3"></button>
-            </div>
-
-        </div>
-    </section>
-
-    <!-- CTA Section -->
-    <section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
-        <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
-            <div
-                class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
-
-                <div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
-                <div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl"></div>
-                <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
-
-                <div class="relative z-10">
-                    <div class="mx-auto max-w-4xl text-center">
-                        <h2 class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
-                            Ada yang Ingin Ditanyakan Seputar HMIF?
-                        </h2>
-
-                        <p
-                            class="mx-auto mt-4 max-w-2xl text-xs sm:text-sm lg:text-[15px] leading-relaxed text-white/72">
-                            Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan
-                            menciptakan dampak nyata.
-                        </p>
-
-                        <div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
-                            <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
-                                class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
-                                Hubungi Kami
-                            </a>
-
-                            <div class="flex items-center justify-center gap-3">
-                                <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
-                                    class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
-                                    aria-label="Instagram HMIF">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                                        class="h-4.5 w-4.5">
-                                        <path
-                                            d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
-                                    </svg>
-                                </a>
-
-                                <a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
-                                    class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
-                                    aria-label="YouTube HMIF">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                                        class="h-4.5 w-4.5">
-                                        <path
-                                            d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
-                                    </svg>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
-                        <div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
-                            <div class="text-center md:px-4">
-                                <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
-                                    Sekretariat
-                                </p>
-                                <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
-                                    Gedung Fakultas Teknik Lt. 2<br>
-                                    Jl. Prof. Dr. H. Hadari Nawawi
-                                </p>
-                            </div>
-
-                            <div class="text-center md:px-4 md:border-x md:border-white/10">
-                                <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
-                                    Jam Operasional
-                                </p>
-                                <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
-                                    Senin - Jumat<br>
-                                    08:00 - 17:00 WIB
-                                </p>
-                            </div>
-
-                            <div class="text-center md:px-4">
-                                <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
-                                    Media Sosial
-                                </p>
-                                <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
-                                    @hmif.untan<br>
-                                    YouTube: HMIF UNTAN TV
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="bg-hmif-primary text-white pt-14 relative overflow-hidden">
-        <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 text-center relative z-10">
-            <p class="text-[10px] font-bold tracking-widest uppercase text-slate-300">FOLLOW US</p>
-
-            <div class="mt-4 flex items-center justify-center gap-4">
-                <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-hmif-secondary transition-colors" aria-label="Instagram">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-                        <path
-                            d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
-                    </svg>
-                </a>
-                <a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
-                    class="text-white hover:text-hmif-secondary transition-colors" aria-label="YouTube">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-                        <path
-                            d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
-                    </svg>
-                </a>
-                <a href="#" class="text-white hover:text-hmif-secondary transition-colors" aria-label="Facebook">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-                        <path
-                            d="M13.5 21v-7h2.3l.45-3h-2.75V9.18c0-.85.26-1.43 1.48-1.43h1.38V5.03A18.72 18.72 0 0 0 14.37 5C11.92 5 10.5 6.44 10.5 9.08V11H8v3h2.5v7h3Z" />
-                    </svg>
-                </a>
-                <a href="#" class="text-white hover:text-hmif-secondary transition-colors" aria-label="LinkedIn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-                        <path
-                            d="M6.94 8.5A1.97 1.97 0 1 1 3 8.5a1.97 1.97 0 0 1 3.94 0ZM3.45 10h3v10h-3V10Zm5.08 0h2.87v1.37h.04c.4-.74 1.38-1.52 2.85-1.52 3.05 0 3.62 1.96 3.62 4.5V20h-3v-4.8c0-1.14-.02-2.6-1.62-2.6s-1.86 1.2-1.86 2.5V20h-2.9V10Z" />
-                    </svg>
-                </a>
-                <a href="#" class="text-white hover:text-hmif-secondary transition-colors" aria-label="TikTok">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-                        <path
-                            d="M14.5 3h2.6c.2 1.5 1.2 2.86 2.72 3.43v2.53a7.03 7.03 0 0 1-2.8-.84v5.4A5.52 5.52 0 1 1 11.5 8h.08v2.63a2.95 2.95 0 1 0 2.92 2.95V3Z" />
-                    </svg>
-                </a>
-            </div>
-
-            <div class="mt-7 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
+            <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"
-                    alt="Logo UNTAN" class="h-14 sm:h-16" />
-                <div class="sm:border-l sm:border-white/30 sm:pl-5 pt-3 sm:pt-0">
-                    <p class="text-2xl sm:text-3xl font-bold tracking-widest uppercase">INFORMATIKA</p>
-                    <p class="text-[10px] sm:text-xs tracking-[0.22em] uppercase text-slate-200 mt-1">UNIVERSITAS
-                        TANJUNGPURA</p>
+                    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="mt-6 text-xs sm:text-sm text-slate-200 leading-relaxed">
-                <p>Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,</p>
+            <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="mt-3 mb-10 text-[11px] text-slate-300 flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
+                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="opacity-50">|</span>
+                <span class="hidden sm:inline opacity-50">|</span>
                 <span>P: +62 851-7165-5161</span>
-                <span class="opacity-50">|</span>
+                <span class="hidden sm:inline opacity-50">|</span>
                 <span>F: +62(561) 739637</span>
-                <span class="opacity-50">|</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 pointer-events-none">
-            <img src="https://informatika.untan.ac.id/logo/footer.png" alt="Footer Illustration"
-                class="w-full h-auto object-cover object-bottom" />
+        <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>
 
-    <!-- JavaScript eksternal (logika interaksi dipisah dari HTML) -->
-    <script src="./assets/js/main.js"></script>
-</body>
+    <script>
+        (function () {
+            const menuItems = document.querySelectorAll('[data-menu]');
+            const megaOverlay = document.getElementById('mega-overlay');
 
-</html> 
\ No newline at end of file
+            let activeMenu = null;
+
+            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');
+
+                    btn.classList.toggle('active', isActive);
+                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
+                });
+            }
+
+            function closeMenus() {
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
+
+                megaOverlay.classList.remove('active');
+                setButtonState(null);
+                activeMenu = null;
+            }
+
+            function openMenu(menuId) {
+                const targetPanel = document.getElementById(menuMap[menuId]);
+                if (!targetPanel) return;
+
+                Object.values(menuMap).forEach(panelId => {
+                    const panel = document.getElementById(panelId);
+                    if (panel) panel.classList.remove('active');
+                });
+
+                targetPanel.classList.add('active');
+                megaOverlay.classList.add('active');
+                setButtonState(menuId);
+                activeMenu = menuId;
+            }
+
+            menuItems.forEach(item => {
+                const menuId = item.getAttribute('data-menu');
+                const button = item.querySelector('.nav-menu-btn');
+
+                button.setAttribute('aria-haspopup', 'true');
+                button.setAttribute('aria-expanded', 'false');
+
+                button.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (activeMenu === menuId) {
+                        closeMenus();
+                    } else {
+                        openMenu(menuId);
+                    }
+                });
+            });
+
+            megaOverlay.addEventListener('click', closeMenus);
+
+            document.addEventListener('click', (e) => {
+                const clickedInsideNav = e.target.closest('#main-nav');
+                const clickedInsidePanel = e.target.closest('.mega-panel');
+
+                if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
+                    closeMenus();
+                }
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && activeMenu) {
+                    closeMenus();
+                }
+            });
+        })();
+    </script>
+
+<script>
+    (function() {
+        const mobileBtn     = document.getElementById('mobile-menu-button');
+        const mobileMenu    = document.getElementById('mobile-menu');
+        const closeMobileBtn= document.getElementById('close-mobile-menu');
+        if (mobileBtn && mobileMenu) {
+            mobileBtn.addEventListener('click', function() {
+                const isOpen = !mobileMenu.classList.contains('-translate-x-full');
+                mobileMenu.classList.toggle('-translate-x-full');
+                mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+            });
+        }
+        if (closeMobileBtn && mobileMenu) {
+            closeMobileBtn.addEventListener('click', function() {
+                mobileMenu.classList.add('-translate-x-full');
+                if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
+            });
+        }
+    })();
+</script>
+
+<script src="../../assets/global/localization.js"></script>
+</body>
+</html>
\ No newline at end of file
