{"id":61,"date":"2026-03-02T16:27:27","date_gmt":"2026-03-02T16:27:27","guid":{"rendered":"https:\/\/demo.djoeraganwebsite.com\/hp\/?page_id=61"},"modified":"2026-03-04T10:38:11","modified_gmt":"2026-03-04T10:38:11","slug":"beranda","status":"publish","type":"page","link":"https:\/\/demo.djoeraganwebsite.com\/hp\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"61\" class=\"elementor elementor-61\" data-elementor-post-type=\"page\">\n\t\t\t\t<main class=\"elementor-element elementor-element-13fa40b e-con-full e-flex e-con e-parent\" data-id=\"13fa40b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0bf077 elementor-widget elementor-widget-shortcode\" data-id=\"d0bf077\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n        \n        <style>\n            \/* =========================================\n               1. RESET & SANDBOX (Kebal Elementor)\n               ========================================= *\/\n            #jm-hero-area * {\n                box-sizing: border-box;\n                font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;\n            }\n            #jm-hero-area a, #jm-hero-area button {\n                text-decoration: none !important;\n                border: none !important;\n                outline: none !important;\n            }\n\n            \/* =========================================\n               2. ANIMASI (Scroll & Mengambang)\n               ========================================= *\/\n            @keyframes float {\n                0%, 100% { transform: translateY(0px) rotate(0deg); }\n                50% { transform: translateY(-15px) rotate(2deg); }\n            }\n            @keyframes float-reverse {\n                0%, 100% { transform: translateY(0px); }\n                50% { transform: translateY(20px); }\n            }\n            .anim-float { animation: float 6s ease-in-out infinite; }\n            .anim-float-delay { animation: float 6s ease-in-out infinite; animation-delay: 3s; }\n            .anim-float-rev { animation: float-reverse 8s ease-in-out infinite; }\n            \n            .muncul-perlahan {\n                opacity: 0;\n                transform: translateY(40px);\n                transition: all 1s ease-out;\n            }\n            .muncul-perlahan.terlihat {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            \/* =========================================\n               3. AREA HERO & BACKGROUND\n               ========================================= *\/\n            .hero-container {\n                background-color: #0F172A; \/* Slate 900 *\/\n                border-radius: 0 0 3rem 3rem;\n                position: relative;\n                overflow: hidden;\n                padding: 8rem 1rem 12rem 1rem;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                color: #fff;\n            }\n\n            \/* Efek Cahaya (Glow) *\/\n            .efek-cahaya {\n                position: absolute;\n                width: 24rem;\n                height: 24rem;\n                border-radius: 50%;\n                filter: blur(100px);\n                z-index: 0;\n                mix-blend-mode: screen;\n            }\n            .cahaya-ungu { background: rgba(147, 51, 234, 0.2); top: 25%; left: 25%; }\n            .cahaya-biru { background: rgba(14, 165, 233, 0.15); bottom: 25%; right: 25%; }\n\n            \/* Background Grid Pattern *\/\n            .hero-grid-bg {\n                position: absolute;\n                top: 0; left: 0; right: 0; bottom: 0;\n                z-index: 0;\n                background-image: \n                    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),\n                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);\n                background-size: 40px 40px;\n                -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%);\n                mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%);\n                pointer-events: none;\n            }\n\n            \/* =========================================\n               4. FLOATING ELEMENTS (Box Card Semua)\n               ========================================= *\/\n            .float-item {\n                position: absolute;\n                z-index: 10;\n                display: none; \/* Disembunyikan di HP & Tablet *\/\n            }\n            \n            \/* Box Ganti Baterai Kiri Atas *\/\n            .float-card-battery {\n                top: 8rem; left: 6rem;\n                align-items: center; gap: 1rem;\n                background: rgba(30,41,59,0.8);\n                backdrop-filter: blur(12px);\n                border: 1px solid #334155;\n                padding: 1rem;\n                border-radius: 1rem;\n                box-shadow: 0 0 40px rgba(147,51,234,0.2);\n                transform: rotate(-3deg);\n            }\n\n            \/* Card Ganti LCD Kanan Atas *\/\n            .float-card-glass {\n                top: 14rem; right: 6rem;\n                align-items: center; gap: 1rem;\n                background: rgba(255,255,255,0.05);\n                backdrop-filter: blur(12px);\n                border: 1px solid rgba(255,255,255,0.1);\n                padding: 1rem;\n                border-radius: 1rem;\n                box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n            }\n\n            \/* Card IC Power Kiri Bawah *\/\n            .float-card-dark {\n                bottom: 11rem; left: 8rem;\n                align-items: center; gap: 1rem;\n                background: rgba(30,41,59,0.8);\n                backdrop-filter: blur(12px);\n                border: 1px solid #334155;\n                padding: 1rem;\n                border-radius: 1rem;\n                box-shadow: 0 0 30px rgba(14,165,233,0.15);\n            }\n\n            \/* Card Garansi\/Privasi Kanan Bawah (Pengganti Icon Bulat) *\/\n            .float-card-shield {\n                bottom: 12rem; right: 6rem;\n                align-items: center; gap: 1rem;\n                background: rgba(255,255,255,0.05);\n                backdrop-filter: blur(12px);\n                border: 1px solid rgba(255,255,255,0.1);\n                padding: 1rem;\n                border-radius: 1rem;\n                box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\n                transform: rotate(3deg);\n            }\n\n            \/* Hanya tampilkan floating item di layar Desktop (di atas 1024px) *\/\n            @media (min-width: 1024px) {\n                .float-item { display: flex; }\n            }\n\n            \/* =========================================\n               5. KONTEN UTAMA HERO\n               ========================================= *\/\n            .hero-konten {\n                text-align: center;\n                max-width: 56rem;\n                z-index: 20;\n                position: relative;\n            }\n            .badge-lokasi {\n                display: inline-flex;\n                align-items: center;\n                gap: 0.5rem;\n                background: rgba(147, 51, 234, 0.1);\n                border: 1px solid rgba(147, 51, 234, 0.2);\n                color: #c084fc;\n                padding: 0.5rem 1.25rem;\n                border-radius: 50px;\n                font-size: 0.875rem;\n                font-weight: 600;\n                margin-bottom: 2rem;\n                backdrop-filter: blur(4px);\n            }\n            .judul-utama {\n                font-size: clamp(2.5rem, 5vw, 4.5rem);\n                font-weight: 800;\n                line-height: 1.1;\n                margin-bottom: 1.5rem;\n            }\n            .teks-gradasi {\n                background: linear-gradient(to right, #a855f7, #38bdf8);\n                -webkit-background-clip: text;\n                -webkit-text-fill-color: transparent;\n                text-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);\n            }\n            .deskripsi-hero {\n                font-size: 1.125rem;\n                color: #cbd5e1;\n                margin-bottom: 2.5rem;\n                line-height: 1.7;\n                max-width: 42rem;\n                margin-left: auto;\n                margin-right: auto;\n            }\n\n            \/* =========================================\n               6. TOMBOL & AKSI\n               ========================================= *\/\n            .grup-tombol {\n                display: flex;\n                gap: 1rem;\n                justify-content: center;\n                flex-wrap: wrap;\n            }\n            .btn-utama {\n                background: linear-gradient(to right, #9333ea, #0ea5e9);\n                color: white !important;\n                padding: 1rem 2rem;\n                border-radius: 50px;\n                font-weight: 700;\n                font-size: 1.125rem;\n                display: inline-flex;\n                align-items: center;\n                gap: 0.5rem;\n                transition: all 0.3s ease;\n                cursor: pointer;\n            }\n            .btn-utama:hover {\n                transform: translateY(-2px);\n                box-shadow: 0 10px 25px rgba(147, 51, 234, 0.4) !important;\n            }\n            .btn-sekunder {\n                background: rgba(30, 41, 59, 0.5);\n                border: 2px solid #334155 !important;\n                color: white !important;\n                padding: 1rem 2rem;\n                border-radius: 50px;\n                font-weight: 700;\n                font-size: 1.125rem;\n                display: inline-flex;\n                align-items: center;\n                gap: 0.5rem;\n                transition: all 0.3s ease;\n                backdrop-filter: blur(4px);\n            }\n            .btn-sekunder:hover {\n                background: #1e293b;\n                border-color: #64748b !important;\n            }\n            .fitur-ringkas {\n                display: flex;\n                justify-content: center;\n                flex-wrap: wrap;\n                gap: 1.5rem;\n                margin-top: 3rem;\n                font-size: 0.875rem;\n                color: #94a3b8;\n                font-weight: 500;\n            }\n            .fitur-item { display: flex; align-items: center; gap: 0.5rem; }\n\n            \/* =========================================\n               7. WIDGET KONSULTASI (Menimpa Hero)\n               ========================================= *\/\n            .wadah-triage {\n                max-width: 64rem;\n                margin: -6rem auto 5rem auto;\n                padding: 0 1rem;\n                position: relative;\n                z-index: 30;\n            }\n            .kotak-putih {\n                background: white;\n                border-radius: 1.5rem;\n                padding: 2rem;\n                box-shadow: 0 20px 50px -12px rgba(0,0,0,0.15);\n                border: 1px solid #f1f5f9;\n                display: flex;\n                gap: 2rem;\n                align-items: center;\n            }\n            .info-konsultasi { flex: 1; }\n            .ikon-ungu {\n                width: 3rem;\n                height: 3rem;\n                background: #faf5ff;\n                color: #9333ea;\n                border-radius: 0.75rem;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                margin-bottom: 1rem;\n            }\n            .form-konsultasi { flex: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n            \n            \/* Input & Select Bersih *\/\n            .grup-input label {\n                display: block;\n                font-size: 0.75rem;\n                font-weight: 600;\n                color: #64748b;\n                text-transform: uppercase;\n                letter-spacing: 0.05em;\n                margin-bottom: 0.5rem;\n            }\n            .input-bersih {\n                width: 100%;\n                background: #f8fafc;\n                border: 1px solid #e2e8f0 !important;\n                color: #0f172a;\n                border-radius: 0.75rem;\n                padding: 0.875rem 1rem;\n                font-weight: 500;\n                appearance: none;\n                transition: all 0.2s;\n                cursor: pointer;\n            }\n            .input-bersih:focus {\n                border-color: transparent !important;\n                box-shadow: 0 0 0 2px #9333ea !important;\n            }\n            .form-full-width { grid-column: span 2; }\n            .btn-whatsapp {\n                width: 100%;\n                background: linear-gradient(to right, #9333ea, #0ea5e9);\n                color: white !important;\n                font-weight: 700;\n                padding: 1rem;\n                border-radius: 0.75rem;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                gap: 0.5rem;\n                cursor: pointer;\n                transition: all 0.3s;\n            }\n            .btn-whatsapp:hover {\n                background: #1ebc5a;\n                transform: translateY(-2px);\n                box-shadow: 0 10px 15px -3px rgba(37, 211, 102, 0.3) !important;\n            }\n\n            \/* Responsive *\/\n            @media (max-width: 768px) {\n                .kotak-putih { flex-direction: column; padding: 1.5rem; }\n                .form-konsultasi { grid-template-columns: 1fr; }\n                .form-full-width { grid-column: span 1; }\n                .hero-container { border-radius: 0 0 2rem 2rem; padding-top: 6rem; }\n            }\n        <\/style>\n\n        <div id=\"jm-hero-area\">\n            \n            <section class=\"hero-container\">\n                <div class=\"efek-cahaya cahaya-ungu\"><\/div>\n                <div class=\"efek-cahaya cahaya-biru\"><\/div>\n                <div class=\"hero-grid-bg\"><\/div>\n\n                <div class=\"float-item float-card-battery anim-float\">\n                    <div style=\"background: rgba(34,197,94,0.2); padding: 0.75rem; border-radius: 0.75rem;\">\n                        <i data-lucide=\"battery-charging\" style=\"color: #4ade80; width: 24px;\"><\/i>\n                    <\/div>\n                    <div>\n                        <p style=\"margin: 0; font-weight: 700; font-size: 0.875rem;\">Baterai Sehat 100%<\/p>\n                        <p style=\"margin: 0; color: #94a3b8; font-size: 0.75rem;\">Kualitas Original<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"float-item float-card-glass anim-float-delay\">\n                    <div style=\"background: rgba(168,85,247,0.2); padding: 0.75rem; border-radius: 0.75rem;\">\n                        <i data-lucide=\"smartphone\" style=\"color: #c084fc; width: 24px;\"><\/i>\n                    <\/div>\n                    <div>\n                        <p style=\"margin: 0; font-weight: 700; font-size: 0.875rem;\">Ganti LCD Original<\/p>\n                        <p style=\"margin: 0; color: #d8b4fe; font-size: 0.75rem;\">Selesai 45 Menit<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"float-item float-card-dark anim-float-rev\">\n                    <div style=\"background: rgba(14,165,233,0.2); padding: 0.75rem; border-radius: 0.75rem;\">\n                        <i data-lucide=\"cpu\" style=\"color: #38bdf8; width: 24px;\"><\/i>\n                    <\/div>\n                    <div>\n                        <p style=\"margin: 0; font-weight: 700; font-size: 0.875rem;\">Solder Mikro Ahli<\/p>\n                        <p style=\"margin: 0; color: #94a3b8; font-size: 0.75rem;\">Perbaikan IC Power<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"float-item float-card-shield anim-float\">\n                    <div style=\"background: rgba(234,179,8,0.2); padding: 0.75rem; border-radius: 0.75rem;\">\n                        <i data-lucide=\"shield-check\" style=\"color: #facc15; width: 24px;\"><\/i>\n                    <\/div>\n                    <div>\n                        <p style=\"margin: 0; font-weight: 700; font-size: 0.875rem;\">Data 100% Aman<\/p>\n                        <p style=\"margin: 0; color: #d8b4fe; font-size: 0.75rem;\">Privasi Terjamin<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"hero-konten muncul-perlahan\">\n                    <div class=\"badge-lokasi\">\n                        <i data-lucide=\"map-pin\" style=\"width: 16px; height: 16px;\"><\/i> Pusat Spesialis Servis HP Bondowoso\n                    <\/div>\n                    \n                    <h2 class=\"judul-utama\">\n                        Servis Ekspres Selesai <br><span class=\"teks-gradasi\">Dalam Hitungan Jam<\/span>\n                    <\/h2>\n                    \n                    <p class=\"deskripsi-hero\">\n                        Layar retak, mati total, atau kemasukan air? Kami kembalikan nyawa gawai Anda dengan komponen berkualitas dan garansi perlindungan data.\n                    <\/p>\n                    \n                    <div class=\"grup-tombol\">\n                        <button class=\"btn-utama\" onclick=\"document.getElementById('triase').scrollIntoView({behavior: 'smooth'})\">\n                            Mulai Konsultasi <i data-lucide=\"arrow-right\" style=\"width: 20px; height: 20px;\"><\/i>\n                        <\/button>\n                        <a href=\"#layanan\" class=\"btn-sekunder\">\n                            Lihat Layanan Kami\n                        <\/a>\n                    <\/div>\n\n                    <div class=\"fitur-ringkas\">\n                        <span class=\"fitur-item\"><i data-lucide=\"check-circle\" style=\"color: #c084fc; width: 18px;\"><\/i> Teknisi Profesional<\/span>\n                        <span class=\"fitur-item\"><i data-lucide=\"check-circle\" style=\"color: #c084fc; width: 18px;\"><\/i> Garansi 30 Hari<\/span>\n                        <span class=\"fitur-item\"><i data-lucide=\"check-circle\" style=\"color: #c084fc; width: 18px;\"><\/i> Harga Transparan<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <div id=\"triase\" class=\"wadah-triage muncul-perlahan\" style=\"transition-delay: 200ms;\">\n                <div class=\"kotak-putih\">\n                    \n                    <div class=\"info-konsultasi\">\n                        <div class=\"ikon-ungu\">\n                            <i data-lucide=\"cpu\" style=\"width: 24px; height: 24px;\"><\/i>\n                        <\/div>\n                        <h3 style=\"font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem 0;\">Konsultasi Cepat<\/h3>\n                        <p style=\"color: #64748b; font-size: 0.875rem; margin: 0; line-height: 1.5;\">Ceritakan kendala HP Anda, kami siapkan estimasi harga dan suku cadang sebelum Anda datang ke lokasi.<\/p>\n                    <\/div>\n                    \n                    <form id=\"form-cepat\" class=\"form-konsultasi\">\n                        <div class=\"grup-input\">\n                            <label>Merek & Tipe HP<\/label>\n                            <label for=\"merek-hp\" class=\"form-label\">Pilih Merek HP<\/label>\n\t\t\t\t\t\t\t<select id=\"merek-hp\" name=\"merek_hp\" required class=\"input-bersih\">\n                                <option value=\"\" disabled selected>Pilih Merek...<\/option>\n                                <option value=\"Samsung\">Samsung<\/option>\n                                <option value=\"iPhone\">Apple iPhone<\/option>\n                                <option value=\"Xiaomi\/Poco\">Xiaomi \/ Poco<\/option>\n                                <option value=\"Oppo\">Oppo<\/option>\n                                <option value=\"Vivo\">Vivo<\/option>\n                                <option value=\"Lainnya\">Lainnya<\/option>\n                            <\/select>\n                        <\/div>\n\n                        <div class=\"grup-input\">\n                            <label>Gejala Utama<\/label>\n                            <label for=\"kerusakan-hp\" class=\"form-label\">Pilih Jenis Kerusakan<\/label>\n\t\t\t\t\t\t\t<select id=\"kerusakan-hp\" name=\"kerusakan_hp\" required class=\"input-bersih\">\n                                <option value=\"\" disabled selected>Pilih Kerusakan...<\/option>\n                                <option value=\"Layar Pecah\/Bergaris\">Layar Pecah \/ Bergaris<\/option>\n                                <option value=\"Baterai Drop\/Kembung\">Baterai Drop \/ Kembung<\/option>\n                                <option value=\"Mati Total\/Mentok Logo\">Mati Total \/ Mentok Logo<\/option>\n                                <option value=\"Kena Air\">Masuk Air<\/option>\n                                <option value=\"Sinyal Hilang\">Sinyal Hilang \/ IC<\/option>\n                            <\/select>\n                        <\/div>\n\n                        <div class=\"form-full-width\" style=\"margin-top: 0.5rem;\">\n                            <button type=\"submit\" class=\"btn-whatsapp\">\n                                <i data-lucide=\"message-circle\" style=\"width: 20px; height: 20px;\"><\/i>\n                                Kirim Tiket ke WhatsApp\n                            <\/button>\n                        <\/div>\n                    <\/form>\n\n                <\/div>\n            <\/div>\n            <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const formCepat = document.getElementById('form-cepat');\n            if (formCepat) {\n                formCepat.addEventListener('submit', function(e) {\n                    e.preventDefault();\n                    const merek = document.getElementById('merek-hp').value;\n                    const rusak = document.getElementById('kerusakan-hp').value;\n                    const waBaseUrl = \"https:\/\/wa.me\/62882007791887\";\n                    const pesan = `Halo Djoeragan Servis,\\n\\nSaya butuh konsultasi cepat.\\n\\n*Merek\/Tipe:* ${merek}\\n*Gejala Kerusakan:* ${rusak}\\n\\nApakah bisa dibantu estimasi biaya dan waktu pengerjaannya?`;\n                    const separator = waBaseUrl.includes('?') ? '&' : '?';\n                    window.open(`${waBaseUrl}${separator}text=${encodeURIComponent(pesan)}`, '_blank');\n                });\n            }\n        });\n    <\/script>\n        <\/div>\n        \n         <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f61d07 elementor-widget elementor-widget-html\" data-id=\"9f61d07\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n<style>\r\n    \/* =========================================\r\n       BENTENG CSS SUPER (Anti-Elementor Override)\r\n       ========================================= *\/\r\n    #jm-tentang-kami {\r\n        padding: 5rem 1rem !important;\r\n        background-color: #ffffff !important;\r\n        box-sizing: border-box !important;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    #jm-tentang-kami * {\r\n        box-sizing: border-box !important;\r\n        font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;\r\n    }\r\n\r\n    .jm-container {\r\n        max-width: 1200px !important;\r\n        margin: 0 auto !important;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* HEADER SECTION (PAKSA GELAP) *\/\r\n    .jm-sec-header {\r\n        text-align: center !important;\r\n        max-width: 700px !important;\r\n        margin: 0 auto 3rem auto !important;\r\n    }\r\n    #jm-tentang-kami h2.jm-sec-title {\r\n        font-size: 2rem !important;\r\n        font-weight: 700 !important;\r\n        color: #0f172a !important; \/* Paksa Hitam Kebiruan! *\/\r\n        margin: 0 0 1rem 0 !important;\r\n        line-height: 1.2 !important;\r\n    }\r\n    #jm-tentang-kami p.jm-sec-subtitle {\r\n        color: #475569 !important; \/* Paksa Abu-abu Gelap! *\/\r\n        font-size: 1.125rem !important;\r\n        line-height: 1.6 !important;\r\n        margin: 0 !important;\r\n    }\r\n\r\n    \/* BANNER LABORATORIUM *\/\r\n    .jm-banner-wrap {\r\n        position: relative !important;\r\n        width: 100% !important;\r\n        height: 350px !important;\r\n        border-radius: 1.5rem !important;\r\n        overflow: hidden !important;\r\n        margin-bottom: 4rem !important;\r\n        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;\r\n        display: block !important;\r\n    }\r\n    @media (min-width: 768px) { .jm-banner-wrap { height: 450px !important; } }\r\n    \r\n    .jm-banner-img {\r\n        position: absolute !important;\r\n        top: 0 !important; left: 0 !important;\r\n        width: 100% !important; height: 100% !important;\r\n        object-fit: cover !important;\r\n        z-index: 1 !important;\r\n        transition: transform 0.7s ease !important;\r\n    }\r\n    .jm-banner-wrap:hover .jm-banner-img { transform: scale(1.05) !important; }\r\n    \r\n    .jm-banner-overlay {\r\n        position: absolute !important;\r\n        inset: 0 !important;\r\n        background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.4) 50%, transparent 100%) !important;\r\n        z-index: 2 !important;\r\n        display: flex !important;\r\n        align-items: flex-end !important;\r\n        padding: 2rem !important;\r\n    }\r\n    @media (min-width: 768px) { .jm-banner-overlay { padding: 3rem !important; } }\r\n    \r\n    .jm-badge {\r\n        background-color: #9333ea !important;\r\n        color: #ffffff !important;\r\n        padding: 0.35rem 1rem !important;\r\n        border-radius: 50px !important;\r\n        font-size: 0.75rem !important;\r\n        font-weight: 700 !important;\r\n        text-transform: uppercase !important;\r\n        letter-spacing: 1px !important;\r\n        margin-bottom: 1rem !important;\r\n        display: inline-block !important;\r\n        border: none !important;\r\n    }\r\n    \/* Teks Banner Tetap Putih karena backgroundnya gelap *\/\r\n    #jm-tentang-kami h3.jm-banner-title {\r\n        color: #ffffff !important;\r\n        font-size: 1.5rem !important;\r\n        font-weight: 700 !important;\r\n        margin: 0 0 0.5rem 0 !important;\r\n        line-height: 1.3 !important;\r\n    }\r\n    @media (min-width: 768px) { #jm-tentang-kami h3.jm-banner-title { font-size: 2rem !important; } }\r\n    \r\n    #jm-tentang-kami p.jm-banner-text {\r\n        color: #cbd5e1 !important;\r\n        font-size: 0.95rem !important;\r\n        line-height: 1.6 !important;\r\n        margin: 0 !important;\r\n        max-width: 600px !important;\r\n    }\r\n\r\n    \/* GRID KARTU FITUR *\/\r\n    .jm-grid {\r\n        display: grid !important;\r\n        grid-template-columns: 1fr !important;\r\n        gap: 2rem !important;\r\n        width: 100% !important;\r\n    }\r\n    @media (min-width: 768px) { .jm-grid { grid-template-columns: repeat(3, 1fr) !important; } }\r\n\r\n    .jm-card {\r\n        background-color: #f8fafc !important;\r\n        padding: 2rem !important;\r\n        border-radius: 1.5rem !important;\r\n        border: 1px solid #f1f5f9 !important;\r\n        transition: all 0.3s ease !important;\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        align-items: flex-start !important;\r\n        justify-content: flex-start !important;\r\n    }\r\n    .jm-card:hover {\r\n        background-color: #ffffff !important;\r\n        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important;\r\n        border-color: #e2e8f0 !important;\r\n        transform: translateY(-5px) !important;\r\n    }\r\n    \r\n    .jm-icon-box {\r\n        width: 3.5rem !important;\r\n        height: 3.5rem !important;\r\n        border-radius: 1rem !important;\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        margin-bottom: 1.5rem !important;\r\n        flex-shrink: 0 !important;\r\n        transition: transform 0.3s ease !important;\r\n    }\r\n    .jm-card:hover .jm-icon-box { transform: scale(1.1) !important; }\r\n    \r\n    .jm-icon-ungu { background-color: #f3e8ff !important; color: #9333ea !important; }\r\n    .jm-icon-hijau { background-color: #dcfce7 !important; color: #16a34a !important; }\r\n    .jm-icon-biru { background-color: #e0f2fe !important; color: #0284c7 !important; }\r\n    \r\n    \/* TEKS KARTU (PAKSA GELAP) *\/\r\n    #jm-tentang-kami h3.jm-card-title {\r\n        font-size: 1.25rem !important;\r\n        font-weight: 700 !important;\r\n        color: #0f172a !important; \/* Paksa Hitam Kebiruan! *\/\r\n        margin: 0 0 0.75rem 0 !important;\r\n    }\r\n    #jm-tentang-kami p.jm-card-text {\r\n        color: #475569 !important; \/* Paksa Abu-abu Gelap! *\/\r\n        font-size: 1rem !important;\r\n        line-height: 1.6 !important;\r\n        margin: 0 !important;\r\n    }\r\n\r\n    \/* ANIMASI *\/\r\n    .muncul-perlahan {\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n        transition: all 1s ease-out;\r\n    }\r\n    .muncul-perlahan.terlihat {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n<\/style>\r\n\r\n<div id=\"jm-tentang-kami\">\r\n    <div class=\"jm-container\">\r\n        \r\n        <div class=\"jm-sec-header muncul-perlahan\">\r\n            <h2 class=\"jm-sec-title\">Kenapa Memilih Layanan Kami?<\/h2>\r\n            <p class=\"jm-sec-subtitle\">Kami menghancurkan stigma servis jalanan dengan SOP ketat, peralatan modern, dan transparansi absolut.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"jm-banner-wrap muncul-perlahan\" style=\"transition-delay: 100ms;\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=1200\" alt=\"Laboratorium Servis HP\" class=\"jm-banner-img\">\r\n            \r\n            <div class=\"jm-banner-overlay\">\r\n                <div style=\"position: relative; z-index: 3;\">\r\n                    <span class=\"jm-badge\">Transparansi Visual<\/span>\r\n                    <h3 class=\"jm-banner-title\">Laboratorium Perbaikan Berstandar Pabrik<\/h3>\r\n                    <p class=\"jm-banner-text\">Dilengkapi mikroskop digital, stasiun pengerjaan ulang SMD, dan meja kerja anti-statis untuk menjamin presisi perbaikan gawai Anda.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"jm-grid\">\r\n            \r\n            <div class=\"jm-card muncul-perlahan\" style=\"transition-delay: 100ms;\">\r\n                <div class=\"jm-icon-box jm-icon-ungu\">\r\n                    <i data-lucide=\"lock\" style=\"width: 28px; height: 28px; stroke-width: 2.5;\"><\/i>\r\n                <\/div>\r\n                <h3 class=\"jm-card-title\">Privasi Data 100% Aman<\/h3>\r\n                <p class=\"jm-card-text\">Kami tidak meminta Passcode Anda kecuali wajib untuk tes akhir. Tidak ada penyalinan data saat ganti layar atau baterai.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"jm-card muncul-perlahan\" style=\"transition-delay: 200ms;\">\r\n                <div class=\"jm-icon-box jm-icon-hijau\">\r\n                    <i data-lucide=\"shield-check\" style=\"width: 28px; height: 28px; stroke-width: 2.5;\"><\/i>\r\n                <\/div>\r\n                <h3 class=\"jm-card-title\">Garansi Layanan Nyata<\/h3>\r\n                <p class=\"jm-card-text\">Garansi 30 Hari untuk penggantian LCD dan 90 Hari untuk baterai. Kami menggeser risiko dari Anda kepada kami.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"jm-card muncul-perlahan\" style=\"transition-delay: 300ms;\">\r\n                <div class=\"jm-icon-box jm-icon-biru\">\r\n                    <i data-lucide=\"smartphone\" style=\"width: 28px; height: 28px; stroke-width: 2.5;\"><\/i>\r\n                <\/div>\r\n                <h3 class=\"jm-card-title\">Suku Cadang Grade-A<\/h3>\r\n                <p class=\"jm-card-text\">Kami hanya menggunakan komponen presisi. Anda dapat melihat wujud komponen dan meja kerja kami secara transparan.<\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        if (typeof lucide !== 'undefined') lucide.createIcons();\r\n\r\n        const observerAbout = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('terlihat');\r\n                    obs.unobserve(entry.target);\r\n                }\r\n            });\r\n        }, { rootMargin: '0px 0px -50px 0px', threshold: 0.1 });\r\n\r\n        document.querySelectorAll('#jm-tentang-kami .muncul-perlahan').forEach(el => observerAbout.observe(el));\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-200f749 elementor-widget elementor-widget-shortcode\" data-id=\"200f749\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n   \n    <style>\n        \/* =========================================\n           1. BENTENG CSS & RESET (Dark Theme)\n           ========================================= *\/\n        #jm-layanan-area {\n            position: relative !important;\n            background-color: #0f172a !important; \/* Slate 900 *\/\n            color: #ffffff !important;\n            padding: 6rem 1rem !important;\n            overflow: hidden !important;\n            box-sizing: border-box !important;\n            width: 100% !important;\n        }\n        #jm-layanan-area * {\n            box-sizing: border-box !important;\n            font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;\n            margin: 0; padding: 0;\n        }\n        #jm-layanan-area a, #jm-layanan-area button {\n            text-decoration: none !important;\n            outline: none !important;\n            border: none !important;\n            background: transparent;\n            cursor: pointer;\n        }\n\n        \/* Pola Grid Background Gelap *\/\n        .jm-layanan-grid-bg {\n            position: absolute !important;\n            top: 0; left: 0; right: 0; bottom: 0;\n            z-index: 0 !important;\n            background-image: \n                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important;\n            background-size: 40px 40px !important;\n            -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%) !important;\n            mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%) !important;\n            pointer-events: none !important;\n        }\n\n        .jm-container-layanan {\n            max-width: 1200px !important;\n            margin: 0 auto !important;\n            position: relative !important;\n            z-index: 10 !important;\n        }\n\n        \/* =========================================\n           2. HEADER LAYANAN\n           ========================================= *\/\n        .jm-layanan-header { margin-bottom: 4rem !important; }\n        .jm-layanan-badge {\n            color: #c084fc !important;\n            font-weight: 600 !important;\n            text-transform: uppercase !important;\n            letter-spacing: 0.05em !important;\n            font-size: 0.875rem !important;\n            display: block !important;\n            margin-bottom: 0.5rem !important;\n        }\n        .jm-layanan-title {\n            font-size: 2.25rem !important;\n            font-weight: 800 !important;\n            color: #ffffff !important;\n            margin-bottom: 1rem !important;\n            line-height: 1.2 !important;\n        }\n        @media (min-width: 768px) { .jm-layanan-title { font-size: 3rem !important; } }\n        .jm-layanan-desc {\n            color: #94a3b8 !important;\n            font-size: 1.125rem !important;\n            max-width: 700px !important;\n            line-height: 1.6 !important;\n        }\n\n        \/* =========================================\n           3. GRID & KARTU LAYANAN\n           ========================================= *\/\n        .jm-grid-layanan {\n            display: grid !important;\n            grid-template-columns: 1fr !important;\n            gap: 1.5rem !important;\n        }\n        @media (min-width: 768px) { .jm-grid-layanan { grid-template-columns: repeat(2, 1fr) !important; } }\n\n        .jm-card-layanan {\n            background-color: #1e293b !important; \/* Slate 800 *\/\n            border: 1px solid #334155 !important; \/* Slate 700 *\/\n            border-radius: 1.5rem !important;\n            padding: 2rem !important;\n            display: flex !important;\n            flex-direction: column !important;\n            transition: all 0.3s ease !important;\n        }\n\n        \/* =========================================\n           4. TEMA WARNA DINAMIS (Dari ACF)\n           ========================================= *\/\n        \/* TEMA UNGU *\/\n        .jm-card-layanan.tema-ungu { border-color: #334155 !important; }\n        .jm-card-layanan.tema-ungu:hover { border-color: #a855f7 !important; }\n        .tema-ungu .jm-icon-layanan { background-color: #334155 !important; color: #c084fc !important; }\n        .jm-card-layanan.tema-ungu:hover .jm-icon-layanan { background-color: #9333ea !important; color: #ffffff !important; }\n        .tema-ungu .jm-check-icon { color: #c084fc !important; }\n        .tema-ungu .jm-btn-konsul { color: #c084fc !important; }\n\n        \/* TEMA HIJAU *\/\n        .jm-card-layanan.tema-hijau { border-color: #334155 !important; }\n        .jm-card-layanan.tema-hijau:hover { border-color: #22c55e !important; }\n        .tema-hijau .jm-icon-layanan { background-color: #334155 !important; color: #4ade80 !important; }\n        .jm-card-layanan.tema-hijau:hover .jm-icon-layanan { background-color: #16a34a !important; color: #ffffff !important; }\n        .tema-hijau .jm-check-icon { color: #4ade80 !important; }\n        .tema-hijau .jm-btn-konsul { color: #4ade80 !important; }\n\n        \/* TEMA BIRU *\/\n        .jm-card-layanan.tema-biru { border-color: #334155 !important; }\n        .jm-card-layanan.tema-biru:hover { border-color: #0ea5e9 !important; }\n        .tema-biru .jm-icon-layanan { background-color: #334155 !important; color: #38bdf8 !important; }\n        .jm-card-layanan.tema-biru:hover .jm-icon-layanan { background-color: #0284c7 !important; color: #ffffff !important; }\n        .tema-biru .jm-check-icon { color: #38bdf8 !important; }\n        .tema-biru .jm-btn-konsul { color: #38bdf8 !important; }\n\n        \/* =========================================\n           5. ELEMEN DI DALAM KARTU\n           ========================================= *\/\n        .jm-icon-layanan {\n            width: 3rem !important; height: 3rem !important;\n            border-radius: 0.75rem !important;\n            display: flex !important; align-items: center !important; justify-content: center !important;\n            margin-bottom: 1rem !important;\n            transition: all 0.3s ease !important;\n        }\n        \/* Pastikan SVG tidak gepeng\/hilang *\/\n        .jm-icon-layanan svg {\n            width: 24px !important;\n            height: 24px !important;\n            stroke-width: 2 !important;\n        }\n\n        .jm-card-title {\n            font-size: 1.5rem !important; font-weight: 700 !important;\n            color: #ffffff !important; margin-bottom: 0.5rem !important;\n        }\n        .jm-card-gejala {\n            color: #94a3b8 !important; font-size: 0.95rem !important;\n            margin-bottom: 1.5rem !important; line-height: 1.6 !important;\n        }\n        .jm-list-poin {\n            list-style: none !important; margin-bottom: 2rem !important; padding-left: 0 !important;\n        }\n        .jm-list-poin li {\n            display: flex !important; align-items: flex-start !important; gap: 0.5rem !important;\n            color: #cbd5e1 !important; font-size: 0.875rem !important;\n            margin-bottom: 0.75rem !important; line-height: 1.4 !important;\n        }\n        .jm-card-footer {\n            margin-top: auto !important;\n            padding-top: 1.5rem !important;\n            border-top: 1px solid #334155 !important;\n            display: flex !important; justify-content: space-between !important; align-items: center !important;\n        }\n        .jm-harga-label {\n            color: #94a3b8 !important; font-size: 0.875rem !important;\n        }\n        .jm-harga-label strong {\n            color: #ffffff !important; font-size: 1.125rem !important; font-weight: 700 !important;\n        }\n        .jm-btn-konsul {\n            font-weight: 600 !important; font-size: 0.95rem !important;\n            display: flex !important; align-items: center !important; gap: 0.25rem !important;\n            transition: transform 0.3s ease !important;\n        }\n        .jm-card-layanan:hover .jm-btn-konsul { transform: translateX(5px) !important; }\n\n        \/* Animasi Muncul *\/\n        .muncul-bawah {\n            opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out;\n        }\n        .muncul-bawah.terlihat { opacity: 1; transform: translateY(0); }\n    <\/style>\n\n    <div id=\"jm-layanan-area\">\n        <div class=\"jm-layanan-grid-bg\"><\/div>\n        \n        <div class=\"jm-container-layanan\">\n            \n            <div class=\"jm-layanan-header muncul-bawah\">\n                <span class=\"jm-layanan-badge\">Spesialisasi Kami<\/span>\n                <h2 class=\"jm-layanan-title\">Solusi Untuk Setiap Kerusakan<\/h2>\n                <p class=\"jm-layanan-desc\">Dari penggantian layar sederhana hingga pelacakan korsleting mikroskopis di mesin. Kami tangani dengan alat standar pabrik.<\/p>\n            <\/div>\n\n            <div class=\"jm-grid-layanan\">\n                \n                        <div class=\"jm-card-layanan tema-hijau muncul-bawah\" style=\"transition-delay: 100ms;\">\n                            \n                            <div class=\"jm-icon-layanan\">\n                                <i data-lucide=\"battery-warning\"><\/i>\n                            <\/div>\n                            \n                            <h3 class=\"jm-card-title\">Ganti Baterai &#038; Daya<\/h3>\n                            <p class=\"jm-card-gejala\">Deskripsi layanan belum ditambahkan.<\/p>\n                            \n                            <ul class=\"jm-list-poin\">\n                                                                                                            <li>\n                                            <i data-lucide=\"check-circle-2\" class=\"jm-check-icon\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\"><\/i> \n                                            <span>Baterai baru 0 Cycle Count<\/span>\n                                        <\/li>\n                                                                            <li>\n                                            <i data-lucide=\"check-circle-2\" class=\"jm-check-icon\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\"><\/i> \n                                            <span>Opsi pindah IC BMS (Khusus iPhone)<\/span>\n                                        <\/li>\n                                                                            <li>\n                                            <i data-lucide=\"check-circle-2\" class=\"jm-check-icon\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\"><\/i> \n                                            <span>Pengerjaan cepat, bisa ditunggu<\/span>\n                                        <\/li>\n                                                                                                <\/ul>\n\n                            <div class=\"jm-card-footer\">\n                                <span class=\"jm-harga-label\">\n                                    Mulai <strong>Rp 100.000<\/strong>                                <\/span>\n                                <a href=\"https:\/\/demo.djoeraganwebsite.com\/hp\/layanan\/ganti-baterai-daya\/\" class=\"jm-btn-konsul\">\n                                    Detail Layanan <i data-lucide=\"arrow-right\" style=\"width: 16px; height: 16px;\"><\/i>\n                                <\/a>\n                            <\/div>\n\n                        <\/div>\n\n                        \n                        <div class=\"jm-card-layanan tema-ungu muncul-bawah\" style=\"transition-delay: 200ms;\">\n                            \n                            <div class=\"jm-icon-layanan\">\n                                <i data-lucide=\"zap\"><\/i>\n                            <\/div>\n                            \n                            <h3 class=\"jm-card-title\">Ganti Konektor Charger<\/h3>\n                            <p class=\"jm-card-gejala\">Deskripsi layanan belum ditambahkan.<\/p>\n                            \n                            <ul class=\"jm-list-poin\">\n                                                                                                            <li>\n                                            <i data-lucide=\"check-circle-2\" class=\"jm-check-icon\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\"><\/i> \n                                            <span>Ganti papan bawah (Sub-board) original<\/span>\n                                        <\/li>\n                                                                            <li>\n                                            <i data-lucide=\"check-circle-2\" class=\"jm-check-icon\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\"><\/i> \n                                            <span>Fitur Fast Charging dijamin tetap aktif<\/span>\n                                        <\/li>\n                                                                            <li>\n                                            <i data-lucide=\"check-circle-2\" class=\"jm-check-icon\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\"><\/i> \n                                            <span>Pembersihan port menyeluruh<\/span>\n                                        <\/li>\n                                                                                                <\/ul>\n\n                            <div class=\"jm-card-footer\">\n                                <span class=\"jm-harga-label\">\n                                    Mulai <strong>Rp 75.000<\/strong>                                <\/span>\n                                <a href=\"https:\/\/demo.djoeraganwebsite.com\/hp\/layanan\/ganti-konektor-charger\/\" class=\"jm-btn-konsul\">\n                                    Detail Layanan <i data-lucide=\"arrow-right\" style=\"width: 16px; height: 16px;\"><\/i>\n                                <\/a>\n                            <\/div>\n\n                        <\/div>\n\n                                    <\/div>\n        <\/div>\n    <\/div>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bfc3502 elementor-widget elementor-widget-shortcode\" data-id=\"bfc3502\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n    <style>\n        \/* Base Reset *\/\n        #portofolio-wrap { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; background-color: #f8fafc; color: #0f172a; padding: 5rem 0; }\n        #portofolio-wrap * { box-sizing: border-box; }\n\n        \/* Animasi Scroll *\/\n        #portofolio-wrap .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; }\n        #portofolio-wrap .reveal.visible { opacity: 1; transform: translateY(0); }\n\n        \/* Layout *\/\n        #portofolio-wrap .container-box { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }\n        @media (min-width: 640px) { #portofolio-wrap .container-box { padding: 0 1.5rem; } }\n        @media (min-width: 1024px) { #portofolio-wrap .container-box { padding: 0 2rem; } }\n        \n        #portofolio-wrap .text-center { text-align: center; }\n        #portofolio-wrap .mx-auto { margin-left: auto; margin-right: auto; }\n        #portofolio-wrap .max-w-2xl { max-width: 42rem; }\n        #portofolio-wrap .mb-12 { margin-bottom: 3rem; }\n        #portofolio-wrap .mt-12 { margin-top: 3rem; }\n\n        \/* Header *\/\n        #portofolio-wrap .tagline { display: block; color: #9333ea; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }\n        #portofolio-wrap .section-title { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a; }\n        #portofolio-wrap .section-desc { color: #475569; line-height: 1.5; margin: 0; }\n\n        \/* Grid *\/\n        #portofolio-wrap .grid-portfolio { display: grid; gap: 2rem; }\n        @media (min-width: 768px) { #portofolio-wrap .grid-portfolio { grid-template-columns: repeat(2, 1fr); } }\n        @media (min-width: 1024px) { #portofolio-wrap .grid-portfolio { grid-template-columns: repeat(3, 1fr); } }\n\n        \/* Card *\/\n        #portofolio-wrap .card { background-color: #ffffff; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border: 1px solid #f1f5f9; display: flex; flex-direction: column; transition: all 0.3s ease; }\n        #portofolio-wrap .card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); }\n\n        #portofolio-wrap .card-img-wrap { position: relative; height: 14rem; overflow: hidden; background-color: #e2e8f0; }\n        #portofolio-wrap .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }\n        #portofolio-wrap .card:hover .card-img { transform: scale(1.05); }\n\n        #portofolio-wrap .badge-time { position: absolute; top: 1rem; right: 1rem; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 0.375rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\n\n        \/* Card Body *\/\n        #portofolio-wrap .card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }\n        #portofolio-wrap .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }\n\n        \/* Tags *\/\n        #portofolio-wrap .tag { padding: 0.25rem 0.625rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }\n        #portofolio-wrap .tag-purple { color: #9333ea; background-color: #faf5ff; }\n        #portofolio-wrap .tag-sky { color: #0284c7; background-color: #f0f9ff; }\n        #portofolio-wrap .tag-teal { color: #0d9488; background-color: #f0fdfa; }\n\n        \/* Icons *\/\n        #portofolio-wrap .icon-purple { color: #9333ea; width: 0.875rem; height: 0.875rem; }\n        #portofolio-wrap .icon-sky { color: #0284c7; width: 0.875rem; height: 0.875rem; }\n        #portofolio-wrap .icon-teal { color: #0d9488; width: 0.875rem; height: 0.875rem; }\n        #portofolio-wrap .icon-gray { color: #64748b; width: 0.875rem; height: 0.875rem; }\n\n        #portofolio-wrap .device-info { font-size: 0.75rem; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 0.25rem; }\n        #portofolio-wrap .card-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem 0; line-height: 1.4; }\n        \n        \/* Deskripsi dibatasi ketat maksimal 2 baris *\/\n        #portofolio-wrap .card-desc { color: #475569; font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n\n        \/* Footer *\/\n        #portofolio-wrap .card-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }\n        #portofolio-wrap .status-text { font-size: 0.875rem; font-weight: 600; color: #1e293b; }\n        #portofolio-wrap .text-success { color: #16a34a; }\n\n        #portofolio-wrap .btn-link { font-size: 0.875rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 0.25rem; transition: color 0.2s; box-shadow: none; }\n        #portofolio-wrap .btn-link i { width: 1rem; height: 1rem; transition: transform 0.2s; }\n        #portofolio-wrap .card:hover .btn-link i { transform: translateX(4px); }\n        #portofolio-wrap .btn-link-purple { color: #9333ea; } #portofolio-wrap .btn-link-purple:hover { color: #7e22ce; }\n        #portofolio-wrap .btn-link-sky { color: #0284c7; } #portofolio-wrap .btn-link-sky:hover { color: #0369a1; }\n        #portofolio-wrap .btn-link-teal { color: #0d9488; } #portofolio-wrap .btn-link-teal:hover { color: #0f766e; }\n\n        \/* CTA *\/\n        #portofolio-wrap .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #0f172a; color: #ffffff; padding: 0.875rem 2rem; border-radius: 9999px; font-weight: 700; text-decoration: none; transition: background-color 0.2s; border: none; cursor: pointer; }\n        #portofolio-wrap .btn-primary:hover { background-color: #1e293b; color: #ffffff; }\n        #portofolio-wrap .btn-primary i { width: 1.25rem; height: 1.25rem; }\n    <\/style>\n\n    <div id=\"portofolio-wrap\">\n        <div class=\"container-box\">\n            \n            <div class=\"text-center mx-auto max-w-2xl mb-12 reveal\">\n                <span class=\"tagline\">Bukti Pengerjaan<\/span>\n                <h2 class=\"section-title\">Portofolio Servis Kami<\/h2>\n                <p class=\"section-desc\">Lihat langsung hasil perbaikan dari berbagai kasus kerusakan gawai pelanggan kami di Bondowoso.<\/p>\n            <\/div>\n\n            <div class=\"grid-portfolio\">\n                \n                \n                        <div class=\"card reveal\" >\n                            <div class=\"card-img-wrap\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-content\/uploads\/sites\/22\/2026\/03\/image-JQFJA6R.webp\" alt=\"Restart Stuck Logo\" class=\"card-img\">\n                                \n                                                                    <div class=\"badge-time\">\n                                        <i data-lucide=\"clock\" class=\"icon-purple\"><\/i> 7 Hari                                    <\/div>\n                                                            <\/div>\n                            \n                            <div class=\"card-body\">\n                                <div class=\"card-header\">\n                                    <span class=\"tag tag-purple\">Servis HP<\/span>\n                                                                            <span class=\"device-info\"><i data-lucide=\"smartphone\" class=\"icon-gray\"><\/i> Xiaomi 15<\/span>\n                                                                    <\/div>\n                                \n                                <h3 class=\"card-title\">Restart Stuck Logo<\/h3>\n                                \n                                <p class=\"card-desc\">Tiba tiba restart dan selalu mentok di logo<\/p>\n                                \n                                <div class=\"card-footer\">\n                                                                            <span class=\"status-text\">Status: <span class=\"text-success\">Sukses 100%<\/span><\/span>\n                                                                        <a href=\"https:\/\/demo.djoeraganwebsite.com\/hp\/portfolio\/restart-stuck-logo\/\" class=\"btn-link btn-link-purple\">Lihat Detail <i data-lucide=\"arrow-right\"><\/i><\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                \n                        <div class=\"card reveal\" style=\"transition-delay: 150ms;\">\n                            <div class=\"card-img-wrap\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-content\/uploads\/sites\/22\/2026\/03\/computer-and-phone-repairment-service-1.webp\" alt=\"HP Mati Total\" class=\"card-img\">\n                                \n                                                                    <div class=\"badge-time\">\n                                        <i data-lucide=\"clock\" class=\"icon-sky\"><\/i> 7 Hari                                    <\/div>\n                                                            <\/div>\n                            \n                            <div class=\"card-body\">\n                                <div class=\"card-header\">\n                                    <span class=\"tag tag-sky\">Servis HP<\/span>\n                                                                            <span class=\"device-info\"><i data-lucide=\"smartphone\" class=\"icon-gray\"><\/i> Iphone 13 Pro<\/span>\n                                                                    <\/div>\n                                \n                                <h3 class=\"card-title\">HP Mati Total<\/h3>\n                                \n                                <p class=\"card-desc\">HP kecemplung kedalam kolam dan tidak bisa dinyalakan<\/p>\n                                \n                                <div class=\"card-footer\">\n                                                                            <span class=\"status-text\">Status: <span class=\"text-success\">Sukses 100%<\/span><\/span>\n                                                                        <a href=\"https:\/\/demo.djoeraganwebsite.com\/hp\/portfolio\/hp-mati-total\/\" class=\"btn-link btn-link-sky\">Lihat Detail <i data-lucide=\"arrow-right\"><\/i><\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                \n                        <div class=\"card reveal\" style=\"transition-delay: 300ms;\">\n                            <div class=\"card-img-wrap\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-content\/uploads\/sites\/22\/2026\/03\/image-JQFJA6R.webp\" alt=\"Gantil LCD Iphone\" class=\"card-img\">\n                                \n                                                                    <div class=\"badge-time\">\n                                        <i data-lucide=\"clock\" class=\"icon-teal\"><\/i> 3 Hari                                    <\/div>\n                                                            <\/div>\n                            \n                            <div class=\"card-body\">\n                                <div class=\"card-header\">\n                                    <span class=\"tag tag-teal\">Servis HP<\/span>\n                                                                            <span class=\"device-info\"><i data-lucide=\"smartphone\" class=\"icon-gray\"><\/i> Iphone 17 Pro Max<\/span>\n                                                                    <\/div>\n                                \n                                <h3 class=\"card-title\">Gantil LCD Iphone<\/h3>\n                                \n                                <p class=\"card-desc\">LCD tiba tiba berubah menjadi hijau dan tidak bisa dipakai<\/p>\n                                \n                                <div class=\"card-footer\">\n                                                                            <span class=\"status-text\">Status: <span class=\"text-success\">Sukses 100%<\/span><\/span>\n                                                                        <a href=\"https:\/\/demo.djoeraganwebsite.com\/hp\/portfolio\/gantil-lcd-iphone\/\" class=\"btn-link btn-link-teal\">Lihat Detail <i data-lucide=\"arrow-right\"><\/i><\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                \n            <\/div>\n            \n            <div class=\"mt-12 text-center reveal\">\n                <a href=\"https:\/\/demo.djoeraganwebsite.com\/hp\/portfolio\/\" class=\"btn-primary\">\n                    Lihat Semua Portofolio <i data-lucide=\"arrow-right\"><\/i>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bf41bc elementor-widget elementor-widget-shortcode\" data-id=\"4bf41bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n        <style>\n        \/* =========================================\n           1. BENTENG CSS (Anti-Elementor Override)\n           ========================================= *\/\n        #jm-testi-area {\n            position: relative !important;\n            background-color: #ffffff !important; \n            padding: 5rem 1rem !important;\n            box-sizing: border-box !important;\n            width: 100% !important;\n            font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;\n        }\n        #jm-testi-area * {\n            box-sizing: border-box !important;\n            margin: 0; padding: 0;\n        }\n\n        .jm-testi-container {\n            max-width: 1200px !important;\n            margin: 0 auto !important;\n            width: 100% !important;\n        }\n\n        \/* HEADER SECTION *\/\n        .jm-testi-header {\n            display: flex !important;\n            flex-direction: column !important;\n            justify-content: space-between !important;\n            align-items: flex-start !important;\n            margin-bottom: 3rem !important;\n            gap: 1.5rem !important;\n        }\n        @media (min-width: 768px) {\n            .jm-testi-header {\n                flex-direction: row !important;\n                align-items: flex-end !important;\n            }\n        }\n        .jm-testi-title-wrap {\n            max-width: 600px !important;\n        }\n        .jm-testi-title {\n            font-size: 2rem !important;\n            font-weight: 700 !important;\n            color: #0f172a !important; \n            margin-bottom: 1rem !important;\n            line-height: 1.2 !important;\n        }\n        .jm-testi-desc {\n            color: #475569 !important; \n            font-size: 1.125rem !important;\n            line-height: 1.6 !important;\n        }\n\n        \/* GRID & KARTU TESTIMONIAL *\/\n        .jm-testi-grid {\n            display: grid !important;\n            grid-template-columns: 1fr !important;\n            gap: 1.5rem !important;\n            width: 100% !important;\n        }\n        @media (min-width: 768px) {\n            .jm-testi-grid { grid-template-columns: repeat(3, 1fr) !important; }\n        }\n\n        .jm-testi-card {\n            background-color: #f8fafc !important; \n            border: 1px solid #f1f5f9 !important; \n            padding: 2rem !important;\n            border-radius: 1.5rem !important;\n            display: flex !important;\n            flex-direction: column !important;\n            transition: all 0.3s ease !important;\n        }\n        .jm-testi-card:hover {\n            background-color: #ffffff !important;\n            border-color: #e2e8f0 !important;\n            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05) !important;\n            transform: translateY(-3px) !important;\n        }\n\n        \/* BINTANG STATIS *\/\n        .jm-stars {\n            display: flex !important;\n            gap: 0.25rem !important;\n            color: #facc15 !important;\n            margin-bottom: 1rem !important;\n        }\n        .jm-stars svg {\n            fill: #facc15 !important;\n            stroke: #facc15 !important;\n            width: 20px !important;\n            height: 20px !important;\n        }\n\n        \/* KONTEN TEKS *\/\n        .jm-testi-quote {\n            color: #334155 !important; \n            font-weight: 500 !important;\n            font-style: italic !important;\n            font-size: 1rem !important;\n            line-height: 1.6 !important;\n            margin-bottom: 1.5rem !important;\n            flex-grow: 1 !important; \n        }\n\n        \/* PROFIL PELANGGAN *\/\n        .jm-testi-profile {\n            display: flex !important;\n            align-items: center !important;\n            gap: 1rem !important;\n            margin-top: auto !important;\n        }\n        .jm-testi-avatar {\n            width: 3rem !important;\n            height: 3rem !important;\n            background-color: #e2e8f0 !important; \n            color: #475569 !important; \n            border-radius: 50% !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            font-weight: 700 !important;\n            font-size: 1.25rem !important;\n            flex-shrink: 0 !important;\n        }\n        .jm-testi-info h5 {\n            color: #0f172a !important;\n            font-weight: 700 !important;\n            font-size: 0.95rem !important;\n            margin-bottom: 0.25rem !important;\n        }\n        .jm-testi-info p {\n            color: #64748b !important;\n            font-size: 0.8rem !important;\n        }\n\n        \/* Animasi Muncul *\/\n        .muncul-perlahan {\n            opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out;\n        }\n        .muncul-perlahan.terlihat { opacity: 1; transform: translateY(0); }\n\n        \/* Style Error Debugging *\/\n        .jm-debug-box {\n            grid-column: 1 \/ -1;\n            padding: 2rem;\n            background-color: #fff1f2;\n            border: 2px dashed #f43f5e;\n            border-radius: 1rem;\n            color: #9f1239;\n            text-align: center;\n            font-weight: 500;\n        }\n    <\/style>\n\n    <section id=\"jm-testi-area\">\n        <div class=\"jm-testi-container\">\n            \n            <div class=\"jm-testi-header muncul-perlahan\">\n                <div class=\"jm-testi-title-wrap\">\n                    <h2 class=\"jm-testi-title\">Dipercaya oleh Warga Bondowoso<\/h2>\n                    <p class=\"jm-testi-desc\">Kami mengutamakan ulasan nyata dari pelanggan lokal yang telah membuktikan kualitas pengerjaan kami di Badean.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"jm-testi-grid\">\n                \n                        <div class=\"jm-testi-card muncul-perlahan\" style=\"transition-delay: 100ms;\">\n                            <div class=\"jm-stars\">\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                            <\/div>\n                            <p class=\"jm-testi-quote\">\"Panik hp tiba-tiba mentok di logo, untung datanya terselamatkan dan tidak ada yang hilang\"<\/p>\n                            <div class=\"jm-testi-profile\">\n                                <div class=\"jm-testi-avatar\">D<\/div>\n                                <div class=\"jm-testi-info\">\n                                    <h2>Dedi Dudi<\/h2>\n                                    <p>Owner<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        \n                        <div class=\"jm-testi-card muncul-perlahan\" style=\"transition-delay: 250ms;\">\n                            <div class=\"jm-stars\">\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                            <\/div>\n                            <p class=\"jm-testi-quote\">\"Hampir putus asa hp matot datanya enggak bisa balik, untungnya bisa diselamatkan. Layanan terbaik mantap\"<\/p>\n                            <div class=\"jm-testi-profile\">\n                                <div class=\"jm-testi-avatar\">J<\/div>\n                                <div class=\"jm-testi-info\">\n                                    <h2>Jaya Supriyadi<\/h2>\n                                    <p>Aple Fanboy<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        \n                        <div class=\"jm-testi-card muncul-perlahan\" style=\"transition-delay: 400ms;\">\n                            <div class=\"jm-stars\">\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                                <i data-lucide=\"star\"><\/i>\n                            <\/div>\n                            <p class=\"jm-testi-quote\">\"Pengerjaannya cepat, bisa ditunggu enggak sampe satu jam hp saya sudah bisa dipakai lagi. Thank you!\"<\/p>\n                            <div class=\"jm-testi-profile\">\n                                <div class=\"jm-testi-avatar\">S<\/div>\n                                <div class=\"jm-testi-info\">\n                                    <h2>Suprapti<\/h2>\n                                    <p>CEO<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                                    <\/div>\n            \n        <\/div>\n    <\/section>\n\n   <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/main>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kenapa Memilih Layanan Kami? Kami menghancurkan stigma servis jalanan dengan SOP ketat, peralatan modern, dan transparansi absolut. Transparansi Visual Laboratorium Perbaikan Berstandar Pabrik Dilengkapi mikroskop digital, stasiun pengerjaan ulang SMD, dan meja kerja anti-statis untuk menjamin presisi perbaikan gawai Anda. Privasi Data 100% Aman Kami tidak meminta Passcode Anda kecuali wajib untuk tes akhir. Tidak [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":22,"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages\/61\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}