diff --git a/dashboard.php b/dashboard.php
index ab40e09..bfd8323 100644
--- a/dashboard.php
+++ b/dashboard.php
@@ -105,6 +105,27 @@ $username = $_SESSION['username'] ?? 'User';
             </p>
         </div>
 
+        <!-- TAHAP 3: Buka Peta Analisis Kemiskinan Banner -->
+        <div class="mb-8 overflow-hidden rounded-3xl border border-rose-200/50 bg-gradient-to-r from-rose-500 via-primary to-rose-700 shadow-xl shadow-primary/20 relative">
+            <div class="absolute inset-0 bg-[url('assets/img/map-bg.png')] opacity-10 bg-cover bg-center mix-blend-overlay"></div>
+            <div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div>
+            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between p-6 md:p-8 gap-6">
+                <div class="text-white text-center md:text-left">
+                    <h2 class="text-2xl md:text-3xl font-extrabold font-heading mb-2 flex items-center gap-2 justify-center md:justify-start">
+                        <svg viewBox="0 0 24 24" fill="none" class="h-7 w-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s-8-4-8-10V5l8-3 8 3v7c0 6-8 10-8 10z"></path></svg>
+                        Aplikasi Kemiskinan Privat
+                    </h2>
+                    <p class="text-rose-100 font-medium text-sm md:text-base max-w-xl">
+                        Akses eksklusif Admin & Petugas Lapangan. Kelola data spasial penduduk miskin, evaluasi program bantuan, dan update wilayah.
+                    </p>
+                </div>
+                <a href="index.php?modul=bantuan" class="flex-shrink-0 group flex items-center justify-center gap-2 rounded-2xl bg-white text-primary px-8 py-4 font-bold shadow-lg transition-all hover:bg-rose-50 hover:scale-105 hover:shadow-xl active:scale-95 text-lg">
+                    Buka Peta Analisis Kemiskinan
+                    <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5 transition-transform group-hover:translate-x-1" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+                </a>
+            </div>
+        </div>
+
         <!-- Modules Grid -->
         <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
             
diff --git a/index.php b/index.php
index 75de4f4..379c3d4 100644
--- a/index.php
+++ b/index.php
@@ -4,16 +4,26 @@
 // ============================================================
 session_start();
 
-// Cek apakah sudah login
-if (!isset($_SESSION['user_id'])) {
-    header('Location: login.php');
-    exit;
-}
-
-$currentUser = $_SESSION['username'];
-$currentRole = $_SESSION['role'];
 $modul = $_GET['modul'] ?? 'utuh';
 
+// TAHAP 1: Modul publik diizinkan tanpa login
+$public_modules = ['spbu', 'tematik', 'digitasi'];
+$is_public_access = in_array($modul, $public_modules);
+
+if ($is_public_access) {
+    // Jika akses publik, berikan role petugas agar pengunjung dapat mengedit data
+    $currentUser = $_SESSION['username'] ?? 'Pengunjung Kelas';
+    $currentRole = $_SESSION['role'] ?? 'petugas';
+} else {
+    // Modul privat wajib login
+    if (!isset($_SESSION['user_id'])) {
+        header('Location: login.php');
+        exit;
+    }
+    $currentUser = $_SESSION['username'];
+    $currentRole = $_SESSION['role'];
+}
+
 include 'koneksi.php';
 
 // Eksekusi ALTER TABLE secara diam-diam jika kolom belum ada
@@ -170,10 +180,17 @@ $spbuTidak  = $totalSPBU - $spbu24;
 ============================================================ -->
 <aside class="sidebar" id="sidebar">
     <div class="sidebar-top-sticky" id="sidebarSticky">
+        <?php if (!isset($_SESSION['user_id'])): ?>
+        <a href="login.php" class="btn-back-dashboard" style="display:flex;align-items:center;gap:8px;padding:12px 16px;color:#e11d48;background:rgba(225,29,72,0.03);text-decoration:none;border-bottom:1px solid rgba(225,29,72,0.1);transition:all 0.3s;font-size:0.85rem;font-weight:700;">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+            Masuk Aplikasi Kemiskinan
+        </a>
+        <?php else: ?>
         <a href="dashboard.php" class="btn-back-dashboard" style="display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--sidebar-text);text-decoration:none;border-bottom:1px solid var(--sidebar-border);transition:all 0.3s;font-size:0.85rem;font-weight:600;">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
             Kembali ke Dashboard
         </a>
