{"id":104,"date":"2025-11-20T17:34:21","date_gmt":"2025-11-20T17:34:21","guid":{"rendered":"https:\/\/lab.rwb.my.id\/bio\/?page_id=104"},"modified":"2026-04-18T14:17:19","modified_gmt":"2026-04-18T14:17:19","slug":"teknologi","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/bio\/teknologi\/","title":{"rendered":"Teknologi"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"104\" class=\"elementor elementor-104\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b79ec5f e-flex e-con-boxed e-con e-parent\" data-id=\"b79ec5f\" 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-032bb10 elementor-widget elementor-widget-html\" data-id=\"032bb10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Teknologi - Biometrik Urbane<\/title>\n\n    <!-- SEO & Meta Tags -->\n    <meta name=\"description\" content=\"Jelajahi teknologi canggih di balik Biometrik Urbane: eDNA, sensor IoT, AI, dan drone mapping untuk solusi lingkungan urban.\">\n    <meta property=\"og:title\" content=\"Teknologi - Biometrik Urbane\">\n    <meta property=\"og:description\" content=\"Kami menggunakan perangkat lunak dan perangkat keras terdepan untuk menganalisis dan memantau ekosistem perkotaan dengan presisi tinggi.\">\n    <meta property=\"og:url\" content=\"https:\/\/biometrik-urbane.com\/teknologi\/\">\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        \/* --- TECHNOLOGY HERO SECTION --- *\/\n        .tech-hero {\n            min-height: 70vh;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 7rem 2rem 4rem;\n            text-align: center;\n            position: relative;\n            z-index: 2;\n        }\n        .tech-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        .tech-hero p {\n            font-size: 1.2rem;\n            color: var(--text-gray);\n            max-width: 700px;\n            margin: 0 auto;\n        }\n\n        \/* --- DETAILED TECH SECTION --- *\/\n        .detailed-tech-section {\n            padding: 5rem 2rem;\n            background: rgba(255, 255, 255, 0.02);\n            position: relative;\n            z-index: 2;\n        }\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n        .tech-detail-item {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 4rem;\n            align-items: center;\n            margin-bottom: 5rem;\n        }\n        .tech-detail-item:nth-child(even) {\n            direction: rtl;\n        }\n        .tech-detail-item:nth-child(even) > * {\n            direction: ltr;\n        }\n        .tech-detail-image {\n            width: 100%;\n            height: 350px;\n            border-radius: 20px;\n            overflow: hidden;\n            background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 204, 255, 0.2));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 6rem;\n            color: var(--glass-border);\n        }\n        .tech-detail-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        .tech-detail-content p {\n            color: var(--text-gray);\n            line-height: 1.7;\n            margin-bottom: 1.5rem;\n        }\n        .tech-features-list {\n            list-style: none;\n            padding: 0;\n        }\n        .tech-features-list li {\n            background: var(--glass-bg);\n            border: 1px solid var(--glass-border);\n            border-radius: 10px;\n            padding: 1rem 1.5rem;\n            margin-bottom: 1rem;\n            color: var(--text-light);\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n        }\n        .tech-features-list i {\n            color: var(--primary-color);\n            font-size: 1.2rem;\n        }\n\n        \/* --- PROCESS SECTION --- *\/\n        .process-section {\n            padding: 5rem 2rem;\n            background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 204, 255, 0.05));\n            position: relative;\n            z-index: 2;\n        }\n        .section-title {\n            text-align: center;\n            font-size: 2rem;\n            margin-bottom: 3rem;\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        .process-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 2rem;\n        }\n        .process-card {\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            text-align: center;\n            transition: all 0.3s ease;\n        }\n        .process-card:hover {\n            transform: translateY(-10px);\n            border-color: var(--primary-color);\n        }\n        .process-number {\n            font-size: 2.5rem;\n            font-weight: 700;\n            color: var(--primary-color);\n            margin-bottom: 1rem;\n        }\n        .process-card h3 {\n            font-size: 1.3rem;\n            margin-bottom: 1rem;\n        }\n        .process-card p {\n            color: var(--text-gray);\n            line-height: 1.6;\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        .btn { padding: 1rem 2.5rem; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; }\n        .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--dark-bg); }\n        .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); }\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: 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            .tech-hero { min-height: 60vh; padding-top: 6rem; padding-bottom: 2rem; }\n            .tech-hero h1 { font-size: 1.6rem; }\n            .tech-hero p { font-size: 1rem; }\n            \n            .detailed-tech-section, .process-section, .cta-section {\n                padding-top: 3rem; \n                padding-bottom: 3rem; \n            }\n            .section-title { font-size: 1.4rem; margin-bottom: 2rem; }\n            \n            .tech-detail-item {\n                grid-template-columns: 1fr;\n                gap: 2rem;\n                margin-bottom: 3rem;\n            }\n            .tech-detail-item:nth-child(even) {\n                direction: ltr;\n            }\n            .tech-detail-image {\n                height: 200px;\n                font-size: 4rem;\n            }\n            .tech-detail-content h2 { font-size: 1.5rem; }\n            .tech-detail-content p { font-size: 0.9rem; }\n            .tech-features-list li { font-size: 0.85rem; padding: 0.8rem 1.2rem; }\n\n            .process-card { padding: 1.5rem; }\n            .process-number { font-size: 2rem; }\n            .process-card h3 { font-size: 1.1rem; }\n            .process-card p { font-size: 0.9rem; }\n\n            .cta-content h2 { font-size: 1.5rem; }\n            .cta-content p { font-size: 1rem; }\n            .btn { font-size: 1rem; padding: 0.8rem 2rem; }\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        <!-- Technology Hero Section -->\n        <section class=\"tech-hero\">\n            <div class=\"container fade-in\">\n                <h1>Teknologi yang Mendorong Perubahan<\/h1>\n                <p>Kami mengintegrasikan perangkat lunak dan perangkat keras terdepan untuk menganalisis dan memantau ekosistem perkotaan dengan presisi yang belum pernah ada sebelumnya.<\/p>\n            <\/div>\n        <\/section>\n\n        <!-- Detailed Technology Section -->\n        <section class=\"detailed-tech-section\">\n            <div class=\"container\">\n                <!-- Tech Item 1 -->\n                <div class=\"tech-detail-item fade-in\">\n                    <div class=\"tech-detail-image\">\n                        <i class=\"fas fa-dna\"><\/i>\n                    <\/div>\n                    <div class=\"tech-detail-content\">\n                        <h2>Environmental DNA (eDNA) Sequencing<\/h2>\n                        <p>Teknologi sequencing DNA lingkungan memungkinkan kami mengidentifikasi spesies dalam ekosistem air atau tanah tanpa perlu menangkap organisme secara fisik. Metode non-invasif ini memberikan data biodiversitas yang komprehensif dengan dampak minimal.<\/p>\n                        <ul class=\"tech-features-list\">\n                            <li><i class=\"fas fa-check-circle\"><\/i> Identifikasi Spesies Invasif<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Analisis Keanekaragaman Hayati<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Monitoring Kualitas Air<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <!-- Tech Item 2 -->\n                <div class=\"tech-detail-item fade-in\">\n                    <div class=\"tech-detail-image\">\n                        <i class=\"fas fa-microchip\"><\/i>\n                    <\/div>\n                    <div class=\"tech-detail-content\">\n                        <h2>Sensor Biometrik IoT<\/h2>\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                        <ul class=\"tech-features-list\">\n                            <li><i class=\"fas fa-check-circle\"><\/i> Monitoring 24\/7<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Data Real-time<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Sistem Peringatan Dini<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <!-- Tech Item 3 -->\n                <div class=\"tech-detail-item fade-in\">\n                    <div class=\"tech-detail-image\">\n                        <i class=\"fas fa-brain\"><\/i>\n                    <\/div>\n                    <div class=\"tech-detail-content\">\n                        <h2>AI & Machine Learning Analytics<\/h2>\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                        <ul class=\"tech-features-list\">\n                            <li><i class=\"fas fa-check-circle\"><\/i> Predictive Analytics<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Pengenalan Pola<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Deteksi Anomali<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <!-- Tech Item 4 -->\n                <div class=\"tech-detail-item fade-in\">\n                    <div class=\"tech-detail-image\">\n                        <i class=\"fas fa-helicopter\"><\/i>\n                    <\/div>\n                    <div class=\"tech-detail-content\">\n                        <h2>Drone & Aerial Imaging<\/h2>\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                        <ul class=\"tech-features-list\">\n                            <li><i class=\"fas fa-check-circle\"><\/i> Multispectral Imaging<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Pemetaan 3D<\/li>\n                            <li><i class=\"fas fa-check-circle\"><\/i> Indeks Kesehatan Vegetasi<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Process Section -->\n        <section class=\"process-section\">\n            <div class=\"container fade-in\">\n                <h2 class=\"section-title\">Proses Implementasi Teknologi<\/h2>\n                <div class=\"process-grid\">\n                    <div class=\"process-card\">\n                        <div class=\"process-number\">01<\/div>\n                        <h3>Perencanaan & Desain<\/h3>\n                        <p>Menentukan teknologi yang paling cocok untuk kebutuhan spesifik proyek dan merancang tata letak sensor serta titik sampling.<\/p>\n                    <\/div>\n                    <div class=\"process-card\">\n                        <div class=\"process-number\">02<\/div>\n                        <h3>Instalasi & Sampling<\/h3>\n                        <p>Memasang jaringan sensor IoT dan mengambil sampel lingkungan (tanah, air, udara) untuk analisis laboratorium eDNA.<\/p>\n                    <\/div>\n                    <div class=\"process-card\">\n                        <div class=\"process-number\">03<\/div>\n                        <h3>Analisis Data<\/h3>\n                        <p>Memproses data dari sensor dan hasil sequencing dengan platform AI kami untuk menghasilkan wawasan yang dapat ditindaklanjuti.<\/p>\n                    <\/div>\n                    <div class=\"process-card\">\n                        <div class=\"process-number\">04<\/div>\n                        <h3>Reporting & Optimasi<\/h3>\n                        <p>Menyajikan laporan yang komprehensif dan memberikan rekomendasi strategis untuk optimasi kesehatan lingkungan.<\/p>\n                    <\/div>\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>Siap Mengadopsi Teknologi Ini?<\/h2>\n                    <p>Hubungi kami untuk mendemonstrasikan bagaimana teknologi kami dapat memberikan nilai tambah bagi proyek lingkungan Anda.<\/p>\n                    <a href=\"https:\/\/lab.rwb.my.id\/bio\/kontak\/\" class=\"btn btn-primary\">Jadwalkan Demo<\/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    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ --- Fungsi dari Homepage ---\n            \/\/ Create falling leaves\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            \/\/ 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            \/\/ Set current year\n            document.getElementById('year').textContent = new Date().getFullYear();\n\n            \/\/ --- Fungsi Premium Baru untuk Halaman Teknologi ---\n\n            \/\/ Fade-in Animation on Scroll\n            const faders = document.querySelectorAll('.fade-in');\n            const appearOptions = {\n                threshold: 0.1,\n                rootMargin: \"0px 0px -50px 0px\"\n            };\n            const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {\n                entries.forEach(entry => {\n                    if (!entry.isIntersecting) {\n                        return;\n                    } else {\n                        entry.target.classList.add('visible');\n                        appearOnScroll.unobserve(entry.target);\n                    }\n                });\n            }, appearOptions);\n\n            faders.forEach(fader => {\n                appearOnScroll.observe(fader);\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>Teknologi &#8211; Biometrik Urbane Biometrik Urbane Beranda Profile Teknologi Studi Kasus Kontak \ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder Teknologi yang Mendorong Perubahan Kami mengintegrasikan perangkat lunak dan perangkat keras terdepan untuk menganalisis dan memantau ekosistem perkotaan dengan presisi yang belum pernah ada sebelumnya. Environmental DNA (eDNA) Sequencing Teknologi sequencing DNA lingkungan memungkinkan kami mengidentifikasi spesies dalam [&hellip;]<\/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-104","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/104","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=104"}],"version-history":[{"count":4,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/104\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/104\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/media?parent=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}