LBH ABG | Advokat Bersama Garuda | Bantuan Hukum & Industri Kreatif<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n }\n body {\n background: linear-gradient(145deg, #0b1a2e 0%, #0a111f 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n }\n .card {\n max-width: 800px;\n width: 100%;\n background: rgba(255, 255, 255, 0.06);\n backdrop-filter: blur(12px);\n border-radius: 2rem;\n box-shadow: 0 25px 45px rgba(0,0,0,0.5), 0 0 0 1px rgba(212, 175, 55, 0.3);\n overflow: hidden;\n transition: all 0.2s;\n }\n .header {\n background: linear-gradient(135deg, #1e2a3a 0%, #0f1a24 100%);\n padding: 1.2rem 1.5rem;\n color: #ffdf8c;\n border-bottom: 3px solid #d4af37;\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n .logo-icon {\n background: #d4af37;\n border-radius: 50%;\n width: 55px;\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n color: #1e2a3a;\n font-weight: bold;\n box-shadow: 0 5px 12px rgba(0,0,0,0.3);\n }\n .header-text h1 {\n font-size: 1.4rem;\n font-weight: 700;\n letter-spacing: -0.2px;\n color: #ffdf8c;\n }\n .header-text p {\n font-size: 0.75rem;\n opacity: 0.9;\n color: #e0e0e0;\n }\n .badge {\n background: #2c3e2f;\n display: inline-block;\n padding: 0.2rem 0.6rem;\n border-radius: 30px;\n font-size: 0.7rem;\n font-weight: 600;\n margin-top: 5px;\n color: #d4af37;\n }\n .chat-container {\n background: #f9f6ef;\n background-image: radial-gradient(circle at 10% 20%, rgba(212,175,55,0.05) 2%, transparent 2.5%);\n background-size: 30px 30px;\n padding: 1.2rem;\n height: 420px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n .message {\n display: flex;\n flex-direction: column;\n max-width: 85%;\n animation: fadeSlide 0.2s ease;\n }\n .message.user { align-self: flex-end; }\n .message.bot { align-self: flex-start; }\n .bubble {\n padding: 0.7rem 1rem;\n border-radius: 1.2rem;\n font-size: 0.9rem;\n line-height: 1.45;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n }\n .user .bubble {\n background: #dcf8c5;\n color: #1e2a2f;\n border-bottom-right-radius: 0.3rem;\n }\n .bot .bubble {\n background: white;\n color: #1e2a3a;\n border-bottom-left-radius: 0.3rem;\n border-left: 3px solid #d4af37;\n }\n .time {\n font-size: 0.65rem;\n color: #6b6f76;\n margin: 0.2rem 0.5rem 0;\n }\n .user .time { text-align: right; }\n .typing {\n background: white;\n padding: 0.6rem 1rem;\n border-radius: 1.2rem;\n width: fit-content;\n display: flex;\n gap: 5px;\n align-items: center;\n border-left: 3px solid #d4af37;\n }\n .typing span {\n width: 8px;\n height: 8px;\n background: #9b9b9b;\n border-radius: 50%;\n display: inline-block;\n animation: typing 1.4s infinite ease both;\n }\n .typing span:nth-child(1) { animation-delay: 0s; }\n .typing span:nth-child(2) { animation-delay: 0.2s; }\n .typing span:nth-child(3) { animation-delay: 0.4s; }\n @keyframes typing {\n 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n 30% { transform: translateY(-6px); opacity: 1; }\n }\n @keyframes fadeSlide {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .input-area {\n background: #ffffff;\n padding: 1rem;\n display: flex;\n gap: 0.7rem;\n border-top: 1px solid #e2dccd;\n }\n .input-area input {\n flex: 1;\n padding: 0.8rem 1rem;\n border: 1px solid #ddd2b0;\n border-radius: 2rem;\n outline: none;\n font-size: 0.9rem;\n background: #fffdf9;\n }\n .input-area input:focus {\n border-color: #d4af37;\n box-shadow: 0 0 0 2px rgba(212,175,55,0.2);\n }\n .input-area button {\n background: #1e2a3a;\n border: none;\n border-radius: 2rem;\n padding: 0 1.4rem;\n font-weight: 600;\n color: #ffdf8c;\n cursor: pointer;\n transition: 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 0.9rem;\n }\n .input-area button:hover {\n background: #d4af37;\n color: #1e2a3a;\n transform: scale(0.97);\n }\n .wa-footer {\n background: #1e2a3a;\n padding: 0.9rem 1.5rem;\n text-align: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n border-top: 1px solid #d4af37;\n }\n .wa-button {\n background: #25d366;\n padding: 0.6rem 1.2rem;\n border-radius: 2rem;\n color: white;\n text-decoration: none;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: 0.2s;\n font-size: 0.85rem;\n }\n .wa-button:hover {\n background: #128c7e;\n transform: translateY(-2px);\n }\n .footer-note {\n color: #ffdf8c;\n font-size: 0.7rem;\n }\n .suggestions {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 12px 15px;\n background: #f2efe3;\n border-top: 1px solid #e2dccd;\n }\n .chip {\n background: #e9e3d0;\n padding: 6px 16px;\n border-radius: 30px;\n font-size: 0.75rem;\n cursor: pointer;\n transition: 0.1s;\n font-weight: 500;\n color: #2c3e4e;\n }\n .chip:hover {\n background: #d4af37;\n color: #0f1a24;\n }\n @media (max-width: 550px) {\n .chat-container { height: 360px; }\n .header-text h1 { font-size: 1.2rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"card\">\n <div class=\"header\">\n <div class=\"logo-icon\">\u2696\ufe0f\ud83e\udd85<\/div>\n <div class=\"header-text\">\n <h1>LBH ABG | ADVOKAT BERSAMA GARUDA<\/h1>\n <p>Lembaga Bantuan Hukum \u2022 Advokat Bersama Garuda<\/p>\n <div class=\"badge\">#DasSeinDasSollen | #KUHP2023 | #KeadilanKreatif<\/div>\n <\/div>\n <\/div>\n\n <div class=\"chat-container\" id=\"chatContainer\">\n <div class=\"message bot\">\n <div class=\"bubble\">\n \ud83e\udd85 <strong>Salam Keadilan!<\/strong> Kami adalah <strong>LBH ABG Advokat Bersama Garuda<\/strong> \u2014 garda hukum bagi pelaku industri kreatif, seniman, dan masyarakat pencari keadilan.<br><br>\n Kami hadir untuk menjembatani <strong>das Sein<\/strong> (hukum positif yang berlaku) dengan <strong>das Sollen<\/strong> (cita hukum dan keadilan substantif). Diskusikan bersama kami:<br>\n \u2022 KUHP terbaru (UU No. 1 Tahun 2023)<br>\n \u2022 KUHPerdata & Hukum Kontrak<br>\n \u2022 Kasus korupsi pengadaan jasa kreatif<br>\n \u2022 Perlindungan Hak Kekayaan Intelektual<br>\n \u2022 Asas praduga tak bersalah & due process of law<br><br>\n \ud83d\udc49 Ketik pertanyaan atau pilih saran di bawah.\n <\/div>\n <div class=\"time\">Online \u2022 Siap Membantu<\/div>\n <\/div>\n <\/div>\n\n <div class=\"input-area\">\n <input type=\"text\" id=\"userInput\" placeholder=\"Tanyakan seputar bantuan hukum, KUHP baru, kontrak kreatif, dll.\" autocomplete=\"off\">\n <button id=\"sendBtn\">\u27a4 Kirim<\/button>\n <\/div>\n\n <div class=\"wa-footer\">\n <span class=\"footer-note\">\ud83d\udcde Konsultasi Hukum Awal Gratis \u2022 Advokat Bersama Garuda<\/span>\n <a href=\"https:\/\/wa.me\/628121331832?text=Halo%20LBH%20ABG%2C%20saya%20butuh%20konsultasi%20hukum%20terkait%20industri%20kreatif\" \n class=\"wa-button\" target=\"_blank\" rel=\"noopener noreferrer\">\n \ud83d\udcac Chat WhatsApp 0812-1331-832\n <\/a>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ======================== RESPON CERDAS BERDASARKAN NORMA ========================\n function getSmartResponse(userMessage) {\n const msg = userMessage.toLowerCase().trim();\n \n \/\/ ---- 1. Das Sein vs Das Sollen ----\n if (msg.includes(\"das sein\") || msg.includes(\"das sollen\") || (msg.includes(\"sein\") && msg.includes(\"sollen\"))) {\n return \"\ud83d\udcda **Das Sein** adalah hukum positif yang berlaku saat ini (lex lata), seperti KUHP lama\/UU Tipikor\/KUHPerdata. **Das Sollen** adalah cita hukum (lex ferenda), yaitu apa yang seharusnya menurut keadilan. Dalam kasus Amsal Sitepu, das Sein (hukum pidana positif) memidanakan kreator karena tidak ada standar harga, sementara das Sollen menuntut adanya pedoman harga jasa kreatif yang adil. LBH ABG berjuang agar das Sollen diwujudkan dalam regulasi yang berpihak pada keadilan substantif.\";\n }\n \n \/\/ ---- 2. KUHP terbaru (UU No. 1\/2023) ----\n if (msg.includes(\"kuhp baru\") || msg.includes(\"kuhp 2023\") || (msg.includes(\"kuhp\") && (msg.includes(\"terbaru\") || msg.includes(\"baru\")))) {\n return \"\ud83d\udcd6 **KUHP Nasional (UU No. 1 Tahun 2023)** mulai berlaku 3 tahun setelah diundangkan (2026). Beberapa poin penting: penghapusan pidana penjara untuk delik tertentu, penguatan asas legalitas, perluasan pidana tambahan, dan pengaturan tindak pidana dengan pendekatan keadilan restoratif. Kaitannya dengan kreator: KUHP baru lebih menekankan ultimum remedium, sehingga perbedaan tafsir harga dalam pengadaan seharusnya tidak langsung dipidana tanpa ada unsur melawan hukum yang nyata. LBH ABG siap mengawal implementasinya.\";\n }\n \n \/\/ ---- 3. KUHPerdata & Hukum Kontrak Jasa Kreatif ----\n if (msg.includes(\"kuhperdata\") || (msg.includes(\"kontrak\") && (msg.includes(\"karya\") || msg.includes(\"jasa\"))) || msg.includes(\"wanprestasi\")) {\n return \"\u2696\ufe0f **KUHPerdata** mengatur perikatan (Buku III). Dalam kontrak jasa kreatif, pasal 1320 KUHPerdata mensyaratkan: kesepakatan, kecakapan, objek tertentu, dan sebab yang halal. Wanprestasi (pasal 1243 KUHPerdata) dapat berakibat ganti rugi. Namun, perbedaan tafsir harga bukan serta-merta wanprestasi jika tidak ada kesepakatan harga baku. Kami mendorong penggunaan klausul kontrak yang jelas dan mengacu pada pedoman harga jasa kreatif yang sedang disusun Kementerian Ekraf.\";\n }\n \n \/\/ ---- 4. Asas Hukum Acara Pidana (KUHAP) ----\n if (msg.includes(\"praduga tak bersalah\") || msg.includes(\"presumption\") || msg.includes(\"kuhap\") || msg.includes(\"acara pidana\")) {\n return \"\u2696\ufe0f **Praduga tak bersalah** (Pasal 8 ayat (1) UU No. 8\/1981 KUHAP) adalah hak asasi tersangka\/terdakwa. Dalam kasus Amsal Sitepu, kami menghormati proses hukum, namun mengingatkan bahwa aparat penegak hukum harus membuktikan unsur melawan hukum dan kerugian negara secara sah. Asas due process of law juga dijamin dalam UU Kekuasaan Kehakiman. LBH ABG siap mendampingi setiap warga negara yang merasa haknya dilanggar dalam proses pidana.\";\n }\n \n \/\/ ---- 5. Kasus Amsal Sitepu \/ Korupsi Pengadaan Jasa Kreatif ----\n if (msg.includes(\"amsal\") || msg.includes(\"sitepu\") || (msg.includes(\"korupsi\") && msg.includes(\"kreatif\")) || (msg.includes(\"video\") && msg.includes(\"desa\"))) {\n return \"\ud83d\udccc **Kasus Amsal Sitepu** menjadi simbol problematika pengadaan jasa kreatif. Secara *das Sein*, ia didakwa Pasal 2 atau 3 UU Tipikor karena diduga merugikan negara. Namun, *das Sollen* menghendaki adanya pedoman objektif penilaian Harga Perkiraan Sendiri (HPS). Kementerian Ekraf kini menyusun pedoman jasa kreatif yang akan menjadi acuan. Kami di LBH ABG mendorong agar pedoman tersebut segera diintegrasikan ke dalam Perpres Pengadaan Barang\/Jasa dan PMK, sehingga kejadian serupa tidak terulang. Butuh pendampingan hukum? Hubungi kami via WA.\";\n }\n \n \/\/ ---- 6. Pedoman Jasa Kreatif & Regulasi Pengadaan ----\n if (msg.includes(\"pedoman\") || msg.includes(\"standar harga\") || msg.includes(\"hps\") || (msg.includes(\"pengadaan\") && msg.includes(\"jasa\"))) {\n return \"\ud83d\udcd8 **Pedoman Jasa Kreatif** sedang disusun Kementerian Ekraf bersama asosiasi. Rencananya akan menjadi masukan bagi PMK (Standar Biaya Masuk\/Keluar) dan diharapkan memberi kepastian hukum bagi kreator serta menjadi rujukan auditor. Kami menilai langkah ini penting untuk mencegah kriminalisasi akibat ketiadaan standar. Jika Anda butuh advokasi terkait kebijakan ini, tim kami siap mendampingi.\";\n }\n \n \/\/ ---- 7. Bantuan Hukum Gratis & Advokat ----\n if (msg.includes(\"bantuan hukum\") || msg.includes(\"advokat\") || msg.includes(\"pendampingan\") || msg.includes(\"pengacara\") || msg.includes(\"gratis\")) {\n return \"\ud83d\udee1\ufe0f LBH ABG Advokat Bersama Garuda menyediakan layanan konsultasi awal gratis, pendampingan hukum, dan litigasi untuk pelaku industri kreatif, termasuk pembelaan dalam kasus pengadaan barang\/jasa, hak kekayaan intelektual, dan sengketa kontrak. Untuk konsultasi lebih lanjut, silakan hubungi WhatsApp kami: 0812-1331-832.\";\n }\n \n \/\/ ---- 8. Filosofi LBH ABG & Garuda ----\n if (msg.includes(\"lbh abg\") || (msg.includes(\"siapa\") && (msg.includes(\"kalian\") || msg.includes(\"anda\"))) || msg.includes(\"garuda\")) {\n return \"\ud83c\udfdb\ufe0f **LBH ABG (Advokat Bersama Garuda)** adalah lembaga bantuan hukum yang berfokus pada pembelaan keadilan bagi masyarakat, terutama pelaku ekonomi kreatif. Filosofi kami: **A**manah, **B**erani, **G**aruda \u2014 mengabdi pada kebenaran dan keadilan dengan semangat Garuda sebagai pelindung bangsa. Kami hadir untuk memberikan akses keadilan tanpa diskriminasi.\";\n }\n \n \/\/ ---- 9. Hak Kekayaan Intelektual (HKI) ----\n if (msg.includes(\"hak cipta\") || msg.includes(\"hki\") || msg.includes(\"intelektual\") || msg.includes(\"merek\")) {\n return \"\ud83c\udfa8 Perlindungan Hak Kekayaan Intelektual diatur dalam UU No. 28 Tahun 2014 (Hak Cipta), UU Merek, dan lainnya. Kreator wajib mendaftarkan karya untuk mendapatkan perlindungan hukum. Kami membantu pendaftaran HKI, penyusunan kontrak lisensi, serta penanganan sengketa pelanggaran. Jangan biarkan karya Anda dieksploitasi tanpa hak.\";\n }\n \n \/\/ ---- 10. Harga Jasa Kreatif & Kewajaran ----\n if (msg.includes(\"harga\") || msg.includes(\"biaya\") || msg.includes(\"tarif\") || (msg.includes(\"kewajaran\") && msg.includes(\"harga\"))) {\n return \"\ud83d\udcb0 Penetapan harga jasa kreatif harus mempertimbangkan kompleksitas, pengalaman, dan reputasi kreator. Dalam ranah pidana, ketiadaan standar objektif sering menyebabkan perbedaan tafsir yang merugikan kreator. Kami mendorong penggunaan pedoman harga yang disusun bersama asosiasi, serta menjadikan parameter tersebut sebagai acuan dalam penegakan hukum.\";\n }\n \n \/\/ ---- 11. Ucapan Terima Kasih ----\n if (msg.includes(\"terima kasih\") || msg.includes(\"makasih\") || msg.includes(\"thank\")) {\n return \"Sama-sama! Kami senang bisa membantu. Jangan ragu untuk terus bertanya atau hubungi langsung tim advokat kami melalui WhatsApp. Keadilan adalah hak setiap insan kreatif. \ud83e\udd85\";\n }\n \n \/\/ ---- Default: edukasi normatif ----\n return \"\ud83e\udd1d Terima kasih telah menghubungi LBH ABG Advokat Bersama Garuda. Pertanyaan Anda akan kami jawab dengan perspektif hukum positif (*das Sein*) dan cita keadilan (*das Sollen*). Untuk konsultasi lebih mendalam, silakan tekan tombol WhatsApp di bawah dan tim advokat kami akan merespon dalam 1x24 jam. Tetap semangat berkarya dengan kepastian hukum!\";\n }\n\n \/\/ DOM elements\n const chatContainer = document.getElementById('chatContainer');\n const userInput = document.getElementById('userInput');\n const sendBtn = document.getElementById('sendBtn');\n let isBotTyping = false;\n\n function scrollToBottom() {\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n\n function addMessage(text, sender = 'user') {\n const messageDiv = document.createElement('div');\n messageDiv.className = `message ${sender}`;\n const bubbleDiv = document.createElement('div');\n bubbleDiv.className = 'bubble';\n bubbleDiv.innerText = text;\n const timeSpan = document.createElement('div');\n timeSpan.className = 'time';\n const now = new Date();\n timeSpan.innerText = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n messageDiv.appendChild(bubbleDiv);\n messageDiv.appendChild(timeSpan);\n chatContainer.appendChild(messageDiv);\n scrollToBottom();\n }\n\n function showTypingIndicator() {\n const typingDiv = document.createElement('div');\n typingDiv.className = 'message bot';\n typingDiv.id = 'typingIndicator';\n typingDiv.innerHTML = `<div class=\"typing\"><span><\/span><span><\/span><span><\/span><\/div>`;\n chatContainer.appendChild(typingDiv);\n scrollToBottom();\n return typingDiv;\n }\n\n function removeTypingIndicator() {\n const indicator = document.getElementById('typingIndicator');\n if (indicator) indicator.remove();\n }\n\n async function botReply(userText) {\n if (isBotTyping) return;\n isBotTyping = true;\n const typingDiv = showTypingIndicator();\n await new Promise(resolve => setTimeout(resolve, 700 + Math.random() * 400));\n removeTypingIndicator();\n const reply = getSmartResponse(userText);\n addMessage(reply, 'bot');\n isBotTyping = false;\n }\n\n async function sendUserMessage() {\n const message = userInput.value.trim();\n if (message === \"\") return;\n addMessage(message, 'user');\n userInput.value = \"\";\n await botReply(message);\n }\n\n sendBtn.addEventListener('click', sendUserMessage);\n userInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n sendUserMessage();\n }\n });\n\n \/\/ Saran pertanyaan dengan tema normatif (Das Sein, Das Sollen, KUHP baru, KUHPerdata, KUHAP, dll)\n const suggestions = [\n \"Das Sein vs Das Sollen dalam kasus Amsal Sitepu\",\n \"KUHP terbaru (UU 1\/2023) dan implikasinya bagi kreator\",\n \"KUHPerdata: wanprestasi dalam kontrak jasa kreatif\",\n \"Asas praduga tak bersalah & KUHAP\",\n \"Pedoman harga jasa kreatif dan kepastian hukum\",\n \"Hak cipta & perlindungan HKI untuk kreator\"\n ];\n const suggestionDiv = document.createElement('div');\n suggestionDiv.className = 'suggestions';\n suggestions.forEach(sug => {\n const chip = document.createElement('span');\n chip.className = 'chip';\n chip.innerText = sug;\n chip.onclick = () => {\n userInput.value = sug;\n sendUserMessage();\n };\n suggestionDiv.appendChild(chip);\n });\n document.querySelector('.input-area').insertAdjacentElement('afterend', suggestionDiv);\n \n \/\/ Pesan tambahan jika belum ada interaksi\n setTimeout(() => {\n if (chatContainer.children.length <= 1) {\n addMessage(\"\ud83e\udd85 Kami hadir untuk menjembatani *das Sein* dan *das Sollen* dalam penegakan hukum. Pilih saran pertanyaan di atas atau ketik sendiri.\", 'bot');\n }\n }, 1500);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b03fc5b elementor-widget elementor-widget-html\" data-id=\"b03fc5b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\r\n <title>Form Janji Temu - LBH Advokat Bersama Garuda<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\r\n }\r\n\r\n body {\r\n background: #f0f2f5;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n }\r\n\r\n .container {\r\n max-width: 480px;\r\n width: 100%;\r\n margin: 0 auto;\r\n }\r\n\r\n .card {\r\n background: white;\r\n border-radius: 28px;\r\n padding: 2rem 1.8rem;\r\n text-align: center;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n }\r\n\r\n .icon {\r\n font-size: 3rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .card h1 {\r\n font-size: 1.6rem;\r\n color: #1a2a3a;\r\n margin-bottom: 0.5rem;\r\n font-weight: 700;\r\n }\r\n\r\n .card p {\r\n font-size: 0.9rem;\r\n color: #4a5568;\r\n margin-bottom: 1.8rem;\r\n line-height: 1.5;\r\n }\r\n\r\n .btn-buat {\r\n background: #8B0000;\r\n color: white;\r\n border: none;\r\n padding: 0.9rem 2rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n width: 100%;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn-buat:hover {\r\n background: #6b0000;\r\n transform: scale(0.98);\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 1000;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n }\r\n\r\n .modal.show {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: white;\r\n border-radius: 28px;\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n animation: slideUp 0.25s ease;\r\n box-shadow: 0 20px 35px -10px rgba(0,0,0,0.3);\r\n }\r\n\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .modal-header {\r\n background: #8B0000;\r\n color: white;\r\n padding: 1.2rem 1.5rem;\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-radius: 28px 28px 0 0;\r\n }\r\n\r\n .modal-header h2 {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n\r\n .close-modal {\r\n background: rgba(255,255,255,0.15);\r\n border: none;\r\n color: white;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n transition: 0.15s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .close-modal:hover {\r\n background: rgba(255,255,255,0.3);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .modal-body {\r\n padding: 1.5rem;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-weight: 600;\r\n margin-bottom: 0.4rem;\r\n color: #1a202c;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .required::after {\r\n content: \" *\";\r\n color: #e53e3e;\r\n }\r\n\r\n input, select, textarea {\r\n width: 100%;\r\n padding: 0.7rem 1rem;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 14px;\r\n font-size: 0.9rem;\r\n transition: 0.15s;\r\n background: #ffffff;\r\n color: #1a202c;\r\n }\r\n\r\n input:focus, select:focus, textarea:focus {\r\n outline: none;\r\n border-color: #8B0000;\r\n box-shadow: 0 0 0 2px rgba(139,0,0,0.1);\r\n }\r\n\r\n .radio-group, .checkbox-group {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.8rem;\r\n margin-top: 0.3rem;\r\n }\r\n\r\n .radio-group label, .checkbox-group label {\r\n font-weight: 500;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n cursor: pointer;\r\n font-size: 0.85rem;\r\n color: #2d3748;\r\n }\r\n\r\n input[type=\"radio\"], input[type=\"checkbox\"] {\r\n width: 16px;\r\n height: 16px;\r\n margin: 0;\r\n }\r\n\r\n .other-date {\r\n margin-top: 0.5rem;\r\n width: 100%;\r\n }\r\n\r\n .other-date input {\r\n margin-top: 0.4rem;\r\n }\r\n\r\n .submit-btn {\r\n background: #8B0000;\r\n color: white;\r\n border: none;\r\n padding: 0.8rem 1.5rem;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n width: 100%;\r\n transition: 0.15s;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .submit-btn:hover {\r\n background: #6b0000;\r\n transform: scale(0.98);\r\n }\r\n\r\n .alert {\r\n padding: 0.8rem;\r\n border-radius: 14px;\r\n margin-bottom: 1.2rem;\r\n font-size: 0.85rem;\r\n display: none;\r\n font-weight: 500;\r\n text-align: center;\r\n }\r\n\r\n .alert-success {\r\n background: #c6f6d5;\r\n color: #22543d;\r\n border-left: 4px solid #38a169;\r\n }\r\n\r\n .alert-error {\r\n background: #fed7d7;\r\n color: #742a2a;\r\n border-left: 4px solid #e53e3e;\r\n }\r\n\r\n .modal-footer {\r\n text-align: center;\r\n font-size: 0.7rem;\r\n padding: 0.8rem;\r\n color: #718096;\r\n background: #f7fafc;\r\n border-top: 1px solid #e2e8f0;\r\n border-radius: 0 0 28px 28px;\r\n }\r\n\r\n .modal-content::-webkit-scrollbar {\r\n width: 5px;\r\n }\r\n\r\n .modal-content::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n\r\n .modal-content::-webkit-scrollbar-thumb {\r\n background: #cbd5e1;\r\n border-radius: 10px;\r\n }\r\n\r\n .loading {\r\n display: inline-block;\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n border-top-color: transparent;\r\n animation: spin 0.6s linear infinite;\r\n margin-right: 8px;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Elemen untuk Formspree Ajax *\/\r\n [data-fs-success] {\r\n background: #c6f6d5;\r\n color: #22543d;\r\n padding: 0.8rem;\r\n border-radius: 14px;\r\n margin-bottom: 1rem;\r\n display: none;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n [data-fs-error] {\r\n background: #fed7d7;\r\n color: #742a2a;\r\n padding: 0.8rem;\r\n border-radius: 14px;\r\n margin-bottom: 1rem;\r\n display: none;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n [data-fs-error=\"field\"] {\r\n font-size: 0.75rem;\r\n margin-top: 0.25rem;\r\n color: #e53e3e;\r\n background: none;\r\n padding: 0;\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"icon\">\ud83d\udcc5<\/div>\r\n <h1>Buat Janji Temu<\/h1>\r\n <p>Klik tombol di bawah untuk mengisi formulir janji temu<\/p>\r\n <button class=\"btn-buat\" onclick=\"openModal()\">\r\n \u270f\ufe0f Buat Janji Temu Sekarang\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"appointmentModal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h2>Formulir Janji Temu<\/h2>\r\n <button class=\"close-modal\" onclick=\"closeModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n \r\n <div data-fs-success><\/div>\r\n <div data-fs-error><\/div>\r\n \r\n <form id=\"my-form\">\r\n \r\n <input type=\"hidden\" name=\"_subject\" value=\"\ud83d\udccb FORM JANJI TEMU - Klien Baru\">\r\n <input type=\"hidden\" name=\"_replyto\" value=\"lbhadvokatbersamagaruda@gmail.com\">\r\n <input type=\"hidden\" name=\"_format\" value=\"html\">\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Nama Lengkap<\/label>\r\n <input type=\"text\" name=\"Nama\" required data-fs-field>\r\n <span data-fs-error=\"Nama\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Nomor Telepon \/ WhatsApp<\/label>\r\n <input type=\"tel\" name=\"Telepon\" required data-fs-field>\r\n <span data-fs-error=\"Telepon\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Alamat Email (Opsional)<\/label>\r\n <input type=\"email\" name=\"Email\" data-fs-field>\r\n <span data-fs-error=\"Email\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Tujuan Pertemuan<\/label>\r\n <select name=\"Tujuan\" required data-fs-field>\r\n <option value=\"\">-- Pilih --<\/option>\r\n <option>Konsultasi hukum awal<\/option>\r\n <option>Pendampingan perkara<\/option>\r\n <option>Mediasi \/ Negosiasi<\/option>\r\n <option>Pendirian Perusahaan<\/option>\r\n <option>Perizinan (NIB\/SIPB\/Amdal)<\/option>\r\n <option>Lainnya<\/option>\r\n <\/select>\r\n <span data-fs-error=\"Tujuan\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Tanggal Pilihan<\/label>\r\n <div class=\"checkbox-group\">\r\n <label><input type=\"checkbox\" name=\"Tanggal\" value=\"10 Mei 2026\"> 10 Mei 2026<\/label>\r\n <label><input type=\"checkbox\" name=\"Tanggal\" value=\"11 Mei 2026\"> 11 Mei 2026<\/label>\r\n <label><input type=\"checkbox\" name=\"Tanggal\" value=\"12 Mei 2026\"> 12 Mei 2026<\/label>\r\n <\/div>\r\n <div class=\"other-date\">\r\n <label><input type=\"checkbox\" id=\"otherDateCheck\"> Tanggal lainnya:<\/label>\r\n <input type=\"date\" id=\"otherDateInput\" name=\"Tanggal_Lainnya\" disabled>\r\n <\/div>\r\n <span data-fs-error=\"Tanggal\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Jam Pilihan<\/label>\r\n <div class=\"radio-group\">\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Pagi (09.00-12.00)\" required data-fs-field> Pagi (09.00-12.00)<\/label>\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Siang (13.00-15.00)\"> Siang (13.00-15.00)<\/label>\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Sore (15.30-17.00)\"> Sore (15.30-17.00)<\/label>\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Fleksibel\"> Fleksibel<\/label>\r\n <\/div>\r\n <span data-fs-error=\"Jam\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Perkiraan Durasi<\/label>\r\n <select name=\"Durasi\" data-fs-field>\r\n <option>15 menit<\/option>\r\n <option>30 menit<\/option>\r\n <option>1 jam<\/option>\r\n <option>>1 jam<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Metode Pertemuan<\/label>\r\n <div class=\"radio-group\">\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Tatap muka (Kantor)\" required data-fs-field> Tatap muka (Kantor)<\/label>\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Zoom \/ Google Meet\"> Zoom \/ Google Meet<\/label>\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Telepon \/ WhatsApp\"> Telepon \/ WhatsApp<\/label>\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Terserah pihak kami\"> Terserah pihak kami<\/label>\r\n <\/div>\r\n <span data-fs-error=\"Metode\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Catatan (opsional)<\/label>\r\n <textarea name=\"Catatan\" rows=\"2\" placeholder=\"Tulis keperluan Anda...\" data-fs-field><\/textarea>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Konfirmasi<\/label>\r\n <div class=\"radio-group\">\r\n <label><input type=\"radio\" name=\"Konfirmasi\" value=\"Ya, setuju dihubungi\" required data-fs-field> Ya, setuju dihubungi via WA\/telepon<\/label>\r\n <label><input type=\"radio\" name=\"Konfirmasi\" value=\"Tidak\"> Tidak<\/label>\r\n <\/div>\r\n <span data-fs-error=\"Konfirmasi\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"submit-btn\" data-fs-submit-btn>Kirim Janji Temu<\/button>\r\n <\/form>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <strong>\ud83d\udcde WhatsApp: 0812-1331-832<\/strong> | Email: lbhadvokatbersamagaruda@gmail.com\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/@formspree\/ajax@1\" defer><\/script>\r\n\r\n<script>\r\n \/\/ Modal functions\r\n const modal = document.getElementById('appointmentModal');\r\n const otherDateCheck = document.getElementById('otherDateCheck');\r\n const otherDateInput = document.getElementById('otherDateInput');\r\n const form = document.getElementById('my-form');\r\n const successDiv = document.querySelector('[data-fs-success]');\r\n const errorDiv = document.querySelector('[data-fs-error]');\r\n\r\n function openModal() {\r\n modal.classList.add('show');\r\n document.body.style.overflow = 'hidden';\r\n \/\/ Reset pesan sukses\/error\r\n if (successDiv) successDiv.style.display = 'none';\r\n if (errorDiv) errorDiv.style.display = 'none';\r\n }\r\n\r\n function closeModal() {\r\n modal.classList.remove('show');\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) closeModal();\r\n });\r\n\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.classList.contains('show')) closeModal();\r\n });\r\n\r\n \/\/ Logic tanggal lainnya\r\n if (otherDateCheck) {\r\n otherDateCheck.addEventListener('change', function() {\r\n otherDateInput.disabled = !this.checked;\r\n if (!this.checked) otherDateInput.value = '';\r\n });\r\n }\r\n\r\n \/\/ Inisialisasi Formspree\r\n window.formspree = window.formspree || function () { \r\n (formspree.q = formspree.q || []).push(arguments); \r\n };\r\n \r\n formspree('initForm', { \r\n formElement: '#my-form', \r\n formId: 'mzdykojj',\r\n onSuccess: function() {\r\n \/\/ Reset form setelah sukses\r\n form.reset();\r\n if(otherDateInput) otherDateInput.disabled = true;\r\n if(otherDateCheck) otherDateCheck.checked = false;\r\n \/\/ Tutup modal setelah 3 detik\r\n setTimeout(() => closeModal(), 3000);\r\n }\r\n });\r\n\r\n \/\/ Validasi tambahan sebelum submit\r\n form.addEventListener('submit', function(e) {\r\n const checkboxes = document.querySelectorAll('input[name=\"Tanggal\"]:checked');\r\n const otherDateFilled = otherDateCheck?.checked && otherDateInput.value !== '';\r\n \r\n if (checkboxes.length === 0 && !otherDateFilled) {\r\n e.preventDefault();\r\n \/\/ Tampilkan error manual\r\n if (errorDiv) {\r\n errorDiv.textContent = '\u274c Pilih minimal satu tanggal pertemuan';\r\n errorDiv.style.display = 'block';\r\n setTimeout(() => {\r\n errorDiv.style.display = 'none';\r\n }, 4000);\r\n }\r\n return false;\r\n }\r\n \r\n \/\/ Tambahkan tanggal lainnya ke form data\r\n if (otherDateCheck?.checked && otherDateInput.value) {\r\n const hiddenInput = document.createElement('input');\r\n hiddenInput.type = 'hidden';\r\n hiddenInput.name = 'Tanggal';\r\n hiddenInput.value = otherDateInput.value;\r\n form.appendChild(hiddenInput);\r\n }\r\n \r\n \/\/ Tambahkan timestamp\r\n const timestampInput = document.createElement('input');\r\n timestampInput.type = 'hidden';\r\n timestampInput.name = 'Waktu_Pengiriman';\r\n timestampInput.value = new Date().toLocaleString('id-ID');\r\n form.appendChild(timestampInput);\r\n \r\n return true;\r\n });\r\n<\/script>\r\n<\/body>\r\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>Chat bot LBH ABG | Advokat Bersama Garuda | Bantuan Hukum & Industri Kreatif \u2696\ufe0f\ud83e\udd85 LBH ABG | ADVOKAT BERSAMA GARUDA Lembaga Bantuan Hukum \u2022 Advokat Bersama Garuda #DasSeinDasSollen | #KUHP2023 | #KeadilanKreatif \ud83e\udd85 Salam Keadilan! Kami adalah LBH ABG Advokat Bersama Garuda \u2014 garda hukum bagi pelaku industri kreatif, seniman, dan masyarakat pencari keadilan. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":22,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":737,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages\/681\/revisions\/737"}],"wp:attachment":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tChat bot\n\n\n\n\n\n \n \n LBH ABG | Advokat Bersama Garuda | Bantuan Hukum & Industri Kreatif<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n }\n body {\n background: linear-gradient(145deg, #0b1a2e 0%, #0a111f 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n }\n .card {\n max-width: 800px;\n width: 100%;\n background: rgba(255, 255, 255, 0.06);\n backdrop-filter: blur(12px);\n border-radius: 2rem;\n box-shadow: 0 25px 45px rgba(0,0,0,0.5), 0 0 0 1px rgba(212, 175, 55, 0.3);\n overflow: hidden;\n transition: all 0.2s;\n }\n .header {\n background: linear-gradient(135deg, #1e2a3a 0%, #0f1a24 100%);\n padding: 1.2rem 1.5rem;\n color: #ffdf8c;\n border-bottom: 3px solid #d4af37;\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n .logo-icon {\n background: #d4af37;\n border-radius: 50%;\n width: 55px;\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n color: #1e2a3a;\n font-weight: bold;\n box-shadow: 0 5px 12px rgba(0,0,0,0.3);\n }\n .header-text h1 {\n font-size: 1.4rem;\n font-weight: 700;\n letter-spacing: -0.2px;\n color: #ffdf8c;\n }\n .header-text p {\n font-size: 0.75rem;\n opacity: 0.9;\n color: #e0e0e0;\n }\n .badge {\n background: #2c3e2f;\n display: inline-block;\n padding: 0.2rem 0.6rem;\n border-radius: 30px;\n font-size: 0.7rem;\n font-weight: 600;\n margin-top: 5px;\n color: #d4af37;\n }\n .chat-container {\n background: #f9f6ef;\n background-image: radial-gradient(circle at 10% 20%, rgba(212,175,55,0.05) 2%, transparent 2.5%);\n background-size: 30px 30px;\n padding: 1.2rem;\n height: 420px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n .message {\n display: flex;\n flex-direction: column;\n max-width: 85%;\n animation: fadeSlide 0.2s ease;\n }\n .message.user { align-self: flex-end; }\n .message.bot { align-self: flex-start; }\n .bubble {\n padding: 0.7rem 1rem;\n border-radius: 1.2rem;\n font-size: 0.9rem;\n line-height: 1.45;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n }\n .user .bubble {\n background: #dcf8c5;\n color: #1e2a2f;\n border-bottom-right-radius: 0.3rem;\n }\n .bot .bubble {\n background: white;\n color: #1e2a3a;\n border-bottom-left-radius: 0.3rem;\n border-left: 3px solid #d4af37;\n }\n .time {\n font-size: 0.65rem;\n color: #6b6f76;\n margin: 0.2rem 0.5rem 0;\n }\n .user .time { text-align: right; }\n .typing {\n background: white;\n padding: 0.6rem 1rem;\n border-radius: 1.2rem;\n width: fit-content;\n display: flex;\n gap: 5px;\n align-items: center;\n border-left: 3px solid #d4af37;\n }\n .typing span {\n width: 8px;\n height: 8px;\n background: #9b9b9b;\n border-radius: 50%;\n display: inline-block;\n animation: typing 1.4s infinite ease both;\n }\n .typing span:nth-child(1) { animation-delay: 0s; }\n .typing span:nth-child(2) { animation-delay: 0.2s; }\n .typing span:nth-child(3) { animation-delay: 0.4s; }\n @keyframes typing {\n 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n 30% { transform: translateY(-6px); opacity: 1; }\n }\n @keyframes fadeSlide {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .input-area {\n background: #ffffff;\n padding: 1rem;\n display: flex;\n gap: 0.7rem;\n border-top: 1px solid #e2dccd;\n }\n .input-area input {\n flex: 1;\n padding: 0.8rem 1rem;\n border: 1px solid #ddd2b0;\n border-radius: 2rem;\n outline: none;\n font-size: 0.9rem;\n background: #fffdf9;\n }\n .input-area input:focus {\n border-color: #d4af37;\n box-shadow: 0 0 0 2px rgba(212,175,55,0.2);\n }\n .input-area button {\n background: #1e2a3a;\n border: none;\n border-radius: 2rem;\n padding: 0 1.4rem;\n font-weight: 600;\n color: #ffdf8c;\n cursor: pointer;\n transition: 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 0.9rem;\n }\n .input-area button:hover {\n background: #d4af37;\n color: #1e2a3a;\n transform: scale(0.97);\n }\n .wa-footer {\n background: #1e2a3a;\n padding: 0.9rem 1.5rem;\n text-align: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n border-top: 1px solid #d4af37;\n }\n .wa-button {\n background: #25d366;\n padding: 0.6rem 1.2rem;\n border-radius: 2rem;\n color: white;\n text-decoration: none;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: 0.2s;\n font-size: 0.85rem;\n }\n .wa-button:hover {\n background: #128c7e;\n transform: translateY(-2px);\n }\n .footer-note {\n color: #ffdf8c;\n font-size: 0.7rem;\n }\n .suggestions {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 12px 15px;\n background: #f2efe3;\n border-top: 1px solid #e2dccd;\n }\n .chip {\n background: #e9e3d0;\n padding: 6px 16px;\n border-radius: 30px;\n font-size: 0.75rem;\n cursor: pointer;\n transition: 0.1s;\n font-weight: 500;\n color: #2c3e4e;\n }\n .chip:hover {\n background: #d4af37;\n color: #0f1a24;\n }\n @media (max-width: 550px) {\n .chat-container { height: 360px; }\n .header-text h1 { font-size: 1.2rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"card\">\n <div class=\"header\">\n <div class=\"logo-icon\">\u2696\ufe0f\ud83e\udd85<\/div>\n <div class=\"header-text\">\n <h1>LBH ABG | ADVOKAT BERSAMA GARUDA<\/h1>\n <p>Lembaga Bantuan Hukum \u2022 Advokat Bersama Garuda<\/p>\n <div class=\"badge\">#DasSeinDasSollen | #KUHP2023 | #KeadilanKreatif<\/div>\n <\/div>\n <\/div>\n\n <div class=\"chat-container\" id=\"chatContainer\">\n <div class=\"message bot\">\n <div class=\"bubble\">\n \ud83e\udd85 <strong>Salam Keadilan!<\/strong> Kami adalah <strong>LBH ABG Advokat Bersama Garuda<\/strong> \u2014 garda hukum bagi pelaku industri kreatif, seniman, dan masyarakat pencari keadilan.<br><br>\n Kami hadir untuk menjembatani <strong>das Sein<\/strong> (hukum positif yang berlaku) dengan <strong>das Sollen<\/strong> (cita hukum dan keadilan substantif). Diskusikan bersama kami:<br>\n \u2022 KUHP terbaru (UU No. 1 Tahun 2023)<br>\n \u2022 KUHPerdata & Hukum Kontrak<br>\n \u2022 Kasus korupsi pengadaan jasa kreatif<br>\n \u2022 Perlindungan Hak Kekayaan Intelektual<br>\n \u2022 Asas praduga tak bersalah & due process of law<br><br>\n \ud83d\udc49 Ketik pertanyaan atau pilih saran di bawah.\n <\/div>\n <div class=\"time\">Online \u2022 Siap Membantu<\/div>\n <\/div>\n <\/div>\n\n <div class=\"input-area\">\n <input type=\"text\" id=\"userInput\" placeholder=\"Tanyakan seputar bantuan hukum, KUHP baru, kontrak kreatif, dll.\" autocomplete=\"off\">\n <button id=\"sendBtn\">\u27a4 Kirim<\/button>\n <\/div>\n\n <div class=\"wa-footer\">\n <span class=\"footer-note\">\ud83d\udcde Konsultasi Hukum Awal Gratis \u2022 Advokat Bersama Garuda<\/span>\n <a href=\"https:\/\/wa.me\/628121331832?text=Halo%20LBH%20ABG%2C%20saya%20butuh%20konsultasi%20hukum%20terkait%20industri%20kreatif\" \n class=\"wa-button\" target=\"_blank\" rel=\"noopener noreferrer\">\n \ud83d\udcac Chat WhatsApp 0812-1331-832\n <\/a>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ======================== RESPON CERDAS BERDASARKAN NORMA ========================\n function getSmartResponse(userMessage) {\n const msg = userMessage.toLowerCase().trim();\n \n \/\/ ---- 1. Das Sein vs Das Sollen ----\n if (msg.includes(\"das sein\") || msg.includes(\"das sollen\") || (msg.includes(\"sein\") && msg.includes(\"sollen\"))) {\n return \"\ud83d\udcda **Das Sein** adalah hukum positif yang berlaku saat ini (lex lata), seperti KUHP lama\/UU Tipikor\/KUHPerdata. **Das Sollen** adalah cita hukum (lex ferenda), yaitu apa yang seharusnya menurut keadilan. Dalam kasus Amsal Sitepu, das Sein (hukum pidana positif) memidanakan kreator karena tidak ada standar harga, sementara das Sollen menuntut adanya pedoman harga jasa kreatif yang adil. LBH ABG berjuang agar das Sollen diwujudkan dalam regulasi yang berpihak pada keadilan substantif.\";\n }\n \n \/\/ ---- 2. KUHP terbaru (UU No. 1\/2023) ----\n if (msg.includes(\"kuhp baru\") || msg.includes(\"kuhp 2023\") || (msg.includes(\"kuhp\") && (msg.includes(\"terbaru\") || msg.includes(\"baru\")))) {\n return \"\ud83d\udcd6 **KUHP Nasional (UU No. 1 Tahun 2023)** mulai berlaku 3 tahun setelah diundangkan (2026). Beberapa poin penting: penghapusan pidana penjara untuk delik tertentu, penguatan asas legalitas, perluasan pidana tambahan, dan pengaturan tindak pidana dengan pendekatan keadilan restoratif. Kaitannya dengan kreator: KUHP baru lebih menekankan ultimum remedium, sehingga perbedaan tafsir harga dalam pengadaan seharusnya tidak langsung dipidana tanpa ada unsur melawan hukum yang nyata. LBH ABG siap mengawal implementasinya.\";\n }\n \n \/\/ ---- 3. KUHPerdata & Hukum Kontrak Jasa Kreatif ----\n if (msg.includes(\"kuhperdata\") || (msg.includes(\"kontrak\") && (msg.includes(\"karya\") || msg.includes(\"jasa\"))) || msg.includes(\"wanprestasi\")) {\n return \"\u2696\ufe0f **KUHPerdata** mengatur perikatan (Buku III). Dalam kontrak jasa kreatif, pasal 1320 KUHPerdata mensyaratkan: kesepakatan, kecakapan, objek tertentu, dan sebab yang halal. Wanprestasi (pasal 1243 KUHPerdata) dapat berakibat ganti rugi. Namun, perbedaan tafsir harga bukan serta-merta wanprestasi jika tidak ada kesepakatan harga baku. Kami mendorong penggunaan klausul kontrak yang jelas dan mengacu pada pedoman harga jasa kreatif yang sedang disusun Kementerian Ekraf.\";\n }\n \n \/\/ ---- 4. Asas Hukum Acara Pidana (KUHAP) ----\n if (msg.includes(\"praduga tak bersalah\") || msg.includes(\"presumption\") || msg.includes(\"kuhap\") || msg.includes(\"acara pidana\")) {\n return \"\u2696\ufe0f **Praduga tak bersalah** (Pasal 8 ayat (1) UU No. 8\/1981 KUHAP) adalah hak asasi tersangka\/terdakwa. Dalam kasus Amsal Sitepu, kami menghormati proses hukum, namun mengingatkan bahwa aparat penegak hukum harus membuktikan unsur melawan hukum dan kerugian negara secara sah. Asas due process of law juga dijamin dalam UU Kekuasaan Kehakiman. LBH ABG siap mendampingi setiap warga negara yang merasa haknya dilanggar dalam proses pidana.\";\n }\n \n \/\/ ---- 5. Kasus Amsal Sitepu \/ Korupsi Pengadaan Jasa Kreatif ----\n if (msg.includes(\"amsal\") || msg.includes(\"sitepu\") || (msg.includes(\"korupsi\") && msg.includes(\"kreatif\")) || (msg.includes(\"video\") && msg.includes(\"desa\"))) {\n return \"\ud83d\udccc **Kasus Amsal Sitepu** menjadi simbol problematika pengadaan jasa kreatif. Secara *das Sein*, ia didakwa Pasal 2 atau 3 UU Tipikor karena diduga merugikan negara. Namun, *das Sollen* menghendaki adanya pedoman objektif penilaian Harga Perkiraan Sendiri (HPS). Kementerian Ekraf kini menyusun pedoman jasa kreatif yang akan menjadi acuan. Kami di LBH ABG mendorong agar pedoman tersebut segera diintegrasikan ke dalam Perpres Pengadaan Barang\/Jasa dan PMK, sehingga kejadian serupa tidak terulang. Butuh pendampingan hukum? Hubungi kami via WA.\";\n }\n \n \/\/ ---- 6. Pedoman Jasa Kreatif & Regulasi Pengadaan ----\n if (msg.includes(\"pedoman\") || msg.includes(\"standar harga\") || msg.includes(\"hps\") || (msg.includes(\"pengadaan\") && msg.includes(\"jasa\"))) {\n return \"\ud83d\udcd8 **Pedoman Jasa Kreatif** sedang disusun Kementerian Ekraf bersama asosiasi. Rencananya akan menjadi masukan bagi PMK (Standar Biaya Masuk\/Keluar) dan diharapkan memberi kepastian hukum bagi kreator serta menjadi rujukan auditor. Kami menilai langkah ini penting untuk mencegah kriminalisasi akibat ketiadaan standar. Jika Anda butuh advokasi terkait kebijakan ini, tim kami siap mendampingi.\";\n }\n \n \/\/ ---- 7. Bantuan Hukum Gratis & Advokat ----\n if (msg.includes(\"bantuan hukum\") || msg.includes(\"advokat\") || msg.includes(\"pendampingan\") || msg.includes(\"pengacara\") || msg.includes(\"gratis\")) {\n return \"\ud83d\udee1\ufe0f LBH ABG Advokat Bersama Garuda menyediakan layanan konsultasi awal gratis, pendampingan hukum, dan litigasi untuk pelaku industri kreatif, termasuk pembelaan dalam kasus pengadaan barang\/jasa, hak kekayaan intelektual, dan sengketa kontrak. Untuk konsultasi lebih lanjut, silakan hubungi WhatsApp kami: 0812-1331-832.\";\n }\n \n \/\/ ---- 8. Filosofi LBH ABG & Garuda ----\n if (msg.includes(\"lbh abg\") || (msg.includes(\"siapa\") && (msg.includes(\"kalian\") || msg.includes(\"anda\"))) || msg.includes(\"garuda\")) {\n return \"\ud83c\udfdb\ufe0f **LBH ABG (Advokat Bersama Garuda)** adalah lembaga bantuan hukum yang berfokus pada pembelaan keadilan bagi masyarakat, terutama pelaku ekonomi kreatif. Filosofi kami: **A**manah, **B**erani, **G**aruda \u2014 mengabdi pada kebenaran dan keadilan dengan semangat Garuda sebagai pelindung bangsa. Kami hadir untuk memberikan akses keadilan tanpa diskriminasi.\";\n }\n \n \/\/ ---- 9. Hak Kekayaan Intelektual (HKI) ----\n if (msg.includes(\"hak cipta\") || msg.includes(\"hki\") || msg.includes(\"intelektual\") || msg.includes(\"merek\")) {\n return \"\ud83c\udfa8 Perlindungan Hak Kekayaan Intelektual diatur dalam UU No. 28 Tahun 2014 (Hak Cipta), UU Merek, dan lainnya. Kreator wajib mendaftarkan karya untuk mendapatkan perlindungan hukum. Kami membantu pendaftaran HKI, penyusunan kontrak lisensi, serta penanganan sengketa pelanggaran. Jangan biarkan karya Anda dieksploitasi tanpa hak.\";\n }\n \n \/\/ ---- 10. Harga Jasa Kreatif & Kewajaran ----\n if (msg.includes(\"harga\") || msg.includes(\"biaya\") || msg.includes(\"tarif\") || (msg.includes(\"kewajaran\") && msg.includes(\"harga\"))) {\n return \"\ud83d\udcb0 Penetapan harga jasa kreatif harus mempertimbangkan kompleksitas, pengalaman, dan reputasi kreator. Dalam ranah pidana, ketiadaan standar objektif sering menyebabkan perbedaan tafsir yang merugikan kreator. Kami mendorong penggunaan pedoman harga yang disusun bersama asosiasi, serta menjadikan parameter tersebut sebagai acuan dalam penegakan hukum.\";\n }\n \n \/\/ ---- 11. Ucapan Terima Kasih ----\n if (msg.includes(\"terima kasih\") || msg.includes(\"makasih\") || msg.includes(\"thank\")) {\n return \"Sama-sama! Kami senang bisa membantu. Jangan ragu untuk terus bertanya atau hubungi langsung tim advokat kami melalui WhatsApp. Keadilan adalah hak setiap insan kreatif. \ud83e\udd85\";\n }\n \n \/\/ ---- Default: edukasi normatif ----\n return \"\ud83e\udd1d Terima kasih telah menghubungi LBH ABG Advokat Bersama Garuda. Pertanyaan Anda akan kami jawab dengan perspektif hukum positif (*das Sein*) dan cita keadilan (*das Sollen*). Untuk konsultasi lebih mendalam, silakan tekan tombol WhatsApp di bawah dan tim advokat kami akan merespon dalam 1x24 jam. Tetap semangat berkarya dengan kepastian hukum!\";\n }\n\n \/\/ DOM elements\n const chatContainer = document.getElementById('chatContainer');\n const userInput = document.getElementById('userInput');\n const sendBtn = document.getElementById('sendBtn');\n let isBotTyping = false;\n\n function scrollToBottom() {\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n\n function addMessage(text, sender = 'user') {\n const messageDiv = document.createElement('div');\n messageDiv.className = `message ${sender}`;\n const bubbleDiv = document.createElement('div');\n bubbleDiv.className = 'bubble';\n bubbleDiv.innerText = text;\n const timeSpan = document.createElement('div');\n timeSpan.className = 'time';\n const now = new Date();\n timeSpan.innerText = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n messageDiv.appendChild(bubbleDiv);\n messageDiv.appendChild(timeSpan);\n chatContainer.appendChild(messageDiv);\n scrollToBottom();\n }\n\n function showTypingIndicator() {\n const typingDiv = document.createElement('div');\n typingDiv.className = 'message bot';\n typingDiv.id = 'typingIndicator';\n typingDiv.innerHTML = `<div class=\"typing\"><span><\/span><span><\/span><span><\/span><\/div>`;\n chatContainer.appendChild(typingDiv);\n scrollToBottom();\n return typingDiv;\n }\n\n function removeTypingIndicator() {\n const indicator = document.getElementById('typingIndicator');\n if (indicator) indicator.remove();\n }\n\n async function botReply(userText) {\n if (isBotTyping) return;\n isBotTyping = true;\n const typingDiv = showTypingIndicator();\n await new Promise(resolve => setTimeout(resolve, 700 + Math.random() * 400));\n removeTypingIndicator();\n const reply = getSmartResponse(userText);\n addMessage(reply, 'bot');\n isBotTyping = false;\n }\n\n async function sendUserMessage() {\n const message = userInput.value.trim();\n if (message === \"\") return;\n addMessage(message, 'user');\n userInput.value = \"\";\n await botReply(message);\n }\n\n sendBtn.addEventListener('click', sendUserMessage);\n userInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n sendUserMessage();\n }\n });\n\n \/\/ Saran pertanyaan dengan tema normatif (Das Sein, Das Sollen, KUHP baru, KUHPerdata, KUHAP, dll)\n const suggestions = [\n \"Das Sein vs Das Sollen dalam kasus Amsal Sitepu\",\n \"KUHP terbaru (UU 1\/2023) dan implikasinya bagi kreator\",\n \"KUHPerdata: wanprestasi dalam kontrak jasa kreatif\",\n \"Asas praduga tak bersalah & KUHAP\",\n \"Pedoman harga jasa kreatif dan kepastian hukum\",\n \"Hak cipta & perlindungan HKI untuk kreator\"\n ];\n const suggestionDiv = document.createElement('div');\n suggestionDiv.className = 'suggestions';\n suggestions.forEach(sug => {\n const chip = document.createElement('span');\n chip.className = 'chip';\n chip.innerText = sug;\n chip.onclick = () => {\n userInput.value = sug;\n sendUserMessage();\n };\n suggestionDiv.appendChild(chip);\n });\n document.querySelector('.input-area').insertAdjacentElement('afterend', suggestionDiv);\n \n \/\/ Pesan tambahan jika belum ada interaksi\n setTimeout(() => {\n if (chatContainer.children.length <= 1) {\n addMessage(\"\ud83e\udd85 Kami hadir untuk menjembatani *das Sein* dan *das Sollen* dalam penegakan hukum. Pilih saran pertanyaan di atas atau ketik sendiri.\", 'bot');\n }\n }, 1500);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b03fc5b elementor-widget elementor-widget-html\" data-id=\"b03fc5b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\r\n <title>Form Janji Temu - LBH Advokat Bersama Garuda<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\r\n }\r\n\r\n body {\r\n background: #f0f2f5;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n }\r\n\r\n .container {\r\n max-width: 480px;\r\n width: 100%;\r\n margin: 0 auto;\r\n }\r\n\r\n .card {\r\n background: white;\r\n border-radius: 28px;\r\n padding: 2rem 1.8rem;\r\n text-align: center;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n }\r\n\r\n .icon {\r\n font-size: 3rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .card h1 {\r\n font-size: 1.6rem;\r\n color: #1a2a3a;\r\n margin-bottom: 0.5rem;\r\n font-weight: 700;\r\n }\r\n\r\n .card p {\r\n font-size: 0.9rem;\r\n color: #4a5568;\r\n margin-bottom: 1.8rem;\r\n line-height: 1.5;\r\n }\r\n\r\n .btn-buat {\r\n background: #8B0000;\r\n color: white;\r\n border: none;\r\n padding: 0.9rem 2rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n width: 100%;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn-buat:hover {\r\n background: #6b0000;\r\n transform: scale(0.98);\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 1000;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n }\r\n\r\n .modal.show {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: white;\r\n border-radius: 28px;\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n animation: slideUp 0.25s ease;\r\n box-shadow: 0 20px 35px -10px rgba(0,0,0,0.3);\r\n }\r\n\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .modal-header {\r\n background: #8B0000;\r\n color: white;\r\n padding: 1.2rem 1.5rem;\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-radius: 28px 28px 0 0;\r\n }\r\n\r\n .modal-header h2 {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n\r\n .close-modal {\r\n background: rgba(255,255,255,0.15);\r\n border: none;\r\n color: white;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n transition: 0.15s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .close-modal:hover {\r\n background: rgba(255,255,255,0.3);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .modal-body {\r\n padding: 1.5rem;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-weight: 600;\r\n margin-bottom: 0.4rem;\r\n color: #1a202c;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .required::after {\r\n content: \" *\";\r\n color: #e53e3e;\r\n }\r\n\r\n input, select, textarea {\r\n width: 100%;\r\n padding: 0.7rem 1rem;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 14px;\r\n font-size: 0.9rem;\r\n transition: 0.15s;\r\n background: #ffffff;\r\n color: #1a202c;\r\n }\r\n\r\n input:focus, select:focus, textarea:focus {\r\n outline: none;\r\n border-color: #8B0000;\r\n box-shadow: 0 0 0 2px rgba(139,0,0,0.1);\r\n }\r\n\r\n .radio-group, .checkbox-group {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.8rem;\r\n margin-top: 0.3rem;\r\n }\r\n\r\n .radio-group label, .checkbox-group label {\r\n font-weight: 500;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n cursor: pointer;\r\n font-size: 0.85rem;\r\n color: #2d3748;\r\n }\r\n\r\n input[type=\"radio\"], input[type=\"checkbox\"] {\r\n width: 16px;\r\n height: 16px;\r\n margin: 0;\r\n }\r\n\r\n .other-date {\r\n margin-top: 0.5rem;\r\n width: 100%;\r\n }\r\n\r\n .other-date input {\r\n margin-top: 0.4rem;\r\n }\r\n\r\n .submit-btn {\r\n background: #8B0000;\r\n color: white;\r\n border: none;\r\n padding: 0.8rem 1.5rem;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n width: 100%;\r\n transition: 0.15s;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .submit-btn:hover {\r\n background: #6b0000;\r\n transform: scale(0.98);\r\n }\r\n\r\n .alert {\r\n padding: 0.8rem;\r\n border-radius: 14px;\r\n margin-bottom: 1.2rem;\r\n font-size: 0.85rem;\r\n display: none;\r\n font-weight: 500;\r\n text-align: center;\r\n }\r\n\r\n .alert-success {\r\n background: #c6f6d5;\r\n color: #22543d;\r\n border-left: 4px solid #38a169;\r\n }\r\n\r\n .alert-error {\r\n background: #fed7d7;\r\n color: #742a2a;\r\n border-left: 4px solid #e53e3e;\r\n }\r\n\r\n .modal-footer {\r\n text-align: center;\r\n font-size: 0.7rem;\r\n padding: 0.8rem;\r\n color: #718096;\r\n background: #f7fafc;\r\n border-top: 1px solid #e2e8f0;\r\n border-radius: 0 0 28px 28px;\r\n }\r\n\r\n .modal-content::-webkit-scrollbar {\r\n width: 5px;\r\n }\r\n\r\n .modal-content::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n\r\n .modal-content::-webkit-scrollbar-thumb {\r\n background: #cbd5e1;\r\n border-radius: 10px;\r\n }\r\n\r\n .loading {\r\n display: inline-block;\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n border-top-color: transparent;\r\n animation: spin 0.6s linear infinite;\r\n margin-right: 8px;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Elemen untuk Formspree Ajax *\/\r\n [data-fs-success] {\r\n background: #c6f6d5;\r\n color: #22543d;\r\n padding: 0.8rem;\r\n border-radius: 14px;\r\n margin-bottom: 1rem;\r\n display: none;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n [data-fs-error] {\r\n background: #fed7d7;\r\n color: #742a2a;\r\n padding: 0.8rem;\r\n border-radius: 14px;\r\n margin-bottom: 1rem;\r\n display: none;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n [data-fs-error=\"field\"] {\r\n font-size: 0.75rem;\r\n margin-top: 0.25rem;\r\n color: #e53e3e;\r\n background: none;\r\n padding: 0;\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"icon\">\ud83d\udcc5<\/div>\r\n <h1>Buat Janji Temu<\/h1>\r\n <p>Klik tombol di bawah untuk mengisi formulir janji temu<\/p>\r\n <button class=\"btn-buat\" onclick=\"openModal()\">\r\n \u270f\ufe0f Buat Janji Temu Sekarang\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"appointmentModal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h2>Formulir Janji Temu<\/h2>\r\n <button class=\"close-modal\" onclick=\"closeModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n \r\n <div data-fs-success><\/div>\r\n <div data-fs-error><\/div>\r\n \r\n <form id=\"my-form\">\r\n \r\n <input type=\"hidden\" name=\"_subject\" value=\"\ud83d\udccb FORM JANJI TEMU - Klien Baru\">\r\n <input type=\"hidden\" name=\"_replyto\" value=\"lbhadvokatbersamagaruda@gmail.com\">\r\n <input type=\"hidden\" name=\"_format\" value=\"html\">\r\n \r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Nama Lengkap<\/label>\r\n <input type=\"text\" name=\"Nama\" required data-fs-field>\r\n <span data-fs-error=\"Nama\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Nomor Telepon \/ WhatsApp<\/label>\r\n <input type=\"tel\" name=\"Telepon\" required data-fs-field>\r\n <span data-fs-error=\"Telepon\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Alamat Email (Opsional)<\/label>\r\n <input type=\"email\" name=\"Email\" data-fs-field>\r\n <span data-fs-error=\"Email\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Tujuan Pertemuan<\/label>\r\n <select name=\"Tujuan\" required data-fs-field>\r\n <option value=\"\">-- Pilih --<\/option>\r\n <option>Konsultasi hukum awal<\/option>\r\n <option>Pendampingan perkara<\/option>\r\n <option>Mediasi \/ Negosiasi<\/option>\r\n <option>Pendirian Perusahaan<\/option>\r\n <option>Perizinan (NIB\/SIPB\/Amdal)<\/option>\r\n <option>Lainnya<\/option>\r\n <\/select>\r\n <span data-fs-error=\"Tujuan\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Tanggal Pilihan<\/label>\r\n <div class=\"checkbox-group\">\r\n <label><input type=\"checkbox\" name=\"Tanggal\" value=\"10 Mei 2026\"> 10 Mei 2026<\/label>\r\n <label><input type=\"checkbox\" name=\"Tanggal\" value=\"11 Mei 2026\"> 11 Mei 2026<\/label>\r\n <label><input type=\"checkbox\" name=\"Tanggal\" value=\"12 Mei 2026\"> 12 Mei 2026<\/label>\r\n <\/div>\r\n <div class=\"other-date\">\r\n <label><input type=\"checkbox\" id=\"otherDateCheck\"> Tanggal lainnya:<\/label>\r\n <input type=\"date\" id=\"otherDateInput\" name=\"Tanggal_Lainnya\" disabled>\r\n <\/div>\r\n <span data-fs-error=\"Tanggal\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Jam Pilihan<\/label>\r\n <div class=\"radio-group\">\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Pagi (09.00-12.00)\" required data-fs-field> Pagi (09.00-12.00)<\/label>\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Siang (13.00-15.00)\"> Siang (13.00-15.00)<\/label>\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Sore (15.30-17.00)\"> Sore (15.30-17.00)<\/label>\r\n <label><input type=\"radio\" name=\"Jam\" value=\"Fleksibel\"> Fleksibel<\/label>\r\n <\/div>\r\n <span data-fs-error=\"Jam\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Perkiraan Durasi<\/label>\r\n <select name=\"Durasi\" data-fs-field>\r\n <option>15 menit<\/option>\r\n <option>30 menit<\/option>\r\n <option>1 jam<\/option>\r\n <option>>1 jam<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Metode Pertemuan<\/label>\r\n <div class=\"radio-group\">\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Tatap muka (Kantor)\" required data-fs-field> Tatap muka (Kantor)<\/label>\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Zoom \/ Google Meet\"> Zoom \/ Google Meet<\/label>\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Telepon \/ WhatsApp\"> Telepon \/ WhatsApp<\/label>\r\n <label><input type=\"radio\" name=\"Metode\" value=\"Terserah pihak kami\"> Terserah pihak kami<\/label>\r\n <\/div>\r\n <span data-fs-error=\"Metode\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label>Catatan (opsional)<\/label>\r\n <textarea name=\"Catatan\" rows=\"2\" placeholder=\"Tulis keperluan Anda...\" data-fs-field><\/textarea>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-group\">\r\n <label class=\"required\">Konfirmasi<\/label>\r\n <div class=\"radio-group\">\r\n <label><input type=\"radio\" name=\"Konfirmasi\" value=\"Ya, setuju dihubungi\" required data-fs-field> Ya, setuju dihubungi via WA\/telepon<\/label>\r\n <label><input type=\"radio\" name=\"Konfirmasi\" value=\"Tidak\"> Tidak<\/label>\r\n <\/div>\r\n <span data-fs-error=\"Konfirmasi\" class=\"field-error\"><\/span>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"submit-btn\" data-fs-submit-btn>Kirim Janji Temu<\/button>\r\n <\/form>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <strong>\ud83d\udcde WhatsApp: 0812-1331-832<\/strong> | Email: lbhadvokatbersamagaruda@gmail.com\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/@formspree\/ajax@1\" defer><\/script>\r\n\r\n<script>\r\n \/\/ Modal functions\r\n const modal = document.getElementById('appointmentModal');\r\n const otherDateCheck = document.getElementById('otherDateCheck');\r\n const otherDateInput = document.getElementById('otherDateInput');\r\n const form = document.getElementById('my-form');\r\n const successDiv = document.querySelector('[data-fs-success]');\r\n const errorDiv = document.querySelector('[data-fs-error]');\r\n\r\n function openModal() {\r\n modal.classList.add('show');\r\n document.body.style.overflow = 'hidden';\r\n \/\/ Reset pesan sukses\/error\r\n if (successDiv) successDiv.style.display = 'none';\r\n if (errorDiv) errorDiv.style.display = 'none';\r\n }\r\n\r\n function closeModal() {\r\n modal.classList.remove('show');\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) closeModal();\r\n });\r\n\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.classList.contains('show')) closeModal();\r\n });\r\n\r\n \/\/ Logic tanggal lainnya\r\n if (otherDateCheck) {\r\n otherDateCheck.addEventListener('change', function() {\r\n otherDateInput.disabled = !this.checked;\r\n if (!this.checked) otherDateInput.value = '';\r\n });\r\n }\r\n\r\n \/\/ Inisialisasi Formspree\r\n window.formspree = window.formspree || function () { \r\n (formspree.q = formspree.q || []).push(arguments); \r\n };\r\n \r\n formspree('initForm', { \r\n formElement: '#my-form', \r\n formId: 'mzdykojj',\r\n onSuccess: function() {\r\n \/\/ Reset form setelah sukses\r\n form.reset();\r\n if(otherDateInput) otherDateInput.disabled = true;\r\n if(otherDateCheck) otherDateCheck.checked = false;\r\n \/\/ Tutup modal setelah 3 detik\r\n setTimeout(() => closeModal(), 3000);\r\n }\r\n });\r\n\r\n \/\/ Validasi tambahan sebelum submit\r\n form.addEventListener('submit', function(e) {\r\n const checkboxes = document.querySelectorAll('input[name=\"Tanggal\"]:checked');\r\n const otherDateFilled = otherDateCheck?.checked && otherDateInput.value !== '';\r\n \r\n if (checkboxes.length === 0 && !otherDateFilled) {\r\n e.preventDefault();\r\n \/\/ Tampilkan error manual\r\n if (errorDiv) {\r\n errorDiv.textContent = '\u274c Pilih minimal satu tanggal pertemuan';\r\n errorDiv.style.display = 'block';\r\n setTimeout(() => {\r\n errorDiv.style.display = 'none';\r\n }, 4000);\r\n }\r\n return false;\r\n }\r\n \r\n \/\/ Tambahkan tanggal lainnya ke form data\r\n if (otherDateCheck?.checked && otherDateInput.value) {\r\n const hiddenInput = document.createElement('input');\r\n hiddenInput.type = 'hidden';\r\n hiddenInput.name = 'Tanggal';\r\n hiddenInput.value = otherDateInput.value;\r\n form.appendChild(hiddenInput);\r\n }\r\n \r\n \/\/ Tambahkan timestamp\r\n const timestampInput = document.createElement('input');\r\n timestampInput.type = 'hidden';\r\n timestampInput.name = 'Waktu_Pengiriman';\r\n timestampInput.value = new Date().toLocaleString('id-ID');\r\n form.appendChild(timestampInput);\r\n \r\n return true;\r\n });\r\n<\/script>\r\n<\/body>\r\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>Chat bot LBH ABG | Advokat Bersama Garuda | Bantuan Hukum & Industri Kreatif \u2696\ufe0f\ud83e\udd85 LBH ABG | ADVOKAT BERSAMA GARUDA Lembaga Bantuan Hukum \u2022 Advokat Bersama Garuda #DasSeinDasSollen | #KUHP2023 | #KeadilanKreatif \ud83e\udd85 Salam Keadilan! Kami adalah LBH ABG Advokat Bersama Garuda \u2014 garda hukum bagi pelaku industri kreatif, seniman, dan masyarakat pencari keadilan. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":22,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":737,"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/pages\/681\/revisions\/737"}],"wp:attachment":[{"href":"https:\/\/advokatbersamagaruda.com\/lbh\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}