diff --git a/backend/routes/poverty.js b/backend/routes/poverty.js
index a3d6a65..2b5b731 100644
--- a/backend/routes/poverty.js
+++ b/backend/routes/poverty.js
@@ -5,15 +5,17 @@ const TEMPAT_IBADAH_TYPES = ["Gereja Katolik", "GPIB", "GKI", "HKBP", "Pentakost
 
 const createTempatIbadah = `
   CREATE TABLE IF NOT EXISTS tempat_ibadah (
-    id          INT AUTO_INCREMENT PRIMARY KEY,
-    nama        VARCHAR(150) NOT NULL,
-    jenis       ENUM('Gereja Katolik','GPIB','GKI','HKBP','Pentakosta') NOT NULL,
-    alamat      TEXT NOT NULL,
-    kelurahan   VARCHAR(100) NOT NULL,
-    lat         DOUBLE NOT NULL,
-    lng         DOUBLE NOT NULL,
-    aktif       TINYINT(1) NOT NULL DEFAULT 1,
-    created_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    id                INT AUTO_INCREMENT PRIMARY KEY,
+    nama              VARCHAR(150) NOT NULL,
+    jenis             ENUM('Gereja Katolik','GPIB','GKI','HKBP','Pentakosta') NOT NULL,
+    alamat            TEXT NOT NULL,
+    kelurahan         VARCHAR(100) NOT NULL,
+    lat               DOUBLE NOT NULL,
+    lng               DOUBLE NOT NULL,
+    kapasitas_bantuan INT NOT NULL DEFAULT 0,
+    keterangan        TEXT,
+    aktif             TINYINT(1) NOT NULL DEFAULT 1,
+    created_at        TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 `;
 
@@ -26,6 +28,12 @@ async function initTempatIbadahTable() {
   if (!columns.includes("created_at")) {
     await db.execute("ALTER TABLE tempat_ibadah ADD COLUMN created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP");
   }
+  if (!columns.includes("kapasitas_bantuan")) {
+    await db.execute("ALTER TABLE tempat_ibadah ADD COLUMN kapasitas_bantuan INT NOT NULL DEFAULT 0");
+  }
+  if (!columns.includes("keterangan")) {
+    await db.execute("ALTER TABLE tempat_ibadah ADD COLUMN keterangan TEXT");
+  }
   await db.execute(`
     UPDATE tempat_ibadah
     SET jenis = 'Gereja Katolik'
@@ -291,6 +299,24 @@ async function ensureTables() {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
   `);
 
+  await db.execute(`
+    CREATE TABLE IF NOT EXISTS pengajuan_bantuan (
+      id_pengajuan    INT AUTO_INCREMENT PRIMARY KEY,
+      nama_pemohon    VARCHAR(160) NOT NULL,
+      nik             VARCHAR(20) NOT NULL,
+      alamat          TEXT NOT NULL,
+      wilayah         VARCHAR(120) NOT NULL DEFAULT 'Belum Dipetakan',
+      alasan          TEXT NOT NULL,
+      status          ENUM('menunggu','diverifikasi','disetujui','ditolak','selesai') NOT NULL DEFAULT 'menunggu',
+      catatan_admin   TEXT,
+      id_keluarga     INT,
+      tanggal_pengajuan DATE NOT NULL,
+      tanggal_update  TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+      created_at      TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+      CONSTRAINT fk_pengajuan_keluarga FOREIGN KEY (id_keluarga) REFERENCES keluarga(id_keluarga) ON DELETE SET NULL
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
   await seedDefaults();
   await calculateSaw();
   tablesReady = true;
@@ -560,9 +586,33 @@ function validateIbadah(body) {
   if (!Number.isFinite(Number(body.lat)) || !Number.isFinite(Number(body.lng))) {
     return "Latitude dan longitude wajib valid.";
   }
+  if (body.kapasitas_bantuan !== undefined && !Number.isFinite(Number(body.kapasitas_bantuan))) {
+    return "Kapasitas bantuan harus berupa angka.";
+  }
   return null;
 }
 
+function validatePengajuan(body) {
+  const required = ["nama_pemohon", "nik", "alamat", "alasan", "tanggal_pengajuan"];
+  for (const key of required) {
+    if (!body[key] || String(body[key]).trim() === "") {
+      return `${key} wajib diisi.`;
+    }
+  }
+  return null;
+}
+
+// Haversine distance in meters
+function haversineMeters(lat1, lng1, lat2, lng2) {
+  const R = 6371000;
+  const dLat = ((lat2 - lat1) * Math.PI) / 180;
+  const dLng = ((lng2 - lng1) * Math.PI) / 180;
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLng / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
 router.use(async (req, res, next) => {
   try {
     await ensureTables();
@@ -1000,8 +1050,8 @@ router.post("/ibadah", async (req, res) => {
   const body = req.body;
   try {
     const [result] = await db.execute(
-      "INSERT INTO tempat_ibadah (nama, jenis, alamat, kelurahan, lat, lng) VALUES (?, ?, ?, ?, ?, ?)",
-      [body.nama, body.jenis, body.alamat, body.kelurahan, Number(body.lat), Number(body.lng)],
+      "INSERT INTO tempat_ibadah (nama, jenis, alamat, kelurahan, lat, lng, kapasitas_bantuan, keterangan) VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
+      [body.nama, body.jenis, body.alamat, body.kelurahan, Number(body.lat), Number(body.lng), toNumber(body.kapasitas_bantuan), body.keterangan || null],
     );
     res.status(201).json({ success: true, id: result.insertId, message: "Tempat ibadah berhasil ditambahkan." });
   } catch (err) {
@@ -1015,8 +1065,8 @@ router.put("/ibadah/:id", async (req, res) => {
   const body = req.body;
   try {
     const [result] = await db.execute(
-      "UPDATE tempat_ibadah SET nama=?, jenis=?, alamat=?, kelurahan=?, lat=?, lng=? WHERE id=? AND aktif = 1",
-      [body.nama, body.jenis, body.alamat, body.kelurahan, Number(body.lat), Number(body.lng), req.params.id],
+      "UPDATE tempat_ibadah SET nama=?, jenis=?, alamat=?, kelurahan=?, lat=?, lng=?, kapasitas_bantuan=?, keterangan=? WHERE id=? AND aktif = 1",
+      [body.nama, body.jenis, body.alamat, body.kelurahan, Number(body.lat), Number(body.lng), toNumber(body.kapasitas_bantuan), body.keterangan || null, req.params.id],
     );
     if (!result.affectedRows) return res.status(404).json({ success: false, message: "Tempat ibadah tidak ditemukan." });
     res.json({ success: true, message: "Tempat ibadah berhasil diperbarui." });
@@ -1025,6 +1075,104 @@ router.put("/ibadah/:id", async (req, res) => {
   }
 });
 
+// ─── Nearest Church ─────────────────────────────────────────────────────────
+router.get("/nearest-church", async (req, res) => {
+  try {
+    const lat = Number(req.query.lat);
+    const lng = Number(req.query.lng);
+    if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
+      return res.status(400).json({ success: false, message: "lat dan lng wajib valid." });
+    }
+    const [rows] = await db.execute("SELECT * FROM tempat_ibadah WHERE aktif = 1 ORDER BY nama ASC");
+    if (!rows.length) return res.json({ success: true, data: null });
+    let nearest = null;
+    let minDist = Infinity;
+    for (const item of rows) {
+      const dist = haversineMeters(lat, lng, Number(item.lat), Number(item.lng));
+      if (dist < minDist) {
+        minDist = dist;
+        nearest = { ...item, jarak_meter: Math.round(dist) };
+      }
+    }
+    // Also return all churches sorted by distance
+    const sorted = rows
+      .map((item) => ({ ...item, jarak_meter: Math.round(haversineMeters(lat, lng, Number(item.lat), Number(item.lng))) }))
+      .sort((a, b) => a.jarak_meter - b.jarak_meter);
+    res.json({ success: true, data: { nearest, all: sorted } });
+  } catch (error) {
+    res.status(500).json({ success: false, message: error.message });
+  }
+});
+
+// ─── Pengajuan Bantuan ───────────────────────────────────────────────────────
+router.get("/pengajuan", async (req, res) => {
+  try {
+    const status = req.query.status || "";
+    const sql = status
+      ? "SELECT * FROM pengajuan_bantuan WHERE status = ? ORDER BY created_at DESC"
+      : "SELECT * FROM pengajuan_bantuan ORDER BY created_at DESC";
+    const params = status ? [status] : [];
+    const [rows] = await db.execute(sql, params);
+    res.json({ success: true, data: rows });
+  } catch (error) {
+    res.status(500).json({ success: false, message: error.message });
+  }
+});
+
+router.get("/pengajuan/:id", async (req, res) => {
+  try {
+    const [rows] = await db.execute("SELECT * FROM pengajuan_bantuan WHERE id_pengajuan = ?", [req.params.id]);
+    if (!rows.length) return res.status(404).json({ success: false, message: "Pengajuan tidak ditemukan." });
+    res.json({ success: true, data: rows[0] });
+  } catch (error) {
+    res.status(500).json({ success: false, message: error.message });
+  }
+});
+
+router.post("/pengajuan", async (req, res) => {
+  const error = validatePengajuan(req.body);
+  if (error) return res.status(400).json({ success: false, message: error });
+  const body = req.body;
+  try {
+    const [result] = await db.execute(
+      `INSERT INTO pengajuan_bantuan (nama_pemohon, nik, alamat, wilayah, alasan, tanggal_pengajuan)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+      [body.nama_pemohon.trim(), body.nik.trim(), body.alamat.trim(), body.wilayah || "Belum Dipetakan", body.alasan.trim(), body.tanggal_pengajuan],
+    );
+    res.status(201).json({ success: true, id: result.insertId, message: "Pengajuan berhasil dikirim. Kami akan segera menghubungi Anda." });
+  } catch (err) {
+    res.status(500).json({ success: false, message: err.message });
+  }
+});
+
+router.put("/pengajuan/:id/status", async (req, res) => {
+  const { status, catatan_admin, id_keluarga } = req.body;
+  const validStatuses = ["menunggu", "diverifikasi", "disetujui", "ditolak", "selesai"];
+  if (!validStatuses.includes(status)) {
+    return res.status(400).json({ success: false, message: "Status tidak valid." });
+  }
+  try {
+    const [result] = await db.execute(
+      "UPDATE pengajuan_bantuan SET status=?, catatan_admin=?, id_keluarga=? WHERE id_pengajuan=?",
+      [status, catatan_admin || null, id_keluarga || null, req.params.id],
+    );
+    if (!result.affectedRows) return res.status(404).json({ success: false, message: "Pengajuan tidak ditemukan." });
+    res.json({ success: true, message: `Status pengajuan diperbarui menjadi '${status}'.` });
+  } catch (error) {
+    res.status(500).json({ success: false, message: error.message });
+  }
+});
+
+router.delete("/pengajuan/:id", async (req, res) => {
+  try {
+    const [result] = await db.execute("DELETE FROM pengajuan_bantuan WHERE id_pengajuan = ?", [req.params.id]);
+    if (!result.affectedRows) return res.status(404).json({ success: false, message: "Pengajuan tidak ditemukan." });
+    res.json({ success: true, message: "Pengajuan berhasil dihapus." });
+  } catch (error) {
+    res.status(500).json({ success: false, message: error.message });
+  }
+});
+
 router.delete("/ibadah/:id", async (req, res) => {
   try {
     const [result] = await db.execute("UPDATE tempat_ibadah SET aktif = 0 WHERE id = ?", [req.params.id]);
diff --git a/frontend/admin-poverty.html b/frontend/admin-poverty.html
index aa6e85d..d6cf8b8 100644
--- a/frontend/admin-poverty.html
+++ b/frontend/admin-poverty.html
@@ -137,6 +137,12 @@
       .butuh { background: #ffedd5; color: #7c2d12; }
       .rentan { background: #fef9c3; color: #713f12; }
       .mampu { background: #dcfce7; color: #14532d; }
+      /* Status pengajuan */
+      .status-menunggu     { background: #fef3c7; color: #92400e; }
+      .status-diverifikasi { background: #dbeafe; color: #1e40af; }
+      .status-disetujui    { background: #dcfce7; color: #14532d; }
+      .status-ditolak      { background: #fee2e2; color: #7f1d1d; }
+      .status-selesai      { background: #e0e7ff; color: #3730a3; }
       .bar-row { display: grid; grid-template-columns: 150px 1fr 48px; gap: 10px; align-items: center; margin: 10px 0; font-size: .86rem; }
       .bar-track { height: 12px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
       .bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
@@ -203,8 +209,10 @@
           <button data-section="bantuan">Data Bantuan</button>
           <button data-section="kriteria">Kriteria SAW</button>
           <button data-section="ibadah">⛪ Tempat Ibadah</button>
+          <button data-section="pengajuan">📋 Pengajuan Bantuan</button>
           <button data-section="peta">Preview Peta</button>
           <a href="/poverty-map.html">Buka Peta Poverty</a>
+          <a href="/pengajuan.html">Form Pengajuan Publik</a>
           <a href="/admin.html">Admin SPBU</a>
         </nav>
       </aside>
@@ -343,6 +351,9 @@
                   <label>Jenis<select id="ibadah_jenis" required></select></label>
                   <label>Alamat<input id="ibadah_alamat" required /></label>
                   <label>Kelurahan<input id="ibadah_kelurahan" required /></label>
+                  <label>Kapasitas Bantuan (KK)<input id="ibadah_kapasitas" type="number" min="0" value="0" /></label>
+                  <div></div>
+                  <label class="full">Keterangan / Catatan<textarea id="ibadah_keterangan" placeholder="Jadwal bantuan, kontak, dll."></textarea></label>
                   <div class="full">
                     <label>Koordinat dari Peta</label>
                     <div id="ibadahMap" class="ibadah-map"></div>
@@ -365,13 +376,73 @@
             <div class="card-head"><h3>Daftar Tempat Ibadah</h3><span id="ibadahCount">0 data</span></div>
             <div class="table-wrap">
               <table>
-                <thead><tr><th>#</th><th>Nama</th><th>Jenis</th><th>Alamat</th><th>Kelurahan</th><th>Koordinat</th><th>Aksi</th></tr></thead>
+                <thead><tr><th>#</th><th>Nama</th><th>Jenis</th><th>Alamat</th><th>Kelurahan</th><th>Koordinat</th><th>Kapasitas</th><th>Aksi</th></tr></thead>
                 <tbody id="ibadahBody"></tbody>
               </table>
             </div>
           </article>
         </section>
 
+        <!-- ═══════════════════════ PENGAJUAN BANTUAN ═══════════════════════ -->
+        <section class="section" id="pengajuan">
+          <div class="stats" style="grid-template-columns:repeat(3,minmax(0,1fr))">
+            <article class="stat"><span>Total Pengajuan</span><strong id="statPengajuanTotal">0</strong></article>
+            <article class="stat"><span>Menunggu</span><strong id="statPengajuanMenunggu">0</strong></article>
+            <article class="stat"><span>Disetujui</span><strong id="statPengajuanDisetujui">0</strong></article>
+          </div>
+          <article class="card" style="margin-top:18px">
+            <div class="card-head">
+              <h3>Daftar Pengajuan Bantuan</h3>
+              <select id="filterPengajuanStatus" style="min-width:160px;border-radius:10px;padding:7px 10px;border:1px solid #dbe2ea;font-size:.82rem">
+                <option value="">Semua Status</option>
+                <option value="menunggu">Menunggu</option>
+                <option value="diverifikasi">Diverifikasi</option>
+                <option value="disetujui">Disetujui</option>
+                <option value="ditolak">Ditolak</option>
+                <option value="selesai">Selesai</option>
+              </select>
+            </div>
+            <div class="table-wrap">
+              <table>
+                <thead><tr><th>#</th><th>Pemohon</th><th>NIK</th><th>Wilayah</th><th>Alasan</th><th>Tgl Pengajuan</th><th>Status</th><th>Aksi</th></tr></thead>
+                <tbody id="pengajuanBody"></tbody>
+              </table>
+            </div>
+          </article>
+
+          <!-- Detail / Update Status Modal (inline) -->
+          <article class="card" id="pengajuanDetailCard" style="display:none;margin-top:18px">
+            <div class="card-head">
+              <h3>Update Status Pengajuan</h3>
+              <button class="btn secondary small" onclick="el('pengajuanDetailCard').style.display='none'">Tutup</button>
+            </div>
+            <div class="card-body">
+              <p id="pengajuanDetailInfo" style="color:#475569;margin:0 0 14px"></p>
+              <div class="form-grid">
+                <label>Status Baru
+                  <select id="pengajuanNewStatus">
+                    <option value="menunggu">Menunggu</option>
+                    <option value="diverifikasi">Diverifikasi</option>
+                    <option value="disetujui">Disetujui</option>
+                    <option value="ditolak">Ditolak</option>
+                    <option value="selesai">Selesai</option>
+                  </select>
+                </label>
+                <label>Hubungkan ke Keluarga (opsional)
+                  <select id="pengajuanKeluarga"><option value="">— Tidak dihubungkan —</option></select>
+                </label>
+                <label class="full">Catatan Admin
+                  <textarea id="pengajuanCatatan" placeholder="Alasan penolakan, catatan verifikasi, dll."></textarea>
+                </label>
+              </div>
+              <input type="hidden" id="pengajuanEditId" />
+              <div class="actions">
+                <button class="btn" id="savePengajuanStatus">Simpan Status</button>
+              </div>
+            </div>
+          </article>
+        </section>
+
         <section class="section" id="peta">
           <article class="card">
             <div class="card-head"><h3>Preview Peta Keluarga Prioritas</h3><span>Klik peta untuk mengisi koordinat form keluarga.</span></div>
@@ -384,7 +455,7 @@
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
       const API = "/api/poverty";
-      const state = { keluarga: [], bantuan: [], riwayat: [], kriteria: [], ibadah: [], dashboard: null, analytics: null };
+      const state = { keluarga: [], bantuan: [], riwayat: [], kriteria: [], ibadah: [], pengajuan: [], dashboard: null, analytics: null };
       const today = new Date().toISOString().slice(0, 10);
       const DEFAULT_CENTER = [-0.0263, 109.3425];
       const IBADAH_TYPES = ["Gereja Katolik", "GPIB", "GKI", "HKBP", "Pentakosta"];
@@ -469,6 +540,12 @@
       function refreshSelects() {
         el("riwayat_keluarga").innerHTML = state.keluarga.map((item) => `<option value="${item.id_keluarga}">${esc(item.nama_kepala_keluarga)} - ${esc(item.kategori || "")}</option>`).join("");
         el("riwayat_bantuan").innerHTML = state.bantuan.map((item) => `<option value="${item.id_bantuan}">${esc(item.jenis_bantuan)} (${rp(item.nilai_bantuan)})</option>`).join("");
+        // Populate pengajuan keluarga select (with leading empty option)
+        const pengajuanSel = el("pengajuanKeluarga");
+        if (pengajuanSel) {
+          pengajuanSel.innerHTML = `<option value="">— Tidak dihubungkan —</option>` +
+            state.keluarga.map((item) => `<option value="${item.id_keluarga}">#${item.ranking||'-'} ${esc(item.nama_kepala_keluarga)} (${esc(item.wilayah)})</option>`).join("");
+        }
       }
 
       function renderBantuan() {
@@ -497,9 +574,37 @@
             <td>${esc(item.alamat)}</td>
             <td>${esc(item.kelurahan)}</td>
             <td>${Number(item.lat).toFixed(6)}, ${Number(item.lng).toFixed(6)}</td>
+            <td>${item.kapasitas_bantuan || 0} KK</td>
             <td><button class="btn secondary small" onclick="editIbadah(${item.id})">Edit</button> <button class="btn danger small" onclick="hapus('ibadah', ${item.id})">Hapus</button></td>
           </tr>
-        `).join("") || `<tr><td colspan="7">Belum ada data tempat ibadah.</td></tr>`;
+        `).join("") || `<tr><td colspan="8">Belum ada data tempat ibadah.</td></tr>`;
+      }
+
+      function pengajuanBadgeClass(status) {
+        return `status-${status || 'menunggu'}`;
+      }
+
+      function renderPengajuan() {
+        const rows = state.pengajuan;
+        el("statPengajuanTotal").textContent     = rows.length;
+        el("statPengajuanMenunggu").textContent  = rows.filter(r => r.status === "menunggu").length;
+        el("statPengajuanDisetujui").textContent = rows.filter(r => r.status === "disetujui").length;
+
+        el("pengajuanBody").innerHTML = rows.map((item, idx) => `
+          <tr>
+            <td>${idx + 1}</td>
+            <td><strong>${esc(item.nama_pemohon)}</strong></td>
+            <td>${esc(item.nik)}</td>
+            <td>${esc(item.wilayah)}</td>
+            <td style="max-width:200px;white-space:normal;font-size:.82rem">${esc(item.alasan)}</td>
+            <td>${fmt(item.tanggal_pengajuan)}</td>
+            <td><span class="badge ${pengajuanBadgeClass(item.status)}">${esc(item.status)}</span></td>
+            <td>
+              <button class="btn secondary small" onclick="openPengajuanEdit(${item.id_pengajuan})">Review</button>
+              <button class="btn danger small" onclick="hapusPengajuan(${item.id_pengajuan})">Hapus</button>
+            </td>
+          </tr>
+        `).join("") || `<tr><td colspan="8">Belum ada pengajuan.</td></tr>`;
       }
 
       let ibadahMap, ibadahMarker, ibadahManual = false;
@@ -565,6 +670,8 @@
           kelurahan: el("ibadah_kelurahan").value.trim(),
           lat: Number(el("ibadah_lat").value),
           lng: Number(el("ibadah_lng").value),
+          kapasitas_bantuan: Number(el("ibadah_kapasitas").value) || 0,
+          keterangan: el("ibadah_keterangan").value.trim() || null,
         };
       }
 
@@ -594,11 +701,12 @@
       }
 
       async function loadAll() {
-        const [dashboard, analytics, keluarga, bantuan, riwayat, kriteria, ibadah] = await Promise.all([
-          api("/dashboard"), api("/analytics"), api("/keluarga"), api("/bantuan"), api("/riwayat-bantuan"), api("/kriteria"), api("/ibadah")
+        const [dashboard, analytics, keluarga, bantuan, riwayat, kriteria, ibadah, pengajuan] = await Promise.all([
+          api("/dashboard"), api("/analytics"), api("/keluarga"), api("/bantuan"),
+          api("/riwayat-bantuan"), api("/kriteria"), api("/ibadah"), api("/pengajuan")
         ]);
-        Object.assign(state, { dashboard, analytics, keluarga, bantuan, riwayat, kriteria, ibadah });
-        renderDashboard(); renderKeluarga(); renderBantuan(); renderKriteria(); renderIbadah();
+        Object.assign(state, { dashboard, analytics, keluarga, bantuan, riwayat, kriteria, ibadah, pengajuan });
+        renderDashboard(); renderKeluarga(); renderBantuan(); renderKriteria(); renderIbadah(); renderPengajuan();
       }
 
       function familyPayload() {
@@ -634,6 +742,8 @@
       function resetIbadah() {
         el("ibadahForm").reset();
         el("id_ibadah").value = "";
+        el("ibadah_kapasitas").value = 0;
+        el("ibadah_keterangan").value = "";
         el("ibadah_lat").readOnly = true;
         el("ibadah_lng").readOnly = true;
         ibadahManual = false;
@@ -675,6 +785,8 @@
         el("ibadah_jenis").value = item.jenis;
         el("ibadah_alamat").value = item.alamat;
         el("ibadah_kelurahan").value = item.kelurahan;
+        el("ibadah_kapasitas").value = item.kapasitas_bantuan || 0;
+        el("ibadah_keterangan").value = item.keterangan || "";
         el("ibadahSubmit").textContent = "Update Tempat Ibadah";
         el("cancelIbadahEdit").style.display = "inline-flex";
         setTimeout(() => {
@@ -682,6 +794,27 @@
           el("ibadah").scrollIntoView({ behavior: "smooth", block: "start" });
         }, 100);
       };
+
+      window.openPengajuanEdit = (id) => {
+        const item = state.pengajuan.find(r => r.id_pengajuan === id);
+        if (!item) return;
+        document.querySelector('[data-section="pengajuan"]').click();
+        el("pengajuanEditId").value = id;
+        el("pengajuanNewStatus").value = item.status;
+        el("pengajuanCatatan").value = item.catatan_admin || "";
+        el("pengajuanKeluarga").value = item.id_keluarga || "";
+        el("pengajuanDetailInfo").textContent =
+          `Pemohon: ${item.nama_pemohon} | NIK: ${item.nik} | Wilayah: ${item.wilayah} | Tgl: ${String(item.tanggal_pengajuan||'').slice(0,10)}`;
+        el("pengajuanDetailCard").style.display = "block";
+        el("pengajuanDetailCard").scrollIntoView({ behavior: "smooth" });
+      };
+
+      window.hapusPengajuan = async (id) => {
+        if (!confirm("Hapus pengajuan ini?")) return;
+        await api(`/pengajuan/${id}`, { method: "DELETE" });
+        toast("Pengajuan berhasil dihapus.");
+        await loadAll();
+      };
       window.hapus = async (resource, id) => {
         if (!confirm("Hapus/nonaktifkan data ini?")) return;
         await api(`/${resource}/${id}`, { method: "DELETE" });
@@ -757,6 +890,28 @@
       el("familySearch").addEventListener("input", renderKeluarga);
       el("recalculateBtn").addEventListener("click", async () => { await api("/recalculate", { method: "POST" }); toast("SAW berhasil dihitung ulang."); await loadAll(); });
 
+      el("filterPengajuanStatus").addEventListener("change", async () => {
+        const status = el("filterPengajuanStatus").value;
+        state.pengajuan = await api(`/pengajuan${status ? '?status='+status : ''}`);
+        renderPengajuan();
+      });
+
+      el("savePengajuanStatus").addEventListener("click", async () => {
+        const id = el("pengajuanEditId").value;
+        if (!id) return;
+        await api(`/pengajuan/${id}/status`, {
+          method: "PUT",
+          body: JSON.stringify({
+            status: el("pengajuanNewStatus").value,
+            catatan_admin: el("pengajuanCatatan").value.trim(),
+            id_keluarga: el("pengajuanKeluarga").value || null,
+          }),
+        });
+        toast("Status pengajuan berhasil diperbarui.");
+        el("pengajuanDetailCard").style.display = "none";
+        await loadAll();
+      });
+
       fillOptions("pekerjaan", labels.pekerjaan);
       fillOptions("pendidikan", labels.pendidikan);
       fillOptions("kondisi_rumah", labels.kondisi_rumah);
diff --git a/frontend/pengajuan.html b/frontend/pengajuan.html
new file mode 100644
index 0000000..26135eb
--- /dev/null
+++ b/frontend/pengajuan.html
@@ -0,0 +1,457 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ajukan Bantuan Sosial – WebGIS Gereja Peduli</title>
+    <meta name="description" content="Form pengajuan bantuan sosial dari gereja. Isi data diri Anda dan tim kami akan segera memproses permohonan Anda." />
+    <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=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
+    <style>
+      :root {
+        --accent:  #7c3aed;
+        --accent2: #06b6d4;
+        --dark:    #0f172a;
+        --panel:   #111827;
+        --border:  rgba(148,163,184,.22);
+        --shadow:  0 24px 70px rgba(15,23,42,.24);
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        font-family: "Inter", system-ui, sans-serif;
+        background:
+          radial-gradient(circle at top left, rgba(124,58,237,.32), transparent 36%),
+          linear-gradient(135deg, #130f2e 0%, #111827 50%, #312e81 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 32px 16px 64px;
+      }
+      a { color: inherit; text-decoration: none; }
+      button, input, select, textarea { font: inherit; }
+
+      /* ── Hero ── */
+      .hero {
+        text-align: center;
+        color: white;
+        max-width: 600px;
+        margin-bottom: 36px;
+      }
+      .hero small {
+        display: block;
+        font-size: .78rem;
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: .1em;
+        color: #a5b4fc;
+        margin-bottom: 12px;
+      }
+      .hero h1 {
+        margin: 0 0 14px;
+        font-size: clamp(1.8rem, 5vw, 2.8rem);
+        line-height: 1.1;
+        background: linear-gradient(135deg, #e0e7ff, #c4b5fd, #93c5fd);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .hero p {
+        margin: 0;
+        color: #cbd5e1;
+        line-height: 1.6;
+        font-size: .95rem;
+      }
+
+      /* ── Status badges ── */
+      .status-flow {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 22px 0 0;
+      }
+      .flow-step {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 7px 14px;
+        border-radius: 999px;
+        border: 1px solid rgba(255,255,255,.15);
+        background: rgba(255,255,255,.07);
+        color: #e5e7eb;
+        font-size: .78rem;
+        font-weight: 700;
+      }
+
+      /* ── Card ── */
+      .card {
+        width: 100%;
+        max-width: 680px;
+        background: rgba(255,255,255,.96);
+        border-radius: 28px;
+        box-shadow: var(--shadow);
+        overflow: hidden;
+      }
+      .card-head {
+        padding: 24px 28px 20px;
+        border-bottom: 1px solid #e5e7eb;
+        background: linear-gradient(135deg, #f8fafc, #f0f4ff);
+      }
+      .card-head h2 {
+        margin: 0 0 4px;
+        font-size: 1.22rem;
+        color: #1e1b4b;
+      }
+      .card-head p {
+        margin: 0;
+        color: #64748b;
+        font-size: .86rem;
+        line-height: 1.5;
+      }
+      .card-body { padding: 26px 28px; }
+
+      /* ── Form ── */
+      .form-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 14px;
+      }
+      .full { grid-column: 1 / -1; }
+      label {
+        display: grid;
+        gap: 6px;
+        color: #334155;
+        font-size: .82rem;
+        font-weight: 800;
+      }
+      input[type="text"],
+      input[type="date"],
+      input[type="tel"],
+      select,
+      textarea {
+        width: 100%;
+        border: 1px solid #dbe2ea;
+        border-radius: 14px;
+        padding: 11px 13px;
+        outline: none;
+        color: #1e293b;
+        background: #f8fafc;
+        transition: border-color .15s, box-shadow .15s;
+        font-size: .9rem;
+      }
+      input:focus, select:focus, textarea:focus {
+        border-color: #a78bfa;
+        box-shadow: 0 0 0 4px rgba(124,58,237,.1);
+        background: #fff;
+      }
+      textarea { min-height: 100px; resize: vertical; }
+
+      /* ── Required mark ── */
+      .req { color: #dc2626; }
+
+      /* ── Divider ── */
+      .divider {
+        grid-column: 1/-1;
+        border: 0;
+        border-top: 1px solid #e2e8f0;
+        margin: 6px 0;
+      }
+
+      /* ── Info box ── */
+      .info-box {
+        grid-column: 1/-1;
+        background: #eff6ff;
+        border: 1px solid #bfdbfe;
+        border-radius: 14px;
+        padding: 14px 16px;
+        color: #1e3a8a;
+        font-size: .84rem;
+        line-height: 1.5;
+      }
+      .info-box strong { display: block; margin-bottom: 4px; }
+
+      /* ── Submit ── */
+      .btn-submit {
+        width: 100%;
+        margin-top: 18px;
+        border: 0;
+        border-radius: 16px;
+        padding: 15px;
+        background: linear-gradient(135deg, var(--accent), var(--accent2));
+        color: white;
+        font-weight: 800;
+        font-size: 1rem;
+        cursor: pointer;
+        box-shadow: 0 14px 32px rgba(124,58,237,.3);
+        transition: transform .15s, box-shadow .15s;
+      }
+      .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(124,58,237,.4); }
+      .btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
+
+      /* ── Success ── */
+      .success-screen {
+        display: none;
+        text-align: center;
+        padding: 40px 28px;
+        animation: fadeUp .4s ease forwards;
+      }
+      .success-icon {
+        font-size: 4rem;
+        margin-bottom: 18px;
+        display: block;
+      }
+      .success-screen h2 { margin: 0 0 10px; color: #14532d; font-size: 1.5rem; }
+      .success-screen p { margin: 0 0 8px; color: #475569; line-height: 1.5; }
+      .ref-num { font-weight: 800; color: var(--accent); font-size: 1.1rem; }
+      .btn-back {
+        display: inline-block;
+        margin-top: 20px;
+        padding: 11px 22px;
+        border-radius: 14px;
+        background: var(--accent);
+        color: white;
+        font-weight: 700;
+        font-size: .88rem;
+        cursor: pointer;
+        border: 0;
+        transition: .15s;
+      }
+      .btn-back:hover { background: #6d28d9; }
+
+      /* ── Toast ── */
+      .toast {
+        position: fixed;
+        bottom: 22px;
+        right: 22px;
+        background: #0f172a;
+        color: white;
+        padding: 12px 16px;
+        border-radius: 13px;
+        box-shadow: var(--shadow);
+        opacity: 0;
+        transform: translateY(10px);
+        pointer-events: none;
+        transition: .22s ease;
+        z-index: 1000;
+        max-width: 320px;
+        font-size: .88rem;
+      }
+      .toast.show { opacity: 1; transform: translateY(0); }
+
+      /* ── Footer links ── */
+      .footer-links {
+        display: flex;
+        gap: 14px;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 28px;
+      }
+      .footer-links a {
+        color: rgba(255,255,255,.6);
+        font-size: .82rem;
+        font-weight: 600;
+        transition: color .15s;
+      }
+      .footer-links a:hover { color: #fff; }
+
+      @keyframes fadeUp {
+        from { opacity: 0; transform: translateY(16px); }
+        to   { opacity: 1; transform: translateY(0); }
+      }
+
+      @media (max-width: 580px) {
+        .form-grid { grid-template-columns: 1fr; }
+        .card-head, .card-body { padding: 20px; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="toast" id="toast"></div>
+
+    <!-- Hero -->
+    <div class="hero">
+      <small>⛪ Gereja Peduli — Program Bantuan Sosial</small>
+      <h1>Ajukan Bantuan Sosial</h1>
+      <p>Isi formulir berikut untuk mengajukan permohonan bantuan. Tim kami akan memverifikasi dan menghubungi Anda secepatnya.</p>
+      <div class="status-flow">
+        <div class="flow-step">📋 Ajukan</div>
+        <div class="flow-step">🔍 Verifikasi</div>
+        <div class="flow-step">✅ Disetujui</div>
+        <div class="flow-step">🤝 Tersalurkan</div>
+      </div>
+    </div>
+
+    <!-- Form Card -->
+    <div class="card" id="formCard">
+      <div class="card-head">
+        <h2>Formulir Pengajuan Bantuan</h2>
+        <p>Semua data akan dijaga kerahasiaannya dan digunakan hanya untuk keperluan verifikasi bantuan.</p>
+      </div>
+      <div class="card-body">
+        <form id="pengajuanForm">
+          <div class="form-grid">
+
+            <div class="info-box">
+              <strong>📌 Petunjuk Pengisian</strong>
+              Isi semua kolom bertanda <span class="req">*</span> dengan data yang benar dan sesuai KTP.
+              Pengajuan akan diproses dalam 3–7 hari kerja.
+            </div>
+
+            <hr class="divider" />
+
+            <!-- Data Diri -->
+            <label class="full">Nama Lengkap <span class="req">*</span>
+              <input type="text" id="nama_pemohon" placeholder="Sesuai Kartu Tanda Penduduk" required />
+            </label>
+            <label>NIK (16 digit) <span class="req">*</span>
+              <input type="tel" id="nik" placeholder="1234567890123456" maxlength="16" pattern="[0-9]{16}" required />
+            </label>
+            <label>Tanggal Pengajuan <span class="req">*</span>
+              <input type="date" id="tanggal_pengajuan" required />
+            </label>
+            <label class="full">Alamat Lengkap <span class="req">*</span>
+              <textarea id="alamat" placeholder="Nama jalan, nomor rumah, RT/RW…" required></textarea>
+            </label>
+            <label>Wilayah / Paroki <span class="req">*</span>
+              <input type="text" id="wilayah" placeholder="Contoh: Paroki Katedral" required />
+            </label>
+            <label>No. Telepon / WhatsApp
+              <input type="tel" id="telepon" placeholder="08xxxxxxxxxx" />
+            </label>
+
+            <hr class="divider" />
+
+            <!-- Kondisi -->
+            <label class="full">Alasan & Kondisi Ekonomi Saat Ini <span class="req">*</span>
+              <textarea id="alasan" rows="5"
+                placeholder="Jelaskan kondisi ekonomi Anda saat ini, jenis bantuan yang dibutuhkan (pangan, pendidikan, kesehatan, dll.), dan alasan mengajukan permohonan ini…"
+                required></textarea>
+            </label>
+
+            <label>Pekerjaan Saat Ini
+              <select id="pekerjaan">
+                <option value="">— Pilih Pekerjaan —</option>
+                <option value="pengangguran">Tidak Bekerja / Pengangguran</option>
+                <option value="buruh_harian">Buruh Harian</option>
+                <option value="petani">Petani</option>
+                <option value="nelayan">Nelayan</option>
+                <option value="pedagang_kecil">Pedagang Kecil</option>
+                <option value="karyawan">Karyawan</option>
+                <option value="wiraswasta">Wiraswasta</option>
+                <option value="lainnya">Lainnya</option>
+              </select>
+            </label>
+            <label>Jumlah Anggota Keluarga
+              <input type="tel" id="jumlah_anggota" placeholder="Contoh: 5" pattern="[0-9]+" />
+            </label>
+
+            <div class="info-box full" style="background:#f0fdf4;border-color:#bbf7d0;color:#14532d">
+              <strong>🔒 Privasi &amp; Keamanan Data</strong>
+              Data Anda hanya digunakan untuk keperluan verifikasi bantuan sosial.
+              Kami tidak akan membagikan informasi Anda kepada pihak lain tanpa persetujuan.
+            </div>
+
+            <label class="full" style="flex-direction:row;align-items:flex-start;gap:10px;cursor:pointer">
+              <input type="checkbox" id="setuju" required style="width:auto;margin-top:2px" />
+              <span style="font-weight:600;color:#334155">
+                Saya menyatakan bahwa data yang saya isi adalah benar dan saya bertanggung jawab atas kebenaran informasi tersebut. <span class="req">*</span>
+              </span>
+            </label>
+          </div>
+
+          <button type="submit" class="btn-submit" id="submitBtn">
+            📋 Kirim Permohonan Bantuan
+          </button>
+        </form>
+
+        <!-- Success Screen -->
+        <div class="success-screen" id="successScreen">
+          <span class="success-icon">🎉</span>
+          <h2>Permohonan Terkirim!</h2>
+          <p>Nomor referensi pengajuan Anda:</p>
+          <p class="ref-num" id="refNum">#000</p>
+          <p style="margin-top:12px">Tim kami akan segera memverifikasi permohonan Anda dan menghubungi Anda melalui nomor telepon yang tercantum.</p>
+          <p style="margin-top:8px;color:#94a3b8;font-size:.82rem">Proses verifikasi biasanya memakan waktu 3–7 hari kerja.</p>
+          <button class="btn-back" onclick="resetForm()">📋 Ajukan Lagi</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer links -->
+    <div class="footer-links">
+      <a href="/poverty-map.html">🗺️ Lihat Peta Distribusi</a>
+      <a href="/admin-poverty.html">⚙️ Admin</a>
+      <a href="/">⛽ WebGIS SPBU</a>
+    </div>
+
+    <script>
+      const API = "/api/poverty";
+      const el  = (id) => document.getElementById(id);
+
+      // Set today's date as default
+      el("tanggal_pengajuan").value = new Date().toISOString().slice(0, 10);
+
+      let toastTimer;
+      function toast(msg, dur = 3000) {
+        el("toast").textContent = msg;
+        el("toast").classList.add("show");
+        clearTimeout(toastTimer);
+        toastTimer = setTimeout(() => el("toast").classList.remove("show"), dur);
+      }
+
+      function resetForm() {
+        el("pengajuanForm").reset();
+        el("tanggal_pengajuan").value = new Date().toISOString().slice(0, 10);
+        el("pengajuanForm").style.display = "block";
+        el("successScreen").style.display = "none";
+        el("submitBtn").style.display = "block";
+      }
+
+      el("pengajuanForm").addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const btn = el("submitBtn");
+        btn.disabled = true;
+        btn.textContent = "⏳ Mengirim…";
+
+        const payload = {
+          nama_pemohon:    el("nama_pemohon").value.trim(),
+          nik:             el("nik").value.trim(),
+          alamat:          el("alamat").value.trim(),
+          wilayah:         el("wilayah").value.trim() || "Belum Dipetakan",
+          alasan:          el("alasan").value.trim(),
+          tanggal_pengajuan: el("tanggal_pengajuan").value,
+        };
+
+        // Basic NIK validation
+        if (!/^\d{16}$/.test(payload.nik)) {
+          toast("⚠️ NIK harus 16 digit angka.");
+          btn.disabled = false;
+          btn.textContent = "📋 Kirim Permohonan Bantuan";
+          return;
+        }
+
+        try {
+          const res = await fetch(`${API}/pengajuan`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          });
+          const data = await res.json();
+          if (!res.ok || data.success === false) throw new Error(data.message || "Pengajuan gagal dikirim.");
+
+          // Show success
+          el("refNum").textContent = `#${String(data.id).padStart(4, "0")}`;
+          el("pengajuanForm").style.display = "none";
+          el("submitBtn").style.display = "none";
+          el("successScreen").style.display = "block";
+        } catch (err) {
+          toast(`❌ ${err.message}`);
+          btn.disabled = false;
+          btn.textContent = "📋 Kirim Permohonan Bantuan";
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/frontend/poverty-map.html b/frontend/poverty-map.html
index 664fd03..92a2772 100644
--- a/frontend/poverty-map.html
+++ b/frontend/poverty-map.html
@@ -4,24 +4,26 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WebGIS Poverty Mapping Gereja</title>
+    <meta name="description" content="Peta distribusi bantuan sosial gereja berbasis WebGIS — analisis kemiskinan SAW, buffer, routing, dan pemetaan lokasi." />
     <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=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
     <style>
       :root {
         --bg-dark: #0f172a;
         --bg-panel: #111827;
         --text-main: #f8fafc;
         --text-muted: #94a3b8;
-        --border: rgba(148, 163, 184, 0.24);
+        --border: rgba(148, 163, 184, 0.22);
         --accent: #7c3aed;
         --accent-2: #06b6d4;
         --red: #dc2626;
         --orange: #f97316;
         --yellow: #facc15;
         --green: #22c55e;
-        --radius: 22px;
+        --radius: 20px;
         --shadow: 0 22px 60px rgba(15, 23, 42, 0.32);
       }
       * { box-sizing: border-box; }
@@ -34,100 +36,190 @@
       }
       button, input, select { font: inherit; }
       a { color: inherit; text-decoration: none; }
-      .app { display: grid; grid-template-columns: 350px minmax(0, 1fr); min-height: 100vh; }
+      .app { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 100vh; }
+
+      /* ── Sidebar ────────────────────────────────────────────────────── */
       .sidebar {
         position: relative;
         z-index: 900;
         height: 100vh;
         overflow-y: auto;
-        padding: 22px 18px;
+        padding: 20px 16px;
         background:
-          radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .3), transparent 30%),
+          radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .28), transparent 30%),
           linear-gradient(180deg, var(--bg-dark), var(--bg-panel));
         box-shadow: var(--shadow);
         border-right: 1px solid rgba(255,255,255,.08);
+        scrollbar-width: thin;
+        scrollbar-color: rgba(124,58,237,.3) transparent;
       }
-      .brand { margin-bottom: 18px; }
-      .brand small { color: #a5b4fc; font-weight: 800; text-transform: uppercase; }
-      .brand h1 { margin: 8px 0 8px; font-size: 1.55rem; line-height: 1.12; }
-      .brand p { margin: 0; color: #cbd5e1; line-height: 1.45; font-size: .9rem; }
+      .brand { margin-bottom: 16px; }
+      .brand small { color: #a5b4fc; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
+      .brand h1 { margin: 6px 0 6px; font-size: 1.45rem; line-height: 1.12; }
+      .brand p { margin: 0; color: #cbd5e1; line-height: 1.45; font-size: .86rem; }
+
       .panel {
-        border: 1px solid rgba(255,255,255,.12);
-        background: rgba(255,255,255,.07);
+        border: 1px solid rgba(255,255,255,.11);
+        background: rgba(255,255,255,.06);
         border-radius: var(--radius);
         padding: 14px;
-        margin-bottom: 14px;
+        margin-bottom: 12px;
         backdrop-filter: blur(12px);
       }
-      .panel h2 { margin: 0 0 12px; font-size: .95rem; }
-      .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-      .stat { background: rgba(15,23,42,.46); border: 1px solid var(--border); border-radius: 18px; padding: 12px; }
-      .stat span { display: block; color: var(--text-muted); font-size: .73rem; font-weight: 800; }
-      .stat strong { display: block; margin-top: 6px; font-size: 1.32rem; }
-      .field { display: grid; gap: 7px; margin-bottom: 10px; color: #e5e7eb; font-size: .82rem; font-weight: 800; }
-      input, select {
+      .panel h2 {
+        margin: 0 0 11px;
+        font-size: .88rem;
+        font-weight: 800;
+        letter-spacing: .05em;
+        text-transform: uppercase;
+        color: #a5b4fc;
+      }
+      .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+      .stat { background: rgba(15,23,42,.5); border: 1px solid var(--border); border-radius: 16px; padding: 11px; }
+      .stat span { display: block; color: var(--text-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
+      .stat strong { display: block; margin-top: 5px; font-size: 1.28rem; }
+
+      .field { display: grid; gap: 6px; margin-bottom: 10px; color: #e5e7eb; font-size: .8rem; font-weight: 800; }
+      .field:last-child { margin-bottom: 0; }
+      input[type="text"], input[type="number"], select, textarea {
         width: 100%;
         border: 1px solid var(--border);
-        border-radius: 15px;
-        padding: 11px 12px;
+        border-radius: 13px;
+        padding: 10px 11px;
         outline: none;
         color: #f8fafc;
-        background: rgba(15, 23, 42, .62);
+        background: rgba(15,23,42,.65);
+        transition: border-color .15s, box-shadow .15s;
+      }
+      input:focus, select:focus, textarea:focus {
+        border-color: #a78bfa;
+        box-shadow: 0 0 0 3px rgba(124,58,237,.18);
       }
-      input:focus, select:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(124,58,237,.16); }
       .switch {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 10px;
         border: 1px solid var(--border);
-        background: rgba(15,23,42,.42);
-        border-radius: 16px;
-        padding: 11px 12px;
-        margin-top: 8px;
+        background: rgba(15,23,42,.38);
+        border-radius: 14px;
+        padding: 10px 11px;
+        margin-top: 7px;
+        font-size: .82rem;
+        font-weight: 700;
       }
       .switch input { width: auto; }
-      .legend { display: grid; gap: 9px; color: #e5e7eb; font-size: .84rem; }
-      .legend span { display: flex; align-items: center; gap: 9px; }
-      .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
-      .list { display: grid; gap: 9px; max-height: 360px; overflow: auto; padding-right: 2px; }
+
+      .legend { display: grid; gap: 8px; color: #e5e7eb; font-size: .82rem; }
+      .legend span { display: flex; align-items: center; gap: 8px; }
+      .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
+
+      .list { display: grid; gap: 8px; max-height: 280px; overflow: auto; padding-right: 2px; }
       .family-item {
         border: 1px solid var(--border);
-        border-radius: 16px;
+        border-radius: 14px;
         background: rgba(15,23,42,.42);
-        padding: 11px;
+        padding: 10px;
         cursor: pointer;
+        transition: .15s;
       }
-      .family-item:hover { border-color: rgba(167,139,250,.72); background: rgba(124,58,237,.18); }
-      .family-item strong { display: block; font-size: .9rem; }
-      .family-item small { color: #cbd5e1; line-height: 1.5; }
-      .badge { display: inline-flex; border-radius: 999px; padding: 4px 9px; font-size: .7rem; font-weight: 900; margin-top: 7px; }
+      .family-item:hover { border-color: rgba(167,139,250,.7); background: rgba(124,58,237,.18); }
+      .family-item strong { display: block; font-size: .88rem; }
+      .family-item small { color: #cbd5e1; line-height: 1.5; font-size: .76rem; }
+
+      .badge { display: inline-flex; border-radius: 999px; padding: 3px 9px; font-size: .69rem; font-weight: 900; margin-top: 6px; }
       .sangat { background: #fee2e2; color: #7f1d1d; }
-      .butuh { background: #ffedd5; color: #7c2d12; }
+      .butuh  { background: #ffedd5; color: #7c2d12; }
       .rentan { background: #fef9c3; color: #713f12; }
-      .mampu { background: #dcfce7; color: #14532d; }
+      .mampu  { background: #dcfce7; color: #14532d; }
+      .status-menunggu    { background: #fef3c7; color: #92400e; }
+      .status-diverifikasi{ background: #dbeafe; color: #1e40af; }
+      .status-disetujui   { background: #dcfce7; color: #14532d; }
+      .status-ditolak     { background: #fee2e2; color: #7f1d1d; }
+      .status-selesai     { background: #e0e7ff; color: #3730a3; }
+
+      /* Buffer panel buttons */
+      .radius-btns { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
+      .radius-btn {
+        flex: 1;
+        min-width: 56px;
+        border: 1px solid rgba(167,139,250,.5);
+        border-radius: 12px;
+        padding: 9px 6px;
+        background: rgba(124,58,237,.18);
+        color: #c4b5fd;
+        font-size: .78rem;
+        font-weight: 800;
+        cursor: pointer;
+        transition: .15s;
+        text-align: center;
+      }
+      .radius-btn:hover, .radius-btn.active {
+        background: rgba(124,58,237,.5);
+        border-color: #a78bfa;
+        color: #fff;
+      }
+      .radius-btn.clear-btn {
+        background: rgba(220,38,38,.15);
+        border-color: rgba(220,38,38,.4);
+        color: #fca5a5;
+      }
+      .radius-btn.clear-btn:hover { background: rgba(220,38,38,.35); border-color: #f87171; color: #fff; }
+
+      .church-select { margin-bottom: 8px; }
+      .buffer-result {
+        margin-top: 10px;
+        padding: 10px;
+        border-radius: 12px;
+        background: rgba(124,58,237,.18);
+        border: 1px solid rgba(167,139,250,.3);
+        font-size: .82rem;
+        color: #e5e7eb;
+        display: none;
+      }
+      .buffer-result.show { display: block; }
+      .buffer-result strong { color: #c4b5fd; }
+
+      /* Nearest church panel */
+      .nearest-result {
+        padding: 10px;
+        border-radius: 12px;
+        background: rgba(6,182,212,.1);
+        border: 1px solid rgba(6,182,212,.28);
+        color: #e5e7eb;
+        font-size: .82rem;
+        margin-top: 8px;
+        display: none;
+      }
+      .nearest-result.show { display: block; }
+      .nearest-result h4 { margin: 0 0 5px; font-size: .88rem; color: #67e8f9; }
+      .nearest-result p  { margin: 3px 0; }
+
+      /* Map */
       #map { height: 100vh; width: 100%; background: #eef2f7; }
       .map-top {
         position: absolute;
         z-index: 800;
-        top: 18px;
-        right: 18px;
+        top: 16px;
+        right: 16px;
         display: flex;
-        gap: 10px;
+        gap: 8px;
         flex-wrap: wrap;
         justify-content: flex-end;
       }
       .map-card {
         border: 1px solid rgba(15,23,42,.12);
-        background: rgba(255,255,255,.92);
+        background: rgba(255,255,255,.93);
         color: #0f172a;
-        border-radius: 18px;
+        border-radius: 16px;
         box-shadow: var(--shadow);
-        padding: 12px 14px;
-        backdrop-filter: blur(14px);
+        padding: 10px 14px;
+        backdrop-filter: blur(12px);
       }
-      .map-card strong { display: block; font-size: 1.05rem; }
-      .map-card span { color: #64748b; font-size: .78rem; font-weight: 700; }
+      .map-card strong { display: block; font-size: 1rem; }
+      .map-card span { color: #64748b; font-size: .75rem; font-weight: 700; }
+
+      /* Mobile */
       .mobile-toggle {
         position: fixed;
         display: none;
@@ -142,36 +234,69 @@
         color: white;
         box-shadow: var(--shadow);
         cursor: pointer;
+        font-size: 1.1rem;
       }
+
+      /* Popup */
       .leaflet-popup-content-wrapper { border-radius: 20px; overflow: hidden; padding: 0; }
-      .leaflet-popup-content { margin: 0; width: 300px !important; }
+      .leaflet-popup-content { margin: 0; width: 310px !important; }
       .popup { color: #0f172a; padding: 16px; }
-      .popup h3 { margin: 0 0 6px; font-size: 1.02rem; }
-      .popup p { margin: 0 0 10px; color: #475569; line-height: 1.4; }
-      .popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
-      .popup-grid div { border-radius: 12px; background: #f8fafc; padding: 9px; }
-      .popup-grid span { display: block; color: #64748b; font-size: .7rem; font-weight: 800; }
-      .popup-grid strong { display: block; margin-top: 3px; font-size: .86rem; }
-      .history { border-top: 1px solid #e5e7eb; margin-top: 10px; padding-top: 10px; }
-      .history ul { margin: 8px 0 0 18px; padding: 0; color: #334155; }
+      .popup h3 { margin: 0 0 5px; font-size: 1rem; }
+      .popup p { margin: 0 0 8px; color: #475569; line-height: 1.4; font-size: .86rem; }
+      .popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0; }
+      .popup-grid div { border-radius: 11px; background: #f8fafc; padding: 8px; }
+      .popup-grid span { display: block; color: #64748b; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
+      .popup-grid strong { display: block; margin-top: 2px; font-size: .84rem; }
+      .history { border-top: 1px solid #e5e7eb; margin-top: 8px; padding-top: 8px; }
+      .history ul { margin: 6px 0 0 16px; padding: 0; color: #334155; font-size: .82rem; }
+      .nearest-info { margin-top: 8px; padding: 8px; border-radius: 11px; background: #eff6ff; border: 1px solid #bfdbfe; }
+      .nearest-info p { margin: 2px 0; color: #1e3a8a; font-size: .8rem; }
+      .popup-btn {
+        display: block;
+        width: 100%;
+        margin-top: 8px;
+        border: 0;
+        border-radius: 11px;
+        padding: 9px 12px;
+        font-weight: 800;
+        font-size: .82rem;
+        cursor: pointer;
+        text-align: center;
+        transition: .15s;
+      }
+      .popup-btn.primary { background: #7c3aed; color: #fff; }
+      .popup-btn.primary:hover { background: #6d28d9; }
+      .popup-btn.route  { background: #0891b2; color: #fff; }
+      .popup-btn.route:hover { background: #0e7490; }
+
+      /* Routing control */
+      .leaflet-routing-container { display: none; } /* hide default panel */
+
+      /* Toast */
       .toast {
         position: fixed;
-        right: 22px;
-        bottom: 22px;
+        right: 20px;
+        bottom: 20px;
         background: #0f172a;
         color: white;
-        padding: 13px 16px;
-        border-radius: 14px;
+        padding: 12px 16px;
+        border-radius: 13px;
         box-shadow: var(--shadow);
         opacity: 0;
         transform: translateY(10px);
         pointer-events: none;
-        transition: .2s ease;
+        transition: .22s ease;
         z-index: 2000;
+        font-size: .9rem;
+        max-width: 340px;
       }
       .toast.show { opacity: 1; transform: translateY(0); }
+
+      /* Ibadah legend */
       .ibadah-legend { display: none; }
       .ibadah-legend.active { display: block; }
+
+      /* Map markers */
       .ibadah-map-marker {
         display: grid;
         place-items: center;
@@ -180,49 +305,53 @@
         border-radius: 999px;
         color: white;
         border: 3px solid white;
-        box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
-        font-size: 15px;
+        box-shadow: 0 8px 22px rgba(15,23,42,.28);
+        font-size: 14px;
       }
-      @media (max-width: 880px) {
+
+      @media (max-width: 900px) {
         body { overflow: hidden; }
         .app { grid-template-columns: 1fr; }
         .sidebar {
           position: fixed;
           inset: 0 auto 0 0;
-          width: min(88vw, 350px);
-          transform: translateX(-104%);
+          width: min(90vw, 360px);
+          transform: translateX(-105%);
           transition: transform .24s ease;
+          z-index: 1100;
         }
         .sidebar.open { transform: translateX(0); }
         .mobile-toggle { display: block; }
-        .map-top { top: 70px; left: 14px; right: 14px; }
+        .map-top { top: 68px; left: 12px; right: 12px; }
       }
     </style>
   </head>
   <body>
-    <button class="mobile-toggle" id="mobileToggle" aria-label="Menu">☰</button>
+    <button class="mobile-toggle" id="mobileToggle" aria-label="Buka Menu">☰</button>
     <div class="toast" id="toast"></div>
     <div class="app">
       <aside class="sidebar" id="sidebar">
         <div class="brand">
           <small>Gereja Peduli</small>
           <h1>WebGIS Poverty Mapping</h1>
-          <p>Peta prioritas keluarga penerima bantuan berbasis SAW, terpusat, dan mudah dipantau.</p>
+          <p>Peta prioritas keluarga penerima bantuan berbasis SAW, buffer analysis, dan routing OSM.</p>
         </div>
 
+        <!-- Stats -->
         <section class="panel">
           <h2>Statistik</h2>
           <div class="stats">
-            <div class="stat"><span>Total keluarga</span><strong id="statTotal">0</strong></div>
-            <div class="stat"><span>Prioritas tinggi</span><strong id="statHigh">0</strong></div>
+            <div class="stat"><span>Total Keluarga</span><strong id="statTotal">0</strong></div>
+            <div class="stat"><span>Prioritas Tinggi</span><strong id="statHigh">0</strong></div>
             <div class="stat"><span>Tersalurkan</span><strong id="statAid">Rp0</strong></div>
             <div class="stat"><span>Wilayah</span><strong id="statArea">0</strong></div>
           </div>
         </section>
 
+        <!-- Filter -->
         <section class="panel">
           <h2>Filter Peta</h2>
-          <label class="field">Kategori
+          <label class="field">Kategori Kemiskinan
             <select id="categoryFilter">
               <option value="">Semua Kategori</option>
               <option value="Sangat Membutuhkan">Sangat Membutuhkan</option>
@@ -231,25 +360,61 @@
               <option value="Relatif Mampu">Relatif Mampu</option>
             </select>
           </label>
-          <label class="field">Pencarian Keluarga
-            <input id="searchInput" placeholder="Nama, alamat, atau wilayah" />
+          <label class="field">Cari Keluarga
+            <input id="searchInput" type="text" placeholder="Nama, alamat, atau wilayah…" />
           </label>
-          <label class="switch"><span>Heatmap persebaran</span><input id="heatToggle" type="checkbox" checked /></label>
-          <label class="switch"><span>⛪ Tempat Ibadah</span><input id="ibadahToggle" type="checkbox" /></label>
+          <label class="switch"><span>🌡️ Heatmap Persebaran</span><input id="heatToggle" type="checkbox" checked /></label>
+          <label class="switch"><span>⛪ Tampilkan Gereja</span><input id="ibadahToggle" type="checkbox" /></label>
         </section>
 
+        <!-- ═══ Buffer Analysis ═══════════════════════════════════════ -->
+        <section class="panel" id="bufferPanel">
+          <h2>📍 Buffer Analysis</h2>
+          <label class="field church-select">Pilih Gereja
+            <select id="bufferChurchSelect">
+              <option value="">— Memuat gereja… —</option>
+            </select>
+          </label>
+          <div class="radius-btns">
+            <button class="radius-btn" data-radius="1000" id="btn1km">1 km</button>
+            <button class="radius-btn" data-radius="3000" id="btn3km">3 km</button>
+            <button class="radius-btn" data-radius="5000" id="btn5km">5 km</button>
+            <button class="radius-btn clear-btn" id="btnClearBuffer">Hapus</button>
+          </div>
+          <div class="buffer-result" id="bufferResult">
+            Gereja: <strong id="bufferChurchName">—</strong><br/>
+            Radius: <strong id="bufferRadiusLabel">—</strong><br/>
+            Keluarga dalam radius: <strong id="bufferCount">0</strong><br/>
+            Prioritas tinggi: <strong id="bufferHighCount">0</strong>
+          </div>
+        </section>
+
+        <!-- ═══ Nearest Church Analysis ══════════════════════════════ -->
         <section class="panel">
-          <h2>Legenda</h2>
+          <h2>🔍 Nearest Church Analysis</h2>
+          <p style="font-size:.8rem;color:#94a3b8;margin:0 0 8px">Klik marker keluarga di peta untuk melihat gereja terdekat.</p>
+          <div class="nearest-result" id="nearestResult">
+            <h4 id="nearestName">—</h4>
+            <p>📍 <span id="nearestAlamat">—</span></p>
+            <p>📏 Jarak: <strong id="nearestJarak">—</strong></p>
+            <p>⛪ Jenis: <span id="nearestJenis">—</span></p>
+            <p>🏠 Kapasitas: <span id="nearestKapasitas">—</span> keluarga</p>
+          </div>
+        </section>
+
+        <!-- ═══ Legenda ═══════════════════════════════════════════════ -->
+        <section class="panel">
+          <h2>Legenda Keluarga</h2>
           <div class="legend">
-            <span><i class="dot" style="background: var(--red)"></i>Sangat Membutuhkan</span>
-            <span><i class="dot" style="background: var(--orange)"></i>Membutuhkan</span>
-            <span><i class="dot" style="background: var(--yellow)"></i>Rentan</span>
-            <span><i class="dot" style="background: var(--green)"></i>Relatif Mampu</span>
+            <span><i class="dot" style="background:var(--red)"></i>Sangat Membutuhkan</span>
+            <span><i class="dot" style="background:var(--orange)"></i>Membutuhkan</span>
+            <span><i class="dot" style="background:var(--yellow)"></i>Rentan</span>
+            <span><i class="dot" style="background:var(--green)"></i>Relatif Mampu</span>
           </div>
         </section>
 
         <section class="panel ibadah-legend" id="ibadahLegendPanel">
-          <h2>Legenda Tempat Ibadah</h2>
+          <h2>Legenda Gereja</h2>
           <div class="legend">
             <span><i class="dot" style="background:#7c3aed"></i>Gereja Katolik</span>
             <span><i class="dot" style="background:#2563eb"></i>GPIB</span>
@@ -259,161 +424,278 @@
           </div>
         </section>
 
+        <!-- Statistik Wilayah -->
         <section class="panel">
-          <h2>Statistik Wilayah</h2>
-          <div id="areaStats"></div>
+          <h2>Distribusi Wilayah</h2>
+          <div id="areaStats"><p style="color:#94a3b8;font-size:.82rem">Memuat…</p></div>
         </section>
 
+        <!-- Daftar Keluarga -->
         <section class="panel">
           <h2>Daftar Keluarga</h2>
           <div class="list" id="familyList"></div>
         </section>
 
-        <section class="panel">
-          <a href="/admin-poverty.html">Buka Admin Poverty</a><br />
-          <a href="/">Kembali ke WebGIS SPBU</a>
+        <!-- Link -->
+        <section class="panel" style="display:flex;gap:10px;flex-wrap:wrap">
+          <a href="/admin-poverty.html" style="flex:1;text-align:center;padding:9px;border-radius:12px;background:rgba(124,58,237,.22);border:1px solid rgba(167,139,250,.3);font-size:.82rem;font-weight:700">⚙️ Admin</a>
+          <a href="/pengajuan.html" style="flex:1;text-align:center;padding:9px;border-radius:12px;background:rgba(6,182,212,.18);border:1px solid rgba(6,182,212,.3);font-size:.82rem;font-weight:700">📋 Ajukan Bantuan</a>
+          <a href="/" style="flex:1;text-align:center;padding:9px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--border);font-size:.82rem;font-weight:700">⛽ SPBU</a>
         </section>
       </aside>
 
-      <main style="position: relative">
+      <main style="position:relative">
         <div class="map-top">
-          <div class="map-card"><span>Ranking tertinggi</span><strong id="topFamily">-</strong></div>
-          <div class="map-card"><span>Rata-rata skor</span><strong id="avgScore">0.000</strong></div>
+          <div class="map-card"><span>Ranking #1</span><strong id="topFamily">-</strong></div>
+          <div class="map-card"><span>Rata-rata Skor SAW</span><strong id="avgScore">0.000</strong></div>
         </div>
         <div id="map"></div>
       </main>
     </div>
 
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.min.js"></script>
     <script>
+      /* ══════════════════════════════════════════════════════════════════
+         STATE & MAP INIT
+      ══════════════════════════════════════════════════════════════════ */
       const API = "/api/poverty";
-      const state = { rows: [], dashboard: null, markers: new Map(), ibadah: [], ibadahLoaded: false };
-      const map = L.map("map", { zoomControl: true }).setView([-0.0263, 109.3425], 12);
-      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "&copy; OpenStreetMap" }).addTo(map);
-      const markerLayer = L.layerGroup().addTo(map);
-      const heatLayer = L.layerGroup().addTo(map);
-      const ibadahLayer = L.layerGroup();
-
-      const el = (id) => document.getElementById(id);
-      const esc = (value) => String(value ?? "").replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char]));
-      const rp = (value) => value === null || value === undefined ? "Disembunyikan" : new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0 }).format(Number(value || 0));
-      const score = (value) => Number(value || 0).toFixed(3);
-      const badgeClass = (kategori) => kategori === "Sangat Membutuhkan" ? "sangat" : kategori === "Membutuhkan" ? "butuh" : kategori === "Rentan" ? "rentan" : "mampu";
-      const color = (kategori) => kategori === "Sangat Membutuhkan" ? "#dc2626" : kategori === "Membutuhkan" ? "#f97316" : kategori === "Rentan" ? "#facc15" : "#22c55e";
-      const ibadahColors = {
-        "Gereja Katolik": "#7c3aed",
-        GPIB: "#2563eb",
-        GKI: "#0891b2",
-        HKBP: "#16a34a",
-        Pentakosta: "#ea580c",
+      const state = {
+        rows: [],
+        dashboard: null,
+        markers: new Map(),
+        ibadah: [],
+        ibadahLoaded: false,
+        bufferCircle: null,
+        bufferHighlights: [],
+        activeRadius: null,
+        routingControl: null,
       };
 
-      function toast(message) {
-        el("toast").textContent = message;
+      const map = L.map("map", { zoomControl: true }).setView([-0.0263, 109.3425], 12);
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        maxZoom: 19,
+        attribution: "&copy; <a href='https://openstreetmap.org'>OpenStreetMap</a>",
+      }).addTo(map);
+
+      const markerLayer = L.layerGroup().addTo(map);
+      const heatLayer   = L.layerGroup().addTo(map);
+      const ibadahLayer = L.layerGroup();
+
+      /* ══════════════════════════════════════════════════════════════════
+         HELPERS
+      ══════════════════════════════════════════════════════════════════ */
+      const el  = (id) => document.getElementById(id);
+      const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) =>
+        ({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;" }[c]));
+      const rp  = (v) => v == null ? "Disembunyikan"
+        : new Intl.NumberFormat("id-ID", { style:"currency", currency:"IDR", maximumFractionDigits:0 }).format(Number(v||0));
+      const fmt = (v) => Number(v||0).toFixed(3);
+      const fmtM = (m) => m >= 1000 ? `${(m/1000).toFixed(1)} km` : `${m} m`;
+
+      const badgeClass = (k) =>
+        k === "Sangat Membutuhkan" ? "sangat" : k === "Membutuhkan" ? "butuh" : k === "Rentan" ? "rentan" : "mampu";
+      const markerColor = (k) =>
+        k === "Sangat Membutuhkan" ? "#dc2626" : k === "Membutuhkan" ? "#f97316" : k === "Rentan" ? "#facc15" : "#22c55e";
+      const ibadahColors = {
+        "Gereja Katolik":"#7c3aed", GPIB:"#2563eb", GKI:"#0891b2", HKBP:"#16a34a", Pentakosta:"#ea580c",
+      };
+
+      let toastTimer;
+      function toast(msg, duration = 2800) {
+        el("toast").textContent = msg;
         el("toast").classList.add("show");
-        setTimeout(() => el("toast").classList.remove("show"), 2200);
+        clearTimeout(toastTimer);
+        toastTimer = setTimeout(() => el("toast").classList.remove("show"), duration);
       }
 
       async function fetchJson(path) {
-        const response = await fetch(`${API}${path}`);
-        const payload = await response.json();
-        if (!response.ok || payload.success === false) throw new Error(payload.message || "Gagal memuat data");
+        const r = await fetch(`${API}${path}`);
+        const payload = await r.json();
+        if (!r.ok || payload.success === false) throw new Error(payload.message || "Gagal memuat data");
         return payload;
       }
 
       function params() {
-        const kategori = encodeURIComponent(el("categoryFilter").value);
-        const search = encodeURIComponent(el("searchInput").value.trim());
-        return `kategori=${kategori}&search=${search}`;
+        const k = encodeURIComponent(el("categoryFilter").value);
+        const s = encodeURIComponent(el("searchInput").value.trim());
+        return `kategori=${k}&search=${s}`;
       }
 
+      /* ══════════════════════════════════════════════════════════════════
+         LOAD DATA
+      ══════════════════════════════════════════════════════════════════ */
       async function loadData() {
-        const [mapPayload, dashboardPayload] = await Promise.all([
+        const [mapPay, dashPay] = await Promise.all([
           fetchJson(`/map?${params()}`),
-          fetchJson("/dashboard")
+          fetchJson("/dashboard"),
         ]);
-        state.rows = mapPayload.data || [];
-        state.dashboard = dashboardPayload.data || {};
+        state.rows      = mapPay.data || [];
+        state.dashboard = dashPay.data || {};
         renderAll();
       }
 
+      /* ══════════════════════════════════════════════════════════════════
+         RENDER STATS
+      ══════════════════════════════════════════════════════════════════ */
       function renderStats() {
         const d = state.dashboard || {};
         el("statTotal").textContent = d.total_keluarga || 0;
-        el("statHigh").textContent = d.prioritas_tinggi || 0;
-        el("statAid").textContent = rp(d.total_bantuan_tersalurkan || 0);
-        el("statArea").textContent = Object.keys(d.wilayah || {}).length;
-        const sorted = [...state.rows].sort((a, b) => Number(a.ranking || 99) - Number(b.ranking || 99));
+        el("statHigh").textContent  = d.prioritas_tinggi || 0;
+        el("statAid").textContent   = rp(d.total_bantuan_tersalurkan || 0);
+        el("statArea").textContent  = Object.keys(d.wilayah || {}).length;
+        const sorted = [...state.rows].sort((a,b) => Number(a.ranking||99) - Number(b.ranking||99));
         el("topFamily").textContent = sorted[0]?.nama_kepala_keluarga || "-";
-        const avg = state.rows.length ? state.rows.reduce((sum, item) => sum + Number(item.skor_saw || 0), 0) / state.rows.length : 0;
-        el("avgScore").textContent = score(avg);
+        const avg = state.rows.length
+          ? state.rows.reduce((s,r)=>s+Number(r.skor_saw||0),0)/state.rows.length : 0;
+        el("avgScore").textContent = fmt(avg);
       }
 
       function renderAreaStats() {
-        const area = state.rows.reduce((acc, item) => {
-          acc[item.wilayah] = (acc[item.wilayah] || 0) + 1;
-          return acc;
-        }, {});
-        const max = Math.max(1, ...Object.values(area));
-        el("areaStats").innerHTML = Object.entries(area).map(([name, count]) => `
-          <div style="display:grid;grid-template-columns:1fr 42px;gap:10px;align-items:center;margin:9px 0;color:#e5e7eb;font-size:.84rem">
-            <span>${esc(name)}</span><strong>${count}</strong>
-            <div style="grid-column:1/-1;height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden"><div style="height:100%;width:${(count / max) * 100}%;background:linear-gradient(90deg,#7c3aed,#06b6d4)"></div></div>
-          </div>
-        `).join("") || "<p style='color:#cbd5e1'>Belum ada data wilayah.</p>";
+        const area = state.rows.reduce((acc, r) => { acc[r.wilayah]=(acc[r.wilayah]||0)+1; return acc; }, {});
+        const max  = Math.max(1, ...Object.values(area));
+        el("areaStats").innerHTML = Object.entries(area).map(([name,count]) => `
+          <div style="margin:8px 0;font-size:.8rem;color:#e5e7eb">
+            <div style="display:flex;justify-content:space-between;margin-bottom:3px"><span>${esc(name)}</span><strong>${count}</strong></div>
+            <div style="height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden">
+              <div style="height:100%;width:${(count/max)*100}%;background:linear-gradient(90deg,#7c3aed,#06b6d4)"></div>
+            </div>
+          </div>`).join("") || `<p style="color:#94a3b8;font-size:.82rem">Belum ada data.</p>`;
       }
 
-      function popupHtml(item) {
-        const history = (item.riwayat_bantuan || []).length
-          ? `<ul>${item.riwayat_bantuan.map((row) => `<li>${esc(row.jenis_bantuan)} - ${rp(row.jumlah_bantuan)} (${String(row.tanggal_diterima || "").slice(0, 10)})</li>`).join("")}</ul>`
+      /* ══════════════════════════════════════════════════════════════════
+         POPUP HTML – KELUARGA
+      ══════════════════════════════════════════════════════════════════ */
+      function popupHtml(item, nearestChurch) {
+        const hist = (item.riwayat_bantuan || []).length
+          ? `<ul>${item.riwayat_bantuan.map(r=>`<li>${esc(r.jenis_bantuan)} – ${rp(r.jumlah_bantuan)} (${String(r.tanggal_diterima||"").slice(0,10)})</li>`).join("")}</ul>`
           : "<p>Belum ada riwayat bantuan.</p>";
+
+        const nearestHtml = nearestChurch ? `
+          <div class="nearest-info">
+            <p>⛪ <strong>Gereja terdekat:</strong> ${esc(nearestChurch.nama)}</p>
+            <p>📏 Jarak: <strong>${fmtM(nearestChurch.jarak_meter)}</strong></p>
+            <p>🏠 Kapasitas: ${nearestChurch.kapasitas_bantuan || 0} keluarga</p>
+          </div>` : "";
+
         return `
           <div class="popup">
             <h3>${esc(item.nama_kepala_keluarga)}</h3>
-            <p>${esc(item.alamat)}<br>${esc(item.wilayah)}</p>
+            <p>${esc(item.alamat)}<br/>${esc(item.wilayah)}</p>
             <span class="badge ${badgeClass(item.kategori)}">${esc(item.kategori)}</span>
             <div class="popup-grid">
               <div><span>Tanggungan</span><strong>${item.jumlah_tanggungan}</strong></div>
               <div><span>Pendapatan</span><strong>${rp(item.pendapatan_bulanan)}</strong></div>
-              <div><span>Skor SAW</span><strong>${score(item.skor_saw)}</strong></div>
-              <div><span>Ranking</span><strong>#${item.ranking || "-"}</strong></div>
+              <div><span>Skor SAW</span><strong>${fmt(item.skor_saw)}</strong></div>
+              <div><span>Ranking</span><strong>#${item.ranking||"-"}</strong></div>
             </div>
-            <div class="history"><strong>Riwayat Bantuan</strong>${history}</div>
-          </div>
-        `;
-      }
-
-      function ibadahIcon(jenis) {
-        const markerColor = ibadahColors[jenis] || "#64748b";
-        return L.divIcon({
-          className: "",
-          html: `<div class="ibadah-map-marker" style="background:${markerColor}">⛪</div>`,
-          iconSize: [30, 30],
-          iconAnchor: [15, 30],
-          popupAnchor: [0, -28],
-        });
+            ${nearestHtml}
+            <div class="history"><strong>Riwayat Bantuan</strong>${hist}</div>
+            ${nearestChurch ? `<button class="popup-btn route" onclick="showRoute(${item.latitude},${item.longitude},${nearestChurch.lat},${nearestChurch.lng},'${esc(nearestChurch.nama)}')">🗺️ Tampilkan Rute ke Gereja Terdekat</button>` : ""}
+          </div>`;
       }
 
+      /* ══════════════════════════════════════════════════════════════════
+         POPUP HTML – IBADAH (GEREJA)
+      ══════════════════════════════════════════════════════════════════ */
       function ibadahPopupHtml(item) {
-        const markerColor = ibadahColors[item.jenis] || "#64748b";
+        const mc = ibadahColors[item.jenis] || "#64748b";
         return `
           <div class="popup">
             <h3>${esc(item.nama)}</h3>
-            <span class="badge" style="background:${markerColor}22;color:${markerColor};border:1px solid ${markerColor}44">${esc(item.jenis)}</span>
-            <p style="margin-top:10px">${esc(item.alamat)}<br>${esc(item.kelurahan)}</p>
-          </div>
-        `;
+            <span class="badge" style="background:${mc}22;color:${mc};border:1px solid ${mc}44">${esc(item.jenis)}</span>
+            <p style="margin-top:9px">${esc(item.alamat)}<br/>${esc(item.kelurahan)}</p>
+            <div class="popup-grid">
+              <div><span>Kapasitas Bantuan</span><strong>${item.kapasitas_bantuan || 0} KK</strong></div>
+              <div><span>Koordinat</span><strong>${Number(item.lat).toFixed(5)}, ${Number(item.lng).toFixed(5)}</strong></div>
+            </div>
+            ${item.keterangan ? `<p style="margin-top:8px;font-size:.8rem;color:#475569"><em>${esc(item.keterangan)}</em></p>` : ""}
+            <button class="popup-btn primary" onclick="runBufferFromChurch(${item.id}, 1000)">📍 Buffer 1 km dari sini</button>
+          </div>`;
+      }
+
+      /* ══════════════════════════════════════════════════════════════════
+         MARKERS RENDER
+      ══════════════════════════════════════════════════════════════════ */
+      function renderMarkers() {
+        markerLayer.clearLayers();
+        heatLayer.clearLayers();
+        state.markers.clear();
+
+        state.rows.forEach((item) => {
+          const ll = [Number(item.latitude), Number(item.longitude)];
+          if (!Number.isFinite(ll[0]) || !Number.isFinite(ll[1])) return;
+
+          if (el("heatToggle").checked) {
+            L.circle(ll, {
+              radius: 280 + Number(item.skor_saw||0)*800,
+              stroke: false,
+              fillColor: markerColor(item.kategori),
+              fillOpacity: item.kategori === "Sangat Membutuhkan" ? .22 : .12,
+            }).addTo(heatLayer);
+          }
+
+          // Find nearest church from loaded ibadah list (client-side)
+          let nearest = null;
+          if (state.ibadah.length) {
+            let minDist = Infinity;
+            state.ibadah.forEach((church) => {
+              const d = L.latLng(ll).distanceTo(L.latLng([Number(church.lat), Number(church.lng)]));
+              if (d < minDist) { minDist = d; nearest = { ...church, jarak_meter: Math.round(d) }; }
+            });
+          }
+
+          const marker = L.circleMarker(ll, {
+            radius: 9,
+            color: "#ffffff",
+            weight: 2,
+            fillColor: markerColor(item.kategori),
+            fillOpacity: .92,
+          }).addTo(markerLayer);
+
+          marker.bindPopup(popupHtml(item, nearest), { maxWidth: 320 });
+
+          // On popup open: update nearest panel and show in sidebar
+          marker.on("popupopen", () => {
+            if (nearest) {
+              el("nearestResult").classList.add("show");
+              el("nearestName").textContent    = nearest.nama;
+              el("nearestAlamat").textContent  = nearest.alamat + ", " + nearest.kelurahan;
+              el("nearestJarak").textContent   = fmtM(nearest.jarak_meter);
+              el("nearestJenis").textContent   = nearest.jenis;
+              el("nearestKapasitas").textContent = nearest.kapasitas_bantuan || 0;
+            }
+          });
+
+          state.markers.set(String(item.id_keluarga), marker);
+        });
+      }
+
+      /* ══════════════════════════════════════════════════════════════════
+         IBADAH (GEREJA) LAYER
+      ══════════════════════════════════════════════════════════════════ */
+      function ibadahIcon(jenis) {
+        const c = ibadahColors[jenis] || "#64748b";
+        return L.divIcon({
+          className: "",
+          html: `<div class="ibadah-map-marker" style="background:${c}">⛪</div>`,
+          iconSize: [30,30], iconAnchor: [15,30], popupAnchor: [0,-28],
+        });
       }
 
       function renderIbadahMarkers() {
         ibadahLayer.clearLayers();
         state.ibadah.forEach((item) => {
-          const latlng = [Number(item.lat), Number(item.lng)];
-          if (!Number.isFinite(latlng[0]) || !Number.isFinite(latlng[1])) return;
-          L.marker(latlng, { icon: ibadahIcon(item.jenis) })
+          const ll = [Number(item.lat), Number(item.lng)];
+          if (!Number.isFinite(ll[0]) || !Number.isFinite(ll[1])) return;
+          L.marker(ll, { icon: ibadahIcon(item.jenis) })
             .bindPopup(ibadahPopupHtml(item))
             .addTo(ibadahLayer);
         });
+        // Populate buffer church select
+        populateChurchSelect();
+        // Re-render markers to update nearest info
+        renderMarkers();
       }
 
       async function loadIbadahLayer(force = false) {
@@ -424,88 +706,240 @@
         renderIbadahMarkers();
       }
 
-      function renderMarkers() {
-        markerLayer.clearLayers();
-        heatLayer.clearLayers();
-        state.markers.clear();
-        state.rows.forEach((item) => {
-          const latlng = [Number(item.latitude), Number(item.longitude)];
-          if (!Number.isFinite(latlng[0]) || !Number.isFinite(latlng[1])) return;
-          if (el("heatToggle").checked) {
-            L.circle(latlng, {
-              radius: 260 + Number(item.skor_saw || 0) * 720,
-              stroke: false,
-              fillColor: color(item.kategori),
-              fillOpacity: item.kategori === "Sangat Membutuhkan" ? .23 : .14,
-            }).addTo(heatLayer);
-          }
-          const marker = L.circleMarker(latlng, {
-            radius: 9,
-            color: "#ffffff",
-            weight: 2,
-            fillColor: color(item.kategori),
-            fillOpacity: .94,
-          }).bindPopup(popupHtml(item)).addTo(markerLayer);
-          state.markers.set(String(item.id_keluarga), marker);
-        });
+      function populateChurchSelect() {
+        const sel = el("bufferChurchSelect");
+        sel.innerHTML = `<option value="">— Pilih Gereja —</option>` +
+          state.ibadah.map(c => `<option value="${c.id}" data-lat="${c.lat}" data-lng="${c.lng}">${esc(c.nama)} (${esc(c.jenis)})</option>`).join("");
       }
 
+      /* ══════════════════════════════════════════════════════════════════
+         BUFFER ANALYSIS
+      ══════════════════════════════════════════════════════════════════ */
+      function clearBuffer() {
+        if (state.bufferCircle) { map.removeLayer(state.bufferCircle); state.bufferCircle = null; }
+        state.bufferHighlights.forEach((c) => map.removeLayer(c));
+        state.bufferHighlights = [];
+        state.activeRadius = null;
+        el("bufferResult").classList.remove("show");
+        document.querySelectorAll(".radius-btn[data-radius]").forEach(b => b.classList.remove("active"));
+      }
+
+      function runBuffer(churchId, radiusM) {
+        clearBuffer();
+        const option = el("bufferChurchSelect").querySelector(`option[value="${churchId}"]`);
+        if (!option || !churchId) { toast("Pilih gereja terlebih dahulu."); return; }
+        const church = state.ibadah.find(c => String(c.id) === String(churchId));
+        if (!church) return;
+
+        const lat = Number(church.lat);
+        const lng = Number(church.lng);
+        state.activeRadius = radiusM;
+        state.bufferCircle = L.circle([lat, lng], {
+          radius: radiusM,
+          color: "#7c3aed",
+          fillColor: "#7c3aed",
+          fillOpacity: .1,
+          weight: 2,
+          dashArray: "6 4",
+        }).addTo(map);
+
+        const inRadius = [];
+        state.rows.forEach((item) => {
+          const dist = L.latLng([lat, lng]).distanceTo(L.latLng([Number(item.latitude), Number(item.longitude)]));
+          if (dist <= radiusM) {
+            inRadius.push(item);
+            const hl = L.circleMarker([Number(item.latitude), Number(item.longitude)], {
+              radius: 11,
+              color: "#fff",
+              weight: 2,
+              fillColor: "#7c3aed",
+              fillOpacity: .85,
+            });
+            state.bufferHighlights.push(hl);
+            hl.addTo(map);
+          }
+        });
+
+        map.fitBounds(state.bufferCircle.getBounds(), { padding: [30,30] });
+
+        const highCount = inRadius.filter(r => r.kategori === "Sangat Membutuhkan").length;
+        el("bufferChurchName").textContent  = church.nama;
+        el("bufferRadiusLabel").textContent = fmtM(radiusM);
+        el("bufferCount").textContent       = inRadius.length;
+        el("bufferHighCount").textContent   = highCount;
+        el("bufferResult").classList.add("show");
+        toast(`Buffer ${fmtM(radiusM)}: ditemukan ${inRadius.length} keluarga, ${highCount} prioritas tinggi.`);
+      }
+
+      // Called from popup button on ibadah marker
+      window.runBufferFromChurch = (churchId, radiusM) => {
+        // Select the church in the select
+        el("bufferChurchSelect").value = churchId;
+        // Activate button
+        document.querySelectorAll(".radius-btn[data-radius]").forEach(b => {
+          b.classList.toggle("active", Number(b.dataset.radius) === radiusM);
+        });
+        runBuffer(churchId, radiusM);
+        map.closePopup();
+      };
+
+      /* ══════════════════════════════════════════════════════════════════
+         ROUTING (Leaflet Routing Machine + OSRM)
+      ══════════════════════════════════════════════════════════════════ */
+      window.showRoute = (fromLat, fromLng, toLat, toLng, churchName) => {
+        if (state.routingControl) {
+          map.removeControl(state.routingControl);
+          state.routingControl = null;
+        }
+        toast(`🗺️ Memuat rute ke ${churchName}…`, 5000);
+        state.routingControl = L.Routing.control({
+          waypoints: [
+            L.latLng(fromLat, fromLng),
+            L.latLng(toLat, toLng),
+          ],
+          router: L.Routing.osrmv1({
+            serviceUrl: "https://router.project-osrm.org/route/v1",
+          }),
+          routeWhileDragging: false,
+          addWaypoints: false,
+          fitSelectedRoutes: true,
+          lineOptions: {
+            styles: [{ color: "#7c3aed", weight: 5, opacity: .85 }],
+          },
+          createMarker: () => null, // keep original markers
+        }).addTo(map);
+
+        state.routingControl.on("routesfound", (e) => {
+          const r = e.routes[0];
+          const dist = (r.summary.totalDistance / 1000).toFixed(2);
+          const dur  = Math.round(r.summary.totalTime / 60);
+          toast(`✅ Rute ke ${churchName}: ${dist} km, ±${dur} menit.`, 5000);
+        });
+        state.routingControl.on("routingerror", () => {
+          toast("⚠️ Gagal memuat rute. Periksa koneksi internet.");
+        });
+        map.closePopup();
+      };
+
+      // Expose clear route globally
+      window.clearRoute = () => {
+        if (state.routingControl) { map.removeControl(state.routingControl); state.routingControl = null; }
+      };
+
+      /* ══════════════════════════════════════════════════════════════════
+         FAMILY LIST
+      ══════════════════════════════════════════════════════════════════ */
       function renderList() {
         el("familyList").innerHTML = state.rows.map((item) => `
           <article class="family-item" data-id="${item.id_keluarga}">
-            <strong>#${item.ranking || "-"} ${esc(item.nama_kepala_keluarga)}</strong>
-            <small>${esc(item.wilayah)}<br>Skor ${score(item.skor_saw)} - ${item.jumlah_tanggungan} tanggungan</small>
+            <strong>#${item.ranking||"-"} ${esc(item.nama_kepala_keluarga)}</strong>
+            <small>${esc(item.wilayah)}<br>Skor ${fmt(item.skor_saw)} · ${item.jumlah_tanggungan} tanggungan</small>
             <br><span class="badge ${badgeClass(item.kategori)}">${esc(item.kategori)}</span>
-          </article>
-        `).join("") || "<p style='color:#cbd5e1'>Tidak ada keluarga sesuai filter.</p>";
+          </article>`).join("") || `<p style='color:#94a3b8;font-size:.82rem'>Tidak ada keluarga sesuai filter.</p>`;
+
         document.querySelectorAll(".family-item").forEach((item) => {
           item.addEventListener("click", () => {
             const marker = state.markers.get(item.dataset.id);
             if (!marker) return;
             map.setView(marker.getLatLng(), 17);
             marker.openPopup();
-            if (window.innerWidth <= 880) el("sidebar").classList.remove("open");
+            if (window.innerWidth <= 900) el("sidebar").classList.remove("open");
           });
         });
       }
 
+      /* ══════════════════════════════════════════════════════════════════
+         RENDER ALL
+      ══════════════════════════════════════════════════════════════════ */
       function renderAll() {
         renderStats();
         renderAreaStats();
         renderMarkers();
         renderList();
         if (state.rows.length) {
-          const bounds = L.latLngBounds(state.rows.map((item) => [item.latitude, item.longitude]));
-          if (bounds.isValid()) map.fitBounds(bounds, { padding: [40, 40], maxZoom: 15 });
+          const bounds = L.latLngBounds(
+            state.rows.filter(r => Number.isFinite(Number(r.latitude))).map(r => [r.latitude, r.longitude])
+          );
+          if (bounds.isValid()) map.fitBounds(bounds, { padding:[40,40], maxZoom:15 });
         }
       }
 
+      /* ══════════════════════════════════════════════════════════════════
+         EVENT LISTENERS
+      ══════════════════════════════════════════════════════════════════ */
+      // Filter / search
+      ["categoryFilter","heatToggle"].forEach(id =>
+        el(id).addEventListener("change", () => loadData().catch(e => toast(e.message))));
+
       let debounce;
-      ["categoryFilter", "heatToggle"].forEach((id) => el(id).addEventListener("change", () => loadData().catch((error) => toast(error.message))));
+      el("searchInput").addEventListener("input", () => {
+        clearTimeout(debounce);
+        debounce = setTimeout(() => loadData().catch(e => toast(e.message)), 280);
+      });
+
+      // Ibadah toggle
       el("ibadahToggle").addEventListener("change", async () => {
         try {
           if (el("ibadahToggle").checked) {
             await loadIbadahLayer(true);
             ibadahLayer.addTo(map);
             el("ibadahLegendPanel").classList.add("active");
+            el("bufferPanel").style.opacity = "1";
           } else {
             map.removeLayer(ibadahLayer);
             el("ibadahLegendPanel").classList.remove("active");
+            clearBuffer();
           }
-        } catch (error) {
+        } catch (e) {
           el("ibadahToggle").checked = false;
           el("ibadahLegendPanel").classList.remove("active");
-          toast(error.message);
+          toast(e.message);
         }
       });
-      el("searchInput").addEventListener("input", () => {
-        clearTimeout(debounce);
-        debounce = setTimeout(() => loadData().catch((error) => toast(error.message)), 260);
+
+      // Buffer radius buttons
+      document.querySelectorAll(".radius-btn[data-radius]").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          const churchId = el("bufferChurchSelect").value;
+          const radiusM  = Number(btn.dataset.radius);
+          document.querySelectorAll(".radius-btn[data-radius]").forEach(b => b.classList.remove("active"));
+          btn.classList.add("active");
+          // Auto-load ibadah if needed
+          if (!state.ibadahLoaded) {
+            loadIbadahLayer(true).then(() => {
+              ibadahLayer.addTo(map);
+              el("ibadahToggle").checked = true;
+              el("ibadahLegendPanel").classList.add("active");
+              runBuffer(churchId, radiusM);
+            }).catch(e => toast(e.message));
+          } else {
+            runBuffer(churchId, radiusM);
+          }
+        });
       });
+
+      el("btnClearBuffer").addEventListener("click", clearBuffer);
+
+      // Church select change clears buffer
+      el("bufferChurchSelect").addEventListener("change", () => {
+        clearBuffer();
+        if (state.activeRadius) {
+          const btn = document.querySelector(`.radius-btn[data-radius="${state.activeRadius}"]`);
+          if (btn) btn.classList.remove("active");
+        }
+      });
+
+      // Mobile
       el("mobileToggle").addEventListener("click", () => el("sidebar").classList.toggle("open"));
       window.addEventListener("resize", () => map.invalidateSize());
 
-      loadData().catch((error) => toast(error.message));
+      /* ══════════════════════════════════════════════════════════════════
+         INIT
+      ══════════════════════════════════════════════════════════════════ */
+      loadData().catch(e => toast(e.message));
+
+      // Pre-load ibadah layer quietly so nearest-church info is available from start
+      loadIbadahLayer(true).catch(() => {/* ignore silent preload errors */});
     </script>
   </body>
 </html>