revert: rollback to version before Anggaran & Decision Dashboard (commit 45fc0b7)

frontend/app.js

@@ -117,34 +117,12 @@ const timelineList = document.getElementById("timeline-list");
 const hourlySection = document.getElementById("hourly-section");
 const hourlyGrid = document.getElementById("hourly-grid");
 
-// Decision Dashboard UI Elements
-const decLocationSelect = document.getElementById("dec-location-select");
-const decTotalVol = document.getElementById("dec-total-vol");
-const decVolStatus = document.getElementById("dec-vol-status");
-const decCostVal = document.getElementById("dec-cost-val");
-const decEfficiencyVal = document.getElementById("dec-efficiency-val");
-const decSavedVal = document.getElementById("dec-saved-val");
-const decWorkloadGrid = document.getElementById("dec-workload-grid");
-const decTruckLarge = document.getElementById("dec-truck-large");
-const decTruckSmall = document.getElementById("dec-truck-small");
-const decCriticalTitle = document.getElementById("dec-critical-title");
-const decCriticalList = document.getElementById("dec-critical-list");
-
-// Weather Modal UI Elements
-const weatherModal = document.getElementById("weather-modal");
-const modalWeatherLoc = document.getElementById("modal-weather-loc");
-const modalSumTotal = document.getElementById("modal-sum-total");
-const modalSumAvg = document.getElementById("modal-sum-avg");
-const modalSumBadge = document.getElementById("modal-sum-badge");
-const weatherModalList = document.getElementById("weather-modal-list");
-
 // State
 let selectedLocation = "Menteng";
 let rainValue = 0; // 0 means Auto (Open-Meteo)
 let map;
 let mapMarkers = {};
 let routeLine = null;
-let lastPredictionData = null;
 
 // ==========================================
 // SPA MULTIPAGE ROUTING
@@ -173,11 +151,8 @@ function switchPage(pageId) {
         loadAlertsFeed();
     } else if (pageId === "page-autopilot") {
         loadAutopilotFeed();
-    } else if (pageId === "page-predictor") {
-        if (map) setTimeout(() => { map.invalidateSize(); }, 200);
-        if (lastPredictionData) {
-            updateDecisionDashboard(lastPredictionData, selectedLocation);
-        }
+    } else if (pageId === "page-predictor" && map) {
+        setTimeout(() => { map.invalidateSize(); }, 200);
     }
 }
 
@@ -414,41 +389,38 @@ async function fetchLiveWeather(loc) {
         const precipList = dailyData.precipitation_sum || [];
         const precipToday = precipList[2] || 0;
         
-        let cond = "Cerah Berawan";
-        if (code === 0 && precipToday < 0.5) cond = "Cerah";
-        else if (code <= 2 && precipToday < 0.5) cond = "Cerah Berawan";
-        else if (code <= 3 && precipToday < 0.5) cond = "Berawan";
-        else if (precipToday >= 20.0) cond = "Hujan Lebat";
-        else if (precipToday >= 5.0) cond = "Hujan Sedang";
-        else if (precipToday >= 0.5) cond = "Hujan Ringan";
-        else cond = "Berawan";
+        let cond = "Cloudy";
+        if (code === 0) cond = "Clear Sky";
+        else if (code > 0 && code < 4) cond = "Partly Cloudy";
+        else if (code >= 51 && code <= 67) cond = "Rainy";
+        else if (code >= 80 && code <= 82) cond = "Showers";
 
         if (weatherForecastText) weatherForecastText.textContent = `${temp}°C - ${cond}`;
         if (weatherLocationText) weatherLocationText.textContent = `${loc} (${coord.city})`;
         if (weatherPrecip) weatherPrecip.textContent = `${precipToday.toFixed(1)} mm`;
         
         if (weatherAlert) {
-            if (precipToday >= 50) {
-                weatherAlert.textContent = "FLOOD DANGER 🔴";
-                weatherAlert.className = "highlight text-red";
-            } else if (precipToday >= 20) {
+            if (precipToday > 30) {
                 weatherAlert.textContent = "HEAVY RAIN 🟡";
                 weatherAlert.className = "highlight text-warning";
+            } else if (precipToday > 50) {
+                weatherAlert.textContent = "FLOOD DANGER 🔴";
+                weatherAlert.className = "highlight text-red";
             } else {
-                weatherAlert.textContent = "Normal / Aman";
+                weatherAlert.textContent = "Normal conditions";
                 weatherAlert.className = "highlight";
             }
         }
     } catch (err) {
         console.warn("Weather fetch timed out/failed. Using fallback forecast.", err);
         // Instant Fallback Weather Data
-        const fallbackTemp = 32.5 + Math.random() * 2.0;
+        const fallbackTemp = 28.5 + Math.random() * 3.0;
         const fallbackPrecip = 0.0;
-        if (weatherForecastText) weatherForecastText.textContent = `${fallbackTemp.toFixed(1)}°C - Cerah Berawan`;
+        if (weatherForecastText) weatherForecastText.textContent = `${fallbackTemp.toFixed(1)}°C - Partly Cloudy`;
         if (weatherLocationText) weatherLocationText.textContent = `${loc} (${coord.city})`;
         if (weatherPrecip) weatherPrecip.textContent = `${fallbackPrecip.toFixed(1)} mm`;
         if (weatherAlert) {
-            weatherAlert.textContent = "Normal / Aman";
+            weatherAlert.textContent = "Normal conditions";
             weatherAlert.className = "highlight";
         }
     }
@@ -603,285 +575,8 @@ function updateDashboardData(data, confScore, message) {
     } else {
         if (hourlySection) hourlySection.style.display = "none";
     }
-
-    // Save and update Decision Dashboard
-    lastPredictionData = data;
-    updateDecisionDashboard(data, selectedLocation);
-}
-
-// ==========================================
-// DECISION DASHBOARD (EXECUTIVE LOGISTICS & COST OPTIMIZER)
-// ==========================================
-function updateDecisionDashboard(data, location) {
-    if (!data || !data.prediction_results || data.prediction_results.length === 0) return;
-
-    const results = data.prediction_results;
-    const weekResults = results.slice(0, 7);
-    const totalVolume = weekResults.reduce((acc, curr) => acc + curr.total_volume_ton, 0);
-    const totalTrucks = weekResults.reduce((acc, curr) => acc + curr.recommended_trucks, 0);
-    const config = KECAMATAN_DATABASE[location] || KECAMATAN_DATABASE["Menteng"];
-
-    // 1. Total Volume Prediksi
-    if (decTotalVol) decTotalVol.textContent = totalVolume.toFixed(1);
-    if (decVolStatus) decVolStatus.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#00F0FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Berhasil diprediksi (${weekResults.length} hari)`;
-
-    // 2. Estimasi Biaya Operasional (Pergub DKI & Standar DLH: Rp 95.000/ton + SDM Rp 504.000/truk/hari)
-    const costProactive = Math.round(((totalVolume * 95000) + (totalTrucks * 504000)) / 100000) * 100000;
-    const costReactive = Math.round((costProactive * 2.048) / 100000) * 100000;
-    const costSaved = costReactive - costProactive;
-    const efficiencyPct = ((costSaved / costReactive) * 100).toFixed(1);
-
-    if (decCostVal) decCostVal.textContent = `Rp ${costProactive.toLocaleString('id-ID')}`;
-    if (decEfficiencyVal) decEfficiencyVal.textContent = `${efficiencyPct}%`;
-    if (decSavedVal) decSavedVal.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg> Hemat Rp ${costSaved.toLocaleString('id-ID')} dibanding Reaktif`;
-
-    // 3. Alokasi Armada Spesifik (Dump Truck 60% vs Pick-up 40% pemukiman padat)
-    const dumpTruckUnits = Math.ceil(totalTrucks * 0.60);
-    const pickupUnits = Math.ceil(totalTrucks * 0.40 * 1.75);
-    if (decTruckLarge) decTruckLarge.textContent = dumpTruckUnits;
-    if (decTruckSmall) decTruckSmall.textContent = pickupUnits;
-
-    // 4. Peta Beban Kerja Harian (7 Hari Horizon)
-    if (decWorkloadGrid) {
-        decWorkloadGrid.innerHTML = "";
-        const dayAbbrsIndo = ["MIN", "SEN", "SEL", "RAB", "KAM", "JUM", "SAB"];
-
-        weekResults.forEach(day => {
-            const dateObj = new Date(day.date);
-            const dayAbbr = dayAbbrsIndo[dateObj.getDay()] || "HARI";
-            const isCritical = day.risk_status === "CRITICAL" || day.total_volume_ton > (config.normal_avg * 1.18);
-            const isWarning = day.risk_status === "WARNING";
-
-            let badgeClass = "normal";
-            if (isCritical) badgeClass = "peak-critical";
-            else if (isWarning || dateObj.getDay() === 0 || dateObj.getDay() === 5 || dateObj.getDay() === 6) badgeClass = "warning";
-
-            const card = document.createElement("div");
-            card.className = `workload-day-card ${isCritical ? "critical" : ""}`;
-            
-            // Shift schedule: S1 & S2 always active, S3 active on peak/critical days
-            const showShift3 = isCritical || day.total_volume_ton > (config.normal_avg * 1.10);
-            
-            card.innerHTML = `
-                <div class="workload-day-badge ${badgeClass}">${dayAbbr}</div>
-                <div class="workload-ton-val">${day.total_volume_ton.toFixed(1)}</div>
-                <div class="workload-ton-label">TON</div>
-                <div class="workload-trucks-count">
-                    <span>🚚</span> <span>${day.recommended_trucks}</span>
-                </div>
-                <div class="workload-shifts-list">
-                    <span class="workload-shift-pill s1">S1: 04:00-10:00</span>
-                    <span class="workload-shift-pill s2">S2: 10:00-16:00</span>
-                    ${showShift3 ? '<span class="workload-shift-pill s3">S3: 19:00-01:00</span>' : ''}
-                </div>
-            `;
-            decWorkloadGrid.appendChild(card);
-        });
-    }
-
-    // 5. Rencana Aksi Kritis
-    const peakDay = weekResults.reduce((max, d) => d.total_volume_ton > max.total_volume_ton ? d : max, weekResults[0]);
-    if (peakDay) {
-        const peakDateObj = new Date(peakDay.date);
-        const dayAbbrsIndo = ["MIN", "SEN", "SEL", "RAB", "KAM", "JUM", "SAB"];
-        const peakDayName = dayAbbrsIndo[peakDateObj.getDay()] || "HARI";
-        
-        let situationTag = "BEBAN PUNCAK & KEPADATAN RUTIN";
-        if (peakDay.event_info) {
-            situationTag = peakDay.event_info.toUpperCase();
-        } else if (peakDay.risk_status === "CRITICAL") {
-            situationTag = "HUJAN LEBAT & BEBAN PUNCAK";
-        }
-
-        if (decCriticalTitle) {
-            decCriticalTitle.textContent = `AKSI HARI ${peakDayName} (${situationTag})`;
-        }
-
-        if (decCriticalList) {
-            decCriticalList.innerHTML = `
-                <li>Aktifkan <strong>Shift 3 (19:00 - 01:00 WIB)</strong> untuk evakuasi cepat TPS permukiman ${location} guna mencegah penumpukan sampah malam.</li>
-                <li>Prioritaskan dispatch <strong>${Math.ceil(peakDay.recommended_trucks * 0.60)} unit Dump Truck 15T</strong> via jalur bebas hambatan untuk mitigasi antrean gerbang timbang TPST Bantargebang.</li>
-                <li>Siagakan <strong>pompa portabel penyedot lindi</strong> dan armada sapu bersih di titik TPS transfer point.</li>
-                <li>Kerahkan <strong>${Math.ceil(peakDay.recommended_trucks * 0.40 * 1.75)} armada Pick-up</strong> untuk penyisiran lorong pemukiman padat sebelum jam sibuk warga (pukul 06:00 WIB).</li>
-            `;
-        }
-    }
-}
-
-// ==========================================
-// 7-DAY WEATHER FORECAST MODAL CONTROLLER
-// ==========================================
-async function openWeatherModal(loc) {
-    const targetLoc = loc || selectedLocation;
-    const coord = KECAMATAN_DATABASE[targetLoc];
-    if (!coord) return;
-
-    if (modalWeatherLoc) modalWeatherLoc.textContent = targetLoc;
-    if (weatherModal) {
-        weatherModal.classList.add("open");
-    }
-
-    if (weatherModalList) {
-        weatherModalList.innerHTML = '<div class="weather-modal-loading">Mengambil data cuaca 7 hari dari Open-Meteo API...</div>';
-    }
-
-    try {
-        const url = `https://api.open-meteo.com/v1/forecast?latitude=${coord.coords[0]}&longitude=${coord.coords[1]}&daily=weathercode,temperature_2m_max,temperature_2m_min,precipitation_sum,precipitation_hours&timezone=Asia/Jakarta&forecast_days=7`;
-        
-        const timeoutPromise = new Promise((_, reject) => 
-            setTimeout(() => reject(new Error("Timeout")), 2000)
-        );
-        const fetchPromise = fetch(url).then(res => {
-            if (!res.ok) throw new Error("HTTP Error");
-            return res.json();
-        });
-
-        const data = await Promise.race([fetchPromise, timeoutPromise]);
-        const daily = data.daily || {};
-        const dates = daily.time || [];
-        const codes = daily.weathercode || [];
-        const tempMax = daily.temperature_2m_max || [];
-        const tempMin = daily.temperature_2m_min || [];
-        const precipSum = daily.precipitation_sum || [];
-        const precipHours = daily.precipitation_hours || [];
-
-        let totalPrecip = 0;
-        let totalHours = 0;
-        precipSum.forEach(p => totalPrecip += (p || 0));
-        precipHours.forEach(h => totalHours += (h || 0));
-
-        const avgHr = totalHours > 0 ? (totalPrecip / totalHours) : (totalPrecip / 7);
-
-        if (modalSumTotal) modalSumTotal.textContent = `${totalPrecip.toFixed(1)}mm`;
-        if (modalSumAvg) modalSumAvg.textContent = `${avgHr.toFixed(1)}mm/hr`;
-
-        // BMKG Weather Category badge
-        if (modalSumBadge) {
-            if (totalPrecip < 20.0) {
-                modalSumBadge.textContent = "KERING";
-                modalSumBadge.className = "weather-dryness-badge dry";
-            } else if (totalPrecip < 50.0) {
-                modalSumBadge.textContent = "LEMBAP";
-                modalSumBadge.className = "weather-dryness-badge wet";
-            } else {
-                modalSumBadge.textContent = "HUJAN LEBAT";
-                modalSumBadge.className = "weather-dryness-badge heavy";
-            }
-        }
-
-        const dayNamesIndo = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
-        
-        if (weatherModalList) {
-            weatherModalList.innerHTML = "";
-            dates.forEach((dStr, idx) => {
-                const dateObj = new Date(dStr);
-                const dayName = dayNamesIndo[dateObj.getDay()] || "Hari";
-                const wCode = codes[idx] || 0;
-                const pVal = precipSum[idx] || 0.0;
-                const tMax = Math.round(tempMax[idx] || 33);
-                const tMin = Math.round(tempMin[idx] || 25);
-
-                let icon = "☀️";
-                let condition = "Cerah";
-
-                // BMKG Meteorological Standard Interpretation
-                if (wCode >= 95 || (wCode >= 80 && pVal >= 20.0)) {
-                    icon = "⛈️";
-                    condition = "Badai Petir";
-                } else if (pVal >= 20.0) {
-                    icon = "🌧️";
-                    condition = "Hujan Lebat";
-                } else if (pVal >= 5.0) {
-                    icon = "🌧️";
-                    condition = "Hujan Sedang";
-                } else if (pVal >= 1.5) {
-                    icon = "🌦️";
-                    condition = "Hujan Ringan";
-                } else if (pVal >= 0.5) {
-                    icon = "⛅";
-                    condition = "Berawan";
-                } else {
-                    // Under 0.5mm is non-rainy (Cerah / Cerah Berawan)
-                    if (wCode === 0) {
-                        icon = "☀️";
-                        condition = "Cerah";
-                    } else if (wCode <= 2) {
-                        icon = "🌤️";
-                        condition = "Cerah Berawan";
-                    } else {
-                        icon = "⛅";
-                        condition = "Berawan";
-                    }
-                }
-
-                const precipDisplay = pVal >= 0.5 ? `${pVal.toFixed(1)}mm` : '';
-
-                const row = document.createElement("div");
-                row.className = "weather-forecast-row";
-                row.innerHTML = `
-                    <span class="w-row-day">${dayName}</span>
-                    <span class="w-row-icon">${icon}</span>
-                    <span class="w-row-cond">${condition}</span>
-                    <span class="w-row-precip">${precipDisplay}</span>
-                    <div class="w-row-temp">
-                        <span class="w-temp-max">${tMax}°</span>
-                        <span class="w-temp-min">${tMin}°</span>
-                    </div>
-                `;
-                weatherModalList.appendChild(row);
-            });
-        }
-
-    } catch (err) {
-        console.warn("Open-Meteo weather modal fallback:", err);
-        // Fallback matching real Jakarta climate baseline
-        const fallbackData = [
-            { day: "Kam", icon: "🌦️", cond: "Hujan Ringan", precip: "1.3mm", max: 33, min: 25 },
-            { day: "Jum", icon: "⛅", cond: "Berawan", precip: "", max: 35, min: 25 },
-            { day: "Sab", icon: "🌤️", cond: "Cerah Berawan", precip: "", max: 36, min: 25 },
-            { day: "Min", icon: "☀️", cond: "Cerah", precip: "", max: 34, min: 26 },
-            { day: "Sen", icon: "🌦️", cond: "Hujan Ringan", precip: "1.5mm", max: 33, min: 26 },
-            { day: "Sel", icon: "🌤️", cond: "Cerah Berawan", precip: "", max: 35, min: 26 },
-            { day: "Rab", icon: "🌧️", cond: "Hujan Sedang", precip: "3.6mm", max: 35, min: 27 }
-        ];
-
-        if (modalSumTotal) modalSumTotal.textContent = "6.4mm";
-        if (modalSumAvg) modalSumAvg.textContent = "0.9mm/hr";
-        if (modalSumBadge) {
-            modalSumBadge.textContent = "KERING";
-            modalSumBadge.className = "weather-dryness-badge dry";
-        }
-
-        if (weatherModalList) {
-            weatherModalList.innerHTML = "";
-            fallbackData.forEach(item => {
-                const row = document.createElement("div");
-                row.className = "weather-forecast-row";
-                row.innerHTML = `
-                    <span class="w-row-day">${item.day}</span>
-                    <span class="w-row-icon">${item.icon}</span>
-                    <span class="w-row-cond">${item.cond}</span>
-                    <span class="w-row-precip">${item.precip}</span>
-                    <div class="w-row-temp">
-                        <span class="w-temp-max">${item.max}°</span>
-                        <span class="w-temp-min">${item.min}°</span>
-                    </div>
-                `;
-                weatherModalList.appendChild(row);
-            });
-        }
-    }
 }
 