+        <?php endif; ?>
 
         <!-- Header Sidebar -->
         <div class="sidebar-header">
@@ -218,6 +235,7 @@ $modulTitle = $modulNames[$modul] ?? 'Analisis Spasial';
                     <span class="user-role"><?= ucfirst($currentRole) ?></span>
                 </div>
             </div>
+            <?php if (isset($_SESSION['user_id'])): ?>
             <a href="logout.php" class="btn-logout" title="Logout">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
@@ -225,6 +243,7 @@ $modulTitle = $modulNames[$modul] ?? 'Analisis Spasial';
                     <line x1="21" y1="12" x2="9" y2="12"/>
                 </svg>
             </a>
+            <?php endif; ?>
         </div>
 
 
diff --git a/login.php b/login.php
index 618ee2b..5d61c11 100644
--- a/login.php
+++ b/login.php
@@ -109,173 +109,135 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 </script>
 <?php endif; ?>
 
-<main class="flex h-screen w-full overflow-hidden bg-background font-sans text-foreground">
-  <!-- Left: hero / map -->
-  <section class="relative hidden w-1/2 overflow-hidden lg:block">
-    <img src="assets/img/map-bg.png" alt="Visualisasi peta analisis spasial" class="absolute inset-0 object-cover w-full h-full" onerror="this.src='https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2074&auto=format&fit=crop'" />
-    <div aria-hidden="true" class="absolute inset-0 bg-gradient-to-br from-red-900/85 via-red-800/80 to-rose-900/90"></div>
-    <div aria-hidden="true" class="absolute inset-0 opacity-[0.06]" style="background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px); background-size: 52px 52px;"></div>
+<main class="relative flex h-screen w-full items-center justify-center overflow-hidden font-sans text-foreground">
+  <!-- Full Screen Background Map -->
+  <img src="assets/img/map-bg.png" alt="Visualisasi peta analisis spasial" class="absolute inset-0 object-cover w-full h-full" onerror="this.src='https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2074&auto=format&fit=crop'" />
+  <div aria-hidden="true" class="absolute inset-0 bg-gradient-to-br from-red-900/90 via-red-950/80 to-black/90"></div>
+  <div aria-hidden="true" class="absolute inset-0 opacity-10" style="background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px); background-size: 52px 52px;"></div>
 
-    <div class="relative z-10 flex h-full flex-col justify-between p-12 xl:p-16">
-      <div class="flex items-center gap-2.5">
-        <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 backdrop-blur-sm ring-1 ring-white/25">
-          <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <!-- Giant Card Container -->
+  <div class="relative z-10 flex w-[90%] max-w-5xl flex-col lg:flex-row overflow-hidden rounded-[2rem] border border-white/20 bg-white/10 shadow-2xl backdrop-blur-xl">
+    
+    <!-- LEFT SECTION: Public Access -->
+    <div class="flex flex-col justify-between p-8 lg:w-1/2 lg:p-12">
+      <!-- Top / Brand -->
+      <div class="mb-8">
+        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/30">
+          <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6 text-white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12 21s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11Z" />
             <circle cx="12" cy="10" r="2.5" />
           </svg>
         </div>
-        <div>
-          <h1 class="font-heading text-sm font-bold tracking-wide text-white shadow-sm">WebGIS Geospasial</h1>
-          <p class="text-[11px] font-medium text-white/70 uppercase tracking-wider">Kementerian Analisis Spasial</p>
-        </div>
-      </div>
-      <div>
-        <h2 class="font-heading text-4xl font-bold leading-tight tracking-tight text-white xl:text-5xl">
-          Sistem Informasi <br> Geografis <span class="text-rose-200">Terpadu</span>
-        </h2>
-        <p class="mt-4 max-w-md leading-relaxed text-rose-100/90 text-sm xl:text-base">
-          Platform pemetaan cerdas untuk analisis spasial persebaran infrastruktur, demografi kemiskinan, dan evaluasi penyaluran bantuan secara real-time.
+        <h1 class="font-heading text-2xl font-bold tracking-tight text-white lg:text-3xl">WebGIS Geospasial</h1>
+        <p class="mt-2 text-sm leading-relaxed text-white/80">
+          Platform pemetaan cerdas untuk analisis spasial persebaran infrastruktur dan demografi kemiskinan.
         </p>
       </div>
