{"id":131,"date":"2026-03-02T17:28:48","date_gmt":"2026-03-02T17:28:48","guid":{"rendered":"https:\/\/demo.djoeraganwebsite.com\/hp\/?page_id=131"},"modified":"2026-03-02T17:32:08","modified_gmt":"2026-03-02T17:32:08","slug":"kontak","status":"publish","type":"page","link":"https:\/\/demo.djoeraganwebsite.com\/hp\/kontak\/","title":{"rendered":"Kontak"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"131\" class=\"elementor elementor-131\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f35fa0f e-con-full e-flex e-con e-parent\" data-id=\"f35fa0f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5257a30 elementor-widget elementor-widget-shortcode\" data-id=\"5257a30\" 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. BASE & ANIMASI\n           ========================================= *\/\n        #jm-contact-page {\n            font-family: 'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;\n            background-color: #f8fafc;\n            color: #0f172a;\n            overflow-x: hidden;\n        }\n        #jm-contact-page .reveal {\n            opacity: 0;\n            transform: translateY(40px);\n            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        #jm-contact-page .reveal.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        \n        .jm-hero-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 80% 80% at 50% 50%, #000 40%, transparent 100%);\n            mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);\n            pointer-events: none;\n        }\n\n        \/* =========================================\n           2. ANTI-OVERRIDE FORM STYLES\n           ========================================= *\/\n        #jm-contact-page .jm-input-wrap {\n            display: flex !important;\n            align-items: center !important;\n            background-color: #f8fafc !important;\n            border: 1px solid #e2e8f0 !important;\n            border-radius: 0.75rem !important;\n            overflow: hidden !important;\n            transition: all 0.2s !important;\n        }\n        #jm-contact-page .jm-input-wrap:focus-within {\n            border-color: #a855f7 !important;\n            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;\n            background-color: #ffffff !important;\n        }\n        #jm-contact-page .jm-input-wrap input {\n            flex-grow: 1 !important;\n            border: none !important;\n            background: transparent !important;\n            padding: 0.75rem 1rem 0.75rem 0.5rem !important;\n            outline: none !important;\n            box-shadow: none !important;\n            color: #0f172a !important;\n            margin: 0 !important;\n            width: 100% !important;\n        }\n        #jm-contact-page textarea.jm-textarea {\n            width: 100% !important;\n            border: 1px solid #e2e8f0 !important;\n            background-color: #f8fafc !important;\n            border-radius: 0.75rem !important;\n            padding: 0.75rem 1rem !important;\n            outline: none !important;\n            box-shadow: none !important;\n            transition: all 0.2s !important;\n            color: #0f172a !important;\n        }\n        #jm-contact-page textarea.jm-textarea:focus {\n            border-color: #a855f7 !important;\n            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;\n            background-color: #ffffff !important;\n        }\n\n        \/* =========================================\n           3. MAP STYLES\n           ========================================= *\/\n        .jm-map-container iframe {\n            width: 100% !important;\n            height: 100% !important;\n            border: none !important;\n            filter: grayscale(100%);\n            transition: filter 0.5s ease;\n        }\n        .jm-map-container:hover iframe {\n            filter: grayscale(0%);\n        }\n    <\/style>\n\n    <div id=\"jm-contact-page\">\n        \n        <header class=\"relative bg-slate-900 pt-28 pb-40 md:pt-36 md:pb-48 lg:pt-40 lg:pb-56 overflow-hidden rounded-b-[2.5rem] md:rounded-b-[4rem]\">\n            <div class=\"jm-hero-bg\"><\/div>\n            <div class=\"absolute inset-0 bg-gradient-to-b from-transparent to-slate-900\/90 z-0\"><\/div>\n\n            <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal\">\n                <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-500\/20 border border-purple-500\/30 text-purple-300 text-sm font-semibold mb-6 backdrop-blur-sm\">\n                    <i data-lucide=\"headset\" class=\"w-4 h-4\"><\/i> Layanan Pelanggan\n                <\/div>\n                \n                <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight mb-6 max-w-4xl mx-auto\">\n                    Kami Siap Membantu <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400\">Kendala Gadget<\/span> Anda\n                <\/h1>\n                \n                <p class=\"text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed\">\n                    Punya pertanyaan seputar estimasi biaya, ketersediaan sparepart, atau ingin konsultasi kerusakan? Jangan ragu untuk menghubungi kami.\n                <\/p>\n            <\/div>\n        <\/header>\n\n        <section class=\"relative z-20 -mt-20 md:-mt-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal\" style=\"transition-delay: 200ms;\">\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6\">\n                \n                <div class=\"bg-white rounded-3xl p-6 shadow-xl shadow-slate-200\/50 border border-slate-100 flex flex-col items-center text-center group hover:-translate-y-1 transition-transform duration-300\">\n                    <div class=\"w-14 h-14 bg-green-50 text-green-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\n                        <i data-lucide=\"phone\" class=\"w-6 h-6\"><\/i>\n                    <\/div>\n                    <h3 class=\"font-bold text-slate-900 text-lg mb-2\">WhatsApp \/ Telepon<\/h3>\n                    <p class=\"text-slate-500 text-sm mb-4\">Konsultasi responsif via pesan singkat.<\/p>\n                    <a href=\"https:\/\/wa.me\/62882007791887\" target=\"_blank\" class=\"text-green-600 font-bold hover:text-green-700 mt-auto flex items-center gap-1.5\">\n                        +62 882-0077-91887 <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <div class=\"bg-white rounded-3xl p-6 shadow-xl shadow-slate-200\/50 border border-slate-100 flex flex-col items-center text-center group hover:-translate-y-1 transition-transform duration-300\">\n                    <div class=\"w-14 h-14 bg-purple-50 text-purple-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\n                        <i data-lucide=\"map-pin\" class=\"w-6 h-6\"><\/i>\n                    <\/div>\n                    <h3 class=\"font-bold text-slate-900 text-lg mb-2\">Pusat Servis<\/h3>\n                    <p class=\"text-slate-500 text-sm mb-4\">Jl. Nusakambangan, Jonggrangan, Sukorejo, Kec. Mertoyudan, Kabupaten Magelang, Jawa Tengah 56172<\/p>\n                    <a href=\"#peta-lokasi\" class=\"text-purple-600 font-bold hover:text-purple-700 mt-auto flex items-center gap-1.5\">\n                        Lihat Peta <i data-lucide=\"arrow-down\" class=\"w-4 h-4\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <div class=\"bg-white rounded-3xl p-6 shadow-xl shadow-slate-200\/50 border border-slate-100 flex flex-col items-center text-center group hover:-translate-y-1 transition-transform duration-300\">\n                    <div class=\"w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\n                        <i data-lucide=\"clock\" class=\"w-6 h-6\"><\/i>\n                    <\/div>\n                    <h3 class=\"font-bold text-slate-900 text-lg mb-2\">Jam Operasional<\/h3>\n                    <div class=\"text-slate-500 text-sm w-full space-y-2 mt-2\">\n                        <div class=\"flex justify-between border-b border-slate-100 pb-1\"><span>Senin - Sabtu:<\/span> <span class=\"font-semibold text-slate-700\">08:00 - 20:00<\/span><\/div>\n                        <div class=\"flex justify-between pt-1\"><span>Minggu:<\/span> <span class=\"font-semibold text-red-500\">Tutup (Libur)<\/span><\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n        <section class=\"py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\" id=\"peta-lokasi\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16\">\n                \n                <div class=\"bg-white p-8 md:p-10 rounded-3xl shadow-sm border border-slate-100 reveal\">\n                    <h2 class=\"text-2xl md:text-3xl font-bold text-slate-900 mb-2\">Kirim Pesan Cepat<\/h2>\n                    <p class=\"text-slate-500 mb-8 text-sm md:text-base\">Isi form di bawah ini, data akan langsung dirangkai dan diarahkan ke WhatsApp kami.<\/p>\n\n                    <form id=\"wa-contact-form\" class=\"space-y-5\">\n                        \n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n                            <div class=\"space-y-1.5\">\n                                <label class=\"text-sm font-semibold text-slate-700\">Nama Lengkap<\/label>\n                                <div class=\"jm-input-wrap\">\n                                    <div class=\"pl-4 pr-2 text-slate-400 flex-shrink-0\">\n                                        <i data-lucide=\"user\" class=\"w-5 h-5\"><\/i>\n                                    <\/div>\n                                    <input type=\"text\" id=\"wa_nama\" required placeholder=\"Cth: Budi Santoso\">\n                                <\/div>\n                            <\/div>\n                            <div class=\"space-y-1.5\">\n                                <label class=\"text-sm font-semibold text-slate-700\">Tipe Device \/ HP<\/label>\n                                <div class=\"jm-input-wrap\">\n                                    <div class=\"pl-4 pr-2 text-slate-400 flex-shrink-0\">\n                                        <i data-lucide=\"smartphone\" class=\"w-5 h-5\"><\/i>\n                                    <\/div>\n                                    <input type=\"text\" id=\"wa_device\" required placeholder=\"Cth: iPhone 13 Pro\">\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"space-y-1.5\">\n                            <label class=\"text-sm font-semibold text-slate-700\">Deskripsi Keluhan<\/label>\n                            <textarea id=\"wa_pesan\" required rows=\"4\" placeholder=\"Ceritakan detail kerusakan atau kendala yang dialami...\" class=\"jm-textarea resize-none\"><\/textarea>\n                        <\/div>\n\n                        <button type=\"submit\" class=\"w-full bg-[#25D366] hover:bg-[#1ebc5a] text-white font-bold py-4 rounded-xl shadow-lg shadow-green-500\/20 transition-all flex justify-center items-center gap-2 hover:-translate-y-1 mt-4\">\n                            <i data-lucide=\"send\" class=\"w-5 h-5\"><\/i>\n                            Kirim Pesan via WhatsApp\n                        <\/button>\n                        <p class=\"text-center text-xs text-slate-400 mt-3\"><i data-lucide=\"lock\" class=\"inline w-3 h-3 mb-0.5\"><\/i> Data Anda aman dan tidak disimpan di server publik.<\/p>\n                    <\/form>\n                <\/div>\n\n                <div class=\"space-y-6 reveal\" style=\"transition-delay: 150ms;\">\n                    \n                    <div class=\"jm-map-container w-full h-80 lg:h-[400px] bg-slate-200 rounded-3xl overflow-hidden shadow-sm border border-slate-100 relative group\">\n                        \n                        <iframe src=\"https:\/\/maps.google.com\/maps?q=Jl.+Nusakambangan%2C+Jonggrangan%2C+Sukorejo%2C+Kec.+Mertoyudan%2C+Kabupaten+Magelang%2C+Jawa+Tengah+56172&t=&z=15&ie=UTF8&iwloc=&output=embed\" width=\"100%\" height=\"100%\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>                        \n                        <div class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur px-4 py-2 rounded-xl text-sm font-bold text-slate-800 shadow-lg flex items-center gap-2 pointer-events-none\">\n                            <span class=\"relative flex h-3 w-3\">\n                              <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75\"><\/span>\n                              <span class=\"relative inline-flex rounded-full h-3 w-3 bg-purple-500\"><\/span>\n                            <\/span>\n                            Lokasi Kami\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bg-gradient-to-r from-slate-900 to-slate-800 rounded-3xl p-6 md:p-8 text-white flex flex-col sm:flex-row items-center gap-6 justify-between shadow-lg\">\n                        <div class=\"space-y-1 text-center sm:text-left\">\n                            <h4 class=\"font-bold text-lg text-white\">Luar Kota Magelang?<\/h4>\n                            <p class=\"text-slate-300 text-sm\">Kami menerima pengiriman unit servis via ekspedisi (JNE\/J&T\/SiCepat).<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/wa.me\/62882007791887?text=Halo%2C%20saya%20dari%20luar%20kota%20%28Magelang%29%20ingin%20mengirimkan%20HP%20untuk%20diservis.\" target=\"_blank\" class=\"shrink-0 bg-white\/10 hover:bg-white\/20 text-white border border-white\/20 px-5 py-2.5 rounded-xl font-medium transition-colors backdrop-blur-sm text-sm flex items-center gap-2\">\n                            <i data-lucide=\"package\" class=\"w-4 h-4\"><\/i> Info Ekspedisi\n                        <\/a>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n    <\/div>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            const waForm = document.getElementById('wa-contact-form');\n            if(waForm) {\n                waForm.addEventListener('submit', function(e) {\n                    e.preventDefault(); \n\n                    const waBaseUrl = \"https:\/\/wa.me\/62882007791887\"; \n                    const nama = document.getElementById('wa_nama').value;\n                    const device = document.getElementById('wa_device').value;\n                    const pesan = document.getElementById('wa_pesan').value;\n\n                    const teksWA = `Halo Servis HP Djoeragan,\\n\\nSaya ingin konsultasi perbaikan perangkat.\\n\\n*Nama:* ${nama}\\n*Tipe Device:* ${device}\\n*Keluhan:* ${pesan}\\n\\nMohon info estimasi biaya dan ketersediaan sparepart. Terima kasih!`;\n\n                    const separator = waBaseUrl.includes('?') ? '&' : '?';\n                    const urlWhatsApp = `${waBaseUrl}${separator}text=${encodeURIComponent(teksWA)}`;\n                    \n                    window.open(urlWhatsApp, '_blank');\n                });\n            }\n        });\n    <\/script>\n\n    <\/div>\n\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-131","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages\/131","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=131"}],"version-history":[{"count":7,"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/pages\/131\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/demo.djoeraganwebsite.com\/hp\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}