{"id":1042,"date":"2026-08-03T23:33:42","date_gmt":"2026-08-03T23:33:42","guid":{"rendered":"https:\/\/lab.rwb.my.id\/sma\/?page_id=1042"},"modified":"2026-08-13T03:52:37","modified_gmt":"2026-08-13T03:52:37","slug":"contact","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/sma\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1042\" class=\"elementor elementor-1042\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d93128f e-con-full e-flex e-con e-parent\" data-id=\"d93128f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e5720e elementor-widget elementor-widget-html\" data-id=\"7e5720e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ==================================================================\n   \ud83c\udfa8 PENGATURAN WARNA (UBAH KODE WARNA DI SINI SAJA) \n   ================================================================== *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-card-bg: #E6E7EE;\n  --clay-screen-bg: #F4F5F7; \/* Warna layar dalam chat *\/\n  --clay-text: #3A3A3A;\n  --clay-text-soft: #6B7280;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-accent-secondary: #A855F7;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n\/* === KODE CSS DI BAWAH INI JANGAN DIEDIT JIKA TIDAK PAHAM === *\/\n\n.chat-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.chat-section-wrap {\n  background: var(--clay-bg);\n  min-height: 100vh;\n  min-height: 100svh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 80px 20px;\n  overflow: hidden;\n}\n\n.chat-header {\n  text-align: center;\n  margin-bottom: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  \n  \/* SETUP ANIMASI FADE UP *\/\n  opacity: 0;\n  transform: translateY(50px);\n  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.chat-header.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.chat-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.chat-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.chat-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.5rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 10px; letter-spacing: -0.5px;\n}\n.chat-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, var(--clay-accent), var(--clay-accent-secondary)); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n\/* === KARTU CHAT CLAY === *\/\n.chat-card {\n  position: relative;\n  width: 100%;\n  max-width: 420px;\n  background: var(--clay-card-bg);\n  border-radius: 32px;\n  padding: 15px;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light);\n  \n  \/* SETUP ANIMASI FADE UP (DELAY 0.2s BIAR MUNCUL SETELAH JUDUL) *\/\n  opacity: 0;\n  transform: translateY(50px);\n  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;\n}\n.chat-card.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.chat-top-bar {\n  display: flex;\n  align-items: center;\n  gap: 15px;\n  padding: 10px 10px 20px;\n  border-bottom: 2px solid rgba(197, 198, 208, 0.3);\n  margin-bottom: 15px;\n}\n.chat-avatar {\n  width: 45px; height: 45px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, var(--clay-accent), var(--clay-accent-secondary));\n  display: flex; align-items: center; justify-content: center;\n  font-size: 1.4rem; color: #fff;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), inset 1px 1px 2px rgba(255,255,255,0.4);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.chat-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.chat-info h3 { font-size: 0.9rem; color: var(--clay-text); margin-bottom: 2px; }\n.chat-info p { font-size: 0.7rem; color: #34D399; font-weight: 600; display: flex; align-items: center; gap: 5px; }\n.chat-info p::before { content: ''; width: 7px; height: 7px; background: #34D399; border-radius: 50%; box-shadow: 0 0 5px #34D399; }\n\n\/* === AREA LAYAR CHAT === *\/\n.chat-screen {\n  height: 320px;\n  background: var(--clay-screen-bg);\n  border-radius: 20px;\n  padding: 20px 15px;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow-y: auto;\n  box-shadow: inset 3px 3px 6px var(--clay-shadow-dark), inset -3px -3px 6px var(--clay-shadow-light);\n}\n.chat-screen::-webkit-scrollbar { width: 4px; }\n.chat-screen::-webkit-scrollbar-thumb { background: var(--clay-shadow-dark); border-radius: 10px; }\n\n\/* === BUBBLE CHAT === *\/\n.chat-bubble {\n  max-width: 80%;\n  padding: 12px 18px;\n  font-size: 0.85rem;\n  line-height: 1.4;\n  color: var(--clay-text);\n  opacity: 0;\n  transform: translateY(20px) scale(0.8);\n  animation: bubblePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n@keyframes bubblePop {\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.bubble-incoming {\n  align-self: flex-start;\n  background: var(--clay-bg);\n  border-radius: 18px 18px 18px 4px;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n}\n.bubble-outgoing {\n  align-self: flex-end;\n  background: var(--clay-accent);\n  color: #fff;\n  border-radius: 18px 18px 4px 18px;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), inset 1px 1px 2px rgba(255,255,255,0.3);\n}\n\n\/* === EFEK NGETIK (TYPING) === *\/\n.typing-bubble {\n  align-self: flex-start;\n  background: var(--clay-bg);\n  border-radius: 18px 18px 18px 4px;\n  padding: 15px 18px;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n  display: flex;\n  gap: 5px;\n}\n.typing-dot {\n  width: 8px; height: 8px;\n  background: var(--clay-text-soft);\n  border-radius: 50%;\n  animation: typingBounce 1s infinite;\n}\n.typing-dot:nth-child(2) { animation-delay: 0.2s; }\n.typing-dot:nth-child(3) { animation-delay: 0.4s; }\n\n@keyframes typingBounce {\n  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n  30% { transform: translateY(-6px); opacity: 1; }\n}\n\n\/* === BUBBLE LINK \/ HASIL === *\/\n.bubble-link {\n  margin-top: 5px;\n  display: inline-block;\n  padding: 8px 16px;\n  background: var(--clay-bg);\n  color: var(--clay-accent);\n  font-size: 0.8rem;\n  font-weight: 700;\n  text-decoration: none;\n  border-radius: 12px;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n  transition: transform 0.2s ease;\n}\n.bubble-link:hover { transform: translateY(-2px); }\n\n\/* === TOMBOL QUICK REPLY === *\/\n.quick-replies {\n  padding: 20px 10px 5px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.qr-btn {\n  padding: 14px 20px;\n  background: var(--clay-bg);\n  border: none;\n  border-radius: 16px;\n  font-family: 'Poppins', sans-serif;\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: var(--clay-text);\n  cursor: pointer;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  box-shadow: 5px 5px 10px var(--clay-shadow-dark), -5px -5px 10px var(--clay-shadow-light);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n.qr-btn:hover { transform: translateY(-2px); }\n.qr-btn:active { transform: scale(0.98); box-shadow: inset 3px 3px 6px var(--clay-shadow-dark), inset -3px -3px 6px var(--clay-shadow-light); }\n.qr-btn-icon {\n  width: 35px; height: 35px;\n  border-radius: 10px;\n  background: rgba(244, 114, 182, 0.15);\n  color: var(--clay-accent);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 1.1rem;\n  flex-shrink: 0;\n}\n.qr-btn.disabled { opacity: 0.4; pointer-events: none; }\n\n\/* === RESPONSIVE HP === *\/\n@media (max-width: 768px) {\n  .chat-section-wrap { padding: 60px 15px; }\n  .chat-card { padding: 10px; }\n  .chat-screen { height: 280px; padding: 15px 10px; }\n  .chat-bubble { font-size: 0.8rem; }\n}\n\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR === *\/\n.chat-section-wrap button:focus, \n.chat-section-wrap button:focus-visible,\n.chat-section-wrap a:focus,\n.chat-section-wrap a:focus-visible {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  text-decoration: none !important;\n}\n<\/style>\n\n<!-- ============================================== -->\n<!-- \ud83d\udcdd UBAH TEKS, LINK & GAMBAR DI BAWAH INI       -->\n<!-- ============================================== -->\n\n<section class=\"chat-section-wrap\" id=\"chatSection\">\n  \n  <div class=\"chat-header\" id=\"chatHeader\">\n    <div class=\"chat-badge\"><span><\/span> \ud83d\udcac Sini, Ngobrol<\/div>\n    <h2>Yuk, Ngobrol <em>Santai!<\/em><\/h2>\n  <\/div>\n\n  <div class=\"chat-card\" id=\"chatCard\">\n    \n    <!-- Top Bar (Info Admin) -->\n    <div class=\"chat-top-bar\">\n      <!-- UBAH LINK FOTO DI SINI -->\n      <div class=\"chat-avatar\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/Baby-Penguin.jpeg\" alt=\"Admin\">\n      <\/div>\n      <div class=\"chat-info\">\n        <h3>Clay Creative Team<\/h3>\n        <p>Online<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Layar Chat -->\n    <div class=\"chat-screen\" id=\"chatScreen\">\n      <!-- Pesan Awal dari Admin -->\n      <div class=\"chat-bubble bubble-incoming\">Halo sob! Ada yang bisa kita bantu hari ini? \ud83d\udc4b<\/div>\n    <\/div>\n\n    <!-- Tombol Quick Reply -->\n    <div class=\"quick-replies\" id=\"quickReplies\">\n      \n      <button class=\"qr-btn\" data-reply=\"Saya mau tanya harga website dong.\" data-bot=\"Bisa banget! Kita punya paket mulai dari 1,5 juta. Yuk klik tombol di bawah buat chat langsung sama admin dan dapat diskon khusus!\" data-link=\"https:\/\/wa.me\/6281227008020?text=Halo%20saya%20mau%20tanya%20harga%20website\">\n        <div class=\"qr-btn-icon\">\ud83d\udcb0<\/div>\n        <div>Tanya Harga Website<\/div>\n      <\/button>\n\n      <button class=\"qr-btn\" data-reply=\"Boleh lihat portofolio kalian?\" data-bot=\"Tentu! Kita udah ngerjain 50+ project keren dari berbagai industri. Klik di bawah buat lihat hasil karya kita.\" data-link=\"https:\/\/lab.rwb.my.id\/sma\/portfolio\/\">\n        <div class=\"qr-btn-icon\">\ud83c\udfa8<\/div>\n        <div>Lihat Portofolio<\/div>\n      <\/button>\n\n      <button class=\"qr-btn\" data-reply=\"Saya mau konsultasi gratis dong.\" data-bot=\"Mantap! Kita sediakan slot konsultasi gratis 30 menit seputar website & digital marketing. Klik tombol di bawah buat jadwalkannya ya.\" data-link=\"https:\/\/wa.me\/6281227008020?text=Halo%20saya%20mau%20konsultasi%20gratis\">\n        <div class=\"qr-btn-icon\">\ud83d\udcde<\/div>\n        <div>Konsultasi Gratis<\/div>\n      <\/button>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const chatSection = document.getElementById('chatSection');\n  const chatHeader = document.getElementById('chatHeader');\n  const chatCard = document.getElementById('chatCard');\n  const chatScreen = document.getElementById('chatScreen');\n  const quickReplies = document.getElementById('quickReplies');\n\n  \/\/ === LOGIKA INTERSECTION OBSERVER (FADE UP SAAT DI SCROLL) ===\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        chatHeader.classList.add('is-visible');\n        chatCard.classList.add('is-visible');\n        observer.unobserve(entry.target); \/\/ Berhenti ngawasin kalau udah muncul\n      }\n    });\n  }, { threshold: 0.2 }); \/\/ Muncul pas 20% section masuk layar\n\n  observer.observe(chatSection);\n\n\n  \/\/ === LOGIKA CHAT INTERAKTIF ===\n\n  \/\/ Fungsi buat nambah bubble chat\n  function addBubble(text, type) {\n    const bubble = document.createElement('div');\n    bubble.className = `chat-bubble bubble-${type}`;\n    bubble.innerText = text;\n    chatScreen.appendChild(bubble);\n    chatScreen.scrollTop = chatScreen.scrollHeight; \/\/ Auto scroll ke bawah\n  }\n\n  \/\/ Fungsi buat nambah tombol link di dalam bubble balasan\n  function addLinkBubble(linkText, linkUrl) {\n    const bubble = document.createElement('div');\n    bubble.className = 'chat-bubble bubble-incoming';\n    bubble.style.padding = '12px';\n    \n    const textNode = document.createElement('p');\n    textNode.innerText = linkText;\n    textNode.style.marginBottom = '10px';\n    \n    const linkNode = document.createElement('a');\n    linkNode.href = linkUrl;\n    linkNode.target = '_blank';\n    linkNode.rel = 'noopener noreferrer';\n    linkNode.className = 'bubble-link';\n    linkNode.innerText = 'Klik di sini ya! \ud83d\udc49'; \/\/ Teks tombol link di dalam chat\n    \n    bubble.appendChild(textNode);\n    bubble.appendChild(linkNode);\n    chatScreen.appendChild(bubble);\n    chatScreen.scrollTop = chatScreen.scrollHeight;\n  }\n\n  \/\/ Fungsi efek ngetik\n  function showTyping() {\n    const typing = document.createElement('div');\n    typing.className = 'typing-bubble';\n    typing.id = 'typingIndicator';\n    typing.innerHTML = '<div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div>';\n    chatScreen.appendChild(typing);\n    chatScreen.scrollTop = chatScreen.scrollHeight;\n  }\n\n  function hideTyping() {\n    const typing = document.getElementById('typingIndicator');\n    if (typing) typing.remove();\n  }\n\n  \/\/ Logika pas tombol quick reply diklik\n  quickReplies.querySelectorAll('.qr-btn').forEach(btn => {\n    btn.addEventListener('click', function() {\n      const replyText = this.dataset.reply;\n      const botReply = this.dataset.bot;\n      const linkUrl = this.dataset.link;\n\n      \/\/ 1. Tampilkan balasan user\n      addBubble(replyText, 'outgoing');\n\n      \/\/ 2. Matikan semua tombol biar gak diklik dobel\n      quickReplies.querySelectorAll('.qr-btn').forEach(b => b.classList.add('disabled'));\n\n      \/\/ 3. Munculin efek ngetik\n      showTyping();\n\n      \/\/ 4. Setelah 1.5 detik, hilangkan efek ngetik, munculin balasan bot + link\n      setTimeout(() => {\n        hideTyping();\n        addLinkBubble(botReply, linkUrl);\n      }, 1500);\n    });\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5adf21d e-con-full e-flex e-con e-parent\" data-id=\"5adf21d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7619a1 elementor-widget elementor-widget-html\" data-id=\"a7619a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === ORBIT CTA SECTION VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.orbit-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.orbit-section-wrap {\n  background: var(--clay-bg);\n  min-height: 100vh;\n  min-height: 100svh; \/* PERBAIKAN: Tambahan svh *\/\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 100px 20px;\n  overflow: hidden;\n}\n\n.orbit-header {\n  text-align: center;\n  margin-bottom: 80px;\n  z-index: 10;\n}\n\n.orbit-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.orbit-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.orbit-header h2 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 15px; letter-spacing: -0.5px;\n}\n\n\/* TAMBAHAN: STYLE GRADIENT UNTUK KATA 'TOGETHER' *\/\n.orbit-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.orbit-header p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300;\n  max-width: 500px; margin: 0 auto;\n}\n\n\/* === ORBIT STAGE === *\/\n.orbit-stage {\n  position: relative;\n  width: 400px;\n  height: 400px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* PLANET TENGAH (CLAY INSET) *\/\n.orbit-center {\n  width: 160px;\n  height: 160px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: inset 8px 8px 16px var(--clay-shadow-dark), inset -8px -8px 16px var(--clay-shadow-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  z-index: 5;\n}\n.orbit-center span {\n  font-size: 1.4rem;\n  font-weight: 800;\n  color: var(--clay-accent);\n  letter-spacing: 1px;\n  line-height: 1.2;\n}\n\n\/* BUNGKUS ROTATOR *\/\n.orbit-rotator {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%;\n  height: 100%;\n  animation: spin 20s linear infinite;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\/* KARTU ORBIT *\/\n.orbit-card {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 130px;\n  height: 130px;\n  margin: -65px 0 0 -65px; \n  text-decoration: none;\n}\n\n\/* KARTU DALAM (Buat nge-reset rotasi biar teks tetap tegak) *\/\n.card-inner {\n  width: 100%;\n  height: 100%;\n  background: var(--clay-bg);\n  border-radius: 24px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--clay-text);\n  animation: spin-reverse 20s linear infinite; \n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  cursor: pointer;\n}\n\n@keyframes spin-reverse {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(-360deg); }\n}\n\n\/* POSISI KARTU DI ORBIT *\/\n.orbit-card:nth-child(1) { transform: rotate(0deg) translate(180px) rotate(0deg); }\n.orbit-card:nth-child(2) { transform: rotate(120deg) translate(180px) rotate(-120deg); }\n.orbit-card:nth-child(3) { transform: rotate(240deg) translate(180px) rotate(-240deg); }\n\n\/* IKON DALAM KARTU *\/\n.card-icon-box {\n  width: 48px; height: 48px;\n  border-radius: 14px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--clay-bg);\n  box-shadow: inset 3px 3px 6px var(--clay-shadow-dark), inset -3px -3px 6px var(--clay-shadow-light);\n  color: #9CA3AF;\n  transition: all 0.3s ease;\n}\n.card-icon-box svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.card-title { font-size: 0.8rem; font-weight: 600; }\n\n\/* EFEK MAGNETIK (HOVER) *\/\n.orbit-stage:hover .orbit-rotator,\n.orbit-stage:hover .card-inner {\n  animation-play-state: paused;\n}\n\n.orbit-card:hover .card-inner {\n  transform: scale(1.15);\n  box-shadow: 0 0 25px rgba(244, 114, 182, 0.4), 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light);\n}\n\n.orbit-card:hover .card-icon-box {\n  background: var(--clay-accent);\n  color: #FFFFFF;\n  box-shadow: 0 0 15px rgba(244, 114, 182, 0.5), inset 2px 2px 4px var(--clay-accent-soft);\n}\n\n.orbit-card:hover .card-title {\n  color: var(--clay-accent);\n}\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .orbit-section-wrap {\n    padding: 60px 15px 80px; \/* Padding atas dinaikin biar gak nabrak navbar *\/\n    justify-content: flex-start; \/* MULAI DARI ATAS *\/\n    min-height: auto !important; \/* HILANGIN RUANG KOSONG BAWAH *\/\n  }\n  .orbit-stage { width: 320px; height: 320px; }\n  .orbit-center { width: 130px; height: 130px; }\n  .orbit-center span { font-size: 1.2rem; }\n  .orbit-card { width: 110px; height: 110px; margin: -55px 0 0 -55px; }\n  .orbit-card:nth-child(1) { transform: rotate(0deg) translate(130px) rotate(0deg); }\n  .orbit-card:nth-child(2) { transform: rotate(120deg) translate(130px) rotate(-120deg); }\n  .orbit-card:nth-child(3) { transform: rotate(240deg) translate(130px) rotate(-240deg); }\n  .card-icon-box { width: 40px; height: 40px; }\n  .card-title { font-size: 0.75rem; }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.orbit-section-wrap button, \n.orbit-section-wrap a {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.orbit-section-wrap a:hover, \n.orbit-section-wrap a:focus, \n.orbit-section-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: transparent !important; \n  text-decoration: none !important;\n}\n\n\/* Pastikan style clay tetap aman *\/\n.orbit-section-wrap .card-inner {\n  background-color: var(--clay-bg) !important;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light) !important;\n}\n<\/style>\n\n<section class=\"orbit-section-wrap\" id=\"orbitSection\">\n  \n  <div class=\"orbit-header fade-up\">\n    <div class=\"orbit-badge\"><span><\/span> Get In Touch<\/div>\n    <!-- Tambahan tag <em> di kata Together -->\n    <h2>Let's Create <em>Together<\/em><\/h2>\n    <p>Hover or tap the cards orbiting around to connect with us directly. We are ready to launch your next big idea.<\/p>\n  <\/div>\n\n  <div class=\"orbit-stage fade-up\">\n    \n    <!-- Planet Tengah -->\n    <div class=\"orbit-center\">\n      <span>LET'S<br>TALK<\/span>\n    <\/div>\n\n    <!-- Rotator Kartu -->\n    <div class=\"orbit-rotator\">\n      \n      <a href=\"https:\/\/wa.me\/6281227008020\" target=\"_blank\" class=\"orbit-card\">\n        <div class=\"card-inner\">\n          <div class=\"card-icon-box\">\n            <!-- IKON WHATSAPP ASLI (FILLED) -->\n            <svg viewBox=\"0 0 448 512\" style=\"fill: currentColor; stroke: none;\"><path d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.4-2.3-5.1-3.7-10.6-6.6z\"><\/path><\/svg>\n          <\/div>\n          <div class=\"card-title\">WhatsApp<\/div>\n        <\/div>\n      <\/a>\n\n      <a href=\"mailto:hello@rwb.my.id\" class=\"orbit-card\">\n        <div class=\"card-inner\">\n          <div class=\"card-icon-box\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\n          <\/div>\n          <div class=\"card-title\">Email<\/div>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/instagram.com\" target=\"_blank\" class=\"orbit-card\">\n        <div class=\"card-inner\">\n          <div class=\"card-icon-box\">\n            <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>\n          <\/div>\n          <div class=\"card-title\">Instagram<\/div>\n        <\/div>\n      <\/a>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (FADE UP ON SCROLL) ===\n  const orbitObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        orbitObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n\n  document.querySelectorAll('.fade-up').forEach(el => {\n    orbitObserver.observe(el);\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f9808f4 e-con-full e-flex e-con e-parent\" data-id=\"f9808f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58adf65 elementor-widget elementor-widget-html\" data-id=\"58adf65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === VARIABLES (ON-DNA) === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.grenade-contact-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.grenade-contact-wrap {\n  background: var(--clay-bg);\n  padding: 80px 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  min-height: 100svh; \n  overflow: hidden;\n}\n\n\/* === ANIMASI FADE UP (DNA) === *\/\n.fade-up {\n  opacity: 0; transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === HEADER === *\/\n.gr-header {\n  text-align: center;\n  margin-bottom: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.gr-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.gr-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.gr-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.5rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.gr-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n\/* === LAYOUT UTAMA === *\/\n.gr-container {\n  width: 100%;\n  max-width: 800px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 40px;\n  align-items: center;\n}\n\n\/* === FORM INPUT (KIRI) === *\/\n.gr-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n.clay-input {\n  width: 100%;\n  padding: 15px 20px;\n  background: var(--clay-bg);\n  border: none;\n  border-radius: 14px;\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light);\n  font-family: 'Poppins', sans-serif;\n  font-size: 0.85rem;\n  color: var(--clay-text);\n  outline: none;\n  transition: box-shadow 0.2s ease, color 0.2s ease;\n}\n.clay-input:focus {\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light), 0 0 0 2px var(--clay-accent);\n}\n.clay-input::placeholder { color: #9CA3AF; }\n\n\/* === AREA GRANAT (KANAN) === *\/\n.gr-visual {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* Tuas Pin Granat (Pipih Panjang) *\/\n.grenade-pin-btn {\n  position: relative;\n  width: 80px;\n  height: 20px;\n  background: #9CA3AF !important;\n  border: none;\n  border-radius: 6px;\n  cursor: not-allowed;\n  box-shadow: 2px 2px 4px var(--clay-shadow-dark), -2px -2px 4px var(--clay-shadow-light), inset 1px 1px 2px rgba(255,255,255,0.3);\n  transition: background 0.3s ease, transform 0.2s ease;\n  z-index: 10;\n  margin-bottom: -5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.6rem;\n  font-weight: 800;\n  color: #fff !important;\n  pointer-events: auto;\n  \/* Tambahan: paksa tombol untuk nangkap pointer *\/\n  touch-action: none; \n}\n\n\/* Saat Ready (Nyala Pink & Getar) *\/\n.grenade-pin-btn.ready {\n  background: var(--clay-accent) !important;\n  cursor: pointer;\n  box-shadow: 2px 2px 4px var(--clay-shadow-dark), -2px -2px 4px var(--clay-shadow-light), 0 0 15px rgba(244, 114, 182, 0.6);\n  animation: vibrate 0.2s infinite, pulseReady 1.5s infinite;\n}\n\n@keyframes vibrate {\n  0%, 100% { transform: translateX(0); }\n  25% { transform: translateX(-2px); }\n  75% { transform: translateX(2px); }\n}\n\n@keyframes pulseReady {\n  0%, 100% { box-shadow: 2px 2px 4px var(--clay-shadow-dark), -2px -2px 4px var(--clay-shadow-light), 0 0 0px rgba(244, 114, 182, 0.4); }\n  50% { box-shadow: 2px 2px 4px var(--clay-shadow-dark), -2px -2px 4px var(--clay-shadow-light), 0 0 15px rgba(244, 114, 182, 0.8); }\n}\n\n\/* Efek Nahan Klik (Hold) - Tuas keangkat *\/\n.grenade-pin-btn.holding {\n  transform: translateY(-25px) rotate(-15deg) !important;\n  animation: none !important; \n  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.grenade-neck {\n  width: 40px;\n  height: 25px;\n  background: linear-gradient(145deg, #A855F7, #F472B6);\n  border-radius: 5px 5px 0 0;\n  z-index: 5;\n}\n\n.grenade-body {\n  width: 160px;\n  height: 180px;\n  background: linear-gradient(145deg, #F472B6, #A855F7);\n  border-radius: 40px 40px 30px 30px \/ 50px 50px 20px 20px;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light), inset 4px 4px 8px rgba(255,255,255,0.4), inset -4px -4px 8px rgba(0,0,0,0.1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  z-index: 1;\n}\n\n.grenade-screen {\n  width: 80px;\n  height: 40px;\n  background: var(--clay-bg);\n  border-radius: 8px;\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.7rem;\n  font-weight: 800;\n  color: #9CA3AF;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n}\n.grenade-screen.armed { color: #EF4444; animation: blink 0.5s infinite; }\n@keyframes blink { 50% { opacity: 0.5; } }\n\n.gr-hint {\n  margin-top: 20px;\n  font-size: 0.75rem;\n  color: #6B7280;\n  text-align: center;\n  font-style: italic;\n  min-height: 20px;\n}\n\n\/* === EFEK SHOCKWAVE === *\/\n.shockwave {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  border: 4px solid var(--clay-accent);\n  opacity: 0;\n  z-index: 5;\n  pointer-events: none;\n}\n.shockwave.boom {\n  animation: shockwaveAnim 1s ease-out forwards;\n}\n@keyframes shockwaveAnim {\n  0% { width: 100px; height: 100px; opacity: 1; border-width: 10px; }\n  100% { width: 600px; height: 600px; opacity: 0; border-width: 0; }\n}\n\n\/* === POPUP SUKSES === *\/\n.gr-overlay {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(58, 58, 58, 0.6);\n  z-index: 998;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease;\n}\n.gr-overlay.show { opacity: 1; visibility: visible; }\n\n.gr-popup {\n  position: fixed;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%) scale(0.8);\n  width: 90%;\n  max-width: 380px;\n  background: var(--clay-bg);\n  padding: 40px 30px;\n  border-radius: 24px;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light);\n  z-index: 999;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n  text-align: center;\n}\n.gr-popup.show {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(-50%, -50%) scale(1);\n}\n.gr-checkmark {\n  width: 70px; height: 70px;\n  margin: 0 auto 20px;\n  background: var(--clay-accent);\n  border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 2rem;\n  color: #fff;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), inset 2px 2px 4px var(--clay-accent-soft);\n  animation: popBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes popBounce {\n  0% { transform: scale(0); }\n  100% { transform: scale(1); }\n}\n.gr-popup h3 { font-size: 1.4rem; color: var(--clay-text); margin-bottom: 10px; }\n.gr-popup p { font-size: 0.85rem; color: #6B7280; margin-bottom: 25px; line-height: 1.6; }\n.gr-close-btn {\n  padding: 12px 30px;\n  background: var(--clay-bg);\n  border: none;\n  border-radius: 12px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  font-weight: 600;\n  color: var(--clay-text);\n  cursor: pointer;\n}\n\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR === *\/\n.grenade-contact-wrap button:focus, \n.grenade-contact-wrap button:focus-visible,\n.grenade-contact-wrap a:focus,\n.grenade-contact-wrap a:focus-visible,\n.grenade-contact-wrap input:focus,\n.grenade-contact-wrap textarea:focus {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  text-decoration: none !important;\n}\n\n\/* === RESPONSIVE HP === *\/\n@media (max-width: 768px) {\n  .grenade-contact-wrap {\n    padding: 40px 15px; \n    justify-content: flex-start; \n    padding-top: 60px; \n    min-height: auto !important; \n  }\n  .gr-container { grid-template-columns: 1fr; gap: 50px; }\n  .gr-visual { order: -1; } \n  .grenade-body { width: 140px; height: 160px; }\n  .grenade-pin-btn { width: 70px; height: 18px; }\n}\n<\/style>\n\n<section class=\"grenade-contact-wrap\" id=\"grenadeContact\">\n  \n  <div class=\"gr-header fade-up\">\n    <div class=\"gr-badge\"><span><\/span> Handle with Care<\/div>\n    <h2>Detonate Your <em>Message<\/em><\/h2>\n  <\/div>\n\n  <div class=\"gr-container fade-up\">\n    \n    <!-- KIRI: FORM -->\n    <div class=\"gr-form\">\n      <input type=\"text\" class=\"clay-input\" id=\"grName\" placeholder=\"Your Name\">\n      <input type=\"email\" class=\"clay-input\" id=\"grEmail\" placeholder=\"Valid Email (with @)\">\n      <textarea class=\"clay-input\" id=\"grMsg\" placeholder=\"Write a detailed message (min 10 chars)...\" rows=\"4\"><\/textarea>\n    <\/div>\n\n    <!-- KANAN: GRANAT -->\n    <div class=\"gr-visual\">\n      <div class=\"shockwave\" id=\"grShockwave\"><\/div>\n      \n      <!-- Tuas Pin Granat (type=\"button\" ditambahkan biar gak bentrok sama form) -->\n      <button type=\"button\" class=\"grenade-pin-btn\" id=\"grPin\" disabled>HOLD<\/button>\n      <div class=\"grenade-neck\"><\/div>\n      <div class=\"grenade-body\">\n        <div class=\"grenade-screen\" id=\"grScreen\">SAFE<\/div>\n      <\/div>\n      \n      <p class=\"gr-hint\" id=\"grHint\">Fill the form to arm the grenade<\/p>\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<!-- POPUP SUKSES -->\n<div class=\"gr-overlay\" id=\"grOverlay\"><\/div>\n<div class=\"gr-popup\" id=\"grPopup\">\n  <div class=\"gr-checkmark\">\u2713<\/div>\n  <h3>Message Detonated!<\/h3>\n  <p id=\"grPopupText\">Your message has been successfully launched. We'll get back to you shortly!<\/p>\n  <button type=\"button\" class=\"gr-close-btn\" id=\"grClose\">Close<\/button>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (DNA) ===\n  const grObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        grObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.grenade-contact-wrap .fade-up').forEach(el => grObserver.observe(el));\n\n  \/\/ === LOGIKA GRANAT ===\n  const grPin = document.getElementById('grPin');\n  const grScreen = document.getElementById('grScreen');\n  const grHint = document.getElementById('grHint');\n  const grShockwave = document.getElementById('grShockwave');\n  const grPopup = document.getElementById('grPopup');\n  const grOverlay = document.getElementById('grOverlay');\n  const grClose = document.getElementById('grClose');\n  \n  \/\/ GANTI EMAIL INI PUNYA LU SOB!\n  const targetEmail = \"emailkamu@domain.com\"; \n  \n  const inputs = {\n    name: document.getElementById('grName'),\n    email: document.getElementById('grEmail'),\n    msg: document.getElementById('grMsg')\n  };\n\n  let isArmed = false;\n  let holdTimer = null;\n\n  function isValidEmail(email) {\n    const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n    return emailRegex.test(email);\n  }\n\n  function checkReady() {\n    const nameFilled = inputs.name.value.trim() !== '';\n    const msgLength = inputs.msg.value.trim().length;\n    const msgFilled = msgLength >= 10;\n    const emailValid = isValidEmail(inputs.email.value.trim());\n\n    let hintText = \"Fill the form to arm the grenade\";\n    let textColor = \"#6B7280\";\n\n    if (!nameFilled) {\n      hintText = \"Please enter your name\";\n    } else if (!emailValid) {\n      hintText = \"Invalid email format (must have @ and .com)\";\n      if(inputs.email.value.trim() !== '') textColor = \"#EF4444\";\n    } else if (!msgFilled) {\n      hintText = `Message needs ${10 - msgLength} more characters to arm`;\n    }\n\n    if (nameFilled && msgFilled && emailValid) {\n      grPin.classList.add('ready');\n      grPin.disabled = false;\n      grScreen.innerText = \"ARMED\";\n      grScreen.classList.add('armed');\n      grHint.innerText = \"Hold the pin for 2 seconds to send\";\n      grHint.style.color = \"#34D399\";\n      inputs.email.style.color = \"var(--clay-text)\";\n    } else {\n      grPin.classList.remove('ready');\n      grPin.disabled = true;\n      grScreen.innerText = \"SAFE\";\n      grScreen.classList.remove('armed');\n      grHint.innerText = hintText;\n      grHint.style.color = textColor;\n      inputs.email.style.color = textColor;\n    }\n  }\n\n  Object.values(inputs).forEach(input => {\n    input.addEventListener('input', checkReady);\n  });\n\n  function detonate() {\n    grShockwave.classList.remove('boom');\n    void grShockwave.offsetWidth;\n    grShockwave.classList.add('boom');\n    \n    const subject = `New Project Idea from ${inputs.name.value}`;\n    const body = `Name: ${inputs.name.value}%0AEmail: ${inputs.email.value}%0A%0AMessage:%0A${inputs.msg.value}`;\n    window.location.href = `mailto:${targetEmail}?subject=${subject}&body=${body}`;\n\n    document.getElementById('grPopupText').innerText = `Boom! Your message has been detonated to our server.`;\n    grPopup.classList.add('show');\n    grOverlay.classList.add('show');\n\n    setTimeout(() => {\n      grPin.classList.remove('holding');\n      isArmed = false;\n      checkReady();\n    }, 1000);\n  }\n\n  \/\/ === PERBAIKAN EVENT LISTENER (POINTER EVENTS) ===\n  \/\/ Pakai pointerdown\/up biar kebal sama script Elementor di desktop\n  function startHold(e) {\n    e.preventDefault();\n    if (grPin.disabled) return;\n\n    grPin.classList.add('holding');\n    grHint.innerText = \"Detonating in 2s... DO NOT RELEASE!\";\n\n    holdTimer = setTimeout(() => {\n      isArmed = true;\n      detonate();\n    }, 2000);\n  }\n\n  function cancelHold() {\n    if (!isArmed) {\n      clearTimeout(holdTimer);\n      grPin.classList.remove('holding');\n      if (!grPin.disabled) {\n        grHint.innerText = \"Hold the pin for 2 seconds to send\";\n      }\n    }\n  }\n\n  \/\/ Hapus event mouse & touch lama, ganti sama Pointer Events\n  grPin.addEventListener('pointerdown', startHold);\n  grPin.addEventListener('pointerup', cancelHold);\n  grPin.addEventListener('pointerleave', cancelHold);\n  grPin.addEventListener('pointercancel', cancelHold);\n\n  grClose.addEventListener('click', function() {\n    grPopup.classList.remove('show');\n    grOverlay.classList.remove('show');\n    inputs.name.value = '';\n    inputs.email.value = '';\n    inputs.msg.value = '';\n    checkReady();\n  });\n  \n  grOverlay.addEventListener('click', function() {\n    grPopup.classList.remove('show');\n    grOverlay.classList.remove('show');\n    inputs.name.value = '';\n    inputs.email.value = '';\n    inputs.msg.value = '';\n    checkReady();\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c6a9759 e-con-full e-flex e-con e-parent\" data-id=\"c6a9759\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1b8bbb elementor-widget elementor-widget-html\" data-id=\"d1b8bbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === VARIABLES (ON-DNA) === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.bubble-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.bubble-section-wrap {\n  background: var(--clay-bg);\n  padding: 80px 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  \/* PERBAIKAN: Tambahan svh *\/\n  min-height: 100vh;\n  min-height: 100svh; \n  overflow: hidden;\n}\n\n\/* === ANIMASI FADE UP (DNA) === *\/\n.fade-up {\n  opacity: 0; transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === HEADER === *\/\n.bubble-header {\n  text-align: center;\n  margin-bottom: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.bubble-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.bubble-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.bubble-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.5rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n  margin-bottom: 10px;\n}\n.bubble-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.bubble-header p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300; line-height: 1.7;\n  max-width: 450px;\n}\n\n\/* === BOX BUBBLE WRAP === *\/\n.bubble-box {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n  background: rgba(255, 255, 255, 0.25);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 32px;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  padding: 30px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index: 2; \n}\n\n.bubble-counter {\n  margin-bottom: 25px;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--clay-text);\n  background: var(--clay-bg);\n  padding: 8px 18px;\n  border-radius: 20px;\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n}\n.bubble-counter span { color: var(--clay-accent); font-weight: 800; }\n\n.bubble-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 15px;\n  width: 100%;\n  justify-items: center;\n}\n\n.bubble {\n  width: 45px;\n  height: 45px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(244, 114, 182, 0.4));\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light), inset 2px 2px 4px rgba(255,255,255,0.6);\n  cursor: pointer;\n  transition: transform 0.1s ease;\n  position: relative;\n}\n.bubble:hover { transform: scale(1.1); }\n.bubble:active { transform: scale(0.9); }\n\n.bubble.popped {\n  background: rgba(230, 231, 238, 0.2);\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n  transform: scale(0.8);\n  pointer-events: none;\n}\n.bubble.popped::after {\n  content: '\u2728';\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  font-size: 1.5rem;\n  animation: popEffect 0.5s ease-out forwards;\n}\n@keyframes popEffect {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  100% { transform: translate(-50%, -150%) scale(1.5); opacity: 0; }\n}\n\n.bubble-reset {\n  margin-top: 25px;\n  padding: 10px 20px;\n  background: var(--clay-bg);\n  border: none;\n  border-radius: 12px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  font-family: 'Poppins', sans-serif;\n  font-weight: 600;\n  font-size: 0.75rem;\n  color: var(--clay-text);\n  cursor: pointer;\n  transition: transform 0.2s ease;\n  display: none;\n}\n.bubble-reset.show { display: block; animation: popBounce 0.4s ease; }\n.bubble-reset:hover { transform: translateY(-2px); }\n\n@keyframes popBounce {\n  0% { transform: scale(0); }\n  80% { transform: scale(1.1); }\n  100% { transform: scale(1); }\n}\n\n\/* === EFEK CONFETTI === *\/\n.confetti-container {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0;\n  pointer-events: none;\n  z-index: 9999;\n  overflow: hidden;\n}\n.confetti-piece {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  top: -20px;\n  animation: fallConfetti 3s linear forwards;\n}\n@keyframes fallConfetti {\n  0% { transform: translateY(0) rotate(0deg); opacity: 1; }\n  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }\n}\n\n\/* === RESPONSIVE HP === *\/\n@media (max-width: 768px) {\n  .bubble-section-wrap {\n    padding: 40px 15px; \n    justify-content: flex-start; \/* MULAI DARI ATAS *\/\n    padding-top: 40px; \/* KASIH JARAK ATAS *\/\n    min-height: auto !important; \/* HILANGIN RUANG KOSONG BAWAH *\/\n  }\n  .bubble-header { margin-bottom: 30px; }\n  .bubble-box { padding: 20px; max-width: 100%; }\n  .bubble-grid { gap: 12px; }\n  .bubble { width: 45px; height: 45px; }\n}\n\n\/* === PEMBUNUH WARNA MERAH === *\/\n.bubble-section-wrap button:focus, \n.bubble-section-wrap button:focus-visible,\n.bubble-section-wrap a:focus,\n.bubble-section-wrap a:focus-visible {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  text-decoration: none !important;\n}\n<\/style>\n\n<section class=\"bubble-section-wrap\" id=\"bubbleSection\">\n  \n  <div class=\"bubble-header fade-up\">\n    <div class=\"bubble-badge\"><span><\/span> Stress Relief<\/div>\n    <h2>Take a <em>Breath<\/em><\/h2>\n    <p>Message sent! While you wait for our reply, take a moment to relax and pop some bubbles.<\/p>\n  <\/div>\n\n  <div class=\"bubble-box fade-up\">\n    \n    <div class=\"bubble-counter\">\n      Popped: <span id=\"popCount\">0<\/span> \/ 20\n    <\/div>\n\n    <div class=\"bubble-grid\" id=\"bubbleGrid\">\n      <!-- Gelembung dibuat JS -->\n    <\/div>\n\n    <button class=\"bubble-reset\" id=\"bubbleReset\">Refill Bubbles<\/button>\n\n  <\/div>\n\n<\/section>\n\n<!-- Container Confetti -->\n<div class=\"confetti-container\" id=\"confettiContainer\"><\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (DNA) ===\n  const bubbleObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        bubbleObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.bubble-section-wrap .fade-up').forEach(el => bubbleObserver.observe(el));\n\n  \/\/ === LOGIKA AUDIO (WEB AUDIO API) ===\n  let audioCtx;\n  function initAudio() {\n    if (!audioCtx) {\n      audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n  }\n\n  function playPop() {\n    initAudio();\n    const osc = audioCtx.createOscillator();\n    const gain = audioCtx.createGain();\n    osc.connect(gain);\n    gain.connect(audioCtx.destination);\n    \n    osc.type = 'sine';\n    osc.frequency.setValueAtTime(600, audioCtx.currentTime);\n    osc.frequency.exponentialRampToValueAtTime(100, audioCtx.currentTime + 0.1); \/\/ Frekuensi turun cepat = efek pop\n    gain.gain.setValueAtTime(0.5, audioCtx.currentTime);\n    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);\n    \n    osc.start();\n    osc.stop(audioCtx.currentTime + 0.1);\n  }\n\n  function playFanfare() {\n    initAudio();\n    const notes = [523.25, 659.25, 783.99, 1046.50]; \/\/ C5, E5, G5, C6 (Kunci mayor senang)\n    notes.forEach((freq, i) => {\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      \n      osc.type = 'triangle';\n      osc.frequency.value = freq;\n      \n      const t = audioCtx.currentTime + i * 0.1;\n      gain.gain.setValueAtTime(0.01, t);\n      gain.gain.exponentialRampToValueAtTime(0.3, t + 0.05);\n      gain.gain.exponentialRampToValueAtTime(0.01, t + 0.5);\n      \n      osc.start(t);\n      osc.stop(t + 0.5);\n    });\n  }\n\n  \/\/ === LOGIKA CONFETTI ===\n  function launchConfetti() {\n    const container = document.getElementById('confettiContainer');\n    const colors = ['#F472B6', '#A855F7', '#FFFFFF', '#34D399', '#FBBF24'];\n    \n    for (let i = 0; i < 50; i++) {\n      const conf = document.createElement('div');\n      conf.className = 'confetti-piece';\n      conf.style.left = Math.random() * 100 + 'vw';\n      conf.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n      conf.style.animationDelay = Math.random() * 0.5 + 's';\n      conf.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px'; \/\/ Ada kotak ada bulat\n      container.appendChild(conf);\n      \n      \/\/ Hapus elemen setelah animasi selesai biar gak numpuk di DOM\n      setTimeout(() => conf.remove(), 3500);\n    }\n  }\n\n  \/\/ === LOGIKA BUBBLE WRAP ===\n  const bubbleGrid = document.getElementById('bubbleGrid');\n  const popCount = document.getElementById('popCount');\n  const bubbleReset = document.getElementById('bubbleReset');\n  const totalBubbles = 20;\n\n  let count = 0;\n\n  function handlePop(bubble) {\n    if (!bubble.classList.contains('popped')) {\n      bubble.classList.add('popped');\n      playPop(); \/\/ Mainkan suara pop\n      count++;\n      popCount.innerText = count;\n\n      if (count === totalBubbles) {\n        setTimeout(() => {\n          playFanfare(); \/\/ Suara terompet menang\n          launchConfetti(); \/\/ Hujan kertas\n          bubbleReset.classList.add('show');\n        }, 300);\n      }\n    }\n  }\n\n  function createBubbles() {\n    bubbleGrid.innerHTML = '';\n    count = 0;\n    popCount.innerText = count;\n    bubbleReset.classList.remove('show');\n\n    for (let i = 0; i < totalBubbles; i++) {\n      const bubble = document.createElement('div');\n      bubble.className = 'bubble';\n      \n      bubble.addEventListener('click', function() {\n        handlePop(bubble);\n      });\n\n      bubble.addEventListener('touchstart', function(e) {\n        e.preventDefault();\n        handlePop(bubble);\n      }, { passive: false });\n\n      bubbleGrid.appendChild(bubble);\n    }\n  }\n\n  bubbleReset.addEventListener('click', createBubbles);\n\n  \/\/ Init awal\n  createBubbles();\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d6daca e-con-full e-flex e-con e-parent\" data-id=\"8d6daca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-985cde2 elementor-widget elementor-widget-html\" data-id=\"985cde2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === VARIABLES (ON-DNA) === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.radar-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.radar-section-wrap {\n  background: var(--clay-bg);\n  padding: 80px 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  min-height: 100svh; \n  overflow: hidden;\n}\n\n\/* === ANIMASI FADE UP (DNA) === *\/\n.fade-up {\n  opacity: 0; transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === HEADER === *\/\n.radar-header {\n  text-align: center;\n  margin-bottom: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.radar-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.radar-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.radar-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.5rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.radar-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n\/* === MESIN RADAR === *\/\n.radar-container {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n  background: rgba(255, 255, 255, 0.25);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 32px;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  padding: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.radar-screen {\n  position: relative;\n  width: 280px;\n  height: 280px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.05), var(--clay-bg));\n  box-shadow: inset 6px 6px 12px var(--clay-shadow-dark), inset -6px -6px 12px var(--clay-shadow-light);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.radar-inner {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  border-radius: 50%;\n  overflow: hidden;\n  z-index: 0;\n}\n\n.radar-ring {\n  position: absolute;\n  border: 1px solid rgba(244, 114, 182, 0.2);\n  border-radius: 50%;\n}\n.radar-ring.r1 { width: 70%; height: 70%; }\n.radar-ring.r2 { width: 40%; height: 40%; }\n\n.radar-cross {\n  position: absolute;\n  width: 100%; height: 100%;\n}\n.radar-cross::before, .radar-cross::after {\n  content: '';\n  position: absolute;\n  background: rgba(244, 114, 182, 0.2);\n}\n.radar-cross::before { top: 50%; left: 0; right: 0; height: 1px; }\n.radar-cross::after { left: 50%; top: 0; bottom: 0; width: 1px; }\n\n\/* === SINAR RADAR === *\/\n.radar-sweep {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  background: conic-gradient(from -45deg, transparent 0deg, rgba(244, 114, 182, 0.5) 45deg, transparent 45.1deg, transparent 360deg);\n  animation: radarSpin 4s linear infinite;\n}\n\n@keyframes radarSpin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.radar-center-text {\n  position: absolute;\n  font-size: 0.7rem;\n  font-weight: 800;\n  color: var(--clay-accent);\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  z-index: 2;\n  text-shadow: 0 0 5px rgba(244, 114, 182, 0.5);\n  animation: blinkRadar 1.5s infinite;\n}\n@keyframes blinkRadar { 50% { opacity: 0.3; } }\n\n\/* === TITIK BLIP === *\/\n.radar-blip {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #34D399;\n  box-shadow: 0 0 8px #34D399;\n  z-index: 3;\n  cursor: pointer;\n  animation: blipPulse 4s linear infinite;\n}\n@keyframes blipPulse {\n  0% { transform: scale(0.5); opacity: 0; box-shadow: 0 0 0px #34D399; }\n  5% { transform: scale(1.5); opacity: 1; box-shadow: 0 0 15px #34D399; }\n  20% { transform: scale(1); opacity: 0.5; }\n  100% { transform: scale(1); opacity: 0.5; }\n}\n\n.blip-1 { top: 15%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }\n.blip-2 { top: 50%; right: 15%; transform: translateY(-50%); animation-delay: 1s; }\n.blip-3 { bottom: 15%; left: 50%; transform: translateX(-50%); animation-delay: 2s; }\n.blip-4 { top: 50%; left: 15%; transform: translateY(-50%); animation-delay: 3s; }\n\n\/* === TOOLTIP BLIP === *\/\n.blip-tooltip {\n  position: absolute;\n  bottom: 150%; left: 50%;\n  transform: translateX(-50%) translateY(10px);\n  width: 160px;\n  background: var(--clay-bg);\n  padding: 12px 15px;\n  border-radius: 12px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.3s ease;\n  z-index: 4;\n  text-align: center;\n  pointer-events: none;\n}\n.radar-blip:hover .blip-tooltip, .radar-blip.tapped .blip-tooltip {\n  opacity: 1;\n  visibility: visible;\n  transform: translateX(-50%) translateY(0);\n}\n.blip-tooltip h4 { font-size: 0.7rem; color: var(--clay-text); font-weight: 700; margin-bottom: 2px; }\n.blip-tooltip p { font-size: 0.65rem; color: #6B7280; }\n\n\/* === PERBAIKAN RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .radar-section-wrap {\n    padding: 40px 15px; \n    justify-content: flex-start; \n    padding-top: 80px; \/* beri jarak atas agar tidak nabrak status bar HP *\/\n    min-height: auto !important; \/* <--- INI KUNCINYA BIAR RUANG KOSONG BAWAH HILANG *\/\n  }\n  .radar-header {\n    margin-bottom: 30px;\n  }\n  .radar-container {\n    padding: 25px;\n  }\n  .radar-screen {\n    width: 220px; \n    height: 220px;\n  }\n}\n\n\/* === PEMBUNUH WARNA MERAH === *\/\n.radar-section-wrap button:focus, \n.radar-section-wrap button:focus-visible,\n.radar-section-wrap a:focus,\n.radar-section-wrap a:focus-visible {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  text-decoration: none !important;\n}\n<\/style>\n\n<section class=\"radar-section-wrap\" id=\"radarSection\">\n  \n  <div class=\"radar-header fade-up\">\n    <div class=\"radar-badge\"><span><\/span> System Status<\/div>\n    <h2>We Are <em>Online<\/em><\/h2>\n  <\/div>\n\n  <div class=\"radar-container fade-up\">\n    \n    <div class=\"radar-screen\">\n      <div class=\"radar-inner\">\n        <div class=\"radar-ring r1\"><\/div>\n        <div class=\"radar-ring r2\"><\/div>\n        <div class=\"radar-cross\"><\/div>\n        <div class=\"radar-sweep\"><\/div>\n      <\/div>\n\n      <div class=\"radar-center-text\">ONLINE<\/div>\n\n      <div class=\"radar-blip blip-1\">\n        <div class=\"blip-tooltip\">\n          <h4>Working Hours<\/h4>\n          <p>Mon - Fri (9AM - 5PM)<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"radar-blip blip-2\">\n        <div class=\"blip-tooltip\">\n          <h4>Response Time<\/h4>\n          <p>Less than 2 hours<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"radar-blip blip-3\">\n        <div class=\"blip-tooltip\">\n          <h4>Current Status<\/h4>\n          <p>Available for projects<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"radar-blip blip-4\">\n        <div class=\"blip-tooltip\">\n          <h4>Support<\/h4>\n          <p>24\/7 Email Support<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const radarObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        radarObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.radar-section-wrap .fade-up').forEach(el => radarObserver.observe(el));\n\n  const blips = document.querySelectorAll('.radar-blip');\n  blips.forEach(blip => {\n    blip.addEventListener('click', function(e) {\n      e.stopPropagation();\n      blips.forEach(b => {\n        if (b !== blip) b.classList.remove('tapped');\n      });\n      blip.classList.toggle('tapped');\n    });\n  });\n\n  document.addEventListener('click', function() {\n    blips.forEach(b => b.classList.remove('tapped'));\n  });\n});\n<\/script>\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>\ud83d\udcac Sini, Ngobrol Yuk, Ngobrol Santai! Clay Creative Team Online Halo sob! Ada yang bisa kita bantu hari ini? \ud83d\udc4b \ud83d\udcb0 Tanya Harga Website \ud83c\udfa8 Lihat Portofolio \ud83d\udcde Konsultasi Gratis Get In Touch Let&#8217;s Create Together Hover or tap the cards orbiting around to connect with us directly. We are ready to launch your next [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1042","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/comments?post=1042"}],"version-history":[{"count":147,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1042\/revisions"}],"predecessor-version":[{"id":1877,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1042\/revisions\/1877"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/media?parent=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}