-function closeWeatherModal() {
-    if (weatherModal) {
-        weatherModal.classList.remove("open");
-    }
-}
-
-window.openWeatherModal = openWeatherModal;
-window.closeWeatherModal = closeWeatherModal;
-
 // Request CSV from Backend API and download it
 async function runExport() {
     if (!exportBtn) return;

frontend/index.html

@@ -1,18 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="google-site-verification" content="Uv5ENuSBUKzeJte5ypBe6VGuYhEAZPqszpdCJPIawq4" />
     <title>Aeterna AI - #1 AI Prediksi Sampah Jakarta & DKI Jakarta | By Faril Putra Pratama</title>
-
+    
     <!-- Primary SEO Meta Tags -->
     <meta name="title" content="Aeterna AI - #1 AI Prediksi Sampah Jakarta & DKI Jakarta | By Faril Putra Pratama">
-    <meta name="description"
-        content="Aeterna AI (aeternaai.biz.id) adalah platform AI Prediksi Sampah #1 untuk 44 Kecamatan DKI Jakarta (ai prediksi sampah jkt) dikembangkan oleh Faril Putra Pratama berbasis BPS Jumlah Jiwa & Amazon Chronos T5.">
-    <meta name="keywords"
-        content="ai prediksi sampah, ai prediksi sampah jkt, ai prediksi sampah jakarta, aeterna ai, aeterna ai jakarta, aeternaai.biz.id, Faril Putra Pratama, FARILtau72, Prediksi Sampah Jakarta, DLH DKI Jakarta, AI Persampahan, Amazon Chronos T5, BPS Jakarta Jumlah Jiwa, Smart City Jakarta, TPST Bantargebang">
+    <meta name="description" content="Aeterna AI (aeternaai.biz.id) adalah platform AI Prediksi Sampah #1 untuk 44 Kecamatan DKI Jakarta (ai prediksi sampah jkt) dikembangkan oleh Faril Putra Pratama berbasis BPS Jumlah Jiwa & Amazon Chronos T5.">
+    <meta name="keywords" content="ai prediksi sampah, ai prediksi sampah jkt, ai prediksi sampah jakarta, aeterna ai, aeterna ai jakarta, aeternaai.biz.id, Faril Putra Pratama, FARILtau72, Prediksi Sampah Jakarta, DLH DKI Jakarta, AI Persampahan, Amazon Chronos T5, BPS Jakarta Jumlah Jiwa, Smart City Jakarta, TPST Bantargebang">
     <meta name="author" content="Faril Putra Pratama">
     <meta name="developer" content="Faril Putra Pratama (@FARILtau72)">
     <meta name="github:repository" content="https://github.com/FARILtau72/Aeterna-Ai">
@@ -25,8 +22,7 @@
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://www.aeternaai.biz.id/">
     <meta property="og:title" content="Aeterna AI (AI Prediksi Sampah JKT) by Faril Putra Pratama">
-    <meta property="og:description"
-        content="Platform AI Prediksi Sampah #1 untuk 44 Kecamatan DKI Jakarta dikembangkan oleh Faril Putra Pratama. GitHub: https://github.com/FARILtau72/Aeterna-Ai | LinkedIn: https://www.linkedin.com/in/faril-putra-pratama-81561a280/">
+    <meta property="og:description" content="Platform AI Prediksi Sampah #1 untuk 44 Kecamatan DKI Jakarta dikembangkan oleh Faril Putra Pratama. GitHub: https://github.com/FARILtau72/Aeterna-Ai | LinkedIn: https://www.linkedin.com/in/faril-putra-pratama-81561a280/">
     <meta property="og:image" content="https://www.aeternaai.biz.id/static/assets/og_banner.png">
     <meta property="og:site_name" content="Aeterna AI">
     <meta property="og:locale" content="id_ID">
@@ -35,17 +31,14 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:url" content="https://www.aeternaai.biz.id/">
     <meta name="twitter:title" content="Aeterna AI by Faril Putra Pratama - #1 Waste Intelligence Platform DKI Jakarta">
-    <meta name="twitter:description"
-        content="Sistem AI peramalan sampah & armada logistik 44 Kecamatan DKI Jakarta dikembangkan oleh Faril Putra Pratama.">
+    <meta name="twitter:description" content="Sistem AI peramalan sampah & armada logistik 44 Kecamatan DKI Jakarta dikembangkan oleh Faril Putra Pratama.">
     <meta name="twitter:image" content="https://www.aeternaai.biz.id/static/assets/og_banner.png">
 
     <!-- GEO Meta Citations for LLMs (ChatGPT, Gemini, Claude, Perplexity) -->
-    <meta name="citation_title"
-        content="Aeterna AI: Spatial-Temporal Waste Generation Forecasting Across 44 Kecamatans in DKI Jakarta">
+    <meta name="citation_title" content="Aeterna AI: Spatial-Temporal Waste Generation Forecasting Across 44 Kecamatans in DKI Jakarta">
     <meta name="citation_author" content="Faril Putra Pratama (@FARILtau72)">
     <meta name="citation_publication_date" content="2026">
-    <meta name="citation_technical_report_institution"
-        content="Aeterna AI Labs & Faril Putra Pratama Official Portal (aeternaai.biz.id)">
+    <meta name="citation_technical_report_institution" content="Aeterna AI Labs & Faril Putra Pratama Official Portal (aeternaai.biz.id)">
 
     <!-- Geo-Location Meta Tags for Regional Indonesian Search Priority -->
     <meta name="geo.region" content="ID-JK" />
@@ -59,15 +52,11 @@
     <!-- Google Fonts -->
     <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=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;700&display=swap"
-        rel="stylesheet">
-
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
+    
     <!-- Leaflet.js Map Library -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
 
     <!-- Three.js 3D Library -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
@@ -127,7 +116,6 @@
     }
     </script>
 </head>
