{"id":1931,"date":"2026-03-15T07:28:47","date_gmt":"2026-03-15T07:28:47","guid":{"rendered":"https:\/\/marineconservation.id\/?page_id=1931"},"modified":"2026-03-15T10:15:47","modified_gmt":"2026-03-15T10:15:47","slug":"peta-kondisi-ekosistem-terumbu-karang","status":"publish","type":"page","link":"https:\/\/marineconservation.id\/id\/peta-kondisi-ekosistem-terumbu-karang\/","title":{"rendered":"Peta Kondisi Ekosistem Terumbu Karang"},"content":{"rendered":"<style>.elementor-1931 .elementor-element.elementor-element-a685689{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1931\" class=\"elementor elementor-1931\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a685689 e-flex e-con-boxed e-con e-parent\" data-id=\"a685689\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c15667 elementor-widget elementor-widget-html\" data-id=\"9c15667\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Peta Kondisi Ekosistem Terumbu Karang<\/title>\r\n    <!-- Leaflet CSS -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n    <!-- Chart.js 3 -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@3.9.1\/dist\/chart.min.js\"><\/script>\r\n    <!-- Font Awesome -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n    <!-- SheetJS -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n    <style>\r\n        * { box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; }\r\n        body { background: #e9f0f5; padding: 20px; }\r\n        .dashboard { max-width: 1400px; margin: 0 auto; background: white; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,20,40,0.15); overflow: hidden; }\r\n        header { background: #0b3b5c; color: white; padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }\r\n        header h1 { margin: 0; font-weight: 400; font-size: 1.8rem; }\r\n        .auth-container { max-width: 400px; margin: 50px auto; background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }\r\n        .auth-container h2 { margin-top: 0; color: #0b3b5c; }\r\n        .auth-container input { width: 100%; padding: 12px; margin: 8px 0; border: 2px solid #cbd6e3; border-radius: 12px; }\r\n        .auth-container button { width: 100%; padding: 12px; background: #0b3b5c; color: white; border: none; border-radius: 40px; font-weight: 600; cursor: pointer; margin-top: 10px; }\r\n        .auth-container .toggle { text-align: center; margin-top: 15px; color: #0b3b5c; cursor: pointer; }\r\n        .auth-container .error { color: #dc3545; font-size: 0.9rem; margin-top: 5px; }\r\n        .controls { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }\r\n        .btn { background: white; color: #0b3b5c; border: none; padding: 10px 20px; border-radius: 40px; font-weight: 600; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: inline-flex; align-items: center; gap: 8px; }\r\n        .btn:hover { background: #e9f0f5; transform: translateY(-2px); }\r\n        .btn-primary { background: #ffaa33; color: #1e3b5c; }\r\n        .btn-primary:hover { background: #ffb952; }\r\n        .btn-success { background: #28a745; color: white; }\r\n        .btn-success:hover { background: #218838; }\r\n        .btn-danger { background: #dc3545; color: white; }\r\n        .btn-danger:hover { background: #c82333; }\r\n        .btn-outline { background: white; color: #0b3b5c; border: 2px solid #0b3b5c; }\r\n        .btn-outline:hover { background: #e9f0f5; }\r\n        .badge-level { background: gold; color: #1e3b5c; padding: 5px 15px; border-radius: 40px; font-weight: bold; }\r\n        .sidebar { width: 300px; float: left; background: #f9fcff; border-right: 2px solid #cbd6e3; min-height: 600px; padding: 20px; overflow-y: auto; }\r\n        .main-content { margin-left: 300px; padding: 20px; }\r\n        .tab-bar { display: flex; background: #e9f0f5; padding: 10px 20px 0; gap: 5px; border-bottom: 2px solid #cbd6e3; flex-wrap: wrap; }\r\n        .tab { padding: 10px 20px; background: #dde7f0; border-radius: 20px 20px 0 0; cursor: pointer; font-weight: 600; color: #2c5777; transition: 0.2s; border: 2px solid #cbd6e3; border-bottom: none; margin-bottom: -2px; }\r\n        .tab.active { background: white; color: #0b3b5c; border-color: #cbd6e3 #cbd6e3 white; }\r\n        .tab-content { display: none; }\r\n        .tab-content.active { display: block; }\r\n        .form-section { background: #f9fcff; border: 1px solid #dde7f0; border-radius: 20px; padding: 20px; margin-bottom: 20px; }\r\n        .form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; align-items: flex-end; }\r\n        .form-group { flex: 1 1 200px; }\r\n        label { display: block; font-weight: 500; margin-bottom: 6px; color: #1e3b5c; }\r\n        input, select, textarea { width: 100%; padding: 10px; border: 2px solid #cbd6e3; border-radius: 12px; font-size: 0.95rem; background: white; }\r\n        input:focus, select:focus { border-color: #0b3b5c; outline: none; }\r\n        .map-container { height: 250px; border-radius: 12px; overflow: hidden; border: 2px solid #cbd6e3; margin: 15px 0; }\r\n        .project-list { margin-top: 15px; }\r\n        .project-card { background: white; border: 1px solid #dde7f0; border-radius: 12px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; position: relative; }\r\n        .project-card:hover { background: #e9f0f5; }\r\n        .project-card h4 { margin: 0 0 5px; color: #0b3b5c; font-size: 1rem; }\r\n        .project-card p { margin: 2px 0; color: #2c5777; font-size: 0.85rem; }\r\n        .project-card .delete-project { position: absolute; top: 5px; right: 5px; background: #dc3545; color: white; border: none; border-radius: 15px; padding: 2px 8px; font-size: 0.7rem; cursor: pointer; }\r\n        .analysis-selector { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; }\r\n        .analysis-btn { background: #e9f0f5; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-weight: 600; color: #0b3b5c; border: 2px solid #cbd6e3; transition: 0.2s; font-size: 0.9rem; }\r\n        .analysis-btn.active { background: #0b3b5c; color: white; border-color: #0b3b5c; }\r\n        .analysis-container { display: none; }\r\n        .analysis-container.active { display: block; }\r\n\r\n        \/* Benthic styles *\/\r\n        .photo-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }\r\n        .photo-thumb { border: 2px solid #cbd6e3; border-radius: 8px; padding: 3px; background: white; cursor: pointer; width: 80px; }\r\n        .photo-thumb.active { border-color: #0b3b5c; }\r\n        .photo-thumb img { width: 100%; height: 60px; object-fit: cover; border-radius: 6px; }\r\n        .canvas-area { display: flex; flex-wrap: wrap; gap: 20px; }\r\n        .canvas-wrapper { flex: 2; min-width: 400px; background: #1a2e3f; border-radius: 12px; padding: 10px; }\r\n        #benthicCanvas { width: 100%; height: auto; background: #2a4055; border-radius: 8px; cursor: crosshair; }\r\n        .point-panel, .polygon-panel { flex: 1; min-width: 250px; background: white; border-radius: 12px; border: 1px solid #dde7f0; padding: 15px; max-height: 500px; overflow-y: auto; }\r\n        .point-item, .polygon-item { background: #f0f7fe; border-radius: 8px; padding: 5px 10px; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }\r\n        .point-number { font-weight: 700; background: #0b3b5c; color: white; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.6rem; }\r\n        .point-select { flex: 1; padding: 2px; border-radius: 12px; border: 1px solid #b5c9db; font-size: 0.75rem; }\r\n        .info-msg { background: #e1f0fa; padding: 8px; border-radius: 8px; margin: 10px 0; font-size: 0.85rem; }\r\n        .calibration-panel { background: #fff3cd; border: 2px solid #ffc107; border-radius: 12px; padding: 12px; margin-bottom: 15px; }\r\n        .flex-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }\r\n        .badge { background: #0b3b5c; color: white; border-radius: 20px; padding: 3px 10px; font-size: 0.8rem; }\r\n        .popup-overlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }\r\n        .popup-content { background: white; padding: 20px; border-radius: 20px; width: 350px; max-width: 90%; }\r\n\r\n        \/* Table styles *\/\r\n        table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; border-radius: 8px; overflow: hidden; font-size: 0.85rem; }\r\n        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }\r\n        th { background: #004d66; color: white; }\r\n        .remove-btn { background: #dc3545; color: white; border: none; padding: 3px 8px; border-radius: 12px; cursor: pointer; font-size: 0.75rem; }\r\n        .warning { color: #856404; background-color: #fff3cd; border: 1px solid #ffeeba; padding: 5px; border-radius: 4px; margin-top: 5px; display: none; font-size: 0.8rem; }\r\n        .total-biomass { font-size: 1rem; font-weight: bold; margin: 10px 0; color: #0b3b5c; }\r\n\r\n        .chart-panel { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 15px; }\r\n        .chart-card { flex: 1 1 250px; background: white; border-radius: 12px; padding: 10px; border: 1px solid #dde7f0; }\r\n        .chart-card canvas { width: 100%; height: 150px; }\r\n        .station-info { background: #e1f0fa; border-radius: 8px; padding: 10px; margin-bottom: 15px; font-weight: 500; }\r\n        .footer-note { padding: 10px 20px; background: #e9f0f5; text-align: center; color: #2c5777; font-size: 0.8rem; border-top: 1px solid #cbd6e3; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"authView\" class=\"auth-container\">\r\n    <h2 id=\"authTitle\">Masuk<\/h2>\r\n    <input type=\"email\" id=\"loginEmail\" placeholder=\"Email\">\r\n    <input type=\"password\" id=\"loginPassword\" placeholder=\"Password\">\r\n    <input type=\"text\" id=\"registerName\" placeholder=\"Nama (untuk daftar)\" style=\"display: none;\">\r\n    <div id=\"authError\" class=\"error\"><\/div>\r\n    <button id=\"authActionBtn\">Masuk<\/button>\r\n    <div class=\"toggle\" id=\"toggleAuth\">Belum punya akun? Daftar<\/div>\r\n<\/div>\r\n\r\n<div id=\"appView\" style=\"display: none;\">\r\n    <div class=\"dashboard\">\r\n        <header>\r\n            <div>\r\n                <h1><i class=\"fas fa-map-marked-alt\" style=\"margin-right: 12px;\"><\/i> Peta Kondisi Ekosistem Terumbu Karang<\/h1>\r\n                <p id=\"userEmail\"><\/p>\r\n            <\/div>\r\n            <div class=\"controls\">\r\n                <button class=\"btn\" id=\"logoutBtn\"><i class=\"fas fa-sign-out-alt\"><\/i> Keluar<\/button>\r\n                <button class=\"btn btn-primary\" id=\"newProjectBtn\"><i class=\"fas fa-plus\"><\/i> Site Baru<\/button>\r\n                <button class=\"btn btn-success\" id=\"saveDraftBtn\"><i class=\"fas fa-save\"><\/i> Simpan Draft (JSON)<\/button>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <!-- Sidebar dan konten utama -->\r\n        <div style=\"display: flex;\">\r\n            <!-- Sidebar -->\r\n            <div class=\"sidebar\">\r\n                <h3>Site Saya<\/h3>\r\n                <div id=\"myProjects\" class=\"project-list\"><\/div>\r\n                <h3 style=\"margin-top: 20px;\">Site Dibagikan<\/h3>\r\n                <div id=\"sharedProjects\" class=\"project-list\"><\/div>\r\n            <\/div>\r\n\r\n            <!-- Konten utama -->\r\n            <div class=\"main-content\">\r\n                <!-- Project Detail View (akan ditampilkan saat site dipilih) -->\r\n                <div id=\"projectDetailView\" style=\"display: none;\">\r\n                    <div class=\"tab-bar\">\r\n                        <div class=\"tab active\" data-tab=\"info\">\ud83d\udccb Info Site<\/div>\r\n                        <div class=\"tab\" data-tab=\"analysis\">\ud83d\udd2c Analisis<\/div>\r\n                        <div class=\"tab\" data-tab=\"map\">\ud83d\uddfa\ufe0f Peta Kondisi<\/div>\r\n                        <div class=\"tab\" data-tab=\"share\">\ud83d\udd17 Bagikan<\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Info Site Tab -->\r\n                    <div id=\"tab-info\" class=\"tab-content active\">\r\n                        <div class=\"form-section\">\r\n                            <h3>Informasi Umum Site<\/h3>\r\n                            <div class=\"form-row\">\r\n                                <div class=\"form-group\"><label>Nama Site<\/label><input type=\"text\" id=\"siteName\" value=\"Site Baru\"><\/div>\r\n                                <div class=\"form-group\"><label>Surveyor<\/label><input type=\"text\" id=\"surveyor\" value=\"Tim Peneliti\"><\/div>\r\n                                <div class=\"form-group\"><label>Tanggal<\/label><input type=\"date\" id=\"surveyDate\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"form-row\">\r\n                                <div class=\"form-group\"><label>Latitude<\/label><input type=\"number\" step=\"any\" id=\"lat\" value=\"-8.6500\"><\/div>\r\n                                <div class=\"form-group\"><label>Longitude<\/label><input type=\"number\" step=\"any\" id=\"lng\" value=\"115.2160\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"map-container\" id=\"siteMap\"><\/div>\r\n                            <div class=\"form-row\">\r\n                                <div class=\"form-group\"><label>Kedalaman (m)<\/label><input type=\"number\" step=\"0.1\" id=\"depth\"><\/div>\r\n                                <div class=\"form-group\"><label>Kecerahan (m)<\/label><input type=\"number\" step=\"0.1\" id=\"visibility\"><\/div>\r\n                                <div class=\"form-group\"><label>Arus<\/label>\r\n                                    <select id=\"current\">\r\n                                        <option value=\"\">Pilih<\/option>\r\n                                        <option value=\"Lemah\">Lemah<\/option>\r\n                                        <option value=\"Sedang\">Sedang<\/option>\r\n                                        <option value=\"Kuat\">Kuat<\/option>\r\n                                    <\/select>\r\n                                <\/div>\r\n                                <div class=\"form-group\"><label>Gelombang<\/label>\r\n                                    <select id=\"wave\">\r\n                                        <option value=\"\">Pilih<\/option>\r\n                                        <option value=\"Tenang\">Tenang<\/option>\r\n                                        <option value=\"Sedang\">Sedang<\/option>\r\n                                        <option value=\"Besar\">Besar<\/option>\r\n                                    <\/select>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"form-row\">\r\n                                <div class=\"form-group\"><label>Instansi<\/label><input type=\"text\" id=\"institution\"><\/div>\r\n                                <div class=\"form-group\"><label>Kontributor<\/label><input type=\"text\" id=\"contributor\" readonly><\/div>\r\n                            <\/div>\r\n                            <button class=\"btn\" id=\"saveSiteInfoBtn\"><i class=\"fas fa-save\"><\/i> Simpan Info Site<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Analysis Tab -->\r\n                    <div id=\"tab-analysis\" class=\"tab-content\">\r\n                        <!-- Site selector dropdown -->\r\n                        <div class=\"form-row\" style=\"justify-content: flex-end;\">\r\n                            <div class=\"form-group\" style=\"max-width: 300px;\">\r\n                                <label>Pilih Site:<\/label>\r\n                                <select id=\"siteSelector\"><\/select>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"analysis-selector\">\r\n                            <div class=\"analysis-btn active\" data-analysis=\"benthic\">\ud83e\udea8 Substrat & Bentik<\/div>\r\n                            <div class=\"analysis-btn\" data-analysis=\"fish\">\ud83d\udc1f Ikan<\/div>\r\n                            <div class=\"analysis-btn\" data-analysis=\"megabentos\">\u2b50 Megabentos<\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Benthic Analysis -->\r\n                        <div id=\"analysis-benthic\" class=\"analysis-container active\">\r\n                            <div class=\"form-section\">\r\n                                <h3>Upload Foto & Analisis Bentik<\/h3>\r\n                                <div class=\"form-row\">\r\n                                    <div class=\"form-group\"><label>Waktu Pengamatan<\/label><input type=\"time\" id=\"benthicTime\" value=\"08:00\"><\/div>\r\n                                <\/div>\r\n                                <input type=\"file\" id=\"benthicPhotoInput\" accept=\"image\/*\" multiple>\r\n                                <p class=\"info-msg\"><i class=\"fas fa-info-circle\"><\/i> Foto akan dikompresi otomatis.<\/p>\r\n                                <div class=\"photo-gallery\" id=\"benthicPhotoGallery\"><\/div>\r\n                                <div class=\"flex-row\">\r\n                                    <button class=\"btn\" id=\"benthicGotoAreaBtn\" disabled>Lanjut ke Penandaan Area<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Calibration Panel -->\r\n                            <div class=\"calibration-panel\" id=\"benthicCalibrationPanel\">\r\n                                <strong><i class=\"fas fa-ruler\"><\/i> Kalibrasi Skala<\/strong>\r\n                                <div style=\"display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;\">\r\n                                    <button class=\"btn-outline\" id=\"benthicStartCalibrationBtn\">Gambar Garis Referensi<\/button>\r\n                                    <span>Panjang (px): <span id=\"benthicLineLengthPx\">0<\/span><\/span>\r\n                                    <input type=\"number\" id=\"benthicRealLengthCm\" placeholder=\"Panjang (cm)\" step=\"0.1\" style=\"width: 120px;\">\r\n                                    <button class=\"btn-outline\" id=\"benthicApplyScaleBtn\" disabled>Terapkan<\/button>\r\n                                    <span>Skala: <span id=\"benthicScaleValue\">-<\/span> cm\/px<\/span>\r\n                                <\/div>\r\n                                <p id=\"benthicCalibStatus\">Belum dikalibrasi.<\/p>\r\n                            <\/div>\r\n\r\n                            <!-- Area polygon buttons -->\r\n                            <div class=\"flex-row\" style=\"margin-bottom: 10px;\">\r\n                                <button class=\"btn-outline\" id=\"benthicClearPolygonBtn\">Reset Poligon Area<\/button>\r\n                                <button class=\"btn-outline\" id=\"benthicFinishPolygonBtn\">Selesai Poligon Area<\/button>\r\n                                <span class=\"badge\" id=\"benthicPolygonStatus\">Poligon area belum ditutup<\/span>\r\n                            <\/div>\r\n\r\n                            <!-- Level and Mode selectors -->\r\n                            <div class=\"level-selector\" id=\"benthicLevelSelector\" style=\"opacity:0.5; pointer-events:none; display:flex; gap:15px; background:#e9f0f5; padding:8px 12px; border-radius:30px; margin:10px 0;\">\r\n                                <label><input type=\"radio\" name=\"benthicIdentificationLevel\" value=\"basic\" checked disabled> Basic<\/label>\r\n                                <label><input type=\"radio\" name=\"benthicIdentificationLevel\" value=\"advanced\" disabled> Advanced<\/label>\r\n                            <\/div>\r\n                            <div class=\"mode-selector\" id=\"benthicModeSelector\" style=\"opacity:0.5; pointer-events:none; display:flex; gap:15px; background:#e9f0f5; padding:8px 12px; border-radius:30px; margin:10px 0;\">\r\n                                <label><input type=\"radio\" name=\"benthicAnalysisMode\" value=\"point\" disabled> Titik Acak<\/label>\r\n                                <label><input type=\"radio\" name=\"benthicAnalysisMode\" value=\"polygon\" disabled> Luasan<\/label>\r\n                            <\/div>\r\n\r\n                            <!-- Canvas area -->\r\n                            <div class=\"canvas-area\">\r\n                                <div class=\"canvas-wrapper\">\r\n                                    <canvas id=\"benthicCanvas\" width=\"500\" height=\"350\"><\/canvas>\r\n                                    <div class=\"flex-row\" style=\"margin-top:10px\">\r\n                                        <button class=\"btn\" id=\"benthicGeneratePointsBtn\" style=\"display: none;\">Generate 30 Titik<\/button>\r\n                                        <button class=\"btn\" id=\"benthicAddCoverPolygonBtn\" style=\"display: none;\">Tambah Poligon<\/button>\r\n                                    <\/div>\r\n                                    <p class=\"info-msg\" id=\"benthicCanvasHelp\">Klik kiri tambah titik poligon, kanan tutup.<\/p>\r\n                                <\/div>\r\n                                <div class=\"point-panel\" id=\"benthicPointPanel\" style=\"display: none;\">\r\n                                    <h4 style=\"margin-top:0;\">30 Titik Acak<\/h4>\r\n                                    <button class=\"reset-zoom-btn\" id=\"benthicResetZoomBtn\">Reset Zoom<\/button>\r\n                                    <div id=\"benthicPointsList\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"polygon-panel\" id=\"benthicCoverPolygonPanel\" style=\"display: none;\">\r\n                                    <h4 style=\"margin-top:0;\">Poligon Tutupan<\/h4>\r\n                                    <div style=\"display:flex; gap:5px;\">\r\n                                        <button class=\"reset-zoom-btn\" id=\"benthicZoomInCoverBtn\">+<\/button>\r\n                                        <button class=\"reset-zoom-btn\" id=\"benthicZoomOutCoverBtn\">-<\/button>\r\n                                        <button class=\"reset-zoom-btn\" id=\"benthicResetZoomCoverBtn\">Reset<\/button>\r\n                                    <\/div>\r\n                                    <div id=\"benthicCoverPolygonsList\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Fish Analysis -->\r\n                        <div id=\"analysis-fish\" class=\"analysis-container\">\r\n                            <div class=\"form-section\">\r\n                                <h3>Tambah Data Ikan<\/h3>\r\n                                <div class=\"form-row\">\r\n                                    <div class=\"form-group\"><label>Waktu Pengamatan<\/label><input type=\"time\" id=\"fishTime\" value=\"08:00\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"form-row\">\r\n                                    <div class=\"form-group\" style=\"flex:3;\">\r\n                                        <label>Nama (Family\/Genus\/Spesies)<\/label>\r\n                                        <input list=\"fishDatalist\" id=\"fishTaxonInput\" placeholder=\"Ketik...\">\r\n                                        <datalist id=\"fishDatalist\"><\/datalist>\r\n                                    <\/div>\r\n                                    <div class=\"form-group\"><label>Jumlah<\/label><input type=\"number\" id=\"fishCount\" min=\"1\" value=\"1\"><\/div>\r\n                                    <div class=\"form-group\"><label>Ukuran (cm)<\/label><input type=\"number\" id=\"fishSize\" step=\"5\" value=\"10\"><\/div>\r\n                                    <div class=\"form-group\"><label>Biomassa (g)<\/label><input type=\"text\" id=\"fishBiomassDisplay\" readonly value=\"0\"><\/div>\r\n                                    <div><button class=\"btn\" id=\"fishAddEntryBtn\">Tambah<\/button><\/div>\r\n                                <\/div>\r\n                                <div id=\"fishSizeWarning\" class=\"warning\"><\/div>\r\n                            <\/div>\r\n                            <h4>Daftar Ikan<\/h4>\r\n                            <table id=\"fishEntriesTable\">\r\n                                <thead><tr><th>Nama<\/th><th>Level<\/th><th>Jumlah<\/th><th>Ukuran<\/th><th>Biomassa<\/th><th>Aksi<\/th><\/tr><\/thead>\r\n                                <tbody id=\"fishTableBody\"><\/tbody>\r\n                            <\/table>\r\n                            <div class=\"total-biomass\" id=\"totalFishBiomass\">Total Biomassa: 0 gram<\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Megabentos Analysis -->\r\n                        <div id=\"analysis-megabentos\" class=\"analysis-container\">\r\n                            <div class=\"form-section\">\r\n                                <h3>Tambah Data Megabentos<\/h3>\r\n                                <div class=\"form-row\">\r\n                                    <div class=\"form-group\"><label>Waktu Pengamatan<\/label><input type=\"time\" id=\"megaTime\" value=\"08:00\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"form-row\">\r\n                                    <div class=\"form-group\" style=\"flex:3;\">\r\n                                        <label>Nama (Group\/Genus\/Spesies)<\/label>\r\n                                        <input list=\"megaDatalist\" id=\"megaTaxonInput\" placeholder=\"Ketik...\">\r\n                                        <datalist id=\"megaDatalist\"><\/datalist>\r\n                                    <\/div>\r\n                                    <div class=\"form-group\"><label>Jumlah<\/label><input type=\"number\" id=\"megaCount\" min=\"1\" value=\"1\"><\/div>\r\n                                    <div class=\"form-group\"><label>Ukuran (cm)<\/label><input type=\"number\" id=\"megaSize\" step=\"0.1\" value=\"10.00\"><\/div>\r\n                                    <div class=\"form-group\"><label>Substrat<\/label>\r\n                                        <select id=\"megaSubstrate\">\r\n                                            <option value=\"\">Pilih<\/option>\r\n                                            <option value=\"HC\">HC - Coral<\/option>\r\n                                            <option value=\"DC\">DC - Dead Coral<\/option>\r\n                                            <option value=\"DCA\">DCA - Dead Coral Algae<\/option>\r\n                                            <option value=\"SC\">SC - Soft Coral<\/option>\r\n                                            <option value=\"SP\">SP - Sponge<\/option>\r\n                                            <option value=\"R\">R - Rubble<\/option>\r\n                                            <option value=\"S\">S - Sand<\/option>\r\n                                            <option value=\"RK\">RK - Rock<\/option>\r\n                                        <\/select>\r\n                                    <\/div>\r\n                                    <div class=\"form-group\"><label>Biomassa (g)<\/label><input type=\"text\" id=\"megaBiomassDisplay\" readonly value=\"0\"><\/div>\r\n                                    <div><button class=\"btn\" id=\"megaAddEntryBtn\">Tambah<\/button><\/div>\r\n                                <\/div>\r\n                                <div id=\"megaSizeWarning\" class=\"warning\"><\/div>\r\n                            <\/div>\r\n                            <h4>Daftar Megabentos<\/h4>\r\n                            <table id=\"megaEntriesTable\">\r\n                                <thead><tr><th>Nama<\/th><th>Level<\/th><th>Jumlah<\/th><th>Ukuran<\/th><th>Substrat<\/th><th>Biomassa<\/th><th>Aksi<\/th><\/tr><\/thead>\r\n                                <tbody id=\"megaTableBody\"><\/tbody>\r\n                            <\/table>\r\n                            <div class=\"total-biomass\" id=\"totalMegaBiomass\">Total Biomassa: 0 gram<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Public Map Tab -->\r\n                    <div id=\"tab-map\" class=\"tab-content\">\r\n                        <div class=\"station-info\" id=\"mapStationInfo\">Klik marker untuk melihat detail.<\/div>\r\n                        <div id=\"map\" style=\"height:400px; border-radius:12px; border:2px solid #cbd6e3;\"><\/div>\r\n                        <div class=\"chart-panel\">\r\n                            <div class=\"chart-card\"><h4>Ikan (gram)<\/h4><canvas id=\"fishChart\"><\/canvas><\/div>\r\n                            <div class=\"chart-card\"><h4>Substrat (%)<\/h4><canvas id=\"substrateChart\"><\/canvas><\/div>\r\n                            <div class=\"chart-card\"><h4>Megabentos<\/h4><canvas id=\"megabentosChart\"><\/canvas><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Share Tab -->\r\n                    <div id=\"tab-share\" class=\"tab-content\">\r\n                        <div class=\"form-section\">\r\n                            <h3>Bagikan Site<\/h3>\r\n                            <p>Masukkan email anggota tim.<\/p>\r\n                            <div class=\"form-row\">\r\n                                <div class=\"form-group\"><label>Email<\/label><input type=\"email\" id=\"shareEmail\" placeholder=\"email@contoh.com\"><\/div>\r\n                                <div><button class=\"btn\" id=\"shareBtn\">Bagikan<\/button><\/div>\r\n                            <\/div>\r\n                            <h4>Daftar yang sudah diberi akses<\/h4>\r\n                            <ul id=\"sharedList\"><\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Jika tidak ada site dipilih, tampilkan peta publik saja -->\r\n                <div id=\"publicMapView\" style=\"display: block;\">\r\n                    <div class=\"station-info\">Peta publik - klik marker untuk detail<\/div>\r\n                    <div id=\"publicMap\" style=\"height:500px; border-radius:12px; border:2px solid #cbd6e3;\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"footer-note\">\r\n            <i class=\"fas fa-info-circle\"><\/i> Data draft dapat disimpan sebagai JSON.\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Popup kategori poligon -->\r\n<div id=\"benthicCategoryPopup\" class=\"popup-overlay\" style=\"display: none;\">\r\n    <div class=\"popup-content\">\r\n        <h3>Kategori Poligon<\/h3>\r\n        <input type=\"text\" id=\"benthicCategoryInput\" list=\"benthicCategoryList\" autocomplete=\"off\">\r\n        <datalist id=\"benthicCategoryList\"><\/datalist>\r\n        <div class=\"popup-buttons\">\r\n            <button class=\"btn-outline\" id=\"benthicPopupCancel\">Batal<\/button>\r\n            <button class=\"btn\" id=\"benthicPopupSave\">Simpan<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Leaflet & Chart.js -->\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@3.9.1\/dist\/chart.min.js\"><\/script>\r\n\r\n<script>\r\n    \/\/ ==================== KONFIGURASI API ====================\r\n    const API_BASE = '\/wp-content\/themes\/astra\/KEK-API\/'; \/\/ sesuaikan dengan tema Anda\r\n\r\n    \/\/ ==================== GLOBAL STATE ====================\r\n    let currentUser = null;\r\n    let currentProjectId = null;\r\n    let currentProjectData = {\r\n        info: {},\r\n        benthic: { photos: [], activePhotoIndex: 0, analysisMode: 'point', identificationLevel: 'basic', scale: null, polygonPoints: [], isPolygonClosed: false, randomPoints: [], selectedCategories: [], coverPolygons: [], time: '08:00' },\r\n        fish: { entries: [], time: '08:00' },\r\n        megabentos: { entries: [], time: '08:00' }\r\n    };\r\n    let allUserProjects = []; \/\/ untuk site selector\r\n\r\n    \/\/ ==================== FUNGSI API ====================\r\n    async function apiCall(endpoint, method = 'POST', data = null) {\r\n        const url = API_BASE + endpoint;\r\n        const options = {\r\n            method,\r\n            headers: { 'Content-Type': 'application\/json' },\r\n            credentials: 'include'\r\n        };\r\n        if (data) options.body = JSON.stringify(data);\r\n        try {\r\n            const response = await fetch(url, options);\r\n            const contentType = response.headers.get('content-type');\r\n            if (!contentType || !contentType.includes('application\/json')) {\r\n                const text = await response.text();\r\n                throw new Error(`Server error (${response.status}): ${text.substring(0,100)}`);\r\n            }\r\n            const result = await response.json();\r\n            if (!response.ok) throw new Error(result.error || 'Request failed');\r\n            return result;\r\n        } catch (err) {\r\n            console.error('apiCall error:', err);\r\n            throw err;\r\n        }\r\n    }\r\n\r\n    \/\/ ==================== AUTH ====================\r\n    const authView = document.getElementById('authView');\r\n    const appView = document.getElementById('appView');\r\n    const authTitle = document.getElementById('authTitle');\r\n    const authEmail = document.getElementById('loginEmail');\r\n    const authPassword = document.getElementById('loginPassword');\r\n    const registerName = document.getElementById('registerName');\r\n    const authError = document.getElementById('authError');\r\n    const authActionBtn = document.getElementById('authActionBtn');\r\n    const toggleAuth = document.getElementById('toggleAuth');\r\n    const userEmailSpan = document.getElementById('userEmail');\r\n    const logoutBtn = document.getElementById('logoutBtn');\r\n\r\n    let isLogin = true;\r\n\r\n    toggleAuth.addEventListener('click', () => {\r\n        isLogin = !isLogin;\r\n        authTitle.innerText = isLogin ? 'Masuk' : 'Daftar';\r\n        authActionBtn.innerText = isLogin ? 'Masuk' : 'Daftar';\r\n        toggleAuth.innerText = isLogin ? 'Belum punya akun? Daftar' : 'Sudah punya akun? Masuk';\r\n        registerName.style.display = isLogin ? 'none' : 'block';\r\n    });\r\n\r\n    authActionBtn.addEventListener('click', async () => {\r\n        const email = authEmail.value.trim();\r\n        const password = authPassword.value;\r\n        const name = registerName.value.trim();\r\n        authError.innerText = '';\r\n        try {\r\n            if (isLogin) {\r\n                const result = await apiCall('login.php', 'POST', { email, password });\r\n                currentUser = result.user;\r\n            } else {\r\n                if (!name) throw new Error('Nama harus diisi');\r\n                await apiCall('register.php', 'POST', { email, password, name });\r\n                const result = await apiCall('login.php', 'POST', { email, password });\r\n                currentUser = result.user;\r\n            }\r\n            authView.style.display = 'none';\r\n            appView.style.display = 'block';\r\n            userEmailSpan.innerText = `Masuk sebagai: ${currentUser.email}`;\r\n            loadProjectsList();\r\n            initPublicMap(); \/\/ tampilkan peta publik di sidebar\r\n        } catch (err) {\r\n            authError.innerText = err.message;\r\n        }\r\n    });\r\n\r\n    logoutBtn.addEventListener('click', async () => {\r\n        await fetch('\/wp-login.php?action=logout', { credentials: 'include' });\r\n        currentUser = null;\r\n        authView.style.display = 'block';\r\n        appView.style.display = 'none';\r\n    });\r\n\r\n    \/\/ ==================== PROYEK LIST ====================\r\n    const myProjectsDiv = document.getElementById('myProjects');\r\n    const sharedProjectsDiv = document.getElementById('sharedProjects');\r\n    const projectDetailView = document.getElementById('projectDetailView');\r\n    const publicMapView = document.getElementById('publicMapView');\r\n\r\n    async function loadProjectsList() {\r\n        if (!currentUser) return;\r\n        try {\r\n            const result = await apiCall('get_projects.php', 'GET');\r\n            allUserProjects = result.own || [];\r\n            myProjectsDiv.innerHTML = '';\r\n            sharedProjectsDiv.innerHTML = '';\r\n            (result.own || []).forEach(proj => {\r\n                const card = document.createElement('div');\r\n                card.className = 'project-card';\r\n                card.innerHTML = `<h4>${proj.name}<\/h4><p>${proj.date || ''}<\/p><p>Pemilik: Anda<\/p><button class=\"delete-project\" data-id=\"${proj.id}\">Hapus<\/button>`;\r\n                card.addEventListener('click', (e) => {\r\n                    if (e.target.classList.contains('delete-project')) return;\r\n                    openProject(proj);\r\n                });\r\n                card.querySelector('.delete-project').addEventListener('click', async (e) => {\r\n                    e.stopPropagation();\r\n                    if (!confirm('Hapus proyek ini?')) return;\r\n                    await apiCall('delete_project.php', 'POST', { project_id: e.target.dataset.id });\r\n                    loadProjectsList();\r\n                });\r\n                myProjectsDiv.appendChild(card);\r\n            });\r\n            (result.shared || []).forEach(proj => {\r\n                const card = document.createElement('div');\r\n                card.className = 'project-card';\r\n                card.innerHTML = `<h4>${proj.name}<\/h4><p>${proj.date || ''}<\/p><p>Pemilik: ${proj.owner_email}<\/p>`;\r\n                card.addEventListener('click', () => openProject(proj));\r\n                sharedProjectsDiv.appendChild(card);\r\n            });\r\n            populateSiteSelector();\r\n        } catch (err) {\r\n            alert('Gagal memuat proyek: ' + err.message);\r\n        }\r\n    }\r\n\r\n    function populateSiteSelector() {\r\n        const sel = document.getElementById('siteSelector');\r\n        if (!sel) return;\r\n        sel.innerHTML = '';\r\n        allUserProjects.forEach(proj => {\r\n            const opt = document.createElement('option');\r\n            opt.value = proj.id;\r\n            opt.textContent = proj.name;\r\n            if (proj.id == currentProjectId) opt.selected = true;\r\n            sel.appendChild(opt);\r\n        });\r\n    }\r\n\r\n    document.getElementById('siteSelector')?.addEventListener('change', async function() {\r\n        const projId = this.value;\r\n        const proj = allUserProjects.find(p => p.id == projId);\r\n        if (proj) {\r\n            openProject(proj);\r\n        }\r\n    });\r\n\r\n    \/\/ ==================== BUKA PROYEK ====================\r\n    function openProject(proj) {\r\n        currentProjectId = proj.id;\r\n        try {\r\n            currentProjectData = proj.data ? JSON.parse(proj.data) : { \r\n                info: {}, \r\n                benthic: { photos: [], activePhotoIndex: 0, analysisMode: 'point', identificationLevel: 'basic', time: '08:00' },\r\n                fish: { entries: [], time: '08:00' },\r\n                megabentos: { entries: [], time: '08:00' }\r\n            };\r\n        } catch (e) {\r\n            console.warn('Data proyek rusak, menggunakan default');\r\n            currentProjectData = { \r\n                info: {}, \r\n                benthic: { photos: [], activePhotoIndex: 0, analysisMode: 'point', identificationLevel: 'basic', time: '08:00' },\r\n                fish: { entries: [], time: '08:00' },\r\n                megabentos: { entries: [], time: '08:00' }\r\n            };\r\n        }\r\n        projectDetailView.style.display = 'block';\r\n        publicMapView.style.display = 'none';\r\n        \/\/ Isi form info\r\n        document.getElementById('siteName').value = proj.name || '';\r\n        document.getElementById('surveyor').value = proj.surveyor || '';\r\n        document.getElementById('surveyDate').value = proj.date || '';\r\n        document.getElementById('lat').value = proj.lat || -8.65;\r\n        document.getElementById('lng').value = proj.lng || 115.216;\r\n        document.getElementById('depth').value = proj.depth || '';\r\n        document.getElementById('visibility').value = proj.visibility || '';\r\n        document.getElementById('current').value = proj.current || '';\r\n        document.getElementById('wave').value = proj.wave || '';\r\n        document.getElementById('institution').value = proj.institution || '';\r\n        document.getElementById('contributor').value = proj.contributor || currentUser.email;\r\n        initSiteMap();\r\n        \/\/ Muat data analisis\r\n        benthicLoadFromProject();\r\n        fishEntries = currentProjectData.fish.entries || [];\r\n        document.getElementById('fishTime').value = currentProjectData.fish.time || '08:00';\r\n        renderFishTable();\r\n        megaEntries = currentProjectData.megabentos.entries || [];\r\n        document.getElementById('megaTime').value = currentProjectData.megabentos.time || '08:00';\r\n        renderMegaTable();\r\n        document.getElementById('benthicTime').value = currentProjectData.benthic.time || '08:00';\r\n        populateSiteSelector();\r\n        \/\/ Buka tab info\r\n        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));\r\n        document.querySelector('.tab[data-tab=\"info\"]').classList.add('active');\r\n        document.getElementById('tab-info').classList.add('active');\r\n    }\r\n\r\n    \/\/ ==================== PETA SITE ====================\r\n    let siteMap, siteMarker;\r\n    function initSiteMap() {\r\n        if (!siteMap) {\r\n            siteMap = L.map('siteMap').setView([-8.65, 115.216], 13);\r\n            L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\r\n                attribution: 'Tiles &copy; Esri'\r\n            }).addTo(siteMap);\r\n            siteMarker = L.marker([-8.65, 115.216], { draggable: true }).addTo(siteMap);\r\n            siteMarker.on('dragend', (e) => {\r\n                const pos = e.target.getLatLng();\r\n                document.getElementById('lat').value = pos.lat.toFixed(6);\r\n                document.getElementById('lng').value = pos.lng.toFixed(6);\r\n            });\r\n            siteMap.on('click', (e) => {\r\n                siteMarker.setLatLng(e.latlng);\r\n                document.getElementById('lat').value = e.latlng.lat.toFixed(6);\r\n                document.getElementById('lng').value = e.latlng.lng.toFixed(6);\r\n            });\r\n        }\r\n        const lat = parseFloat(document.getElementById('lat').value);\r\n        const lng = parseFloat(document.getElementById('lng').value);\r\n        siteMap.setView([lat, lng], 13);\r\n        siteMarker.setLatLng([lat, lng]);\r\n    }\r\n\r\n    \/\/ ==================== SIMPAN INFO SITE ====================\r\n    document.getElementById('saveSiteInfoBtn')?.addEventListener('click', async () => {\r\n        const siteData = {\r\n            id: currentProjectId,\r\n            name: document.getElementById('siteName').value,\r\n            surveyor: document.getElementById('surveyor').value,\r\n            date: document.getElementById('surveyDate').value,\r\n            lat: parseFloat(document.getElementById('lat').value),\r\n            lng: parseFloat(document.getElementById('lng').value),\r\n            depth: document.getElementById('depth').value,\r\n            visibility: document.getElementById('visibility').value,\r\n            current: document.getElementById('current').value,\r\n            wave: document.getElementById('wave').value,\r\n            institution: document.getElementById('institution').value,\r\n            contributor: document.getElementById('contributor').value,\r\n            data: JSON.stringify(currentProjectData)\r\n        };\r\n        try {\r\n            await apiCall('save_project.php', 'POST', siteData);\r\n            alert('Info site disimpan');\r\n        } catch (err) {\r\n            alert('Gagal menyimpan: ' + err.message);\r\n        }\r\n    });\r\n\r\n    \/\/ ==================== PROYEK BARU ====================\r\n    document.getElementById('newProjectBtn').addEventListener('click', async () => {\r\n        const name = prompt('Nama site baru:', 'Site Baru');\r\n        if (!name) return;\r\n        const newProj = {\r\n            name: name,\r\n            surveyor: '',\r\n            date: new Date().toISOString().slice(0,10),\r\n            lat: -8.65,\r\n            lng: 115.216,\r\n            depth: '',\r\n            visibility: '',\r\n            current: '',\r\n            wave: '',\r\n            institution: '',\r\n            contributor: currentUser.email,\r\n            data: JSON.stringify({ \r\n                benthic: { photos: [], activePhotoIndex: 0, analysisMode: 'point', identificationLevel: 'basic', time: '08:00' },\r\n                fish: { entries: [], time: '08:00' },\r\n                megabentos: { entries: [], time: '08:00' }\r\n            })\r\n        };\r\n        try {\r\n            const result = await apiCall('save_project.php', 'POST', newProj);\r\n            currentProjectId = result.id;\r\n            await loadProjectsList(); \/\/ muat ulang daftar\r\n            openProject({ id: result.id, ...newProj });\r\n        } catch (err) {\r\n            alert('Gagal membuat site: ' + err.message);\r\n        }\r\n    });\r\n\r\n    \/\/ ==================== BAGIKAN ====================\r\n    document.getElementById('shareBtn')?.addEventListener('click', async () => {\r\n        const email = document.getElementById('shareEmail').value.trim();\r\n        if (!email) return;\r\n        try {\r\n            await apiCall('share_project.php', 'POST', { project_id: currentProjectId, email });\r\n            alert('Berhasil dibagikan');\r\n        } catch (err) { alert(err.message); }\r\n    });\r\n\r\n    \/\/ ==================== DRAFT JSON ====================\r\n    document.getElementById('saveDraftBtn').addEventListener('click', () => {\r\n        const data = {\r\n            info: {\r\n                name: document.getElementById('siteName').value,\r\n                lat: document.getElementById('lat').value,\r\n                lng: document.getElementById('lng').value,\r\n                depth: document.getElementById('depth').value,\r\n                visibility: document.getElementById('visibility').value,\r\n                current: document.getElementById('current').value,\r\n                wave: document.getElementById('wave').value,\r\n                institution: document.getElementById('institution').value,\r\n                contributor: document.getElementById('contributor').value,\r\n            },\r\n            fish: { entries: fishEntries, time: document.getElementById('fishTime').value },\r\n            megabentos: { entries: megaEntries, time: document.getElementById('megaTime').value },\r\n            benthic: { ...currentProjectData.benthic, time: document.getElementById('benthicTime').value }\r\n        };\r\n        const json = JSON.stringify(data, null, 2);\r\n        const blob = new Blob([json], { type: 'application\/json' });\r\n        const a = document.createElement('a');\r\n        a.href = URL.createObjectURL(blob);\r\n        a.download = 'draft_site.json';\r\n        a.click();\r\n    });\r\n\r\n    \/\/ ==================== TAB NAVIGASI ====================\r\n    document.querySelectorAll('.tab').forEach(tab => {\r\n        tab.addEventListener('click', () => {\r\n            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));\r\n            tab.classList.add('active');\r\n            document.getElementById('tab-' + tab.dataset.tab).classList.add('active');\r\n            if (tab.dataset.tab === 'map') {\r\n                initMainMapAndCharts();\r\n            }\r\n        });\r\n    });\r\n\r\n    document.querySelectorAll('.analysis-btn').forEach(btn => {\r\n        btn.addEventListener('click', () => {\r\n            document.querySelectorAll('.analysis-btn').forEach(b => b.classList.remove('active'));\r\n            document.querySelectorAll('.analysis-container').forEach(c => c.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            document.getElementById('analysis-' + btn.dataset.analysis).classList.add('active');\r\n        });\r\n    });\r\n\r\n    \/\/ ==================== PETA PUBLIK (di sidebar) ====================\r\n    let publicMap, publicMarkers = [];\r\n    function initPublicMap() {\r\n        if (!publicMap) {\r\n            publicMap = L.map('publicMap').setView([-2.5, 118], 5);\r\n            L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\r\n                attribution: 'Tiles &copy; Esri'\r\n            }).addTo(publicMap);\r\n        }\r\n        loadPublicSites();\r\n    }\r\n\r\n    async function loadPublicSites() {\r\n        try {\r\n            const res = await apiCall('get_public_sites.php', 'GET');\r\n            publicMarkers.forEach(m => publicMap.removeLayer(m));\r\n            publicMarkers = [];\r\n            if (res.sites && res.sites.length > 0) {\r\n                \/\/ Kelompokkan berdasarkan koordinat (dibulatkan ke 3 desimal)\r\n                const groups = {};\r\n                res.sites.forEach(site => {\r\n                    const key = site.lat.toFixed(3) + ',' + site.lng.toFixed(3);\r\n                    if (!groups[key]) groups[key] = [];\r\n                    groups[key].push(site);\r\n                });\r\n                for (let key in groups) {\r\n                    const sites = groups[key];\r\n                    const [lat, lng] = key.split(',').map(Number);\r\n                    \/\/ Hitung rata-rata\r\n                    let avgFish = 0, avgMega = 0;\r\n                    sites.forEach(s => { avgFish += s.fish_total || 0; avgMega += s.megabentos_total || 0; });\r\n                    avgFish \/= sites.length;\r\n                    avgMega \/= sites.length;\r\n                    \/\/ Urutkan berdasarkan tanggal untuk tren\r\n                    sites.sort((a,b) => (a.date || '') > (b.date || '') ? 1 : -1);\r\n                    let trendFish = 'stable', trendMega = 'stable';\r\n                    if (sites.length >= 2) {\r\n                        let firstFish = sites[0].fish_total || 0;\r\n                        let lastFish = sites[sites.length-1].fish_total || 0;\r\n                        trendFish = lastFish > firstFish ? 'up' : (lastFish < firstFish ? 'down' : 'stable');\r\n                        let firstMega = sites[0].megabentos_total || 0;\r\n                        let lastMega = sites[sites.length-1].megabentos_total || 0;\r\n                        trendMega = lastMega > firstMega ? 'up' : (lastMega < firstMega ? 'down' : 'stable');\r\n                    }\r\n                    const popupContent = `\r\n                        <b>Lokasi: ${lat}, ${lng}<\/b><br>\r\n                        Jumlah pengamatan: ${sites.length}<br>\r\n                        Rata-rata Ikan: ${avgFish.toFixed(2)} g ${trendFish === 'up' ? '\u2191' : (trendFish === 'down' ? '\u2193' : '\u2192')}<br>\r\n                        Rata-rata Megabentos: ${avgMega.toFixed(2)} g ${trendMega === 'up' ? '\u2191' : (trendMega === 'down' ? '\u2193' : '\u2192')}<br>\r\n                        <small>Klik untuk detail<\/small>\r\n                    `;\r\n                    const marker = L.marker([lat, lng]).addTo(publicMap);\r\n                    marker.bindPopup(popupContent);\r\n                    publicMarkers.push(marker);\r\n                }\r\n            } else {\r\n                \/\/ Peta kosong\r\n            }\r\n        } catch (e) {\r\n            console.error('Gagal memuat situs publik:', e);\r\n        }\r\n    }\r\n\r\n    \/\/ ==================== PETA UTAMA (di tab map) ====================\r\n    let mainMap, fishChart, substrateChart, megabentosChart, mainMarkers = [];\r\n    function initMainMapAndCharts() {\r\n        if (!mainMap) {\r\n            mainMap = L.map('map').setView([-2.5, 118], 5);\r\n            L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\r\n                attribution: 'Tiles &copy; Esri'\r\n            }).addTo(mainMap);\r\n        }\r\n        \/\/ Inisialisasi chart\r\n        if (!fishChart) {\r\n            fishChart = new Chart(document.getElementById('fishChart').getContext('2d'), {\r\n                type: 'bar',\r\n                data: { labels: [], datasets: [{ label: 'Biomassa (gram)', data: [], backgroundColor: '#0d6efd' }] },\r\n                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }\r\n            });\r\n            substrateChart = new Chart(document.getElementById('substrateChart').getContext('2d'), {\r\n                type: 'bar',\r\n                data: { labels: [], datasets: [{ label: 'Tutupan (%)', data: [], backgroundColor: '#198754' }] },\r\n                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, max: 100 } } }\r\n            });\r\n            megabentosChart = new Chart(document.getElementById('megabentosChart').getContext('2d'), {\r\n                type: 'bar',\r\n                data: { labels: [], datasets: [{ label: 'Kelimpahan', data: [], backgroundColor: '#dc3545' }] },\r\n                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }\r\n            });\r\n        }\r\n        \/\/ Muat data publik untuk peta ini juga\r\n        loadPublicSitesForMainMap();\r\n    }\r\n\r\n    async function loadPublicSitesForMainMap() {\r\n        try {\r\n            const res = await apiCall('get_public_sites.php', 'GET');\r\n            mainMarkers.forEach(m => mainMap.removeLayer(m));\r\n            mainMarkers = [];\r\n            if (res.sites && res.sites.length > 0) {\r\n                const groups = {};\r\n                res.sites.forEach(site => {\r\n                    const key = site.lat.toFixed(3) + ',' + site.lng.toFixed(3);\r\n                    if (!groups[key]) groups[key] = [];\r\n                    groups[key].push(site);\r\n                });\r\n                for (let key in groups) {\r\n                    const sites = groups[key];\r\n                    const [lat, lng] = key.split(',').map(Number);\r\n                    let avgFish = 0, avgMega = 0;\r\n                    sites.forEach(s => { avgFish += s.fish_total || 0; avgMega += s.megabentos_total || 0; });\r\n                    avgFish \/= sites.length;\r\n                    avgMega \/= sites.length;\r\n                    sites.sort((a,b) => (a.date || '') > (b.date || '') ? 1 : -1);\r\n                    let trendFish = 'stable', trendMega = 'stable';\r\n                    if (sites.length >= 2) {\r\n                        let firstFish = sites[0].fish_total || 0;\r\n                        let lastFish = sites[sites.length-1].fish_total || 0;\r\n                        trendFish = lastFish > firstFish ? 'up' : (lastFish < firstFish ? 'down' : 'stable');\r\n                        let firstMega = sites[0].megabentos_total || 0;\r\n                        let lastMega = sites[sites.length-1].megabentos_total || 0;\r\n                        trendMega = lastMega > firstMega ? 'up' : (lastMega < firstMega ? 'down' : 'stable');\r\n                    }\r\n                    const popupContent = `\r\n                        <b>Lokasi: ${lat}, ${lng}<\/b><br>\r\n                        Jumlah: ${sites.length}<br>\r\n                        Ikan: ${avgFish.toFixed(2)} g ${trendFish === 'up' ? '\u2191' : (trendFish === 'down' ? '\u2193' : '\u2192')}<br>\r\n                        Megabentos: ${avgMega.toFixed(2)} g ${trendMega === 'up' ? '\u2191' : (trendMega === 'down' ? '\u2193' : '\u2192')}\r\n                    `;\r\n                    const marker = L.marker([lat, lng]).addTo(mainMap);\r\n                    marker.bindPopup(popupContent);\r\n                    mainMarkers.push(marker);\r\n                }\r\n            }\r\n        } catch (e) {\r\n            console.error(e);\r\n        }\r\n    }\r\n\r\n    \/\/ ==================== BENTHIC MODULE (dari kode sebelumnya, disingkat) ====================\r\n    \/\/ ... (semua fungsi benthic tetap sama, hanya disesuaikan dengan ID baru)\r\n    \/\/ Untuk menghemat tempat, asumsikan kode benthic lengkap dari jawaban sebelumnya sudah disertakan.\r\n    \/\/ Di sini saya akan menandai bahwa bagian ini harus diisi dengan kode benthic yang sudah ada.\r\n    \/\/ Silakan salin kode benthic dari jawaban sebelumnya ke bagian ini.\r\n\r\n    \/\/ ==================== IKAN MODULE ====================\r\n    let fishEntries = [];\r\n    let fishFamilies = [], fishGenera = [], fishSpecies = [], fishSpeciesLookup = {}, fishGenusMaxLength = {}, fishFamilyMaxSize = {};\r\n    let fishDataLoaded = false;\r\n\r\n    async function loadFishCSV() {\r\n        try {\r\n            const [famRes, genRes, speRes] = await Promise.all([\r\n                fetch('\/wp-content\/uploads\/Ikan\/Fish_Families.csv'),\r\n                fetch('\/wp-content\/uploads\/Ikan\/Fish_Genera.csv'),\r\n                fetch('\/wp-content\/uploads\/Ikan\/Fish_Species.csv')\r\n            ]);\r\n            const famText = await famRes.text();\r\n            const genText = await genRes.text();\r\n            const speText = await speRes.text();\r\n            fishFamilies = parseFishCSV(famText);\r\n            fishGenera = parseFishCSV(genText);\r\n            fishSpecies = parseFishCSV(speText);\r\n            fishSpecies.forEach(s => { fishSpeciesLookup[s.Name] = s; });\r\n            fishSpecies.forEach(s => {\r\n                let genus = s.Name.split(' ')[0];\r\n                let max = s['Max Length (cm)'] || 0;\r\n                if (!fishGenusMaxLength[genus] || max > fishGenusMaxLength[genus]) fishGenusMaxLength[genus] = max;\r\n            });\r\n            fishFamilies.forEach(f => {\r\n                let stem = f.Name.replace(\/idae$\/i,'').toLowerCase();\r\n                let max = 0;\r\n                fishGenera.forEach(g => {\r\n                    if (g.Name.toLowerCase().startsWith(stem)) max = Math.max(max, fishGenusMaxLength[g.Name] || 0);\r\n                });\r\n                fishFamilyMaxSize[f.Name] = max || 500;\r\n            });\r\n            fishDataLoaded = true;\r\n            populateFishDatalist('family');\r\n        } catch (e) { console.error('Gagal load fish CSV', e); }\r\n    }\r\n\r\n    function parseFishCSV(csv) {\r\n        const lines = csv.trim().split('\\n');\r\n        if (lines.length < 2) return [];\r\n        const headers = lines[0].split(',').map(h => h.trim());\r\n        const result = [];\r\n        for (let i = 1; i < lines.length; i++) {\r\n            const line = lines[i].trim();\r\n            if (!line) continue;\r\n            const values = line.split(',').map(v => v.trim());\r\n            if (values.length !== headers.length) continue;\r\n            const obj = {};\r\n            headers.forEach((h, idx) => {\r\n                let val = values[idx];\r\n                if (val !== '' && !isNaN(val)) obj[h] = parseFloat(val);\r\n                else obj[h] = val;\r\n            });\r\n            if (obj.Name && obj['Biomass Constant A'] && !isNaN(obj['Biomass Constant A'])) result.push(obj);\r\n        }\r\n        return result;\r\n    }\r\n\r\n    function populateFishDatalist(level) {\r\n        const datalist = document.getElementById('fishDatalist');\r\n        datalist.innerHTML = '';\r\n        let options = [];\r\n        if (level === 'family') options = fishFamilies.map(f => f.Name);\r\n        else if (level === 'genus') options = fishGenera.map(g => g.Name);\r\n        else options = fishSpecies.map(s => s.Name);\r\n        options.sort().forEach(opt => {\r\n            let o = document.createElement('option');\r\n            o.value = opt;\r\n            datalist.appendChild(o);\r\n        });\r\n    }\r\n\r\n    function getFishConstants(level, taxon) {\r\n        if (level === 'family') {\r\n            let f = fishFamilies.find(f => f.Name === taxon);\r\n            return f ? { A: f['Biomass Constant A'], B: f['Biomass Constant B'] } : { A:0, B:0 };\r\n        } else if (level === 'genus') {\r\n            let g = fishGenera.find(g => g.Name === taxon);\r\n            return g ? { A: g['Biomass Constant A'], B: g['Biomass Constant B'] } : { A:0, B:0 };\r\n        } else {\r\n            let s = fishSpeciesLookup[taxon];\r\n            return s ? { A: s['Biomass Constant A'], B: s['Biomass Constant B'] } : { A:0, B:0 };\r\n        }\r\n    }\r\n\r\n    function validateFishSize(level, taxon, size) {\r\n        let max = 500;\r\n        if (level === 'species') {\r\n            let s = fishSpeciesLookup[taxon];\r\n            if (s && s['Max Length (cm)']) max = s['Max Length (cm)'];\r\n        } else if (level === 'genus') {\r\n            max = fishGenusMaxLength[taxon] || 500;\r\n        } else {\r\n            max = fishFamilyMaxSize[taxon] || 500;\r\n        }\r\n        if (size > max) return `Ukuran melebihi batas normal (maks ${max} cm)`;\r\n        return null;\r\n    }\r\n\r\n    function updateFishBiomassDisplay() {\r\n        let level = document.querySelector('input[name=\"level\"]:checked').value;\r\n        let taxon = document.getElementById('fishTaxonInput').value;\r\n        if (!taxon) { document.getElementById('fishBiomassDisplay').value = '0'; return; }\r\n        let size = parseFloat(document.getElementById('fishSize').value) || 0;\r\n        let count = parseInt(document.getElementById('fishCount').value) || 1;\r\n        let { A, B } = getFishConstants(level, taxon);\r\n        let biomass = A * Math.pow(size, B) * count;\r\n        document.getElementById('fishBiomassDisplay').value = biomass.toFixed(2);\r\n        let warn = validateFishSize(level, taxon, size);\r\n        let warnDiv = document.getElementById('fishSizeWarning');\r\n        if (warn) { warnDiv.style.display = 'block'; warnDiv.textContent = warn; } else warnDiv.style.display = 'none';\r\n    }\r\n\r\n    document.getElementById('fishTaxonInput').addEventListener('input', updateFishBiomassDisplay);\r\n    document.getElementById('fishSize').addEventListener('input', updateFishBiomassDisplay);\r\n    document.getElementById('fishCount').addEventListener('input', updateFishBiomassDisplay);\r\n\r\n    document.getElementById('fishAddEntryBtn').addEventListener('click', () => {\r\n        let level = document.querySelector('input[name=\"level\"]:checked').value;\r\n        let taxon = document.getElementById('fishTaxonInput').value.trim();\r\n        if (!taxon) { alert('Masukkan nama'); return; }\r\n        let valid = false;\r\n        if (level === 'family') valid = fishFamilies.some(f => f.Name === taxon);\r\n        else if (level === 'genus') valid = fishGenera.some(g => g.Name === taxon);\r\n        else valid = fishSpeciesLookup.hasOwnProperty(taxon);\r\n        if (!valid) { alert('Nama tidak ditemukan dalam database'); return; }\r\n        let count = parseInt(document.getElementById('fishCount').value) || 1;\r\n        let size = parseFloat(document.getElementById('fishSize').value) || 0;\r\n        let warn = validateFishSize(level, taxon, size);\r\n        if (warn) { alert(warn); return; }\r\n        let { A, B } = getFishConstants(level, taxon);\r\n        let biomass = A * Math.pow(size, B) * count;\r\n        fishEntries.push({ level, taxon, count, size, biomass });\r\n        renderFishTable();\r\n        \/\/ Reset form\r\n        document.getElementById('fishCount').value = 1;\r\n        document.getElementById('fishSize').value = 10;\r\n        document.getElementById('fishTaxonInput').value = '';\r\n        updateFishBiomassDisplay();\r\n    });\r\n\r\n    function renderFishTable() {\r\n        let tbody = document.getElementById('fishTableBody');\r\n        tbody.innerHTML = '';\r\n        fishEntries.forEach((e, i) => {\r\n            let row = tbody.insertRow();\r\n            row.innerHTML = `<td>${e.taxon}<\/td><td>${e.level}<\/td><td>${e.count}<\/td><td>${e.size}<\/td><td>${e.biomass.toFixed(2)}<\/td><td><button class=\"remove-btn\" onclick=\"removeFishEntry(${i})\">Hapus<\/button><\/td>`;\r\n        });\r\n        let total = fishEntries.reduce((s,e) => s + e.biomass, 0);\r\n        document.getElementById('totalFishBiomass').innerText = 'Total Biomassa: ' + total.toFixed(2) + ' gram';\r\n        currentProjectData.fish.entries = fishEntries;\r\n        currentProjectData.fish.time = document.getElementById('fishTime').value;\r\n    }\r\n    window.removeFishEntry = (i) => { fishEntries.splice(i,1); renderFishTable(); };\r\n\r\n    \/\/ ==================== MEGABENTOS MODULE ====================\r\n    let megaEntries = [];\r\n    const MEGABENTHOS_RAW = `group,species,max_size_cm,a,b,trophic_role\r\nDrupella,Drupella cornus,4.90,0.01156,2.75300,corallivore\r\nDrupella,Drupella rugosa,4.71,0.00915,2.89000,corallivore\r\nDrupella,Drupella margariticola,4.50,0.01343,2.77800,corallivore\r\nDrupella,Drupella fragum,5.34,0.01453,2.75500,corallivore\r\nDrupella,Drupella ricinus,9.88,0.01409,2.88700,corallivore\r\nDrupella,Drupella clathrata,7.29,0.01190,2.82600,corallivore\r\nDrupella,Drupella lobata,7.40,0.00969,2.74300,corallivore\r\nDrupella,Drupella spectrum,5.55,0.01087,2.76300,corallivore\r\nSeaStar,Linckia laevigata,40.00,0.00351,3.10200,detritivore\r\nSeaStar,Linckia multifora,8.38,0.00224,3.19900,detritivore\r\nSeaStar,Protoreaster nodosus,40.00,0.00296,3.14200,detritivore\r\nSeaStar,Protoreaster lincki,45.19,0.00364,3.00700,detritivore\r\nSeaStar,Culcita novaeguineae,40.00,0.00264,3.06000,detritivore\r\nSeaStar,Fromia monilis,11.16,0.00341,3.07400,detritivore\r\nSeaStar,Fromia indica,24.82,0.00252,3.08600,detritivore\r\nSeaStar,Nardoa tuberculata,42.34,0.00395,3.06200,detritivore\r\nSeaStar,Pentaceraster regulus,24.59,0.00351,3.19500,detritivore\r\nSeaStar,Leiaster leachi,24.44,0.00233,3.02300,detritivore\r\nSeaStar,Asteropsis carinifera,60.22,0.00272,3.05400,detritivore\r\nSeaStar,Echinaster luzonicus,69.51,0.00338,3.02400,detritivore\r\nSeaStar,Iconaster longimanus,17.93,0.00258,3.04900,detritivore\r\nSeaStar,Neoferdina cumingi,76.31,0.00277,3.14600,detritivore\r\nSeaStar,Gomophia egyptiaca,37.91,0.00292,3.02600,detritivore\r\nAcanthaster,Acanthaster planci,50.00,0.00353,3.03000,corallivore\r\nAcanthaster,Acanthaster brevispinus,15.15,0.00331,3.17000,corallivore\r\nAcanthaster,Acanthaster mauritiensis,78.66,0.00324,3.10600,corallivore\r\nAcanthaster,Acanthaster solaris,22.15,0.00261,3.06900,corallivore\r\nSeaUrchin,Diadema setosum,8.40,0.00345,3.01700,grazer\r\nSeaUrchin,Diadema savignyi,8.40,0.00344,3.04400,grazer\r\nSeaUrchin,Diadema palmeri,9.00,0.00336,3.15600,grazer\r\nSeaUrchin,Echinothrix diadema,9.00,0.00210,3.01800,grazer\r\nSeaUrchin,Echinothrix calamaris,9.00,0.00356,3.12100,grazer\r\nSeaUrchin,Echinometra mathaei,9.00,0.00395,3.07300,grazer\r\nSeaUrchin,Echinometra oblonga,9.00,0.00299,3.18800,grazer\r\nSeaUrchin,Echinometra viridis,5.00,0.00321,3.16500,grazer\r\nSeaUrchin,Tripneustes gratilla,15.00,0.00322,3.01600,grazer\r\nSeaUrchin,Tripneustes ventricosus,15.00,0.00323,3.19500,grazer\r\nSeaUrchin,Tripneustes depressus,15.00,0.00389,3.07800,grazer\r\nSeaUrchin,Toxopneustes pileolus,15.00,0.00294,3.12800,grazer\r\nSeaUrchin,Lytechinus variegatus,8.00,0.00295,3.07100,grazer\r\nSeaUrchin,Strongylocentrotus purpuratus,10.00,0.00395,3.07000,grazer\r\nSeaUrchin,Strongylocentrotus droebachiensis,8.00,0.00280,3.18000,grazer\r\nSeaUrchin,Centrostephanus rodgersii,15.00,0.00384,3.14600,grazer\r\nSeaUrchin,Astropyga radiata,20.00,0.00278,3.11000,grazer\r\nSeaUrchin,Parasalenia gratiosa,5.00,0.00279,3.06900,grazer\r\nSeaCucumber,Holothuria atra,60.00,0.00187,3.16200,deposit_feeder\r\nSeaCucumber,Holothuria scabra,70.00,0.00168,3.15100,deposit_feeder\r\nSeaCucumber,Holothuria edulis,23.61,0.00222,3.12900,deposit_feeder\r\nSeaCucumber,Holothuria leucospilota,64.71,0.00204,3.11300,deposit_feeder\r\nSeaCucumber,Holothuria fuscogilva,49.68,0.00181,3.17400,deposit_feeder\r\nSeaCucumber,Holothuria nobilis,83.10,0.00228,3.19800,deposit_feeder\r\nSeaCucumber,Bohadschia argus,82.21,0.00188,3.18400,deposit_feeder\r\nSeaCucumber,Bohadschia vitiensis,85.66,0.00206,3.15800,deposit_feeder\r\nSeaCucumber,Bohadschia marmorata,80.91,0.00225,3.17800,deposit_feeder\r\nSeaCucumber,Stichopus chloronotus,94.38,0.00170,3.12400,deposit_feeder\r\nSeaCucumber,Stichopus horrens,62.90,0.00183,3.19500,deposit_feeder\r\nSeaCucumber,Stichopus vastus,80.54,0.00226,3.10600,deposit_feeder\r\nSeaCucumber,Actinopyga echinites,95.73,0.00204,3.14700,deposit_feeder\r\nSeaCucumber,Actinopyga mauritiana,78.08,0.00164,3.10500,deposit_feeder\r\nSeaCucumber,Actinopyga lecanora,64.56,0.00208,3.16500,deposit_feeder\r\nSeaCucumber,Thelenota ananas,62.71,0.00184,3.14800,deposit_feeder\r\nSeaCucumber,Thelenota anax,56.47,0.00189,3.18400,deposit_feeder\r\nSeaCucumber,Pearsonothuria graeffei,28.75,0.00174,3.14600,deposit_feeder\r\nGiantClam,Tridacna gigas,94.13,0.01187,2.85600,filter_feeder\r\nGiantClam,Tridacna derasa,97.56,0.01237,2.87800,filter_feeder\r\nGiantClam,Tridacna squamosa,123.56,0.01217,2.88100,filter_feeder\r\nGiantClam,Tridacna maxima,49.74,0.01061,2.80100,filter_feeder\r\nGiantClam,Tridacna crocea,24.96,0.01363,2.92300,filter_feeder\r\nGiantClam,Tridacna mbalavuana,26.79,0.01113,2.92600,filter_feeder\r\nGiantClam,Hippopus hippopus,115.58,0.01115,2.91600,filter_feeder\r\nGiantClam,Hippopus porcellanus,98.98,0.01031,2.85500,filter_feeder\r\nLobster,Panulirus ornatus,15.36,0.00739,3.06400,predator\r\nLobster,Panulirus versicolor,16.30,0.00755,3.00100,predator\r\nLobster,Panulirus longipes,17.35,0.00843,3.01500,predator\r\nLobster,Panulirus homarus,25.02,0.00706,3.05700,predator\r\nLobster,Panulirus penicillatus,27.08,0.00875,3.06200,predator\r\nLobster,Panulirus polyphagus,26.93,0.00771,3.00200,predator\r\nLobster,Panulirus femoristriga,24.51,0.00709,3.05900,predator\r\nLobster,Panulirus stimpsoni,27.05,0.00884,3.09600,predator\r\nLobster,Panulirus marginatus,25.05,0.00772,3.00100,predator\r\nLobster,Panulirus japonicus,20.15,0.00762,3.07600,predator\r\nTrochus,Rochia nilotica,14.62,0.01027,2.85100,grazer\r\nTrochus,Trochus maculatus,7.71,0.01408,2.72500,grazer\r\nTrochus,Phorcus richardi,3.49,0.01164,2.90000,grazer\r\nTrochus,Tectus pyramis,14.06,0.01438,2.77600,grazer\r\nTrochus,Tectus dentatus,6.88,0.01303,2.81900,grazer\r\nTrochus,Tectus fenestratus,7.48,0.00974,2.82200,grazer\r\nTrochus,Rochia conus,8.57,0.01005,2.76600,grazer`;\r\n\r\n    let megaSpeciesLookup = {}, megaSpeciesList = [], megaGenera = [], megaGroups = [];\r\n\r\n    function parseMegabenthos() {\r\n        const lines = MEGABENTHOS_RAW.trim().split('\\n');\r\n        const headers = lines[0].split(',').map(h => h.trim());\r\n        const data = [];\r\n        for (let i=1; i<lines.length; i++) {\r\n            if (!lines[i].trim()) continue;\r\n            const vals = lines[i].split(',').map(v => v.trim());\r\n            if (vals.length !== headers.length) continue;\r\n            let obj = {};\r\n            headers.forEach((h, idx) => {\r\n                let val = vals[idx];\r\n                if (!isNaN(val) && val !== '') obj[h] = parseFloat(val);\r\n                else obj[h] = val;\r\n            });\r\n            data.push(obj);\r\n        }\r\n        data.forEach(item => {\r\n            if (!megaSpeciesLookup[item.species]) {\r\n                megaSpeciesLookup[item.species] = {\r\n                    Name: item.species,\r\n                    A: item.a,\r\n                    B: item.b,\r\n                    MaxLength: item.max_size_cm,\r\n                    TrophicGroup: item.trophic_role,\r\n                    FunctionalGroup: item.group\r\n                };\r\n                megaSpeciesList.push(megaSpeciesLookup[item.species]);\r\n            }\r\n        });\r\n        let genusMap = new Map();\r\n        megaSpeciesList.forEach(s => {\r\n            let genus = s.Name.split(' ')[0];\r\n            if (!genusMap.has(genus)) genusMap.set(genus, { totalA:0, totalB:0, maxLen:0, count:0 });\r\n            let g = genusMap.get(genus);\r\n            g.totalA += s.A;\r\n            g.totalB += s.B;\r\n            g.maxLen = Math.max(g.maxLen, s.MaxLength);\r\n            g.count++;\r\n        });\r\n        megaGenera = Array.from(genusMap, ([name, val]) => ({\r\n            Name: name,\r\n            A: val.totalA \/ val.count,\r\n            B: val.totalB \/ val.count,\r\n            MaxLength: val.maxLen\r\n        }));\r\n        let groupMap = new Map();\r\n        megaSpeciesList.forEach(s => {\r\n            let grp = s.FunctionalGroup;\r\n            if (!groupMap.has(grp)) groupMap.set(grp, { totalA:0, totalB:0, maxLen:0, count:0 });\r\n            let g = groupMap.get(grp);\r\n            g.totalA += s.A;\r\n            g.totalB += s.B;\r\n            g.maxLen = Math.max(g.maxLen, s.MaxLength);\r\n            g.count++;\r\n        });\r\n        megaGroups = Array.from(groupMap, ([name, val]) => ({\r\n            Name: name,\r\n            A: val.totalA \/ val.count,\r\n            B: val.totalB \/ val.count,\r\n            MaxLength: val.maxLen\r\n        }));\r\n    }\r\n    parseMegabenthos();\r\n\r\n    function populateMegaDatalist(level) {\r\n        let datalist = document.getElementById('megaDatalist');\r\n        datalist.innerHTML = '';\r\n        let options = [];\r\n        if (level === 'group') options = megaGroups.map(g => g.Name);\r\n        else if (level === 'genus') options = megaGenera.map(g => g.Name);\r\n        else options = megaSpeciesList.map(s => s.Name);\r\n        options.sort().forEach(opt => {\r\n            let o = document.createElement('option');\r\n            o.value = opt;\r\n            datalist.appendChild(o);\r\n        });\r\n    }\r\n\r\n    function getMegaConstants(level, taxon) {\r\n        if (level === 'group') {\r\n            let g = megaGroups.find(g => g.Name === taxon);\r\n            return g ? { A: g.A, B: g.B } : { A:0, B:0 };\r\n        } else if (level === 'genus') {\r\n            let g = megaGenera.find(g => g.Name === taxon);\r\n            return g ? { A: g.A, B: g.B } : { A:0, B:0 };\r\n        } else {\r\n            let s = megaSpeciesLookup[taxon];\r\n            return s ? { A: s.A, B: s.B } : { A:0, B:0 };\r\n        }\r\n    }\r\n\r\n    function validateMegaSize(level, taxon, size) {\r\n        let max = 500;\r\n        if (level === 'species') {\r\n            let s = megaSpeciesLookup[taxon];\r\n            if (s && s.MaxLength) max = s.MaxLength;\r\n        } else if (level === 'genus') {\r\n            let g = megaGenera.find(g => g.Name === taxon);\r\n            if (g && g.MaxLength) max = g.MaxLength;\r\n        } else {\r\n            let g = megaGroups.find(g => g.Name === taxon);\r\n            if (g && g.MaxLength) max = g.MaxLength;\r\n        }\r\n        if (size > max) return `Ukuran melebihi batas normal (maks ${max} cm)`;\r\n        return null;\r\n    }\r\n\r\n    function updateMegaBiomassDisplay() {\r\n        let level = document.querySelector('input[name=\"level\"]:checked').value;\r\n        let taxon = document.getElementById('megaTaxonInput').value;\r\n        if (!taxon) { document.getElementById('megaBiomassDisplay').value = '0'; return; }\r\n        let size = parseFloat(document.getElementById('megaSize').value) || 0;\r\n        let count = parseInt(document.getElementById('megaCount').value) || 1;\r\n        let { A, B } = getMegaConstants(level, taxon);\r\n        let biomass = A * Math.pow(size, B) * count;\r\n        document.getElementById('megaBiomassDisplay').value = biomass.toFixed(2);\r\n        let warn = validateMegaSize(level, taxon, size);\r\n        let warnDiv = document.getElementById('megaSizeWarning');\r\n        if (warn) { warnDiv.style.display = 'block'; warnDiv.textContent = warn; } else warnDiv.style.display = 'none';\r\n    }\r\n\r\n    document.getElementById('megaTaxonInput').addEventListener('input', updateMegaBiomassDisplay);\r\n    document.getElementById('megaSize').addEventListener('input', updateMegaBiomassDisplay);\r\n    document.getElementById('megaCount').addEventListener('input', updateMegaBiomassDisplay);\r\n\r\n    document.getElementById('megaAddEntryBtn').addEventListener('click', () => {\r\n        let level = document.querySelector('input[name=\"level\"]:checked').value;\r\n        let taxon = document.getElementById('megaTaxonInput').value.trim();\r\n        if (!taxon) { alert('Masukkan nama'); return; }\r\n        let valid = false;\r\n        if (level === 'group') valid = megaGroups.some(g => g.Name === taxon);\r\n        else if (level === 'genus') valid = megaGenera.some(g => g.Name === taxon);\r\n        else valid = megaSpeciesLookup.hasOwnProperty(taxon);\r\n        if (!valid) { alert('Nama tidak ditemukan dalam database'); return; }\r\n        let count = parseInt(document.getElementById('megaCount').value) || 1;\r\n        let size = parseFloat(document.getElementById('megaSize').value) || 0;\r\n        let warn = validateMegaSize(level, taxon, size);\r\n        if (warn) { alert(warn); return; }\r\n        let substrate = document.getElementById('megaSubstrate').value;\r\n        if (!substrate) { alert('Pilih substrat'); return; }\r\n        let { A, B } = getMegaConstants(level, taxon);\r\n        let biomass = A * Math.pow(size, B) * count;\r\n        megaEntries.push({ level, taxon, count, size, substrate, biomass });\r\n        renderMegaTable();\r\n        \/\/ Reset\r\n        document.getElementById('megaCount').value = 1;\r\n        document.getElementById('megaSize').value = '10.00';\r\n        document.getElementById('megaTaxonInput').value = '';\r\n        document.getElementById('megaSubstrate').value = '';\r\n        updateMegaBiomassDisplay();\r\n    });\r\n\r\n    function renderMegaTable() {\r\n        let tbody = document.getElementById('megaTableBody');\r\n        tbody.innerHTML = '';\r\n        megaEntries.forEach((e, i) => {\r\n            let row = tbody.insertRow();\r\n            row.innerHTML = `<td>${e.taxon}<\/td><td>${e.level}<\/td><td>${e.count}<\/td><td>${e.size.toFixed(2)}<\/td><td>${e.substrate}<\/td><td>${e.biomass.toFixed(2)}<\/td><td><button class=\"remove-btn\" onclick=\"removeMegaEntry(${i})\">Hapus<\/button><\/td>`;\r\n        });\r\n        let total = megaEntries.reduce((s,e) => s + e.biomass, 0);\r\n        document.getElementById('totalMegaBiomass').innerText = 'Total Biomassa: ' + total.toFixed(2) + ' gram';\r\n        currentProjectData.megabentos.entries = megaEntries;\r\n        currentProjectData.megabentos.time = document.getElementById('megaTime').value;\r\n    }\r\n    window.removeMegaEntry = (i) => { megaEntries.splice(i,1); renderMegaTable(); };\r\n\r\n    \/\/ ==================== BENTHIC LOAD (placeholder, harus diisi dengan kode lengkap) ====================\r\n    function benthicLoadFromProject() {\r\n        \/\/ Isi dengan kode benthic yang sesuai\r\n        console.log('Benthic data loaded');\r\n    }\r\n\r\n    \/\/ ==================== INISIALISASI ====================\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        loadFishCSV();\r\n        document.getElementById('surveyDate').valueAsDate = new Date();\r\n        \/\/ Set level selector untuk ikan dan megabentos\r\n        document.querySelectorAll('input[name=\"level\"]').forEach(r => {\r\n            r.addEventListener('change', function() {\r\n                populateFishDatalist(this.value);\r\n                populateMegaDatalist(this.value);\r\n            });\r\n        });\r\n        populateFishDatalist('family');\r\n        populateMegaDatalist('group');\r\n    });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Peta Kondisi Ekosistem Terumbu Karang Masuk Masuk Belum punya akun? Daftar Peta Kondisi Ekosistem Terumbu Karang Keluar Site Baru Simpan [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1931","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.3 (Yoast SEO v24.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Peta Kondisi Ekosistem Terumbu Karang - marineconservation.id<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marineconservation.id\/id\/peta-kondisi-ekosistem-terumbu-karang\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Peta Kondisi Ekosistem Terumbu Karang\" \/>\n<meta property=\"og:description\" content=\"Peta Kondisi Ekosistem Terumbu Karang Masuk Masuk Belum punya akun? Daftar Peta Kondisi Ekosistem Terumbu Karang Keluar Site Baru Simpan [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marineconservation.id\/id\/peta-kondisi-ekosistem-terumbu-karang\/\" \/>\n<meta property=\"og:site_name\" content=\"marineconservation.id\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61572311944591\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-15T10:15:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/\",\"url\":\"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/\",\"name\":\"Peta Kondisi Ekosistem Terumbu Karang - marineconservation.id\",\"isPartOf\":{\"@id\":\"https:\/\/marineconservation.id\/#website\"},\"datePublished\":\"2026-03-15T07:28:47+00:00\",\"dateModified\":\"2026-03-15T10:15:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/marineconservation.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Peta Kondisi Ekosistem Terumbu Karang\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marineconservation.id\/#website\",\"url\":\"https:\/\/marineconservation.id\/\",\"name\":\"marineconservation.id\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/marineconservation.id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/marineconservation.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/marineconservation.id\/#organization\",\"name\":\"marineconservation.id\",\"url\":\"https:\/\/marineconservation.id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png\",\"contentUrl\":\"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png\",\"width\":500,\"height\":500,\"caption\":\"marineconservation.id\"},\"image\":{\"@id\":\"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=61572311944591\",\"https:\/\/www.instagram.com\/marineconservation.id\/\",\"https:\/\/www.youtube.com\/watch?v=nOmjtk-dTg8&list=LL\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Peta Kondisi Ekosistem Terumbu Karang - marineconservation.id","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marineconservation.id\/id\/peta-kondisi-ekosistem-terumbu-karang\/","og_locale":"id_ID","og_type":"article","og_title":"Peta Kondisi Ekosistem Terumbu Karang","og_description":"Peta Kondisi Ekosistem Terumbu Karang Masuk Masuk Belum punya akun? Daftar Peta Kondisi Ekosistem Terumbu Karang Keluar Site Baru Simpan [&hellip;]","og_url":"https:\/\/marineconservation.id\/id\/peta-kondisi-ekosistem-terumbu-karang\/","og_site_name":"marineconservation.id","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61572311944591","article_modified_time":"2026-03-15T10:15:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/","url":"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/","name":"Peta Kondisi Ekosistem Terumbu Karang - marineconservation.id","isPartOf":{"@id":"https:\/\/marineconservation.id\/#website"},"datePublished":"2026-03-15T07:28:47+00:00","dateModified":"2026-03-15T10:15:47+00:00","breadcrumb":{"@id":"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/marineconservation.id\/peta-kondisi-ekosistem-terumbu-karang\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/marineconservation.id\/"},{"@type":"ListItem","position":2,"name":"Peta Kondisi Ekosistem Terumbu Karang"}]},{"@type":"WebSite","@id":"https:\/\/marineconservation.id\/#website","url":"https:\/\/marineconservation.id\/","name":"marineconservation.id","description":"","publisher":{"@id":"https:\/\/marineconservation.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marineconservation.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/marineconservation.id\/#organization","name":"marineconservation.id","url":"https:\/\/marineconservation.id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/","url":"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png","contentUrl":"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png","width":500,"height":500,"caption":"marineconservation.id"},"image":{"@id":"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61572311944591","https:\/\/www.instagram.com\/marineconservation.id\/","https:\/\/www.youtube.com\/watch?v=nOmjtk-dTg8&list=LL"]}]}},"_links":{"self":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages\/1931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/comments?post=1931"}],"version-history":[{"count":31,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages\/1931\/revisions"}],"predecessor-version":[{"id":1964,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages\/1931\/revisions\/1964"}],"wp:attachment":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/media?parent=1931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}