feat: add animated custom markers for SPBU and implement centralized application logic in app.js

admin.html

@@ -1099,6 +1099,35 @@
       }
     }
 
+    /* ---- Custom Marker ---- */
+    .custom-marker {
+      display: flex; justify-content: center; align-items: center;
+    }
+    .marker-halo {
+      position: absolute;
+      width: 40px; height: 40px;
+      border-radius: 50%;
+      animation: pulse 2s infinite ease-out;
+    }
+    .marker-halo.spbu { background: rgba(34, 197, 94, 0.5); }
+    .marker-halo.spbu-off { background: rgba(245, 158, 11, 0.5); }
+    .marker-halo.ibadah { background: rgba(14, 165, 233, 0.5); }
+    .marker-halo.miskin { background: rgba(239, 68, 68, 0.5); }
+
+    .marker-icon-inner {
+      position: relative; z-index: 2;
+      width: 28px; height: 28px;
+      background: white; border-radius: 50%;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+      display: flex; justify-content: center; align-items: center;
+      font-size: 14px;
+    }
+    
+    @keyframes pulse {
+      0% { transform: scale(0.5); opacity: 1; }
+      100% { transform: scale(1.5); opacity: 0; }
+    }
+
     /* ---- Floating Panels ---- */
     .search-panel {
       position: absolute; top: 16px; left: 50%; transform: translateX(-50%);