-
 <body>
     <!-- Background Canvas for Interactive Particle Rain -->
     <canvas id="rain-canvas"></canvas>
@@ -141,7 +129,7 @@
         <nav class="nav-links">
             <button class="nav-btn active" data-target="page-home" onclick="switchPage('page-home')">HOME</button>
             <button class="nav-btn" data-target="page-autopilot" onclick="switchPage('page-autopilot')">AI AUTOPILOT</button>
-            <button class="nav-btn" data-target="page-predictor" onclick="switchPage('page-predictor')">SIMULATION & DECISION TOOL</button>
+            <button class="nav-btn" data-target="page-predictor" onclick="switchPage('page-predictor')">SIMULATION TOOL</button>
             <button class="nav-btn" data-target="page-news" onclick="switchPage('page-news')">NEWS FEED</button>
             <button class="nav-btn" data-target="page-alerts" onclick="switchPage('page-alerts')">REGIONAL ALERTS</button>
             <button class="nav-btn" data-target="page-education" onclick="switchPage('page-education')">WASTE EDUCATION</button>
@@ -157,8 +145,7 @@
         <section class="hero-section">
             <div class="hero-content">
                 <h1 class="hero-title">NEXT-GEN WASTE FORECASTING</h1>
-                <p class="hero-subtitle">Meningkatkan efisiensi tata kelola sampah DKI Jakarta hingga 98.28% dengan
-                    pemodelan spasial temporal real-time.</p>
+                <p class="hero-subtitle">Meningkatkan efisiensi tata kelola sampah DKI Jakarta hingga 98.28% dengan pemodelan spasial temporal real-time.</p>
                 <div class="hero-actions">
                     <button class="action-btn" onclick="switchPage('page-autopilot')">
                         <span class="btn-text">OPEN AUTOPILOT</span>
@@ -192,114 +179,70 @@
                 <div class="panel feature-card">
                     <div class="feature-icon font-display">01</div>
                     <h3 class="feature-name">Akurasi Validitas Tinggi (98.28%)</h3>
-                    <p class="feature-desc">Menggunakan arsitektur model Gradient Boosting Regressor (GBR) yang
-                        dioptimasi via GridSearchCV dengan metrik komparasi MAE, RMSE, dan MAPE secara berdampingan.</p>
+                    <p class="feature-desc">Menggunakan arsitektur model Gradient Boosting Regressor (GBR) yang dioptimasi via GridSearchCV dengan metrik komparasi MAE, RMSE, dan MAPE secara berdampingan.</p>
                 </div>
                 <div class="panel feature-card">
                     <div class="feature-icon font-display">02</div>
                     <h3 class="feature-name">Integrasi Live Cuaca Open-Meteo</h3>
-                    <p class="feature-desc">API dinamis asinkron yang menarik data curah hujan live tingkat kecamatan
-                        secara real-time untuk memprediksi tonase sampah basah akibat rembesan air hujan.</p>
+                    <p class="feature-desc">API dinamis asinkron yang menarik data curah hujan live tingkat kecamatan secara real-time untuk memprediksi tonase sampah basah akibat rembesan air hujan.</p>
                 </div>
                 <div class="panel feature-card">
                     <div class="feature-icon font-display">03</div>
                     <h3 class="feature-name">Pemantauan Berita Sampah 1 Jam</h3>
-                    <p class="feature-desc">AI Scheduler internal merayap internet secara berkala tiap 1 jam untuk
-                        menangkap isu operasional, pembatasan Bantargebang, dan regulasi persampahan DKI Jakarta.</p>
+                    <p class="feature-desc">AI Scheduler internal merayap internet secara berkala tiap 1 jam untuk menangkap isu operasional, pembatasan Bantargebang, dan regulasi persampahan DKI Jakarta.</p>
                 </div>
                 <div class="panel feature-card">
                     <div class="feature-icon font-display">04</div>
                     <h3 class="feature-name">Kalibrasi Spasial 44 Kecamatan</h3>
-                    <p class="feature-desc">Model peramalan dikalibrasi hulu-hilir menggunakan data primer Dinas
-                        Lingkungan Hidup DKI Jakarta, mencakup tonase baseline spesifik tiap kecamatan secara akuntabel.
-                    </p>
+                    <p class="feature-desc">Model peramalan dikalibrasi hulu-hilir menggunakan data primer Dinas Lingkungan Hidup DKI Jakarta, mencakup tonase baseline spesifik tiap kecamatan secara akuntabel.</p>
                 </div>
             </div>
         </section>
 
         <!-- Cinematic Waste Crisis Scroll Section -->
-        <section class="container crisis-story-section"
-            style="margin-top: 4rem; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; position: relative;">
-
+        <section class="container crisis-story-section" style="margin-top: 4rem; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; position: relative;">
+            
             <!-- Sticky Left Panel (Waste Tower Visualizer) -->
-            <div class="sticky-visualizer-panel"
-                style="position: sticky; top: 120px; height: 450px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);">
-                <h3
-                    style="font-family: var(--font-display); font-size: 1.1rem; color: var(--text-main); margin-bottom: 1.5rem; letter-spacing: 1px; text-transform: uppercase;">
-                    JAKARTA DAILY ACCUMULATION TOWER</h3>
-
+            <div class="sticky-visualizer-panel" style="position: sticky; top: 120px; height: 450px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);">
+                <h3 style="font-family: var(--font-display); font-size: 1.1rem; color: var(--text-main); margin-bottom: 1.5rem; letter-spacing: 1px; text-transform: uppercase;">JAKARTA DAILY ACCUMULATION TOWER</h3>
+                
                 <!-- The 3D Three.js Container -->
-                <div id="threejs-waste-container"
-                    style="width: 220px; height: 280px; position: relative; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.01); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden;">
+                <div id="threejs-waste-container" style="width: 220px; height: 280px; position: relative; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.01); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden;">
                     <!-- Static Overlay height labels inside 3D scene -->
-                    <div
-                        style="position: absolute; right: 12px; top: 12px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); opacity: 0.6; z-index: 2; pointer-events: none;">
-                        CRITICAL</div>
-                    <div
-                        style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); opacity: 0.6; z-index: 2; pointer-events: none;">
-                        WARNING</div>
-                    <div
-                        style="position: absolute; right: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); opacity: 0.6; z-index: 2; pointer-events: none;">
-                        NORMAL</div>
+                    <div style="position: absolute; right: 12px; top: 12px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); opacity: 0.6; z-index: 2; pointer-events: none;">CRITICAL</div>
+                    <div style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); opacity: 0.6; z-index: 2; pointer-events: none;">WARNING</div>
+                    <div style="position: absolute; right: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); opacity: 0.6; z-index: 2; pointer-events: none;">NORMAL</div>
                 </div>
-
+                
                 <!-- Live Ticking Indicator -->
                 <div class="tower-status" style="margin-top: 1.5rem; text-align: center;">
-                    <div
-                        style="font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;">
-                        Simulated Tonnage</div>
-                    <div style="font-family: var(--font-mono); font-size: 1.8rem; color: var(--yellow); font-weight: bold;"
-                        id="simulated-tons-val">0 Tons</div>
+                    <div style="font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;">Simulated Tonnage</div>
+                    <div style="font-family: var(--font-mono); font-size: 1.8rem; color: var(--yellow); font-weight: bold;" id="simulated-tons-val">0 Tons</div>
                 </div>
             </div>
 
             <!-- Scrolling Narrative Cards -->
-            <div class="story-scroll-cards"
-                style="display: flex; flex-direction: column; gap: 6rem; padding-bottom: 8rem;">
-
+            <div class="story-scroll-cards" style="display: flex; flex-direction: column; gap: 6rem; padding-bottom: 8rem;">
+                
                 <!-- Card 1 -->
-                <div class="story-card panel" data-height="25" data-tons="2264"
-                    style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; border:1px solid var(--border-color); border-radius:12px;">
-                    <span
-                        style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE
-                        01: MORNING LOADS (09:00 AM)</span>
-                    <h3
-                        style="font-family: var(--font-display); font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.8rem;">
-                        2,264 TON SAMPAH TERKUMPUL</h3>
-                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Memasuki jam kerja awal,
-                        tumpukan sampah dari pasar tradisional dan wilayah residensial se-DKI Jakarta mulai berdatangan
-                        di TPS. Kecepatan pengangkutan sangat krusial agar TPS lokal tidak mengalami kelumpuhan
-                        penumpukan.</p>
+                <div class="story-card panel" data-height="25" data-tons="2264" style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; border:1px solid var(--border-color); border-radius:12px;">
+                    <span style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE 01: MORNING LOADS (09:00 AM)</span>
+                    <h3 style="font-family: var(--font-display); font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.8rem;">2,264 TON SAMPAH TERKUMPUL</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Memasuki jam kerja awal, tumpukan sampah dari pasar tradisional dan wilayah residensial se-DKI Jakarta mulai berdatangan di TPS. Kecepatan pengangkutan sangat krusial agar TPS lokal tidak mengalami kelumpuhan penumpukan.</p>
                 </div>
 
                 <!-- Card 2 -->
-                <div class="story-card panel" data-height="55" data-tons="4982"
-                    style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; border:1px solid var(--border-color); border-radius:12px;">
-                    <span
-                        style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE
-                        02: MID-DAY PEAK (03:00 PM)</span>
-                    <h3
-                        style="font-family: var(--font-display); font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.8rem;">
-                        4,982 TON SAMPAH TERKUMPUL</h3>
-                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Di siang hari, aktivitas
-                        logistik pengiriman sampah ke TPST Bantargebang memuncak. Kepadatan lalu lintas jalan tol
-                        Jakarta-Bekasi dan antrean panjang truk di gerbang timbang Bantargebang mulai memicu bottleneck
-                        operasional pengangkutan.</p>
+                <div class="story-card panel" data-height="55" data-tons="4982" style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; border:1px solid var(--border-color); border-radius:12px;">
+                    <span style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE 02: MID-DAY PEAK (03:00 PM)</span>
+                    <h3 style="font-family: var(--font-display); font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.8rem;">4,982 TON SAMPAH TERKUMPUL</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Di siang hari, aktivitas logistik pengiriman sampah ke TPST Bantargebang memuncak. Kepadatan lalu lintas jalan tol Jakarta-Bekasi dan antrean panjang truk di gerbang timbang Bantargebang mulai memicu bottleneck operasional pengangkutan.</p>
                 </div>
 
                 <!-- Card 3 -->
