From 243541d1e47a54f54f26d61fd0dc809f74c84a92 Mon Sep 17 00:00:00 2001
From: powji17 <fauzii2552@gmail.com>
Date: Thu, 4 Jun 2026 18:32:30 +0700
Subject: [PATCH 1/2] feat(lima-em): migrasi seluruh konten section dan script
 ke development kit

---
 groups/LimaEm/index.html | 3330 +++++++++++++++++++++++++++-----------
 groups/LimaEm/style.css  |   53 +-
 2 files changed, 2407 insertions(+), 976 deletions(-)
diff --git a/groups/LimaEm/index.html b/groups/LimaEm/index.html
index 50f73ba..4454fa0 100644
--- a/groups/LimaEm/index.html
+++ b/groups/LimaEm/index.html
@@ -1,1050 +1,2440 @@
 ﻿<!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>
+        // =============================================================================
+        // main.js — Logika Interaksi Halaman HMIF
+        //
+        // Struktur:
+        //   1. Galeri Keseruan    — Slider bento grid foto keseruan
+        //   2. Kegiatan Unggulan  — Slider kartu kegiatan tahunan
+        // =============================================================================
 
-</html> 
\ No newline at end of file
+        // =============================================================================
+        // 1. GALERI KESERUAN — SLIDER
+        // Slider bento grid foto keseruan dengan auto-slide, navigasi manual,
+        // dot indicator, pause on hover, dan recalculate on resize.
+        // =============================================================================
+
+        (function () {
+            var AUTO_DELAY_MS = 4000; // 4 detik per slide
+            var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
+
+            var track   = document.getElementById('galeri-track');
+            var viewport = document.getElementById('galeri-viewport');
+            var prevBtn  = document.getElementById('galeri-prev');
+            var nextBtn  = document.getElementById('galeri-next');
+            var dotsContainer = document.getElementById('galeri-dots');
+
+            if (!track || !viewport || !prevBtn || !nextBtn) return;
+
+            var currentSlide  = 0;
+            var autoSlideTimer;
+            var originalHTML = track.innerHTML;
+
+            // collect all anchor elements (images) in the original order
+            var originalAnchors = Array.from((function () {
+                var tmp = document.createElement('div'); tmp.innerHTML = originalHTML; return tmp;
+            })().querySelectorAll('a'));
+
+            // builds slides where each slide contains a single image (for small screens)
+            function buildSingleImageSlides() {
+                var slides = originalAnchors.map(function (a) {
+                    // clone anchor and remove mobile-hidden class so it becomes visible in single-image slides
+                    try {
+                        var clone = a.cloneNode(true);
+                        if (clone.classList) clone.classList.remove('hidden');
+                        // also remove inline style display:none if present
+                        if (clone.style) clone.style.display = '';
+                        return '<div class="flex-shrink-0 w-full">' +
+                            '<div class="aspect-video w-full overflow-hidden rounded-xl">' +
+                            clone.outerHTML +
+                            '</div></div>';
+                    } catch (e) {
+                        return '';
+                    }
+                });
+                return slides.join('');
+            }
+
+            function getTotalSlides() {
+                return track.children.length;
+            }
+
+            // render dot buttons dynamically according to total slides
+            function renderDots(n) {
+                if (!dotsContainer) return;
+                dotsContainer.innerHTML = '';
+                for (var i = 0; i < n; i++) {
+                    var btn = document.createElement('button');
+                    btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
+                    btn.setAttribute('data-index', String(i));
+                    btn.setAttribute('aria-label', 'Slide ' + (i+1));
+                    (function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
+                    dotsContainer.appendChild(btn);
+                }
+            }
+
+            function updateDots(activeIndex) {
+                if (!dotsContainer) return;
+                var dots = dotsContainer.querySelectorAll('button');
+                dots.forEach(function (dot, i) {
+                    if (i === activeIndex) {
+                        dot.classList.remove('bg-gray-200', 'w-2.5');
+                        dot.classList.add('bg-hmif-primary', 'w-6');
+                    } else {
+                        dot.classList.remove('bg-hmif-primary', 'w-6');
+                        dot.classList.add('bg-gray-200', 'w-2.5');
+                    }
+                });
+            }
+
+            function rebuildTrackForViewport() {
+                var isMobile = window.innerWidth < 768; // md breakpoint
+                if (isMobile) {
+                    track.innerHTML = buildSingleImageSlides();
+                } else {
+                    track.innerHTML = originalHTML;
+                }
+                renderDots(getTotalSlides());
+            }
+
+            // Pindah ke slide dengan index tertentu, loop otomatis di kedua arah
+            function goToSlide(index) {
+                var total = getTotalSlides();
+                if (total === 0) return;
+                currentSlide = ((index % total) + total) % total;
+                track.style.transform = 'translateX(-' + (currentSlide * viewport.offsetWidth) + 'px)';
+                updateDots(currentSlide);
+            }
+
+            // Mulai atau restart timer auto-slide
+            function startAutoSlide() {
+                clearInterval(autoSlideTimer);
+                autoSlideTimer = setInterval(function () { goToSlide(currentSlide + 1); }, AUTO_DELAY_MS);
+            }
+
+            prevBtn.addEventListener('click', function () { goToSlide(currentSlide - 1); startAutoSlide(); });
+            nextBtn.addEventListener('click', function () { goToSlide(currentSlide + 1); startAutoSlide(); });
+
+            // Pause saat kursor di atas galeri
+            viewport.addEventListener('mouseenter', function () { clearInterval(autoSlideTimer); });
+            viewport.addEventListener('mouseleave', startAutoSlide);
+
+            // Recalculate posisi slide saat browser di-resize
+            window.addEventListener('resize', function () { rebuildTrackForViewport(); goToSlide(currentSlide); });
+
+            // initial build
+            rebuildTrackForViewport();
+            goToSlide(0);
+            startAutoSlide();
+        })();
+
+
+        // =============================================================================
+        // 2. KEGIATAN UNGGULAN — SLIDER
+        // Slider kartu kegiatan tahunan yang menampilkan 2 kartu sekaligus pada desktop,
+        // dan 1 kartu pada layar sempit. Logika pergantian disesuaikan agar pergeseran
+        // selalu berpindah tepat satu item, memperhitungkan gap antar-kartu.
+        // =============================================================================
+
+        (function () {
+            var TOTAL_CARDS   = 6;
+            var AUTO_DELAY_MS = 2000;
+            var GAP_PX        = 32; // gap-8 = 2rem = 32px (tailwind)
+
+            var track    = document.getElementById('slider-track');
+            var viewport = document.getElementById('slider-viewport');
+            var prevBtn  = document.getElementById('slider-prev');
+            var nextBtn  = document.getElementById('slider-next');
+            var dotsContainer = document.getElementById('slider-dots');
+
+            if (!track || !viewport || !prevBtn || !nextBtn) return;
+
+            var current = 0;
+            var autoTimer;
+
+            function getCardsVisible() {
+                return window.innerWidth >= 768 ? 2 : 1; // md breakpoint
+            }
+
+            // lebar kartu yang terlihat (tidak termasuk gap)
+            function getCardWidth() {
+                var visible = getCardsVisible();
+                if (visible === 1) return viewport.offsetWidth;
+                return (viewport.offsetWidth - GAP_PX) / visible;
+            }
+
+            function getMaxIndex() {
+                return Math.max(0, TOTAL_CARDS - getCardsVisible());
+            }
+
+            // Pindah ke posisi slide tertentu; perhitungan berbeda untuk 1 atau 2 kartu
+            function goTo(index) {
+                var maxIndex = getMaxIndex();
+                current = ((index % (maxIndex + 1)) + (maxIndex + 1)) % (maxIndex + 1);
+
+                if (getCardsVisible() === 1) {
+                    // langkah pergeseran = viewport width + gap
+                    var step = viewport.offsetWidth + GAP_PX;
+                    track.style.transform = 'translateX(-' + (current * step) + 'px)';
+                } else {
+                    var cardW = getCardWidth();
+                    track.style.transform = 'translateX(-' + (current * (cardW + GAP_PX)) + 'px)';
+                }
+
+                updateDots(current);
+            }
+
+            // Render dot indicators dynamically based on total slides
+            function renderSliderDots(n) {
+                if (!dotsContainer) return;
+                dotsContainer.innerHTML = '';
+                for (var i = 0; i < n; i++) {
+                    var btn = document.createElement('button');
+                    btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
+                    btn.setAttribute('data-index', String(i));
+                    btn.setAttribute('aria-label', 'Slide ' + (i+1));
+                    (function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
+                    dotsContainer.appendChild(btn);
+                }
+            }
+
+            function updateDots(activeIndex) {
+                if (!dotsContainer) return;
+                var dots = dotsContainer.querySelectorAll('button');
+                dots.forEach(function (dot, i) {
+                    if (i === activeIndex) {
+                        dot.classList.remove('bg-gray-200', 'w-2.5');
+                        dot.classList.add('bg-hmif-primary', 'w-6');
+                    } else {
+                        dot.classList.remove('bg-hmif-primary', 'w-6');
+                        dot.classList.add('bg-gray-200', 'w-2.5');
+                    }
+                });
+            }
+
+            // Mulai atau restart timer auto-slide
+            function startAuto() {
+                clearInterval(autoTimer);
+                autoTimer = setInterval(function () { goTo(current + 1); }, AUTO_DELAY_MS);
+            }
+
+            prevBtn.addEventListener('click', function () { goTo(current - 1); startAuto(); });
+            nextBtn.addEventListener('click', function () { goTo(current + 1); startAuto(); });
+
+            // initial render of dots according to current viewport
+            renderSliderDots(getMaxIndex() + 1);
+
+            // Pause saat kursor di atas slider
+            viewport.addEventListener('mouseenter', function () { clearInterval(autoTimer); });
+            viewport.addEventListener('mouseleave', startAuto);
+
+            // Recalculate posisi slide and dots saat browser di-resize
+            window.addEventListener('resize', function () { renderSliderDots(getMaxIndex() + 1); goTo(current); });
+
+            goTo(0);
+            startAuto();
+        })();
+    </script>
+
+    <script>
+        (function () {
+            const menuItems = document.querySelectorAll('[data-menu]');
+            const megaOverlay = document.getElementById('mega-overlay');
+
+            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
diff --git a/groups/LimaEm/style.css b/groups/LimaEm/style.css
index c222e72..c31a92b 100644
--- a/groups/LimaEm/style.css
+++ b/groups/LimaEm/style.css
@@ -1,6 +1,47 @@
-/*
- * LimaEm — Group 07 | Kehidupan Mahasiswa & Himpunan (HMIF)
- *
- * CSS utama ada di: assets/css/output.css (Tailwind custom build)
- * File ini tersedia untuk CSS tambahan jika diperlukan.
- */
+:root {
+    --brand-navy: #003150;
+    --brand-yellow: #feb401;
+    --text-main: #1e293b;
+    --text-soft: #64748b;
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+
+.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
+@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+
+.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
+.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
+.footer-logo { height: 28px; width: auto; }
+.footer-ornament { width: 100%; display: block; opacity: .9; }

From 7996ee01863084fc69d5fde0b7b07ba743aefef9 Mon Sep 17 00:00:00 2001
From: powji17 <fauzii2552@gmail.com>
Date: Thu, 4 Jun 2026 20:01:23 +0700
Subject: [PATCH 2/2] feat(lima-em): menambahkan implementasi fitur bilingual
 ID-EN pada konten

---
 assets/global/localization.js | 140 ++++++++++++++++++++++++++++++++++
 groups/LimaEm/index.html      | 109 +++++++++++++-------------
 2 files changed, 194 insertions(+), 55 deletions(-)

diff --git a/assets/global/localization.js b/assets/global/localization.js
index 82d1ca7..15cebf4 100644
--- a/assets/global/localization.js
+++ b/assets/global/localization.js
@@ -569,6 +569,76 @@ const translations = {
         kontrib_guideline_3: "Sertakan fakta dan data yang akurat dan dapat diverifikasi.",
         kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.",
         kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
+
+        grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
+        grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)",
+        grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
+        grp_limaem_hero_btn: "Lihat Struktur Kepengurusan",
+
+        grp_limaem_about_title: "Ruang Tumbuh Bagi Mahasiswa Informatika",
+        grp_limaem_about_p1: "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.",
+        grp_limaem_about_p2: "Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan dan integritas ilmiah.",
+        grp_limaem_about_stat_students: "Mahasiswa Aktif",
+        grp_limaem_about_stat_partners: "MITRA",
+        grp_limaem_about_badge: "Inklusivitas & Kolaborasi",
+ 
+        grp_limaem_partners_title: "Partner dan Kolaborator",
+ 
+        grp_limaem_divisi_title: "Divisi Kepengurusan HMIF",
+        grp_limaem_divisi_desc: "Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai bidang strategis.",
+        grp_limaem_divisi_b1_label: "Bidang 1",
+        grp_limaem_divisi_b1_title: "Pengembangan Sumber Daya Mahasiswa dan Kaderisasi",
+        grp_limaem_divisi_b1_desc: "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.",
+        grp_limaem_divisi_b2_label: "Bidang 2",
+        grp_limaem_divisi_b2_title: "Media Komunikasi dan Konten Digital",
+        grp_limaem_divisi_b2_desc: "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.",
+        grp_limaem_divisi_b3_label: "Bidang 3",
+        grp_limaem_divisi_b3_title: "Inovasi dan Kompetisi Teknologi",
+        grp_limaem_divisi_b3_desc: "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.",
+        grp_limaem_divisi_b4_label: "Bidang 4",
+        grp_limaem_divisi_b4_title: "Pengembangan Organisasi",
+        grp_limaem_divisi_b4_desc: "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.",
+        grp_limaem_divisi_b5_label: "Bidang 5",
+        grp_limaem_divisi_b5_title: "Sosial Masyarakat",
+        grp_limaem_divisi_b5_desc: "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.",
+        grp_limaem_divisi_b6_label: "Bidang 6",
+        grp_limaem_divisi_b6_title: "Kewirausahaan dan Kemitraan",
+        grp_limaem_divisi_b6_desc: "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.",
+ 
+        grp_limaem_kegiatan_title: "Kegiatan Unggulan",
+        grp_limaem_kegiatan_subtitle: "Kegiatan tahunan yang menjadi ikon Informatika UNTAN.",
+        grp_limaem_kegiatan_c1_title: "Silaturahmi Keluarga Besar Informatika",
+        grp_limaem_kegiatan_c1_desc: "Kegiatan buka bersama seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.",
+        grp_limaem_kegiatan_c2_title: "GEMASTIK",
+        grp_limaem_kegiatan_c2_desc: "Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. Wadah bagi mahasiswa Informatika UNTAN untuk unjuk gigi di bidang programming, cyber security, data mining, hingga UI/UX.",
+        grp_limaem_kegiatan_c3_title: "Perayaan 17 Agustus",
+        grp_limaem_kegiatan_c3_desc: "Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik. Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.",
+        grp_limaem_kegiatan_c4_title: "Bootcamp HMIF",
+        grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.",
+        grp_limaem_kegiatan_c5_title: "UPC",
+        grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
+        grp_limaem_kegiatan_c6_title: "INFORMERS",
+        grp_limaem_kegiatan_c6_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
+ 
+        grp_limaem_sc_title: "STUDY CLUB",
+        grp_limaem_sc_arise_title: "ARISE",
+        grp_limaem_sc_arise_desc: "Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang mengikuti kompetisi pemrograman di berbagai level.",
+        grp_limaem_sc_minerva_title: "MINERVA",
+        grp_limaem_sc_minerva_desc: "Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan algoritma Machine Learning, membedah teknik klasifikasi, hingga melatih model prediktif untuk menghasilkan insight yang bermakna.",
+        grp_limaem_sc_sd_title: "Software Development (Segera Hadir)",
+        grp_limaem_sc_sd_desc: "Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang frontend yang interaktif, membangun backend yang tangguh, serta mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.",
+ 
+        grp_limaem_galeri_title: "Galeri Keseruan",
+ 
+        grp_limaem_cta_title: "Ada yang Ingin Ditanyakan Seputar HMIF?",
+        grp_limaem_cta_desc: "Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan menciptakan dampak nyata.",
+        grp_limaem_cta_btn: "Hubungi Kami",
+        grp_limaem_cta_info1_label: "Sekretariat",
+        grp_limaem_cta_info1_val: "Gedung Fakultas Teknik Lt. 2, Jl. Prof. Dr. H. Hadari Nawawi",
+        grp_limaem_cta_info2_label: "Jam Operasional",
+        grp_limaem_cta_info2_val: "Senin - Jumat, 08:00 - 17:00 WIB",
+        grp_limaem_cta_info3_label: "Media Sosial",
+        grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
     },
 
     en: {
@@ -1135,6 +1205,76 @@ const translations = {
         kontrib_guideline_3: "Include accurate and verifiable facts and data.",
         kontrib_guideline_4: "Avoid plagiarism. Work must be original.",
         kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
+
+        grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
+        grp_limaem_hero_title: "Student Life & Student Association (HMIF)",
+        grp_limaem_hero_desc: "Building a collaborative ecosystem where technology meets creativity, shaping the industry leaders of tomorrow.",
+        grp_limaem_hero_btn: "View Organizational Structure",
+
+        grp_limaem_about_title: "A Space to Grow for Informatics Students",
+        grp_limaem_about_p1: "The Informatics Student Association (HMIF) of Tanjungpura University is more than just an organization — it is a home for technology leaders. We believe that formal education is the foundation, but community is the accelerator.",
+        grp_limaem_about_p2: "Through various initiatives, we bridge the gap between academic curriculum and industry needs, while maintaining the spirit of kinship and academic integrity.",
+        grp_limaem_about_stat_students: "Active Students",
+        grp_limaem_about_stat_partners: "PARTNERS",
+        grp_limaem_about_badge: "Inclusivity & Collaboration",
+ 
+        grp_limaem_partners_title: "Partners and Collaborators",
+ 
+        grp_limaem_divisi_title: "HMIF Organizational Divisions",
+        grp_limaem_divisi_desc: "An organizational structure designed for efficiency and capacity building across various strategic fields.",
+        grp_limaem_divisi_b1_label: "Division 1",
+        grp_limaem_divisi_b1_title: "Student Development and Cadre Regeneration",
+        grp_limaem_divisi_b1_desc: "This division organizes structured cadre programs, regular mentoring, and leadership and soft-skill training. Its activities include new member onboarding, leadership workshops, collaborative projects, and community service that fosters social responsibility. The focus is on preparing competent cadres and sustaining organizational regeneration.",
+        grp_limaem_divisi_b2_label: "Division 2",
+        grp_limaem_divisi_b2_title: "Communication Media and Digital Content",
+        grp_limaem_divisi_b2_desc: "This division manages HMIF's communication strategy and content production, including editorial planning, social media management, and event documentation. Its work programs include creating promotional materials, publishing activities, and strengthening digital identity to deliver consistent and engaging organizational information.",
+        grp_limaem_divisi_b3_label: "Division 3",
+        grp_limaem_divisi_b3_title: "Innovation and Technology Competition",
+        grp_limaem_divisi_b3_desc: "This division facilitates competition preparation and technical project development through coaching clinics, project-based bootcamps, and study clubs for Competitive Programming, Software Development, and Data/ML. Activities include internal selection, competitive coaching, and digitalization initiatives such as website and dashboard development to support HMIF's innovation ecosystem.",
+        grp_limaem_divisi_b4_label: "Division 4",
+        grp_limaem_divisi_b4_title: "Organizational Development",
+        grp_limaem_divisi_b4_desc: "This division strengthens internal governance and capabilities through board training, simple SOP drafting, and work process evaluation. Its programs include organizational culture development, improved coordination effectiveness, and professionalism initiatives, making HMIF operations more structured and efficient.",
+        grp_limaem_divisi_b5_label: "Division 5",
+        grp_limaem_divisi_b5_title: "Community Engagement",
+        grp_limaem_divisi_b5_desc: "This division designs and implements impactful community service programs and social actions, including community assistance and humanitarian aid. Activities cover field needs assessment, structured implementation, and impact evaluation to ensure sustainability and tangible benefits for the community.",
+        grp_limaem_divisi_b6_label: "Division 6",
+        grp_limaem_divisi_b6_title: "Entrepreneurship and Partnerships",
+        grp_limaem_divisi_b6_desc: "This division develops organizational business units, designs creative funding schemes, and establishes strategic partnerships to support the sustainability of HMIF programs. Its work units include business opportunity research, partnership proposal development, and sponsorship management to enhance financial independence and professional networking access.",
+ 
+        grp_limaem_kegiatan_title: "Flagship Events",
+        grp_limaem_kegiatan_subtitle: "Annual events that have become icons of Informatics UNTAN.",
+        grp_limaem_kegiatan_c1_title: "Informatics Family Gathering",
+        grp_limaem_kegiatan_c1_desc: "An annual iftar gathering held with the entire Informatics UNTAN family, a tradition maintained every year.",
+        grp_limaem_kegiatan_c2_title: "GEMASTIK",
+        grp_limaem_kegiatan_c2_desc: "A prestigious national-level IT competition held annually by the Ministry. A platform for Informatics UNTAN students to showcase their skills in programming, cyber security, data mining, and UI/UX.",
+        grp_limaem_kegiatan_c3_title: "Independence Day Celebration",
+        grp_limaem_kegiatan_c3_desc: "A celebration of Indonesian Independence Day filled with exciting competitions. A fun event to strengthen nationalism and the sense of kinship among Informatics students.",
+        grp_limaem_kegiatan_c4_title: "HMIF Bootcamp",
+        grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.",
+        grp_limaem_kegiatan_c5_title: "UPC",
+        grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
+        grp_limaem_kegiatan_c6_title: "INFORMERS",
+        grp_limaem_kegiatan_c6_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
+ 
+        grp_limaem_sc_title: "STUDY CLUBS",
+        grp_limaem_sc_arise_title: "ARISE",
+        grp_limaem_sc_arise_desc: "Learn logic and algorithms together, where you can grow and open opportunities to participate in programming competitions at various levels.",
+        grp_limaem_sc_minerva_title: "MINERVA",
+        grp_limaem_sc_minerva_desc: "Uncover hidden potential from mountains of data! Here we explore Machine Learning algorithms, dissect classification techniques, and train predictive models to generate meaningful insights.",
+        grp_limaem_sc_sd_title: "Software Development (Coming Soon)",
+        grp_limaem_sc_sd_desc: "Turn your ideas into real digital products! We will code together — from designing interactive frontends and building robust backends, to integrating various APIs to create modern web applications.",
+ 
+        grp_limaem_galeri_title: "Fun Gallery",
+ 
+        grp_limaem_cta_title: "Have Questions About HMIF?",
+        grp_limaem_cta_desc: "Join HMIF to expand your network, sharpen your skills, and create real impact.",
+        grp_limaem_cta_btn: "Contact Us",
+        grp_limaem_cta_info1_label: "Secretariat",
+        grp_limaem_cta_info1_val: "Engineering Faculty Building, 2nd Floor, Jl. Prof. Dr. H. Hadari Nawawi",
+        grp_limaem_cta_info2_label: "Office Hours",
+        grp_limaem_cta_info2_val: "Monday - Friday, 08:00 - 17:00 WIB",
+        grp_limaem_cta_info3_label: "Social Media",
+        grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
     }
 };
 
diff --git a/groups/LimaEm/index.html b/groups/LimaEm/index.html
index 4454fa0..5cf99c1 100644
--- a/groups/LimaEm/index.html
+++ b/groups/LimaEm/index.html
@@ -1140,7 +1140,7 @@
         </div>
     </div>
 
-<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
+    <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>
@@ -1163,21 +1163,21 @@
 
                             <div class="flex flex-col items-start text-left space-y-6">
 
-                                <div
+                                <div data-i18n="grp_limaem_hero_badge"
                                     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">
+                                <h1 data-i18n="grp_limaem_hero_title" 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">
+                                <p data-i18n="grp_limaem_hero_desc" 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
+                                <button data-i18n="grp_limaem_hero_btn"
                                     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>
@@ -1199,18 +1199,18 @@
                             <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">
+                                <h2 data-i18n="grp_limaem_about_title" 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>
+                                    <p data-i18n="grp_limaem_about_p1">
                                         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>
+                                    <p data-i18n="grp_limaem_about_p2">
                                         Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
                                         akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
                                         dan integritas ilmiah.
@@ -1223,7 +1223,7 @@
                                         <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">
+                                        <p data-i18n="grp_limaem_about_stat_students" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
                                             Mahasiswa Aktif
                                         </p>
                                     </div>
@@ -1231,7 +1231,7 @@
                                         <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">
+                                        <p data-i18n="grp_limaem_about_stat_partners" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
                                             MITRA
                                         </p>
                                     </div>
@@ -1267,7 +1267,7 @@
                                         <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">
+                                    <p data-i18n="grp_limaem_about_badge" class="text-[11px] lg:text-xs font-bold leading-snug">
                                         Inklusivitas &<br>Kolaborasi
                                     </p>
                                 </div>
@@ -1277,11 +1277,10 @@
                     </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">
+                        <h2 data-i18n="grp_limaem_partners_title" class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
                             Partner dan Kolaborator
                         </h2>
 
@@ -1335,10 +1334,10 @@
                     <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">
+                            <h2 data-i18n="grp_limaem_divisi_title" 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">
+                            <p data-i18n="grp_limaem_divisi_desc" 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>
@@ -1349,15 +1348,15 @@
                             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
+                                <span data-i18n="grp_limaem_divisi_b1_label"
                                     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
+                                <h3 data-i18n="grp_limaem_divisi_b1_title"
                                     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">
+                                <p data-i18n="grp_limaem_divisi_b1_desc" 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
@@ -1368,15 +1367,15 @@
 
                             <!-- Bidang 2 -->
                             <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                                <span
+                                <span data-i18n="grp_limaem_divisi_b2_label"
                                     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
+                                <h3 data-i18n="grp_limaem_divisi_b2_title"
                                     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">
+                                <p data-i18n="grp_limaem_divisi_b2_desc" 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
@@ -1386,15 +1385,15 @@
 
                             <!-- Bidang 3 -->
                             <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                                <span
+                                <span data-i18n="grp_limaem_divisi_b3_label"
                                     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
+                                <h3 data-i18n="grp_limaem_divisi_b3_title"
                                     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">
+                                <p data-i18n="grp_limaem_divisi_b3_desc" 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,
@@ -1405,15 +1404,15 @@
 
                             <!-- Bidang 4 -->
                             <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                                <span
+                                <span data-i18n="grp_limaem_divisi_b4_label"
                                     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
+                                <h3 data-i18n="grp_limaem_divisi_b4_title"
                                     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">
+                                <p data-i18n="grp_limaem_divisi_b4_desc" 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
@@ -1424,15 +1423,15 @@
 
                             <!-- Bidang 5 -->
                             <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                                <span
+                                <span data-i18n="grp_limaem_divisi_b5_label"
                                     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
+                                <h3 data-i18n="grp_limaem_divisi_b5_title"
                                     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">
+                                <p data-i18n="grp_limaem_divisi_b5_desc" 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
@@ -1442,15 +1441,15 @@
 
                             <!-- Bidang 6 -->
                             <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
-                                <span
+                                <span data-i18n="grp_limaem_divisi_b6_label"
                                     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
+                                <h3 data-i18n="grp_limaem_divisi_b6_title"
                                     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">
+                                <p data-i18n="grp_limaem_divisi_b6_desc" 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
@@ -1467,10 +1466,10 @@
                     <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">
+                            <h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight">
                                 Kegiatan Unggulan
                             </h2>
-                            <p class="text-sm text-gray-500 mt-2 font-medium">
+                            <p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
                                 Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
                             </p>
                         </div>
@@ -1507,10 +1506,10 @@
                                                     class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
                                             </div>
                                             <div class="space-y-1">
-                                                <h3
+                                                <h3 data-i18n="grp_limaem_kegiatan_c1_title"
                                                     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
+                                                <p data-i18n="grp_limaem_kegiatan_c1_desc" 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>
@@ -1534,7 +1533,7 @@
                                                 <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. 
+                                                <p data-i18n="grp_limaem_kegiatan_c2_desc" 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>
@@ -1557,10 +1556,10 @@
                                                     class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
                                             </div>
                                             <div class="space-y-1">
-                                                <h3
+                                                <h3 data-i18n="grp_limaem_kegiatan_c3_title"
                                                     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.
+                                                <p data-i18n="grp_limaem_kegiatan_c3_desc" 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>
@@ -1584,7 +1583,7 @@
                                                 <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
+                                                <p data-i18n="grp_limaem_kegiatan_c4_desc" class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
                                                     pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
                                                     industri.</p>
                                             </div>
@@ -1608,7 +1607,7 @@
                                                 <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
+                                                <p data-i18n="grp_limaem_kegiatan_c5_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
                                                     mengasah skill coding mahasiswa Informatika.</p>
                                             </div>
                                         </div>
@@ -1632,7 +1631,7 @@
                                                 <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
+                                                <p data-i18n="grp_limaem_kegiatan_c6_desc" 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>
@@ -1697,7 +1696,7 @@
                                     <h3 class="text-lg font-bold text-hmif-primary">
                                         ARISE
                                     </h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                    <p data-i18n="grp_limaem_sc_arise_desc" 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>
@@ -1719,7 +1718,7 @@
                                     <h3 class="text-lg font-bold text-hmif-primary">
                                         MINERVA
                                     </h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                    <p data-i18n="grp_limaem_sc_minerva_desc" 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.
@@ -1741,7 +1740,7 @@
                                     <h3 class="text-lg font-bold text-hmif-primary">
                                         Software Development (Soon)
                                     </h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                    <p data-i18n="grp_limaem_sc_sd_desc" 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.
@@ -1758,7 +1757,7 @@
 
                         <!-- Header -->
                         <div class="text-center mb-12">
-                            <h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
+                            <h2 data-i18n="grp_limaem_galeri_title" class="text-3xl lg:text-4xl font-bold text-hmif-primary">
                                 Galeri Keseruan
                             </h2>
                         </div>
@@ -1939,18 +1938,18 @@
 
                             <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">
+                                    <h2 data-i18n="grp_limaem_cta_title" class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
                                         Ada yang Ingin Ditanyakan Seputar HMIF?
                                     </h2>
 
-                                    <p
+                                    <p data-i18n="grp_limaem_cta_desc"
                                         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"
+                                        <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" data-i18n="grp_limaem_cta_btn"
                                             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>
@@ -1982,27 +1981,27 @@
                                 <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">
+                                            <p data-i18n="grp_limaem_cta_info1_label" 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">
+                                            <p data-i18n="grp_limaem_cta_info1_val" 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">
+                                            <p data-i18n="grp_limaem_cta_info2_label" 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">
+                                            <p data-i18n="grp_limaem_cta_info2_val"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">
+                                            <p data-i18n="grp_limaem_cta_info3_label" 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">