-    </div>
-  </section>
 
-  <!-- Right: Login Form -->
-  <section class="flex w-full lg:w-1/2 h-full overflow-y-auto p-6">
-    <div class="w-full max-w-sm sm:max-w-md m-auto">
-      <!-- Mobile branding -->
-      <div class="mb-10 flex flex-col items-center gap-3 lg:hidden">
-        <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-rose-700 text-white shadow-md shadow-primary/20">
-          <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M12 21s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11Z" />
-            <circle cx="12" cy="10" r="2.5" />
+      <!-- Bottom / Public Shortcuts -->
+      <div>
+        <h2 class="mb-3 flex items-center gap-2 text-sm font-bold text-white/90">
+          <svg viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5 text-rose-300" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M2 12h4l2-9 5 18 3-10h4"></path>
           </svg>
-        </div>
-        <div class="text-center">
-          <h1 class="font-heading text-lg font-bold text-foreground">WebGIS Geospasial</h1>
-          <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Kementerian Analisis Spasial</p>
+          Project Kelas (Akses Publik):
+        </h2>
+        <div class="flex flex-col gap-3">
+          <a href="index.php?modul=spbu" class="group flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-bold text-white transition-all hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/20">
+            <span class="text-xl transition-transform group-hover:scale-110">⛽</span>
+            Peta Lokasi SPBU
+          </a>
+          <a href="index.php?modul=tematik" class="group flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-bold text-white transition-all hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/20">
+            <span class="text-xl transition-transform group-hover:scale-110">🗺️</span>
+            Peta Tematik
+          </a>
+          <a href="index.php?modul=digitasi" class="group flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-bold text-white transition-all hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/20">
+            <span class="text-xl transition-transform group-hover:scale-110">📐</span>
+            Digitasi Lahan Kota
+          </a>
         </div>
       </div>
+    </div>
 
-      <!-- Header -->
-      <div class="mb-8">
-        <h2 class="font-heading text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Selamat Datang Kembali</h2>
-        <p class="mt-2 text-sm text-muted-foreground">Silakan masuk menggunakan kredensial Anda untuk melanjutkan ke dashboard.</p>
+    <!-- RIGHT SECTION: Login Form -->
+    <div class="flex flex-col justify-center bg-white/95 p-8 lg:w-1/2 lg:p-12">
+      <div class="mb-6 text-center">
+        <h2 class="font-heading text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Login Aplikasi Kemiskinan</h2>
+        <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
+          Silakan masuk untuk mengakses pusat kendali data kemiskinan, memverifikasi bantuan, dan melihat statistik penduduk miskin.
+        </p>
       </div>
 
-      <!-- Card -->
-      <div class="rounded-2xl border border-white/60 bg-white/70 p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] backdrop-blur-xl sm:p-8">
-        <form action="login.php" method="POST" class="flex flex-col gap-5">
-          <!-- Input Email / Username -->
-          <div class="group">
-            <label for="username" class="mb-1.5 block text-sm font-semibold text-foreground group-focus-within:text-primary transition-colors">
-              Email atau Username
-            </label>
-            <div class="relative">
-              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-muted-foreground group-focus-within:text-primary transition-colors">
-                <svg viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
-                  <circle cx="12" cy="7" r="4"></circle>
-                </svg>
-              </div>
-              <input type="text" id="username" name="username" class="block w-full rounded-xl border border-border bg-white py-2.5 pl-10 pr-3 text-sm text-foreground transition-all focus:outline-none focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/20 hover:border-primary/60" placeholder="admin@domain.com" required autocomplete="username">
+      <form action="login.php" method="POST" class="flex flex-col gap-4">
+        <!-- Input Email / Username -->
+        <div class="group">
+          <label for="username" class="mb-1 block text-xs font-semibold text-foreground group-focus-within:text-primary transition-colors">Email atau Username</label>
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground group-focus-within:text-primary transition-colors">
+              <svg viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+              </svg>
             </div>