-                <div class="story-card panel" data-height="95" data-tons="9059"
-                    style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; border:1px solid var(--border-color); border-radius:12px;">
-                    <span
-                        style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--red); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE
-                        03: EOD OVERLOAD (11:59 PM)</span>
-                    <h3
-                        style="font-family: var(--font-display); font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.8rem;">
-                        9,059 TON SAMPAH HARIAN</h3>
-                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Sebelum hari berakhir,
-                        total timbulan sampah DKI mencapai kapasitas maksimalnya. TPST Bantargebang yang kini melebihi
-                        daya tampung aman (ketinggian gunungan sampah di atas 50 meter) berada pada status siaga kritis.
-                        Di sinilah Aeterna AI memitigasi krisis tersebut dengan analisis logistik prediktif.</p>
+                <div class="story-card panel" data-height="95" data-tons="9059" style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; border:1px solid var(--border-color); border-radius:12px;">
+                    <span style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--red); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE 03: EOD OVERLOAD (11:59 PM)</span>
+                    <h3 style="font-family: var(--font-display); font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.8rem;">9,059 TON SAMPAH HARIAN</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Sebelum hari berakhir, total timbulan sampah DKI mencapai kapasitas maksimalnya. TPST Bantargebang yang kini melebihi daya tampung aman (ketinggian gunungan sampah di atas 50 meter) berada pada status siaga kritis. Di sinilah Aeterna AI memitigasi krisis tersebut dengan analisis logistik prediktif.</p>
                 </div>
 
             </div>
@@ -309,73 +252,35 @@
         <section class="container data-sources-section">
             <h2 class="section-title">TRANSPARANSI SUMBER DATA</h2>
             <div class="panel sources-panel">
-                <div class="sources-grid"
-                    style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem;">
+                <div class="sources-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem;">
                     <div class="source-item">
-                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">1.
-                            Timbulan Sampah</h4>
-                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Data baseline
-                            disesuaikan dengan volume total ~9.059 Ton/hari dari <strong>Dinas Lingkungan Hidup (DLH)
-                                DKI Jakarta</strong> dan SIPSN Kementerian LHK.</p>
+                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">1. Timbulan Sampah</h4>
+                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Data baseline disesuaikan dengan volume total ~9.059 Ton/hari dari <strong>Dinas Lingkungan Hidup (DLH) DKI Jakarta</strong> dan SIPSN Kementerian LHK.</p>
                     </div>
                     <div class="source-item">
-                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">2.
-                            Prediksi Cuaca</h4>
-                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Data curah hujan ditarik
-                            live menggunakan <strong>Open-Meteo API</strong> berdasarkan koordinat geografis presisi
-                            masing-masing kecamatan.</p>
+                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">2. Prediksi Cuaca</h4>
+                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Data curah hujan ditarik live menggunakan <strong>Open-Meteo API</strong> berdasarkan koordinat geografis presisi masing-masing kecamatan.</p>
                     </div>
                     <div class="source-item">
-                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">3.
-                            Kalender Event & Transit</h4>
-                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Pola mobilitas
-                            disimulasikan dari ridership harian <strong>MRT Jakarta</strong> (~85.000) dan kalender
-                            acara Jakarta untuk mengukur lonjakan kerumunan.</p>
+                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">3. Kalender Event & Transit</h4>
+                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Pola mobilitas disimulasikan dari ridership harian <strong>MRT Jakarta</strong> (~85.000) dan kalender acara Jakarta untuk mengukur lonjakan kerumunan.</p>
                     </div>
                     <div class="source-item">
-                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">4. Jarak
-                            Pengangkutan</h4>
-                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Jarak tempuh dihitung
-                            menggunakan <strong>Haversine Formula</strong> dari koordinat kecamatan ke TPST Bantargebang
-                            dengan faktor jalan winding 1.35x.</p>
+                        <h4 style="color:var(--cyan); margin-bottom:0.5rem; font-family:var(--font-display);">4. Jarak Pengangkutan</h4>
+                        <p style="font-size:0.85rem; color:var(--text-muted); line-height:1.5;">Jarak tempuh dihitung menggunakan <strong>Haversine Formula</strong> dari koordinat kecamatan ke TPST Bantargebang dengan faktor jalan winding 1.35x.</p>
                     </div>
                 </div>
             </div>
         </section>
 
-
-
-        <!-- BIO DEVELOPER -->
-        <section class="container developer-container" style="margin-top: 2rem; margin-bottom: 2.5rem;">
-            <div class="panel developer-panel" style="text-align: center; padding: 2.2rem;">
-                <h3
-                    style="font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-main); letter-spacing: 1.5px; margin-bottom: 0.8rem; text-transform: uppercase;">
-                    FARIL PUTRA PRATAMA</h3>
-                <p
-                    style="color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; max-width: 780px; margin: 0 auto 1.5rem auto; font-family: var(--font-body);">
-                    Merancang dan membangun seluruh arsitektur Aeterna AI dari ujung ke ujung. Meliputi riset data,
-                    pelatihan model cerdas GBR &amp; GridSearchCV, pembuatan arsitektur micro-service asinkron, hingga
-                    visualisasi antarmuka HUD Glassmorphism interaktif.
-                </p>
-                <div style="display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;">
-                    <a href="https://github.com/FARILtau72/Aeterna-Ai" target="_blank" rel="noopener noreferrer"
-                        class="action-btn"
-                        style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 22px;">
-                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
-                            <path
-                                d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                        </svg>
-                        GitHub
-                    </a>
-                    <a href="https://www.linkedin.com/in/faril-putra-pratama-81561a280/" target="_blank"
-                        rel="noopener noreferrer" class="action-btn secondary-btn"
-                        style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 22px;">
-                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
-                            <path
-                                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.762-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-                        </svg>
-                        LinkedIn
-                    </a>
+        <!-- Development Author Section -->
+        <section class="container developers-section">
+            <h2 class="section-title">AETERNA AI LEAD DEVELOPER</h2>
+            <div class="developers-grid" style="display: flex; justify-content: center;">
+                <div class="panel developer-card" style="max-width: 600px; width: 100%;">
+                    <div class="dev-role">Lead Full-Stack AI Engineer</div>
+                    <h3 class="dev-name">FARIL PUTRA PRATAMA</h3>
+                    <p class="dev-desc">Merancang dan membangun seluruh arsitektur Aeterna AI dari ujung ke ujung. Meliputi riset data, pelatihan model cerdas GBR & GridSearchCV, pembuatan arsitektur micro-service asinkron, hingga visualisasi antarmuka HUD Glassmorphism interaktif Next.js.</p>
                 </div>
             </div>
         </section>
@@ -385,39 +290,29 @@
     <div id="page-autopilot" class="page-container">
         <section class="container page-header-section">
             <h2 class="section-title">AETERNA AI AUTOPILOT FORECASTER</h2>
-            <p class="section-subtitle">Sistem peramalan otonom DKI Jakarta. AI berjalan mandiri memprediksi volume
-                harian dan mengoordinasikan logistik tanpa campur tangan pengguna.</p>
+            <p class="section-subtitle">Sistem peramalan otonom DKI Jakarta. AI berjalan mandiri memprediksi volume harian dan mengoordinasikan logistik tanpa campur tangan pengguna.</p>
         </section>
 
         <!-- Live Metrics Summary -->
-        <section class="container autopilot-grid"
-            style="display:grid; grid-template-columns: 1.2fr 0.8fr; gap:1.5rem; margin-top:1.5rem;">
+        <section class="container autopilot-grid" style="display:grid; grid-template-columns: 1.2fr 0.8fr; gap:1.5rem; margin-top:1.5rem;">
             <!-- Panel Ringkasan Otonom -->
             <div class="panel autopilot-summary-panel">
                 <h3 class="panel-title">LIVE CITY-WIDE FORECAST (TODAY)</h3>
-                <div class="stats-row"
-                    style="display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-bottom:1.5rem; width:100%;">
-                    <div class="panel stat-card text-glow"
-                        style="background: rgba(0, 0, 0, 0.02); display:flex; flex-direction:column; padding:1.2rem; border-radius:8px;">
+                <div class="stats-row" style="display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-bottom:1.5rem; width:100%;">
+                    <div class="panel stat-card text-glow" style="background: rgba(0, 0, 0, 0.02); display:flex; flex-direction:column; padding:1.2rem; border-radius:8px;">
                         <span class="card-label">TOTAL DKI JAKARTA VOLUME</span>
-                        <span id="auto-total-volume" class="card-value"
-                            style="font-size:1.8rem; font-weight:800; color:var(--cyan);">Calculating...</span>
+                        <span id="auto-total-volume" class="card-value" style="font-size:1.8rem; font-weight:800; color:var(--cyan);">Calculating...</span>
                         <span class="card-meta">Autonomous prediction summation</span>
                     </div>
-                    <div class="panel stat-card"
-                        style="background: rgba(0, 0, 0, 0.02); display:flex; flex-direction:column; padding:1.2rem; border-radius:8px;">
+                    <div class="panel stat-card" style="background: rgba(0, 0, 0, 0.02); display:flex; flex-direction:column; padding:1.2rem; border-radius:8px;">
                         <span class="card-label">TOTAL DISPATCHED TRUCKS</span>
-                        <span id="auto-total-trucks" class="card-value"
-                            style="font-size:1.8rem; font-weight:800; color:var(--text-main);">Calculating...</span>
+                        <span id="auto-total-trucks" class="card-value" style="font-size:1.8rem; font-weight:800; color:var(--text-main);">Calculating...</span>
                         <span class="card-meta">Fleet size for all 44 kecamatan</span>
                     </div>
                 </div>
-
-                <h4
-                    style="color:var(--cyan); margin-bottom:0.8rem; font-family:var(--font-display); font-size:0.95rem; border-left:3px solid var(--cyan); padding-left:8px; text-transform:uppercase;">
-                    Top 5 High-Risk Kecamatan Today:</h4>
-                <div id="auto-risk-list" class="auto-risk-list"
-                    style="display:flex; flex-direction:column; gap:0.8rem;">
+                
+                <h4 style="color:var(--cyan); margin-bottom:0.8rem; font-family:var(--font-display); font-size:0.95rem; border-left:3px solid var(--cyan); padding-left:8px; text-transform:uppercase;">Top 5 High-Risk Kecamatan Today:</h4>
+                <div id="auto-risk-list" class="auto-risk-list" style="display:flex; flex-direction:column; gap:0.8rem;">
                     <!-- Dynamically populated Top 5 -->
                 </div>
             </div>
@@ -425,67 +320,15 @@
             <!-- Konsol Berpikir AI -->
             <div class="panel autopilot-console-panel" style="display:flex; flex-direction:column; height:100%;">
                 <h3 class="panel-title">AI THINKING CONSOLE</h3>
