{"id":106,"date":"2025-11-20T17:34:43","date_gmt":"2025-11-20T17:34:43","guid":{"rendered":"https:\/\/lab.rwb.my.id\/bio\/?page_id=106"},"modified":"2026-04-18T14:16:10","modified_gmt":"2026-04-18T14:16:10","slug":"studi-kasus","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/bio\/studi-kasus\/","title":{"rendered":"Studi Kasus"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Studi Kasus - Peta Dampak Biometrik Urbane<\/title>\n\n <!-- SEO & Meta Tags -->\n <meta name=\"description\" content=\"Jelajahi peta dampak interaktif kami dan lihat bagaimana teknologi Biometrik Urbane telah mengubah berbagai kota di Indonesia.\">\n <meta property=\"og:title\" content=\"Studi Kasus - Peta Dampak Biometrik Urbane\">\n <meta property=\"og:description\" content=\"Peta interaktif yang menunjukkan lokasi dan dampak nyata dari proyek-proyek lingkungan urban kami.\">\n <meta property=\"og:url\" content=\"https:\/\/biometrik-urbane.com\/studi-kasus\/\">\n <meta property=\"og:type\" content=\"website\">\n \n <!-- Poppins Font -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <!-- Font Awesome Icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- GLOBAL STYLES & VARIABLES (SAMA SEPERTI HOMEPAGE) --- *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --primary-color: #00ff88;\n --secondary-color: #00ccff;\n --accent-color: #ff9d5c;\n --dark-bg: #0a0e27;\n --glass-bg: rgba(255, 255, 255, 0.05);\n --glass-border: rgba(255, 255, 255, 0.1);\n --text-light: #ffffff;\n --text-gray: #a8b2d1;\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: var(--dark-bg);\n color: var(--text-light);\n overflow-x: hidden;\n position: relative;\n }\n\n \/* --- ANIMATED BACKGROUND (SAMA SEPERTI HOMEPAGE) --- *\/\n .animated-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1629 100%);\n }\n\n .particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 500; \n }\n\n .leaf {\n position: absolute;\n width: 30px;\n height: 30px;\n opacity: 0.7;\n animation: falling 15s infinite linear;\n transform-origin: center center;\n pointer-events: none;\n }\n\n @keyframes falling {\n 0% { transform: translateY(-100vh) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }\n }\n\n .biometric-pattern {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0.03;\n background-image: \n repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 136, 0.1) 2px, rgba(0, 255, 136, 0.1) 4px),\n repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 204, 255, 0.1) 2px, rgba(0, 204, 255, 0.1) 4px);\n animation: pattern-move 10s linear infinite;\n z-index: 0;\n }\n\n @keyframes pattern-move {\n 0% { transform: translate(0, 0); }\n 100% { transform: translate(10px, 10px); }\n }\n \n \/* --- HEADER (SAMA SEPERTI HOMEPAGE) --- *\/\n header {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n padding: 1rem 2rem;\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--glass-border);\n z-index: 1000;\n transition: all 0.3s ease;\n }\n\n header.scrolled {\n padding: 0.7rem 2rem;\n background: rgba(10, 14, 39, 0.95);\n }\n\n .header-container {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo-section {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .logo-section a {\n display: flex;\n align-items: center;\n gap: 1rem;\n text-decoration: none;\n color: inherit;\n }\n\n .logo {\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.5rem;\n animation: pulse 2s infinite;\n overflow: hidden;\n }\n\n .logo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n .site-title {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n nav {\n display: flex;\n gap: 2rem;\n }\n\n nav a {\n color: var(--text-gray);\n text-decoration: none;\n transition: all 0.3s ease;\n position: relative;\n padding: 0.5rem 0;\n }\n\n nav a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary-color);\n transition: width 0.3s ease;\n }\n\n nav a:hover { color: var(--text-light); }\n nav a:hover::after { width: 100%; }\n\n .hamburger {\n display: none;\n flex-direction: column;\n cursor: pointer;\n gap: 4px;\n }\n\n .hamburger span {\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n transition: all 0.3s ease;\n }\n\n .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\n .hamburger.active span:nth-child(2) { opacity: 0; }\n .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }\n \n .mobile-menu-credit {\n display: none;\n }\n\n \/* --- PREMIUM ANIMATION --- *\/\n .fade-in {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* --- MAP HERO SECTION --- *\/\n .map-hero {\n min-height: 40vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 7rem 2rem 2rem;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n .map-hero h1 {\n font-size: clamp(1.6rem, 4.5vw, 3rem);\n margin-bottom: 1.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .map-hero p {\n font-size: 1.2rem;\n color: var(--text-gray);\n max-width: 700px;\n margin: 0 auto;\n }\n\n \/* --- INTERACTIVE MAP SECTION --- *\/\n .map-section {\n padding: 2rem 2rem 5rem;\n background: rgba(255, 255, 255, 0.02);\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .map-container {\n width: 100%;\n max-width: 1200px;\n display: flex;\n gap: 2rem;\n align-items: flex-start;\n }\n .map-filters {\n display: flex;\n justify-content: center;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n .map-filter {\n padding: 0.8rem 1.5rem;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: 50px;\n color: var(--text-gray);\n cursor: pointer;\n transition: all 0.3s ease;\n font-family: 'Poppins', sans-serif;\n font-weight: 500;\n }\n .map-filter.active {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n border-color: transparent;\n }\n .map-wrapper {\n flex-grow: 1;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #impact-map {\n width: 100%;\n height: auto;\n max-height: 70vh;\n }\n .map-marker {\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .map-marker .marker-pulse {\n animation: marker-pulse 2s infinite;\n }\n @keyframes marker-pulse {\n 0% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.5); opacity: 0.5; }\n 100% { transform: scale(1); opacity: 1; }\n }\n .map-marker:hover .marker-pulse {\n animation-play-state: paused;\n transform: scale(1.2);\n }\n .map-marker.filtered-out {\n opacity: 0.2;\n pointer-events: none;\n }\n .map-info-panel {\n width: 350px;\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2rem;\n opacity: 0;\n transform: translateX(20px);\n transition: all 0.4s ease;\n pointer-events: none;\n }\n .map-info-panel.active {\n opacity: 1;\n transform: translateX(0);\n pointer-events: all;\n }\n .map-info-panel h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .map-info-meta {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n margin-bottom: 1.5rem;\n }\n .map-info-meta span {\n color: var(--text-gray);\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n .map-info-meta i {\n color: var(--primary-color);\n width: 20px;\n }\n .map-info-impact {\n font-size: 1.1rem;\n color: var(--accent-color);\n font-weight: 600;\n margin-bottom: 1.5rem;\n }\n .btn {\n padding: 0.8rem 2rem;\n border: none;\n border-radius: 50px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n width: 100%;\n text-align: center;\n }\n .btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);\n }\n .panel-placeholder {\n width: 350px;\n background: var(--glass-bg);\n border: 1px dashed var(--glass-border);\n border-radius: 20px;\n padding: 2rem;\n text-align: center;\n color: var(--text-gray);\n }\n .panel-placeholder i {\n font-size: 3rem;\n color: var(--glass-border);\n margin-bottom: 1rem;\n }\n\n \/* --- MODAL STYLES (SAMA SEPERTI HOMEPAGE) --- *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n\n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .modal-content {\n background: var(--dark-bg);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2.5rem;\n max-width: 600px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n position: relative;\n transform: scale(0.8);\n transition: transform 0.3s ease;\n }\n\n .modal-overlay.active .modal-content {\n transform: scale(1);\n }\n\n .modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n color: var(--text-light);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 1.2rem;\n transition: all 0.3s ease;\n }\n\n .modal-close:hover {\n background: var(--primary-color);\n color: var(--dark-bg);\n transform: rotate(90deg);\n }\n\n .modal-content h3 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .modal-subtitle {\n color: var(--accent-color);\n font-weight: 600;\n margin-bottom: 1.5rem;\n display: inline-block;\n }\n\n .modal-content p {\n color: var(--text-gray);\n line-height: 1.7;\n margin-bottom: 1.5rem;\n }\n \n .modal-content ul {\n list-style: none;\n padding-left: 0;\n }\n .modal-content li {\n margin-bottom: 1rem;\n color: var(--text-gray);\n }\n .modal-content li strong {\n color: var(--text-light);\n }\n\n \/* --- CTA & FOOTER (SAMA SEPERTI HOMEPAGE) --- *\/\n .cta-section { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 204, 255, 0.1)); text-align: center; position: relative; z-index: 2; }\n .cta-content { max-width: 800px; margin: 0 auto; }\n .cta-content h2 { font-size: 2rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n .cta-content p { font-size: 1.2rem; color: var(--text-gray); margin-bottom: 2rem; }\n\n footer { padding: 3rem 2rem 1.5rem; background: rgba(10, 14, 39, 0.95); border-top: 1px solid var(--glass-border); position: relative; z-index: 2; }\n .footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }\n .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\n .social-links a { width: 40px; height: 40px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-gray); transition: all 0.3s ease; }\n .social-links a:hover { background: var(--primary-color); color: var(--dark-bg); transform: translateY(-3px); }\n .footer-text { color: var(--text-gray); margin-bottom: 1rem; }\n .credit { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; animation: neon-blink 2s infinite; display: inline-block; }\n @keyframes neon-blink { 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4); opacity: 1; } 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.3), 0 0 6px rgba(255, 255, 255, 0.2); opacity: 0.8; } }\n\n \/* --- MOBILE RESPONSIVE (SAMA SEPERTI HOMEPAGE + PENAMBAHAN) --- *\/\n @media (max-width: 1024px) {\n .map-container {\n flex-direction: column;\n }\n .map-wrapper {\n width: 100%;\n order: 2;\n }\n .map-info-panel, .panel-placeholder {\n width: 100%;\n order: 1;\n margin-bottom: 2rem;\n }\n }\n\n @media (max-width: 768px) {\n .mobile-menu-credit {\n display: block;\n font-size: 0.75rem;\n color: rgba(255, 255, 255, 0.6);\n text-decoration: none;\n animation: neon-blink 2s infinite;\n text-align: center;\n margin-top: 1rem;\n }\n nav { \n position: fixed; \n top: 70px; \n left: -100%; \n width: 100%; \n height: auto;\n max-height: calc(100vh - 70px);\n overflow-y: auto;\n background: linear-gradient(135deg, #0a0e27, #0d2818);\n backdrop-filter: blur(10px); \n flex-direction: column; \n padding: 1rem 0; \n gap: 0.5rem;\n transition: left 0.3s ease; \n justify-content: flex-start;\n }\n nav.active { left: 0; }\n nav a { padding: 0.8rem 2rem; width: 100%; }\n .hamburger { display: flex; }\n .site-title { font-size: 1.2rem; }\n\n .map-hero { min-height: 40vh; padding-top: 6rem; padding-bottom: 2rem; }\n .map-hero h1 { font-size: 1.6rem; }\n .map-hero p { font-size: 1rem; }\n \n .map-section { padding: 1rem 1rem 3rem; }\n .map-filter { font-size: 0.85rem; padding: 0.6rem 1.1rem; }\n .map-wrapper { padding: 1rem; }\n .map-info-panel { padding: 1.5rem; }\n .map-info-panel h3 { font-size: 1.3rem; }\n\n .cta-content h2 { font-size: 1.5rem; }\n .cta-content p { font-size: 1rem; }\n \n footer { padding: 2rem 1rem 1rem; }\n .footer-text { font-size: 0.85rem; }\n .credit { font-size: 0.75rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Animated Background (Sama seperti Homepage) -->\n <div class=\"animated-bg\">\n <div class=\"particles\" id=\"particles\"><\/div>\n <div class=\"biometric-pattern\"><\/div>\n <\/div>\n\n <!-- Header (Sama seperti Homepage) -->\n <header id=\"header\">\n <div class=\"header-container\">\n <div class=\"logo-section\">\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/\">\n <div class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/bio\/wp-content\/uploads\/sites\/3\/2025\/11\/Logo-Rudi-Web-Builder.png\" alt=\"Biometrik Urbane Logo\">\n <\/div>\n <div class=\"site-title\">Biometrik Urbane<\/div>\n <\/a>\n <\/div>\n <nav id=\"nav\">\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/\">Beranda<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/profile\/\">Profile<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/teknologi\/\">Teknologi<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/studi-kasus\/\">Studi Kasus<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/kontak\/\">Kontak<\/a>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"mobile-menu-credit\">\ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder<\/a>\n <\/nav>\n <div class=\"hamburger\" id=\"hamburger\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/header>\n\n <main>\n <!-- Map Hero Section -->\n <section class=\"map-hero\">\n <div class=\"container fade-in\">\n <h1>Peta Dampak Kami<\/h1>\n <p>Jelajahi peta interaktif untuk melihat bagaimana solusi kami menciptakan perubahan nyata di berbagai lokasi.<\/p>\n <\/div>\n <\/section>\n\n <!-- Interactive Map Section -->\n <section class=\"map-section fade-in\">\n <div class=\"map-filters\">\n <button class=\"map-filter active\" data-filter=\"all\" type=\"button\">Semua<\/button>\n <button class=\"map-filter\" data-filter=\"urban\" type=\"button\">Urban Greening<\/button>\n <button class=\"map-filter\" data-filter=\"biodiversity\" type=\"button\">Biodiversitas<\/button>\n <button class=\"map-filter\" data-filter=\"water\" type=\"button\">Kualitas Air<\/button>\n <\/div>\n <div class=\"map-container\">\n <div class=\"map-wrapper\">\n <svg id=\"impact-map\" viewBox=\"0 0 1000 700\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <!-- Stylized Map of Indonesia -->\n <path d=\"M 550 250 Q 600 200 650 220 T 700 250 L 750 300 L 720 400 L 650 450 L 600 430 L 550 400 Z\" fill=\"var(--glass-border)\" stroke=\"var(--glass-border)\" stroke-width=\"1\"\/>\n <path d=\"M 400 300 L 450 320 L 480 400 L 450 480 L 400 500 L 350 450 L 340 380 Z\" fill=\"var(--glass-border)\" stroke=\"var(--glass-border)\" stroke-width=\"1\"\/>\n <path d=\"M 500 450 L 550 470 L 580 550 L 550 600 L 500 580 L 480 520 Z\" fill=\"var(--glass-border)\" stroke=\"var(--glass-border)\" stroke-width=\"1\"\/>\n <path d=\"M 250 200 L 300 220 L 330 280 L 300 340 L 250 320 L 230 260 Z\" fill=\"var(--glass-border)\" stroke=\"var(--glass-border)\" stroke-width=\"1\"\/>\n \n <!-- Project Markers -->\n <g class=\"map-marker\" data-category=\"urban\" data-title=\"Revitalisasi Taman Kota\" data-location=\"Jakarta\" data-impact=\"-2\u00b0C Suhu Permukaan\" data-modal-target=\"case-modal-1\">\n <circle cx=\"620\" cy=\"320\" r=\"10\" fill=\"var(--primary-color)\"\/>\n <circle class=\"marker-pulse\" cx=\"620\" cy=\"320\" r=\"10\" fill=\"none\" stroke=\"var(--primary-color)\" stroke-width=\"2\"\/>\n <\/g>\n <g class=\"map-marker\" data-category=\"biodiversity\" data-title=\"Koridor Fauna Urban\" data-location=\"Bandung\" data-impact=\"+65% Populasi Burung\" data-modal-target=\"case-modal-2\">\n <circle cx=\"580\" cy=\"380\" r=\"10\" fill=\"var(--secondary-color)\"\/>\n <circle class=\"marker-pulse\" cx=\"580\" cy=\"380\" r=\"10\" fill=\"none\" stroke=\"var(--secondary-color)\" stroke-width=\"2\"\/>\n <\/g>\n <g class=\"map-marker\" data-category=\"water\" data-title=\"Restorasi Sungai Urban\" data-location=\"Surabaya\" data-impact=\"5 Spesies Ikan Kembali\" data-modal-target=\"case-modal-3\">\n <circle cx=\"700\" cy=\"420\" r=\"10\" fill=\"var(--accent-color)\"\/>\n <circle class=\"marker-pulse\" cx=\"700\" cy=\"420\" r=\"10\" fill=\"none\" stroke=\"var(--accent-color)\" stroke-width=\"2\"\/>\n <\/g>\n <g class=\"map-marker\" data-category=\"urban\" data-title=\"Hijau Vertikal Gedung\" data-location=\"Medan\" data-impact=\"-30% Konsumsi Energi\" data-modal-target=\"case-modal-4\">\n <circle cx=\"480\" cy=\"200\" r=\"10\" fill=\"var(--primary-color)\"\/>\n <circle class=\"marker-pulse\" cx=\"480\" cy=\"200\" r=\"10\" fill=\"none\" stroke=\"var(--primary-color)\" stroke-width=\"2\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"panel-placeholder\" id=\"info-panel-placeholder\">\n <i class=\"fas fa-hand-pointer\"><\/i>\n <p>Klik pada marker di peta untuk melihat detail proyek.<\/p>\n <\/div>\n <div class=\"map-info-panel\" id=\"info-panel\">\n <h3 id=\"info-title\">Judul Proyek<\/h3>\n <div class=\"map-info-meta\">\n <span><i class=\"fas fa-map-marker-alt\"><\/i> <span id=\"info-location\">Lokasi<\/span><\/span>\n <span><i class=\"fas fa-chart-line\"><\/i> Dampak Utama: <strong id=\"info-impact\">Dampak<\/strong><\/span>\n <\/div>\n <button class=\"btn\" id=\"info-button\">Lihat Studi Kasus Lengkap<\/button>\n <\/div>\n <\/div>\n <\/section>\n \n <!-- CTA Section -->\n <section class=\"cta-section\">\n <div class=\"container fade-in\">\n <div class=\"cta-content\">\n <h2>Wujudkan Proyek Impian Anda<\/h2>\n <p>Siap untuk menciptakan dampak lingkungan yang positif? Mari diskusikan proyek Anda dengan tim ahli kami.<\/p>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/kontak\/\" class=\"btn\">Mulai Konsultasi<\/a>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <!-- Footer (Sama seperti Homepage) -->\n <footer>\n <div class=\"footer-content\">\n <div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <\/div>\n <p class=\"footer-text\">\u00a9 <span id=\"year\"><\/span> Biometrik Urbane. All rights reserved.<\/p>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit\">\ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder<\/a>\n <\/div>\n <\/footer>\n\n <!-- Modals (Sama seperti Homepage) -->\n <!-- Modal Case 1 -->\n <div class=\"modal-overlay\" id=\"case-modal-1\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"case-modal-1\">×<\/span>\n <h3>Revitalisasi Taman Kota Metropolitan<\/h3>\n <span class=\"modal-subtitle\">Urban Greening<\/span>\n <p>Proyek transformasi taman kota seluas 50 hektar ini merupakan tonggak sejarah dalam penerapan teknologi biometrik untuk perencanaan ruang hijau. Kami melakukan analisis mendalam terhadap komposisi mikrobiota tanah dan genetik tanaman yang ada untuk merancang ekosistem yang tidak hanya estetis, tetapi juga berkelanjutan dan mampu meningkatkan kualitas lingkungan secara signifikan.<\/p>\n <ul>\n <li><strong>Klien:<\/strong> Pemerintah Kota Metropolitan<\/li>\n <li><strong>Durasi:<\/strong> 18 Bulan<\/li>\n <li><strong>Hasil Utama:<\/strong> Meningkatnya kesehatan lingkungan sekitar 40%, peningkatan keanekaragaman hayati lokal sebesar 25%, dan penurunan suhu permukaan area taman hingga 2\u00b0C.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Modal Case 2 -->\n <div class=\"modal-overlay\" id=\"case-modal-2\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"case-modal-2\">×<\/span>\n <h3>Koridor Fauna Urban Terhubung<\/h3>\n <span class=\"modal-subtitle\">Biodiversitas<\/span>\n <p>Fragmentasi habitat adalah ancaman serius bagi keanekaragaman hayati di kota. Kami merancang dan mengimplementasikan jaringan koridor fauna yang menghubungkan beberapa taman dan ruang terbuka hijau yang terpisah. Analisis biometrik digunakan untuk memilih jenis vegetasi asli yang paling cocok sebagai sumber makanan dan tempat berlindung bagi spesies target.<\/p>\n <ul>\n <li><strong>Klien:<\/strong> Yayasan Konservasi Urban<\/li>\n <li><strong>Durasi:<\/strong> 24 Bulan<\/li>\n <li><strong>Hasil Utama:<\/strong> Peningkatan populasi burung pemakan biji lokal hingga 65% dan tercatat 3 spesies mamalia kecil baru yang kembali mendiami area tersebut dalam waktu 2 tahun.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Modal Case 3 -->\n <div class=\"modal-overlay\" id=\"case-modal-3\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"case-modal-3\">×<\/span>\n <h3>Restorasi Ekosistem Sungai Urban<\/h3>\n <span class=\"modal-subtitle\">Kualitas Air<\/span>\n <p>Sungai yang melintasi kota telah terdegradasi oleh polusi domestik dan industri. Kami menggunakan teknologi eDNA untuk melakukan audit menyeluruh terhadap keanekaragaman hayati akuatik, mengidentifikasi spesies ikan asli yang telah punah secara lokal dan sumber polutan. Berdasarkan data ini, kami merancang program restorasi yang komprehensif.<\/p>\n <ul>\n <li><strong>Klien:<\/strong> Dinas Lingkungan Hidup Kota<\/li>\n <li><strong>Durasi:<\/strong> 36 Bulan<\/li>\n <li><strong>Hasil Utama:<\/strong> Kualitas air membaik dari kategori \"tercemar berat\" menjadi \"tercemar ringan\". 5 spesies ikan asli berhasil reintroduksi dan populasi mereka stabil.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Modal Case 4 -->\n <div class=\"modal-overlay\" id=\"case-modal-4\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"case-modal-4\">×<\/span>\n <h3>Hijau Vertikal untuk Gedung Tinggi<\/h3>\n <span class=\"modal-subtitle\">Urban Greening<\/span>\n <p>Sebuah gedung pencakar langit di pusat kota ingin meningkatkan sertifikasi keberlanjutannya. Kami mengembangkan sistem dinding hijau (vertical garden) cerdas. Sensor biometrik mikroklimat dipasang untuk memantau suhu, kelembaban, dan intensitas cahaya. Data ini terhubung dengan sistem irigasi otomatis yang tidak hanya menyiram, tetapi juga memilih nutrisi yang tepat untuk berbagai jenis tanaman.<\/p>\n <ul>\n <li><strong>Klien:<\/strong> Pengembang Properti XYZ<\/li>\n <li><strong>Durasi:<\/strong> 12 Bulan<\/li>\n <li><strong>Hasil Utama:<\/strong> Pengurangan konsumsi energi untuk pendinginan ruangan hingga 30%, peningkatan indeks kualitas udara di dalam gedung sebesar 40%, dan meraih sertifikasi Green Building Platinum.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ --- Fungsi dari Homepage ---\n function createLeaves() {\n const particlesContainer = document.getElementById('particles');\n const leafCount = 40;\n const leafSymbols = ['\ud83c\udf42', '\ud83c\udf41', '\ud83c\udf43', '\ud83c\udf40'];\n particlesContainer.innerHTML = '';\n for (let i = 0; i < leafCount; i++) {\n const leaf = document.createElement('div');\n leaf.className = 'leaf';\n leaf.textContent = leafSymbols[Math.floor(Math.random() * leafSymbols.length)];\n leaf.style.left = Math.random() * 100 + '%';\n const size = 15 + Math.random() * 25;\n leaf.style.fontSize = size + 'px';\n const duration = 10 + Math.random() * 15;\n const delay = Math.random() * 15;\n leaf.style.animationDuration = duration + 's';\n leaf.style.animationDelay = delay + 's';\n leaf.style.opacity = 0.2 + Math.random() * 0.6;\n particlesContainer.appendChild(leaf);\n }\n }\n createLeaves();\n setInterval(createLeaves, 30000);\n\n const header = document.getElementById('header');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n header.classList.add('scrolled');\n } else {\n header.classList.remove('scrolled');\n }\n });\n\n const hamburger = document.getElementById('hamburger');\n const nav = document.getElementById('nav');\n hamburger.addEventListener('click', () => {\n hamburger.classList.toggle('active');\n nav.classList.toggle('active');\n });\n document.querySelectorAll('nav a').forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n hamburger.classList.remove('active');\n nav.classList.remove('active');\n }\n });\n });\n\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ --- Fungsi Khusus Halaman Studi Kasus (Peta) ---\n\n \/\/ Fade-in Animation on Scroll\n const faders = document.querySelectorAll('.fade-in');\n const appearOptions = { threshold: 0.1, rootMargin: \"0px 0px -50px 0px\" };\n const appearOnScroll = new IntersectionObserver(function(entries, observer) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n entry.target.classList.add('visible');\n \/\/ observer.unobserve(entry.target); \/\/ Keep observing for filter changes\n });\n }, appearOptions);\n faders.forEach(fader => appearOnScroll.observe(fader));\n\n \/\/ Map Interaction\n const markers = document.querySelectorAll('.map-marker');\n const filters = document.querySelectorAll('.map-filter');\n const infoPanel = document.getElementById('info-panel');\n const placeholderPanel = document.getElementById('info-panel-placeholder');\n const infoTitle = document.getElementById('info-title');\n const infoLocation = document.getElementById('info-location');\n const infoImpact = document.getElementById('info-impact');\n const infoButton = document.getElementById('info-button');\n\n function showInfoPanel(marker) {\n const title = marker.dataset.title;\n const location = marker.dataset.location;\n const impact = marker.dataset.impact;\n const modalTarget = marker.dataset.modalTarget;\n\n infoTitle.textContent = title;\n infoLocation.textContent = location;\n infoImpact.textContent = impact;\n infoButton.setAttribute('data-modal-target', modalTarget);\n\n placeholderPanel.style.display = 'none';\n infoPanel.classList.add('active');\n }\n\n function hideInfoPanel() {\n infoPanel.classList.remove('active');\n placeholderPanel.style.display = 'flex';\n }\n \n \/\/ Marker Click Event\n markers.forEach(marker => {\n marker.addEventListener('click', () => {\n \/\/ If clicking an already active marker, hide panel\n if (infoPanel.classList.contains('active') && infoButton.dataset.modalTarget === marker.dataset.modalTarget) {\n hideInfoPanel();\n } else {\n showInfoPanel(marker);\n }\n });\n });\n\n \/\/ Filter Click Event\n filters.forEach(filter => {\n filter.addEventListener('click', () => {\n const filterValue = filter.getAttribute('data-filter');\n filters.forEach(f => f.classList.remove('active'));\n filter.classList.add('active');\n\n markers.forEach(marker => {\n if (filterValue === 'all' || marker.getAttribute('data-category') === filterValue) {\n marker.classList.remove('filtered-out');\n } else {\n marker.classList.add('filtered-out');\n }\n });\n \n \/\/ Hide panel if the active marker is filtered out\n if (infoPanel.classList.contains('active')) {\n const activeModalTarget = infoButton.dataset.modalTarget;\n const activeMarker = document.querySelector(`[data-modal-target=\"${activeModalTarget}\"]`);\n if (activeMarker && activeMarker.classList.contains('filtered-out')) {\n hideInfoPanel();\n }\n }\n });\n });\n\n \/\/ Modal functionality\n const modalCloseButtons = document.querySelectorAll('.modal-close');\n function openModal(modal) {\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n function closeModal(modal) {\n modal.classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n\n infoButton.addEventListener('click', () => {\n const modalId = infoButton.getAttribute('data-modal-target');\n const modal = document.getElementById(modalId);\n if (modal) {\n openModal(modal);\n }\n });\n\n modalCloseButtons.forEach(button => {\n button.addEventListener('click', () => {\n const modalId = button.getAttribute('data-modal');\n const modal = document.getElementById(modalId);\n closeModal(modal);\n });\n });\n\n document.querySelectorAll('.modal-overlay').forEach(overlay => {\n overlay.addEventListener('click', (e) => {\n if (e.target === overlay) {\n closeModal(overlay);\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Studi Kasus – Peta Dampak Biometrik Urbane Biometrik Urbane Beranda Profile Teknologi Studi Kasus Kontak \ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder Peta Dampak Kami Jelajahi peta interaktif untuk melihat bagaimana solusi kami menciptakan perubahan nyata di berbagai lokasi. Semua Urban Greening Biodiversitas Kualitas Air Klik pada marker di peta untuk melihat detail proyek. Judul Proyek Lokasi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":4,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/106\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}