{"id":536,"date":"2026-08-14T02:23:58","date_gmt":"2026-08-14T02:23:58","guid":{"rendered":"https:\/\/lab.rwb.my.id\/hero\/?page_id=536"},"modified":"2026-08-15T10:03:23","modified_gmt":"2026-08-15T10:03:23","slug":"jurnal","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/hero\/jurnal\/","title":{"rendered":"Jurnal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"536\" class=\"elementor elementor-536\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73bc204 e-con-full e-flex e-con e-parent\" data-id=\"73bc204\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df1dadd elementor-widget elementor-widget-html\" data-id=\"df1dadd\" 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 Jurnal *\/\n  .journal-hero-section {\n    font-family: 'Patrick Hand', cursive;\n    \/* Background Kertas Tua + Noda Kopi *\/\n    background-color: #f4ecd8;\n    background-image: \n      radial-gradient(circle at 10% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 5%), \/* Noda kopi 1 *\/\n      radial-gradient(circle at 90% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 5%), \/* Noda kopi 2 *\/\n      radial-gradient(#dcd1b3 1px, transparent 1.5px); \/* Tekstur serat kertas *\/\n    background-size: 100% 100%, 100% 100%, 20px 20px;\n    padding: 80px 20px 40px 20px; \/* JARAK BAWAH DIPENDEKIN JADI 40px *\/\n    text-align: center;\n    perspective: 1500px; \/* Penting buat efek 3D buku *\/\n    position: relative;\n    overflow: hidden;\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  .journal-hero-title {\n    font-size: 32px;\n    color: #5a4a3a;\n    margin-bottom: 40px;\n    display: inline-block;\n    z-index: 2;\n    position: relative;\n  }\n\n  \/* Panggung Buku 3D *\/\n  .book-stage {\n    width: 300px;\n    height: 380px;\n    margin: 0 auto;\n    position: relative;\n    transform-style: preserve-3d;\n    z-index: 2;\n  }\n\n  \/* Badan Buku (Halaman Dalam) *\/\n  .book-inside {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: #fffef0;\n    border-radius: 5px 15px 15px 5px;\n    border: 2px solid #d1c7b3;\n    box-shadow: inset 5px 0 15px rgba(0,0,0,0.1);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 30px;\n    box-sizing: border-box;\n    opacity: 0; \/* Ngumpet awalnya *\/\n  }\n  .book-inside h2 {\n    font-size: 28px;\n    color: #5a4a3a;\n    margin: 0 0 15px 0;\n  }\n  .book-inside p {\n    font-size: 18px;\n    color: #7a6a5a;\n    margin: 0 0 30px 0;\n    line-height: 1.4;\n  }\n\n  \/* Sampul Buku (Nge-flip ke kiri) *\/\n  .book-cover {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: #4a3424; \/* Warna kulit cokelat tua *\/\n    border-radius: 5px 15px 15px 5px;\n    border: 2px solid #3a2a1a;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);\n    transform-origin: left center; \/* Engsel buku di kiri *\/\n    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n    backface-visibility: hidden;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    z-index: 10;\n  }\n\n  \/* Tekstur Kulit Sampul *\/\n  .book-cover::before {\n    content: '';\n    position: absolute;\n    inset: 10px;\n    border: 2px solid #5a4434;\n    border-radius: 3px 10px 10px 3px;\n    background-image: radial-gradient(#3a2a1a 1px, transparent 1px);\n    background-size: 10px 10px;\n    opacity: 0.3;\n  }\n\n  \/* Tulisan di Sampul *\/\n  .cover-title {\n    color: #d4af37; \/* Warna emas *\/\n    font-size: 32px;\n    z-index: 2;\n    text-shadow: 1px 1px 0px #000;\n    border: 2px solid #d4af37;\n    padding: 10px 20px;\n    border-radius: 10px;\n    transform: rotate(-5deg);\n    background: rgba(0,0,0,0.2);\n  }\n\n  \/* Gembok Besi *\/\n  .book-lock {\n    position: absolute;\n    right: -15px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 40px;\n    height: 60px;\n    background: #9e9e9e;\n    border: 3px solid #444;\n    border-radius: 10px;\n    z-index: 11;\n    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);\n    transition: transform 0.3s ease, opacity 0.3s ease;\n  }\n  \/* Kunci Gembok (Gagang) *\/\n  .book-lock::before {\n    content: '';\n    position: absolute;\n    top: -20px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 25px;\n    height: 30px;\n    border: 5px solid #444;\n    border-bottom: none;\n    border-radius: 15px 15px 0 0;\n    background: transparent;\n  }\n  \/* Lubang Kunci *\/\n  .book-lock::after {\n    content: '';\n    position: absolute;\n    top: 15px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 8px;\n    height: 8px;\n    background: #444;\n    border-radius: 50%;\n    box-shadow: 0px 10px 0px -2px #444;\n  }\n\n  \/* Animasi Buka Buku *\/\n  .book-cover.open {\n    transform: rotateY(-160deg); \/* Buka ke kiri *\/\n  }\n  .book-inside.open {\n    opacity: 1;\n    transition: opacity 0.5s ease 0.6s; \/* Halaman dalam muncul saat sampur udah kebuka *\/\n  }\n  .book-lock.fall {\n    transform: translateY(-50%) translateX(50px) rotate(45deg);\n    opacity: 0;\n  }\n\n  \/* Tombol Baca Jurnal *\/\n  .read-journal-btn {\n    background: #d4af37; \/* Emas *\/\n    color: #fff;\n    border: 3px solid #5a4a3a;\n    padding: 10px 25px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 22px;\n    border-radius: 15px 5px 15px 5px;\n    cursor: pointer;\n    box-shadow: 4px 4px 0px #5a4a3a;\n    transition: all 0.2s ease;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .read-journal-btn:active {\n    transform: translate(3px, 3px);\n    box-shadow: 1px 1px 0px #5a4a3a;\n  }\n\n  \/* Teks Instruksi *\/\n  .instruction-text {\n    margin-top: 30px;\n    font-size: 18px;\n    color: #5a4a3a;\n    animation: pulse 2s infinite;\n  }\n  @keyframes pulse {\n    0%, 100% { opacity: 0.6; }\n    50% { opacity: 1; }\n  }\n\n  @media (max-width: 768px) {\n    .journal-hero-title { font-size: 26px; }\n    .book-stage { width: 260px; height: 340px; }\n    .book-inside h2 { font-size: 24px; }\n    .book-inside p { font-size: 16px; }\n  }\n<\/style>\n\n<div class=\"journal-hero-section\">\n  <h2 class=\"journal-hero-title fade-up\">Selamat Datang di Catatan Gue \u2615<\/h2>\n\n  <!-- Panggung Buku -->\n  <div class=\"book-stage fade-up\">\n    \n    <!-- Halaman Dalam (Ketutup sampul) -->\n    <div class=\"book-inside\" id=\"bookInside\">\n      <h2>Buku Harian Gue \ud83d\udcd6<\/h2>\n      <p>\"Isinya cuma cerita acak, keluh kesah ngoding, sampai hal-hal gokil yang kepikiran pas lagi ngopi.\"<\/p>\n      <button type=\"button\" class=\"read-journal-btn\" onclick=\"document.getElementById('firstJournal').scrollIntoView({behavior:'smooth'})\">\n        Baca Jurnal! \u270d\ufe0f\n      <\/button>\n    <\/div>\n\n    <!-- Sampul Buku + Gembok -->\n    <div class=\"book-cover\" id=\"bookCover\">\n      <div class=\"cover-title\">MY<br>JOURNAL<\/div>\n      <div class=\"book-lock\" id=\"bookLock\"><\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"instruction-text fade-up\" id=\"instructionText\">\n    \ud83d\udc46 Klik Gemboknya buat ngebuka!\n  <\/div>\n\n<\/div>\n\n<!-- Jangkar\u9690\u5f62 (Invisible Anchor) buat tombol scroll, gak makan tempat -->\n<div id=\"firstJournal\" style=\"height: 0; width: 0; overflow: hidden;\"><\/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. Web Audio API (Suara Gembok & Buku Buka)\n    let audioCtx = null;\n    function initAudio() {\n      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n\n    function playClickSound() {\n      initAudio();\n      const now = audioCtx.currentTime;\n      \/\/ Suara klik logam\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.type = 'square';\n      osc.frequency.setValueAtTime(800, now);\n      gain.gain.setValueAtTime(0.3, now);\n      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.05);\n      osc.start(now);\n      osc.stop(now + 0.05);\n    }\n\n    function playBookOpenSound() {\n      initAudio();\n      const now = audioCtx.currentTime;\n      \/\/ Suara kertas berderak tebal (bledes)\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.type = 'sawtooth';\n      osc.frequency.setValueAtTime(120, now);\n      osc.frequency.exponentialRampToValueAtTime(60, now + 0.3);\n      gain.gain.setValueAtTime(0.2, now);\n      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4);\n      osc.start(now);\n      osc.stop(now + 0.4);\n    }\n\n    \/\/ 3. Logika Buka Buku\n    const bookCover = document.getElementById('bookCover');\n    const bookLock = document.getElementById('bookLock');\n    const bookInside = document.getElementById('bookInside');\n    const instructionText = document.getElementById('instructionText');\n\n    bookCover.addEventListener('click', function(e) {\n      e.preventDefault();\n      \n      \/\/ Cegah klik berkali-kali\n      bookCover.style.pointerEvents = 'none';\n\n      \/\/ 1. Gembok Jatuh + Suara Klik\n      playClickSound();\n      bookLock.classList.add('fall');\n\n      \/\/ 2. Setelah 0.3 detik, buku terbuka + Suara Bledes\n      setTimeout(() => {\n        playBookOpenSound();\n        bookCover.classList.add('open');\n        bookInside.classList.add('open');\n        instructionText.style.display = 'none';\n      }, 300);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6aa6cfe e-con-full e-flex e-con e-parent\" data-id=\"6aa6cfe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e4f135a elementor-widget elementor-widget-html\" data-id=\"e4f135a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Patrick+Hand&family=Special+Elite&display=swap');\n\n  \/* Wrapper Section Jurnal *\/\n  .journal-entry-section {\n    font-family: 'Special Elite', 'Patrick Hand', cursive;\n    background-color: #f4ecd8;\n    background-image: \n      radial-gradient(circle at 90% 10%, rgba(139, 69, 19, 0.08) 0%, transparent 8%),\n      radial-gradient(circle at 5% 85%, rgba(139, 69, 19, 0.08) 0%, transparent 8%),\n      radial-gradient(#dcd1b3 1px, transparent 1.5px);\n    background-size: 100% 100%, 100% 100%, 20px 20px;\n    padding: 60px 20px 40px 20px; \/* JARAK BAWAH DIPENDEKIN JADI 40px *\/\n    text-align: center;\n    perspective: 1500px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* Panggung Kertas Jurnal *\/\n  .journal-page-stage {\n    width: 100%;\n    max-width: 600px;\n    margin: 0 auto;\n    position: relative;\n    transform-style: preserve-3d;\n  }\n\n  \/* Kertas Jurnal *\/\n  .journal-page {\n    background: #fffef0;\n    background-image: repeating-linear-gradient(transparent, transparent 35px, #bde0ff 36px);\n    border: 2px solid #d1c7b3;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n    padding: 60px 40px 40px 60px;\n    border-radius: 0 15px 15px 0;\n    text-align: left;\n    min-height: 400px;\n    position: relative;\n    transform-origin: left center;\n    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.5s ease;\n  }\n\n  \/* Garis Tepi Merah Buku Tulis *\/\n  .journal-page::before {\n    content: '';\n    position: absolute;\n    left: 40px;\n    top: 0;\n    bottom: 0;\n    width: 2px;\n    background: #ffadad;\n  }\n\n  \/* Lubang Jahitan Buku *\/\n  .journal-page::after {\n    content: '';\n    position: absolute;\n    left: 15px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 10px;\n    height: 60px;\n    background: transparent;\n    border-left: 2px dashed #aaa;\n    border-right: 2px dashed #aaa;\n  }\n\n  \/* Teks Mesin Tik *\/\n  .typewriter-text {\n    font-size: 20px;\n    color: #5a4a3a;\n    line-height: 1.8;\n    white-space: pre-wrap; \/* Ini yang bikin teks enter panjang bisa rapi *\/\n    word-wrap: break-word;\n    min-height: 250px;\n  }\n\n  \/* Kursor Kedip *\/\n  .cursor {\n    display: inline-block;\n    width: 2px;\n    height: 22px;\n    background: #5a4a3a;\n    animation: blink 0.8s step-end infinite;\n    vertical-align: middle;\n    margin-left: 2px;\n  }\n  @keyframes blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n  }\n\n  \/* Noda Tinta \/ Stempel *\/\n  .ink-stamp {\n    position: absolute;\n    bottom: 30px;\n    right: 40px;\n    border: 4px solid #e74c3c;\n    color: #e74c3c;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 24px;\n    padding: 8px 15px;\n    border-radius: 8px;\n    transform: rotate(-15deg) scale(0);\n    opacity: 0;\n    text-transform: uppercase;\n    pointer-events: none;\n    box-shadow: inset 0 0 0 3px #fffef0;\n    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .ink-stamp.stamped {\n    transform: rotate(-15deg) scale(1);\n    opacity: 0.8;\n  }\n\n  \/* Animasi Halaman Terbalik (Flip) *\/\n  .journal-page.flipped {\n    transform: rotateY(-180deg);\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  \/* Tombol Halaman Berikutnya *\/\n  .next-page-btn {\n    background: #5a4a3a;\n    color: #fffef0;\n    border: 2px solid #3a2a1a;\n    padding: 10px 25px;\n    font-family: 'Special Elite', cursive;\n    font-size: 18px;\n    border-radius: 5px 15px 5px 15px;\n    cursor: pointer;\n    margin-top: 30px;\n    box-shadow: 4px 4px 0px #3a2a1a;\n    transition: all 0.2s ease;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .next-page-btn.show {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  .next-page-btn:active {\n    transform: translate(3px, 3px);\n    box-shadow: 1px 1px 0px #3a2a1a;\n  }\n\n  @media (max-width: 768px) {\n    .journal-page { padding: 40px 20px 40px 50px; }\n    .typewriter-text { font-size: 16px; line-height: 1.6; min-height: 300px; }\n    .ink-stamp { bottom: 15px; right: 20px; font-size: 18px; }\n  }\n<\/style>\n\n<div class=\"journal-entry-section\">\n  \n  <div class=\"journal-page-stage\">\n    <div class=\"journal-page\" id=\"journalPage\">\n      \n      <!-- Teks Ketikan -->\n      <div class=\"typewriter-text\" id=\"typewriterText\"><\/div>\n      <span class=\"cursor\" id=\"cursor\"><\/span>\n\n      <!-- Stempel Tinta -->\n      <div class=\"ink-stamp\" id=\"inkStamp\">Lagi Tumis Nasib!<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Tombol Next -->\n  <button type=\"button\" class=\"next-page-btn\" id=\"nextPageBtn\">\n    Halaman Berikutnya \u2192\n  <\/button>\n\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. DATA ISI JURNAL (Teks punyamu udah masuk)\n    const journalEntries = [\n      \"Tanggal 24 Mei.\\n\\nGue lagi duduk ngopi di pojokan, terus mikir... kenapa web zaman sekarang serius banget? Masuk website rasanya kayak mau wawancara kerja. Padahal gue cuma mau klik-klik, bukan tanda tangan kontrak.\\n\\nAkhirnya gue bikin halaman ini seaneh mungkin. Biar yang masuk bingung: ini website, game, atau tanda-tanda gue butuh liburan.\\n\\nPokoknya kalau lo merasa nyaman di sini, berarti selera humor lo juga udah rusak. Selamat, kita sefrekuensi.\",\n      \"Tanggal 25 Mei.\\n\\nBaru kelar ngoding mesin tik virtual ini. Jari gue pegel, mata gue sepet, kopi tinggal ampas. Yang lebih parah, ternyata tombol yang gue pencet 80% cuma buat bikin error baru.\\n\\nKalau lo bisa sampai baca tulisan ini, berarti lo berhasil nge-flip halaman pertama. Gue sendiri hampir flip karena debugging dari tadi nggak kelar-kelar.\\n\\nSelamat datang di buku harian gue. Isinya nggak penting, tapi setidaknya tampilannya sok penting.\",\n      \"Halaman Terakhir.\\n\\nYah, segitu dulu catatan gue. Sebenarnya masih banyak yang mau ditulis, tapi otak gue sudah mengajukan resign secara sepihak.\\n\\nGue mau ngopi dulu sambil nyari inspirasi. Kalau inspirasi nggak datang, minimal kopinya datang.\\n\\nMakasih udah baca sampai tamat. Kalau kangen, balik ke halaman pertama. Kalau nggak kangen juga balik aja, gue nggak punya fitur lain. \u2615\"\n    ];\n\n    let currentEntryIndex = 0;\n    const typewriterText = document.getElementById('typewriterText');\n    const cursor = document.getElementById('cursor');\n    const inkStamp = document.getElementById('inkStamp');\n    const nextPageBtn = document.getElementById('nextPageBtn');\n    const journalPage = document.getElementById('journalPage');\n\n    \/\/ 2. Web Audio API (Suara Mesin Tik)\n    let audioCtx = null;\n    function initAudio() {\n      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n\n    function playTypeSound() {\n      initAudio();\n      const now = audioCtx.currentTime;\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.type = 'square';\n      osc.frequency.setValueAtTime(1500 + Math.random() * 500, now);\n      gain.gain.setValueAtTime(0.05, now);\n      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.03);\n      osc.start(now);\n      osc.stop(now + 0.03);\n    }\n\n    function playStampSound() {\n      initAudio();\n      const now = audioCtx.currentTime;\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.type = 'sine';\n      osc.frequency.setValueAtTime(300, now);\n      osc.frequency.exponentialRampToValueAtTime(80, now + 0.1);\n      gain.gain.setValueAtTime(0.4, now);\n      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);\n      osc.start(now);\n      osc.stop(now + 0.12);\n    }\n\n    function playFlipSound() {\n      initAudio();\n      const now = audioCtx.currentTime;\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.type = 'sawtooth';\n      osc.frequency.setValueAtTime(100, now);\n      osc.frequency.exponentialRampToValueAtTime(400, now + 0.2);\n      gain.gain.setValueAtTime(0.1, now);\n      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.3);\n      osc.start(now);\n      osc.stop(now + 0.3);\n    }\n\n    \/\/ 3. Logika Mesin Tik (Dengan Sistem Pause\/Resume)\n    let typeIndex = 0;\n    let typingTimer = null;\n    let isTyping = false;\n    let isFinished = false; \/\/ Tanda kalau paragraf udah kelar semua\n\n    function typeEntry() {\n      \/\/ Cek dulu, kalau lagi pause jangan lanjut\n      if (!isTyping) return;\n\n      const text = journalEntries[currentEntryIndex];\n      \n      if (typeIndex < text.length) {\n        const char = text.charAt(typeIndex);\n        \n        if (char !== ' ' && char !== '\\n') {\n          playTypeSound();\n        }\n\n        typewriterText.innerHTML += char;\n        typeIndex++;\n        const speed = 40 + Math.random() * 60;\n        typingTimer = setTimeout(typeEntry, speed);\n      } else {\n        \/\/ Selesai ngetik paragraf ini\n        isTyping = false;\n        isFinished = true;\n        \n        setTimeout(() => {\n          if (!isFinished) return; \/\/ Kalau di-reset pas di tengah jeda, batal\n          playStampSound();\n          inkStamp.classList.add('stamped');\n          \n          if (currentEntryIndex >= journalEntries.length - 1) {\n            inkStamp.innerText = \"Tammat!\";\n            nextPageBtn.innerText = \"\u21a9\ufe0f Baca Ulang Jurnal\";\n          } else {\n            inkStamp.innerText = \"Lagi Tumis Nasib!\";\n            nextPageBtn.innerText = \"Halaman Berikutnya \u2192\";\n          }\n          nextPageBtn.classList.add('show');\n        }, 500);\n      }\n    }\n\n    \/\/ Fungsi buat mulai\/resume ngetik\n    function startTyping() {\n      if (isTyping || isFinished) return; \/\/ Jangan mulai kalau lagi jalan atau udah selesai\n      isTyping = true;\n      typeEntry();\n    }\n\n    \/\/ Fungsi buat pause ngetik (kalau keluar layar \/ ganti tab)\n    function pauseTyping() {\n      isTyping = false;\n      if (typingTimer) {\n        clearTimeout(typingTimer);\n        typingTimer = null;\n      }\n    }\n\n    \/\/ 4. Logika Next Page & Reset\n    nextPageBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      playFlipSound();\n      \n      journalPage.classList.add('flipped');\n      nextPageBtn.classList.remove('show');\n\n      setTimeout(() => {\n        if (currentEntryIndex >= journalEntries.length - 1) {\n          currentEntryIndex = 0;\n        } else {\n          currentEntryIndex++;\n        }\n\n        typewriterText.innerHTML = \"\";\n        typeIndex = 0;\n        isFinished = false; \/\/ Reset status selesai\n        inkStamp.classList.remove('stamped');\n        journalPage.classList.remove('flipped');\n        \n        \/\/ Mulai ngetik lagi otomatis\n        setTimeout(() => {\n          startTyping();\n        }, 500);\n      }, 800);\n    });\n\n    \/\/ 5. Intersection Observer (Pause kalau keluar layar, Resume kalau masuk lagi)\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          \/\/ Kalau masuk layar lagi, lanjut ngetik\n          startTyping();\n        } else {\n          \/\/ Kalau di-scroll keluar layar, langsung pause!\n          pauseTyping();\n        }\n      });\n    }, { threshold: 0.3 });\n\n    observer.observe(journalPage);\n\n    \/\/ 6. Event Listener buat ngecek kalau user pindah tab \/ minimize browser\n    document.addEventListener('visibilitychange', function() {\n      if (document.hidden) {\n        \/\/ Kalau tab disembunyiin, pause!\n        pauseTyping();\n      } else {\n        \/\/ Kalau balik ke tab, cek dulu apakah elemennya ada di layar\n        const rect = journalPage.getBoundingClientRect();\n        const isInView = rect.top < window.innerHeight && rect.bottom >= 0;\n        if (isInView) {\n          startTyping();\n        }\n      }\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d6bc5ae e-con-full e-flex e-con e-parent\" data-id=\"d6bc5ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb65e4a elementor-widget elementor-widget-html\" data-id=\"cb65e4a\" 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 Kaca Pembesar *\/\n  .magnify-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #f4ecd8;\n    background-image: \n      radial-gradient(circle at 15% 15%, rgba(139, 69, 19, 0.08) 0%, transparent 8%),\n      radial-gradient(circle at 85% 90%, rgba(139, 69, 19, 0.08) 0%, transparent 8%),\n      radial-gradient(#dcd1b3 1px, transparent 1.5px);\n    background-size: 100% 100%, 100% 100%, 20px 20px;\n    padding: 60px 20px 40px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\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  .magnify-title {\n    font-size: 32px;\n    color: #5a4a3a;\n    margin-bottom: 20px;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n  \n  .magnify-desc {\n    font-size: 18px;\n    color: #7a6a5a;\n    margin-bottom: 40px;\n  }\n\n  \/* Panggung Teks & Kaca Pembesar *\/\n  .magnify-stage {\n    max-width: 600px;\n    margin: 0 auto;\n    position: relative;\n    background: #fffef0;\n    background-image: repeating-linear-gradient(transparent, transparent 35px, #bde0ff 36px);\n    border: 2px solid #d1c7b3;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n    padding: 60px 40px;\n    border-radius: 0 15px 15px 0;\n    text-align: left;\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: grab;\n  }\n\n  .text-layer {\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\n    line-height: 1.8;\n    color: #5a4a3a;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    position: relative;\n    z-index: 1;\n  }\n\n  \/* Kaca Pembesar *\/\n  .magnify-glass {\n    position: absolute;\n    width: 140px;\n    height: 140px;\n    border-radius: 50%;\n    border: 8px solid #5a4a3a;\n    box-shadow: 0 0 0 2px #d1c7b3, 5px 5px 15px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,0.2);\n    overflow: hidden;\n    z-index: 10;\n    pointer-events: none;\n    background: #fffef0;\n    top: 0;\n    left: 0;\n    transform: translate(-9999px, -9999px);\n  }\n\n  \/* Refleksi Kaca *\/\n  .magnify-glass::after {\n    content: '';\n    position: absolute;\n    top: 10px;\n    left: 15px;\n    width: 40px;\n    height: 25px;\n    background: rgba(255,255,255,0.4);\n    transform: rotate(-30deg);\n    border-radius: 50%;\n  }\n\n  \/* Teks Rahasia di dalam Kaca *\/\n  .secret-text {\n    font-family: 'Patrick Hand', cursive;\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-size: 20px;\n    line-height: 1.8;\n    color: #e74c3c;\n    font-weight: bold;\n    white-space: pre; \n    word-wrap: normal;\n    width: auto;\n    padding: 60px 40px;\n    box-sizing: border-box;\n    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);\n  }\n\n  @media (max-width: 768px) {\n    .magnify-title { font-size: 26px; }\n    .text-layer, .secret-text { font-size: 16px; line-height: 1.6; }\n    .magnify-stage { padding: 40px 20px; }\n    .secret-text { padding: 40px 20px; white-space: pre; }\n    .magnify-glass { width: 110px; height: 110px; border-width: 6px; }\n  }\n<\/style>\n\n<div class=\"magnify-section\">\n  <h2 class=\"magnify-title fade-up\">\ud83d\udd75\ufe0f Ada Rahasia Tersembunyi<\/h2>\n  <p class=\"magnify-desc fade-up\">Tulisan di bawah ini kelihatannya biasa aja. Coba deh tahan dan geser (drag) mouse\/jari lo ke atas teksnya. Baca yang bener-bener di dalam lingkaran kacanya!<\/p>\n\n  <div class=\"magnify-stage fade-up\" id=\"magnifyStage\">\n    \n    <!-- Teks Asli (Basa-Basi) -->\n    <div class=\"text-layer\">\n\"Halo semuanya, hari ini gue mau cerita sedikit tentang liburan gue kemarin ke pegunungan. Tujuan utama gue pergi ke sana sih sebenarnya buat nyari kedamaian batin dan menjauh sejenak dari hiruk pikuk kota yang bikin kepala pening.\n\nSampai di atas, udaranya segar banget. Gue bikin kopi sendiri sambil duduk di teras, ngelihat kabut turun perlahan. Bener-bener momen yang bikin gue merasa tenang, damai, dan nggak ada satupun hal yang bikin gue cemas atau ketakutan. Liburan paling produktif.\"\n    <\/div>\n\n    <!-- Kaca Pembesar -->\n    <div class=\"magnify-glass\" id=\"magnifyGlass\">\n      <!-- Teks Rahasia (Ditaruh di paragraf 2 pakai enter) -->\n      <div class=\"secret-text\" id=\"secretText\">\n\n\n\n\n\"Halo semuanya, gue Rudi Web Builder, \ndesigner web premium. WA gue: 0812-2700-8020.<\/div>\n    <\/div>\n\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 Drag Kaca Pembesar\n    const stage = document.getElementById('magnifyStage');\n    const glass = document.getElementById('magnifyGlass');\n    const secretText = document.getElementById('secretText');\n    \n    let isDragging = false;\n    let lastX = 0, lastY = 0;\n\n    function moveGlass(clientX, clientY) {\n      const rect = stage.getBoundingClientRect();\n      const glassHalf = glass.offsetWidth \/ 2;\n      \n      let x = clientX - rect.left - glassHalf;\n      let y = clientY - rect.top - glassHalf;\n      \n      \/\/ FIX: Bolehin kaca ditarik jauh ke kanan biar teks panjang horizontal kebaca semua\n      const secretWidth = secretText.scrollWidth;\n      const maxX = Math.max(rect.width - glass.offsetWidth, secretWidth - glass.offsetWidth + 80);\n      x = Math.max(0, Math.min(x, maxX));\n      \n      y = Math.max(0, Math.min(y, rect.height - glass.offsetHeight));\n      \n      glass.style.transform = `translate(${x}px, ${y}px)`;\n      secretText.style.transform = `translate(${-x}px, ${-y}px)`;\n\n      const dx = clientX - lastX;\n      const dy = clientY - lastY;\n      \n      lastX = clientX;\n      lastY = clientY;\n    }\n\n    \/\/ Event Desktop (Mouse)\n    stage.addEventListener('mousedown', function(e) {\n      isDragging = true;\n      stage.style.cursor = 'grabbing';\n      lastX = e.clientX;\n      lastY = e.clientY;\n      moveGlass(e.clientX, e.clientY);\n    });\n\n    document.addEventListener('mousemove', function(e) {\n      if (!isDragging) return;\n      moveGlass(e.clientX, e.clientY);\n    });\n\n    document.addEventListener('mouseup', function() {\n      if (!isDragging) return;\n      isDragging = false;\n      stage.style.cursor = 'grab';\n    });\n\n    \/\/ Event Mobile (Touch)\n    stage.addEventListener('touchstart', function(e) {\n      e.preventDefault();\n      isDragging = true;\n      lastX = e.touches[0].clientX;\n      lastY = e.touches[0].clientY;\n      moveGlass(lastX, lastY);\n    }, { passive: false });\n\n    stage.addEventListener('touchmove', function(e) {\n      e.preventDefault();\n      if (!isDragging) return;\n      moveGlass(e.touches[0].clientX, e.touches[0].clientY);\n    }, { passive: false });\n\n    stage.addEventListener('touchend', function() {\n      if (!isDragging) return;\n      isDragging = false;\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d4b52a6 e-con-full e-flex e-con e-parent\" data-id=\"d4b52a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3576547 elementor-widget elementor-widget-html\" data-id=\"3576547\" 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 Kertas Sobek *\/\n  .tear-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #f4ecd8;\n    background-image: \n      radial-gradient(circle at 10% 20%, rgba(139, 69, 19, 0.08) 0%, transparent 8%),\n      radial-gradient(circle at 90% 80%, rgba(139, 69, 19, 0.08) 0%, transparent 8%),\n      radial-gradient(#dcd1b3 1px, transparent 1.5px);\n    background-size: 100% 100%, 100% 100%, 20px 20px;\n    padding: 80px 20px 120px 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\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  .tear-title {\n    font-size: 32px;\n    color: #5a4a3a;\n    margin-bottom: 20px;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n  \n  .tear-desc {\n    font-size: 18px;\n    color: #7a6a5a;\n    margin-bottom: 40px;\n  }\n\n  \/* Panggung Kertas *\/\n  .paper-stage {\n    width: 320px;\n    height: 380px;\n    margin: 0 auto;\n    position: relative;\n    perspective: 1000px;\n  }\n\n  \/* Lapisan Bawah (Balasan Sarkas) *\/\n  .reply-paper {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) rotate(2deg) scale(0.8);\n    width: 280px;\n    background: #d4edda; \/* Warna hijau muda *\/\n    padding: 30px 20px;\n    border: 2px solid #5a4a3a;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);\n    opacity: 0;\n    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    z-index: 1;\n    font-size: 20px;\n    color: #333;\n    line-height: 1.4;\n  }\n  .reply-paper.show {\n    opacity: 1;\n    transform: translate(-50%, -50%) rotate(-2deg) scale(1);\n  }\n\n  \/* Kertas Depan (Tempat Ngetik) *\/\n  .input-paper {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 300px;\n    height: 100%;\n    background: #ffde7d; \/* Warna kuning sticky note *\/\n    padding: 20px;\n    border: 2px solid #5a4a3a;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);\n    z-index: 2;\n    transition: opacity 0.2s ease;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n  }\n  .input-paper.hide {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .input-paper h3 {\n    margin: 0 0 15px 0;\n    font-size: 24px;\n    color: #5a4a3a;\n    text-align: center;\n    border-bottom: 2px dashed #5a4a3a;\n    padding-bottom: 10px;\n  }\n\n  .complaint-input {\n    width: 100%;\n    flex-grow: 1;\n    background: transparent;\n    border: none;\n    resize: none;\n    outline: none;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\n    color: #5a4a3a;\n    line-height: 1.4;\n  }\n  .complaint-input::placeholder {\n    color: #8a7a6a;\n  }\n\n  .tear-btn {\n    background: #e74c3c;\n    color: #fff;\n    border: 2px solid #5a4a3a;\n    padding: 10px 20px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\n    border-radius: 10px 5px 10px 5px;\n    cursor: pointer;\n    margin-top: 15px;\n    box-shadow: 3px 3px 0px #5a4a3a;\n    transition: all 0.1s ease;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .tear-btn:active {\n    transform: translate(3px, 3px);\n    box-shadow: 0px 0px 0px #5a4a3a;\n  }\n\n  \/* === EFEK SOBEKAN === *\/\n  \/* Lapisan sobekan ini duplicate teksnya biar keliatan kaya dipotong *\/\n  .tear-layer {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 300px;\n    height: 100%;\n    background: #ffde7d;\n    padding: 20px;\n    border: 2px solid #5a4a3a;\n    box-sizing: border-box;\n    z-index: 3;\n    opacity: 0;\n    pointer-events: none;\n    overflow: hidden;\n  }\n  .tear-layer.show {\n    opacity: 1;\n  }\n\n  \/* Teks di dalam lapisan sobekan *\/\n  .tear-text {\n    font-size: 20px;\n    color: #5a4a3a;\n    line-height: 1.4;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n  .tear-layer h3 {\n    margin: 0 0 15px 0;\n    font-size: 24px;\n    text-align: center;\n    border-bottom: 2px dashed #5a4a3a;\n    padding-bottom: 10px;\n  }\n\n  \/* Bagian Atas & Bawah Kertas Sobek *\/\n  .tear-top {\n    clip-path: polygon(0 0, 100% 0, 100% 50%, 92% 52%, 85% 50%, 75% 53%, 65% 50%, 55% 52%, 45% 50%, 30% 53%, 20% 50%, 10% 52%, 0 50%);\n    transition: transform 0.8s ease-in, opacity 0.8s ease-in;\n  }\n  .tear-bottom {\n    clip-path: polygon(0 50%, 10% 52%, 20% 50%, 30% 53%, 45% 50%, 55% 52%, 65% 50%, 75% 53%, 85% 50%, 92% 52%, 100% 50%, 100% 100%, 0 100%);\n    transition: transform 0.8s ease-in, opacity 0.8s ease-in;\n  }\n\n  \/* Animasi Jatuh *\/\n  .tear-top.rip { transform: translate(-150%, -100px) rotate(-45deg); opacity: 0; }\n  .tear-bottom.rip { transform: translate(150%, 100px) rotate(45deg); opacity: 0; }\n\n  @media (max-width: 768px) {\n    .tear-title { font-size: 26px; }\n    .paper-stage { width: 280px; height: 350px; }\n    .input-paper, .tear-layer { width: 260px; }\n    .reply-paper { width: 240px; }\n  }\n<\/style>\n\n<div class=\"tear-section\">\n  <h2 class=\"tear-title fade-up\">\ud83d\udcdd Kotak Keluhan (Eksklusif)<\/h2>\n  <p class=\"tear-desc fade-up\">Punya keluhan soal web ini? Silakan tulis di bawah, jangan ragu-ragu. Gue baca kok!<\/p>\n\n  <div class=\"paper-stage fade-up\">\n    \n    <!-- 1. Kertas Balasan (Di belakang) -->\n    <div class=\"reply-paper\" id=\"replyPaper\">\n      Makasih buat laporannya, gue baca kok (bohong). \ud83e\udd25\n    <\/div>\n\n    <!-- 2. Kertas Sobek Bagian Atas -->\n    <div class=\"tear-layer tear-top\" id=\"tearTop\">\n      <h3>Keluhan Pengunjung<\/h3>\n      <div class=\"tear-text\" id=\"textTop\"><\/div>\n    <\/div>\n\n    <!-- 3. Kertas Sobek Bagian Bawah -->\n    <div class=\"tear-layer tear-bottom\" id=\"tearBottom\">\n      <h3>Keluhan Pengunjung<\/h3>\n      <div class=\"tear-text\" id=\"textBottom\"><\/div>\n    <\/div>\n\n    <!-- 4. Kertas Input (Paling Depan) -->\n    <div class=\"input-paper\" id=\"inputPaper\">\n      <h3>Keluhan Pengunjung<\/h3>\n      <textarea class=\"complaint-input\" id=\"complaintInput\" placeholder=\"Web lo berat, jelek, dan gue benci sama fontnya!\"><\/textarea>\n      <button type=\"button\" class=\"tear-btn\" id=\"tearBtn\">\u2702\ufe0f Sobek Kertas!<\/button>\n    <\/div>\n\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. Data Balasan Acak (Sarkas)\n    const replies = [\n      \"Makasih buat laporannya, gue baca kok (bohong). \ud83e\udd25\",\n      \"Wah keluhan lo aman, udah gue masukin ke tempat sampah. \ud83d\uddd1\ufe0f\",\n      \"Sama, gue juga juga lagi kesel sama web ini. \ud83d\ude21\",\n      \"Otak gue lagi offline, bisa ulang lagi keluhan lo? \ud83d\udcc9\",\n      \"Lo ngetik lama, tapi gue baca cuma 0.5 detik. Trimakasih. \ud83e\udd13\"\n    ];\n\n    \/\/ 3. Web Audio API (Suara Kertas Sobek)\n    let audioCtx = null;\n    function initAudio() {\n      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n\n    function playTearSound() {\n      initAudio();\n      const bufferSize = audioCtx.sampleRate * 0.5; \/\/ 0.5 detik\n      const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);\n      const data = buffer.getChannelData(0);\n      \n      \/\/ Bikin White Noise (suara desisan)\n      for (let i = 0; i < bufferSize; i++) {\n        data[i] = Math.random() * 2 - 1;\n      }\n      \n      const noise = audioCtx.createBufferSource();\n      noise.buffer = buffer;\n      \n      \/\/ Bikin filter biar kedengeran kaya kertas sobek (frekuensi mledak turun)\n      const filter = audioCtx.createBiquadFilter();\n      filter.type = 'bandpass';\n      filter.frequency.setValueAtTime(3000, audioCtx.currentTime);\n      filter.frequency.exponentialRampToValueAtTime(500, audioCtx.currentTime + 0.5);\n      filter.Q.value = 1;\n      \n      const gain = audioCtx.createGain();\n      gain.gain.setValueAtTime(0, audioCtx.currentTime);\n      \n      \/\/ Modulasi volume biar bunyinya \"srekekeek\" (putus-putus)\n      let t = audioCtx.currentTime;\n      for(let i = 0; i < 5; i++) {\n        gain.gain.linearRampToValueAtTime(0.6, t + 0.02);\n        gain.gain.linearRampToValueAtTime(0.1, t + 0.06);\n        t += 0.07 + Math.random() * 0.04;\n      }\n      gain.gain.linearRampToValueAtTime(0, t);\n      \n      noise.connect(filter);\n      filter.connect(gain);\n      gain.connect(audioCtx.destination);\n      \n      noise.start();\n      noise.stop(t);\n    }\n\n    \/\/ 4. Logika Sobek Kertas\n    const inputPaper = document.getElementById('inputPaper');\n    const tearTop = document.getElementById('tearTop');\n    const tearBottom = document.getElementById('tearBottom');\n    const textTop = document.getElementById('textTop');\n    const textBottom = document.getElementById('textBottom');\n    const complaintInput = document.getElementById('complaintInput');\n    const replyPaper = document.getElementById('replyPaper');\n    const tearBtn = document.getElementById('tearBtn');\n\n    tearBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      \n      \/\/ Ambil teks, kalau kosong kasih default\n      const text = complaintInput.value.trim() || \"(Kertas kosong)\";\n      \n      \/\/ Masukin teks yang sama ke 2 lapisan sobekan\n      textTop.innerText = text;\n      textBottom.innerText = text;\n      \n      \/\/ Sembunyiin kertas input asli\n      inputPaper.classList.add('hide');\n      \n      \/\/ Munculin lapisan sobekan\n      tearTop.classList.add('show');\n      tearBottom.classList.add('show');\n      \n      \/\/ Putar suara sobek\n      playTearSound();\n      \n      \/\/ Trigger animasi sobek (tambahin class .rip)\n      setTimeout(() => {\n        tearTop.classList.add('rip');\n        tearBottom.classList.add('rip');\n      }, 50);\n      \n      \/\/ Setelah 0.5 detik, munculin balapan sarkas\n      setTimeout(() => {\n        replyPaper.innerText = replies[Math.floor(Math.random() * replies.length)];\n        replyPaper.classList.add('show');\n      }, 500);\n      \n      \/\/ Reset ke kondisi awal biar bisa ngeluh lagi\n      setTimeout(() => {\n        tearTop.classList.remove('show', 'rip');\n        tearBottom.classList.remove('show', 'rip');\n        inputPaper.classList.remove('hide');\n        complaintInput.value = '';\n        replyPaper.classList.remove('show');\n      }, 3500);\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>Selamat Datang di Catatan Gue \u2615 Buku Harian Gue \ud83d\udcd6 &#8220;Isinya cuma cerita acak, keluh kesah ngoding, sampai hal-hal gokil yang kepikiran pas lagi ngopi.&#8221; Baca Jurnal! \u270d\ufe0f MYJOURNAL \ud83d\udc46 Klik Gemboknya buat ngebuka! Lagi Tumis Nasib! Halaman Berikutnya \u2192 \ud83d\udd75\ufe0f Ada Rahasia Tersembunyi Tulisan di bawah ini kelihatannya biasa aja. Coba deh tahan dan [&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-536","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/536","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=536"}],"version-history":[{"count":52,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/536\/revisions"}],"predecessor-version":[{"id":1080,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/536\/revisions\/1080"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/media?parent=536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}