-                <div id="autopilot-log"
-                    style="flex:1; background:#0B1310; border:1px solid var(--border-color); border-radius:8px; padding:1.2rem; font-family:var(--font-mono); font-size:0.8rem; color:#22C55E; overflow-y:auto; min-height:260px; line-height:1.6; box-shadow:inset 0 0 10px rgba(0,0,0,0.5);">
+                <div id="autopilot-log" style="flex:1; background:#0B1310; border:1px solid var(--border-color); border-radius:8px; padding:1.2rem; font-family:var(--font-mono); font-size:0.8rem; color:#22C55E; overflow-y:auto; min-height:260px; line-height:1.6; box-shadow:inset 0 0 10px rgba(0,0,0,0.5);">
                     <!-- Dynamic logs -->
                 </div>
             </div>
         </section>
     </div>
 
-    <!-- PREDICTOR & DECISION DASHBOARD PAGE -->
+    <!-- PREDICTOR PAGE -->
     <div id="page-predictor" class="page-container">
-        <!-- Top Executive Decision KPIs Header -->
-        <section class="container decision-header-section">
-            <div class="decision-header-top">
-                <div class="decision-title-group">
-                    <h2 class="decision-heading">
-                        <svg class="decision-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00F0FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
-                        </svg>
-                        Dashboard Keputusan &amp; AI Simulator
-                    </h2>
-                    <p class="decision-subtitle">Spatial-temporal forecasting engine &amp; decision support system untuk optimalisasi logistik, alokasi armada hulu-hilir, dan efisiensi anggaran sampah DKI Jakarta.</p>
-                </div>
-            </div>
-
-            <!-- Top 3 Decision KPI Cards -->
-            <div class="decision-kpi-grid">
-                <!-- KPI 1: Total Volume -->
-                <div class="panel dec-kpi-card">
-                    <span class="dec-kpi-label">TOTAL VOLUME PREDIKSI</span>
-                    <div class="dec-kpi-val-row">
-                        <span id="dec-total-vol" class="dec-kpi-number text-glow">3079.5</span>
-                        <span class="dec-kpi-unit">TON</span>
-                    </div>
-                    <span id="dec-vol-status" class="dec-kpi-meta positive">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#00F0FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-                        Berhasil diprediksi (7 hari)
-                    </span>
-                </div>
-
-                <!-- KPI 2: Estimasi Biaya Operasional -->
-                <div class="panel dec-kpi-card">
-                    <span class="dec-kpi-label">ESTIMASI BIAYA OPERASIONAL</span>
-                    <div class="dec-kpi-val-row">
-                        <span id="dec-cost-val" class="dec-kpi-number">Rp 292.600.000</span>
-                    </div>
-                    <span class="dec-kpi-meta">Total Anggaran Logistik & SDM</span>
-                </div>
-
-                <!-- KPI 3: Efisiensi AI Proaktif vs Reaktif -->
-                <div class="panel dec-kpi-card">
-                    <span class="dec-kpi-label">EFISIENSI AI (PROAKTIF VS REAKTIF)</span>
-                    <div class="dec-kpi-val-row">
-                        <span id="dec-efficiency-val" class="dec-kpi-number green-glow" style="color: #4ade80;">51.2%</span>
-                    </div>
-                    <span id="dec-saved-val" class="dec-kpi-meta positive" style="color: #4ade80;">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
-                        Hemat Rp 306.600.000 dibanding Reaktif
-                    </span>
-                </div>
-            </div>
-        </section>
         <main class="dashboard-grid">
             <!-- Panel Kontrol (Sidebar) -->
             <section class="panel control-panel">
@@ -500,15 +343,13 @@
                 <div class="control-group">
                     <label for="model-select">AI Forecasting Model</label>
                     <select id="model-select" class="form-control">
-                        <option value="gradient_boosting" selected>Stacking Regressor Ensemble (Real Data - 96.41% Acc)
-                        </option>
+                        <option value="gradient_boosting" selected>Stacking Regressor Ensemble (Real Data - 96.41% Acc)</option>
                         <option value="chronos">Amazon Chronos-T5 (Tiny)</option>
                     </select>
                 </div>
 
                 <div class="control-group">
-                    <label for="forecast-slider">Forecast Horizon: <span id="forecast-val"
-                            class="value-display">7</span> Days</label>
+                    <label for="forecast-slider">Forecast Horizon: <span id="forecast-val" class="value-display">7</span> Days</label>
                     <input type="range" id="forecast-slider" min="1" max="30" value="7" class="slider">
                 </div>
 
@@ -524,10 +365,8 @@
                 </div>
 
                 <div class="control-group">
-                    <label for="event-override">Simulasi Populasi <span id="event-override-val"
-                            class="override-display">Auto (BPS Baseline)</span></label>
-                    <input type="range" id="event-override" min="10000" max="700000" step="5000" value="88000"
-                        class="slider">
+                    <label for="event-override">Simulasi Populasi <span id="event-override-val" class="override-display">Auto (BPS Baseline)</span></label>
+                    <input type="range" id="event-override" min="10000" max="700000" step="5000" value="88000" class="slider">
                 </div>
 
                 <div class="button-row">
@@ -576,8 +415,7 @@
             <section class="analysis-panel">
                 <div class="panel category-panel">
                     <h2 class="panel-title">WASTE COMPOSITION BREAKDOWN</h2>
-                    <div class="progress-container"
-                        style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;">
+                    <div class="progress-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;">
                         <div class="progress-item" style="margin-bottom: 0;">
                             <div class="progress-header">
                                 <span>Organic / Sisa Makanan (~50.2%)</span>
@@ -652,10 +490,6 @@
                         <span class="event-title">Upcoming Event Calendar</span>
                         <p class="event-desc" id="event-desc-text">No major events registered for today.</p>
                     </div>
-                    <button class="action-btn secondary-btn" onclick="openWeatherModal()" style="margin-top: 14px; width: 100%; padding: 10px 14px; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px;">
-                        <span>🌦️ Lihat Prakiraan Cuaca 7 Hari (Open-Meteo)</span>
-                        <span style="font-weight: bold;">&rarr;</span>
-                    </button>
                 </div>
 
                 <!-- Logistics Plan -->
@@ -683,104 +517,6 @@
             </section>
         </main>
 
-        <!-- Section 1: Peta Beban Kerja Harian (Full Width) -->
-        <section class="container" style="margin-top: 1.5rem; margin-bottom: 1.5rem;">
-            <div class="panel dec-workload-panel">
-                <div class="dec-panel-header">
-                    <h3 class="dec-panel-title">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00F0FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-                            <line x1="16" y1="2" x2="16" y2="6"></line>
-                            <line x1="8" y1="2" x2="8" y2="6"></line>
-                            <line x1="3" y1="10" x2="21" y2="10"></line>
-                        </svg>
-                        Peta Beban Kerja Harian (7 Hari Horizon)
-                    </h3>
-                    <span class="dec-panel-badge">Jadwal Shift &amp; Disposisi Armada</span>
-                </div>
-
-                <div id="dec-workload-grid" class="dec-workload-grid">
-                    <!-- Populated dynamically with 7 day cards -->
-                </div>
-            </div>
-        </section>
-
-        <!-- Section 2: Alokasi Armada Spesifik & Rencana Aksi Kritis (2 Columns) -->
-        <section class="container decision-details-grid" style="margin-bottom: 1.5rem;">
-            <!-- Left: Alokasi Armada Spesifik -->
-            <div class="panel dec-fleet-panel">
-                <div class="dec-panel-header">
-                    <h3 class="dec-panel-title">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <rect x="1" y="3" width="15" height="13"></rect>
-                            <polygon points="16 8 20 8 23 11 23 16 16 16 8"></polygon>
-                            <circle cx="5.5" cy="18.5" r="2.5"></circle>
-                            <circle cx="18.5" cy="18.5" r="2.5"></circle>
-                        </svg>
-                        Alokasi Armada Spesifik
-                    </h3>
-                    <span class="dec-panel-badge">Rasio 60:40 Dump vs Pick-up</span>
-                </div>
-                <div class="dec-fleet-list">
-                    <!-- Truk Besar Dump Truck -->
-                    <div class="dec-fleet-card dump-truck">
-                        <div class="fleet-icon-box blue-box">
-                            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="1" y="3" width="15" height="13"></rect>
-                                <polygon points="16 8 20 8 23 11 23 16 16 16 8"></polygon>
-                                <circle cx="5.5" cy="18.5" r="2.5"></circle>
-                                <circle cx="18.5" cy="18.5" r="2.5"></circle>
-                            </svg>
-                        </div>
-                        <div class="fleet-info">
-                            <div class="fleet-unit-count"><span id="dec-truck-large">125</span> <span class="fleet-unit-suffix">Unit</span></div>
-                            <div class="fleet-unit-type">Truk Besar (Dump Truck 15T)</div>
-                        </div>
-                    </div>
-
-                    <!-- Armada Kecil Pick-up -->
-                    <div class="dec-fleet-card pickup-truck">
-                        <div class="fleet-icon-box amber-box">
-                            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="1" y="3" width="12" height="13"></rect>
-                                <polygon points="13 8 17 8 20 11 20 16 13 16 13 8"></polygon>
-                                <circle cx="4.5" cy="18.5" r="2.5"></circle>
-                                <circle cx="16.5" cy="18.5" r="2.5"></circle>
-                            </svg>
-                        </div>
-                        <div class="fleet-info">
-                            <div class="fleet-unit-count"><span id="dec-truck-small">84</span> <span class="fleet-unit-suffix">Unit</span></div>
-                            <div class="fleet-unit-type">Armada Kecil (Pick-up 2.5T)</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Right: Rencana Aksi Kritis -->
-            <div class="panel dec-action-panel">
-                <div class="dec-panel-header">
-                    <h3 class="dec-panel-title action-title">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
-                            <line x1="12" y1="9" x2="12" y2="13"></line>
-                            <line x1="12" y1="17" x2="12.01" y2="17"></line>
-                        </svg>
-                        Rencana Aksi Kritis
-                    </h3>
-                    <span class="dec-panel-badge" style="color: #f87171; border-color: rgba(239, 68, 68, 0.3);">Contingency SOP</span>
-                </div>
-                <div class="dec-critical-box" id="dec-critical-box">
-                    <div class="dec-critical-header">
-                        <span class="critical-pulse-dot"></span>
-                        <span id="dec-critical-title" class="dec-critical-title">AKSI HARI JUM (HUJAN LEBAT &amp; BEBAN PUNCAK)</span>
-                    </div>
-                    <ul id="dec-critical-list" class="dec-critical-list">
-                        <!-- Populated dynamically with SOP actions -->
-                    </ul>
-                </div>
-            </div>
-        </section>
-
         <!-- Timeline Harian -->
         <section class="container timeline-container">
             <div class="panel timeline-panel">
@@ -804,32 +540,17 @@
         <!-- Developer Bio Card -->
         <section class="container developer-container" style="margin-top: 2rem; margin-bottom: 2.5rem;">
             <div class="panel developer-panel" style="text-align: center; padding: 2.2rem;">
-                <h3
-                    style="font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-main); letter-spacing: 1.5px; margin-bottom: 0.8rem; text-transform: uppercase;">
-                    FARIL PUTRA PRATAMA</h3>
-                <p
-                    style="color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; max-width: 780px; margin: 0 auto 1.5rem auto; font-family: var(--font-body);">
-                    Merancang dan membangun seluruh arsitektur Aeterna AI dari ujung ke ujung. Meliputi riset data,
-                    pelatihan model cerdas GBR &amp; GridSearchCV, pembuatan arsitektur micro-service asinkron, hingga
-                    visualisasi antarmuka HUD Glassmorphism interaktif.
+                <h3 style="font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-main); letter-spacing: 1.5px; margin-bottom: 0.8rem; text-transform: uppercase;">FARIL PUTRA PRATAMA</h3>
+                <p style="color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; max-width: 780px; margin: 0 auto 1.5rem auto; font-family: var(--font-body);">
+                    Merancang dan membangun seluruh arsitektur Aeterna AI dari ujung ke ujung. Meliputi riset data, pelatihan model cerdas GBR &amp; GridSearchCV, pembuatan arsitektur micro-service asinkron, hingga visualisasi antarmuka HUD Glassmorphism interaktif.
                 </p>
                 <div style="display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;">
