{"id":14,"date":"2025-11-20T14:26:45","date_gmt":"2025-11-20T14:26:45","guid":{"rendered":"https:\/\/lab.rwb.my.id\/bio\/?page_id=14"},"modified":"2025-11-20T17:50:37","modified_gmt":"2025-11-20T17:50:37","slug":"beranda","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/bio\/","title":{"rendered":"Beranda"},"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 Biometrik Urbane - Konsultan Lingkungan Terdepan<\/title>\n\n <!-- SEO & Meta Tags -->\n <meta name=\"description\" content=\"Biometrik Urbane adalah konsultan lingkungan terdepan yang mengintegrasikan teknologi biometrik untuk solusi kota yang berkelanjutan.\">\n <meta property=\"og:title\" content=\"Biometrik Urbane - Konsultan Lingkungan Terdepan\">\n <meta property=\"og:description\" content=\"Mengintegrasikan teknologi biometrik canggih dengan analisis lingkungan untuk menciptakan kota yang lebih berkelanjutan.\">\n <meta property=\"og:url\" content=\"https:\/\/biometrik-urbane.com\">\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 --- *\/\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 --- *\/\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 --- *\/\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 \/* --- HERO SECTION --- *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6rem 2rem 2rem;\n position: relative;\n z-index: 2;\n }\n\n .hero-content {\n max-width: 1200px;\n text-align: center;\n z-index: 2;\n }\n\n .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 animation: glow 2s ease-in-out infinite alternate;\n }\n\n @keyframes glow {\n from { filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.5)); }\n to { filter: drop-shadow(0 0 30px rgba(0, 204, 255, 0.7)); }\n }\n\n .hero p {\n font-size: 1.3rem;\n color: var(--text-gray);\n margin-bottom: 2rem;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .cta-buttons {\n display: flex;\n gap: 1.5rem;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 1rem 2.5rem;\n border: none;\n border-radius: 50px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n position: relative;\n overflow: hidden;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--text-light);\n border: 2px solid var(--primary-color);\n }\n\n .btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);\n }\n\n \/* --- SERVICES SECTION --- *\/\n .services { padding: 5rem 2rem; background: rgba(255, 255, 255, 0.02); position: relative; z-index: 2; }\n .container { max-width: 1200px; margin: 0 auto; }\n .section-title { text-align: center; font-size: 2rem; margin-bottom: 3rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }\n .service-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; transition: all 0.3s ease; position: relative; overflow: hidden; }\n .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, transparent, rgba(0, 255, 136, 0.1)); opacity: 0; transition: opacity 0.3s ease; }\n .service-card:hover::before { opacity: 1; }\n .service-card:hover { transform: translateY(-10px); border-color: var(--primary-color); }\n .service-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; }\n .service-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }\n .service-card p { color: var(--text-gray); line-height: 1.6; }\n\n \/* --- TECHNOLOGY SECTION --- *\/\n .technology { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 204, 255, 0.05)); position: relative; z-index: 2; }\n .tech-container { max-width: 1200px; margin: 0 auto; }\n .tech-tabs { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }\n .tech-tab { padding: 0.8rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; color: var(--text-gray); cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; font-weight: 500; }\n .tech-tab.active { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--dark-bg); border-color: transparent; }\n .tech-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }\n .tech-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; display: none; }\n .tech-card.active { display: flex; flex-direction: column; }\n .tech-image { height: 200px; background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 204, 255, 0.2)); display: flex; align-items: center; justify-content: center; font-size: 3rem; }\n .tech-details { padding: 2rem; }\n .tech-details h3 { font-size: 1.3rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n .tech-details p { color: var(--text-gray); line-height: 1.6; margin-bottom: 1.5rem; }\n .tech-features { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n .tech-feature { padding: 0.5rem 1rem; background: rgba(0, 255, 136, 0.1); border-radius: 50px; font-size: 0.9rem; color: var(--primary-color); }\n\n \/* --- CASE STUDIES SECTION --- *\/\n .case-studies { padding: 5rem 2rem; background: rgba(255, 255, 255, 0.02); position: relative; z-index: 2; }\n .case-container { max-width: 1200px; margin: 0 auto; }\n .case-filters { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }\n .case-filter { padding: 0.8rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; color: var(--text-gray); cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; font-weight: 500; }\n .case-filter.active { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--dark-bg); border-color: transparent; }\n .cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }\n .case-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; }\n .case-card:hover { transform: translateY(-10px); border-color: var(--primary-color); }\n .case-image { height: 200px; background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 204, 255, 0.2)); display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; overflow: hidden; }\n .case-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(10, 14, 39, 0.8)); display: flex; align-items: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; }\n .case-card:hover .case-overlay { opacity: 1; }\n .case-category { padding: 0.3rem 0.8rem; background: var(--accent-color); border-radius: 50px; font-size: 0.8rem; color: var(--dark-bg); font-weight: 600; margin-bottom: 0.5rem; display: inline-block; }\n .case-details { padding: 2rem; }\n .case-details h3 { font-size: 1.3rem; margin-bottom: 1rem; }\n .case-details p { color: var(--text-gray); line-height: 1.6; margin-bottom: 1.5rem; }\n .case-link { \n display: inline-flex; \n align-items: center; \n gap: 0.5rem; \n color: var(--primary-color); \n text-decoration: none; \n font-weight: 600; \n transition: gap 0.3s ease; \n background: none;\n border: none;\n cursor: pointer;\n font-family: 'Poppins', sans-serif;\n font-size: 1rem;\n }\n .case-link:hover { gap: 1rem; }\n\n \/* --- CTA SECTION --- *\/\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 { \n font-size: 2rem; \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 .cta-content p { font-size: 1.2rem; color: var(--text-gray); margin-bottom: 2rem; }\n\n \/* --- FOOTER --- *\/\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 \/* --- LOADING ANIMATION --- *\/\n .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.5s ease; }\n .loader.hidden { opacity: 0; pointer-events: none; }\n .loader-circle { width: 50px; height: 50px; border: 3px solid var(--glass-border); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* --- MODAL STYLES --- *\/\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 .process-steps {\n list-style: none;\n counter-reset: step-counter;\n }\n\n .process-steps li {\n counter-increment: step-counter;\n margin-bottom: 1.5rem;\n position: relative;\n padding-left: 50px;\n color: var(--text-gray);\n }\n\n .process-steps li::before {\n content: counter(step-counter);\n position: absolute;\n left: 0;\n top: 0;\n width: 35px;\n height: 35px;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n }\n \n \/* PERUBAHAN: Menyembunyikan credit di desktop *\/\n .mobile-menu-credit {\n display: none;\n }\n\n \/* --- MOBILE RESPONSIVE --- *\/\n @media (max-width: 768px) {\n \/* PERUBAHAN: Menampilkan credit hanya di mobile *\/\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; \/* Jarak dari menu terakhir *\/\n }\n\n \/* PERUBAHAN: Style untuk menu hamburger mobile *\/\n nav { \n position: fixed; \n top: 70px; \n left: -100%; \n width: 100%; \n \/* PERUBAHAN: Mengubah tinggi menu agar hanya sebatas konten *\/\n height: auto;\n max-height: calc(100vh - 70px); \/* Pengaman agar tidak melebihi viewport *\/\n overflow-y: auto; \/* Scroll jika konten terlalu panjang *\/\n \/* PERUBAHAN: Background gradient hitam hijau *\/\n background: linear-gradient(135deg, #0a0e27, #0d2818);\n backdrop-filter: blur(10px); \n flex-direction: column; \n \/* PERUBAHAN: Mengurangi padding dan menambah gap untuk merapatkan menu *\/\n padding: 1rem 0; \n gap: 0.5rem;\n transition: left 0.3s ease; \n justify-content: flex-start; \/* Menyelaraskan menu ke kiri *\/\n }\n nav.active { left: 0; }\n nav a {\n padding: 0.8rem 2rem; \/* Padding yang lebih konsisten *\/\n width: 100%; \/* Membuat link mengisi lebar penuh *\/\n }\n\n .hamburger { display: flex; }\n .site-title { font-size: 1.2rem; }\n \n .hero { \n padding-top: 1.5rem; \n padding-bottom: 1rem; \n min-height: 75vh; \n }\n \n .hero h1 { font-size: 1.6rem; }\n .hero p { font-size: 0.9rem; }\n .btn { font-size: 0.9rem; padding: 0.8rem 1.8rem; }\n \n .services, .technology, .case-studies, .cta-section {\n padding-top: 2rem; \n padding-bottom: 2rem; \n }\n \n .section-title { \n font-size: 1.4rem; \n margin-bottom: 1.5rem; \n }\n .service-card { padding: 1.5rem; }\n .service-card h3 { font-size: 1.1rem; }\n .service-card p { font-size: 0.85rem; }\n .tech-tab { font-size: 0.85rem; padding: 0.6rem 1.1rem; }\n .tech-details h3 { font-size: 1.1rem; }\n .tech-details p { font-size: 0.85rem; }\n .tech-feature { font-size: 0.75rem; padding: 0.4rem 0.8rem; }\n .case-filter { font-size: 0.85rem; padding: 0.6rem 1.1rem; }\n .case-details h3 { font-size: 1.1rem; }\n .case-details p { font-size: 0.85rem; }\n .case-category { font-size: 0.7rem; }\n .case-link { font-size: 0.85rem; }\n \n .cta-content h2 { font-size: 1.2rem; }\n .cta-content p { font-size: 0.9rem; }\n \n .technology { padding: 2rem 1rem; }\n .tech-content { gap: 1.5rem; }\n .tech-details { padding: 1.5rem; }\n\n .case-studies { padding: 2rem 1rem; }\n .cases-grid { gap: 1.5rem; }\n .case-details { padding: 1.5rem; }\n\n footer { \n padding: 2rem 1rem 1rem; \n }\n .footer-text { font-size: 0.85rem; }\n .credit { font-size: 0.75rem; }\n .cta-buttons { flex-direction: column; align-items: center; }\n .btn { width: 100%; max-width: 280px; }\n .cases-grid { grid-template-columns: 1fr; }\n .services-grid { grid-template-columns: 1fr; }\n .tech-content { grid-template-columns: 1fr; }\n .modal-content { padding: 1.8rem; }\n .modal-content h3 { font-size: 1.4rem; }\n .modal-content p { font-size: 0.9rem; }\n .process-steps li { font-size: 0.9rem; margin-bottom: 1.2rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Loading Screen -->\n <div class=\"loader\" id=\"loader\">\n <div class=\"loader-circle\"><\/div>\n <\/div>\n\n <!-- Animated Background -->\n <div class=\"animated-bg\">\n <div class=\"particles\" id=\"particles\"><\/div>\n <div class=\"biometric-pattern\"><\/div>\n <\/div>\n\n <!-- Header -->\n <header id=\"header\">\n <div class=\"header-container\">\n <div class=\"logo-section\">\n <!-- PERUBAHAN: Link logo mengarah ke homepage -->\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 <!-- PERUBAHAN: Menu \"Layanan\" diubah menjadi \"Profile\" -->\n <!-- PERUBAHAN: Menambahkan link pada setiap menu navigasi -->\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 <!-- PERUBAHAN: Menambahkan credit di dalam menu hamburger -->\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 <!-- Hero Section -->\n <section class=\"hero\" id=\"home\">\n <div class=\"hero-content\">\n <h1>Solusi Lingkungan Urban Berbasis Biometrik<\/h1>\n <p>Mengintegrasikan teknologi biometrik canggih dengan analisis lingkungan untuk menciptakan kota yang lebih berkelanjutan dan sehat<\/p>\n <div class=\"cta-buttons\">\n <a href=\"https:\/\/wa.me\/6281227008020?text=Halo,%20saya%20tertarik%20dengan%20layanan%20Biometrik%20Urbane.\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn btn-primary\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> Hubungi Kami\n <\/a>\n <button class=\"btn btn-secondary\" id=\"btn-open-process-modal\">Tahapan Kerja Kami<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Services Section -->\n <section class=\"services\" id=\"services\">\n <div class=\"container\">\n <h2 class=\"section-title\">Layanan Kami<\/h2>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fas fa-dna\"><\/i><\/div>\n <h3>Analisis Biometrik<\/h3>\n <p>Pemantauan biodiversitas urban menggunakan teknologi DNA dan analisis biometrik untuk melacak kesehatan ekosistem<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fas fa-city\"><\/i><\/div>\n <h3>Perencanaan Hijau<\/h3>\n <p>Desain ruang hijau urban yang optimal berdasarkan data biometrik dan kebutuhan ekologis lokal<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\n <h3>Monitoring Real-time<\/h3>\n <p>Sistem pemantauan kualitas lingkungan 24\/7 dengan sensor biometrik terintegrasi<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fas fa-leaf\"><\/i><\/div>\n <h3>Konservasi Spesies<\/h3>\n <p>Program pelestarian flora dan fauna urban dengan pendekatan biometrik presisi<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fas fa-recycle\"><\/i><\/div>\n <h3>Sistem Daur Ulang<\/h3>\n <p>Optimasi pengelolaan limbah urban menggunakan analisis biometrik mikroba<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fas fa-graduation-cap\"><\/i><\/div>\n <h3>Edukasi Lingkungan<\/h3>\n <p>Program pelatihan dan edukasi tentang biometrik urban untuk masyarakat<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Technology Section -->\n <section class=\"technology\" id=\"technology\">\n <div class=\"tech-container\">\n <h2 class=\"section-title\">Teknologi Kami<\/h2>\n <div class=\"tech-tabs\">\n <button class=\"tech-tab active\" data-tab=\"dna\" type=\"button\">DNA Sequencing<\/button>\n <button class=\"tech-tab\" data-tab=\"sensor\" type=\"button\">Sensor Biometrik<\/button>\n <button class=\"tech-tab\" data-tab=\"ai\" type=\"button\">AI & Machine Learning<\/button>\n <button class=\"tech-tab\" data-tab=\"drone\" type=\"button\">Drone Mapping<\/button>\n <\/div>\n <div class=\"tech-content\">\n <div class=\"tech-card active\" id=\"dna\">\n <div class=\"tech-image\"><i class=\"fas fa-dna\"><\/i><\/div>\n <div class=\"tech-details\">\n <h3>Environmental DNA (eDNA) Sequencing<\/h3>\n <p>Teknologi sequencing DNA lingkungan memungkinkan kami mengidentifikasi spesies dalam ekosistem tanpa perlu menangkap organisme secara fisik. Metode non-invasif ini memberikan data biodiversitas yang komprehensif dengan dampak minimal.<\/p>\n <div class=\"tech-features\">\n <span class=\"tech-feature\">Identifikasi Spesies<\/span>\n <span class=\"tech-feature\">Analisis Keanekaragaman<\/span>\n <span class=\"tech-feature\">Monitoring Kualitas Air<\/span>\n <span class=\"tech-feature\">Deteksi Spesies Invasif<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"tech-card\" id=\"sensor\">\n <div class=\"tech-image\"><i class=\"fas fa-microchip\"><\/i><\/div>\n <div class=\"tech-details\">\n <h3>Sensor Biometrik IoT<\/h3>\n <p>Jaringan sensor cerdas kami mengumpulkan data biometrik real-time dari lingkungan urban, termasuk parameter kualitas udara, air, dan tanah. Sensor-sensor ini terintegrasi dengan platform cloud untuk analisis mendalam.<\/p>\n <div class=\"tech-features\">\n <span class=\"tech-feature\">Monitoring 24\/7<\/span>\n <span class=\"tech-feature\">Data Real-time<\/span>\n <span class=\"tech-feature\">Alert System<\/span>\n <span class=\"tech-feature\">Low Power Consumption<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"tech-card\" id=\"ai\">\n <div class=\"tech-image\"><i class=\"fas fa-brain\"><\/i><\/div>\n <div class=\"tech-details\">\n <h3>AI & Machine Learning Analytics<\/h3>\n <p>Algoritma machine learning kami menganalisis pola data biometrik kompleks untuk memprediksi tren ekologis, mengidentifikasi masalah lingkungan potensial, dan memberikan rekomendasi tindakan preventif.<\/p>\n <div class=\"tech-features\">\n <span class=\"tech-feature\">Predictive Analytics<\/span>\n <span class=\"tech-feature\">Pattern Recognition<\/span>\n <span class=\"tech-feature\">Anomaly Detection<\/span>\n <span class=\"tech-feature\">Optimization Algorithms<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"tech-card\" id=\"drone\">\n <div class=\"tech-image\"><i class=\"fas fa-helicopter\"><\/i><\/div>\n <div class=\"tech-details\">\n <h3>Drone & Aerial Imaging<\/h3>\n <p>Fleet drone kami dilengkapi dengan multispectral sensors untuk memetakan kesehatan vegetasi, identifikasi spesies pohon, dan monitoring perubahan lanskap urban dengan resolusi tinggi.<\/p>\n <div class=\"tech-features\">\n <span class=\"tech-feature\">Multispectral Imaging<\/span>\n <span class=\"tech-feature\">3D Mapping<\/span>\n <span class=\"tech-feature\">Vegetation Health Index<\/span>\n <span class=\"tech-feature\">Change Detection<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Case Studies Section -->\n <section class=\"case-studies\" id=\"case-studies\">\n <div class=\"case-container\">\n <h2 class=\"section-title\">Studi Kasus<\/h2>\n <div class=\"case-filters\">\n <button class=\"case-filter active\" data-filter=\"all\" type=\"button\">Semua<\/button>\n <button class=\"case-filter\" data-filter=\"urban\" type=\"button\">Urban Greening<\/button>\n <button class=\"case-filter\" data-filter=\"biodiversity\" type=\"button\">Biodiversitas<\/button>\n <button class=\"case-filter\" data-filter=\"water\" type=\"button\">Kualitas Air<\/button>\n <\/div>\n <div class=\"cases-grid\">\n <div class=\"case-card\" data-category=\"urban\">\n <div class=\"case-image\"><i class=\"fas fa-tree\"><\/i>\n <div class=\"case-overlay\"><span class=\"case-category\">Urban Greening<\/span><\/div>\n <\/div>\n <div class=\"case-details\">\n <h3>Revitalisasi Taman Kota Metropolitan<\/h3>\n <p>Proyek transformasi taman kota seluas 50 hektar menggunakan analisis biometrik tanah dan tanaman untuk menciptakan ekosistem urban yang berkelanjutan dan meningkatkan kesehatan lingkungan sekitar 40%.<\/p>\n <button class=\"case-link\" data-modal-target=\"case-modal-1\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"case-card\" data-category=\"biodiversity\">\n <div class=\"case-image\"><i class=\"fas fa-dove\"><\/i>\n <div class=\"case-overlay\"><span class=\"case-category\">Biodiversitas<\/span><\/div>\n <\/div>\n <div class=\"case-details\">\n <h3>Koridor Fauna Urban Terhubung<\/h3>\n <p>Merancang dan mengimplementasikan jaringan koridor fauna yang menghubungkan fragmentasi habitat di perkotaan, meningkatkan populasi burung lokal hingga 65% dalam waktu 2 tahun.<\/p>\n <button class=\"case-link\" data-modal-target=\"case-modal-2\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"case-card\" data-category=\"water\">\n <div class=\"case-image\"><i class=\"fas fa-water\"><\/i>\n <div class=\"case-overlay\"><span class=\"case-category\">Kualitas Air<\/span><\/div>\n <\/div>\n <div class=\"case-details\">\n <h3>Restorasi Ekosistem Sungai Urban<\/h3>\n <p>Menggunakan teknologi eDNA untuk mengidentifikasi spesies ikan asli dan mengembalikan kesehatan ekosistem sungai yang terdegradasi akibat polusi urban.<\/p>\n <button class=\"case-link\" data-modal-target=\"case-modal-3\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"case-card\" data-category=\"urban\">\n <div class=\"case-image\"><i class=\"fas fa-building\"><\/i>\n <div class=\"case-overlay\"><span class=\"case-category\">Urban Greening<\/span><\/div>\n <\/div>\n <div class=\"case-details\">\n <h3>Hijau Vertikal untuk Gedung Tinggi<\/h3>\n <p>Sistem dinding hijau berbasis biometrik yang secara otomatis menyesuaikan jenis tanaman dan irigasi berdasarkan analisis mikroklimat real-time, mengurangi konsumsi energi gedung hingga 30%.<\/p>\n <button class=\"case-link\" data-modal-target=\"case-modal-4\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"case-card\" data-category=\"biodiversity\">\n <div class=\"case-image\"><i class=\"fas fa-bug\"><\/i>\n <div class=\"case-overlay\"><span class=\"case-category\">Biodiversitas<\/span><\/div>\n <\/div>\n <div class=\"case-details\">\n <h3>Sanctuary Serangga Urban<\/h3>\n <p>Menciptakan habitat serangga penyerbuk di tengah kota menggunakan analisis biometrik untuk menentukan spesies tanaman yang optimal, meningkatkan populasi pollinator hingga 80%.<\/p>\n <button class=\"case-link\" data-modal-target=\"case-modal-5\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"case-card\" data-category=\"water\">\n <div class=\"case-image\"><i class=\"fas fa-tint\"><\/i>\n <div class=\"case-overlay\"><span class=\"case-category\">Kualitas Air<\/span><\/div>\n <\/div>\n <div class=\"case-details\">\n <h3>Sistem Filtrasi Air Berbasis Mikroba<\/h3>\n <p>Mengembangkan sistem biofiltrasi inovatif menggunakan konsorsium mikroba yang dipilih secara biometrik untuk mengolah air limbah domestik menjadi air bersih yang dapat digunakan kembali.<\/p>\n <button class=\"case-link\" data-modal-target=\"case-modal-6\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- CTA Section -->\n <section class=\"cta-section\">\n <div class=\"cta-content\">\n <h2>Siap Membangun Lingkungan Urban Lebih Baik?<\/h2>\n <p>Hubungi tim konsultan kami untuk diskusi tentang bagaimana teknologi biometrik dapat membantu proyek lingkungan Anda<\/p>\n <a href=\"mailto:info@biometrik-urbane.com?subject=Permintaan%20Konsultasi%20Gratis\" class=\"btn btn-primary\">Konsultasi Gratis<\/a>\n <\/div>\n <\/section>\n\n <!-- Contact Section (Kosong) -->\n <section class=\"contact-section\" id=\"contact\">\n <!-- Konten halaman kontak akan Anda isi sendiri -->\n <\/section>\n\n <!-- Footer -->\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 <!-- Modal Proses -->\n <div class=\"modal-overlay\" id=\"process-modal\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"process-modal\">×<\/span>\n <h3>Tahapan Kerja Kami<\/h3>\n <p>Kami mengikuti proses yang terstruktur untuk memastikan hasil terbaik untuk proyek Anda.<\/p>\n <ol class=\"process-steps\">\n <li><strong>Konsultasi & Analisis Awal:<\/strong> Mendengarkan kebutuhan klien dan melakukan analisis lingkungan awal.<\/li>\n <li><strong>Perencanaan & Desain:<\/strong> Merancang solusi biometrik yang disesuaikan dengan kondisi unik proyek.<\/li>\n <li><strong>Implementasi Teknologi:<\/strong> Memasang sensor, mengambil sampel eDNA, dan menjalankan analisis data.<\/li>\n <li><strong>Monitoring & Evaluasi:<\/strong> Melakukan pemantauan berkelanjutan dan memberikan laporan perkembangan secara berkala.<\/li>\n <li><strong>Optimasi & Pelaporan:<\/strong> Mengoptimalkan strategi berdasarkan data yang terkumpul dan menyampaikan hasil akhir.<\/li>\n <\/ol>\n <\/div>\n <\/div>\n\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 <!-- Modal Case 5 -->\n <div class=\"modal-overlay\" id=\"case-modal-5\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"case-modal-5\">×<\/span>\n <h3>Sanctuary Serangga Urban<\/h3>\n <span class=\"modal-subtitle\">Biodiversitas<\/span>\n <p>Populasi serangga penyerbuk (pollinator) menurun drastis di area perkotaan, ancaman bagi ketahanan pangan. Kami menciptakan \"sanctuary\" atau suaka serangga di beberapa taman kota. Menggunakan analisis biometrik, kami mengidentifikasi tanaman berbunga lokal yang paling disukai oleh berbagai spesies lebah, kupu-kupu, dan serangga penyerbuk lainnya.<\/p>\n <ul>\n <li><strong>Klien:<\/strong> Komunitas Pertanian Kota<\/li>\n <li><strong>Durasi:<\/strong> 6 Bulan (pilot project)<\/li>\n <li><strong>Hasil Utama:<\/strong> Peningkatan populasi pollinator di area sekitar sanctuary hingga 80%, dan hasil panen di kebun komunitas terdekat meningkat hingga 20%.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Modal Case 6 -->\n <div class=\"modal-overlay\" id=\"case-modal-6\">\n <div class=\"modal-content\">\n <span class=\"modal-close\" data-modal=\"case-modal-6\">×<\/span>\n <h3>Sistem Filtrasi Air Berbasis Mikroba<\/h3>\n <span class=\"modal-subtitle\">Kualitas Air<\/span>\n <p>Pengolahan air limbah domestik secara konvensional membutuhkan energi besar dan bahan kimia. Kami mengembangkan sistem biofiltrasi inovatif. Kami mengisolasi dan mengkultivasi konsorsium mikroba dari tanah lokal yang memiliki kemampuan luar biasa dalam mendegradasi organik dan menyerap nutrisi berlebih. Mikroba-mikroba ini kemudian \"ditanam\" dalam media filter khusus.<\/p>\n <ul>\n <li><strong>Klien:<\/strong> Perusahaan Pengembang Perumahan Hijau<\/li>\n <li><strong>Durasi:<\/strong> 15 Bulan<\/li>\n <li><strong>Hasil Utama:<\/strong> Sistem mampu mengolah 100.000 liter air limbah per hari dengan konsumsi energi 70% lebih rendah. Air hasil olahan memenuhi standar kualitas air untuk irigasi dan penggunaan non-potable lainnya.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Create falling leaves\n function createLeaves() {\n const particlesContainer = document.getElementById('particles');\n const leafCount = 15;\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\n \/\/ Header scroll effect\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 \/\/ Mobile menu toggle\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 \/\/ Technology tabs functionality\n const techTabs = document.querySelectorAll('.tech-tab');\n const techCards = document.querySelectorAll('.tech-card');\n techTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n const tabId = tab.getAttribute('data-tab');\n techTabs.forEach(t => t.classList.remove('active'));\n techCards.forEach(c => c.classList.remove('active'));\n tab.classList.add('active');\n document.getElementById(tabId).classList.add('active');\n });\n });\n\n \/\/ Case studies filter functionality\n const caseFilters = document.querySelectorAll('.case-filter');\n const caseCards = document.querySelectorAll('.case-card');\n caseFilters.forEach(filter => {\n filter.addEventListener('click', () => {\n const filterValue = filter.getAttribute('data-filter');\n caseFilters.forEach(f => f.classList.remove('active'));\n filter.classList.add('active');\n caseCards.forEach(card => {\n if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n });\n });\n });\n\n \/\/ Modal functionality\n const processModalBtn = document.getElementById('btn-open-process-modal');\n const modalCloseButtons = document.querySelectorAll('.modal-close');\n\n function openModal(modal) {\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal(modal) {\n modal.classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n\n if(processModalBtn) {\n processModalBtn.addEventListener('click', () => {\n const modal = document.getElementById('process-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 \/\/ Menambahkan fungsi untuk membuka modal case study\n const caseLinkButtons = document.querySelectorAll('.case-link');\n caseLinkButtons.forEach(button => {\n button.addEventListener('click', () => {\n const modalId = button.getAttribute('data-modal-target');\n const modal = document.getElementById(modalId);\n if (modal) {\n openModal(modal);\n }\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 \/\/ Set current year\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ Hide loader when page is loaded\n const loader = document.getElementById('loader');\n setTimeout(() => { loader.classList.add('hidden'); }, 500);\n\n \/\/ Initialize falling leaves\n createLeaves();\n setInterval(createLeaves, 30000);\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>Biometrik Urbane – Konsultan Lingkungan Terdepan Biometrik Urbane Beranda Profile Teknologi Studi Kasus Kontak \ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder Solusi Lingkungan Urban Berbasis Biometrik Mengintegrasikan teknologi biometrik canggih dengan analisis lingkungan untuk menciptakan kota yang lebih berkelanjutan dan sehat Hubungi Kami Tahapan Kerja Kami Layanan Kami Analisis Biometrik Pemantauan biodiversitas urban menggunakan teknologi DNA dan […]<\/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-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/14","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=14"}],"version-history":[{"count":85,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":121,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/14\/revisions\/121"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}