+            <input type="text" id="username" name="username" class="block w-full rounded-lg border border-border bg-white py-2 pl-9 pr-3 text-sm transition-all focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 hover:border-primary/60" placeholder="admin" required autocomplete="username">
           </div>
+        </div>
 
-          <!-- Input Password -->
-          <div class="group">
-            <label for="password" class="mb-1.5 block text-sm font-semibold text-foreground group-focus-within:text-primary transition-colors">
-              Kata Sandi
-            </label>
-            <div class="relative">
-              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-muted-foreground group-focus-within:text-primary transition-colors">
-                <svg viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-                </svg>
-              </div>
-              <input type="password" id="password" name="password" class="block w-full rounded-xl border border-border bg-white py-2.5 pl-10 pr-10 text-sm text-foreground transition-all focus:outline-none focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/20 hover:border-primary/60" placeholder="••••••••" required autocomplete="current-password">
-              <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-muted-foreground hover:text-foreground focus:outline-none" aria-label="Toggle password visibility">
-                <svg id="eyeIcon" viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                  <circle cx="12" cy="12" r="3"></circle>
-                </svg>
-              </button>
+        <!-- Input Password -->
+        <div class="group">
+          <label for="password" class="mb-1 block text-xs font-semibold text-foreground group-focus-within:text-primary transition-colors">Kata Sandi</label>
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground group-focus-within:text-primary transition-colors">
+              <svg viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+              </svg>
             </div>
-          </div>
-
-          <!-- Options -->
-          <div class="flex items-center justify-between mt-1">
-            <label class="flex items-center gap-2 cursor-pointer group">
-              <input type="checkbox" name="remember" class="h-4 w-4 rounded border-border text-primary shadow-sm transition-all focus:ring-primary focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50">
-              <span class="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">Ingat saya</span>
-            </label>
-            <a href="#" class="text-sm font-semibold text-primary transition-colors hover:text-primary/80">
-              Lupa sandi?
-            </a>
-          </div>
-
-          <!-- Submit -->
-          <button type="submit" class="group mt-1 flex h-12 items-center justify-center gap-2 rounded-xl bg-primary text-sm font-semibold text-white shadow-lg shadow-primary/25 transition-all duration-300 hover:-translate-y-0.5 hover:bg-rose-700 hover:shadow-xl hover:shadow-primary/35 active:translate-y-0">
-            Masuk
-            <svg class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-                <polyline points="12 5 19 12 12 19"></polyline>
-            </svg>
-          </button>
-        </form>
-
-        <div class="mt-6 text-center text-sm text-muted-foreground">
-            Belum punya akun? <a href="register.php" class="font-semibold text-primary hover:underline">Daftar sekarang</a>
-        </div>
-
-        <?php if ($show_demo === 1): ?>
-        <!-- Demo accounts helper -->
-        <div class="mt-7 rounded-xl border border-border/70 bg-gray-50 p-4">
-          <div class="mb-3 flex items-center gap-2">
-            <span class="h-1.5 w-1.5 rounded-full bg-primary"></span>
-            <p class="text-xs font-bold uppercase tracking-wide text-foreground">Info Akun Demo</p>
-            <span class="text-[11px] font-medium text-muted-foreground">· klik untuk mengisi</span>
-          </div>
-          <div class="flex flex-col gap-1.5">
-            <button type="button" onclick="fillDemo('admin', 'password')" class="group flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-transparent bg-white/60 px-3 py-2 text-left transition-all hover:border-primary/30 hover:bg-white hover:shadow-sm w-full">
-              <span class="flex items-center gap-2.5">
-                <span aria-hidden="true" class="text-sm leading-none">👑</span>
-                <span class="text-xs font-semibold text-foreground">Admin</span>
-              </span>
-              <span class="font-mono text-[11px] text-muted-foreground transition-colors group-hover:text-primary">
-                admin · password
-              </span>
-            </button>
-            <button type="button" onclick="fillDemo('petugas', 'password')" class="group flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-transparent bg-white/60 px-3 py-2 text-left transition-all hover:border-primary/30 hover:bg-white hover:shadow-sm w-full">
-              <span class="flex items-center gap-2.5">
-                <span aria-hidden="true" class="text-sm leading-none">📝</span>
-                <span class="text-xs font-semibold text-foreground">Petugas</span>
-              </span>
-              <span class="font-mono text-[11px] text-muted-foreground transition-colors group-hover:text-primary">
-                petugas · password
-              </span>
-            </button>
-            <button type="button" onclick="fillDemo('guest', 'password')" class="group flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-transparent bg-white/60 px-3 py-2 text-left transition-all hover:border-primary/30 hover:bg-white hover:shadow-sm w-full">
-              <span class="flex items-center gap-2.5">
-                <span aria-hidden="true" class="text-sm leading-none">👁️</span>
-                <span class="text-xs font-semibold text-foreground">Guest</span>
-              </span>
-              <span class="font-mono text-[11px] text-muted-foreground transition-colors group-hover:text-primary">
-                guest · password
-              </span>
+            <input type="password" id="password" name="password" class="block w-full rounded-lg border border-border bg-white py-2 pl-9 pr-9 text-sm transition-all focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 hover:border-primary/60" placeholder="••••••••" required autocomplete="current-password">
+            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground focus:outline-none">
+              <svg id="eyeIcon" viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+              </svg>
             </button>
           </div>
         </div>