-                    <a href="https://github.com/FARILtau72/Aeterna-Ai" target="_blank" rel="noopener noreferrer"
-                        class="action-btn"
-                        style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 22px;">
-                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
-                            <path
-                                d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                        </svg>
+                    <a href="https://github.com/FARILtau72/Aeterna-Ai" target="_blank" rel="noopener noreferrer" class="action-btn" style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 22px;">
+                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                         GitHub
                     </a>
-                    <a href="https://www.linkedin.com/in/faril-putra-pratama-81561a280/" target="_blank"
-                        rel="noopener noreferrer" class="action-btn secondary-btn"
-                        style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 22px;">
-                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
-                            <path
-                                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.762-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-                        </svg>
+                    <a href="https://www.linkedin.com/in/faril-putra-pratama-81561a280/" target="_blank" rel="noopener noreferrer" class="action-btn secondary-btn" style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 22px;">
+                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.762-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
                         LinkedIn
                     </a>
                 </div>
@@ -841,8 +562,7 @@
     <div id="page-news" class="page-container">
         <section class="container page-header-section">
             <h2 class="section-title">MONITORING BERITA PERSAMPAHAN JAKARTA</h2>
-            <p class="section-subtitle">AI merayap berita terbaru seputar isu darurat sampah, operasional TPA
-                Bantargebang, dan kebijakan DLH Jakarta secara otomatis setiap 1 jam.</p>
+            <p class="section-subtitle">AI merayap berita terbaru seputar isu darurat sampah, operasional TPA Bantargebang, dan kebijakan DLH Jakarta secara otomatis setiap 1 jam.</p>
         </section>
 
         <section class="container news-feed-container">
@@ -857,8 +577,7 @@
     <div id="page-alerts" class="page-container">
         <section class="container page-header-section">
             <h2 class="section-title">REGIONAL HAZARD & ALERTS MAP</h2>
-            <p class="section-subtitle">Daftar wilayah kecamatan dengan prakiraan volume timbulan sampah melebihi ambang
-                batas operasional harian.</p>
+            <p class="section-subtitle">Daftar wilayah kecamatan dengan prakiraan volume timbulan sampah melebihi ambang batas operasional harian.</p>
         </section>
 
         <section class="container alerts-feed-container">
@@ -876,51 +595,33 @@
     <div id="page-education" class="page-container">
         <section class="container page-header-section">
             <h2 class="section-title">WASTE EDUCATION HUB</h2>
-            <p class="section-subtitle">Pelajari dampak penumpukan sampah di DKI Jakarta, durasi dekomposisi material,
-                dan uji ketangkasan pilah sampah Anda secara interaktif.</p>
+            <p class="section-subtitle">Pelajari dampak penumpukan sampah di DKI Jakarta, durasi dekomposisi material, dan uji ketangkasan pilah sampah Anda secara interaktif.</p>
         </section>
 
         <!-- Interactive simulator & info panels -->
-        <section class="container education-grid"
-            style="display:grid; grid-template-columns: 1.2fr 0.8fr; gap:1.5rem; margin-top:1.5rem;">
+        <section class="container education-grid" style="display:grid; grid-template-columns: 1.2fr 0.8fr; gap:1.5rem; margin-top:1.5rem;">
             <!-- Game Pilah Sampah (Eco-Sorter) -->
-            <div class="panel game-panel"
-                style="display:flex; flex-direction:column; padding:2rem; position:relative; overflow:hidden;">
-                <div class="panel-badge"
-                    style="position:absolute; top:1rem; right:1.5rem; background:rgba(0, 240, 255, 0.1); border:1px solid var(--cyan); color:var(--cyan); border-radius:12px; padding:3px 8px; font-size:0.75rem; font-family:var(--font-mono);">
-                    INTERACTIVE GAME</div>
+            <div class="panel game-panel" style="display:flex; flex-direction:column; padding:2rem; position:relative; overflow:hidden;">
+                <div class="panel-badge" style="position:absolute; top:1rem; right:1.5rem; background:rgba(0, 240, 255, 0.1); border:1px solid var(--cyan); color:var(--cyan); border-radius:12px; padding:3px 8px; font-size:0.75rem; font-family:var(--font-mono);">INTERACTIVE GAME</div>
                 <h3 class="panel-title" style="margin-bottom:0.5rem;">ECO-SORTER SIMULATOR</h3>
-                <p style="font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem;">Pilah item sampah ke tempat
-                    sampah yang benar untuk mendapatkan skor dan mempelajari fakta daur ulang!</p>
-
+                <p style="font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem;">Pilah item sampah ke tempat sampah yang benar untuk mendapatkan skor dan mempelajari fakta daur ulang!</p>
+                
                 <!-- Waste Item Card -->
-                <div class="game-area"
-                    style="display:flex; flex-direction:column; align-items:center; background:rgba(0,0,0,0.4); border:1px solid var(--border-color); border-radius:12px; padding:2.5rem; margin-bottom:1.5rem; text-align:center;">
-                    <div id="game-item-icon"
-                        style="font-size:4rem; margin-bottom:1rem; filter:drop-shadow(0 0 10px rgba(255,255,255,0.2)); transition:transform 0.3s;">
-                        🍼</div>
-                    <h4 id="game-item-name"
-                        style="font-family:var(--font-display); font-size:1.3rem; color:#FFF; margin-bottom:0.5rem;">
-                        Botol Plastik Bekas</h4>
-                    <p id="game-item-desc"
-                        style="font-size:0.85rem; color:var(--text-muted); max-width:300px; min-height:40px;">Botol air
-                        mineral kosong berbahan PET.</p>
+                <div class="game-area" style="display:flex; flex-direction:column; align-items:center; background:rgba(0,0,0,0.4); border:1px solid var(--border-color); border-radius:12px; padding:2.5rem; margin-bottom:1.5rem; text-align:center;">
+                    <div id="game-item-icon" style="font-size:4rem; margin-bottom:1rem; filter:drop-shadow(0 0 10px rgba(255,255,255,0.2)); transition:transform 0.3s;">🍼</div>
+                    <h4 id="game-item-name" style="font-family:var(--font-display); font-size:1.3rem; color:#FFF; margin-bottom:0.5rem;">Botol Plastik Bekas</h4>
+                    <p id="game-item-desc" style="font-size:0.85rem; color:var(--text-muted); max-width:300px; min-height:40px;">Botol air mineral kosong berbahan PET.</p>
                 </div>
-
+                
                 <!-- Target Bins -->
                 <div class="bin-grid" style="display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem;">
-                    <button class="bin-btn organic-bin" onclick="sortWaste('organic')"
-                        style="background:rgba(74, 222, 128, 0.05); border:1px solid #4ade80; color:#4ade80; padding:1rem; border-radius:8px; font-family:var(--font-display); font-weight:bold; cursor:pointer; transition:all 0.2s; outline:none;">ORGANIK</button>
-                    <button class="bin-btn inorganic-bin" onclick="sortWaste('inorganic')"
-                        style="background:rgba(56, 189, 248, 0.05); border:1px solid #38bdf8; color:#38bdf8; padding:1rem; border-radius:8px; font-family:var(--font-display); font-weight:bold; cursor:pointer; transition:all 0.2s; outline:none;">ANORGANIK</button>
-                    <button class="bin-btn hazard-bin" onclick="sortWaste('hazardous')"
-                        style="background:rgba(251, 113, 133, 0.05); border:1px solid #fb7185; color:#fb7185; padding:1rem; border-radius:8px; font-family:var(--font-display); font-weight:bold; cursor:pointer; transition:all 0.2s; outline:none;">BAHAYA
-                        (B3)</button>
+                    <button class="bin-btn organic-bin" onclick="sortWaste('organic')" style="background:rgba(74, 222, 128, 0.05); border:1px solid #4ade80; color:#4ade80; padding:1rem; border-radius:8px; font-family:var(--font-display); font-weight:bold; cursor:pointer; transition:all 0.2s; outline:none;">ORGANIK</button>
+                    <button class="bin-btn inorganic-bin" onclick="sortWaste('inorganic')" style="background:rgba(56, 189, 248, 0.05); border:1px solid #38bdf8; color:#38bdf8; padding:1rem; border-radius:8px; font-family:var(--font-display); font-weight:bold; cursor:pointer; transition:all 0.2s; outline:none;">ANORGANIK</button>
+                    <button class="bin-btn hazard-bin" onclick="sortWaste('hazardous')" style="background:rgba(251, 113, 133, 0.05); border:1px solid #fb7185; color:#fb7185; padding:1rem; border-radius:8px; font-family:var(--font-display); font-weight:bold; cursor:pointer; transition:all 0.2s; outline:none;">BAHAYA (B3)</button>
                 </div>
-
+                
                 <!-- Game Stats -->
-                <div class="game-stats"
-                    style="display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; font-family:var(--font-mono); font-size:0.9rem; padding:0.8rem; background:rgba(255,255,255,0.02); border-radius:6px; border:1px solid rgba(255,255,255,0.05);">
+                <div class="game-stats" style="display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; font-family:var(--font-mono); font-size:0.9rem; padding:0.8rem; background:rgba(255,255,255,0.02); border-radius:6px; border:1px solid rgba(255,255,255,0.05);">
                     <span>Skor: <strong id="game-score" style="color:var(--cyan); font-size:1.1rem;">0</strong></span>
                     <span id="game-feedback" style="color:var(--text-muted); font-weight:bold;">Ayo mulai pilah!</span>
                 </div>
@@ -929,71 +630,47 @@
             <!-- Fakta Dekomposisi Sampah -->
             <div class="panel facts-panel" style="display:flex; flex-direction:column; padding:2rem;">
                 <h3 class="panel-title" style="margin-bottom:1rem;">DURASI DEKOMPOSISI ALAM</h3>
-                <p style="font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem;">Berapa lama alam
-                    membutuhkan waktu untuk mengurai barang-barang yang kita buang?</p>
-
-                <div class="facts-list"
-                    style="display:flex; flex-direction:column; gap:1.2rem; flex:1; justify-content:center;">
+                <p style="font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem;">Berapa lama alam membutuhkan waktu untuk mengurai barang-barang yang kita buang?</p>
+                
+                <div class="facts-list" style="display:flex; flex-direction:column; gap:1.2rem; flex:1; justify-content:center;">
                     <div class="fact-item" style="display:flex; align-items:center; gap:1rem;">
-                        <span
-                            style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🍎</span>
+                        <span style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🍎</span>
                         <div style="flex:1;">
                             <h4 style="font-size:0.9rem; color:#FFF; margin-bottom:2px;">Sisa Makanan / Organik</h4>
-                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;">
-                                <div class="progress-bar-fill organic" style="width: 5%;"></div>
-                            </div>
-                            <span style="font-size:0.75rem; color:#4ade80; font-family:var(--font-mono);">1 - 2
-                                Minggu</span>
+                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;"><div class="progress-bar-fill organic" style="width: 5%;"></div></div>
+                            <span style="font-size:0.75rem; color:#4ade80; font-family:var(--font-mono);">1 - 2 Minggu</span>
                         </div>
                     </div>
                     <div class="fact-item" style="display:flex; align-items:center; gap:1rem;">
