{"id":534,"date":"2026-08-14T02:23:36","date_gmt":"2026-08-14T02:23:36","guid":{"rendered":"https:\/\/lab.rwb.my.id\/hero\/?page_id=534"},"modified":"2026-08-15T13:06:18","modified_gmt":"2026-08-15T13:06:18","slug":"galeri","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/hero\/galeri\/","title":{"rendered":"Galeri"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"534\" class=\"elementor elementor-534\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8a1eed e-con-full e-flex e-con e-parent\" data-id=\"d8a1eed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7de6b82 elementor-widget elementor-widget-html\" data-id=\"7de6b82\" 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 Galeri *\/\n  .gallery-hero-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #faf9f6;\n    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);\n    background-size: 25px 25px;\n    padding: 80px 20px 60px 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  \/* Panggung Kertas *\/\n  .sticky-stage {\n    position: relative;\n    max-width: 500px;\n    margin: 0 auto;\n    display: inline-block;\n  }\n\n  \/* Teks Rahasia di belakang kertas *\/\n  .secret-back-text {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) rotate(-5deg);\n    font-size: 28px;\n    color: #d1d1d1;\n    opacity: 0;\n    transition: opacity 0.3s ease 0.2s;\n    pointer-events: none;\n    z-index: 0;\n    width: 100%;\n  }\n  .secret-back-text.show {\n    opacity: 1;\n  }\n\n  \/* Sticky Note Raksasa *\/\n  .sticky-note {\n    background-color: #ffde7d;\n    width: 100%;\n    padding: 40px 30px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);\n    position: relative;\n    z-index: 1;\n    transform: rotate(-2deg);\n    transition: transform 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5), opacity 0.5s ease;\n    border-radius: 2px;\n  }\n\n  \/* Selotip di pinggir atas kertas *\/\n  .tape-strip {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%) rotate(1deg);\n    width: 120px;\n    height: 35px;\n    background-color: rgba(255, 255, 255, 0.6);\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n    border-left: 1px dashed #ccc;\n    border-right: 1px dashed #ccc;\n  }\n\n  .sticky-note h1 {\n    font-size: 36px;\n    color: #333;\n    margin: 0 0 15px 0;\n    line-height: 1.2;\n  }\n  .sticky-note p {\n    font-size: 20px;\n    color: #555;\n    margin: 0 0 30px 0;\n  }\n\n  \/* Tombol Spidol *\/\n  .marker-btn {\n    background-color: #ff5252;\n    color: #fff;\n    border: 4px solid #333;\n    padding: 12px 30px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 24px;\n    border-radius: 15px 5px 15px 5px;\n    cursor: pointer;\n    box-shadow: 6px 6px 0px #333;\n    transition: all 0.15s ease;\n    display: inline-block;\n    -webkit-tap-highlight-color: transparent;\n    type: button; \n  }\n  .marker-btn:hover {\n    transform: translate(-2px, -2px);\n    box-shadow: 8px 8px 0px #333;\n  }\n  .marker-btn:active {\n    transform: translate(4px, 4px);\n    box-shadow: 2px 2px 0px #333;\n  }\n\n  \/* Anak panah coretan (Hidden di awal) *\/\n  .doodle-arrow-down {\n    margin-top: 40px;\n    width: 60px;\n    opacity: 0; \/* Sengaja dihidden *\/\n    transition: opacity 0.5s ease; \/* Animasi muncul pelan *\/\n    pointer-events: none;\n  }\n  .doodle-arrow-down.show {\n    opacity: 1; \/* Muncul pas diklik *\/\n  }\n  \n  \/* Pisahin animasi path biar bisa mulai dari atas *\/\n  .arrow-path {\n    animation: bounceArrow 1.5s ease-in-out infinite;\n  }\n  @keyframes bounceArrow {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(15px); }\n  }\n\n  \/* EFEK KERTAS TERBANG *\/\n  .sticky-note.flipped {\n    transform: rotate(-25deg) translateY(150%) scale(0.8);\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (max-width: 768px) {\n    .sticky-note { padding: 30px 20px; }\n    .sticky-note h1 { font-size: 28px; }\n    .sticky-note p { font-size: 18px; }\n  }\n<\/style>\n\n<div class=\"gallery-hero-section\">\n  \n  <!-- Panggung Kertas -->\n  <div class=\"sticky-stage fade-up\">\n    \n    <!-- Teks di belakang yang keliatan pas kertas dibuka -->\n    <div class=\"secret-back-text\" id=\"secretText\">Ye elah, dibilangin jangan dibuka! \ud83d\ude1c<\/div>\n\n    <!-- Sticky Note Depan -->\n    <div class=\"sticky-note\" id=\"stickyNote\">\n      <div class=\"tape-strip\"><\/div>\n      <h1>WEH! Kamu nyasar ke Galeri Gue nih! \ud83d\udc40<\/h1>\n      <p>Nih, gue kumpulin karya-karya aneh dan keren gue di sini. Tapi sebelum liat, siapin mental dulu ya, soalnya desainnya gak biasa. \ud83d\ude0e<\/p>\n      \n      <button type=\"button\" class=\"marker-btn\" id=\"revealGalleryBtn\">\n        Gas Buka Galeri! \ud83d\ude80\n      <\/button>\n    <\/div>\n\n  <\/div>\n\n  <!-- Anak Panah Ngajak Scroll (Muncul setelah klik) -->\n  <svg class=\"doodle-arrow-down\" id=\"doodleArrow\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path class=\"arrow-path\" d=\"M50 10 L50 80 M30 60 L50 85 L70 60\" fill=\"none\" stroke=\"#333\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n  <\/svg>\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    \/\/ 2. Logika Buka Kertas, Munculin Panah, & Auto Scroll\n    const stickyNote = document.getElementById('stickyNote');\n    const secretText = document.getElementById('secretText');\n    const revealBtn = document.getElementById('revealGalleryBtn');\n    const doodleArrow = document.getElementById('doodleArrow');\n\n    revealBtn.addEventListener('click', function(e) {\n      e.preventDefault(); \n\n      \/\/ Kertas melayang\n      stickyNote.classList.add('flipped');\n      \n      \/\/ Teks rahasia muncul\n      secretText.classList.add('show');\n\n      \/\/ Panah muncul fade-in\n      doodleArrow.classList.add('show');\n      \n      \/\/ Auto scroll halus ke grid polaroid\n      setTimeout(() => {\n        const targetGrid = document.getElementById('featuredGrid') || document.querySelector('.scrapbook-grid');\n        if (targetGrid) {\n          targetGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        }\n      }, 700);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4410793 e-con-full e-flex e-con e-parent\" data-id=\"4410793\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a17990d elementor-widget elementor-widget-html\" data-id=\"a17990d\" 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 Galeri *\/\n  .doodle-home-s1 {\n    font-family: 'Patrick Hand', cursive;\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  }\n\n  .doodle-home-s1-container {\n    max-width: 1200px;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n  }\n\n  \/* Judul Section *\/\n  .doodle-home-title {\n    font-size: 40px;\n    color: #333;\n    margin-bottom: 60px;\n    display: inline-block;\n    position: relative;\n  }\n\n  .doodle-home-title::after {\n    content: '';\n    position: absolute;\n    bottom: -10px;\n    left: 0;\n    width: 100%;\n    height: 15px;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='15' viewBox='0 0 200 15'%3E%3Cpath d='M0 10 Q 25 2 50 10 T 100 10 T 150 10 T 200 10' stroke='%23ff5252' stroke-width='3' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: 100% 100%;\n  }\n\n  \/* Scrapbook Layout Default (Desktop) *\/\n  .scrapbook-grid {\n    display: flex;\n    justify-content: center;\n    gap: 40px;\n    flex-wrap: wrap;\n    perspective: 1000px;\n    min-height: 450px;\n    align-items: center;\n  }\n\n  \/* Kartu Polaroid *\/\n  .polaroid-card {\n    background-color: #fff;\n    padding: 15px 15px 50px 15px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);\n    position: relative;\n    width: 300px;\n    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, opacity 0.3s ease;\n    cursor: pointer;\n    display: none;\n  }\n\n  \/* Rotasi scrapbook *\/\n  .polaroid-card:nth-child(3n+1) { transform: rotate(-5deg) translateY(20px); }\n  .polaroid-card:nth-child(3n+2) { transform: rotate(4deg) translateY(-10px); z-index: 2; }\n  .polaroid-card:nth-child(3n+3) { transform: rotate(-3deg) translateY(15px); }\n\n  .polaroid-card:hover {\n    transform: rotate(0deg) translateY(-15px) scale(1.05) !important;\n    z-index: 10;\n    box-shadow: 8px 8px 25px rgba(0,0,0,0.2);\n  }\n\n  .polaroid-card img {\n    width: 100%;\n    height: 280px;\n    object-fit: cover;\n    display: block;\n    filter: contrast(1.1) saturate(0.9);\n    background-color: #f0f0f0;\n  }\n\n  .polaroid-caption {\n    font-size: 22px;\n    color: #444;\n    margin-top: 15px;\n    text-align: center;\n  }\n\n  .thumbtack {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 25px;\n    height: 25px;\n    z-index: 5;\n  }\n\n  \/* Hiasan Coretan *\/\n  .scrapbook-doodle {\n    position: absolute;\n    width: 80px;\n    opacity: 0.8;\n    z-index: 20;\n    pointer-events: none;\n  }\n  .doodle-arrow-1 { top: 5%; left: 5%; transform: rotate(-15deg); }\n  .doodle-star-1 { bottom: 10%; right: 5%; transform: rotate(10deg); }\n\n  \/* PAGINATION CONTROLS *\/\n  .pagination-controls {\n    margin-top: 60px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 15px;\n    flex-wrap: wrap;\n  }\n\n  .page-btn {\n    background-color: #fff;\n    color: #333;\n    border: 3px solid #333;\n    padding: 8px 15px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 20px;\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  }\n\n  .page-btn:hover:not(:disabled) {\n    background-color: #ffde7d;\n    transform: translate(-2px, -2px);\n    box-shadow: 5px 5px 0px #ff5252;\n  }\n\n  .page-btn.active {\n    background-color: #ff5252;\n    color: #fff;\n    border-color: #333;\n  }\n\n  .page-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  .page-numbers {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n  }\n\n  .dots {\n    color: #333;\n    font-size: 20px;\n    padding: 0 5px;\n  }\n\n  \/* LIGHTBOX *\/\n  .lightbox-overlay {\n    display: none !important;\n    position: fixed !important;\n    inset: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n    background: rgba(0,0,0,0.95) !important;\n    z-index: 99999 !important; \n    flex-direction: column !important;\n    justify-content: center !important; \n    align-items: center !important;     \n    padding: 20px !important;\n    box-sizing: border-box !important;\n    overflow-y: auto !important;\n  }\n\n  .lightbox-overlay.active {\n    display: flex !important;\n  }\n\n  .lightbox-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: auto; \n    max-width: 100%;\n    position: relative;\n    z-index: 100000;\n  }\n\n  .lightbox-overlay img {\n    max-width: 90%;\n    max-height: 80vh;\n    object-fit: contain;\n    border: 10px solid #fff;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n    display: block;\n  }\n\n  .lightbox-caption {\n    color: #fff;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 24px;\n    margin-top: 20px;\n    text-align: center;\n  }\n\n  .close-lightbox-btn {\n    position: fixed;\n    top: 30px;\n    right: 40px;\n    font-size: 50px;\n    color: #fff;\n    cursor: pointer;\n    background: #ff5252;\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 3px solid #fff;\n    z-index: 100001 !important; \n    line-height: 0;\n    padding-bottom: 5px;\n  }\n\n  .lightbox-nav {\n    position: fixed;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 40px;\n    color: #fff;\n    cursor: pointer;\n    background: #ff5252;\n    width: 50px;\n    height: 60px;\n    border-radius: 15px 30px 15px 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 3px solid #fff;\n    z-index: 100001 !important; \n    user-select: none;\n    transition: all 0.2s ease;\n  }\n\n  .lightbox-nav:hover {\n    background: #ffde7d;\n    color: #333;\n    transform: translateY(-50%) scale(1.1);\n  }\n\n  .prev-btn { left: 30px; }\n  .next-btn { right: 30px; }\n\n  \/* ANIMASI INTERSECTION OBSERVER *\/\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  \/* RESPONSIVE HP *\/\n  @media (max-width: 768px) {\n    .doodle-home-title {\n      font-size: 32px;\n      margin-bottom: 60px;\n    }\n\n    .doodle-arrow-1 {\n      top: 50px;\n      left: 15px;\n      width: 80px;\n      transform: rotate(-15deg);\n      z-index: 30;\n    }\n\n    .doodle-star-1 {\n      top: auto;\n      bottom: 20%;\n      right: 5%;\n      left: auto;\n      width: 80px;\n      transform: rotate(10deg);\n      z-index: 30;\n    }\n\n    .doodle-home-s1 .scrapbook-grid {\n      justify-content: flex-start;\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      gap: 20px;\n      padding: 20px 15px 40px 15px;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n    }\n    .doodle-home-s1 .scrapbook-grid::-webkit-scrollbar { display: none; }\n\n    .doodle-home-s1 .scrapbook-grid .polaroid-card {\n      flex: 0 0 80%;\n      max-width: 300px;\n      scroll-snap-align: center;\n      transform: rotate(0deg) translateY(0);\n    }\n\n    .doodle-home-s1 .scrapbook-grid .polaroid-card:hover {\n      transform: translateY(-5px);\n    }\n\n    .polaroid-card img { height: 220px; }\n\n    .close-lightbox-btn {\n      top: 20px;\n      right: 20px;\n    }\n    \n    .lightbox-nav {\n      width: 40px;\n      height: 50px;\n      font-size: 30px;\n    }\n    .prev-btn { left: 15px; }\n    .next-btn { right: 15px; }\n  }\n<\/style>\n\n<div class=\"doodle-home-s1\">\n  <div class=\"doodle-home-s1-container\">\n\n    <h2 class=\"doodle-home-title fade-up\">\ud83d\udcf8 Karya & Coretan Terbaru<\/h2>\n\n    <svg class=\"scrapbook-doodle doodle-arrow-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n      <path d=\"M10 50 Q 50 10 80 50 L70 40 M80 50 L70 60\" fill=\"none\" stroke=\"#333\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n      <text x=\"15\" y=\"80\" font-family=\"Patrick Hand\" font-size=\"18\" fill=\"#333\">Klik cuy!<\/text>\n    <\/svg>\n\n    <svg class=\"scrapbook-doodle doodle-star-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n      <path d=\"M50 0 L60 40 L100 50 L60 60 L50 100 L40 60 L0 50 L40 40 Z\" fill=\"none\" stroke=\"#ff5252\" stroke-width=\"3\" stroke-dasharray=\"6,4\"\/>\n    <\/svg>\n\n    <!-- Grid Polaroid -->\n    <div class=\"scrapbook-grid fade-up\" id=\"featuredGrid\">\n      <!-- Karya 1 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ff5252\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Nikola-Tesla.jpeg\" alt=\"Karya 1\">\n        <figcaption class=\"polaroid-caption\">Desain Logo Kafe<\/figcaption>\n      <\/figure>\n\n      <!-- Karya 2 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#4caf50\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/LOGO-RWB-DOODLE.jpeg\" alt=\"Karya 2\">\n        <figcaption class=\"polaroid-caption\">Web Portofolio<\/figcaption>\n      <\/figure>\n\n      <!-- Karya 3 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Hallan.jpg\" alt=\"Karya 3\">\n        <figcaption class=\"polaroid-caption\">Branding Merch<\/figcaption>\n      <\/figure>\n\n      <!-- Karya 4 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ff5252\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/LOGO-RWB-DOODLE.jpeg\" alt=\"Karya 4\">\n        <figcaption class=\"polaroid-caption\">Poster Acara<\/figcaption>\n      <\/figure>\n\n      <!-- Karya 5 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#4caf50\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/cute-robot-50kb.jpg\" alt=\"Karya 5\">\n        <figcaption class=\"polaroid-caption\">Ilustrasi Karakter<\/figcaption>\n      <\/figure>\n\n      <!-- Karya 6 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/CSTomPape.jpeg\" alt=\"Karya 6\">\n        <figcaption class=\"polaroid-caption\">UI\/UX Mobile App<\/figcaption>\n      <\/figure>\n\n       <!-- Karya 7 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Cute-Robot-SMA.jpeg\" alt=\"Karya 7\">\n        <figcaption class=\"polaroid-caption\">SaaS App<\/figcaption>\n      <\/figure>\n\n        <!-- Karya 8 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Maskot-Mika-1.jpg\" alt=\"Karya 8\">\n        <figcaption class=\"polaroid-caption\">Laravel<\/figcaption>\n      <\/figure>\n\n       <!-- Karya 9 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Rudi-Dev-e1782738803664.jpeg\" alt=\"Karya 9\">\n        <figcaption class=\"polaroid-caption\">WebFlow<\/figcaption>\n      <\/figure>\n\n      <!-- Karya 10 -->\n      <figure class=\"polaroid-card\">\n        <svg class=\"thumbtack\" viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n          <path d=\"M25 2 C 12 2 5 12 25 25 C 45 12 38 2 25 2 Z\" fill=\"#ffde7d\" stroke=\"#333\" stroke-width=\"2\"\/>\n          <path d=\"M25 25 L 25 45\" stroke=\"#888\" stroke-width=\"2\"\/>\n        <\/svg>\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Sleep-Robot.jpeg\" alt=\"Karya 10\">\n        <figcaption class=\"polaroid-caption\">Node JS<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <!-- Pagination Controls -->\n    <div class=\"pagination-controls fade-up\" id=\"paginationControls\">\n      <button class=\"page-btn\" id=\"prevBtn\">\u2190 Sebelumnya<\/button>\n      <div class=\"page-numbers\" id=\"pageNumbers\"><\/div>\n      <button class=\"page-btn\" id=\"nextBtn\">Berikutnya \u2192<\/button>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- LIGHTBOX -->\n<div class=\"lightbox-overlay\" id=\"lightbox\">\n  <!-- HAPUS ONCLICK, GANTI PAKAI ID -->\n  <span class=\"close-lightbox-btn\" id=\"closeBtn\">\u00d7<\/span>\n  \n  <!-- HAPUS ONCLICK, GANTI PAKAI ID -->\n  <span class=\"lightbox-nav prev-btn\" id=\"prevArrow\">\u2039<\/span>\n  <span class=\"lightbox-nav next-btn\" id=\"nextArrow\">\u203a<\/span>\n\n  <div class=\"lightbox-content\">\n    <img decoding=\"async\" src=\"\" id=\"lightboxImg\" alt=\"Full Screen Image\">\n    <div class=\"lightbox-caption\" id=\"lightboxCaption\"><\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \n    \/\/ 1. PAGINATION LOGIC\n    const itemsPerPage = 3;\n    let currentPage = 1;\n    const polaroidCards = document.querySelectorAll('#featuredGrid .polaroid-card');\n    const totalPages = Math.ceil(polaroidCards.length \/ itemsPerPage);\n    let currentImageIndex = 0;\n\n    function renderPage(page) {\n      currentPage = page;\n      const startIndex = (page - 1) * itemsPerPage;\n      const endIndex = startIndex + itemsPerPage;\n\n      polaroidCards.forEach((card, index) => {\n        if (index >= startIndex && index < endIndex) {\n          card.style.display = 'block';\n        } else {\n          card.style.display = 'none';\n        }\n      });\n\n      updatePaginationUI();\n    }\n\n    function updatePaginationUI() {\n      const pageNumbersDiv = document.getElementById('pageNumbers');\n      if (!pageNumbersDiv) return; \n      pageNumbersDiv.innerHTML = '';\n\n      let pagesToShow = [];\n\n      if (totalPages <= 3) {\n        for (let i = 1; i <= totalPages; i++) pagesToShow.push(i);\n      } else {\n        if (currentPage <= 2) {\n          pagesToShow = [1, 2, 3, '...'];\n        } else if (currentPage >= totalPages - 1) {\n          pagesToShow = ['...', totalPages - 2, totalPages - 1, totalPages];\n        } else {\n          pagesToShow = ['...', currentPage - 1, currentPage, currentPage + 1, '...'];\n        }\n      }\n\n      pagesToShow.forEach(page => {\n        if (page === '...') {\n          const span = document.createElement('span');\n          span.innerText = '...';\n          span.classList.add('dots');\n          pageNumbersDiv.appendChild(span);\n        } else {\n          const btn = document.createElement('button');\n          btn.innerText = page;\n          btn.classList.add('page-btn');\n          if (page === currentPage) btn.classList.add('active');\n\n          btn.addEventListener('click', () => {\n            renderPage(page);\n            document.getElementById('featuredGrid').scrollIntoView({ behavior: 'smooth', block: 'center' });\n          });\n\n          pageNumbersDiv.appendChild(btn);\n        }\n      });\n\n      document.getElementById('prevBtn').disabled = currentPage === 1;\n      document.getElementById('nextBtn').disabled = currentPage === totalPages;\n    }\n\n    document.getElementById('prevBtn').addEventListener('click', () => {\n      if (currentPage > 1) {\n        renderPage(currentPage - 1);\n        document.getElementById('featuredGrid').scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n    });\n\n    document.getElementById('nextBtn').addEventListener('click', () => {\n      if (currentPage < totalPages) {\n        renderPage(currentPage + 1);\n        document.getElementById('featuredGrid').scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n    });\n\n    renderPage(1);\n\n    \/\/ 2. LIGHTBOX LOGIC WITH NAVIGATION\n    function openLightbox(element) {\n      polaroidCards.forEach((card, index) => {\n        if (card === element) {\n          currentImageIndex = index;\n        }\n      });\n      \n      updateLightboxContent();\n      \n      document.getElementById(\"lightbox\").classList.add(\"active\");\n      document.body.style.overflow = \"hidden\";\n    }\n\n    function updateLightboxContent() {\n      const card = polaroidCards[currentImageIndex];\n      const imgSrc = card.querySelector(\"img\").src;\n      const imgAlt = card.querySelector(\"img\").alt;\n      const caption = card.querySelector(\".polaroid-caption\").innerText;\n\n      document.getElementById(\"lightboxImg\").src = imgSrc;\n      document.getElementById(\"lightboxImg\").alt = imgAlt;\n      document.getElementById(\"lightboxCaption\").innerText = caption;\n    }\n\n    function changeImage(direction) {\n      currentImageIndex += direction;\n      \n      if (currentImageIndex >= polaroidCards.length) {\n        currentImageIndex = 0;\n      } \n      else if (currentImageIndex < 0) {\n        currentImageIndex = polaroidCards.length - 1;\n      }\n      \n      updateLightboxContent();\n    }\n\n    function closeLightbox() {\n      document.getElementById(\"lightbox\").classList.remove(\"active\");\n      document.body.style.overflow = \"auto\";\n    }\n\n    \/\/ PANGGIL FUNGSI LEWAT EVENT LISTENER (Biar nggak mati di Elementor)\n    document.getElementById(\"featuredGrid\").addEventListener(\"click\", function(e) {\n      const card = e.target.closest('.polaroid-card');\n      if (card) {\n        openLightbox(card);\n      }\n    });\n\n    document.getElementById('closeBtn').addEventListener('click', closeLightbox);\n    document.getElementById('prevArrow').addEventListener('click', () => changeImage(-1));\n    document.getElementById('nextArrow').addEventListener('click', () => changeImage(1));\n\n    document.getElementById(\"lightbox\").addEventListener(\"click\", function(e) {\n      if (e.target === this) closeLightbox();\n    });\n\n    document.addEventListener(\"keydown\", function(e) {\n      if (document.getElementById(\"lightbox\").classList.contains(\"active\")) {\n        if (e.key === \"Escape\") {\n          closeLightbox();\n        } \n        else if (e.key === \"ArrowRight\") {\n          changeImage(1);\n        } \n        else if (e.key === \"ArrowLeft\") {\n          changeImage(-1);\n        }\n      }\n    });\n\n    \/\/ 3. ANIMASI INTERSECTION OBSERVER\n    const fadeElements = document.querySelectorAll('.fade-up');\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.15 });\n\n    fadeElements.forEach(el => observer.observe(el));\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb35b21 e-con-full e-flex e-con e-parent\" data-id=\"cb35b21\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9b8877 elementor-widget elementor-widget-html\" data-id=\"c9b8877\" 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 Kamera *\/\n  .camera-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #faf9f6;\n    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);\n    background-size: 25px 25px;\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  .camera-title {\n    font-size: 36px;\n    color: #333;\n    margin-bottom: 50px;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n  .camera-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  \/* Panggung Kamera *\/\n  .camera-stage {\n    position: relative;\n    width: 300px;\n    margin: 0 auto;\n    z-index: 2;\n  }\n\n  \/* Flash Effect *\/\n  .flash-overlay {\n    position: fixed;\n    inset: 0;\n    background: #fff;\n    opacity: 0;\n    pointer-events: none;\n    z-index: 9999;\n    transition: opacity 0.1s ease;\n  }\n  .flash-overlay.flashing {\n    opacity: 0.8;\n  }\n\n  \/* Badan Kamera *\/\n  .camera-body {\n    background-color: #333;\n    width: 100%;\n    height: 200px;\n    border-radius: 20px;\n    border: 4px solid #111;\n    box-shadow: 8px 8px 0px #bde0ff, 12px 12px 20px rgba(0,0,0,0.2);\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding-top: 20px;\n    margin-bottom: 10px;\n  }\n\n  \/* Flash Kamera (Lampu) *\/\n  .camera-flash-bulb {\n    width: 30px;\n    height: 12px;\n    background: #ffde7d;\n    border-radius: 10px;\n    border: 2px solid #111;\n    position: absolute;\n    top: 15px;\n    left: 20px;\n  }\n\n  \/* Logo Kamera *\/\n  .camera-logo {\n    position: absolute;\n    top: 15px;\n    right: 20px;\n    color: #fff;\n    font-size: 14px;\n    letter-spacing: 1px;\n  }\n\n  \/* Lensa Kamera *\/\n  .camera-lens {\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    background: radial-gradient(circle, #111 30%, #444 30%, #444 60%, #222 60%);\n    border: 4px solid #111;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n  }\n  .camera-lens::after {\n    content: '';\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    background: rgba(255,255,255,0.8);\n    border-radius: 50%;\n    top: 20px;\n    left: 25px;\n    filter: blur(2px);\n  }\n\n  \/* Tombol Rana (Shutter) *\/\n  .shutter-btn {\n    position: absolute;\n    top: -15px;\n    right: -15px;\n    width: 50px;\n    height: 50px;\n    background: #ff5252;\n    border: 4px solid #111;\n    border-radius: 50%;\n    cursor: pointer;\n    z-index: 3;\n    box-shadow: 3px 3px 0px #111;\n    transition: all 0.1s ease;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .shutter-btn:active {\n    transform: translate(3px, 3px);\n    box-shadow: 0px 0px 0px #111;\n  }\n\n  \/* Slot Foto (Bawah Kamera) *\/\n  .photo-slot {\n    position: relative;\n    width: 260px;\n    height: 0; \/* Awalnya 0 *\/\n    margin: -10px auto 0 auto;\n    transition: height 0.5s ease, margin-top 0.5s ease;\n    z-index: 1;\n  }\n  \n  \/* Kertas Foto Hasil *\/\n  .polaroid-result {\n    background: #fff;\n    padding: 10px 10px 40px 10px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);\n    width: 100%;\n    height: 300px;\n    box-sizing: border-box;\n    opacity: 0;\n    transform: translateY(-100%);\n    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .photo-slot.ejected .polaroid-result {\n    opacity: 1;\n    transform: translateY(20px); \/* Meluncur turun *\/\n    height: 300px;\n  }\n  .photo-slot.ejected {\n    height: 320px;\n    margin-top: 20px;\n  }\n\n  .polaroid-result img {\n    width: 100%;\n    flex-grow: 1;\n    object-fit: cover;\n    background: #f0f0f0;\n    filter: contrast(1.1) saturate(0.9);\n  }\n  .polaroid-result .caption {\n    font-size: 20px;\n    color: #444;\n    margin-top: 10px;\n    text-align: center;\n  }\n\n  \/* Teks Instruksi *\/\n  .camera-instruction {\n    font-size: 20px;\n    color: #555;\n    margin-top: 40px;\n    background: #fff;\n    padding: 10px 20px;\n    border: 3px dashed #333;\n    border-radius: 15px;\n    display: inline-block;\n    z-index: 2;\n    position: relative;\n  }\n\n  @media (max-width: 768px) {\n    .camera-title { font-size: 28px; }\n    .camera-stage { width: 260px; }\n    .camera-body { height: 180px; }\n    .camera-lens { width: 90px; height: 90px; }\n    .photo-slot { width: 220px; }\n  }\n<\/style>\n\n<div class=\"camera-section\">\n  <h2 class=\"camera-title fade-up\">\ud83d\udcf8 Jepret Karya Tersembunyi<\/h2>\n  \n  <!-- Flash Overlay -->\n  <div class=\"flash-overlay\" id=\"flashOverlay\"><\/div>\n\n  <div class=\"camera-stage fade-up\">\n    <!-- Tombol Rana -->\n    <button type=\"button\" class=\"shutter-btn\" id=\"shutterBtn\" aria-label=\"Jepret Foto\"><\/button>\n\n    <!-- Badan Kamera -->\n    <div class=\"camera-body\">\n      <div class=\"camera-flash-bulb\"><\/div>\n      <div class=\"camera-logo\">RWB-DOODLE<\/div>\n      <div class=\"camera-lens\"><\/div>\n    <\/div>\n\n    <!-- Slot Foto Keluar -->\n    <div class=\"photo-slot\" id=\"photoSlot\">\n      <div class=\"polaroid-result\">\n        <img decoding=\"async\" src=\"\" id=\"hiddenImg\" alt=\"Foto Hasil Jepret\">\n        <div class=\"caption\" id=\"hiddenCaption\">Karya Spesial<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"camera-instruction fade-up\">\n    Pencet tombol merah di pojok kanan kamera \ud83d\udc46\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 Foto Tersembunyi (Bisa kamu tambahin lagi)\n    const hiddenWorks = [\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/gue-rock-and-roll-55kb.jpg\", cap: \"Behind The Scenes\" },\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/SMlibrar.jpeg\", cap: \"Nikola Tesla\" },\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Rudi-Dev-e1782738803664.jpeg\", cap: \"Sang Mastermind\" }\n    ];\n\n    \/\/ 3. Web Audio API buat Suara \"Ca-chak!\"\n    let audioCtx = null;\n    function playShutterSound() {\n      if (!audioCtx) {\n        audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n      }\n      const now = audioCtx.currentTime;\n\n      \/\/ Bunyi klik pertama (ransan)\n      const osc1 = audioCtx.createOscillator();\n      const gain1 = audioCtx.createGain();\n      osc1.connect(gain1);\n      gain1.connect(audioCtx.destination);\n      osc1.type = 'square';\n      osc1.frequency.setValueAtTime(800, now);\n      gain1.gain.setValueAtTime(0.3, now);\n      gain1.gain.exponentialRampToValueAtTime(0.01, now + 0.05);\n      osc1.start(now);\n      osc1.stop(now + 0.05);\n\n      \/\/ Bunyi mekanisme berputar (durasi pendek)\n      const osc2 = audioCtx.createOscillator();\n      const gain2 = audioCtx.createGain();\n      osc2.connect(gain2);\n      gain2.connect(audioCtx.destination);\n      osc2.type = 'sawtooth';\n      osc2.frequency.setValueAtTime(150, now + 0.05);\n      gain2.gain.setValueAtTime(0.2, now + 0.05);\n      gain2.gain.exponentialRampToValueAtTime(0.01, now + 0.15);\n      osc2.start(now + 0.05);\n      osc2.stop(now + 0.15);\n    }\n\n    \/\/ 4. Logika Jepret Foto\n    const shutterBtn = document.getElementById('shutterBtn');\n    const flashOverlay = document.getElementById('flashOverlay');\n    const photoSlot = document.getElementById('photoSlot');\n    const hiddenImg = document.getElementById('hiddenImg');\n    const hiddenCaption = document.getElementById('hiddenCaption');\n\n    shutterBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n\n      \/\/ Cegah klik terlalu cepat\n      shutterBtn.style.pointerEvents = 'none';\n      setTimeout(() => { shutterBtn.style.pointerEvents = 'auto'; }, 1500);\n\n      \/\/ 1. Mainkan Flash\n      flashOverlay.classList.add('flashing');\n      setTimeout(() => flashOverlay.classList.remove('flashing'), 100);\n\n      \/\/ 2. Mainkan Suara\n      playShutterSound();\n\n      \/\/ 3. Sembunyikan foto lama (jika ada)\n      photoSlot.classList.remove('ejected');\n\n      \/\/ 4. Setelah 0.6 detik, masukin foto baru & munculin\n      setTimeout(() => {\n        \/\/ Ambil foto acak\n        const randomWork = hiddenWorks[Math.floor(Math.random() * hiddenWorks.length)];\n        hiddenImg.src = randomWork.img;\n        hiddenCaption.innerText = randomWork.cap;\n\n        \/\/ Eject foto keluar\n        photoSlot.classList.add('ejected');\n      }, 600);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-620eb0c e-con-full e-flex e-con e-parent\" data-id=\"620eb0c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8dc6e2 elementor-widget elementor-widget-html\" data-id=\"d8dc6e2\" 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 Gacha *\/\n  .gacha-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #faf9f6;\n    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);\n    background-size: 25px 25px;\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  .gacha-title {\n    font-size: 36px;\n    color: #333;\n    margin-bottom: 50px;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n  .gacha-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  \/* Panggung Mesin Gacha *\/\n  .gacha-stage {\n    position: relative;\n    width: 280px;\n    margin: 0 auto;\n    z-index: 2;\n  }\n\n  \/* Badan Mesin *\/\n  .gacha-machine {\n    background-color: #ffde7d;\n    width: 100%;\n    height: 350px;\n    border: 5px solid #333;\n    border-radius: 20px;\n    box-shadow: 8px 8px 0px #bde0ff, 12px 12px 20px rgba(0,0,0,0.2);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding-top: 20px;\n    transition: transform 0.1s ease;\n  }\n\n  \/* Kaca Bulat *\/\n  .glass-dome {\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.4);\n    border: 4px solid #333;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .glass-dome::after {\n    content: '';\n    position: absolute;\n    top: 15px;\n    left: 20px;\n    width: 50px;\n    height: 30px;\n    background: rgba(255,255,255,0.8);\n    transform: rotate(-30deg);\n    border-radius: 50%;\n  }\n\n  \/* Bola-bola di dalam kaca *\/\n  .inner-ball {\n    position: absolute;\n    width: 35px;\n    height: 35px;\n    border-radius: 50%;\n    border: 3px solid #333;\n    animation: floatBall 3s ease-in-out infinite;\n  }\n  .inner-ball.b1 { background: #ff5252; top: 20%; left: 20%; animation-delay: 0s; }\n  .inner-ball.b2 { background: #4caf50; top: 60%; left: 60%; animation-delay: 0.5s; }\n  .inner-ball.b3 { background: #bde0ff; top: 40%; left: 75%; animation-delay: 1s; }\n  .inner-ball.b4 { background: #ffadad; top: 70%; left: 30%; animation-delay: 1.5s; }\n\n  @keyframes floatBall {\n    0%, 100% { transform: translate(0, 0); }\n    25% { transform: translate(5px, -5px); }\n    50% { transform: translate(-5px, 5px); }\n    75% { transform: translate(-5px, -5px); }\n  }\n\n  \/* Efek Goyang *\/\n  .gacha-machine.shaking {\n    animation: machineShake 0.1s linear infinite;\n  }\n  @keyframes machineShake {\n    0% { transform: translate(2px, 1px) rotate(0deg); }\n    25% { transform: translate(-2px, -1px) rotate(0.5deg); }\n    50% { transform: translate(1px, 2px) rotate(0deg); }\n    75% { transform: translate(-1px, -2px) rotate(-0.5deg); }\n    100% { transform: translate(2px, -1px) rotate(0deg); }\n  }\n\n  \/* Tombol Putar *\/\n  .spin-btn {\n    width: 60px;\n    height: 60px;\n    background: #ff5252;\n    border: 4px solid #333;\n    border-radius: 50%;\n    cursor: pointer;\n    margin-top: 20px;\n    box-shadow: 4px 4px 0px #333;\n    transition: all 0.1s ease;\n    z-index: 3;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .spin-btn:active {\n    transform: translate(3px, 3px);\n    box-shadow: 1px 1px 0px #333;\n  }\n\n  .drop-slot {\n    position: absolute;\n    bottom: 15px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 80px;\n    height: 25px;\n    background: #333;\n    border-radius: 0 0 15px 15px;\n    z-index: 2;\n  }\n\n  \/* KAPSUL *\/\n  .capsule-container {\n    position: absolute;\n    bottom: -80px;\n    left: 50%;\n    transform: translateX(-50%) scale(0);\n    opacity: 0;\n    width: 70px;\n    height: 90px;\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    z-index: 4;\n  }\n  .capsule-container.dropped {\n    bottom: -40px;\n    transform: translateX(-50%) scale(1);\n    opacity: 1;\n  }\n  \n  .capsule-top, .capsule-bottom {\n    width: 70px;\n    height: 45px;\n    position: absolute;\n    left: 0;\n    border: 4px solid #333;\n  }\n  .capsule-top {\n    background: #ff5252;\n    top: 0;\n    border-radius: 35px 35px 5px 5px;\n    z-index: 2;\n  }\n  .capsule-bottom {\n    background: #fff;\n    bottom: 0;\n    border-radius: 5px 5px 35px 35px;\n    border-top: none;\n    z-index: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 30px;\n    color: #333;\n  }\n\n  .capsule-container.opened .capsule-top {\n    transform: translateY(-150%) rotate(45deg);\n    opacity: 0;\n    transition: all 0.4s ease;\n  }\n  .capsule-container.opened .capsule-bottom {\n    transform: translateY(150%) rotate(-45deg);\n    opacity: 0;\n    transition: all 0.4s ease;\n  }\n\n  \/* HADIAH *\/\n  .gacha-reward {\n    position: absolute;\n    bottom: -60px;\n    left: 50%;\n    transform: translateX(-50%) scale(0);\n    width: 180px; \/* Diperlebar dikit *\/\n    background: #fff;\n    padding: 10px 10px 15px 10px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);\n    border: 3px solid #333;\n    opacity: 0;\n    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    z-index: 5;\n    pointer-events: none; \/* Default none *\/\n  }\n  .gacha-reward.revealed {\n    transform: translateX(-50%) scale(1) rotate(-3deg);\n    opacity: 1;\n    bottom: -40px;\n    pointer-events: auto; \/* BIAR BISA DIKLIK TOMBOLNYA *\/\n  }\n  .gacha-reward img {\n    width: 100%;\n    height: 140px;\n    object-fit: cover;\n    display: block;\n    filter: contrast(1.1) saturate(0.9);\n  }\n  .gacha-reward .reward-caption {\n    font-size: 16px;\n    color: #444;\n    margin-top: 8px;\n    text-align: center;\n  }\n\n  \/* Tombol Putar Lagi di dalam Hadiah *\/\n  .replay-btn {\n    margin-top: 10px;\n    background: #ff5252;\n    color: #fff;\n    border: 2px solid #333;\n    padding: 5px 10px;\n    font-family: 'Patrick Hand', cursive;\n    font-size: 16px;\n    border-radius: 10px 5px 10px 5px;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #333;\n    transition: all 0.1s ease;\n    -webkit-tap-highlight-color: transparent;\n    width: 100%;\n  }\n  .replay-btn:active {\n    transform: translate(2px, 2px);\n    box-shadow: 0px 0px 0px #333;\n  }\n\n  .gacha-instruction {\n    font-size: 20px;\n    color: #555;\n    margin-top: 120px;\n    background: #fff;\n    padding: 10px 20px;\n    border: 3px dashed #333;\n    border-radius: 15px;\n    display: inline-block;\n    z-index: 2;\n    position: relative;\n  }\n\n  @media (max-width: 768px) {\n    .gacha-title { font-size: 28px; }\n    .gacha-machine { height: 320px; }\n    .glass-dome { width: 180px; height: 180px; }\n  }\n<\/style>\n\n<div class=\"gacha-section\">\n  <h2 class=\"gacha-title fade-up\">\ud83c\udfb0 Mesin Gacha Spesial<\/h2>\n  \n  <div class=\"gacha-stage fade-up\">\n    <!-- Badan Mesin -->\n    <div class=\"gacha-machine\" id=\"gachaMachine\">\n      <div class=\"glass-dome\">\n        <div class=\"inner-ball b1\"><\/div>\n        <div class=\"inner-ball b2\"><\/div>\n        <div class=\"inner-ball b3\"><\/div>\n        <div class=\"inner-ball b4\"><\/div>\n      <\/div>\n      \n      <button type=\"button\" class=\"spin-btn\" id=\"spinBtn\" aria-label=\"Putar Mesin\"><\/button>\n      <div class=\"drop-slot\"><\/div>\n    <\/div>\n\n    <!-- Kapsul -->\n    <div class=\"capsule-container\" id=\"capsule\">\n      <div class=\"capsule-top\"><\/div>\n      <div class=\"capsule-bottom\">?<\/div>\n    <\/div>\n\n    <!-- Hadiah -->\n    <div class=\"gacha-reward\" id=\"gachaReward\">\n      <img decoding=\"async\" src=\"\" id=\"rewardImg\" alt=\"Reward Gacha\">\n      <div class=\"reward-caption\" id=\"rewardCap\">Selamat!<\/div>\n      <!-- TOMPOL PUTAR LAGI -->\n      <button type=\"button\" class=\"replay-btn\" id=\"replayBtn\">\ud83d\udd04 Putar Lagi!<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"gacha-instruction fade-up\">\n    \ud83d\udc46 Pencet tombol merah, terus klik bola kapsulnya!\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 Karya (Sudah diperbaiki)\n    const hiddenRewards = [\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Nikola-Tesla.jpeg\", cap: \"Easter Egg: Bos Besar\" },\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/LOGO-RWB-DOODLE.jpeg\", cap: \"Logo Eksklusif\" },\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/Rudi-Dev-e1782738803664.jpeg\", cap: \"Penemu Web Ini\" }, \/\/ KOMA DITAMBAHKAN\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/merauke.jpeg\", cap: \"Merauke\" },\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/catatan-retro.jpeg\", cap: \"Catatan Retro\" }, \/\/ TANDA PETIK DITUTUP\n      { img: \"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/catatan-perjalanan.jpeg\", cap: \"Perjalanan\" }\n    ];\n\n    \/\/ 3. Web Audio API\n    let audioCtx = null;\n    function initAudio() {\n      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n\n    function playRumbleSound() {\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(50, now);\n      gain.gain.setValueAtTime(0.001, now);\n      gain.gain.exponentialRampToValueAtTime(0.4, now + 0.1);\n      gain.gain.exponentialRampToValueAtTime(0.001, now + 1.0);\n      osc.start(now);\n      osc.stop(now + 1.0);\n    }\n\n    function playPopSound() {\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(1200, now);\n      osc.frequency.exponentialRampToValueAtTime(400, now + 0.1);\n      gain.gain.setValueAtTime(0.5, now);\n      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.15);\n      osc.start(now);\n      osc.stop(now + 0.15);\n    }\n\n    \/\/ 4. Logika Mesin Gacha\n    const spinBtn = document.getElementById('spinBtn');\n    const replayBtn = document.getElementById('replayBtn');\n    const gachaMachine = document.getElementById('gachaMachine');\n    const capsule = document.getElementById('capsule');\n    const gachaReward = document.getElementById('gachaReward');\n    const rewardImg = document.getElementById('rewardImg');\n    const rewardCap = document.getElementById('rewardCap');\n\n    let isSpinning = false;\n\n    \/\/ Fungsi muter mesin (bisa dipanggil sama tombol merah atau tombol putar lagi)\n    function spinMachine() {\n      if (isSpinning) return;\n      isSpinning = true;\n      spinBtn.style.pointerEvents = 'none';\n      replayBtn.style.pointerEvents = 'none';\n      \n      \/\/ Reset hadiah & kapsul lama\n      capsule.classList.remove('dropped', 'opened');\n      capsule.style.pointerEvents = 'none';\n      gachaReward.classList.remove('revealed');\n\n      \/\/ Mesin goyang + bunyi derak\n      gachaMachine.classList.add('shaking');\n      playRumbleSound();\n\n      \/\/ Setelah 1 detik, kapsul jatuh\n      setTimeout(() => {\n        gachaMachine.classList.remove('shaking');\n        capsule.classList.add('dropped');\n        capsule.style.pointerEvents = 'auto';\n        isSpinning = false;\n        spinBtn.style.pointerEvents = 'auto';\n      }, 1000);\n    }\n\n    \/\/ Tombol merah ditekan\n    spinBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      spinMachine();\n    });\n\n    \/\/ Tombol \"Putar Lagi\" ditekan\n    replayBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      e.stopPropagation(); \/\/ Biar gak nge-trigger klik lain\n      spinMachine();\n    });\n\n    \/\/ 5. Logika Klik Kapsul\n    capsule.addEventListener('click', function() {\n      capsule.classList.add('opened');\n      capsule.style.pointerEvents = 'none';\n      \n      playPopSound();\n\n      \/\/ Ambil hadiah acak\n      const randomReward = hiddenRewards[Math.floor(Math.random() * hiddenRewards.length)];\n      rewardImg.src = randomReward.img;\n      rewardCap.innerText = randomReward.cap;\n\n      \/\/ Munculin hadiah\n      setTimeout(() => {\n        gachaReward.classList.add('revealed');\n        replayBtn.style.pointerEvents = 'auto'; \/\/ Aktifin tombol putar lagi\n      }, 200);\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-146e69d e-con-full e-flex e-con e-parent\" data-id=\"146e69d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f52bb2d elementor-widget elementor-widget-html\" data-id=\"f52bb2d\" 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 Balon *\/\n  .balloon-section {\n    font-family: 'Patrick Hand', cursive;\n    background-color: #faf9f6;\n    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);\n    background-size: 25px 25px;\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  .balloon-title {\n    font-size: 36px;\n    color: #333;\n    margin-bottom: 50px;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n  .balloon-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  \/* Panggung Balon *\/\n  .balloon-stage {\n    max-width: 800px;\n    margin: 0 auto;\n    display: flex;\n    justify-content: center;\n    gap: 30px;\n    flex-wrap: wrap;\n    perspective: 1000px;\n  }\n\n  \/* Item Balon (Bungkus Balon + Tali + Foto) *\/\n  .balloon-item {\n    position: relative;\n    width: 120px;\n    height: 400px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  \/* Badan Balon *\/\n  .balloon-body {\n    width: 80px;\n    height: 95px;\n    border-radius: 50% 50% 50% 50% \/ 55% 55% 45% 45%;\n    border: 3px solid #333;\n    margin: 0 auto;\n    position: relative;\n    z-index: 2;\n    animation: floatBalloon 3s ease-in-out infinite;\n    box-shadow: inset -5px -5px 0px rgba(0,0,0,0.1);\n  }\n  .balloon-body::after {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid #333;\n  }\n\n  .balloon-body.red { background: #ff5252; animation-delay: 0s; }\n  .balloon-body.yellow { background: #ffde7d; animation-delay: 0.5s; }\n  .balloon-body.green { background: #4caf50; animation-delay: 1s; }\n  .balloon-body.blue { background: #bde0ff; animation-delay: 1.5s; }\n\n  @keyframes floatBalloon {\n    0%, 100% { transform: translateY(0) rotate(-2deg); }\n    50% { transform: translateY(-15px) rotate(2deg); }\n  }\n\n  \/* Tali Balon Coretan *\/\n  .balloon-string {\n    position: absolute;\n    top: 90px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 200px;\n    z-index: 1;\n    overflow: visible;\n  }\n  .balloon-string path {\n    fill: none;\n    stroke: #333;\n    stroke-width: 2;\n    stroke-linecap: round;\n  }\n\n  \/* Foto yang Jatuh (Awalnya ngumpet di atas) *\/\n  .balloon-photo {\n    position: absolute;\n    top: -200px; \/* Ngumpet di atas layar *\/\n    left: 50%;\n    transform: translateX(-50%);\n    width: 140px;\n    background: #fff;\n    padding: 8px 8px 25px 8px;\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);\n    border: 2px solid #333;\n    z-index: 3;\n    opacity: 0;\n    transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;\n  }\n  .balloon-photo.dropped {\n    top: 200px; \/* Turun ke bawah *\/\n    opacity: 1;\n  }\n  .balloon-photo img {\n    width: 100%;\n    height: 100px;\n    object-fit: cover;\n    display: block;\n    filter: contrast(1.1) saturate(0.9);\n  }\n  .balloon-photo .photo-cap {\n    font-size: 14px;\n    color: #444;\n    margin-top: 5px;\n    text-align: center;\n  }\n\n  \/* Efek Balon Pecah (Menghilang) *\/\n  .balloon-item.popped .balloon-body,\n  .balloon-item.popped .balloon-string {\n    opacity: 0;\n    transform: scale(0);\n    transition: all 0.2s ease;\n    pointer-events: none;\n  }\n\n  \/* Confetti Pecahan *\/\n  .confetti-piece {\n    position: absolute;\n    width: 8px;\n    height: 12px;\n    top: 40px;\n    left: 50%;\n    z-index: 10;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .balloon-item.popped .confetti-piece {\n    animation: confettiBurst 0.5s ease-out forwards;\n  }\n  @keyframes confettiBurst {\n    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }\n    100% { transform: translate(var(--tx), var(--ty)) rotate(360deg); opacity: 0; }\n  }\n\n  \/* Tombol Reset *\/\n  .balloon-reset-btn {\n    background: #fff;\n    color: #333;\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: 50px;\n    box-shadow: 4px 4px 0px #333;\n    transition: all 0.2s;\n    display: none; \/* Muncul pas semua balon pecah *\/\n  }\n  .balloon-reset-btn:hover {\n    background: #ffde7d;\n    transform: translate(-2px, -2px);\n    box-shadow: 6px 6px 0px #333;\n  }\n\n  @media (max-width: 768px) {\n    .balloon-title { font-size: 28px; }\n    .balloon-stage { gap: 10px; }\n    .balloon-item { width: 80px; height: 350px; }\n    .balloon-body { width: 60px; height: 75px; }\n    .balloon-photo { width: 110px; }\n    .balloon-photo.dropped { top: 160px; }\n  }\n<\/style>\n\n<div class=\"balloon-section\">\n  <h2 class=\"balloon-title fade-up\">\ud83c\udf88 Letupin Balonnya!<\/h2>\n  \n  <div class=\"balloon-stage fade-up\" id=\"balloonStage\">\n    \n    <!-- Balon 1 -->\n    <div class=\"balloon-item\" data-index=\"0\">\n      <div class=\"confetti-piece\" style=\"background: #ff5252;\"><\/div>\n      <div class=\"balloon-body red\"><\/div>\n      <svg class=\"balloon-string\" viewBox=\"0 0 40 200\" preserveAspectRatio=\"none\">\n        <path d=\"M20 0 C 30 50, 10 100, 20 150 T 20 200\" \/>\n      <\/svg>\n      <div class=\"balloon-photo\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/main-sepedah.jpeg\" alt=\"Karya 1\">\n        <div class=\"photo-cap\">Karya Spesial 1<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Balon 2 -->\n    <div class=\"balloon-item\" data-index=\"1\">\n      <div class=\"confetti-piece\" style=\"background: #ffde7d;\"><\/div>\n      <div class=\"balloon-body yellow\"><\/div>\n      <svg class=\"balloon-string\" viewBox=\"0 0 40 200\" preserveAspectRatio=\"none\">\n        <path d=\"M20 0 C 10 50, 30 100, 20 150 T 20 200\" \/>\n      <\/svg>\n      <div class=\"balloon-photo\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/jadul-2.jpeg\" alt=\"Karya 2\">\n        <div class=\"photo-cap\">Karya Spesial 2<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Balon 3 -->\n    <div class=\"balloon-item\" data-index=\"2\">\n      <div class=\"confetti-piece\" style=\"background: #4caf50;\"><\/div>\n      <div class=\"balloon-body green\"><\/div>\n      <svg class=\"balloon-string\" viewBox=\"0 0 40 200\" preserveAspectRatio=\"none\">\n        <path d=\"M20 0 C 25 50, 15 100, 20 150 T 20 200\" \/>\n      <\/svg>\n      <div class=\"balloon-photo\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/jadul-1.jpeg\" alt=\"Karya 3\">\n        <div class=\"photo-cap\">Karya Spesial 3<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Balon 4 -->\n    <div class=\"balloon-item\" data-index=\"3\">\n      <div class=\"confetti-piece\" style=\"background: #bde0ff;\"><\/div>\n      <div class=\"balloon-body blue\"><\/div>\n      <svg class=\"balloon-string\" viewBox=\"0 0 40 200\" preserveAspectRatio=\"none\">\n        <path d=\"M20 0 C 15 50, 25 100, 20 150 T 20 200\" \/>\n      <\/svg>\n      <div class=\"balloon-photo\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/hero\/wp-content\/uploads\/sites\/18\/2026\/08\/jejak-pionir.jpeg\" alt=\"Karya 4\">\n        <div class=\"photo-cap\">Karya Spesial 4<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <button type=\"button\" class=\"balloon-reset-btn\" id=\"balloonResetBtn\">\ud83c\udf88 Isi Balon Lagi!<\/button>\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. Web Audio API (Suara POP)\n    let audioCtx = null;\n    function playPopSound() {\n      if (!audioCtx) {\n        audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n      }\n      const now = audioCtx.currentTime;\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      \n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      \n      \/\/ Frekuensi tinggi turun cepat biar bunyinya 'POP!'\n      osc.type = 'triangle';\n      osc.frequency.setValueAtTime(900, now);\n      osc.frequency.exponentialRampToValueAtTime(100, now + 0.08);\n      \n      gain.gain.setValueAtTime(0.5, now);\n      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);\n      \n      osc.start(now);\n      osc.stop(now + 0.1);\n    }\n\n    \/\/ 3. Logika Letupin Balon\n    const balloons = document.querySelectorAll('.balloon-item');\n    const resetBtn = document.getElementById('balloonResetBtn');\n    let popCount = 0;\n\n    balloons.forEach(balloon => {\n      balloon.addEventListener('click', function(e) {\n        e.preventDefault();\n        \n        \/\/ Kalau udah pecah, abaikan\n        if (this.classList.contains('popped')) return;\n\n        \/\/ Tandai pecah\n        this.classList.add('popped');\n        playPopSound();\n\n        \/\/ Bikin confetti pecahan berantakan (Bikin beberapa partikel)\n        const confetti = this.querySelector('.confetti-piece');\n        for(let i=0; i<5; i++) {\n          const clone = confetti.cloneNode(true);\n          \/\/ Arahan jatuh acak\n          const angle = Math.random() * Math.PI * 2;\n          const distance = 30 + Math.random() * 40;\n          clone.style.setProperty('--tx', Math.cos(angle) * distance + 'px');\n          clone.style.setProperty('--ty', Math.sin(angle) * distance + 'px');\n          clone.style.animationDelay = (i * 0.02) + 's';\n          this.appendChild(clone);\n        }\n\n        \/\/ Jatuhin foto\n        const photo = this.querySelector('.balloon-photo');\n        setTimeout(() => {\n          photo.classList.add('dropped');\n        }, 100);\n\n        \/\/ Hitung yang udah pecah\n        popCount++;\n        if (popCount === balloons.length) {\n          setTimeout(() => {\n            resetBtn.style.display = 'inline-block';\n          }, 800);\n        }\n      });\n    });\n\n    \/\/ 4. Logika Reset Balon\n    resetBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      balloons.forEach(balloon => {\n        balloon.classList.remove('popped');\n        const photo = balloon.querySelector('.balloon-photo');\n        photo.classList.remove('dropped');\n        \n        \/\/ Bersihin confetti cloned\n        const clones = balloon.querySelectorAll('.confetti-piece:not(:first-child)');\n        clones.forEach(c => c.remove());\n      });\n      popCount = 0;\n      this.style.display = 'none';\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>Ye elah, dibilangin jangan dibuka! \ud83d\ude1c WEH! Kamu nyasar ke Galeri Gue nih! \ud83d\udc40 Nih, gue kumpulin karya-karya aneh dan keren gue di sini. Tapi sebelum liat, siapin mental dulu ya, soalnya desainnya gak biasa. \ud83d\ude0e Gas Buka Galeri! \ud83d\ude80 \ud83d\udcf8 Karya &#038; Coretan Terbaru Klik cuy! Desain Logo Kafe Web Portofolio Branding Merch Poster [&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-534","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/534","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=534"}],"version-history":[{"count":151,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/534\/revisions"}],"predecessor-version":[{"id":1182,"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/pages\/534\/revisions\/1182"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/hero\/wp-json\/wp\/v2\/media?parent=534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}