{"id":516,"date":"2026-08-14T01:58:23","date_gmt":"2026-08-14T01:58:23","guid":{"rendered":"https:\/\/lab.rwb.my.id\/hero\/?page_id=516"},"modified":"2026-08-15T14:22:14","modified_gmt":"2026-08-15T14:22:14","slug":"beranda","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/hero\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"516\" class=\"elementor elementor-516\">\n\t\t\t\t<div class=\"elementor-element elementor-element-052bcc8 e-con-full e-flex e-con e-parent\" data-id=\"052bcc8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ba670f elementor-widget elementor-widget-html\" data-id=\"1ba670f\" 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&display=swap');\n\n  \/* Wrapper Hero Section *\/\n  .doodle-hero-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    \/* Background Kertas Buku Tulis *\/\n    background-color: #ffffff;\n    background-image: \n      linear-gradient(to right, transparent 0px, transparent 79px, #ffadad 79px, #ffadad 81px, transparent 81px), \/* Garis merah pinggir *\/\n      linear-gradient(#bde0ff 1px, transparent 1px); \/* Garis biru horizontal *\/\n    background-size: 100% 35px;\n    padding: 80px 30px;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 90vh;\n  }\n\n  \/* Kontainer Utama *\/\n  .doodle-hero-content {\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    gap: 50px;\n    width: 100%;\n    padding-left: 40px; \/* Jarak dari garis merah *\/\n    \n    \/* Persiapan Animasi Fade Up *\/\n    opacity: 0;\n    transform: translateY(50px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n  }\n\n  .doodle-hero-content.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* Bagian Kiri (Teks) *\/\n  .hero-text-area {\n    flex: 1;\n    z-index: 2;\n  }\n\n  .hero-badge {\n    display: inline-block;\n    background-color: #fff9c4;\n    border: 2px solid #333;\n    padding: 5px 15px;\n    border-radius: 15px 25px 15px 25px;\n    font-size: 18px;\n    transform: rotate(-2deg);\n    margin-bottom: 20px;\n    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);\n  }\n\n  .hero-title {\n    font-size: 56px;\n    line-height: 1.1;\n    color: #333;\n    margin: 0 0 20px 0;\n  }\n\n  \/* Efek Stabilo di teks *\/\n  .hero-highlight {\n    background-color: rgba(255, 235, 59, 0.5);\n    padding: 0 8px;\n    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);\n    display: inline-block;\n    transform: rotate(-1deg);\n  }\n\n  .hero-desc {\n    font-size: 22px;\n    color: #555;\n    line-height: 1.5;\n    max-width: 500px;\n    margin-bottom: 35px;\n  }\n\n  \/* Tombol *\/\n  .hero-buttons {\n    display: flex;\n    gap: 30px;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  \/* Tombol Utama (Kotak Hitam) *\/\n  .btn-doodle-primary {\n    background-color: #333;\n    color: #fff !important;\n    border: 3px solid #333;\n    padding: 12px 30px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 22px;\n    text-decoration: none;\n    border-radius: 15px 30px 15px 30px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    display: inline-block;\n  }\n\n  .btn-doodle-primary:hover {\n    transform: translate(-3px, -3px) rotate(-2deg);\n    box-shadow: 5px 5px 0px #ff5252;\n    color: #fff !important;\n  }\n\n  \/* Tombol Sekunder (Link Coretan) *\/\n  .btn-doodle-link {\n    position: relative;\n    background: transparent;\n    color: #333 !important;\n    padding: 5px 5px 0 5px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 22px;\n    text-decoration: none;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    cursor: pointer;\n    transition: transform 0.2s ease, color 0.2s ease;\n  }\n\n  .btn-doodle-link:hover {\n    transform: translateY(-3px);\n    color: #ff5252 !important;\n  }\n\n  .link-underline {\n    width: 100%;\n    height: 10px;\n    margin-top: -2px;\n    transition: stroke 0.2s ease;\n  }\n\n  .btn-doodle-link:hover .link-underline path {\n    stroke: #ff5252;\n  }\n\n  \/* Bagian Kanan (Gambar\/Foto) *\/\n  .hero-image-area {\n    flex: 1;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    z-index: 2;\n    \n    opacity: 0;\n    transform: translateY(50px) rotate(3deg);\n    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;\n  }\n  \n  .doodle-hero-content.is-visible .hero-image-area {\n    opacity: 1;\n    transform: translateY(0) rotate(0deg);\n  }\n\n  \/* Frame Foto ala Polaroid *\/\n  .hero-polaroid-frame {\n    background-color: #fff;\n    padding: 15px 15px 30px 15px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);\n    transform: rotate(3deg);\n    max-width: 350px;\n    position: relative;\n    transition: transform 0.3s ease;\n  }\n\n  .hero-polaroid-frame:hover {\n    transform: rotate(0deg) scale(1.02);\n  }\n\n  .hero-polaroid-frame img {\n    width: 100%;\n    height: auto;\n    display: block;\n    filter: contrast(1.1) saturate(0.9);\n  }\n\n  \/* Caption Coretan Tangan *\/\n  .hero-polaroid-caption {\n    font-family: 'Patrick Hand', cursive;\n    font-size: 26px;\n    color: #444;\n    text-align: center;\n    margin-top: 15px;\n    transform: rotate(-1deg);\n  }\n\n  \/* Efek Lakban di atas foto *\/\n  .hero-tape {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%) rotate(-2deg);\n    width: 120px;\n    height: 35px;\n    background-color: rgba(255, 255, 255, 0.6);\n    border-left: 2px dashed rgba(0,0,0,0.1);\n    border-right: 2px dashed rgba(0,0,0,0.1);\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n    z-index: 5;\n  }\n\n  \/* Coretan SVG buat hiasan *\/\n  .hero-doodle-arrow {\n    position: absolute;\n    bottom: -30px;\n    left: -40px;\n    width: 80px;\n    transform: rotate(-10deg);\n    z-index: 3;\n  }\n\n  .hero-doodle-star {\n    position: absolute;\n    top: -20px;\n    right: -20px;\n    width: 50px;\n    transform: rotate(15deg);\n    z-index: 3;\n  }\n\n  \/* === MODAL POP-UP TIPS === *\/\n  .tips-modal-overlay {\n    display: none;\n    position: fixed;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,0.7);\n    z-index: 9999;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 20px;\n    box-sizing: border-box;\n    backdrop-filter: blur(3px); \/* Efek blur di belakang modal *\/\n  }\n\n  .tips-modal-overlay.active {\n    display: flex;\n  }\n\n  .tips-modal-box {\n    background-color: #ffffff;\n    \/* Background Buku Tulis Sama Kayak Hero *\/\n    background-image: \n      linear-gradient(to right, transparent 0px, transparent 79px, #ffadad 79px, #ffadad 81px, transparent 81px), \n      linear-gradient(#bde0ff 1px, transparent 1px);\n    background-size: 100% 35px;\n    max-width: 500px;\n    width: 100%;\n    padding: 40px 30px 40px 90px; \/* Padding kiri 90px biar nggak nabrak garis merah *\/\n    box-shadow: 10px 10px 30px rgba(0,0,0,0.3);\n    border-radius: 5px;\n    transform: rotate(-1deg);\n    position: relative;\n    margin: auto; \/* Trik biar nggak kepotong di layar kecil *\/\n    max-height: 90vh;\n    overflow-y: auto;\n  }\n\n  .tips-modal-tape {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%) rotate(3deg);\n    width: 120px;\n    height: 35px;\n    background-color: rgba(255, 255, 255, 0.6);\n    border-left: 2px dashed rgba(0,0,0,0.1);\n    border-right: 2px dashed rgba(0,0,0,0.1);\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n    z-index: 5;\n  }\n\n  .tips-close-btn {\n    position: absolute;\n    top: 15px;\n    right: 15px;\n    background: #ff5252;\n    color: #fff;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    font-size: 24px;\n    line-height: 0;\n    border: 2px solid #333;\n    box-shadow: 2px 2px 0px #333;\n    z-index: 10;\n    transition: transform 0.2s ease;\n  }\n\n  .tips-close-btn:hover {\n    transform: rotate(90deg) scale(1.1);\n  }\n\n  .tips-modal-title {\n    font-size: 32px;\n    color: #333;\n    margin-bottom: 25px;\n    text-align: center;\n    transform: rotate(-1deg);\n  }\n\n  .tips-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  .tips-list li {\n    display: flex;\n    align-items: flex-start;\n    gap: 15px;\n    margin-bottom: 20px;\n    font-size: 20px;\n    color: #444;\n    line-height: 1.4;\n  }\n\n  .tips-list li svg {\n    min-width: 24px;\n    width: 24px;\n    height: 24px;\n    margin-top: 5px;\n  }\n\n    \/* Responsive Hero & Modal HP *\/\n  @media (max-width: 768px) {\n    .doodle-hero-content {\n      flex-direction: column;\n      text-align: center;\n      padding-left: 10px;\n    }\n    .hero-title {\n      font-size: 40px;\n    }\n    \n    \/* Atur tombol biar sejajar & nggak dempet *\/\n    .hero-buttons {\n      justify-content: center; \n      gap: 30px; \/* Dinaikin jadi 30px biar lapang *\/\n      flex-wrap: nowrap; \/* PAKSA TETAP SATU BARIS *\/\n      align-items: center; \/* Sejajarkan tingginya *\/\n      width: 100%;\n      margin-top: 10px;\n    }\n    .btn-doodle-primary {\n      font-size: 18px;\n      padding: 10px 20px;\n      flex-shrink: 0; \/* Biar nggak ngepel *\/\n    }\n    .btn-doodle-link {\n      font-size: 18px;\n      padding: 5px 5px 0 5px;\n      flex-shrink: 0; \/* Biar nggak ngepel *\/\n    }\n    .doodle-hero-wrapper {\n      padding: 50px 15px;\n    }\n    .hero-image-area {\n      margin-top: 40px;\n    }\n\n    \/* Modal Responsive *\/\n    .tips-modal-box {\n      padding: 40px 20px 30px 60px; \n      transform: rotate(0deg); \n    }\n    .tips-modal-title { font-size: 26px; }\n    .tips-list li { font-size: 18px; }\n  }\n<\/style>\n\n<div class=\"doodle-hero-wrapper\">\n  <div class=\"doodle-hero-content\" id=\"heroContent\">\n    \n    <!-- Kiri: Teks -->\n    <div class=\"hero-text-area\">\n      <div class=\"hero-badge\">\u2728 Selamat Datang Sob!<\/div>\n      <h1 class=\"hero-title\">Dari \u201cGue Punya Ide\u2026\u201d Jadi <span class=\"hero-highlight\">ANJIR KEREN JUGA<\/span><\/h1>\n      <p class=\"hero-desc\">Di sini ide liar nggak akan dihakimi. Mau datang bawa coretan, konsep setengah matang, atau brief yang bikin otak jungkir balik, semuanya bisa kita olah jadi website yang estetik, playful, dan punya identitas sendiri. Kekacauan lo, tanggung jawab gue.<\/p>\n      \n      <div class=\"hero-buttons\">\n        <a href=\"https:\/\/lab.rwb.my.id\/hero\/jurnal\/\" class=\"btn-doodle-primary\">\ud83d\udc40 Intip Coretan Gue<\/a>\n        \n        <!-- TOMBOL PELAJARI DONG (Pemicu Modal) -->\n        <a href=\"#\" class=\"btn-doodle-link\" id=\"openTipsBtn\">\n          <span class=\"link-text-wrapper\">Pelajari Dong \ud83d\udcd6<\/span>\n          <svg class=\"link-underline\" viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\">\n            <path d=\"M0 6 Q 25 1 50 6 T 100 5\" fill=\"none\" stroke=\"#ffde7d\" stroke-width=\"4\" stroke-linecap=\"round\" \/>\n          <\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Kanan: Gambar -->\n    <div class=\"hero-image-area\">\n      <div class=\"hero-polaroid-frame\">\n        <div class=\"hero-tape\"><\/div>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Nikola-Tesla.jpeg\" alt=\"Hero Image\">\n        <div class=\"hero-polaroid-caption\">Nikola Tesla, 1890<\/div>\n        \n        <svg class=\"hero-doodle-star\" viewBox=\"0 0 100 100\">\n          <path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\"\/>\n        <\/svg>\n      <\/div>\n\n      <svg class=\"hero-doodle-arrow\" viewBox=\"0 0 100 100\">\n        <path d=\"M10 50 Q 50 10 80 50 L70 40 M80 50 L70 60\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <text x=\"20\" y=\"80\" font-family=\"Patrick Hand\" font-size=\"20\" fill=\"#ff5252\">Ini aku!<\/text>\n      <\/svg>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- STRUKTUR MODAL POP-UP TIPS -->\n<div class=\"tips-modal-overlay\" id=\"tipsModal\">\n  <div class=\"tips-modal-box\">\n    <!-- Lakban di atas modal -->\n    <div class=\"tips-modal-tape\"><\/div>\n    \n    <!-- Tombol Close -->\n    <div class=\"tips-close-btn\" id=\"closeTipsBtn\">\u00d7<\/div>\n    \n    <h2 class=\"tips-modal-title\">\u270d\ufe0f Tips Nulis Doodle<\/h2>\n    \n    <ul class=\"tips-list\">\n      <li>\n        <svg viewBox=\"0 0 100 100\"><path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\"\/><\/svg>\n        <span>Sediain buku kecil buat nampung ide dadakan. Karena ide terbaik biasanya muncul pas lagi nggak bawa alat tulis. Begitu bukunya ada, otak mendadak: \u201cMaaf, ide sedang tidak tersedia. Silakan coba lagi tahun depan.\u201d<\/span>\n      <\/li>\n      <li>\n        <svg viewBox=\"0 0 100 100\"><path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\"\/><\/svg>\n        <span>Coretan ngawur tetaplah coretan. Jangan minder kalau hasilnya mirip peta harta karun bajak laut yang kehilangan hartanya. Picasso juga mungkin pernah bikin gambar yang bikin orang melongo sambil bilang, \u201cIni apaan, Pak?\u201d Bedanya, beliau sudah terkenal. Kalau kita? \u201cItu gambar apa?\u201d \u2014 \u201cSeni.\u201d \u2014 \u201cOh\u2026 kirain kecipratan saus.\u201d<\/span>\n      <\/li>\n      <li>\n        <svg viewBox=\"0 0 100 100\"><path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\"\/><\/svg>\n        <span>Gunakan stabilo warna-warni seperlunya. Kuning buat penting, merah buat sangat penting, hijau buat mungkin penting, biru buat entah kenapa distabiloin. Kalau seluruh halaman sudah warna-warni, berarti semuanya penting dan tidak ada yang penting.<\/span>\n      <\/li>\n      <li>\n        <svg viewBox=\"0 0 100 100\"><path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\"\/><\/svg>\n        <span>Kalau mentok, tinggalin dulu. Jangan dipaksa sampai tangan menggambar garis lurus tapi hasilnya seperti grafik gempa. Ngopi, jalan-jalan, lihat langit, tatap tembok selama 17 detik, lalu kembali lagi. Kadang ide memang butuh waktu. Kadang juga cuma butuh kamu berhenti bengong sambil menatap kertas seperti sedang negosiasi dengan jin.<\/span>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\n<!-- Script Animasi Muncul & Logic Modal -->\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Animasi Hero Fade Up\n    const heroContent = document.getElementById(\"heroContent\");\n    const observer = new IntersectionObserver(function(entries, observer) {\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.1 });\n\n    if (heroContent) {\n      observer.observe(heroContent);\n    }\n\n    \/\/ 2. Logic Modal Pop-up\n    const tipsModal = document.getElementById(\"tipsModal\");\n    const openTipsBtn = document.getElementById(\"openTipsBtn\");\n    const closeTipsBtn = document.getElementById(\"closeTipsBtn\");\n\n    \/\/ Buka modal\n    if(openTipsBtn) {\n      openTipsBtn.addEventListener(\"click\", function(e) {\n        e.preventDefault(); \/\/ Cegah link lompat ke atas\n        tipsModal.classList.add(\"active\");\n        document.body.style.overflow = \"hidden\"; \/\/ Disable scroll background\n      });\n    }\n\n    \/\/ Tutup modal lewat tombol X\n    if(closeTipsBtn) {\n      closeTipsBtn.addEventListener(\"click\", function() {\n        tipsModal.classList.remove(\"active\");\n        document.body.style.overflow = \"auto\"; \/\/ Enable scroll lagi\n      });\n    }\n\n    \/\/ Tutup modal lewat klik area gelap di luar kotak\n    if(tipsModal) {\n      tipsModal.addEventListener(\"click\", function(e) {\n        if (e.target === tipsModal) {\n          tipsModal.classList.remove(\"active\");\n          document.body.style.overflow = \"auto\";\n        }\n      });\n    }\n\n    \/\/ Tutup modal lewat tombol ESC di keyboard\n    document.addEventListener(\"keydown\", function(e) {\n      if (e.key === \"Escape\" && tipsModal.classList.contains(\"active\")) {\n        tipsModal.classList.remove(\"active\");\n        document.body.style.overflow = \"auto\";\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-8905abe e-con-full e-flex e-con e-parent\" data-id=\"8905abe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b063e3 elementor-widget elementor-widget-html\" data-id=\"2b063e3\" 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&display=swap');\n\n  \/* Wrapper Chaos *\/\n  .chaos-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #f0f4f8;\n    background-image: \n      linear-gradient(#d1d1d1 1px, transparent 1px),\n      linear-gradient(90deg, #d1d1d1 1px, transparent 1px);\n    background-size: 30px 30px;\n    padding: 100px 20px;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 600px;\n    perspective: 1000px;\n  }\n\n  \/* Wrapper buat Animasi Fade-Up *\/\n  .chaos-stage-anim {\n    opacity: 0;\n    transform: translateY(60px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    position: relative;\n  }\n\n  .chaos-stage-anim.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .chaos-stage {\n    position: relative;\n    width: 100%;\n    max-width: 900px;\n    height: 500px;\n    transform-style: preserve-3d;\n    transition: transform 0.1s ease-out;\n  }\n\n  \/* Teks Ngajak Geser (Khusus HP) *\/\n  .drag-hint {\n    display: none;\n    position: absolute;\n    top: -40px;\n    left: 50%;\n    transform: translateX(-50%) rotate(-3deg);\n    background: #ffde7d;\n    padding: 5px 15px;\n    border: 2px solid #333;\n    border-radius: 10px;\n    font-size: 16px;\n    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);\n    z-index: 20;\n    animation: hintBounce 2s infinite;\n  }\n  @keyframes hintBounce {\n    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }\n    50% { transform: translateX(-50%) translateY(-5px) rotate(-3deg); }\n  }\n\n  \/* Elemen Berserakan *\/\n  .chaos-item {\n    position: absolute;\n    transition: box-shadow 0.3s ease, filter 0.3s ease, opacity 0.5s ease;\n    cursor: grab;\n    user-select: none;\n    touch-action: pan-y; \/* INI KUNCINYA! Bisa scroll sekaligus bisa drag item *\/\n    will-change: transform;\n  }\n\n  .chaos-item.is-grabbing {\n    cursor: grabbing;\n    z-index: 999 !important;\n    filter: drop-shadow(10px 15px 20px rgba(0,0,0,0.25)) brightness(1.05);\n  }\n\n  \/* 1. Kertas Coretan Besar *\/\n  .chaos-main-note {\n    background-color: #fff;\n    padding: 40px;\n    width: 400px;\n    top: 50%;\n    left: 50%;\n    transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(var(--drag-x, 0px), var(--drag-y, 0px)) translate(-50%, -50%) rotate(-2deg);\n    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);\n    z-index: 10;\n    clip-path: polygon(0% 5%, 5% 0%, 10% 5%, 15% 0%, 20% 5%, 25% 0%, 30% 5%, 35% 0%, 40% 5%, 45% 0%, 50% 5%, 55% 0%, 60% 5%, 65% 0%, 70% 5%, 75% 0%, 80% 5%, 85% 0%, 90% 5%, 95% 0%, 100% 5%, 100% 100%, 0 100%);\n  }\n\n  .chaos-main-note h2 { font-size: 36px; margin: 0 0 15px 0; color: #333; line-height: 1.1; }\n  .chaos-main-note h2 span { background-color: #ffde7d; padding: 0 5px; display: inline-block; transform: rotate(-2deg); }\n  .chaos-main-note p { font-size: 20px; color: #555; margin: 0; line-height: 1.5; }\n\n  \/* 2. Sticky Note Hijau *\/\n  .chaos-sticky-1 {\n    background-color: #d4edda;\n    width: 150px; height: 150px;\n    top: 10%; left: 5%;\n    transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(-8deg);\n    padding: 20px; box-shadow: 5px 5px 10px rgba(0,0,0,0.1); z-index: 5;\n    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;\n  }\n  .chaos-sticky-1 h3 { font-size: 24px; margin: 10px 0 0 0; color: #333; }\n  .chaos-sticky-1 p { font-size: 16px; margin: 5px 0 0 0; color: #555; }\n\n  \/* 3. Sticky Note Pink *\/\n  .chaos-sticky-2 {\n    background-color: #ffadad;\n    width: 180px; top: 65%; right: 5%;\n    transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(6deg);\n    padding: 15px; box-shadow: 5px 5px 10px rgba(0,0,0,0.1); z-index: 5;\n  }\n  .chaos-sticky-2 p { font-size: 18px; margin: 0; color: #333; }\n\n  \/* 4. Polaroid Melayang *\/\n  .chaos-polaroid {\n    top: 5%; right: 10%;\n    transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(10deg);\n    background: #fff; padding: 10px 10px 30px 10px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15); z-index: 8; width: 120px; text-align: center;\n  }\n  .chaos-polaroid img { width: 100%; height: 100px; object-fit: cover; }\n  .chaos-polaroid .caption { font-size: 16px; color: #555; margin-top: 5px; }\n\n  \/* 5. SVG Bintang *\/\n  .chaos-svg-star {\n    bottom: 10%; left: 15%; width: 80px; height: 80px; z-index: 2;\n    transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(-5deg);\n  }\n\n  \/* 6. SVG Panah *\/\n  .chaos-svg-arrow {\n    top: 45%; left: 28%; width: 100px; z-index: 15;\n    transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(15deg);\n  }\n\n  \/* === RESPONSIVE HP === *\/\n  @media (max-width: 768px) {\n    .chaos-wrapper {\n      padding: 80px 20px 60px 20px;\n      min-height: auto;\n      perspective: none;\n    }\n    .drag-hint { display: block; }\n    \n    .chaos-stage-anim { transform: none; }\n    .chaos-stage {\n      height: auto; display: flex; flex-direction: column; gap: 30px;\n      transform: none !important;\n    }\n    \n    .chaos-item {\n      position: relative !important;\n      top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;\n      width: 100% !important; max-width: 350px; margin: 0 auto;\n      opacity: 0;\n      \/* Wajib ada transform drag di HP biar bisa geser *\/\n      transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) !important;\n    }\n\n    \/* Ganti animasi Pop-up jadi murni Opacity biar gak bentrok sama Drag Transform *\/\n    .chaos-stage-anim.is-visible .chaos-item {\n      opacity: 1;\n    }\n\n    .chaos-main-note { width: 100%; clip-path: none; border: 3px solid #333; }\n    .chaos-svg-star, .chaos-svg-arrow { display: none; }\n  }\n<\/style>\n\n<div class=\"chaos-wrapper\">\n  <div class=\"chaos-stage-anim\" id=\"chaosStageAnim\">\n    \n    <div class=\"drag-hint\">\ud83d\udc49\ud83c\udffd Pencet & Geser Kartunya ke kiri , ke kiri dan ke kiri \ud83e\udd23!<\/div>\n\n    <div class=\"chaos-stage\" id=\"chaosStage\">\n\n      <div class=\"chaos-item chaos-main-note\" data-depth=\"0.2\">\n        <h2>Kreativitas Butuh <span>Sedikit Kekacauan<\/span><\/h2>\n        <p>Layout yang terlalu rapi itu membosankan. Di section ini, sengaja kita bikin berantakan biar otak kamu berpikir: \"Eh, ini klik apa ya?\" Itulah yang bikin web kamu gak dilupain!<\/p>\n      <\/div>\n\n      <div class=\"chaos-item chaos-sticky-1\" data-depth=\"0.6\">\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"><\/path><\/svg>\n        <h3>Anti-Bosen<\/h3>\n        <p>Biar user betah<\/p>\n      <\/div>\n\n      <div class=\"chaos-item chaos-sticky-2\" data-depth=\"0.4\">\n        <p>\"Tetap rapi di kode, berantakan di visual.\" - Kata-kata bijak orang desain.<\/p>\n      <\/div>\n\n      <div class=\"chaos-item chaos-polaroid\" data-depth=\"0.8\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Nikola-Tesla.jpeg\" alt=\"Foto\">\n        <div class=\"caption\">Sang Designer<\/div>\n      <\/div>\n\n      <svg class=\"chaos-item chaos-svg-star\" data-depth=\"1.2\" viewBox=\"0 0 100 100\">\n        <path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"4\" stroke-dasharray=\"5,5\"\/>\n      <\/svg>\n\n      <svg class=\"chaos-item chaos-svg-arrow\" data-depth=\"0.9\" viewBox=\"0 0 100 100\">\n        <path d=\"M10 10 Q 50 10 60 50 T 80 90\" fill=\"none\" stroke=\"#333\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n        <path d=\"M80 90 L70 80 M80 90 L75 75\" fill=\"none\" stroke=\"#333\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n      <\/svg>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const chaosStageAnim = document.getElementById(\"chaosStageAnim\");\n    const chaosStage = document.getElementById(\"chaosStage\");\n    const chaosItems = document.querySelectorAll(\".chaos-item\");\n    const dragHint = document.querySelector(\".drag-hint\");\n\n    \/\/ 1. INTERSECTION OBSERVER (Munculin elemen)\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          if (dragHint) {\n            setTimeout(() => { dragHint.style.opacity = '0'; dragHint.style.transition = 'opacity 0.5s'; }, 7000);\n          }\n        }\n      });\n    }, { threshold: 0.15 });\n\n    if (chaosStageAnim) {\n      observer.observe(chaosStageAnim);\n    }\n\n    \/\/ 2. PARALLAX MOUSE MOVE (DESKTOP ONLY)\n    function isMobile() {\n      return window.matchMedia(\"(max-width: 768px)\").matches;\n    }\n\n    if (!isMobile()) {\n      chaosStage.addEventListener(\"mousemove\", function(e) {\n        const rect = chaosStage.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const centerX = rect.width \/ 2;\n        const centerY = rect.height \/ 2;\n        const moveX = (x - centerX) \/ centerX;\n        const moveY = (y - centerY) \/ centerY;\n\n        chaosStage.style.transform = `rotateY(${moveX * 5}deg) rotateX(${-moveY * 5}deg)`;\n\n        chaosItems.forEach(item => {\n          if (item.classList.contains('is-grabbing')) return;\n          const depth = parseFloat(item.getAttribute(\"data-depth\"));\n          item.style.setProperty('--tx', (moveX * depth * 30) + 'px');\n          item.style.setProperty('--ty', (moveY * depth * 30) + 'px');\n        });\n      });\n\n      chaosStage.addEventListener(\"mouseleave\", function() {\n        chaosStage.style.transform = \"rotateY(0deg) rotateX(0deg)\";\n        chaosItems.forEach(item => {\n          if (item.classList.contains('is-grabbing')) return;\n          item.style.setProperty('--tx', '0px');\n          item.style.setProperty('--ty', '0px');\n        });\n      });\n    }\n\n    \/\/ 3. DRAG & DROP (SIMPLE & MULUS PAKAI PAN-Y)\n    let isDragging = false;\n    let currentDragItem = null;\n    let startX = 0, startY = 0;\n    let initialDragX = 0, initialDragY = 0;\n\n    chaosItems.forEach(item => {\n      item.addEventListener('mousedown', dragStart);\n      item.addEventListener('touchstart', dragStart, { passive: false });\n    });\n\n    function dragStart(e) {\n      isDragging = true;\n      currentDragItem = e.currentTarget;\n      currentDragItem.classList.add('is-grabbing');\n\n      const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n      const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;\n\n      startX = clientX;\n      startY = clientY;\n\n      initialDragX = parseFloat(currentDragItem.style.getPropertyValue('--drag-x')) || 0;\n      initialDragY = parseFloat(currentDragItem.style.getPropertyValue('--drag-y')) || 0;\n\n      document.addEventListener('mousemove', dragMove);\n      document.addEventListener('touchmove', dragMove, { passive: false });\n      document.addEventListener('mouseup', dragEnd);\n      document.addEventListener('touchend', dragEnd);\n    }\n\n    function dragMove(e) {\n      if (!isDragging || !currentDragItem) return;\n      \n      \/\/ Cegah scroll hanya jika jari beneran lagi gerak kinestetik (pan-y browser handle sisanya)\n      if (e.type.includes('touch') && e.cancelable) {\n        e.preventDefault();\n      }\n\n      const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n      const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;\n\n      const deltaX = clientX - startX;\n      const deltaY = clientY - startY;\n\n      currentDragItem.style.setProperty('--drag-x', (initialDragX + deltaX) + 'px');\n      currentDragItem.style.setProperty('--drag-y', (initialDragY + deltaY) + 'px');\n    }\n\n    function dragEnd() {\n      isDragging = false;\n      if (currentDragItem) {\n        currentDragItem.classList.remove('is-grabbing');\n      }\n      currentDragItem = null;\n      document.removeEventListener('mousemove', dragMove);\n      document.removeEventListener('touchmove', dragMove);\n      document.removeEventListener('mouseup', dragEnd);\n      document.removeEventListener('touchend', dragEnd);\n    }\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-80d96b9 e-con-full e-flex e-con e-parent\" data-id=\"80d96b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1f76b3 elementor-widget elementor-widget-html\" data-id=\"b1f76b3\" 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&display=swap');\n\n  \/* Wrapper Section *\/\n  .scratch-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #fffdf0;\n    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);\n    background-size: 25px 25px;\n    padding: 80px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .scratch-container {\n    max-width: 800px;\n    margin: 0 auto;\n    position: relative;\n  }\n\n  \/* Animasi Fade Up *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: opacity 0.8s ease, transform 0.8s ease;\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .scratch-title {\n    font-size: 36px;\n    color: #333;\n    margin-bottom: 40px;\n  }\n  .scratch-title span { text-decoration: underline wavy #ff5252; }\n\n  \/* Area Kotak Scratch *\/\n  .scratch-stage {\n    position: relative;\n    width: 100%;\n    aspect-ratio: 16\/9;\n    border: 3px solid #333;\n    border-radius: 15px;\n    box-shadow: 10px 10px 0px #ffde7d;\n    overflow: hidden;\n    margin: 0 auto;\n    \/* CURSOR PENGHAPUS SVG (Merah) *\/\n    cursor: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ff5252' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21'\/><path d='M22 21H7'\/><path d='m5 11 9 9'\/><\/svg>\") 4 28, auto;\n    background-color: #fff;\n  }\n\n  .scratch-content {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 40px;\n    box-sizing: border-box;\n    z-index: 1;\n  }\n\n  .scratch-content h3 { font-size: 32px; color: #ff5252; margin: 0 0 15px 0; }\n  .scratch-content p { font-size: 20px; color: #333; max-width: 400px; margin: 0 0 30px 0; }\n\n  .scratch-btn {\n    background: #333;\n    color: #fff;\n    padding: 12px 30px;\n    border: 3px solid #333;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 22px;\n    text-decoration: none;\n    border-radius: 15px 30px 15px 30px;\n    transition: all 0.2s;\n    cursor: pointer;\n  }\n  .scratch-btn:hover {\n    background: #ff5252;\n    border-color: #ff5252;\n    transform: translate(-3px, -3px) rotate(-2deg);\n    box-shadow: 5px 5px 0px #333;\n  }\n\n  .doodle-icon-1 { position: absolute; top: 20px; right: 20px; width: 60px; transform: rotate(15deg); }\n  .doodle-icon-2 { position: absolute; bottom: 20px; left: 20px; width: 50px; transform: rotate(-10deg); }\n\n  #scratchCanvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 10;\n    touch-action: none;\n    transition: opacity 0.5s ease;\n  }\n\n  \/* TOAST NOTIFICATION *\/\n  .doodle-toast {\n    position: fixed;\n    top: 30px;\n    left: 50%;\n    transform: translateX(-50%) translateY(-150px);\n    background-color: #ffde7d;\n    color: #333;\n    padding: 15px 30px;\n    border: 3px solid #333;\n    border-radius: 15px 30px 15px 30px;\n    box-shadow: 5px 5px 0px #ff5252;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\n    z-index: 99999;\n    opacity: 0;\n    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    max-width: 90%;\n    text-align: center;\n  }\n  .doodle-toast.show {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n  .toast-icon {\n    font-size: 24px;\n    animation: wiggle 0.5s infinite alternate;\n  }\n  @keyframes wiggle {\n    from { transform: rotate(-10deg); }\n    to { transform: rotate(10deg); }\n  }\n\n  \/* Responsive HP *\/\n  @media (max-width: 768px) {\n    .scratch-title { font-size: 28px; }\n    .scratch-content h3 { font-size: 24px; }\n    .scratch-content p { font-size: 16px; }\n    .scratch-btn { font-size: 18px; padding: 10px 20px; }\n    \n    .scratch-stage {\n      aspect-ratio: 4\/3; \n    }\n\n    \/* 1. Bintang di geser ke atas & diperkecil *\/\n    .doodle-icon-1 {\n      top: 10px; \/* Naikkan dari 20px ke 10px *\/\n      right: 15px; \/* Geser sedikit ke pinggir *\/\n      width: 40px; \/* Kecilkan dari 60px ke 40px *\/\n    }\n\n    \/* 2. Toast Notif dibuat Full Width (sisa 20px padding kiri kanan) *\/\n    .doodle-toast {\n      width: calc(100% - 40px);\n      max-width: none; \/* Override max-width 90% sebelumnya *\/\n      font-size: 16px; \n      padding: 10px 20px;\n    }\n  }\n<\/style>\n\n<div class=\"scratch-wrapper\">\n  <div class=\"scratch-container\">\n    <h2 class=\"scratch-title fade-up\">Penasaran? <span>Coret Layarnya!<\/span> \u270f\ufe0f<\/h2>\n    \n    <div class=\"scratch-stage fade-up\">\n      <div class=\"scratch-content\">\n        <h3>Surprise! \ud83c\udf89<\/h3>\n        <p>Yeay, Selamat! Kamu berhasil menggosok sampai bersih demi sebuah rahasia yang... ya... ternyata cuma teks ini. \ud83d\ude2d<\/p>\n        <button class=\"scratch-btn\">Hadiahmu?<\/button>\n        \n        <svg class=\"doodle-icon-1\" viewBox=\"0 0 100 100\"><path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"3\"\/><\/svg>\n        <svg class=\"doodle-icon-2\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"4\" stroke-dasharray=\"8,4\"\/><\/svg>\n      <\/div>\n      <canvas id=\"scratchCanvas\"><\/canvas>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- Toast Notification -->\n<div class=\"doodle-toast\" id=\"doodleToast\">\n  <span class=\"toast-icon\">\u2615<\/span>\n  <span class=\"toast-text\">WKWK kena prank! \ud83e\udd23 Udah penasaran, udah gosok, sekarang masih disuruh pencet tombol. Sabar sob, ngopi dulu \u2615\ud83d\ude02<\/span>\n<\/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 Scratch-off Canvas\n    const canvas = document.getElementById('scratchCanvas');\n    const ctx = canvas.getContext('2d');\n    let isDrawing = false;\n    let lastPos = null;\n    let canvasCleared = false;\n\n    function setupCanvas() {\n      const rect = canvas.getBoundingClientRect();\n      canvas.width = rect.width;\n      canvas.height = rect.height;\n      drawScratchLayer();\n    }\n\n    function drawScratchLayer() {\n      ctx.fillStyle = '#d3d3d3';\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      ctx.strokeStyle = '#b0b0b0';\n      ctx.lineWidth = 2;\n      for (let i = -canvas.height; i < canvas.width; i += 8) {\n        ctx.beginPath();\n        ctx.moveTo(i, 0);\n        ctx.lineTo(i + canvas.height, canvas.height);\n        ctx.stroke();\n      }\n      ctx.font = '28px \"Patrick Hand\", cursive';\n      ctx.fillStyle = '#666';\n      ctx.textAlign = 'center';\n      ctx.fillText('Gosok di sini pakai mouse\/jari...', canvas.width \/ 2, canvas.height \/ 2);\n    }\n\n    setupCanvas();\n\n    function getPointerPos(e) {\n      const rect = canvas.getBoundingClientRect();\n      const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n      const clientY = e.touches ? e.touches[0].clientY : e.clientY;\n      return { x: clientX - rect.left, y: clientY - rect.top };\n    }\n\n    function startDrawing(e) {\n      isDrawing = true;\n      lastPos = getPointerPos(e);\n      draw(e);\n    }\n\n    function draw(e) {\n      if (!isDrawing || canvasCleared) return;\n      const pos = getPointerPos(e);\n      ctx.globalCompositeOperation = 'destination-out';\n      ctx.lineWidth = 40;\n      ctx.lineCap = 'round';\n      ctx.lineJoin = 'round';\n      \n      ctx.beginPath();\n      ctx.moveTo(lastPos.x, lastPos.y);\n      ctx.lineTo(pos.x, pos.y);\n      ctx.stroke();\n      \n      lastPos = pos;\n      e.preventDefault();\n\n      checkPercentage();\n    }\n\n    function stopDrawing() { \n      isDrawing = false; \n    }\n\n    function checkPercentage() {\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n      const pixels = imageData.data;\n      let transparentPixels = 0;\n      \n      for (let i = 3; i < pixels.length; i += 4) {\n        if (pixels[i] === 0) {\n          transparentPixels++;\n        }\n      }\n      \n      const percent = (transparentPixels \/ (pixels.length \/ 4)) * 100;\n      \n      if (percent > 40 && !canvasCleared) {\n        canvasCleared = true;\n        canvas.style.opacity = '0';\n        setTimeout(() => {\n          canvas.style.pointerEvents = 'none';\n        }, 500);\n      }\n    }\n\n    canvas.addEventListener('mousedown', startDrawing);\n    canvas.addEventListener('mousemove', draw);\n    canvas.addEventListener('mouseup', stopDrawing);\n    canvas.addEventListener('mouseleave', stopDrawing);\n    canvas.addEventListener('touchstart', startDrawing, { passive: false });\n    canvas.addEventListener('touchmove', draw, { passive: false });\n    canvas.addEventListener('touchend', stopDrawing);\n\n    let resizeTimer;\n    window.addEventListener('resize', function() {\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(setupCanvas, 200);\n    });\n\n    \/\/ 3. TOAST NOTIFICATION LOGIC\n    const scratchBtn = document.querySelector('.scratch-btn');\n    const doodleToast = document.getElementById('doodleToast');\n    let toastTimeout;\n\n    if (scratchBtn) {\n      scratchBtn.addEventListener('click', function(e) {\n        doodleToast.classList.add('show');\n        clearTimeout(toastTimeout);\n        toastTimeout = setTimeout(() => {\n          doodleToast.classList.remove('show');\n        }, 8000);\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-217302e e-con-full e-flex e-con e-parent\" data-id=\"217302e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8161006 elementor-widget elementor-widget-html\" data-id=\"8161006\" 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&display=swap');\n\n  \/* Wrapper Section Desk *\/\n  .desk-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #f0f4f8;\n    background-image: \n      linear-gradient(#d1d1d1 1px, transparent 1px),\n      linear-gradient(90deg, #d1d1d1 1px, transparent 1px);\n    background-size: 30px 30px;\n    padding: 100px 20px;\n    text-align: center;\n    position: relative;\n  }\n\n  .desk-container {\n    max-width: 800px;\n    margin: 0 auto;\n  }\n\n  \/* Animasi Fade Up *\/\n  .fade-up {\n    opacity: 0;\n    transform: translateY(50px);\n    transition: opacity 0.8s ease, transform 0.8s ease;\n  }\n  .fade-up.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .desk-title {\n    font-size: 40px;\n    color: #333;\n    margin-bottom: 10px;\n  }\n  .desk-title span { text-decoration: underline wavy #ff5252; }\n  \n  .desk-subtitle {\n    font-size: 18px;\n    color: #666;\n    margin-bottom: 60px;\n  }\n\n  \/* Area Meja Kerja (Flat Lay) *\/\n  .desk-stage {\n    position: relative;\n    width: 100%;\n    max-width: 650px;\n    margin: 0 auto;\n    aspect-ratio: 4\/3;\n    background-color: #e8d5b7;\n    border: 4px solid #333;\n    border-radius: 20px;\n    box-shadow: 15px 15px 0px #ffde7d, 30px 30px 60px rgba(0,0,0,0.2);\n  }\n\n  .wood-grain {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,0.05) 40px, rgba(0,0,0,0.05) 41px);\n    border-radius: 16px;\n    pointer-events: none;\n  }\n\n  \/* Wadah Item (Posisi) *\/\n  .desk-item {\n    position: absolute;\n    cursor: pointer;\n    z-index: 2; \n  }\n  .desk-item.is-active { z-index: 20; }\n\n  \/* Emoji Icon *\/\n  .emoji-icon {\n    display: block;\n    line-height: 1;\n    filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.3));\n    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .desk-item:hover .emoji-icon { transform: scale(1.1) rotate(5deg); }\n\n  \/* Posisi & Ukuran Emoji Desktop *\/\n  .item-laptop { top: 25%; left: 35%; }\n  .item-laptop .emoji-icon { font-size: 100px; }\n\n  .item-coffee { top: 15%; right: 20%; }\n  .item-coffee .emoji-icon { font-size: 70px; transform: rotate(10deg); }\n  .item-coffee:hover .emoji-icon { transform: rotate(10deg) scale(1.1); }\n\n  .item-book { bottom: 15%; left: 20%; }\n  .item-book .emoji-icon { font-size: 80px; transform: rotate(-15deg); }\n  .item-book:hover .emoji-icon { transform: rotate(-15deg) scale(1.1); }\n\n  .item-phone { bottom: 20%; right: 25%; }\n  .item-phone .emoji-icon { font-size: 60px; transform: rotate(15deg); }\n  .item-phone:hover .emoji-icon { transform: rotate(15deg) scale(1.1); }\n\n  .item-pen { top: 45%; left: 60%; }\n  .item-pen .emoji-icon { font-size: 60px; transform: rotate(45deg); }\n  .item-pen:hover .emoji-icon { transform: rotate(45deg) scale(1.1); }\n\n  \/* Pop-up Coretan (Tooltip) - Jarak & Lebar Diperbaiki *\/\n  .item-tooltip {\n    position: absolute;\n    bottom: calc(100% + 10px);\n    left: 50%;\n    transform: translateX(-50%) scale(0.5);\n    width: 280px; \/* Diperlebar dari 200px biar teks panjang nyaman *\/\n    background: #fff;\n    padding: 15px;\n    border: 3px solid #333;\n    border-radius: 10px;\n    box-shadow: 5px 5px 0px rgba(0,0,0,0.2);\n    opacity: 0;\n    visibility: hidden;\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    z-index: 20;\n    pointer-events: none;\n  }\n  \n  \/* Panah Tooltip *\/\n  .item-tooltip::after {\n    content: '';\n    position: absolute;\n    bottom: -12px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 6px 6px 0;\n    border-style: solid;\n    border-color: #333 transparent transparent transparent;\n  }\n  .item-tooltip::before {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 4px 4px 0;\n    border-style: solid;\n    border-color: #fff transparent transparent transparent;\n    z-index: 2;\n  }\n\n  .desk-item.is-active .item-tooltip {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(-50%) scale(1) translateY(-10px);\n  }\n\n  .item-tooltip h4 { margin: 0 0 5px 0; color: #ff5252; font-size: 18px; }\n  .item-tooltip p { margin: 0; font-size: 14px; color: #555; line-height: 1.4; }\n\n  \/* Overlay Tutup *\/\n  .desk-close-overlay {\n    display: none;\n    position: fixed;\n    top: 0; left: 0; width: 100%; height: 100%;\n    z-index: 15; \n    background: transparent;\n  }\n  .desk-close-overlay.active { display: block; }\n\n  \/* === RESPONSIVE HP === *\/\n  @media (max-width: 768px) {\n    .desk-title { font-size: 28px; }\n    .desk-subtitle { font-size: 14px; margin-bottom: 30px; }\n\n    .desk-stage {\n      max-width: 350px;\n      aspect-ratio: 1\/1; \n    }\n\n    \/* Atur ulang posisi & ukuran biar rapat di HP *\/\n    .item-laptop { top: 10%; left: 15%; }\n    .item-laptop .emoji-icon { font-size: 100px; }\n\n    .item-coffee { top: 15%; right: 20%; }\n    .item-coffee .emoji-icon { font-size: 45px; }\n\n    .item-book { bottom: 15%; left: 15%; }\n    .item-book .emoji-icon { font-size: 50px; }\n\n    .item-phone { bottom: 20%; right: 15%; }\n    .item-phone .emoji-icon { font-size: 40px; }\n\n    .item-pen { top: 50%; left: 60%; }\n    .item-pen .emoji-icon { font-size: 40px; }\n\n    \/* Lebar tooltip HP diperlebar dari 140px jadi 240px *\/\n    .item-tooltip { width: 240px; padding: 12px; }\n    .item-tooltip h4 { font-size: 16px; }\n    .item-tooltip p { font-size: 12px; }\n    \n    \/* === FIX: Panah Tooltip HP Disesuaikan === *\/\n    \n    \/* Untuk item di kiri (Buku) *\/\n    .item-book .item-tooltip { \n      left: 0; \n      transform: translateX(0) scale(0.5); \n    }\n    .item-book.is-active .item-tooltip { \n      transform: translateX(0) scale(1) translateY(-10px); \n    }\n    .item-book .item-tooltip::after { left: 25px; transform: translateX(0); }\n    .item-book .item-tooltip::before { left: 25px; transform: translateX(0); }\n\n    \/* Untuk item di kanan (Kopi & HP) *\/\n    .item-coffee .item-tooltip,\n    .item-phone .item-tooltip { \n      left: auto; \n      right: 0; \n      transform: translateX(0) scale(0.5); \n    }\n    .item-coffee.is-active .item-tooltip,\n    .item-phone.is-active .item-tooltip { \n      transform: translateX(0) scale(1) translateY(-10px); \n    }\n    \n    \/* Koreksi titik panah berdasarkan ukuran emoji (biar pas nyangkut di tengah) *\/\n    .item-coffee .item-tooltip::after,\n    .item-coffee .item-tooltip::before { left: auto; right: 22px; transform: translateX(0); }\n    \n    .item-phone .item-tooltip::after,\n    .item-phone .item-tooltip::before { left: auto; right: 20px; transform: translateX(0); }\n  }\n<\/style>\n\n<div class=\"desk-wrapper\">\n  \n  <!-- Overlay buat nutup pop-up kalau klik di luar -->\n  <div class=\"desk-close-overlay\" id=\"deskOverlay\"><\/div>\n\n  <div class=\"desk-container\">\n    <h2 class=\"desk-title fade-up\">Sneak Peek ke <span>Meja Kerjaku<\/span> \ud83d\udd75\ufe0f\u200d\u2642\ufe0f<\/h2>\n    <p class=\"desk-subtitle fade-up\">Klik barang-barang di bawah ini, siapa tau ada rahasia bocor \ud83e\udd2b<\/p>\n\n    <div class=\"desk-stage fade-up\">\n      <div class=\"wood-grain\"><\/div>\n\n      <!-- 1. Laptop -->\n      <div class=\"desk-item item-laptop\" data-id=\"laptop\">\n        <span class=\"emoji-icon\">\ud83d\udcbb<\/span>\n        <div class=\"item-tooltip\">\n          <h4>\ud83e\udde0 Portal Menuju Neraka CSS<\/h4>\n          <p>Di sinilah proyek-proyek besar dilahirkan\u2026 lalu ditinggalkan 3 hari kemudian. 10% ngoding, 20% debugging, 70% bengong sambil nanya, \u201cIni error apa hidup gue yang error?\u201d<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 2. Kopi -->\n      <div class=\"desk-item item-coffee\" data-id=\"coffee\">\n        <span class=\"emoji-icon\">\u2615<\/span>\n        <div class=\"item-tooltip\">\n          <h4>\u2615\ud83d\udeac Fuel System Developer<\/h4>\n          <p>Kopi untuk menjalankan otak. Rokok untuk negosiasi dengan bug. Tanpa kombinasi ini, kode belum tentu jalan, tapi setidaknya developer sudah siap menatap error yang sama selama 47 menit sambil berkata, \u201cPadahal tadi bisa.\u201d<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 3. Buku Catatan -->\n      <div class=\"desk-item item-book\" data-id=\"book\">\n        <span class=\"emoji-icon\">\ud83d\udcd3<\/span>\n        <div class=\"item-tooltip\">\n          <h4>\ud83d\udcd2 Database Dosa & Solusi Sementara<\/h4>\n          <p>Tempat mencatat solusi bug yang katanya \u201cpenting banget\u201d supaya tidak lupa. Seminggu kemudian dibaca lagi: \u201cGanti margin-top: 17px jadi 18px.\u201d Tidak ada yang tahu kenapa berhasil. Jangan disentuh. Jangan ditanya. Itu ilmu hitam.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 4. HP -->\n      <div class=\"desk-item item-phone\" data-id=\"phone\">\n        <span class=\"emoji-icon\">\ud83d\udcf1<\/span>\n        <div class=\"item-tooltip\">\n          <h4>\ud83d\udcf1 Mesin Pelipat Waktu<\/h4>\n          <p>Tempat website diuji dengan pertanyaan sederhana: \u201cResponsive nggak?\u201d Dibuka di HP sendiri: sempurna. Dibuka di HP client: tombol hilang, menu kabur, gambar jadi segede dosa masa lalu. Browser pun ikut pura-pura nggak tahu.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 5. Pulpen -->\n      <div class=\"desk-item item-pen\" data-id=\"pen\">\n        <span class=\"emoji-icon\">\ud83d\udd8a\ufe0f<\/span>\n        <div class=\"item-tooltip\">\n          <h4>\u2712\ufe0f Senjata Debugging Manual<\/h4>\n          <p>Dipakai untuk menunjuk layar sambil bertanya, \u201cIni masalahnya di mana...\u201d Backend bilang frontend. Frontend bilang backend. Akhirnya semua diam setelah ketahuan masalahnya cuma satu titik koma yang hilang sejak minggu lalu.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/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 Point & Click (Pop-up)\n    const deskItems = document.querySelectorAll('.desk-item');\n    const deskOverlay = document.getElementById('deskOverlay');\n\n    deskItems.forEach(item => {\n      item.addEventListener('click', function(e) {\n        e.stopPropagation();\n        \n        const isActive = this.classList.contains('is-active');\n        \n        \/\/ Tutup semua item lain dulu\n        deskItems.forEach(i => i.classList.remove('is-active'));\n        \n        if (!isActive) {\n          this.classList.add('is-active');\n          deskOverlay.classList.add('active');\n        } else {\n          deskOverlay.classList.remove('active');\n        }\n      });\n    });\n\n    \/\/ Klik area luar (overlay) buat nutup\n    deskOverlay.addEventListener('click', function() {\n      deskItems.forEach(i => i.classList.remove('is-active'));\n      this.classList.remove('active');\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b4b2bb e-con-full e-flex e-con e-parent\" data-id=\"7b4b2bb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2728 Selamat Datang Sob! Dari \u201cGue Punya Ide\u2026\u201d Jadi ANJIR KEREN JUGA Di sini ide liar nggak akan dihakimi. Mau datang bawa coretan, konsep setengah matang, atau brief yang bikin otak jungkir balik, semuanya bisa kita olah jadi website yang estetik, playful, dan punya identitas sendiri. Kekacauan lo, tanggung jawab gue. \ud83d\udc40 Intip Coretan Gue [&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-516","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/516","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=516"}],"version-history":[{"count":208,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/516\/revisions"}],"predecessor-version":[{"id":1206,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/516\/revisions\/1206"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/media?parent=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}