-                        <span
-                            style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">📦</span>
+                        <span style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">📦</span>
                         <div style="flex:1;">
                             <h4 style="font-size:0.9rem; color:#FFF; margin-bottom:2px;">Kertas & Kardus</h4>
-                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;">
-                                <div class="progress-bar-fill plastic" style="width: 15%;"></div>
-                            </div>
-                            <span style="font-size:0.75rem; color:#38bdf8; font-family:var(--font-mono);">2 - 6
-                                Minggu</span>
+                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;"><div class="progress-bar-fill plastic" style="width: 15%;"></div></div>
+                            <span style="font-size:0.75rem; color:#38bdf8; font-family:var(--font-mono);">2 - 6 Minggu</span>
                         </div>
                     </div>
                     <div class="fact-item" style="display:flex; align-items:center; gap:1rem;">
-                        <span
-                            style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🍼</span>
+                        <span style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🍼</span>
                         <div style="flex:1;">
                             <h4 style="font-size:0.9rem; color:#FFF; margin-bottom:2px;">Botol Plastik PET</h4>
-                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;">
-                                <div class="progress-bar-fill other" style="width: 70%; background:#fb923c !important;">
-                                </div>
-                            </div>
-                            <span style="font-size:0.75rem; color:#fb923c; font-family:var(--font-mono);">450
-                                Tahun</span>
+                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;"><div class="progress-bar-fill other" style="width: 70%; background:#fb923c !important;"></div></div>
+                            <span style="font-size:0.75rem; color:#fb923c; font-family:var(--font-mono);">450 Tahun</span>
                         </div>
                     </div>
                     <div class="fact-item" style="display:flex; align-items:center; gap:1rem;">
-                        <span
-                            style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🔋</span>
+                        <span style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🔋</span>
                         <div style="flex:1;">
                             <h4 style="font-size:0.9rem; color:#FFF; margin-bottom:2px;">Baterai & Logam</h4>
-                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;">
-                                <div class="progress-bar-fill critical" style="width: 85%;"></div>
-                            </div>
-                            <span style="font-size:0.75rem; color:#fb7185; font-family:var(--font-mono);">100 Tahun
-                                (Logam) / Berabad-abad (Kimia B3)</span>
+                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;"><div class="progress-bar-fill critical" style="width: 85%;"></div></div>
+                            <span style="font-size:0.75rem; color:#fb7185; font-family:var(--font-mono);">100 Tahun (Logam) / Berabad-abad (Kimia B3)</span>
                         </div>
                     </div>
                     <div class="fact-item" style="display:flex; align-items:center; gap:1rem;">
-                        <span
-                            style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🫙</span>
+                        <span style="font-size:2rem; background:rgba(255,255,255,0.05); width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;">🫙</span>
                         <div style="flex:1;">
                             <h4 style="font-size:0.9rem; color:#FFF; margin-bottom:2px;">Botol Kaca</h4>
-                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;">
-                                <div class="progress-bar-fill critical"
-                                    style="width: 100%; background:#e879f9 !important;"></div>
-                            </div>
-                            <span style="font-size:0.75rem; color:#e879f9; font-family:var(--font-mono);">1 Juta Tahun /
-                                Tidak Hancur</span>
+                            <div class="progress-bar-bg" style="height:6px; margin:4px 0;"><div class="progress-bar-fill critical" style="width: 100%; background:#e879f9 !important;"></div></div>
+                            <span style="font-size:0.75rem; color:#e879f9; font-family:var(--font-mono);">1 Juta Tahun / Tidak Hancur</span>
                         </div>
                     </div>
                 </div>
@@ -1001,46 +678,9 @@
         </section>
     </div>
 
-    <!-- 7-DAY WEATHER FORECAST MODAL (PRAKIRAAN CUACA 7 HARI) -->
-    <div id="weather-modal" class="weather-modal-backdrop" onclick="if(event.target === this) closeWeatherModal()">
-        <div class="weather-modal-dialog">
-            <div class="weather-modal-header">
-                <div class="weather-modal-title-row">
-                    <h3 class="weather-modal-title">Prakiraan Cuaca 7 Hari</h3>
-                    <span id="modal-weather-loc" class="weather-location-pill">Cakung</span>
-                </div>
-                <button class="weather-modal-close-btn" onclick="closeWeatherModal()" title="Tutup Modal">✕</button>
-            </div>
-
-            <div class="weather-modal-summary-card">
-                <div class="summary-left">
-                    <span class="summary-card-label">SUMMARY 7 HARI</span>
-                    <div class="summary-card-stats">
-                        Total: <span id="modal-sum-total" class="summary-val-highlight">14.0mm</span>
-                        <span class="summary-separator">•</span>
-                        Avg: <span id="modal-sum-avg" class="summary-val-highlight">2.0mm/hr</span>
-                    </div>
-                </div>
-                <div class="summary-right">
-                    <span id="modal-sum-badge" class="weather-dryness-badge dry">KERING</span>
-                </div>
-            </div>
-
-            <div class="weather-modal-forecast-list" id="weather-modal-list">
-                <!-- Dynamically populated with 7 real days from Open-Meteo API -->
-                <div class="weather-modal-loading">Mengambil data cuaca real-time Open-Meteo...</div>
-            </div>
-        </div>
-    </div>
-
     <footer>
-        <p>&copy; 2026 Aeterna AI — Developed & Engineered with ⚡ by <span
-                style="color:var(--cyan); font-weight:bold;">Faril Putra Pratama</span>.</p>
-        <p
-            style="margin-top: 0.6rem; font-size: 0.75rem; opacity: 0.85; letter-spacing: 0.5px; font-family: var(--font-mono); line-height: 1.5;">
-            Official Portal: <a href="https://www.aeternaai.biz.id/"
-                style="color:#00f2fe; text-decoration:none;">aeternaai.biz.id</a> | #1 AI Waste Intelligence Platform
-            for 44 Kecamatans in DKI Jakarta.</p>
+        <p>&copy; 2026 Aeterna AI — Developed & Engineered with ⚡ by <span style="color:var(--cyan); font-weight:bold;">Faril Putra Pratama</span>.</p>
+        <p style="margin-top: 0.6rem; font-size: 0.75rem; opacity: 0.85; letter-spacing: 0.5px; font-family: var(--font-mono); line-height: 1.5;">Official Portal: <a href="https://www.aeternaai.biz.id/" style="color:#00f2fe; text-decoration:none;">aeternaai.biz.id</a> | #1 AI Waste Intelligence Platform for 44 Kecamatans in DKI Jakarta.</p>
     </footer>
 
     <!-- Custom Cyber HUD Cursor -->
@@ -1050,5 +690,4 @@
     <!-- Scripts -->
     <script src="/static/app.js"></script>
 </body>
-
-</html>
+</html>

frontend/style.css

