{"id":532,"date":"2026-08-14T02:22:47","date_gmt":"2026-08-14T02:22:47","guid":{"rendered":"https:\/\/lab.rwb.my.id\/hero\/?page_id=532"},"modified":"2026-08-15T15:06:41","modified_gmt":"2026-08-15T15:06:41","slug":"tentang","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/hero\/tentang\/","title":{"rendered":"Tentang"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"532\" class=\"elementor elementor-532\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57750d8 e-con-full e-flex e-con e-parent\" data-id=\"57750d8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adb4aff elementor-widget elementor-widget-html\" data-id=\"adb4aff\" 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 Meja Kerja *\/\n  .desk-hero-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    \/* Background Titik-titik (Sama kayak Galeri) *\/\n    background-color: #faf9f6;\n    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);\n    background-size: 25px 25px;\n    padding: 80px 20px;\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 (Buku & Aksesori) *\/\n  .desk-content-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 40px;\n    max-width: 1100px;\n    width: 100%;\n    z-index: 2;\n    \n    \/* Animasi Muncul *\/\n    opacity: 0;\n    transform: scale(0.95) translateY(30px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n  }\n\n  .desk-content-container.is-visible {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n\n  \/* Area Kiri: Buku Catatan *\/\n  .desk-notebook {\n    background-color: #fffef0;\n    background-image: linear-gradient(#e4f1ff 1px, transparent 1px); \/* Garis biru buku tulis *\/\n    background-size: 100% 35px;\n    padding: 50px 40px 40px 60px;\n    box-shadow: 10px 10px 30px rgba(0,0,0,0.1);\n    border-radius: 5px;\n    flex: 1.5;\n    position: relative;\n    transform: rotate(-1deg);\n    border-left: 8px solid #e0e0e0; \/* Batang punggung buku *\/\n  }\n\n  \/* Lubang Binder (3 lubang) di sisi kiri buku *\/\n  .desk-notebook::before {\n    content: '';\n    position: absolute;\n    left: 25px;\n    top: 0;\n    bottom: 0;\n    width: 15px;\n    background-image: radial-gradient(circle, #ccc 6px, transparent 7px);\n    background-size: 100% 120px;\n    background-position: center;\n    opacity: 0.6;\n  }\n\n  .desk-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(-3deg);\n    margin-bottom: 20px;\n    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);\n  }\n\n  .desk-title {\n    font-size: 48px;\n    line-height: 1.2;\n    color: #333;\n    margin: 0 0 20px 0;\n  }\n\n  \/* Efek Coretan Bawah Judul *\/\n  .desk-title-underline {\n    width: 200px;\n    height: 12px;\n    margin-top: -10px;\n    margin-bottom: 20px;\n  }\n\n  .desk-desc {\n    font-size: 20px;\n    color: #555;\n    line-height: 1.6;\n    max-width: 500px;\n    margin-bottom: 30px;\n  }\n\n  .desk-buttons {\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap;\n  }\n\n  .desk-btn-primary {\n    background-color: #ff5252;\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    box-shadow: 4px 4px 0px #333;\n  }\n\n  .desk-btn-primary:hover {\n    transform: translate(-2px, -2px) rotate(-2deg);\n    box-shadow: 6px 6px 0px #333;\n  }\n\n  .desk-btn-secondary {\n    background-color: transparent;\n    color: #333 !important;\n    border: 3px dashed #777;\n    padding: 12px 30px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 22px;\n    text-decoration: none;\n    border-radius: 30px 15px 30px 15px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    display: inline-block;\n  }\n\n  .desk-btn-secondary:hover {\n    background-color: rgba(0,0,0,0.05);\n    border-style: solid;\n    color: #000 !important;\n  }\n\n  \/* Area Kanan: Foto & Aksesori *\/\n  .desk-visual-area {\n    flex: 1;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    min-height: 400px;\n  }\n\n  \/* Foto Profil di Meja *\/\n  .desk-photo-frame {\n    background-color: #fff;\n    padding: 10px 10px 30px 10px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);\n    transform: rotate(4deg);\n    max-width: 280px;\n    position: relative;\n    z-index: 5;\n    transition: transform 0.3s ease;\n  }\n\n  .desk-photo-frame:hover {\n    transform: rotate(0deg) scale(1.03);\n  }\n\n  .desk-photo-frame img {\n    width: 100%;\n    height: auto;\n    display: block;\n    filter: contrast(1.1) saturate(0.9);\n  }\n\n  \/* Caption di Foto *\/\n  .desk-photo-caption {\n    font-size: 20px;\n    color: #444;\n    text-align: center;\n    margin-top: 10px;\n    transform: rotate(-2deg);\n  }\n\n  \/* Jepit Kertas (Paperclip) di atas foto *\/\n  .desk-paperclip {\n    position: absolute;\n    top: -20px;\n    right: 20px;\n    width: 40px;\n    height: 80px;\n    z-index: 10;\n    transform: rotate(15deg);\n  }\n\n  \/* Sticky Notes (Kertas Tempel Kuning) *\/\n  .desk-sticky-note {\n    position: absolute;\n    top: -30px;\n    left: -60px; \n    width: 150px;\n    height: 150px;\n    background-color: #ffeb3b;\n    box-shadow: 3px 3px 10px rgba(0,0,0,0.15);\n    transform: rotate(-12deg);\n    padding: 20px;\n    font-size: 18px;\n    color: #333;\n    z-index: 6; \n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: justify;\n    border-radius: 2px;\n  }\n\n  \/* Secangkir Kopi SVG *\/\n  .desk-coffee {\n    position: absolute;\n    bottom: -20px;\n    right: -30px;\n    width: 100px;\n    height: 100px;\n    z-index: 6; \n    transform: rotate(-5deg);\n  }\n\n  \/* TOAST NOTIFICATION (Buat Tombol Lihat Karya) *\/\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    .desk-content-container {\n      flex-direction: column-reverse; \/* Foto di atas, buku di bawah *\/\n      gap: 60px;\n    }\n\n    .desk-notebook {\n      padding: 40px 20px 30px 40px;\n      transform: rotate(0deg);\n    }\n\n    .desk-title {\n      font-size: 36px;\n    }\n\n    .desk-visual-area {\n      min-height: auto;\n      width: 100%;\n    }\n\n    .desk-coffee {\n      width: 70px;\n      height: 70px;\n      bottom: -10px;\n      right: 10%;\n      display: block; \n    }\n\n    .desk-sticky-note {\n      top: -60px;       \n      left: 0;          \n      width: 120px;     \n      height: 120px;\n      font-size: 16px;\n      padding: 15px;    \n    }\n\n    .desk-buttons {\n      justify-content: center;\n      width: 100%;\n    }\n\n    .desk-btn-primary, .desk-btn-secondary {\n      flex: 1;\n      text-align: center;\n      font-size: 18px;\n      padding: 12px 15px;\n    }\n\n     \/* TOAST FULL WIDTH DI HP *\/\n    .doodle-toast {\n      width: calc(100% - 40px); \/* Full width sisa 20px kiri kanan *\/\n      max-width: none; \/* Override max-width 90% dari versi desktop *\/\n      font-size: 16px; \n      padding: 10px 20px;\n    }\n  }\n<\/style>\n\n<div class=\"desk-hero-wrapper\">\n  <div class=\"desk-content-container\" id=\"deskHeroContent\">\n    \n    <!-- Kiri: Buku Catatan Terbuka -->\n    <div class=\"desk-notebook\">\n      <div class=\"desk-badge\">\u2728 Perkenalan<\/div>\n      \n      <h1 class=\"desk-title\">Halo, Gue Creative Developer!<\/h1>\n      \n      <!-- SVG Garis Coretan Bawah Judul -->\n      <svg class=\"desk-title-underline\" viewBox=\"0 0 200 15\" preserveAspectRatio=\"none\">\n        <path d=\"M0 10 Q 50 2 100 10 T 200 8\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n      <\/svg>\n\n      <p class=\"desk-desc\">\n        Selamat datang di ruang kerja gue. Di sini tempat gue menuangin ide-ide gila, \n        coretan acak, dan ngubahnya jadi web aesthetic yang bener-bener berbeda. \n        Yuk, kenalan lebih deket!\n      <\/p>\n      \n      <div class=\"desk-buttons\">\n        <!-- TOMBOL WA DENGAN TEXT OTOMATIS -->\n        <a href=\"https:\/\/wa.me\/6281227008020?text=Halo%20sob,%20mau%20tanya%20soal%20webnya!\" target=\"_blank\" class=\"desk-btn-primary\">Hubungi Gue \ud83d\ude80<\/a>\n        \n        <!-- TOMBOL LIHAT KARYA JADI TOAST PRANK -->\n        <button class=\"desk-btn-secondary\" id=\"prankKaryaBtn\">Lihat Karya \ud83d\udcd6<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Kanan: Foto & Aksesori Meja -->\n    <div class=\"desk-visual-area\">\n      \n      <!-- Sticky Notes -->\n      <div class=\"desk-sticky-note\">\n        Jangan lupa ngopi dulu sebelum mulai ngoding! \u2615\n      <\/div>\n\n      <!-- Foto Profil -->\n      <div class=\"desk-photo-frame\">\n        <!-- Jepit Kertas SVG -->\n        <svg class=\"desk-paperclip\" viewBox=\"0 0 20 40\">\n          <path d=\"M5 0 V30 C5 35 15 35 15 30 V10 C15 5 10 5 10 10 V25\" fill=\"none\" stroke=\"#888\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n        <\/svg>\n\n        <!-- GANTI LINK GAMBAR INI -->\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Nikola-Tesla.jpeg\" alt=\"Foto Profil\">\n        <div class=\"desk-photo-caption\">Ini Gue, Lagi Fokus \ud83e\udd13<\/div>\n      <\/div>\n\n      <!-- Secangkir Kopi SVG -->\n      <svg class=\"desk-coffee\" viewBox=\"0 0 100 100\">\n        <!-- Garis Uap Kopi -->\n        <path d=\"M30 10 Q20 20 30 30 Q40 40 30 50\" fill=\"none\" stroke=\"#888\" stroke-width=\"2\" opacity=\"0.6\"\/>\n        <path d=\"M50 10 Q40 20 50 30 Q60 40 50 50\" fill=\"none\" stroke=\"#888\" stroke-width=\"2\" opacity=\"0.6\"\/>\n        <!-- Cangkir -->\n        <path d=\"M15 50 H75 V65 C75 80 65 90 45 90 C25 90 15 80 15 65 Z\" fill=\"#fff\" stroke=\"#333\" stroke-width=\"3\"\/>\n        <!-- Telinga Cangkir -->\n        <path d=\"M75 55 C90 55 90 75 75 75\" fill=\"none\" stroke=\"#333\" stroke-width=\"3\"\/>\n        <!-- Garis Bibir Cangkir -->\n        <path d=\"M15 50 H75\" fill=\"none\" stroke=\"#333\" stroke-width=\"3\"\/>\n        <!-- Nama Kopi -->\n        <text x=\"45\" y=\"75\" font-family=\"Patrick Hand\" font-size=\"14\" fill=\"#ff5252\" text-anchor=\"middle\">KOPI<\/text>\n      <\/svg>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- Toast Notification Prank -->\n<div class=\"doodle-toast\" id=\"prankToast\">\n  <span class=\"toast-icon\">\ud83e\udd23<\/span>\n  <span class=\"toast-text\">Yaelah sob, klik aja sih halaman galeri! \ud83e\udd23<\/span>\n<\/div>\n\n<!-- Script Animasi Muncul & Logika Toast -->\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const deskHero = document.getElementById(\"deskHeroContent\");\n\n    \/\/ 1. Animasi Muncul\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 (deskHero) {\n      observer.observe(deskHero);\n    }\n\n    \/\/ 2. Logika Toast Prank\n    const prankBtn = document.getElementById('prankKaryaBtn');\n    const prankToast = document.getElementById('prankToast');\n    let toastTimeout;\n\n    if (prankBtn && prankToast) {\n      prankBtn.addEventListener('click', function() {\n        prankToast.classList.add('show');\n        clearTimeout(toastTimeout);\n        toastTimeout = setTimeout(() => {\n          prankToast.classList.remove('show');\n        }, 5000); \/\/ 5 detik ilang sendiri\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-2b4289d e-con-full e-flex e-con e-parent\" data-id=\"2b4289d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b430bed elementor-widget elementor-widget-html\" data-id=\"b430bed\" 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 Buku Tamu *\/\n  .guestbook-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #ffffff;\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    padding: 80px 20px;\n    position: relative;\n    overflow: hidden;\n    text-align: center;\n  }\n\n  .guestbook-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  .guestbook-title {\n    font-size: 40px;\n    color: #333;\n    margin-bottom: 10px;\n    display: inline-block;\n  }\n  .guestbook-title span { text-decoration: underline wavy #ff5252; }\n  \n  .guestbook-desc {\n    font-size: 18px;\n    color: #666;\n    margin-bottom: 30px;\n  }\n\n  \/* Toolbar Doodle *\/\n  .guestbook-toolbar {\n    display: flex;\n    justify-content: center;\n    gap: 15px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n  }\n\n  .gb-tool {\n    background: #fff;\n    color: #333;\n    border: 3px solid #333;\n    padding: 8px 15px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 18px;\n    cursor: pointer;\n    border-radius: 15px 5px 15px 5px;\n    transition: all 0.2s ease;\n    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);\n    display: flex;\n    align-items: center;\n    gap: 5px;\n  }\n  .gb-tool:hover {\n    transform: translate(-2px, -2px);\n    box-shadow: 5px 5px 0px #ff5252;\n  }\n  .gb-tool.active {\n    background: #ffde7d;\n    transform: translate(0, 2px);\n    box-shadow: 3px 3px 0px #333;\n  }\n\n  \/* Tombol Kirim (Warna beda biar standout) *\/\n  .gb-tool.send-share {\n    background: #ff5252;\n    color: #fff;\n    border-color: #333;\n    box-shadow: 3px 3px 0px #333;\n  }\n  .gb-tool.send-share:hover {\n    background: #e04545;\n    box-shadow: 5px 5px 0px #333;\n  }\n\n  \/* Area Coret *\/\n  .guestbook-stage {\n    position: relative;\n    width: 100%;\n    aspect-ratio: 4\/3;\n    background-color: #fffef0;\n    border: 3px solid #333;\n    border-radius: 10px;\n    box-shadow: 10px 10px 0px #ffde7d, 20px 20px 40px rgba(0,0,0,0.1);\n    overflow: hidden;\n    cursor: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M12 19l7-7 3 3-7 7-3-3z'\/><path d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'\/><path d='M2 2l7.586 7.586'\/><circle cx='11' cy='11' r='2'\/><\/svg>\") 4 24, auto;\n  }\n\n  .guestbook-stage.eraser-mode {\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  }\n\n  #guestbookCanvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    touch-action: none;\n  }\n\n  .guestbook-hint {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 24px;\n    color: #aaa;\n    pointer-events: none;\n    transition: opacity 0.3s ease;\n  }\n  .guestbook-hint.hide { opacity: 0; }\n\n  \/* Responsive HP *\/\n  @media (max-width: 768px) {\n    .guestbook-title { font-size: 28px; }\n    .guestbook-desc { font-size: 14px; }\n    .guestbook-stage { aspect-ratio: 3\/4; }\n    .gb-tool { font-size: 16px; padding: 8px 12px; }\n  }\n<\/style>\n\n<div class=\"guestbook-wrapper\">\n  <div class=\"guestbook-container\">\n    <h2 class=\"guestbook-title fade-up\">Buku Tamu <span>Coretan Bebas<\/span> \ud83d\udcdd<\/h2>\n    <p class=\"guestbook-desc fade-up\">Tinggalin jejak coretanmu di sini, lalu kirim ke siapapun via WA\/TG\/IGM! Jangan malu-malu cuy \ud83d\udc47<\/p>\n\n    <!-- Toolbar -->\n    <div class=\"guestbook-toolbar fade-up\">\n      <button class=\"gb-tool active\" id=\"penTool\">\u270f\ufe0f Spidol<\/button>\n      <button class=\"gb-tool\" id=\"eraserTool\">\ud83e\uddfd Penghapus<\/button>\n      <button class=\"gb-tool\" id=\"clearTool\">\ud83d\uddd1\ufe0f Buang Kertas<\/button>\n      <button class=\"gb-tool send-share\" id=\"sendShareTool\">\ud83d\udcf2 Kirim Coretan<\/button>\n    <\/div>\n\n    <!-- Panggung Coret -->\n    <div class=\"guestbook-stage fade-up\" id=\"guestbookStage\">\n      <canvas id=\"guestbookCanvas\"><\/canvas>\n      <div class=\"guestbook-hint\" id=\"gbHint\">Coret di sini pakai mouse\/jari...<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Animasi 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.1 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n    \/\/ 2. Logika Canvas Coret\n    const canvas = document.getElementById('guestbookCanvas');\n    const ctx = canvas.getContext('2d');\n    const stage = document.getElementById('guestbookStage');\n    const hint = document.getElementById('gbHint');\n    \n    const penBtn = document.getElementById('penTool');\n    const eraserBtn = document.getElementById('eraserTool');\n    const clearBtn = document.getElementById('clearTool');\n    const sendShareBtn = document.getElementById('sendShareTool');\n\n    let isDrawing = false;\n    let lastX = 0, lastY = 0;\n    let currentTool = 'pen';\n    let hasDrawn = false;\n\n    function setupCanvas() {\n      const rect = stage.getBoundingClientRect();\n      const dpr = window.devicePixelRatio || 1;\n      canvas.width = rect.width * dpr;\n      canvas.height = rect.height * dpr;\n      ctx.scale(dpr, dpr);\n    }\n    setupCanvas();\n\n    window.addEventListener('resize', function() {\n      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n      setupCanvas();\n      ctx.putImageData(imgData, 0, 0);\n    });\n\n    function getPos(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 startDraw(e) {\n      e.preventDefault();\n      isDrawing = true;\n      const pos = getPos(e);\n      lastX = pos.x;\n      lastY = pos.y;\n\n      ctx.beginPath();\n      ctx.arc(lastX, lastY, currentTool === 'pen' ? 2 : 15, 0, Math.PI * 2);\n      if (currentTool === 'pen') {\n        ctx.fillStyle = '#333';\n      } else {\n        ctx.globalCompositeOperation = 'destination-out';\n        ctx.fillStyle = 'rgba(0,0,0,1)';\n      }\n      ctx.fill();\n      ctx.globalCompositeOperation = 'source-over';\n\n      if (!hasDrawn) {\n        hint.classList.add('hide');\n        hasDrawn = true;\n      }\n    }\n\n    function draw(e) {\n      if (!isDrawing) return;\n      e.preventDefault();\n      const pos = getPos(e);\n\n      ctx.beginPath();\n      ctx.moveTo(lastX, lastY);\n      ctx.lineTo(pos.x, pos.y);\n      \n      if (currentTool === 'pen') {\n        ctx.strokeStyle = '#333';\n        ctx.lineWidth = 4;\n      } else {\n        ctx.globalCompositeOperation = 'destination-out';\n        ctx.strokeStyle = 'rgba(0,0,0,1)';\n        ctx.lineWidth = 30;\n      }\n      \n      ctx.lineCap = 'round';\n      ctx.lineJoin = 'round';\n      ctx.stroke();\n      ctx.globalCompositeOperation = 'source-over';\n\n      lastX = pos.x;\n      lastY = pos.y;\n    }\n\n    function stopDraw() { isDrawing = false; }\n\n    canvas.addEventListener('mousedown', startDraw);\n    canvas.addEventListener('mousemove', draw);\n    canvas.addEventListener('mouseup', stopDraw);\n    canvas.addEventListener('mouseleave', stopDraw);\n\n    canvas.addEventListener('touchstart', startDraw, { passive: false });\n    canvas.addEventListener('touchmove', draw, { passive: false });\n    canvas.addEventListener('touchend', stopDraw);\n\n    \/\/ 3. Logika Toolbar\n    penBtn.addEventListener('click', () => {\n      currentTool = 'pen';\n      penBtn.classList.add('active');\n      eraserBtn.classList.remove('active');\n      stage.classList.remove('eraser-mode');\n    });\n\n    eraserBtn.addEventListener('click', () => {\n      currentTool = 'eraser';\n      eraserBtn.classList.add('active');\n      penBtn.classList.remove('active');\n      stage.classList.add('eraser-mode');\n    });\n\n    clearBtn.addEventListener('click', () => {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      hint.classList.remove('hide');\n      hasDrawn = false;\n    });\n\n    \/\/ 4. Logika Kirim Gambar (Web Share API Bebas ke Siapapun)\n    sendShareBtn.addEventListener('click', async () => {\n      if (!hasDrawn) {\n        alert(\"Duh kosong sob, coret dulu sana baru kirim! \u270f\ufe0f\");\n        return;\n      }\n\n      \/\/ === TRIK ANTI BACKGROUND HITAM ===\n      \/\/ Kita bikin canvas sementara untuk ngecat putih backgroundnya\n      const tempCanvas = document.createElement('canvas');\n      tempCanvas.width = canvas.width;\n      tempCanvas.height = canvas.height;\n      const tempCtx = tempCanvas.getContext('2d');\n      \n      \/\/ Cat putih warna kertas\n      tempCtx.fillStyle = '#fffef0'; \n      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n      \n      \/\/ Taruh coretan user di atas cat putih tadi\n      tempCtx.drawImage(canvas, 0, 0);\n      \/\/ ==================================\n\n      \/\/ Convert canvas sementara tadi jadi blob (file gambar)\n      tempCanvas.toBlob(async (blob) => {\n        if (!blob) return;\n        \n        \/\/ Bikin nama file coretan\n        const file = new File([blob], 'coretan-buku-tamu.jpg', { type: 'image\/jpeg' });\n        \n        \/\/ Cek apakah browser support Web Share API dengan File\n        if (navigator.canShare && navigator.canShare({ files: [file] })) {\n          try {\n            \/\/ Pop-up Share bawaan HP\/Desktop bakal kebuka, gambar otomatis nempel\n            await navigator.share({\n              title: 'Coretan Buku Tamu',\n              text: 'Liat nih coretan gue di web ini! \ud83c\udfa8',\n              files: [file]\n            });\n            console.log('Berhasil di-share!');\n          } catch (err) {\n            console.error('Gagal share:', err);\n          }\n        } else {\n          \/\/ Fallback kalau browser nggak support share file\n          \/\/ Otomatis download gambar ke device user\n          const link = document.createElement('a');\n          link.href = URL.createObjectURL(blob);\n          link.download = 'coretan-buku-tamu.jpg';\n          link.click();\n          alert('Gambar coretan udah di-download ke perangkatmu! Silakan kirim manual ke siapapun ya sob.');\n        }\n      }, 'image\/jpeg', 0.9); \/\/ 0.9 adalah kualitas gambar\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c9c8a99 e-con-full e-flex e-con e-parent\" data-id=\"c9c8a99\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bb6325 elementor-widget elementor-widget-html\" data-id=\"6bb6325\" 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  \/* === TAMBAHAN PENTING: Cegah scroll horizontal TANPA merusak sticky navbar === *\/\n  html, body {\n    max-width: 100%;\n    overflow-x: clip; \/* GANTI DARI hidden JADI clip *\/\n  }\n  \/* ========================================================================== *\/\n\n  \/* Wrapper Diary *\/\n  .diary-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #ffffff;\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    padding: 80px 20px;\n    text-align: center;\n    position: relative;\n    \/* overflow: hidden dihilangkan biar kertas melayang keluar *\/\n  }\n\n  .diary-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  .diary-title {\n    font-size: 40px;\n    color: #333;\n    margin-bottom: 10px;\n    display: inline-block;\n  }\n  .diary-title span { text-decoration: underline wavy #ff5252; }\n  \n  .diary-desc {\n    font-size: 18px;\n    color: #666;\n    margin-bottom: 40px;\n  }\n\n  \/* Panggung Tumpukan Kertas *\/\n  .diary-stage {\n    position: relative;\n    width: 100%;\n    max-width: 450px;\n    aspect-ratio: 3\/4;\n    margin: 0 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  \/* Lapisan Paling Bawah (Foto Profil) *\/\n  .diary-base-photo {\n    position: absolute;\n    width: 90%;\n    height: 90%;\n    background: #fff;\n    padding: 15px 15px 40px 15px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);\n    transform: rotate(-2deg);\n    z-index: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.5s ease 0.5s;\n  }\n  .diary-base-photo.is-revealed {\n    opacity: 1;\n  }\n\n  .diary-base-photo img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    filter: contrast(1.1) saturate(0.9);\n  }\n  .diary-base-photo .caption {\n    font-size: 24px;\n    color: #444;\n    margin-top: 15px;\n    transform: rotate(-2deg);\n  }\n\n  \/* Kertas Fakta (Index Card) *\/\n  .diary-card {\n    position: absolute;\n    width: 90%;\n    height: 90%;\n    padding: 30px 25px; \/*Padding dikasih 25px kanan kiri biar teks nggak mepet*\/\n    border: 3px solid #333;\n    border-radius: 10px;\n    box-shadow: 5px 5px 15px 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    touch-action: manipulation; \/* Biar tap di HP responsif *\/\n    \/* PAKSA BROWSER HP BUAT PERSIAPAN ANIMASI *\/\n    will-change: transform, opacity; \n    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease !important; \n    user-select: none;\n    z-index: 1;\n  }\n\n  .diary-card h4 {\n    font-size: 24px;\n    color: #333;\n    margin: 0 0 15px 0;\n    background: rgba(255,255,255,0.5);\n    padding: 5px 15px;\n    border-radius: 15px;\n  }\n  \n  \/* === PERBAIKAN PARAGRAF KERTAS === *\/\n  .diary-card p {\n    font-size: 18px; \/* Dikecilin dikit biar teks panjang muat *\/\n    color: #444;\n    line-height: 1.4;\n    margin: 0 0 15px 0; \/* Jarak antar paragraf *\/\n  }\n  .diary-card p:last-of-type {\n    margin-bottom: 0; \/* Paragraf terakhir nggak usah ada jarak bawah *\/\n  }\n  \/* ================================ *\/\n\n  .diary-card .card-hint {\n    font-size: 14px;\n    color: #777;\n    margin-top: auto;\n    font-style: italic;\n  }\n\n  .diary-card:hover {\n    transform: scale(1.02) rotate(0deg) !important;\n    box-shadow: 8px 8px 20px rgba(0,0,0,0.15);\n  }\n\n  .diary-card.wiggle {\n    animation: wiggle 0.3s ease !important;\n  }\n  @keyframes wiggle {\n    0%, 100% { transform: rotate(var(--rot)) translateX(0) !important; }\n    25% { transform: rotate(calc(var(--rot) + 3deg)) translateX(-5px) !important; }\n    75% { transform: rotate(calc(var(--rot) - 3deg)) translateX(5px) !important; }\n  }\n\n  \/* === TRIK ANIMASI PAKAI CLASS BIAR MULUS DI HP === *\/\n  .diary-card.fly-right {\n    transform: translateX(120%) rotate(30deg) !important;\n    opacity: 0 !important;\n    pointer-events: none !important;\n  }\n  .diary-card.fly-left {\n    transform: translateX(-120%) rotate(-30deg) !important;\n    opacity: 0 !important;\n    pointer-events: none !important;\n  }\n  \/* ================================================ *\/\n\n  \/* Warna Kertas *\/\n  .card-1 { background-color: #ffadad; --rot: -3deg; transform: rotate(-3deg); }\n  .card-2 { background-color: #ffde7d; --rot: 4deg; transform: rotate(4deg); }\n  .card-3 { background-color: #d4edda; --rot: -5deg; transform: rotate(-5deg); }\n  .card-4 { background-color: #bde0ff; --rot: 2deg; transform: rotate(2deg); }\n  .card-5 { background-color: #ffccc4; --rot: -2deg; transform: rotate(-2deg); }\n\n  \/* Tombol Reset *\/\n  .diary-reset-btn {\n    display: none;\n    background: #333;\n    color: #fff;\n    border: 3px solid #333;\n    padding: 10px 25px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\n    border-radius: 15px 30px 15px 30px;\n    cursor: pointer;\n    margin-top: 30px;\n    transition: all 0.2s;\n  }\n  .diary-reset-btn:hover {\n    background: #ff5252;\n    transform: translate(-2px, -2px);\n    box-shadow: 4px 4px 0px #333;\n  }\n\n  \/* Responsive HP *\/\n  @media (max-width: 768px) {\n    .diary-title { font-size: 28px; }\n    .diary-desc { font-size: 14px; }\n    .diary-stage { max-width: 320px; }\n    .diary-card { padding: 20px 15px; }\n    .diary-card h4 { font-size: 20px; }\n    .diary-card p { font-size: 16px; } \/* Font di HP lebih kecil *\/\n  }\n<\/style>\n\n<div class=\"diary-wrapper\">\n  <div class=\"diary-container\">\n    <h2 class=\"diary-title fade-up\">Buka-Bukaan <span>Fakta Unik<\/span> \ud83d\udcc2<\/h2>\n    <p class=\"diary-desc fade-up\">Klik kertas-kertas di bawah ini buat ngelemparnya. Siapa tau ada fakta gila yang kebuka! \ud83d\udc47<\/p>\n\n    <div class=\"diary-stage fade-up\" id=\"diaryStage\">\n      \n      <!-- Lapisan Bawah: Foto Profil -->\n      <div class=\"diary-base-photo\" id=\"diaryBasePhoto\">\n        <!-- GANTI LINK GAMBAR INI -->\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/cute-robot-50kb.jpg\" alt=\"Foto Profil\">\n        <div class=\"caption\">Nah, ini gue aslinya! \ud83e\udd13<\/div>\n      <\/div>\n\n      <!-- Kertas 1 (Paling Bawah) -->\n      <div class=\"diary-card card-1\" data-id=\"1\">\n        <h4>\ud83e\udde0 Fakta #1<\/h4>\n        <p>Pernah nyapa orang di jalan dengan penuh keyakinan, senyum 32 gigi, tangan melambai kayak ketemu sahabat seperjuangan\u2026 ternyata salah orang.<\/p>\n        <p>Orangnya bingung. Gue lebih bingung. Harga diri? Sudah pindah server.<\/p>\n        <span class=\"card-hint\">Klik kertasnya buat dilempar!<\/span>\n      <\/div>\n\n      <!-- Kertas 2 -->\n      <div class=\"diary-card card-2\" data-id=\"2\">\n        <h4>\u2615 Fakta #2<\/h4>\n        <p>Nggak bisa sehari tanpa ngopi. Kafein bukan lagi minuman, tapi sistem operasi.<\/p>\n        <p>Kalau belum ngopi: loading...<br>Kalau sudah ngopi: RAM penuh, keputusan tetap ngawur.<\/p>\n        <span class=\"card-hint\">Klik lagi buat buka berikutnya!<\/span>\n      <\/div>\n\n      <!-- Kertas 3 -->\n      <div class=\"diary-card card-3\" data-id=\"3\">\n        <h4>\ud83c\udfa7 Fakta #3<\/h4>\n        <p>Suka ngoding sambil dengerin podcast conspiracy theory.<\/p>\n        <p>Jadi kalau tiba-tiba website error, bukannya debugging malah mikir: \u201cJangan-jangan ini ulah kelompok rahasia.\u201d Padahal lupa koma.<\/p>\n        <span class=\"card-hint\">Diketuk dikit nih kertasnya...<\/span>\n      <\/div>\n\n      <!-- Kertas 4 -->\n      <div class=\"diary-card card-4\" data-id=\"4\">\n        <h4>\ud83c\udfa8 Fakta #4<\/h4>\n        <p>Suka bikin desain berantakan karena desain yang terlalu rapi bikin curiga.<\/p>\n        <p>Kalau semuanya sejajar dan simetris, malah muncul pertanyaan: \u201cKok kayaknya ada yang nggak beres?\u201d Tapi kalau berantakan? \u201cNah, ini baru punya jiwa.\u201d<\/p>\n        <span class=\"card-hint\">Hampir kelihatan nih...<\/span>\n      <\/div>\n\n      <!-- Kertas 5 (Paling Atas) -->\n      <div class=\"diary-card card-5\" data-id=\"5\">\n        <h4>\ud83d\udd75\ufe0f Fakta #5<\/h4>\n        <p>Lagi nyari tahu siapa orang di balik web aneh ini? Klik aja kertasnya.<\/p>\n        <p>Tapi hati-hati\u2026 semakin banyak fakta yang terbuka, semakin besar kemungkinan kamu berpikir: \u201cOh\u2026 ternyata selama ini dia memang begini.\u201d<\/p>\n        <span class=\"card-hint\">Mulai dari sini cuy!<\/span>\n      <\/div>\n\n    <\/div>\n\n    <button class=\"diary-reset-btn\" id=\"diaryResetBtn\">\ud83d\udd04 Buka Lagi<\/button>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Animasi 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.2 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n    \/\/ 2. Logika Ngelempar Kertas\n    const cards = document.querySelectorAll('.diary-card');\n    const basePhoto = document.getElementById('diaryBasePhoto');\n    const resetBtn = document.getElementById('diaryResetBtn');\n    let topZ = cards.length;\n\n    \/\/ Set z-index awal biar yang terakhir di HTML ada di paling atas\n    cards.forEach((card, index) => {\n      card.style.zIndex = index + 1;\n    });\n\n    cards.forEach(card => {\n      card.addEventListener('click', function() {\n        \/\/ Cek apakah ini kartu paling atas\n        if (parseInt(this.style.zIndex) === topZ) {\n          \/\/ Tentuin arah lempar acak (kiri atau kanan)\n          const throwDir = Math.random() > 0.5 ? 'fly-right' : 'fly-left';\n          \n          \/\/ KASIH CLASS BIAR ANIMASI CSS YANG JALAN (MULUS DI HP)\n          this.classList.add(throwDir);\n          \n          \/\/ Turunkan z-index tertinggi\n          topZ--;\n\n          \/\/ Kalau semua kertas udah dilempar\n          if (topZ === 0) {\n            setTimeout(() => {\n              basePhoto.classList.add('is-revealed');\n              resetBtn.style.display = 'inline-block';\n            }, 500);\n          }\n        } else {\n          \/\/ Kalau diklik bukan kartu teratas, kasih efek wiggle (goyang)\n          this.classList.add('wiggle');\n          setTimeout(() => this.classList.remove('wiggle'), 300);\n        }\n      });\n    });\n\n    \/\/ 3. Logika Reset\n    resetBtn.addEventListener('click', function() {\n      \/\/ Sembunyiin foto balik\n      basePhoto.classList.remove('is-revealed');\n      resetBtn.style.display = 'none';\n      \n      \/\/ Kembalikan semua kertas\n      cards.forEach((card, index) => {\n        \/\/ HAPUS CLASS FLY BIAR BALIK LAGI\n        card.classList.remove('fly-right', 'fly-left');\n        card.style.zIndex = index + 1;\n      });\n      topZ = cards.length;\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9077395 e-con-full e-flex e-con e-parent\" data-id=\"9077395\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-555d22e elementor-widget elementor-widget-html\" data-id=\"555d22e\" 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 Divider *\/\n  .dd-wrapper {\n    font-family: 'Patrick Hand', cursive;\n    background-color: transparent; \/* Biar nyatu sama background section atas\/bawahnya *\/\n    padding: 40px 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n  }\n\n  .dd-container {\n    position: relative;\n    width: 100%;\n    max-width: 800px;\n    height: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  \/* SVG Garis Coretan *\/\n  .dd-svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n  }\n\n  \/* Garis Utama (Merah) *\/\n  .dd-line {\n    fill: none;\n    stroke: #ff5252;\n    stroke-width: 4;\n    stroke-linecap: round;\n    \/* Setup Animasi Nggambar *\/\n    stroke-dasharray: 1500;\n    stroke-dashoffset: 1500;\n    transition: stroke-dashoffset 1.5s ease-out;\n  }\n\n  \/* Garis Bawah (Hitam Putus-putus) *\/\n  .dd-line-dashed {\n    fill: none;\n    stroke: #333;\n    stroke-width: 2;\n    stroke-dasharray: 10, 10;\n    opacity: 0;\n    transition: opacity 0.5s ease 1s; \/* Muncul telat 1 detik *\/\n  }\n\n  \/* Ikon-Ikon Doodle *\/\n  .dd-icon {\n    fill: none;\n    stroke: #333;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    opacity: 0;\n    transform: scale(0);\n    transform-origin: center;\n    transform-box: fill-box;\n    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  .dd-icon.star { fill: #ffde7d; }\n  .dd-icon.arrow { stroke: #ff5252; fill: none; }\n  .dd-icon.spiral { stroke: #4caf50; fill: none; }\n\n  \/* Pemicu Animasi (Pas di-scroll) *\/\n  .dd-container.is-visible .dd-line {\n    stroke-dashoffset: 0;\n  }\n  .dd-container.is-visible .dd-line-dashed {\n    opacity: 0.5;\n  }\n  \n  \/* Ikon muncul barengan sama garisnya (Tapi cuma kalau container is-visible) *\/\n  .dd-container.is-visible .dd-icon {\n    opacity: 1;\n    transform: scale(1);\n  }\n  .dd-container.is-visible .dd-icon.star { transition-delay: 0.8s; }\n  .dd-container.is-visible .dd-icon.arrow { transition-delay: 1.1s; }\n  .dd-container.is-visible .dd-icon.spiral { transition-delay: 1.3s; }\n\n  \/* Efek Goyang Terus Ikonnya *\/\n  .dd-float {\n    animation: ddFloat 3s ease-in-out infinite;\n    transform-origin: center;\n    transform-box: fill-box;\n  }\n  @keyframes ddFloat {\n    0%, 100% { transform: translateY(0) rotate(0deg); }\n    50% { transform: translateY(-5px) rotate(5deg); }\n  }\n\n  \/* Responsive HP *\/\n  @media (max-width: 768px) {\n    .dd-container {\n      height: 60px;\n    }\n  }\n<\/style>\n\n<div class=\"dd-wrapper\">\n  <div class=\"dd-container\" id=\"ddContainer\">\n    \n    <svg class=\"dd-svg\" viewBox=\"0 0 800 80\" preserveAspectRatio=\"none\">\n      \n      <!-- Garis Coretan Bawah (Hitam Putus-putus) -->\n      <path class=\"dd-line-dashed\" d=\"M 50 45 Q 200 60 400 45 T 750 45\" \/>\n      \n      <!-- Garis Coretan Utama (Merah) -->\n      <path class=\"dd-line\" d=\"M 50 45 Q 150 15 250 45 T 450 45 T 650 45 T 750 45\" \/>\n\n      <!-- Ikon Bintang (Kiri) -->\n      <g class=\"dd-icon star dd-float\" style=\"transform-origin: 100px 35px;\">\n        <path d=\"M100 20 L105 32 L118 33 L108 42 L111 55 L100 48 L89 55 L92 42 L82 33 L95 32 Z\" \/>\n      <\/g>\n\n      <!-- Ikon Panah (Tengah) -->\n      <g class=\"dd-icon arrow dd-float\" style=\"transform-origin: 400px 60px; animation-delay: 0.5s;\">\n        <path d=\"M380 60 Q 400 80 420 60 M 415 55 L 420 60 L 415 65\" \/>\n      <\/g>\n\n      <!-- Ikon Spiral (Kanan) -->\n      <g class=\"dd-icon spiral dd-float\" style=\"transform-origin: 700px 35px; animation-delay: 1s;\">\n        <path d=\"M700 35 C 710 35 710 25 700 25 C 685 25 685 45 705 45 C 725 45 725 15 695 15 C 665 15 665 55 710 55\" \/>\n      <\/g>\n\n    <\/svg>\n\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const ddContainer = document.getElementById(\"ddContainer\");\n\n    \/\/ Intersection Observer biar animasi jalan pas di-scroll\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.3 }); \/\/ Trigger pas 30% elemen masuk layar\n\n    if (ddContainer) {\n      observer.observe(ddContainer);\n    }\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-20d1f4a e-con-full e-flex e-con e-parent\" data-id=\"20d1f4a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d5f374 elementor-widget elementor-widget-html\" data-id=\"0d5f374\" 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 1 *\/\n  .panic-section {\n    font-family: 'Patrick Hand', cursive;\n    \/* Background Buku Tulis *\/\n    background-color: #ffffff;\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    \n    padding: 80px 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 Getar Saat Tombol Ditekan *\/\n  .panic-section.shaking {\n    animation: crazyShake 0.5s cubic-bezier(.36,.07,.19,.97) both;\n  }\n  @keyframes crazyShake {\n    10%, 90% { transform: translate3d(-2px, 0, 0); }\n    20%, 80% { transform: translate3d(4px, 0, 0); }\n    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }\n    40%, 60% { transform: translate3d(8px, 0, 0); }\n  }\n\n  \/* Pita Peringatan Gila *\/\n  .warning-tape {\n    width: 120%;\n    margin: 20px 0;\n    background: repeating-linear-gradient(\n      45deg,\n      #ffde7d,\n      #ffde7d 15px,\n      #333 15px,\n      #333 30px\n    );\n    transform: rotate(-3deg);\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n    animation: slideTape 20s linear infinite;\n  }\n  @keyframes slideTape {\n    from { background-position: 0 0; }\n    to { background-position: 100px 0; }\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  .panic-title {\n    font-size: 32px;\n    color: #d32f2f;\n    margin-bottom: 10px;\n    z-index: 2;\n    background: rgba(255, 255, 255, 0.8); \/* Biar teks gak ketimpa garis buku *\/\n    padding: 5px 15px;\n    border-radius: 10px;\n    display: inline-block;\n  }\n\n  .panic-desc {\n    font-size: 18px;\n    color: #555;\n    margin-bottom: 30px;\n    z-index: 2;\n    background: rgba(255, 255, 255, 0.8);\n    padding: 10px 15px;\n    border-radius: 10px;\n    display: inline-block;\n  }\n\n  \/* Tombol Panik Merah *\/\n  .panic-button {\n    background: #ff5252;\n    color: #fff;\n    border: 4px solid #333;\n    padding: 20px 40px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 28px;\n    border-radius: 20px;\n    cursor: pointer;\n    box-shadow: 6px 6px 0px #333;\n    transition: all 0.1s ease;\n    z-index: 2;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .panic-button:hover {\n    transform: translate(-2px, -2px);\n    box-shadow: 8px 8px 0px #333;\n  }\n  .panic-button:active {\n    transform: translate(4px, 4px);\n    box-shadow: 2px 2px 0px #333;\n  }\n\n  \/* Kertas Pengakuan *\/\n  .reveal-paper {\n    background: #ffadad;\n    border: 3px solid #333;\n    border-radius: 10px;\n    padding: 30px;\n    max-width: 350px;\n    box-shadow: 8px 8px 0px #333;\n    transform: rotate(-2deg) scale(0);\n    opacity: 0;\n    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    margin-top: 20px;\n    z-index: 2;\n  }\n  .reveal-paper.show {\n    transform: rotate(0deg) scale(1);\n    opacity: 1;\n  }\n\n  .reveal-paper h3 {\n    font-size: 28px;\n    margin: 0 0 10px 0;\n    color: #333;\n    text-decoration: underline wavy #333;\n  }\n  .reveal-paper p {\n    font-size: 20px;\n    margin: 0 0 20px 0;\n    color: #444;\n    line-height: 1.4;\n  }\n  \n  \/* Foto Profil Doodle *\/\n  .doodle-avatar {\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    border: 3px solid #333;\n    object-fit: cover;\n    margin-bottom: 15px;\n    background: #fff;\n  }\n\n  \/* Tombol Reset *\/\n  .reset-panic {\n    background: transparent;\n    border: 2px dashed #333;\n    color: #333;\n    padding: 5px 15px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 16px;\n    border-radius: 10px;\n    cursor: pointer;\n    margin-top: 15px;\n  }\n\n  @media (max-width: 768px) {\n    .panic-title { font-size: 26px; }\n    .panic-desc { font-size: 16px; }\n    .panic-button { font-size: 22px; padding: 15px 30px; }\n  }\n<\/style>\n\n<div class=\"panic-section\" id=\"panicSection\">\n  \n  <!-- Pita Peringatan Atas -->\n  <div class=\"warning-tape\" style=\"height: 40px; margin-bottom: 40px;\"><\/div>\n\n  <h2 class=\"panic-title fade-up\">\ud83d\udea8 PERINGATAN KERAS \ud83d\udea8<\/h2>\n  <p class=\"panic-desc fade-up\">Area ini terlindungi oleh kepenasaran. Apapun yang terjadi...<br><b>JANGAN TEKAN TOMBOL DI BAWAH INI!<\/b><\/p>\n\n  <!-- Tombol Panik -->\n  <button class=\"panic-button fade-up\" id=\"panicBtn\">\n    JANGAN TEKAN! \ud83d\udeab\n  <\/button>\n\n  <!-- Kertas Pengakuan -->\n  <div class=\"reveal-paper\" id=\"revealPaper\">\n    <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/kocak.jpg\" alt=\"Foto Gue\" class=\"doodle-avatar\">\n    <h3>YAHAHA! KENA LO! \ud83d\ude0e<\/h3>\n    <p>Kepencet kan? Makanya jangan bandel! <br><br>Yaudah, sekarang lo wajib kenalan sama gue. Kalo lo cewek..yok kita kawin, tapi kalo lo cowok..<br><br>skip dulu, bro. Tapi kalau lo punya temen cewek yang jomblo\u2026 NAH, baru deeh..soale Ini kondisi darurat cewek bro.. \ud83d\ude2d<\/p>\n    <button class=\"reset-panic\" id=\"resetPanic\">Udah ah, cabut \ud83d\ude02<\/button>\n  <\/div>\n\n  <!-- Pita Peringatan Bawah -->\n  <div class=\"warning-tape\" style=\"height: 40px; margin-top: 40px;\"><\/div>\n\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Animasi 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.2 });\n    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n    const panicSection = document.getElementById('panicSection');\n    const panicBtn = document.getElementById('panicBtn');\n    const revealPaper = document.getElementById('revealPaper');\n    const resetPanic = document.getElementById('resetPanic');\n    let audioCtx = null;\n\n    \/\/ 2. Sound Sirene \"AWOOGAH\"\n    function playSiren() {\n      if (!audioCtx) {\n        audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n      }\n      \n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      \n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n\n      osc.type = 'sawtooth';\n      \n      const now = audioCtx.currentTime;\n      osc.frequency.setValueAtTime(300, now);\n      osc.frequency.setValueAtTime(600, now + 0.15);\n      osc.frequency.setValueAtTime(300, now + 0.30);\n      osc.frequency.setValueAtTime(600, now + 0.45);\n\n      gain.gain.setValueAtTime(0.5, now);\n      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.6);\n\n      osc.start(now);\n      osc.stop(now + 0.6);\n    }\n\n    \/\/ 3. Logika Tombol Ditekan\n    panicBtn.addEventListener('click', function() {\n      panicBtn.style.display = 'none';\n      playSiren();\n      \n      panicSection.classList.add('shaking');\n      setTimeout(() => {\n        panicSection.classList.remove('shaking');\n      }, 500);\n\n      setTimeout(() => {\n        revealPaper.classList.add('show');\n      }, 300);\n    });\n\n    \/\/ 4. Logika Reset\n    resetPanic.addEventListener('click', function() {\n      revealPaper.classList.remove('show');\n      setTimeout(() => {\n        panicBtn.style.display = 'inline-block';\n      }, 500);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64ca9ad e-con-full e-flex e-con e-parent\" data-id=\"64ca9ad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92ba067 elementor-widget elementor-widget-html\" data-id=\"92ba067\" 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 Misi *\/\n  .mission-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #f0f7ff;\n    padding: 80px 20px 120px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden; \/* Penting biar confetti gak bikin layar scroll *\/\n  }\n\n  \/* Hiasan Doodle Melayang *\/\n  .doodle-decoration {\n    position: absolute;\n    font-size: 40px;\n    opacity: 0.8;\n    animation: floatDoodle 4s ease-in-out infinite;\n    z-index: 0;\n  }\n  .doodle-decoration.d-1 { top: 40px; left: 20px; transform: rotate(-15deg); }\n  .doodle-decoration.d-2 { top: 60px; right: 30px; transform: rotate(20deg); animation-delay: 1s; }\n  .doodle-decoration.d-3 { bottom: 60px; left: 30px; transform: rotate(10deg); animation-delay: 2s; }\n  \n  @keyframes floatDoodle {\n    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }\n    50% { transform: translateY(-15px) rotate(var(--r, 0deg)); }\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  .mission-title {\n    font-size: 36px;\n    color: #333;\n    margin-bottom: 30px;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n  .mission-title::after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 12px;\n    background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,5 Q25,10 50,5 T100,5' stroke='%23ff5252' stroke-width='3' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\") no-repeat center;\n    background-size: 100% 100%;\n    margin-top: -5px;\n  }\n\n  \/* Paparan Misi (Clipboard) *\/\n  .clipboard-wrapper {\n    max-width: 400px;\n    margin: 0 auto;\n    background: #fff;\n    border: 3px solid #333;\n    border-radius: 15px;\n    box-shadow: 8px 8px 0px #333;\n    padding: 40px 25px 25px 25px;\n    position: relative;\n    transform: rotate(-1deg);\n    transition: transform 0.3s ease;\n    z-index: 2;\n  }\n  .clipboard-wrapper:hover {\n    transform: rotate(0deg) scale(1.01);\n  }\n\n  \/* Klip Kertas di Atas *\/\n  .clipboard-clip {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 80px;\n    height: 30px;\n    background: #bde0ff;\n    border: 3px solid #333;\n    border-radius: 10px 10px 0 0;\n    box-shadow: 0 4px 0px rgba(0,0,0,0.1);\n    z-index: 3;\n  }\n  .clipboard-clip::after {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 30px;\n    height: 10px;\n    background: #bde0ff;\n    border-left: 3px solid #333;\n    border-right: 3px solid #333;\n  }\n\n  \/* Daftar Misi *\/\n  .todo-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    text-align: left;\n  }\n\n  .todo-item {\n    display: flex;\n    align-items: center;\n    padding: 15px 0;\n    border-bottom: 2px dashed #ddd;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .todo-item:last-child {\n    border-bottom: none;\n  }\n\n  \/* Kotak Centang Doodle *\/\n  .todo-checkbox {\n    width: 28px;\n    height: 28px;\n    border: 3px solid #333;\n    border-radius: 6px;\n    margin-right: 20px;\n    flex-shrink: 0;\n    position: relative;\n    background: #fff;\n  }\n\n  \/* SVG Centang *\/\n  .check-svg {\n    position: absolute;\n    top: -3px;\n    left: -3px;\n    width: 34px;\n    height: 34px;\n    stroke: #ff5252;\n    stroke-width: 4;\n    fill: none;\n    stroke-dasharray: 100;\n    stroke-dashoffset: 100;\n    transition: stroke-dashoffset 0.4s ease;\n    pointer-events: none;\n  }\n\n  \/* Teks Misi *\/\n  .todo-text {\n    font-size: 22px;\n    color: #444;\n    position: relative;\n    transition: color 0.3s ease;\n    z-index: 1;\n  }\n\n  \/* Garis Coretan Spidol *\/\n  .strike-svg {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    height: 20px;\n    transform: translateY(-50%);\n    pointer-events: none;\n    z-index: 2;\n  }\n  .strike-path {\n    stroke: #ff5252;\n    stroke-width: 3;\n    fill: none;\n    stroke-dasharray: 200;\n    stroke-dashoffset: 200;\n    transition: stroke-dashoffset 0.4s ease 0.1s;\n  }\n\n  \/* Kondisi KETIKA DICEKLIS *\/\n  .todo-item.checked .check-svg {\n    stroke-dashoffset: 0;\n  }\n  .todo-item.checked .strike-path {\n    stroke-dashoffset: 0;\n  }\n  .todo-item.checked .todo-text {\n    color: #aaa;\n  }\n\n  \/* === STAMPEL RAKSASA === *\/\n  .stamp-container {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(5) rotate(-25deg);\n    opacity: 0;\n    pointer-events: none;\n    z-index: 10;\n    width: 80%;\n  }\n  .stamp-container.stamp-it {\n    animation: stampDown 0.3s cubic-bezier(0.5, 0, 0.5, 1) forwards;\n  }\n  .stamp-inner {\n    border: 6px solid #d4a017; \/* Warna emas\/gelap biar ceria *\/\n    border-radius: 10px;\n    padding: 10px 20px;\n    color: #d4a017;\n    font-size: 36px;\n    font-weight: bold;\n    text-transform: uppercase;\n    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #d4a017;\n    text-align: center;\n    background: rgba(255,255,255,0.2);\n    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);\n  }\n  \n  @keyframes stampDown {\n    0% { transform: translate(-50%, -50%) scale(5) rotate(-25deg); opacity: 0; }\n    70% { transform: translate(-50%, -50%) scale(0.9) rotate(-12deg); opacity: 1; }\n    100% { transform: translate(-50%, -50%) scale(1) rotate(-15deg); opacity: 1; }\n  }\n\n  \/* === CONFETTI KERTAS === *\/\n  .confetti-piece {\n    position: absolute;\n    width: 12px;\n    height: 18px;\n    top: -20px;\n    z-index: 50;\n    opacity: 0;\n    animation: confettiFall linear forwards;\n  }\n  @keyframes confettiFall {\n    0% { transform: translateY(0) rotateZ(0deg); opacity: 1; }\n    100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0.5; }\n  }\n\n  @media (max-width: 768px) {\n    .mission-title { font-size: 28px; }\n    .todo-text { font-size: 18px; }\n    .clipboard-wrapper { padding: 35px 15px 20px 15px; }\n    .stamp-inner { font-size: 28px; padding: 5px 10px; }\n  }\n<\/style>\n\n<div class=\"mission-section\" id=\"missionSection\">\n  <!-- Hiasan Doodle -->\n  <div class=\"doodle-decoration d-1\">\u270f\ufe0f<\/div>\n  <div class=\"doodle-decoration d-2\">\ud83d\udca1<\/div>\n  <div class=\"doodle-decoration d-3\">\u2b50<\/div>\n\n  <h2 class=\"mission-title fade-up\">Misi Pengunjung Mystery Box \ud83d\udccb<\/h2>\n  \n  <div class=\"clipboard-wrapper fade-up\">\n    <div class=\"clipboard-clip\"><\/div>\n    \n    <ul class=\"todo-list\">\n      <!-- Misi 1 -->\n      <li class=\"todo-item\">\n        <div class=\"todo-checkbox\">\n          <svg class=\"check-svg\" viewBox=\"0 0 30 30\">\n            <path d=\"M5,15 C8,18 10,20 13,17 C16,14 20,8 25,5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n          <\/svg>\n        <\/div>\n        <div class=\"todo-text\">\n          Sengaja scroll sampai sini\n          <svg class=\"strike-svg\" viewBox=\"0 0 200 20\" preserveAspectRatio=\"none\">\n            <path class=\"strike-path\" d=\"M5,10 C40,5 80,15 120,8 T195,12\" stroke-linecap=\"round\" \/>\n          <\/svg>\n        <\/div>\n      <\/li>\n\n      <!-- Misi 2 -->\n      <li class=\"todo-item\">\n        <div class=\"todo-checkbox\">\n          <svg class=\"check-svg\" viewBox=\"0 0 30 30\">\n            <path d=\"M5,15 C8,18 10,20 13,17 C16,14 20,8 25,5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n          <\/svg>\n        <\/div>\n        <div class=\"todo-text\">\n          Lagi sambil rebahan nih\n          <svg class=\"strike-svg\" viewBox=\"0 0 200 20\" preserveAspectRatio=\"none\">\n            <path class=\"strike-path\" d=\"M5,10 C40,5 80,15 120,8 T195,12\" stroke-linecap=\"round\" \/>\n          <\/svg>\n        <\/div>\n      <\/li>\n\n      <!-- Misi 3 -->\n      <li class=\"todo-item\">\n        <div class=\"todo-checkbox\">\n          <svg class=\"check-svg\" viewBox=\"0 0 30 30\">\n            <path d=\"M5,15 C8,18 10,20 13,17 C16,14 20,8 25,5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n          <\/svg>\n        <\/div>\n        <div class=\"todo-text\">\n          Penasaran sama isi web ini\n          <svg class=\"strike-svg\" viewBox=\"0 0 200 20\" preserveAspectRatio=\"none\">\n            <path class=\"strike-path\" d=\"M5,10 C40,5 80,15 120,8 T195,12\" stroke-linecap=\"round\" \/>\n          <\/svg>\n        <\/div>\n      <\/li>\n\n      <!-- Misi 4 -->\n      <li class=\"todo-item\">\n        <div class=\"todo-checkbox\">\n          <svg class=\"check-svg\" viewBox=\"0 0 30 30\">\n            <path d=\"M5,15 C8,18 10,20 13,17 C16,14 20,8 25,5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n          <\/svg>\n        <\/div>\n        <div class=\"todo-text\">\n          Siap jadi orang asik\n          <svg class=\"strike-svg\" viewBox=\"0 0 200 20\" preserveAspectRatio=\"none\">\n            <path class=\"strike-path\" d=\"M5,10 C40,5 80,15 120,8 T195,12\" stroke-linecap=\"round\" \/>\n          <\/svg>\n        <\/div>\n      <\/li>\n    <\/ul>\n\n    <!-- Stempel Raksasa -->\n    <div class=\"stamp-container\" id=\"stampContainer\">\n      <div class=\"stamp-inner\">Resmi<br>Orang Asik!<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. Animasi Fade Up dengan IntersectionObserver\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 Web Audio API buat Suara Menang (Ceria & Keras)\n    let audioCtx = null;\n    function playWinSound() {\n      if (!audioCtx) {\n        audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n      }\n      \n      \/\/ Mainkan beberapa nada naik (C5, E5, G5, C6) biar ceria\n      const notes = [523.25, 659.25, 783.99, 1046.50];\n      \n      notes.forEach((freq, index) => {\n        const osc = audioCtx.createOscillator();\n        const gain = audioCtx.createGain();\n        \n        osc.connect(gain);\n        gain.connect(audioCtx.destination);\n\n        \/\/ Pakai gelombang 'triangle' biar suaranya ceria seperti seruling\/bel\n        osc.type = 'triangle';\n        \n        \/\/ Nada dimainkan berurutan dengan jeda 0.1 detik\n        const startTime = audioCtx.currentTime + (index * 0.1);\n        osc.frequency.setValueAtTime(freq, startTime);\n        \n        \/\/ Volume dibikin besar (0.6) lalu fade out\n        gain.gain.setValueAtTime(0.001, startTime);\n        gain.gain.exponentialRampToValueAtTime(0.6, startTime + 0.02);\n        gain.gain.exponentialRampToValueAtTime(0.001, startTime + 0.3);\n\n        osc.start(startTime);\n        osc.stop(startTime + 0.3);\n      });\n    }\n\n    \/\/ 3. Logika Confetti Kertas Warna-warni\n    function createConfetti() {\n      const section = document.getElementById('missionSection');\n      const colors = ['#ffadad', '#ffde7d', '#d4edda', '#bde0ff', '#ffccc4', '#333', '#ff5252'];\n      \n      \/\/ Buat 60 lembar kertas kecil\n      for (let i = 0; i < 60; i++) {\n        const confetti = document.createElement('div');\n        confetti.className = 'confetti-piece';\n        \n        \/\/ Posisi acak dari kiri ke kanan\n        confetti.style.left = Math.random() * 100 + '%';\n        \n        \/\/ Warna acak dari array\n        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n        \n        \/\/ Durasi jatuh acak (2 sampai 4 detik)\n        confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';\n        \n        \/\/ Delay acak biar gak jatuh bareng persis\n        confetti.style.animationDelay = Math.random() * 0.5 + 's';\n        \n        \/\/ Rotasi awal acak\n        confetti.style.transform = `rotate(${Math.random() * 360}deg)`;\n        \n        \/\/ Acak bentuk (ada yang kotak, ada yang bulat)\n        if (Math.random() > 0.5) {\n          confetti.style.borderRadius = '50%';\n          confetti.style.width = '10px';\n          confetti.style.height = '10px';\n        }\n\n        section.appendChild(confetti);\n        \n        \/\/ Hapus elemen setelah animasinya selesai biar gak berat\n        setTimeout(() => {\n          confetti.remove();\n        }, 4500);\n      }\n    }\n\n    \/\/ 4. Logika Ceklis Misi\n    const todoItems = document.querySelectorAll('.todo-item');\n    const stampContainer = document.getElementById('stampContainer');\n    let checkCount = 0;\n    const totalItems = todoItems.length;\n\n    todoItems.forEach(item => {\n      item.addEventListener('click', function() {\n        if (!this.classList.contains('checked')) {\n          this.classList.add('checked');\n          checkCount++;\n\n          \/\/ Kalau semua udah diceklis\n          if (checkCount === totalItems) {\n            setTimeout(() => {\n              stampContainer.classList.add('stamp-it');\n              playWinSound();  \/\/ Suara Jingle Menang\n              createConfetti(); \/\/ Hujan kertas confetti\n            }, 400);\n          }\n        } else {\n          this.classList.remove('checked');\n          checkCount--;\n          stampContainer.classList.remove('stamp-it');\n        }\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>\u2728 Perkenalan Halo, Gue Creative Developer! Selamat datang di ruang kerja gue. Di sini tempat gue menuangin ide-ide gila, coretan acak, dan ngubahnya jadi web aesthetic yang bener-bener berbeda. Yuk, kenalan lebih deket! Hubungi Gue \ud83d\ude80 Lihat Karya \ud83d\udcd6 Jangan lupa ngopi dulu sebelum mulai ngoding! \u2615 Ini Gue, Lagi Fokus \ud83e\udd13 KOPI \ud83e\udd23 Yaelah [&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-532","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/532","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=532"}],"version-history":[{"count":193,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/532\/revisions"}],"predecessor-version":[{"id":1240,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/532\/revisions\/1240"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/media?parent=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}