{"id":539,"date":"2026-08-14T02:42:52","date_gmt":"2026-08-14T02:42:52","guid":{"rendered":"https:\/\/lab.rwb.my.id\/hero\/?page_id=539"},"modified":"2026-08-15T15:17:12","modified_gmt":"2026-08-15T15:17:12","slug":"kontak","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/hero\/kontak\/","title":{"rendered":"Kontak"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"539\" class=\"elementor elementor-539\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d45d637 e-con-full e-flex e-con e-parent\" data-id=\"d45d637\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f11283c elementor-widget elementor-widget-html\" data-id=\"f11283c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Patrick+Hand&family=Permanent+Marker&display=swap');\n\n  \/* Wrapper Papan Mading *\/\n  .doodle-contact-hero {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #fff;\n    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);\n    background-size: 20px 20px;\n    padding: 80px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n    border-top: 2px solid #e0e0e0;\n    border-bottom: 2px solid #e0e0e0;\n  }\n\n  \/* Animasi Fade Up (Pakai CSS Variable biar rotasi kertas tetap aman) *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px) rotate(var(--rot, 0deg));\n    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0) rotate(var(--rot, 0deg));\n  }\n  \/* Delay khusus sticky notes biar muncul berurutan *\/\n  .pinboard .fade-up:nth-child(1) { transition-delay: 0.1s; }\n  .pinboard .fade-up:nth-child(2) { transition-delay: 0.25s; }\n  .pinboard .fade-up:nth-child(3) { transition-delay: 0.4s; }\n\n  \/* Judul Coretan Tangan *\/\n  .doodle-title-wrap {\n    margin-bottom: 40px;\n  }\n  .doodle-title {\n    font-family: 'Permanent Marker', cursive;\n    font-size: clamp(40px, 8vw, 70px);\n    color: #333;\n    margin-bottom: 10px;\n    display: inline-block;\n    position: relative;\n    transform: rotate(-2deg);\n  }\n\n  \/* Garis bawah coretan (SVG) *\/\n  .doodle-underline {\n    display: block;\n    margin: -10px auto 0;\n    width: 250px;\n    max-width: 80%;\n    transform: rotate(-1deg);\n  }\n\n  .doodle-desc {\n    font-size: 20px;\n    color: #666;\n    max-width: 500px;\n    margin: 0 auto 50px;\n    background: #fff;\n    padding: 5px 10px;\n  }\n\n  \/* Area Tumpukan Sticky Notes *\/\n  .pinboard {\n    display: flex;\n    justify-content: center;\n    gap: 25px;\n    flex-wrap: wrap;\n    perspective: 1000px;\n  }\n\n  \/* Kertas Sticky Note *\/\n  .sticky-note {\n    width: 220px;\n    height: 220px;\n    padding: 30px 15px 15px 15px;\n    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    cursor: pointer;\n    text-decoration: none;\n    color: #333;\n    position: relative;\n  }\n\n  \/* Warna Kertas + Variabel Rotasi *\/\n  .note-yellow { background-color: #ffde7d; --rot: -3deg; }\n  .note-blue { background-color: #bde0ff; --rot: 2deg; }\n  .note-pink { background-color: #ffadad; --rot: -1deg; }\n\n  \/* Efek Hover: Kertas lurus dan maju *\/\n  .sticky-note:hover {\n    transform: rotate(0deg) scale(1.05) translateY(-5px) !important;\n    box-shadow: 5px 8px 20px rgba(0,0,0,0.15);\n    z-index: 10;\n    transition-delay: 0s !important; \/* Reset delay biar hover responsif *\/\n  }\n\n  \/* Pin\/Paku di atas kertas *\/\n  .pin {\n    position: absolute;\n    top: 10px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 16px;\n    height: 16px;\n    background: #555;\n    border-radius: 50%;\n    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), 2px 2px 3px rgba(0,0,0,0.3);\n  }\n\n  .sticky-note h3 {\n    font-family: 'Permanent Marker', cursive;\n    font-size: 24px;\n    margin: 0 0 10px 0;\n  }\n  .sticky-note p {\n    font-size: 16px;\n    margin: 0;\n    line-height: 1.3;\n  }\n\n  \/* Doodle Mengambang *\/\n  .doodle-float {\n    position: absolute;\n    pointer-events: none;\n    opacity: 0.7;\n    animation: doodleBob 3s ease-in-out infinite;\n  }\n  @keyframes doodleBob {\n    0%, 100% { transform: translateY(0) rotate(var(--r)); }\n    50% { transform: translateY(-10px) rotate(calc(var(--r) + 5deg)); }\n  }\n\n  @media (max-width: 600px) {\n    .sticky-note { width: 160px; height: 160px; padding: 25px 10px 10px 10px; }\n    .sticky-note h3 { font-size: 20px; }\n    .sticky-note p { font-size: 14px; }\n  }\n<\/style>\n\n<section class=\"doodle-contact-hero\">\n  \n  <!-- Doodle Mengambang (SVG) -->\n  <svg class=\"doodle-float\" style=\"top: 10%; left: 5%; width: 50px; --r: -15deg;\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"3\" stroke-linecap=\"round\">\n    <path d=\"M50 20 C 60 40, 60 60, 50 80 C 40 60, 40 40, 50 20 Z\" \/>\n    <path d=\"M50 20 L 40 10 M 50 20 L 60 10\" \/>\n  <\/svg>\n  <svg class=\"doodle-float\" style=\"top: 15%; right: 8%; width: 60px; --r: 10deg; animation-delay: 1s;\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#333\" stroke-width=\"3\" stroke-linecap=\"round\">\n    <path d=\"M20 50 L 50 20 L 80 50 L 50 80 Z\" \/>\n    <path d=\"M30 50 L 50 30 L 70 50 L 50 70 Z\" \/>\n  <\/svg>\n  <svg class=\"doodle-float\" style=\"bottom: 20%; left: 8%; width: 70px; --r: 5deg; animation-delay: 1.5s;\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#bde0ff\" stroke-width=\"4\" stroke-linecap=\"round\">\n    <path d=\"M20 80 Q 50 10, 80 80\" \/>\n  <\/svg>\n  <svg class=\"doodle-float\" style=\"bottom: 15%; right: 10%; width: 50px; --r: -10deg; animation-delay: 0.5s;\" viewBox=\"0 0 100 100\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\" stroke-linecap=\"round\">\n    <path d=\"M50 10 L 61 39 L 90 39 L 67 57 L 76 85 L 50 68 L 24 85 L 33 57 L 10 39 L 39 39 Z\" \/>\n  <\/svg>\n\n  <!-- Bungkus Judul biar animasinya mulus -->\n  <div class=\"fade-up doodle-title-wrap\">\n    <h2 class=\"doodle-title\">Punya Cerita? Sini Ceritain!<\/h2>\n    <svg class=\"doodle-underline\" viewBox=\"0 0 200 20\">\n      <path d=\"M5 10 Q 50 2, 100 10 T 195 8\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n    <\/svg>\n  <\/div>\n\n  <p class=\"doodle-desc fade-up\">\n    Mau ngajak ngopi, kasih masukan, atau cuma mau nimbrung? Ketuk kertas-kertas di bawah ini buat nyampein pesannya. Aku bales secepet kilat (kalau lagi nggak tidur)! \u26a1\n  <\/p>\n\n  <!-- Pinboard Sticky Notes -->\n  <div class=\"pinboard\">\n    \n    <!-- Sticky Note 1: WhatsApp -->\n    <a href=\"https:\/\/wa.me\/6281234567890\" target=\"_blank\" class=\"sticky-note note-yellow fade-up\">\n      <div class=\"pin\"><\/div>\n      <h3>WhatsApp<\/h3>\n      <p>Butuh balasan dadakan? Chat aja di sini, paling cepet!<br>\ud83d\udcf1 0812-3456-7890<\/p>\n    <\/a>\n\n    <!-- Sticky Note 2: Email -->\n    <a href=\"mailto:halo@emailkamu.com\" class=\"sticky-note note-blue fade-up\">\n      <div class=\"pin\"><\/div>\n      <h3>Email<\/h3>\n      <p>Buat urusan serius atau kirim file besar. Gas inbox!<br>\u2709\ufe0f halo@emailkamu.com<\/p>\n    <\/a>\n\n    <!-- Sticky Note 3: Instagram -->\n    <a href=\"https:\/\/instagram.com\/usernamekamu\" target=\"_blank\" class=\"sticky-note note-pink fade-up\">\n      <div class=\"pin\"><\/div>\n      <h3>Instagram<\/h3>\n      <p>Mau ngeliat foto-foto random atau DM rahasia? Sini mampir.<br>\ud83d\udcf8 @usernamekamu<\/p>\n    <\/a>\n\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ Script Intersection Observer (Sama seperti section sebelumnya)\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"is-visible\");\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.2 }); \/\/ Muncul saat elemen terlihat 20% di layar\n    \n    \/\/ Tangkap semua elemen yang punya class fade-up\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-16d7124 e-con-full e-flex e-con e-parent\" data-id=\"16d7124\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61a26e7 elementor-widget elementor-widget-html\" data-id=\"61a26e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* === SEKSI FORM BUKU TAMU === *\/\n  .guestbook-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #e8f4ff; \/* Warna biru puce muda kayak buku tulis *\/\n    background-image: linear-gradient(#bde0ff 1px, transparent 1px);\n    background-size: 100% 35px;\n    padding: 80px 20px;\n    display: flex;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .guestbook-container {\n    width: 100%;\n    max-width: 600px;\n    text-align: center;\n    position: relative;\n    z-index: 2;\n  }\n\n  \/* Judul *\/\n  .guest-title-wrap {\n    margin-bottom: 40px;\n    display: inline-block;\n    position: relative;\n  }\n  .guest-title {\n    font-family: 'Patrick Hand', cursive;\n    font-size: clamp(35px, 7vw, 55px);\n    color: #333;\n    margin: 0;\n    transform: rotate(-2deg);\n    text-shadow: 1px 1px 0px #888; \/* Trik biar fontnya kelihatan lebih tegas *\/\n  }\n  .guest-subtitle {\n    font-size: 18px;\n    color: #555;\n    margin-top: 10px;\n  }\n\n  \/* Kertas Form *\/\n  .form-paper {\n    background: #fff;\n    padding: 50px 40px 40px 40px;\n    position: relative;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);\n    \/* Border sobek dikit *\/\n    border-radius: 105px 15px 15px 15px;\n    border: 2px solid #ddd;\n    transform: rotate(0.5deg);\n  }\n\n  \/* Lakban Washi Tape di atas kertas *\/\n  .form-washi {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%) rotate(-2deg);\n    width: 150px;\n    height: 35px;\n    background-color: rgba(255, 173, 173, 0.7);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    z-index: 5;\n  }\n\n  \/* Input Styles *\/\n  .form-group {\n    margin-bottom: 30px;\n    text-align: left;\n  }\n  .form-label {\n    font-size: 18px;\n    color: #444;\n    display: block;\n    margin-bottom: 8px;\n  }\n  .doodle-input, .doodle-textarea {\n    width: 100%;\n    background: transparent;\n    border: none;\n    border-bottom: 2px dashed #999;\n    padding: 10px 5px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\n    color: #333;\n    transition: all 0.3s ease;\n    outline: none;\n  }\n  .doodle-textarea {\n    resize: none;\n    min-height: 100px;\n    border-bottom: 2px dashed #999;\n  }\n\n  \/* Efek Focus: Garis berubah solid & warna merah *\/\n  .doodle-input:focus, .doodle-textarea:focus {\n    border-bottom: 2px solid #ff5252;\n  }\n  .doodle-input::placeholder, .doodle-textarea::placeholder {\n    color: #bbb;\n    font-style: italic;\n  }\n\n  \/* Tombol Submit Pesawat *\/\n  .submit-btn {\n    background-color: #ffde7d;\n    color: #333;\n    border: 3px solid #333;\n    padding: 12px 35px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 22px;\n    border-radius: 10px 30px 10px 30px;\n    cursor: pointer;\n    position: relative;\n    box-shadow: 4px 4px 0px #333;\n    transition: all 0.2s ease;\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .submit-btn:hover {\n    transform: translate(-2px, -2px);\n    box-shadow: 6px 6px 0px #333;\n    background-color: #ff5252;\n    color: #fff;\n  }\n  .submit-btn:active {\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0px #333;\n  }\n\n  \/* Animasi Pesawat Terbang *\/\n  .flying-plane {\n    position: fixed;\n    bottom: 10%;\n    right: 15%;\n    font-size: 50px;\n    z-index: 99;\n    opacity: 0;\n    pointer-events: none;\n    transform: rotate(0deg) scale(0.5);\n  }\n  .flying-plane.fly {\n    animation: flyAway 1.5s ease-in-out forwards;\n  }\n  @keyframes flyAway {\n    0% { opacity: 1; transform: translate(0, 0) rotate(20deg) scale(1); }\n    50% { transform: translate(-30vw, -30vh) rotate(-15deg) scale(1.2); }\n    100% { opacity: 0; transform: translate(-100vw, -80vh) rotate(-45deg) scale(0.5); }\n  }\n\n  \/* Animasi Fade Up *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px) rotate(var(--rot, 0deg));\n    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0) rotate(var(--rot, 0deg));\n  }\n  .form-paper.fade-up { transition-delay: 0.2s; }\n\n  @media (max-width: 600px) {\n    .form-paper { padding: 40px 20px 30px 20px; }\n    .form-washi { width: 100px; }\n  }\n<\/style>\n\n<section class=\"guestbook-section\">\n  <div class=\"guestbook-container\">\n    \n    <div class=\"guest-title-wrap fade-up\" style=\"--rot: -2deg;\">\n      <h2 class=\"guest-title\">Buku Tamu Rahasia \ud83e\udd2b<\/h2>\n      <p class=\"guest-subtitle\">Tulis pesanmu di kertas ini, nanti gue lipat jadi pesawat terbang!<\/p>\n    <\/div>\n\n    <!-- Kertas Form -->\n    <form class=\"form-paper fade-up\" id=\"doodleForm\" style=\"--rot: 0.5deg;\">\n      <div class=\"form-washi\"><\/div>\n\n      <div class=\"form-group\">\n        <label class=\"form-label\">Nama Samaran \/ Asli:<\/label>\n        <input type=\"text\" class=\"doodle-input\" placeholder=\"Cth: Botol Kece\" required>\n      <\/div>\n\n      <div class=\"form-group\">\n        <label class=\"form-label\">Email Biar Bisa Balasan:<\/label>\n        <input type=\"email\" class=\"doodle-input\" placeholder=\"kamu@email.com\" required>\n      <\/div>\n\n      <div class=\"form-group\">\n        <label class=\"form-label\">Pesan \/ Curhat Singkat:<\/label>\n        <textarea class=\"doodle-textarea\" placeholder=\"Gas nulis apa aja di sini, bebas!\" required><\/textarea>\n      <\/div>\n\n      <button type=\"submit\" class=\"submit-btn\">\n        Lipat & Kirim \u2708\ufe0f\n      <\/button>\n    <\/form>\n\n  <\/div>\n<\/section>\n\n<!-- Elemen Pesawat Terbang -->\n<div class=\"flying-plane\" id=\"flyingPlane\">\u2708\ufe0f<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Intersection Observer\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"is-visible\");\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.2 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n    \/\/ 2. Logika Form Pesawat Kertas\n    const form = document.getElementById('doodleForm');\n    const plane = document.getElementById('flyingPlane');\n\n    form.addEventListener('submit', function(e) {\n      e.preventDefault(); \/\/ Cegah reload halaman (simulasi doang)\n\n      \/\/ Muncin pesawat dan animasi terbang\n      plane.classList.add('fly');\n\n      \/\/ Setelah 1.5 detik (animasi selesai), reset form & pesawat\n      setTimeout(() => {\n        form.reset();\n        plane.classList.remove('fly');\n        \/\/ Bisa tambahin alert() atau teks \"Pesan terkirim!\" di sini\n        alert(\"Pesanmu udah terbang! Pesawatnya nggak balik lagi wkwkwk \ud83d\udeeb\");\n      }, 1500);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8781857 e-con-full e-flex e-con e-parent\" data-id=\"8781857\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1addd1b elementor-widget elementor-widget-html\" data-id=\"1addd1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* === SEKSI PETA HARTA KARUN === *\/\n  .map-doodle-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #fdf6e3; \/* Warna kertas tua\/parchment *\/\n    background-image: radial-gradient(#e6dcc3 1px, transparent 1px);\n    background-size: 20px 20px;\n    padding: 80px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* Judul Section Peta *\/\n  .map-title-wrap {\n    margin-bottom: 40px;\n    display: inline-block;\n    position: relative;\n  }\n  .map-title {\n    font-family: 'Permanent Marker', cursive;\n    font-size: clamp(35px, 7vw, 55px);\n    color: #5a4a3b;\n    margin: 0;\n    transform: rotate(-2deg);\n  }\n  .map-subtitle {\n    font-size: 18px;\n    color: #8a7a6b;\n    margin-top: 10px;\n    background: #fff;\n    padding: 5px 15px;\n    display: inline-block;\n    border: 2px dashed #8a7a6b;\n    border-radius: 10px;\n    transform: rotate(1deg);\n  }\n\n  \/* Sembunyiin <br> secara default (Desktop) *\/\n  .map-mobile-br { display: none; }\n\n  \/* Bingkai Peta DIY *\/\n  .map-frame {\n    position: relative;\n    max-width: 800px;\n    margin: 0 auto;\n    \/* Trik border sobek kayak kertas *\/\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    border: 4px solid #5a4a3b;\n    background: #fff;\n    padding: 15px;\n    box-shadow: 10px 10px 0px rgba(90, 74, 59, 0.2);\n  }\n\n  \/* Lakban Washi Tape di pojok *\/\n  .washi-tape {\n    position: absolute;\n    width: 100px;\n    height: 30px;\n    background-color: rgba(255, 209, 102, 0.8);\n    top: -15px;\n    z-index: 5;\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n  }\n  .tape-left { left: -20px; transform: rotate(-45deg); }\n  .tape-right { right: -20px; transform: rotate(45deg); }\n\n  \/* Iframe Google Maps *\/\n  .map-iframe-container {\n    width: 100%;\n    height: 450px;\n    overflow: hidden;\n    border-radius: 240px 10px 220px 10px \/ 10px 220px 10px 240px; \/*ikutin sobekan*\/\n    position: relative;\n  }\n  .map-iframe-container iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    \/* Filter bikin peta jadi vintage\/hitam putih biar nyatu sama doodle *\/\n    filter: grayscale(100%) contrast(1.2) sepia(0.3); \n  }\n\n  \/* Overlay Coretan Peta (Jalur & X) *\/\n  .map-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none; \/* PENTING: Biar mouse bisa nge-klik\/drag peta di bawahnya *\/\n    z-index: 4;\n  }\n  \n  \/* Animasi Garis Putus-Putus Jalan *\/\n  .doodle-path {\n    fill: none;\n    stroke: #ff5252;\n    stroke-width: 4;\n    stroke-dasharray: 10 8; \/* Garis putus-putus *\/\n    stroke-linecap: round;\n    animation: dashMove 20s linear infinite;\n  }\n  @keyframes dashMove {\n    to { stroke-dashoffset: -1000; }\n  }\n\n  \/* X Marks The Spot *\/\n  .x-spot {\n    position: absolute;\n    bottom: 15%;\n    right: 20%;\n    font-family: 'Permanent Marker', cursive;\n    font-size: 50px;\n    color: #ff5252;\n    text-shadow: 2px 2px 0px #5a4a3b;\n    animation: xBounce 2s ease-in-out infinite;\n  }\n  @keyframes xBounce {\n    0%, 100% { transform: translateY(0) rotate(-10deg); }\n    50% { transform: translateY(-10px) rotate(-5deg); }\n  }\n\n  \/* Info Alamat di bawah Peta *\/\n  .address-note {\n    margin-top: 30px;\n    font-size: 20px;\n    color: #5a4a3b;\n    display: inline-block;\n    background: #ffde7d;\n    padding: 15px 30px;\n    border: 2px solid #5a4a3b;\n    box-shadow: 4px 4px 0px #5a4a3b;\n    transform: rotate(1deg);\n  }\n\n  \/* Animasi Fade Up *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px) rotate(var(--rot, 0deg));\n    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0) rotate(var(--rot, 0deg));\n  }\n  .map-frame.fade-up { transition-delay: 0.2s; }\n  .address-note.fade-up { transition-delay: 0.4s; }\n\n  @media (max-width: 600px) {\n    .map-iframe-container { height: 350px; }\n    .washi-tape { display: none; } \/* Lakban ilang di HP biar nggak ngotorin *\/\n    .map-mobile-br { display: block; } \/* MUNCULIN <br> DI HP *\/\n  }\n<\/style>\n\n<section class=\"map-doodle-section\">\n  \n  <div class=\"map-title-wrap fade-up\" style=\"--rot: -2deg;\">\n    <h2 class=\"map-title\">Markas Utama \ud83c\udff4\u200d\u2620\ufe0f<\/h2>\n    <div class=\"map-subtitle\">Temui gue di sarang ini <br class=\"map-mobile-br\">(atau kirim paket lewat pos)<\/div>\n  <\/div>\n\n  <!-- Bingkai Peta -->\n  <div class=\"map-frame fade-up\" style=\"--rot: 0deg;\">\n    <div class=\"washi-tape tape-left\"><\/div>\n    <div class=\"washi-tape tape-right\"><\/div>\n\n    <div class=\"map-iframe-container\">\n      <!-- Ganti src iframe bawah ini dengan link Google Maps Embed kamu sendiri -->\n      <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d31708.99599582767!2d106.845131!3d-6.208763!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf0fdad786a2!2sJakarta!5e0!3m2!1sen!2sid!4v1700000000000!5m2!1sen!2sid\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n    <\/div>\n\n    <!-- Overlay SVG Coretan Jalur -->\n    <div class=\"map-overlay\">\n      <svg viewBox=\"0 0 800 450\" preserveAspectRatio=\"none\" style=\"width: 100%; height: 100%;\">\n        <!-- Jalur berkelok dari kiri atas ke kanan bawah -->\n        <path class=\"doodle-path\" d=\"M 50,50 Q 150,100 250,80 T 400,200 T 550,350\" \/>\n        <!-- Coretan kecil lain (opsional) -->\n        <path class=\"doodle-path\" d=\"M 600,50 L 650,100 L 600,150 L 650,200\" stroke-width=\"2\" opacity=\"0.5\"\/>\n      <\/svg>\n      <div class=\"x-spot\">X<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Kertas Alamat -->\n  <div class=\"address-note fade-up\" style=\"--rot: 1deg;\">\n    \ud83d\udccd Jl. Jalan Menuju Kesenangan No. 123, Jakarta Ngak Lurus, Indonesia\n  <\/div>\n\n<\/section>\n\n<script>\n  \/\/ Jangan lupa pastikan script IntersectionObserver ini tetap ada di bawah page kamu\n  \/\/ (Kalau sebelumnya udah ada, nggak usah di-copy lagi)\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"is-visible\");\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.2 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c8dc2f e-con-full e-flex e-con e-parent\" data-id=\"0c8dc2f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d911ecc elementor-widget elementor-widget-html\" data-id=\"d911ecc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* === SEKSI FAQ DOODLE TABS === *\/\n  .faq-doodle-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #f9f9f9;\n    background-image: \n      linear-gradient(135deg, #ececec 25%, transparent 25%), \n      linear-gradient(225deg, #ececec 25%, transparent 25%), \n      linear-gradient(45deg, #ececec 25%, transparent 25%), \n      linear-gradient(315deg, #ececec 25%, #f9f9f9 25%);\n    background-position: 10px 0, 10px 0, 0 0, 0 0;\n    background-size: 20px 20px; \/* Pola crosshatch *\/\n    padding: 80px 20px;\n    display: flex;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .faq-container {\n    width: 100%;\n    max-width: 800px;\n    position: relative;\n    z-index: 2;\n  }\n\n  \/* Judul *\/\n  .faq-title-wrap {\n    text-align: center;\n    margin-bottom: 50px;\n  }\n  .faq-title {\n    font-size: clamp(28px, 7vw, 55px);\n    color: #333;\n    margin: 0;\n    text-shadow: 1px 1px 0px #888;\n    line-height: 1.2;\n  }\n  .faq-subtitle {\n    font-size: 16px;\n    color: #555;\n    margin-top: 10px;\n    padding: 0 10px;\n  }\n\n  \/* Layout Utama Kiri-Kanan *\/\n  .faq-layout {\n    display: flex;\n    gap: 30px;\n    align-items: flex-start;\n  }\n\n  \/* Bagian Kiri: Daftar Tab Pertanyaan *\/\n  .faq-tabs {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n    padding-top: 20px;\n  }\n\n  .faq-tab {\n    background: #fff;\n    border: 3px solid #333;\n    border-radius: 15px 5px 5px 15px;\n    padding: 15px 20px;\n    cursor: pointer;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 18px;\n    color: #333;\n    text-align: left;\n    position: relative;\n    box-shadow: 4px 4px 0px #333;\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    transform: translateX(-10px);\n  }\n\n  \/* Warna Tab *\/\n  .faq-tab:nth-child(1) { background: #ffadad; }\n  .faq-tab:nth-child(2) { background: #ffde7d; }\n  .faq-tab:nth-child(3) { background: #d4edda; }\n  .faq-tab:nth-child(4) { background: #bde0ff; }\n\n  .faq-tab:hover {\n    transform: translateX(0px);\n    color: #333; \n  }\n  .faq-tab.active {\n    transform: translateX(20px);\n    z-index: 5;\n    box-shadow: 6px 6px 0px #ff5252;\n    color: #333;\n  }\n  .faq-tab.active::after {\n    content: '\ud83d\udc49';\n    position: absolute;\n    right: 15px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 20px;\n  }\n\n  \/* Bagian Kanan: Papan Jawaban *\/\n  .faq-board {\n    flex: 2;\n    background: #fff;\n    border: 4px solid #333;\n    border-radius: 5px 20px 5px 20px;\n    box-shadow: 8px 8px 0px #333;\n    padding: 40px 30px 30px 30px;\n    position: relative;\n    min-height: 350px; \/* Dinaikin dikit biar teks panjang muat *\/\n    overflow: hidden;\n  }\n\n  \/* Paperclip di atas papan *\/\n  .paperclip {\n    position: absolute;\n    top: -15px;\n    right: 30px;\n    width: 40px;\n    height: 60px;\n    border: 4px solid #888;\n    border-radius: 20px;\n    z-index: 6;\n    transform: rotate(15deg);\n  }\n  .paperclip::after {\n    content: '';\n    position: absolute;\n    top: 10px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 20px;\n    height: 40px;\n    border: 4px solid #888;\n    border-radius: 10px;\n    background: #fff;\n  }\n\n  \/* Garis Buku Tulis di Papan *\/\n  .faq-board::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 40px;\n    width: 2px;\n    background: rgba(255, 82, 82, 0.3);\n  }\n\n  \/* Konten Jawaban *\/\n  .faq-answer {\n    display: none;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity 0.4s ease, transform 0.4s ease;\n    padding-left: 20px;\n  }\n  .faq-answer.active {\n    display: block;\n    animation: slideInAnswer 0.5s forwards;\n  }\n  @keyframes slideInAnswer {\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .faq-answer h3 {\n    font-size: 24px;\n    color: #ff5252;\n    margin: 0 0 15px 0;\n    text-decoration: underline wavy #333;\n  }\n  \n  \/* === PERBAIKAN PARAGRAF === *\/\n  .faq-answer p {\n    font-size: 18px; \/* Dikurangi 2px biar muat lebih banyak teks *\/\n    color: #444;\n    line-height: 1.6; \/* Jarak antar baris dilonggarin *\/\n    margin: 0 0 15px 0; \/* Kasih jarak bawah antar paragraf *\/\n    text-align: justify; \/* Rapi kanan-kiri *\/\n  }\n  .faq-answer p:last-child {\n    margin-bottom: 0; \/* Paragraf terakhir nggak usah ada jarak bawah *\/\n  }\n  \/* ========================== *\/\n\n  \/* Animasi Fade Up *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px) rotate(var(--rot, 0deg));\n    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0) rotate(var(--rot, 0deg));\n  }\n  .faq-board.fade-up { transition-delay: 0.2s; }\n\n  \/* === RESPONSIVE HP === *\/\n  @media (max-width: 600px) {\n    .faq-layout {\n      flex-direction: column;\n      gap: 20px;\n    }\n    .faq-tabs {\n      padding-top: 0;\n      flex-direction: column;\n      gap: 12px;\n    }\n    .faq-tab {\n      transform: translateX(0);\n      font-size: 16px;\n      padding: 12px 15px;\n      width: 100%;\n    }\n    .faq-tab:hover {\n      transform: translateX(0);\n    }\n    .faq-tab.active {\n      transform: translateX(10px);\n      box-shadow: 4px 4px 0px #ff5252;\n    }\n    .faq-tab.active::after {\n      display: none;\n    }\n    .faq-board {\n      min-height: 300px;\n    }\n    .paperclip {\n      right: 15px;\n      width: 30px;\n      height: 45px;\n    }\n    .faq-answer p {\n      font-size: 16px;\n    }\n  }\n<\/style>\n\n<section class=\"faq-doodle-section\">\n  <div class=\"faq-container\">\n    \n    <div class=\"faq-title-wrap fade-up\" style=\"--rot: -2deg;\">\n      <h2 class=\"faq-title\">Tumpukan Pertanyaan yang Seharusnya Nggak Ditanyakan \ud83e\udd14<\/h2>\n      <p class=\"faq-subtitle\">Pilih pertanyaan terserah lo deh. Jawabannya akan muncul dengan penuh tanggung jawab yang sangat meragukan.<\/p>\n    <\/div>\n\n    <div class=\"faq-layout\">\n      \n      <!-- Kiri: Tab Pertanyaan -->\n      <div class=\"faq-tabs fade-up\">\n        <button class=\"faq-tab active\" data-target=\"q1\">Lo nerima bayaran pakai apa aja?<\/button>\n        <button class=\"faq-tab\" data-target=\"q2\">Punya ide tapi nggak punya desain?<\/button>\n        <button class=\"faq-tab\" data-target=\"q3\">Deadline ngerjain project cepet?<\/button>\n        <button class=\"faq-tab\" data-target=\"q4\">Mau revisi bayar lagi nggak?<\/button>\n      <\/div>\n\n      <!-- Kanan: Papan Jawaban -->\n      <div class=\"faq-board fade-up\">\n        <div class=\"paperclip\"><\/div>\n        \n        <div class=\"faq-answer active\" id=\"q1\">\n          <h3>Metode Pembayaran & Persembahan<\/h3>\n          <p>Gue nerima transfer bank, e-wallet, dan metode pembayaran yang masih diakui peradaban. Kalau mau bayar pakai PayPal boleh. Kripto juga boleh, walaupun gue sampai sekarang belum ngerti kenapa uang bisa punya rasa takut.<\/p>\n          <p>Kalau nggak punya duit, jangan panik. Bisa bayar pakai doa, tapi kemungkinan besar invoice-nya tetap gue kirim karena doa belum tersedia di sistem pembayaran. Kalau mau bayar pakai pisang, minimal 3 sisir dan jangan yang masih dimakan monyet. Gue punya batas profesional.<\/p>\n        <\/div>\n\n        <div class=\"faq-answer\" id=\"q2\">\n          <h3>Ide Nyasar, Desain Menjemput<\/h3>\n          <p>Bisa banget. Lo cukup kasih gue idenya. Mau idenya masih berantakan, setengah matang, atau cuma berupa kalimat \u201cpokoknya bikin yang keren\u201d, gue terima.<\/p>\n          <p>Nanti kita bedah pelan-pelan sampai ketemu bentuknya. Kalau idenya cuma berupa coretan di kertas, kirim aja. Kalau cuma berupa gambar tangan dengan lingkaran, panah, dan tulisan \u201cINI NANTI KEREN\u201d, juga nggak masalah. Gue akan mencoba menerjemahkan bahasa tersebut sebelum otak gue mengajukan surat pengunduran diri.<\/p>\n        <\/div>\n\n        <div class=\"faq-answer\" id=\"q3\">\n          <h3>Kecepatan Tidak Dijamin<\/h3>\n          <p>Web sederhana bisa dikerjakan beberapa hari. Kalau project-nya kompleks, waktunya menyesuaikan tingkat kesulitan dan jumlah penderitaan. Semakin cepat lo balas chat, semakin cepat project jalan.<\/p>\n          <p>Kalau lo hilang 6 hari lalu muncul dengan \u201cgimana bang?\u201d, waktu pengerjaan otomatis masuk mode fosil.<\/p>\n        <\/div>\n\n        <div class=\"faq-answer\" id=\"q4\">\n          <h3>Revisi dan Drama<\/h3>\n          <p>Revisi minor masih aman. Ganti warna, teks, posisi, ukuran, dan sejenisnya bisa dibahas. Tapi kalau awalnya minta \u201cubah dikit\u201d lalu ternyata seluruh website berubah menjadi marketplace, portal berita, dan bandara internasional\u2026 kita perlu duduk bersama.<\/p>\n          <p>Membahas masa depan. Membahas invoice. Membahas kenapa kita sampai di titik ini.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Intersection Observer (Fade Up)\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"is-visible\");\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.15 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n    \/\/ 2. Logika Tab Doodle\n    const tabs = document.querySelectorAll('.faq-tab');\n    const answers = document.querySelectorAll('.faq-answer');\n\n    tabs.forEach(tab => {\n      tab.addEventListener('click', function() {\n        const targetId = this.getAttribute('data-target');\n\n        \/\/ Reset semua tab dan jawaban\n        tabs.forEach(t => t.classList.remove('active'));\n        answers.forEach(a => a.classList.remove('active'));\n\n        \/\/ Aktifin tab yang diklik\n        this.classList.add('active');\n\n        \/\/ Munculin jawaban yang sesuai\n        const targetAnswer = document.getElementById(targetId);\n        if (targetAnswer) {\n          targetAnswer.classList.add('active');\n        }\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-78bb189 e-con-full e-flex e-con e-parent\" data-id=\"78bb189\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0865ee elementor-widget elementor-widget-html\" data-id=\"d0865ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* === SEKSI FAREWELL DOODLE INTERAKTIF === *\/\n  .farewell-doodle-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #fff8e1;\n    background-image: radial-gradient(#e6dcc3 1px, transparent 1px);\n    background-size: 20px 20px;\n    padding: 120px 20px 100px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n    min-height: 500px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n\n  \/* Efek Garis Sobek di atas section *\/\n  .torn-top {\n    position: absolute;\n    top: -1px;\n    left: 0;\n    width: 100%;\n    height: 40px;\n    fill: #f9f9f9;\n    filter: drop-shadow(0 -2px 0 #e0e0e0);\n  }\n\n  \/* Doodle Mengambang (Atribut) *\/\n  .doodle-float {\n    position: absolute;\n    pointer-events: none;\n    opacity: 0.8;\n    animation: doodleBob 3s ease-in-out infinite;\n    z-index: 1;\n  }\n  @keyframes doodleBob {\n    0%, 100% { transform: translateY(0) rotate(var(--r)); }\n    50% { transform: translateY(-10px) rotate(calc(var(--r) + 5deg)); }\n  }\n\n  \/* Posisi Atribut *\/\n  .doodle-star { top: 20%; right: 12%; width: 50px; --r: 10deg; animation-delay: 1s; }\n  .doodle-envelope { bottom: 20%; right: 10%; width: 50px; --r: -10deg; animation-delay: 0.5s; }\n  .doodle-smiley { bottom: 15%; left: 15%; width: 60px; --r: 5deg; animation-delay: 1.5s; }\n\n  \/* === Responsive HP untuk Atribut === *\/\n  @media (max-width: 600px) {\n    .doodle-star { top: 8%; right: 5%; width: 35px; }\n    .doodle-envelope { bottom: 10%; right: 5%; width: 40px; }\n    .doodle-smiley { bottom: 8%; left: 5%; width: 45px; }\n  }\n\n  \/* Pembungkus Karakter Doodle *\/\n  .doodle-wrapper {\n    position: relative;\n    cursor: pointer;\n    transition: transform 0.2s ease;\n    margin-top: 40px;\n    z-index: 5;\n  }\n  .doodle-wrapper:hover {\n    transform: scale(1.02);\n  }\n\n  \/* SVG Doodle *\/\n  .doodle-svg {\n    width: 220px;\n    height: auto;\n    overflow: visible;\n  }\n\n  \/* Animasi Nafas\/Mengangguk Sedih *\/\n  .head-group {\n    transform-origin: 100px 120px;\n    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    animation: sadBob 3s ease-in-out infinite;\n  }\n  @keyframes sadBob {\n    0%, 100% { transform: rotate(8deg) translateY(2px); }\n    50% { transform: rotate(10deg) translateY(4px); }\n  }\n\n  \/* Anak Panah Mata *\/\n  .pupil {\n    transition: transform 0.4s ease;\n    transform: translateY(8px);\n  }\n\n  \/* Mulut *\/\n  .mouth-sad { transition: opacity 0.2s ease; opacity: 1; }\n  .mouth-happy { transition: opacity 0.2s ease; opacity: 0; }\n\n  \/* Kondisi Pas Diklik (Class .awake) *\/\n  .doodle-wrapper.awake .head-group {\n    animation: none;\n    transform: rotate(0deg) translateY(0px);\n  }\n  .doodle-wrapper.awake .pupil {\n    transform: translateY(0px);\n  }\n  .doodle-wrapper.awake .mouth-sad { opacity: 0; }\n  .doodle-wrapper.awake .mouth-happy { opacity: 1; }\n\n  \/* Teks \"Klik Saya...\" di atas kepala *\/\n  .click-hint {\n    position: absolute;\n    bottom: 180px; \/* Dah dikasih jarak napas yang pas *\/\n    left: 50%;\n    transform: translateX(-50%) translateY(0);\n    background: #ffde7d;\n    color: #5a4a3b;\n    padding: 5px 15px;\n    border-radius: 15px;\n    border: 2px solid #5a4a3b;\n    font-size: 16px;\n    white-space: nowrap;\n    transition: all 0.3s ease;\n    animation: hintBob 1.5s ease-in-out infinite;\n    z-index: 6;\n  }\n  @keyframes hintBob {\n    0%, 100% { transform: translateX(-50%) translateY(0); }\n    50% { transform: translateX(-50%) translateY(-5px); }\n  }\n  \/* Kalau udah diklik, hintnya ilang *\/\n  .doodle-wrapper.awake .click-hint {\n    opacity: 0;\n    pointer-events: none;\n    transform: translateX(-50%) translateY(-20px) scale(0.5);\n  }\n\n  \/* Balon Textucapan *\/\n  .speech-bubble {\n    position: absolute;\n    bottom: 180px; \/* Dah dikasih jarak napas yang pas *\/\n    left: 50%;\n    transform: translateX(-50%) scale(0.5) translateY(20px);\n    background: #fff;\n    border: 3px solid #5a4a3b;\n    padding: 15px 25px;\n    border-radius: 20px;\n    box-shadow: 4px 4px 0px #a89a82;\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    width: 250px;\n    z-index: 10;\n  }\n  @media (max-width: 600px) {\n    .speech-bubble {\n      width: 200px;\n      font-size: 16px;\n    }\n  }\n  .speech-bubble::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 12px 12px 0;\n    border-style: solid;\n    border-color: #5a4a3b transparent;\n  }\n  .speech-bubble::before {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-3px);\n    border-width: 9px 9px 0;\n    border-style: solid;\n    border-color: #fff transparent;\n    z-index: 2;\n  }\n\n  .doodle-wrapper.awake .speech-bubble {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n\n  \/* Animasi Fade Up *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px) rotate(var(--rot, 0deg));\n    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0) rotate(var(--rot, 0deg));\n  }\n<\/style>\n\n<section class=\"farewell-doodle-section\">\n  \n  <svg class=\"torn-top\" viewBox=\"0 0 1440 40\" preserveAspectRatio=\"none\">\n    <path d=\"M0,0 L1440,0 L1440,25 C 1200,45 1200,15 960,35 C 720,55 720,20 480,40 C 240,60 240,20 0,40 Z\" \/>\n  <\/svg>\n\n  <!-- Atribut Doodle Mengambang -->\n  <!-- Bintang -->\n  <svg class=\"doodle-float doodle-star\" viewBox=\"0 0 100 100\" fill=\"#ff5252\" stroke=\"#5a4a3b\" stroke-width=\"3\" stroke-linecap=\"round\">\n    <path d=\"M50 10 L 61 39 L 90 39 L 67 57 L 76 85 L 50 68 L 24 85 L 33 57 L 10 39 L 39 39 Z\" \/>\n  <\/svg>\n\n  <!-- Amplop Terlipat -->\n  <svg class=\"doodle-float doodle-envelope\" viewBox=\"0 0 100 100\" fill=\"#bde0ff\" stroke=\"#5a4a3b\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"5\" \/>\n    <path d=\"M10 25 L50 55 L90 25\" fill=\"none\" \/>\n  <\/svg>\n\n  <!-- Emoji Senyum -->\n  <svg class=\"doodle-float doodle-smiley\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#5a4a3b\" stroke-width=\"3\" stroke-linecap=\"round\">\n    <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#ffde7d\" \/>\n    <path d=\"M30 45 L 40 45 M 60 45 L 70 45\" \/>\n    <path d=\"M30 60 Q 50 80, 70 60\" \/>\n  <\/svg>\n\n  <!-- Karakter Doodle -->\n  <div class=\"doodle-wrapper fade-up\" id=\"doodleChar\">\n    \n    <!-- Hint Klik Saya -->\n    <div class=\"click-hint\">Klik saya...<\/div>\n\n    <!-- Balon Pesan -->\n    <div class=\"speech-bubble\">\n      Hai sob, aq harap suatu hari kamu datang kesini lagi ya.. \ud83e\udd7a\n    <\/div>\n\n    <!-- SVG Coretan Pensil -->\n    <svg class=\"doodle-svg\" viewBox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <defs>\n        <filter id=\"pencilTexture\">\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.04\" numOctaves=\"5\" result=\"noise\"\/>\n          <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"2\" \/>\n        <\/filter>\n      <\/defs>\n\n      <g filter=\"url(#pencilTexture)\" stroke=\"#333\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        \n        <!-- Kaki -->\n        <path d=\"M75,185 L70,210 L80,210 L85,185\" fill=\"none\" \/>\n        <path d=\"M125,185 L120,210 L130,210 L135,185\" fill=\"none\" \/>\n        \n        <!-- Tangan -->\n        <path d=\"M50,130 L35,160\" fill=\"none\" \/>\n        <path d=\"M150,130 L165,160\" fill=\"none\" \/>\n\n        <!-- Badan -->\n        <path d=\"M50,185 L50,110 Q50,90 70,90 L130,90 Q150,90 150,110 L150,185 Z\" fill=\"#fffbe6\" \/>\n\n        <!-- Grup Kepala -->\n        <g class=\"head-group\">\n          <!-- Mata -->\n          <circle cx=\"80\" cy=\"115\" r=\"12\" fill=\"#fff\" \/>\n          <circle cx=\"120\" cy=\"115\" r=\"12\" fill=\"#fff\" \/>\n          \n          <!-- Anak Panah Mata -->\n          <circle class=\"pupil\" cx=\"80\" cy=\"115\" r=\"5\" fill=\"#333\" \/>\n          <circle class=\"pupil\" cx=\"120\" cy=\"115\" r=\"5\" fill=\"#333\" \/>\n\n          <!-- Alis (Sedih) -->\n          <path d=\"M68,100 L88,105\" fill=\"none\" \/>\n          <path d=\"M132,100 L112,105\" fill=\"none\" \/>\n\n          <!-- Mulut Sedih -->\n          <path class=\"mouth-sad\" d=\"M85,145 Q100,135 115,145\" fill=\"none\" \/>\n          \n          <!-- Mulut Senyum -->\n          <path class=\"mouth-happy\" d=\"M80,140 Q100,160 120,140\" fill=\"none\" \/>\n        <\/g>\n\n      <\/g>\n    <\/svg>\n  <\/div>\n\n<\/section>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Intersection Observer\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"is-visible\");\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.2 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n    \/\/ 2. Logika Klik Karakter Doodle\n    const doodle = document.getElementById('doodleChar');\n    let isAwake = false;\n\n    doodle.addEventListener('click', function() {\n      if (!isAwake) {\n        doodle.classList.add('awake');\n        isAwake = true;\n        \n        \/\/ Auto tutup balon setelah 6 detik\n        setTimeout(() => {\n          if(isAwake) {\n            doodle.classList.remove('awake');\n            isAwake = false;\n          }\n        }, 6000);\n      } else {\n        \/\/ Klik lagi pas senyum -> balik sedih\n        doodle.classList.remove('awake');\n        isAwake = false;\n      }\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>Punya Cerita? Sini Ceritain! Mau ngajak ngopi, kasih masukan, atau cuma mau nimbrung? Ketuk kertas-kertas di bawah ini buat nyampein pesannya. Aku bales secepet kilat (kalau lagi nggak tidur)! \u26a1 WhatsApp Butuh balasan dadakan? Chat aja di sini, paling cepet!\ud83d\udcf1 0812-3456-7890 Email Buat urusan serius atau kirim file besar. Gas inbox!\u2709\ufe0f halo@emailkamu.com Instagram Mau ngeliat [&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-539","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":76,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/539\/revisions"}],"predecessor-version":[{"id":1243,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/539\/revisions\/1243"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/media?parent=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}