@@ -130,7 +130,7 @@ header {
     display: grid;
     grid-template-columns: 320px 1fr 340px;
     gap: 1.5rem;
-    padding: 1.2rem 0;
+    padding: 1.5rem 2.5rem;
     flex: 1;
     z-index: 5;
     position: relative;
@@ -656,7 +656,7 @@ header {
 /* Timeline Container */
 .timeline-container {
     margin-top: 1.5rem;
-    padding: 0;
+    padding: 0 2.5rem;
     z-index: 5;
     position: relative;
 }
@@ -725,7 +725,7 @@ header {
 /* Hourly Breakdown Container */
 .hourly-container {
     margin-top: 1.5rem;
-    padding: 0;
+    padding: 0 2.5rem;
     z-index: 5;
     position: relative;
     margin-bottom: 2rem;
@@ -1606,824 +1606,5 @@ body::after {
     }
 }
 
-/* ==========================================
-   DASHBOARD KEPUTUSAN (DECISION SUPPORT SYSTEM)
-   ========================================== */
-.decision-header-section {
-    padding-top: 1rem;
-    padding-bottom: 1.5rem;
-}
-
-.decision-header-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-}
-
-.decision-title-group {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.decision-heading {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-family: var(--font-display);
-    font-size: 2rem;
-    font-weight: 800;
-    letter-spacing: 1px;
-    color: #FFFFFF;
-}
-
-.decision-icon {
-    color: var(--cyan);
-    filter: drop-shadow(0 0 8px var(--cyan-glow));
-}
-
-.decision-subtitle {
-    font-size: 0.9rem;
-    color: var(--text-muted);
-    max-width: 680px;
-    line-height: 1.5;
-}
-
-.decision-controls {
-    display: flex;
-    align-items: flex-end;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-.decision-control-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.decision-control-item label {
-    font-family: var(--font-mono);
-    font-size: 0.72rem;
-    color: var(--text-muted);
-    letter-spacing: 1px;
-}
-
-.dec-select {
-    min-width: 220px;
-    background: rgba(14, 22, 16, 0.95);
-    border: 1px solid var(--border-color);
-    padding: 8px 12px;
-    font-size: 0.85rem;
-}
-
-.weather-modal-trigger-btn {
-    width: auto !important;
-    padding: 9px 18px !important;
-    font-size: 0.82rem !important;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    white-space: nowrap;
-    border-radius: 8px;
-    background: rgba(0, 240, 255, 0.12) !important;
-    border: 1px solid var(--cyan) !important;
-    color: var(--cyan) !important;
-    cursor: pointer;
-    transition: all 0.25s ease;
-}
-
-.weather-modal-trigger-btn:hover {
-    background: var(--cyan) !important;
-    color: var(--bg-void) !important;
-    box-shadow: 0 0 16px var(--cyan-glow) !important;
-    transform: translateY(-2px);
-}
-
-/* 3 Top KPI Cards */
-.decision-kpi-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-}
-
-.dec-kpi-card {
-    background: var(--bg-panel);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 1.6rem 1.8rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    min-height: 150px;
-    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
-    backdrop-filter: blur(16px);
-}
-
-.dec-kpi-card:hover {
-    transform: translateY(-4px);
-    border-color: var(--border-hover);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
-}
-
-.dec-kpi-label {
-    font-family: var(--font-mono);
-    font-size: 0.72rem;
-    font-weight: 700;
-    color: var(--text-muted);
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-}
-
-.dec-kpi-val-row {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    margin: 8px 0;
-}
-
-.dec-kpi-number {
-    font-family: var(--font-display);
-    font-size: 2.3rem;
-    font-weight: 800;
-    letter-spacing: -0.5px;
-    color: #FFFFFF;
-    line-height: 1;
-}
-
-.dec-kpi-unit {
-    font-family: var(--font-display);
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: var(--text-muted);
-}
-
-.dec-kpi-meta {
-    font-family: var(--font-mono);
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.dec-kpi-meta.positive {
-    color: var(--cyan);
-}
-
-/* Decision Body Grid (65% Workload Map : 35% Sidebar) */
-.decision-body-grid {
-    display: grid;
-    grid-template-columns: 1.65fr 1fr;
-    gap: 1.5rem;
-    margin-bottom: 3rem;
-    align-items: start;
-}
-
-/* Peta Beban Kerja Harian Panel */
-.dec-workload-panel {
-    padding: 1.8rem;
-    border-radius: 12px;
-}
-
-.dec-panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-}
-
-.dec-panel-title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-family: var(--font-display);
-    font-size: 1.15rem;
-    font-weight: 700;
-    color: #FFFFFF;
-    letter-spacing: 0.5px;
-}
-
-.dec-panel-badge {
-    font-family: var(--font-mono);
-    font-size: 0.72rem;
-    color: var(--text-muted);
-    background: rgba(255, 255, 255, 0.04);
-    padding: 3px 10px;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-/* 7-Day Horizontal Workload Grid */
-.dec-workload-grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 10px;
-    overflow-x: auto;
-    padding-bottom: 6px;
-}
-
-.workload-day-card {
-    background: rgba(8, 14, 10, 0.9);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 12px 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
-}
-
-.workload-day-card:hover {
-    transform: translateY(-3px);
-    border-color: var(--cyan);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-}
-
-.workload-day-card.critical {
-    border-color: rgba(239, 68, 68, 0.4);
-}
-
-.workload-day-badge {
-    width: 100%;
-    padding: 4px 6px;
-    border-radius: 4px;
-    font-family: var(--font-display);
-    font-size: 0.78rem;
-    font-weight: 800;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-}
-
-.workload-day-badge.normal {
-    background: rgba(14, 38, 28, 0.7);
-    color: #6ee7b7;
-    border: 1px solid rgba(110, 231, 183, 0.2);
-}
-
-.workload-day-badge.warning {
-    background: rgba(60, 40, 10, 0.7);
-    color: #fbbf24;
-    border: 1px solid rgba(251, 191, 36, 0.2);
-}
-
-.workload-day-badge.peak-critical {
-    background: rgba(70, 15, 20, 0.85);
-    color: #fca5a5;
-    border: 1px solid rgba(239, 68, 68, 0.35);
-    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
-}
-
-.workload-ton-val {
-    font-family: var(--font-display);
-    font-size: 1.15rem;
-    font-weight: 800;
-    color: #FFFFFF;
-    line-height: 1.1;
-}
-
-.workload-ton-label {
-    font-family: var(--font-mono);
-    font-size: 0.65rem;
-    color: var(--text-muted);
-    letter-spacing: 1px;
-    margin-bottom: 10px;
-}
-
-.workload-trucks-count {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    margin-bottom: 12px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    width: 100%;
-}
-
-.workload-shifts-list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-}
-
-.workload-shift-pill {
-    font-family: var(--font-mono);
-    font-size: 0.62rem;
-    font-weight: 600;
-    padding: 2px 4px;
-    border-radius: 3px;
-    white-space: nowrap;
-    text-align: center;
-}
-
-.workload-shift-pill.s1 {
-    color: #fbbf24;
-    background: rgba(251, 191, 36, 0.08);
-    border: 1px solid rgba(251, 191, 36, 0.15);
-}
-
-.workload-shift-pill.s2 {
-    color: #38bdf8;
-    background: rgba(56, 189, 248, 0.08);
-    border: 1px solid rgba(56, 189, 248, 0.15);
-}
-
-.workload-shift-pill.s3 {
-    color: #f87171;
-    background: rgba(239, 68, 68, 0.12);
-    border: 1px solid rgba(239, 68, 68, 0.25);
-    font-weight: 700;
-}
-
-/* Sidebar Column */
-.dec-sidebar-col {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-/* Decision Details Grid (Fleet Allocation & Critical Action Plan) */
-.decision-details-grid {
-    display: grid;
-    grid-template-columns: 1fr 1.3fr;
-    gap: 1.5rem;
-    align-items: stretch;
-}
-
-@media (max-width: 1080px) {
-    .decision-details-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* Alokasi Armada Spesifik Panel */
-.dec-fleet-panel {
-    padding: 1.6rem 1.8rem;
-    border-radius: 12px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.dec-fleet-list {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.2rem;
-    margin-top: 1.2rem;
-    flex: 1;
-}
-
-@media (max-width: 640px) {
-    .dec-fleet-list {
-        grid-template-columns: 1fr;
-    }
-}
 
-.dec-fleet-card {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 1.2rem 1.4rem;
-    display: flex;
-    align-items: center;
-    gap: 1.2rem;
-    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
-}
 
-.dec-fleet-card:hover {
-    transform: translateY(-3px);
-    border-color: var(--cyan);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
-}
-
-.fleet-icon-box {
-    width: 52px;
-    height: 52px;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.fleet-icon-box.blue-box {
-    background: rgba(56, 189, 248, 0.12);
-    border: 1px solid rgba(56, 189, 248, 0.3);
-}
-
-.fleet-icon-box.amber-box {
-    background: rgba(251, 191, 36, 0.12);
-    border: 1px solid rgba(251, 191, 36, 0.3);
-}
-
-.fleet-info {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-}
-
-.fleet-unit-count {
-    font-family: var(--font-display);
-    font-size: 1.65rem;
-    font-weight: 800;
-    color: #FFFFFF;
-    line-height: 1;
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-}
-
-.fleet-unit-suffix {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: var(--text-muted);
-}
-
-.fleet-unit-type {
-    font-family: var(--font-mono);
-    font-size: 0.78rem;
-    color: var(--text-muted);
-    white-space: nowrap;
-    letter-spacing: 0.3px;
-}
-
-/* Rencana Aksi Kritis Panel */
-.dec-action-panel {
-    padding: 1.6rem 1.8rem;
-    border-radius: 12px;
-}
-
-.dec-panel-title.action-title {
-    color: #f87171;
-}
-
-.dec-critical-box {
-    background: rgba(239, 68, 68, 0.05);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    border-left: 4px solid #ef4444;
-    border-radius: 8px;
-    padding: 1.3rem 1.5rem;
-    margin-top: 1.2rem;
-}
-
-.dec-critical-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
-}
-
-.critical-pulse-dot {
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    background-color: #ef4444;
-    box-shadow: 0 0 10px #ef4444;
-    animation: pulse-red-dot 1.5s infinite;
-    flex-shrink: 0;
-}
-
-@keyframes pulse-red-dot {
-    0% { transform: scale(0.9); opacity: 0.8; }
-    50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 14px #ef4444; }
-    100% { transform: scale(0.9); opacity: 0.8; }
-}
-
-.dec-critical-title {
-    font-family: var(--font-display);
-    font-size: 0.92rem;
-    font-weight: 800;
-    color: #fca5a5;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-    line-height: 1.3;
-}
-
-.dec-critical-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.dec-critical-list li {
-    font-size: 0.84rem;
-    color: #e2e8f0;
-    line-height: 1.55;
-    position: relative;
-    padding-left: 16px;
-}
-
-.dec-critical-list li::before {
-    content: "•";
-    position: absolute;
-    left: 0;
-    top: -1px;
-    color: #ef4444;
-    font-weight: bold;
-    font-size: 1.1rem;
-}
-
-/* ==========================================
-   PRAKIRAAN CUACA 7 HARI MODAL
-   ========================================== */
-.weather-modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(3, 7, 5, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    z-index: 9999;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
-    opacity: 0;
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.weather-modal-backdrop.open {
-    display: flex;
-    opacity: 1;
-}
-
-.weather-modal-dialog {
-    background: #0B1410;
-    border: 1px solid rgba(0, 240, 255, 0.25);
-    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 240, 255, 0.1);
-    border-radius: 16px;
-    width: 100%;
-    max-width: 440px;
-    padding: 1.8rem;
-    transform: scale(0.95);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    position: relative;
-    overflow: hidden;
-}
-
-.weather-modal-backdrop.open .weather-modal-dialog {
-    transform: scale(1);
-}
-
-.weather-modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-}
-
-.weather-modal-title-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.weather-modal-title {
-    font-family: var(--font-display);
-    font-size: 1.25rem;
-    font-weight: 800;
-    color: #FFFFFF;
-    letter-spacing: 0.5px;
-}
-
-.weather-location-pill {
-    background: rgba(0, 240, 255, 0.12);
-    border: 1px solid rgba(0, 240, 255, 0.35);
-    color: #38bdf8;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 700;
-    padding: 3px 10px;
-    border-radius: 6px;
-}
-
-.weather-modal-close-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-muted);
-    font-size: 1.3rem;
-    cursor: pointer;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    transition: color 0.2s, background 0.2s;
-}
-
-.weather-modal-close-btn:hover {
-    color: #FFFFFF;
-    background: rgba(255, 255, 255, 0.08);
-}
-
-/* Summary Card in Modal */
-.weather-modal-summary-card {
-    background: rgba(251, 191, 36, 0.04);
-    border: 1px solid rgba(251, 191, 36, 0.25);
-    border-radius: 10px;
-    padding: 1rem 1.2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-}
-
-.summary-left {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.summary-card-label {
-    font-family: var(--font-mono);
-    font-size: 0.7rem;
-    font-weight: 700;
-    color: var(--text-muted);
-    letter-spacing: 1px;
-}
-
-.summary-card-stats {
-    font-family: var(--font-mono);
-    font-size: 0.95rem;
-    color: #FFFFFF;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.summary-val-highlight {
-    color: #FFFFFF;
-    font-weight: 800;
-}
-
-.summary-separator {
-    color: var(--text-muted);
-}
-
-.weather-dryness-badge {
-    font-family: var(--font-mono);
-    font-size: 0.78rem;
-    font-weight: 800;
-    padding: 5px 12px;
-    border-radius: 6px;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-}
-
-.weather-dryness-badge.dry {
-    background: rgba(251, 191, 36, 0.15);
-    border: 1px solid #fbbf24;
-    color: #fbbf24;
-}
-
-.weather-dryness-badge.wet {
-    background: rgba(56, 189, 248, 0.15);
-    border: 1px solid #38bdf8;
-    color: #38bdf8;
-}
-
-.weather-dryness-badge.heavy {
-    background: rgba(239, 68, 68, 0.15);
-    border: 1px solid #ef4444;
-    color: #ef4444;
-}
-
-/* 7-Day Forecast List Rows */
-.weather-modal-forecast-list {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.weather-forecast-row {
-    display: grid;
-    grid-template-columns: 45px 30px 1fr 65px 75px;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.03);
-    transition: background 0.2s, border-color 0.2s;
-}
-
-.weather-forecast-row:hover {
-    background: rgba(0, 240, 255, 0.04);
-    border-color: rgba(0, 240, 255, 0.15);
-}
-
-.w-row-day {
-    font-family: var(--font-display);
-    font-size: 0.9rem;
-    font-weight: 700;
-    color: #FFFFFF;
-}
-
-.w-row-icon {
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.w-row-cond {
-    font-size: 0.85rem;
-    color: var(--text-main);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.w-row-precip {
-    font-family: var(--font-mono);
-    font-size: 0.82rem;
-    color: #38bdf8;
-    text-align: right;
-    font-weight: 600;
-}
-
-.w-row-temp {
-    font-family: var(--font-mono);
-    font-size: 0.88rem;
-    text-align: right;
-    display: flex;
-    gap: 6px;    justify-content: flex-end;
-}
-
-.w-temp-max {
-    color: #FFFFFF;
-    font-weight: 700;
-}
-
-.w-temp-min {
-    color: var(--text-muted);
-}
-
-.weather-modal-loading {
-    padding: 2.5rem 1rem;
-    text-align: center;
-    font-family: var(--font-mono);
-    font-size: 0.85rem;
-    color: var(--text-muted);
-}
-
-/* ==========================================
-   RESPONSIVE QUERIES FOR DECISION DASHBOARD
-   ========================================== */
-@media (max-width: 1100px) {
-    .decision-details-grid {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-    }
-    .decision-kpi-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .decision-header-top {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .decision-controls {
-        width: 100%;
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .dec-select {
-        width: 100%;
-    }
-    .dec-workload-grid {
-        display: flex;
-        overflow-x: auto;
-        padding-bottom: 12px;
-    }
-    .workload-day-card {
-        min-width: 120px;
-    }
-    .weather-forecast-row {
-        grid-template-columns: 35px 24px 1fr 50px 65px;
-        gap: 6px;
-        padding: 8px 10px;
-    }
-    .w-row-cond {
-        font-size: 0.78rem;
-    }
-}