-        <?php endif; ?>
 
+        <!-- Options -->
+        <div class="flex items-center justify-between mt-1">
+          <label class="flex items-center gap-2 cursor-pointer group">
+            <input type="checkbox" name="remember" class="h-3.5 w-3.5 rounded border-border text-primary shadow-sm focus:ring-primary focus:ring-offset-0">
+            <span class="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">Ingat saya</span>
+          </label>
+          <a href="#" class="text-xs font-semibold text-primary hover:text-primary/80">Lupa sandi?</a>
+        </div>
+
+        <!-- Submit -->
+        <button type="submit" class="group mt-2 flex h-10 items-center justify-center gap-2 rounded-lg bg-primary text-sm font-bold text-white shadow-md shadow-primary/25 transition-all hover:-translate-y-0.5 hover:bg-rose-700 hover:shadow-lg active:translate-y-0">
+          Masuk
+          <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+        </button>
+      </form>
+
+      <div class="mt-4 text-center text-xs text-muted-foreground">
+        Belum punya akun? <a href="register.php" class="font-semibold text-primary hover:underline">Daftar sekarang</a>
       </div>
 
-      <p class="mt-6 text-center text-xs text-muted-foreground">
-        &copy; <script>document.write(new Date().getFullYear())</script> WebGIS Geospasial &middot; Kementerian Analisis Spasial
+      <?php if ($show_demo === 1): ?>
+      <!-- Inline Demo Accounts -->
+      <div class="mt-5 flex items-center justify-center gap-2 text-xs">
+        <span class="font-medium text-muted-foreground">Isi Cepat Demo:</span>
+        <button type="button" onclick="fillDemo('admin', 'password')" class="rounded bg-rose-100 px-2 py-1 font-semibold text-rose-700 transition hover:bg-rose-200">👑 Admin</button>
+        <button type="button" onclick="fillDemo('petugas', 'password')" class="rounded bg-slate-100 px-2 py-1 font-semibold text-slate-700 transition hover:bg-slate-200">📝 Petugas</button>
+        <button type="button" onclick="fillDemo('guest', 'password')" class="rounded bg-slate-100 px-2 py-1 font-semibold text-slate-700 transition hover:bg-slate-200">👁️ Guest</button>
+      </div>
+      <?php endif; ?>
+      
+      <p class="mt-8 text-center text-[10px] text-muted-foreground uppercase tracking-wider">
+        &copy; <script>document.write(new Date().getFullYear())</script> Kementerian Analisis Spasial
       </p>
     </div>
-  </section>
+  </div>
 </main>
 
 <script>