{"id":21,"date":"2026-06-28T15:16:22","date_gmt":"2026-06-28T15:16:22","guid":{"rendered":"https:\/\/lab.rwb.my.id\/neo\/?page_id=21"},"modified":"2026-06-29T17:49:00","modified_gmt":"2026-06-29T17:49:00","slug":"works","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/neo\/works\/","title":{"rendered":"Works"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c45f86c e-con-full e-flex e-con e-parent\" data-id=\"c45f86c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59ff737 elementor-widget elementor-widget-html\" data-id=\"59ff737\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts for Neo-Brutalism Vibe -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* ==========================================================\n     RWB - NEO BRUTALISM: WORKS PAGE HERO (FULLY SCOPED)\n     ========================================================== *\/\n  \n  \/* REVISI UTAMA: Mengisolasi variabel di dalam wrapper agar tidak merusak tema global website *\/\n  .rwb-works-page-wrapper {\n    --rwb-bg: #FFFFFF;\n    --rwb-text: #000000;\n    --rwb-shadow: #000000;\n    --rwb-accent-1: #FF006E;    \/* Pink *\/\n    --rwb-accent-2: #00F5D4;    \/* Cyan *\/\n    --rwb-accent-3: #FFD6A5;    \/* Orange *\/\n    --rwb-font: 'Space Grotesk', sans-serif;\n    --rwb-font-heading: 'Archivo Black', sans-serif;\n    \n    width: 100%;\n    position: relative;\n  }\n\n  \/* Aman dari kebocoran box-sizing global *\/\n  .rwb-works-page-wrapper *, \n  .rwb-modal-overlay * { \n    box-sizing: border-box; \n  }\n\n  \/* ==========================================\n     FIXED NAVBAR SECTION\n     ========================================== *\/\n  .rwb-nav {\n    position: fixed; top: 0; left: 0; width: 100%; z-index: 999;\n    display: flex; justify-content: space-between; align-items: center;\n    padding: 16px 40px; background-color: var(--rwb-bg);\n    border-bottom: 3px solid var(--rwb-text);\n    font-family: var(--rwb-font);\n  }\n  .rwb-logo-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }\n  .rwb-logo-img { width: 36px; height: 36px; object-fit: cover; border: 3px solid var(--rwb-text); background-color: var(--rwb-text); }\n  .rwb-logo-text { font-family: var(--rwb-font-heading); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; color: var(--rwb-text); }\n\n  \/* UNIFIED MENU *\/\n  .rwb-menu { display: flex; gap: 10px; align-items: center; }\n  .rwb-menu-item { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--rwb-text); font-weight: 700; font-size: 0.85rem; padding: 8px 14px; border: 3px solid transparent; transition: all 0.2s ease; text-transform: uppercase; }\n  .rwb-menu-item:hover { background-color: var(--rwb-accent-2); border: 3px solid var(--rwb-text); box-shadow: 4px 4px 0px var(--rwb-shadow); transform: translate(-2px, -2px); }\n  .rwb-menu-item svg { width: 16px; height: 16px; stroke-width: 2.5; }\n\n  \/* MENU AKTIF (ACTIVE PAGE) *\/\n  .rwb-menu-item.rwb-active-menu {\n    background-color: var(--rwb-accent-2);\n    border: 3px solid var(--rwb-text);\n    box-shadow: 4px 4px 0px var(--rwb-shadow);\n    transform: translate(-2px, -2px);\n  }\n\n  \/* Accessibility: Focus Visible *\/\n  .rwb-menu-item:focus-visible, .rwb-btn:focus-visible, .rwb-menu-mobile-btn:focus-visible, .rwb-filter-btn:focus-visible, .rwb-modal-close:focus-visible {\n    outline: 3px solid var(--rwb-accent-1); outline-offset: 2px;\n  }\n\n  .rwb-menu-mobile-btn { display: none; background: var(--rwb-bg); border: 3px solid var(--rwb-text); box-shadow: 4px 4px 0px var(--rwb-shadow); cursor: pointer; padding: 6px; transition: transform 0.1s; }\n  .rwb-menu-mobile-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--rwb-shadow); }\n  .rwb-menu-mobile-btn svg { width: 24px; height: 24px; stroke: var(--rwb-text); stroke-width: 3; }\n\n  \/* === HERO WORKS (MAGAZINE STYLE) === *\/\n  .rwb-works-hero {\n    font-family: var(--rwb-font); background-color: var(--rwb-bg);\n    padding: 140px 40px 0 40px; overflow: hidden; position: relative;\n  }\n  .rwb-works-content { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; padding-bottom: 60px; }\n  \n  .rwb-works-bg-text { font-family: var(--rwb-font-heading); font-size: clamp(2.5rem, 12vw, 10rem); color: transparent; -webkit-text-stroke: 2px rgba(0,0,0,0.1); text-transform: uppercase; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 0; white-space: nowrap; pointer-events: none; }\n  \n  .rwb-works-badge { display: inline-flex; align-items: center; gap: 8px; background-color: var(--rwb-text); color: var(--rwb-bg); font-weight: 700; padding: 6px 14px; border: 3px solid var(--rwb-text); margin-bottom: 20px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 2; }\n  .rwb-works-badge span { width: 8px; height: 8px; background: var(--rwb-accent-2); border-radius: 50%; animation: rwb-blink 1.5s infinite; }\n  .rwb-works-title { font-family: var(--rwb-font-heading); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; color: var(--rwb-text); text-transform: uppercase; margin: 0 0 20px 0; letter-spacing: -0.02em; position: relative; z-index: 2; }\n  .rwb-works-title span { background-color: var(--rwb-accent-1); color: #FFFFFF; padding: 0 12px; display: inline-block; transform: rotate(-2deg); border: 3px solid var(--rwb-text); box-shadow: 6px 6px 0px var(--rwb-shadow); }\n  .rwb-works-desc { font-size: 0.95rem; font-weight: 500; color: #333333; max-width: 500px; margin: 0 auto; line-height: 1.6; position: relative; z-index: 2; }\n\n  \/* === TOOLBAR FILTER === *\/\n  .rwb-works-toolbar { background: var(--rwb-text); padding: 16px 40px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; border-top: 4px solid var(--rwb-text); }\n  .rwb-filter-btn { font-family: var(--rwb-font-heading); text-transform: uppercase; font-size: 0.8rem; padding: 10px 18px; border: 2px solid var(--rwb-bg); background: var(--rwb-text); color: var(--rwb-bg); cursor: pointer; transition: all 0.2s ease; box-shadow: 4px 4px 0px var(--rwb-bg); }\n  .rwb-filter-btn:hover { background: var(--rwb-accent-2); color: var(--rwb-text); border-color: var(--rwb-bg); transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--rwb-bg); }\n  .rwb-filter-btn.active { background: var(--rwb-bg); color: var(--rwb-text); transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--rwb-bg); }\n\n  @keyframes rwb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n\n  \/* === ANIMASI FADE UP === *\/\n  .rwb-works-hero.rwb-js-ready .rwb-works-content { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }\n  .rwb-works-hero.rwb-js-ready.is-visible .rwb-works-content { opacity: 1; transform: translateY(0); }\n\n  \/* === MODAL POPUP NEO-BRUTALISM === *\/\n  .rwb-modal-overlay {\n    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);\n    display: none; justify-content: center; align-items: center; z-index: 1000;\n    padding: 20px; opacity: 0; transition: opacity 0.3s ease;\n  }\n  .rwb-modal-overlay.active { display: flex; opacity: 1; }\n  .rwb-modal-box {\n    background: #FFFFFF; border: 4px solid #000000;\n    box-shadow: 12px 12px 0px #000000;\n    max-width: 500px; width: 100%; padding: 40px; position: relative;\n    transform: scale(0.9); transition: transform 0.3s ease;\n    max-height: 80vh; overflow-y: auto;\n    font-family: 'Space Grotesk', sans-serif;\n  }\n  .rwb-modal-overlay.active .rwb-modal-box { transform: scale(1); }\n  \n  .rwb-modal-close {\n    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;\n    border: 3px solid #000000; background: #FFFFFF; cursor: pointer;\n    box-shadow: 4px 4px 0px #000000; display: flex; align-items: center; justify-content: center;\n    transition: transform 0.1s, box-shadow 0.1s; z-index: 10;\n    padding: 0; font-family: 'Archivo Black', sans-serif; font-size: 1.2rem; line-height: 1; color: #000000;\n  }\n  .rwb-modal-close:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000000; }\n\n  .rwb-modal-title { font-family: 'Archivo Black', sans-serif; font-size: 1.4rem; text-transform: uppercase; margin: 0 0 8px 0; padding-right: 40px; line-height: 1.2; color: #000000; }\n  .rwb-modal-subtitle { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 700; color: #FF006E; text-transform: uppercase; margin-bottom: 20px; display: block; }\n  .rwb-modal-list { list-style: none; padding: 0; margin: 0; }\n  .rwb-modal-list li {\n    font-size: 0.9rem; font-weight: 500; color: #333; line-height: 1.5;\n    margin-bottom: 14px; padding-left: 24px; position: relative;\n  }\n  .rwb-modal-list li::before {\n    content: ''; position: absolute; left: 0; top: 6px;\n    width: 10px; height: 10px; background: #FF006E; border: 2px solid #000000;\n  }\n\n  \/* === RESPONSIVE HP === *\/\n  @media (max-width: 768px) {\n    .rwb-nav { padding: 12px 20px; }\n    \n    .rwb-menu {\n      display: none; flex-direction: column; gap: 15px; padding: 20px 30px;\n      background-color: var(--rwb-bg); border-bottom: 4px solid var(--rwb-text);\n      position: absolute; top: 100%; left: 0; width: 100%; z-index: 998;\n    }\n    .rwb-menu.active { display: flex; }\n    .rwb-menu .rwb-menu-item { font-size: 1rem; padding: 12px 0; border-bottom: 2px dashed var(--rwb-text); width: 100%; }\n    .rwb-menu .rwb-menu-item:last-child { border-bottom: none; }\n    .rwb-menu-item.rwb-active-menu { transform: none; box-shadow: none; border: 3px solid var(--rwb-text); }\n    \n    .rwb-menu-mobile-btn { display: block; }\n    .rwb-works-hero { padding: 110px 20px 0 20px; }\n    .rwb-works-toolbar { padding: 12px 20px; gap: 8px; }\n    .rwb-filter-btn { font-size: 0.75rem; padding: 8px 14px; box-shadow: 3px 3px 0px var(--rwb-bg); }\n    .rwb-filter-btn:hover, .rwb-filter-btn.active { transform: translate(2px, 2px); box-shadow: 1px 1px 0px var(--rwb-bg); }\n    .rwb-modal-box { padding: 30px 24px; box-shadow: 8px 8px 0px #000000; }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE START -->\n<div class=\"rwb-works-page-wrapper\">\n  \n  <!-- NAVBAR -->\n  <nav class=\"rwb-nav\">\n    <a href=\"https:\/\/lab.rwb.my.id\/neo\/\" class=\"rwb-logo-area\">\n      <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/Logo-RWB.jpeg\" alt=\"Rudi Dev Logo\" class=\"rwb-logo-img\">\n      <span class=\"rwb-logo-text\">Rudi Dev<\/span>\n    <\/a>\n\n    <div class=\"rwb-menu\" id=\"rwbMobileMenu\">\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/\" class=\"rwb-menu-item\"><svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"><\/path><\/svg>Home<\/a>\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/works\/\" class=\"rwb-menu-item\"><svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"><\/path><\/svg>Works<\/a>\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/about\/\" class=\"rwb-menu-item\"><svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"><\/path><\/svg>About<\/a>\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/contact\/\" class=\"rwb-menu-item\"><svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path><\/svg>Contact<\/a>\n    <\/div>\n\n    <button class=\"rwb-menu-mobile-btn\" id=\"rwbMenuToggle\" aria-label=\"Toggle Menu\" aria-expanded=\"false\"><svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg><\/button>\n  <\/nav>\n\n  <!-- HERO WORKS -->\n  <section class=\"rwb-works-hero\">\n    <div class=\"rwb-works-content\">\n      <h2 class=\"rwb-works-bg-text\">PORTFOLIO<\/h2>\n      <div class=\"rwb-works-badge\"><span><\/span> Archive 2026<\/div>\n      <h1 class=\"rwb-works-title\">My <span>Projects<\/span> &<br>Case Studies.<\/h1>\n      <p class=\"rwb-works-desc\">A full archive of my digital craftsmanship. Click a category below to see my specific expertise and workflow.<\/p>\n    <\/div>\n\n    <!-- TOOLBAR FILTER -->\n    <div class=\"rwb-works-toolbar\">\n      <button class=\"rwb-filter-btn active\" data-modal=\"rwb-modal-all\">All Works<\/button>\n      <button class=\"rwb-filter-btn\" data-modal=\"rwb-modal-uiux\">UI\/UX Design<\/button>\n      <button class=\"rwb-filter-btn\" data-modal=\"rwb-modal-webdev\">Web Development<\/button>\n      <button class=\"rwb-filter-btn\" data-modal=\"rwb-modal-branding\">Branding<\/button>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- === MODAL POPUPS === -->\n<div class=\"rwb-modal-overlay\" id=\"rwb-modal-all\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"rwb-title-all\">\n  <div class=\"rwb-modal-box\">\n    <button class=\"rwb-modal-close\" aria-label=\"Close\">&times;<\/button>\n    <span class=\"rwb-modal-subtitle\">Complete Portfolio<\/span>\n    <h3 class=\"rwb-modal-title\" id=\"rwb-title-all\">All Works<\/h3>\n    <ul class=\"rwb-modal-list\">\n      <li>Over 50+ successful projects delivered to global clients.<\/li>\n      <li>Expertise spans across UI\/UX, Web Dev, and Branding.<\/li>\n      <li>Focused on high-converting, pixel-perfect digital experiences.<\/li>\n      <li>Clean code and unapologetic bold design decisions.<\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\n<div class=\"rwb-modal-overlay\" id=\"rwb-modal-uiux\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"rwb-title-uiux\">\n  <div class=\"rwb-modal-box\">\n    <button class=\"rwb-modal-close\" aria-label=\"Close\">&times;<\/button>\n    <span class=\"rwb-modal-subtitle\">Design Process<\/span>\n    <h3 class=\"rwb-modal-title\" id=\"rwb-title-uiux\">UI\/UX Design<\/h3>\n    <ul class=\"rwb-modal-list\">\n      <li>User-centric wireframing and prototyping in Figma.<\/li>\n      <li>High-converting landing page layouts.<\/li>\n      <li>Interactive dashboard and mobile app interfaces.<\/li>\n      <li>Design systems and scalable component libraries.<\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\n<div class=\"rwb-modal-overlay\" id=\"rwb-modal-webdev\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"rwb-title-webdev\">\n  <div class=\"rwb-modal-box\">\n    <button class=\"rwb-modal-close\" aria-label=\"Close\">&times;<\/button>\n    <span class=\"rwb-modal-subtitle\">Technical Stack<\/span>\n    <h3 class=\"rwb-modal-title\" id=\"rwb-title-webdev\">Web Development<\/h3>\n    <ul class=\"rwb-modal-list\">\n      <li>Pixel-perfect HTML, CSS, and Vanilla JS implementation.<\/li>\n      <li>Elementor Pro specialist with zero-bloat custom widgets.<\/li>\n      <li>90+ Google PageSpeed optimization scores.<\/li>\n      <li>Responsive across all devices and cross-browser compatible.<\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\n<div class=\"rwb-modal-overlay\" id=\"rwb-modal-branding\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"rwb-title-branding\">\n  <div class=\"rwb-modal-box\">\n    <button class=\"rwb-modal-close\" aria-label=\"Close\">&times;<\/button>\n    <span class=\"rwb-modal-subtitle\">Visual Identity<\/span>\n    <h3 class=\"rwb-modal-title\" id=\"rwb-title-branding\">Branding<\/h3>\n    <ul class=\"rwb-modal-list\">\n      <li>Modern logo design and visual identity creation.<\/li>\n      <li>Neo-Brutalism and minimalist aesthetic specialist.<\/li>\n      <li>Comprehensive brand guidelines and style guides.<\/li>\n      <li>Social media kits and marketing collateral design.<\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\n<!-- Vanilla JS -->\n<script>\n  (function(){\n    try {\n      const toggleBtn = document.getElementById('rwbMenuToggle');\n      const menu = document.getElementById('rwbMobileMenu');\n      \n      if(toggleBtn && menu) {\n        toggleBtn.addEventListener('click', function() {\n          const isActive = menu.classList.toggle('active');\n          toggleBtn.setAttribute('aria-expanded', isActive ? 'true' : 'false');\n        });\n\n        const menuLinks = menu.querySelectorAll('.rwb-menu-item');\n        menuLinks.forEach(link => {\n          link.addEventListener('click', () => {\n            if (menu.classList.contains('active')) {\n              menu.classList.remove('active');\n              toggleBtn.setAttribute('aria-expanded', 'false');\n            }\n          });\n        });\n      }\n\n      \/\/ Deteksi Halaman Aktif berdasarkan URL\n      const currentUrl = window.location.href;\n      const menuItems = document.querySelectorAll('.rwb-menu-item');\n      menuItems.forEach(item => {\n        const itemUrl = item.href.replace(\/\\\/$\/, \"\");\n        const currentUrlClean = currentUrl.replace(\/\\\/$\/, \"\");\n        \n        if (itemUrl === currentUrlClean) {\n          item.classList.add('rwb-active-menu');\n        }\n      });\n\n      const wrapper = document.querySelector('.rwb-works-hero');\n      if(!wrapper) return;\n      wrapper.classList.add('rwb-js-ready');\n\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if(entry.isIntersecting) {\n            wrapper.classList.add('is-visible');\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { threshold: 0.1 });\n      observer.observe(wrapper);\n\n      const filterBtns = document.querySelectorAll('.rwb-filter-btn');\n      const modals = document.querySelectorAll('.rwb-modal-overlay');\n      let lastFocusedElement = null;\n\n      \/\/ REVISI: Mengunci body padding-right agar saat modal muncul layout tidak goyang\/geser\n      function openModal(modal, triggerBtn) {\n        lastFocusedElement = triggerBtn;\n        modal.classList.add('active');\n        \n        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n        document.body.style.paddingRight = scrollBarWidth + 'px';\n        document.body.style.overflow = 'hidden';\n        \n        const closeBtn = modal.querySelector('.rwb-modal-close');\n        if(closeBtn) closeBtn.focus();\n      }\n\n      function closeModal(modal) {\n        modal.classList.remove('active');\n        document.body.style.overflow = '';\n        document.body.style.paddingRight = '';\n        \n        if(lastFocusedElement) lastFocusedElement.focus();\n      }\n\n      filterBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n          filterBtns.forEach(b => b.classList.remove('active'));\n          btn.classList.add('active');\n          \n          const modalId = btn.getAttribute('data-modal');\n          const modal = document.getElementById(modalId);\n          if(modal) openModal(modal, btn);\n        });\n      });\n\n      const closeBtns = document.querySelectorAll('.rwb-modal-close');\n      closeBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n          closeModal(btn.closest('.rwb-modal-overlay'));\n        });\n      });\n\n      modals.forEach(overlay => {\n        overlay.addEventListener('click', (e) => {\n          if(e.target === overlay) {\n            closeModal(overlay);\n          }\n        });\n      });\n\n      document.addEventListener('keydown', (e) => {\n        const activeModal = document.querySelector('.rwb-modal-overlay.active');\n        if (!activeModal) return;\n\n        if(e.key === 'Escape') {\n          closeModal(activeModal);\n        } \n        else if (e.key === 'Tab') {\n          const focusableElements = activeModal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');\n          const firstEl = focusableElements[0];\n          const lastEl = focusableElements[focusableElements.length - 1];\n\n          if (e.shiftKey) {\n            if (document.activeElement === firstEl) {\n              e.preventDefault();\n              lastEl.focus();\n            }\n          } else {\n            if (document.activeElement === lastEl) {\n              e.preventDefault();\n              firstEl.focus();\n            }\n          }\n        }\n      });\n\n    } catch(e) {\n      const wrapper = document.querySelector('.rwb-works-hero');\n      if(wrapper) wrapper.classList.remove('rwb-js-ready');\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-201ea70 e-con-full e-flex e-con e-parent\" data-id=\"201ea70\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be654fc elementor-widget elementor-widget-html\" data-id=\"be654fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* ==========================================================\n     RWB - NEO BRUTALISM: INFINITE ROW STACK (DESKTOP & MOBILE CORES LOCKED)\n     ========================================================== *\/\n  \n  .rwb-works-list-section {\n    --rwb-list-bg: #FFFFFF;\n    --rwb-list-text: #000000;\n    --rwb-list-shadow: #000000;\n    --rwb-list-accent-pink: #FF006E;  \n    --rwb-list-accent-cyan: #00F5D4;  \n    --rwb-list-accent-grey: rgba(0,0,0,0.08); \n    --rwb-list-font: 'Space Grotesk', sans-serif;\n    --rwb-list-font-heading: 'Archivo Black', sans-serif;\n\n    font-family: var(--rwb-list-font);\n    background-color: var(--rwb-list-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-list-text);\n  }\n\n  .rwb-list-container {\n    max-width: 1000px; \n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* HEADER SECTION *\/\n  .rwb-list-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rwb-list-tag {\n    display: inline-block;\n    background-color: var(--rwb-list-text);\n    color: var(--rwb-list-bg);\n    font-weight: 700;\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    align-self: flex-start;\n  }\n\n  .rwb-list-title {\n    font-family: var(--rwb-list-font-heading);\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    line-height: 1.1;\n    color: var(--rwb-list-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-list-title span {\n    background-color: var(--rwb-list-accent-grey); \n    color: var(--rwb-list-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-list-text);\n    box-shadow: 4px 4px 0px var(--rwb-list-shadow);\n    margin-left: 8px;\n  }\n\n  .rwb-list-desc {\n    font-size: 1rem;\n    font-weight: 500;\n    color: #333333;\n    max-width: 600px;\n    line-height: 1.6;\n    margin: 0;\n  }\n\n  \/* === ANIMASI FADE UP SINKRON TECH STACK (TARGET AMAN 100%) === *\/\n  .rwb-works-list-section.rwb-list-ready .rwb-list-header,\n  .rwb-works-list-section.rwb-list-ready .rwb-project-table {\n    opacity: 0;\n    transform: translateY(40px) rotate(-0.5deg);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94), background-color 0.25s ease, color 0.25s ease;\n    will-change: opacity, transform;\n  }\n\n  .rwb-works-list-section.rwb-list-ready.is-list-visible .rwb-list-header {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n\n  .rwb-works-list-section.rwb-list-ready.is-list-visible .rwb-project-table {\n    opacity: 1;\n    transform: translateY(0) rotate(0deg);\n    transition-delay: 0.3s;\n  }\n\n  \/* MASTER STACK TABLE *\/\n  .rwb-project-table {\n    display: flex;\n    flex-direction: column;\n    border: 4px solid var(--rwb-list-text);\n    box-shadow: 12px 12px 0px var(--rwb-list-shadow);\n    background-color: var(--rwb-list-bg);\n    transition: box-shadow 0.3s ease;\n  }\n\n  .rwb-project-table:hover {\n    box-shadow: 16px 16px 0px var(--rwb-list-shadow);\n  }\n\n  .rwb-project-row {\n    display: grid;\n    grid-template-columns: 1.2fr 2fr 1fr 0.8fr;\n    align-items: center;\n    padding: 24px 32px;\n    border-bottom: 4px solid var(--rwb-list-text);\n    text-decoration: none;\n    color: var(--rwb-list-text);\n    background-color: var(--rwb-list-bg);\n  }\n\n  .rwb-project-row:last-child {\n    border-bottom: none;\n  }\n\n  \/* DESKTOP HOVER SYSTEM *\/\n  @media (min-width: 769px) {\n    .rwb-project-row:hover {\n      background-color: var(--rwb-list-accent-pink);\n      color: #FFFFFF;\n    }\n    .rwb-project-row:hover .rwb-proj-meta {\n      color: #FFFFFF;\n      opacity: 1;\n    }\n    .rwb-project-row:hover .rwb-tag-badge {\n      background-color: var(--rwb-list-accent-cyan);\n      color: var(--rwb-list-text);\n    }\n  }\n\n  .rwb-proj-meta {\n    font-size: clamp(0.75rem, 1.5vw, 0.85rem);\n    font-weight: 700;\n    text-transform: uppercase;\n    opacity: 0.7;\n    transition: color 0.2s ease, opacity 0.2s ease;\n  }\n\n  .rwb-proj-title {\n    font-family: var(--rwb-list-font-heading);\n    font-size: clamp(1.2rem, 2.5vw, 1.6rem);\n    text-transform: uppercase;\n    margin: 0;\n    line-height: 1.1;\n  }\n\n  .rwb-proj-tags {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .rwb-tag-badge {\n    background-color: var(--rwb-list-text);\n    color: var(--rwb-list-bg);\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 4px 10px;\n    border: 2px solid var(--rwb-list-text);\n    text-transform: uppercase;\n    transition: background-color 0.2s ease, color 0.2s ease;\n  }\n\n  .rwb-proj-year {\n    font-family: var(--rwb-list-font-heading);\n    font-size: clamp(1.1rem, 2.2vw, 1.4rem);\n    text-align: right;\n  }\n\n  \/* IN-ROW PREVIEW FOR MOBILE *\/\n  .rwb-mobile-inline-preview {\n    display: none;\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    border: 0px solid var(--rwb-list-text);\n    box-shadow: 4px 4px 0px var(--rwb-list-shadow);\n    margin-top: 0;\n    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s ease, border-width 0.1s ease;\n  }\n\n  .rwb-mobile-inline-preview img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* FLOATING PREVIEW DESKTOP (DIISOLASI KELUAR DARI TABEL) *\/\n  .rwb-floating-preview {\n    position: fixed; \n    width: 320px;\n    height: 220px;\n    border: 4px solid var(--rwb-list-text);\n    box-shadow: 8px 8px 0px var(--rwb-list-shadow);\n    pointer-events: none;\n    z-index: 99999; \/* Z-Index tertinggi di halaman *\/\n    opacity: 0;\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%) scale(0.8);\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    background-color: #EEE;\n    overflow: hidden;\n    display: block;\n  }\n\n  .rwb-floating-preview img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: none;\n  }\n\n  \/* ==========================================================\n     MOBILE RESPONSIVE SYSTEM (SAFE CONTRAS & STABLE ANIMATION)\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-floating-preview { display: none !important; }\n    \n    .rwb-works-list-section {\n      padding: 60px 20px;\n    }\n\n    .rwb-list-header {\n      margin-bottom: 40px;\n    }\n\n    .rwb-project-row {\n      grid-template-columns: 1fr auto;\n      grid-template-rows: auto auto auto;\n      gap: 12px;\n      padding: 20px;\n      cursor: pointer;\n      transform: none !important;\n    }\n\n    .rwb-proj-meta { grid-column: 1 \/ -1; }\n    .rwb-proj-title { grid-column: 1; grid-row: 2; font-size: 1.2rem; }\n    .rwb-proj-tags { grid-column: 1 \/ -1; grid-row: 3; margin-top: 4px; }\n    .rwb-proj-year { grid-column: 2; grid-row: 2; font-size: 1.1rem; align-self: center; }\n\n    .rwb-mobile-inline-preview {\n      display: block;\n      grid-column: 1 \/ -1;\n      grid-row: 4;\n    }\n\n    \/* KUNCI WARNA ABU BRUTAL PAS DI-TAP DI HP *\/\n    .rwb-project-row.is-active-tab {\n      background-color: #E0E0E0 !important; \n    }\n\n    \/* KUNCI TEKS TETEP HITAM PEKAT, ANTI SAMAR *\/\n    .rwb-project-row.is-active-tab .rwb-proj-title,\n    .rwb-project-row.is-active-tab .rwb-proj-year,\n    .rwb-project-row.is-active-tab .rwb-proj-meta {\n      color: #000000 !important;\n      opacity: 1 !important;\n    }\n\n    .rwb-project-row.is-active-tab .rwb-tag-badge {\n      background-color: #000000 !important;\n      color: #FFFFFF !important;\n    }\n\n    \/* Buka Gambar Mobile *\/\n    .rwb-project-row.is-active-tab .rwb-mobile-inline-preview {\n      height: 180px; \n      margin-top: 14px;\n      border: 3px solid var(--rwb-list-text);\n    }\n  }\n<\/style>\n\n<section class=\"rwb-works-list-section\" id=\"rwbWorksListSection\">\n  <div class=\"rwb-list-container\">\n    \n    <div class=\"rwb-list-header\">\n      <span class=\"rwb-list-tag\">\/ Portfolio<\/span>\n      <h2 class=\"rwb-list-title\">SELECTED <span>ARCHIVE<\/span><\/h2>\n      <p class=\"rwb-list-desc\">\n        Kumpulan proyek digital pilihan yang dibangun dengan fokus penuh pada kecepatan, optimasi kode bersih, dan estetika radikal.\n      <\/p>\n    <\/div>\n    \n    <div class=\"rwb-project-table\" id=\"rwbProjectTable\">\n      \n      <div class=\"rwb-project-row\" data-id=\"w1\">\n        <div class=\"rwb-proj-meta\">01 \/ E-Commerce Platform<\/div>\n        <h3 class=\"rwb-proj-title\">Veloce Gear Co.<\/h3>\n        <div class=\"rwb-proj-tags\">\n          <span class=\"rwb-tag-badge\">Web Dev<\/span>\n        <\/div>\n        <div class=\"rwb-proj-year\">2026<\/div>\n        <div class=\"rwb-mobile-inline-preview\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-1-e1782751604185.jpeg\" alt=\"P1\">\n        <\/div>\n      <\/div>\n\n      <div class=\"rwb-project-row\" data-id=\"w2\">\n        <div class=\"rwb-proj-meta\">02 \/ Corporate Dashboard<\/div>\n        <h3 class=\"rwb-proj-title\">Apex Analytics<\/h3>\n        <div class=\"rwb-proj-tags\">\n          <span class=\"rwb-tag-badge\">UI\/UX Design<\/span>\n        <\/div>\n        <div class=\"rwb-proj-year\">2026<\/div>\n        <div class=\"rwb-mobile-inline-preview\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-3-e1782751633903.jpeg\" alt=\"P2\">\n        <\/div>\n      <\/div>\n\n      <div class=\"rwb-project-row\" data-id=\"w3\">\n        <div class=\"rwb-proj-meta\">03 \/ Agency Portfolio<\/div>\n        <h3 class=\"rwb-proj-title\">Kreatif Studio<\/h3>\n        <div class=\"rwb-proj-tags\">\n          <span class=\"rwb-tag-badge\">Elementor Pro<\/span>\n        <\/div>\n        <div class=\"rwb-proj-year\">2025<\/div>\n        <div class=\"rwb-mobile-inline-preview\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-4-e1782751669707.jpeg\" alt=\"P3\">\n        <\/div>\n      <\/div>\n\n      <div class=\"rwb-project-row\" data-id=\"w4\">\n        <div class=\"rwb-proj-meta\">04 \/ Web App Development<\/div>\n        <h3 class=\"rwb-proj-title\">Nova Crypt<\/h3>\n        <div class=\"rwb-proj-tags\">\n          <span class=\"rwb-tag-badge\">Vanilla JS<\/span>\n        <\/div>\n        <div class=\"rwb-proj-year\">2025<\/div>\n        <div class=\"rwb-mobile-inline-preview\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-2-e1782751584837.jpeg\" alt=\"P4\">\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <div class=\"rwb-floating-preview\" id=\"rwbFloatingPreview\">\n    <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-1-e1782751604185.jpeg\" data-project=\"w1\" alt=\"P1\">\n    <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-3-e1782751633903.jpeg\" data-project=\"w2\" alt=\"P2\">\n    <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-4-e1782751669707.jpeg\" data-project=\"w3\" alt=\"P3\">\n    <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/DEV-2-e1782751584837.jpeg\" data-project=\"w4\" alt=\"P4\">\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbWorksListSection');\n      if(!section) return;\n\n      section.classList.add('rwb-list-ready');\n      let isListAnimated = false;\n\n      function startListAnimations() {\n        if (isListAnimated) return;\n        isListAnimated = true;\n        section.classList.add('is-list-visible');\n      }\n\n      \/\/ SINKRONISASI 100% PARAMETER SCROLL DARI ANDALAN LO SOB\n      const listObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(startListAnimations, 200); \n            listObserver.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.2,                  \n        rootMargin: '0px 0px -80px 0px'  \n      });\n      \n      listObserver.observe(section);\n\n      const table = document.getElementById('rwbProjectTable');\n      const preview = document.getElementById('rwbFloatingPreview');\n      const rows = table.querySelectorAll('.rwb-project-row');\n      const images = preview.querySelectorAll('img');\n\n      \/\/ ENGINE DESKTOP (FIXED ENGINE - ABSOLUTE PRESISI KURSOR)\n      if (window.innerWidth > 768) {\n        window.addEventListener('mousemove', function(e) {\n          const matchTable = e.target.closest('#rwbProjectTable');\n          if (matchTable) {\n            preview.style.left = e.clientX + 'px';\n            preview.style.top = e.clientY + 'px';\n          }\n        });\n\n        rows.forEach(row => {\n          row.addEventListener('mouseenter', function() {\n            const id = row.getAttribute('data-id');\n            preview.style.opacity = '1';\n            preview.style.transform = 'translate(-50%, -50%) scale(1)';\n\n            images.forEach(img => {\n              img.style.display = img.getAttribute('data-project') === id ? 'block' : 'none';\n            });\n          });\n\n          row.addEventListener('mouseleave', function() {\n            preview.style.opacity = '0';\n            preview.style.transform = 'translate(-50%, -50%) scale(0.8)';\n          });\n        });\n      }\n\n      \/\/ ENGINE MOBILE\n      if (window.innerWidth <= 768) {\n        rows.forEach(row => {\n          row.addEventListener('click', function(e) {\n            if (e.target.closest('a') && !e.target.closest('.rwb-project-row')) return;\n            \n            const isActive = row.classList.contains('is-active-tab');\n            \n            rows.forEach(r => r.classList.remove('is-active-tab'));\n            \n            if (!isActive) {\n              row.classList.add('is-active-tab');\n            }\n          });\n        });\n      }\n\n    } catch(err) {\n      console.error(\"List Works Core Error:\", err);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-440b46b e-con-full e-flex e-con e-parent\" data-id=\"440b46b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a48c2b2 elementor-widget elementor-widget-html\" data-id=\"a48c2b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* ==========================================================\n     RWB - NEO BRUTALISM: PROJECT TICKETING CTA (CANVAS WHITE)\n     ========================================================== *\/\n  \n  .rwb-cta-section {\n    --rwb-cta-bg: #FFFFFF; \/* KUNCI: Canvas Tetap Putih Bersih *\/\n    --rwb-cta-text: #000000;\n    --rwb-cta-shadow: #000000;\n    --rwb-cta-card-bg: #FFFFFF;\n    --rwb-cta-accent-yellow: #FFE600; \/* Kuning murni untuk aksen highlight *\/\n    --rwb-cta-accent-purple: #7000FF; \n    --rwb-cta-font: 'Space Grotesk', sans-serif;\n    --rwb-cta-font-heading: 'Archivo Black', sans-serif;\n\n    font-family: var(--rwb-cta-font);\n    background-color: var(--rwb-cta-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-cta-text);\n  }\n\n  .rwb-cta-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n    display: grid;\n    grid-template-columns: 1fr 1.1fr;\n    gap: 50px;\n    align-items: center;\n  }\n\n  \/* LEFT SIDE: LIVE STATUS *\/\n  .rwb-cta-info {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rwb-cta-status {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    background-color: var(--rwb-cta-accent-yellow); \/* Highlight Aksen *\/\n    color: var(--rwb-cta-text);\n    font-family: monospace;\n    font-weight: 700;\n    padding: 6px 12px;\n    font-size: 0.8rem;\n    align-self: flex-start;\n    border: 3px solid var(--rwb-cta-text);\n    box-shadow: 4px 4px 0px var(--rwb-cta-shadow);\n  }\n\n  .rwb-status-blink {\n    width: 8px;\n    height: 8px;\n    background-color: #00FF66;\n    border-radius: 50%;\n    border: 1px solid #000;\n    animation: rwb-pulse 1.2s infinite;\n  }\n\n  @keyframes rwb-pulse {\n    0% { opacity: 0.3; }\n    50% { opacity: 1; }\n    100% { opacity: 0.3; }\n  }\n\n  .rwb-cta-title {\n    font-family: var(--rwb-cta-font-heading);\n    font-size: clamp(1.8rem, 3.5vw, 2.6rem); \/* Ukuran disamakan dengan Selected Archive *\/\n    line-height: 1.1;\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-cta-title span {\n    background-color: rgba(0,0,0,0.08);\n    color: var(--rwb-cta-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-cta-text);\n    box-shadow: 4px 4px 0px var(--rwb-cta-shadow);\n  }\n\n  .rwb-cta-desc {\n    font-size: 0.95rem;\n    font-weight: 500;\n    line-height: 1.6;\n    margin: 0;\n    color: #333333;\n    max-width: 450px;\n  }\n\n  \/* RIGHT SIDE: TICKETING BOX *\/\n  .rwb-ticket-box {\n    background-color: var(--rwb-cta-card-bg);\n    border: 4px solid var(--rwb-cta-text);\n    box-shadow: 12px 12px 0px var(--rwb-cta-shadow);\n    padding: 28px;\n    position: relative;\n  }\n\n  .rwb-ticket-label {\n    font-family: var(--rwb-cta-font-heading);\n    font-size: 0.9rem;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n    display: block;\n    letter-spacing: 0.5px;\n  }\n\n  \/* GRID INTERACTIVE OPTIONS *\/\n  .rwb-ticket-options {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 10px;\n    margin-bottom: 20px;\n  }\n\n  .rwb-opt-btn {\n    background-color: #FFFFFF;\n    border: 3px solid var(--rwb-cta-text);\n    padding: 10px 14px;\n    font-family: var(--rwb-cta-font);\n    font-weight: 700;\n    font-size: 0.85rem;\n    cursor: pointer;\n    text-align: left;\n    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;\n    box-shadow: 4px 4px 0px var(--rwb-cta-shadow);\n  }\n\n  .rwb-opt-btn.is-selected {\n    background-color: var(--rwb-cta-accent-yellow); \/* Highlight saat terpilih *\/\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0px var(--rwb-cta-shadow);\n  }\n\n  \/* ENGINE STATS OUTPUT *\/\n  .rwb-ticket-engine-stats {\n    background-color: #111111;\n    color: #FFFFFF;\n    padding: 14px;\n    border: 3px solid var(--rwb-cta-text);\n    font-family: monospace;\n    font-size: 0.8rem;\n    margin-bottom: 20px;\n    line-height: 1.5;\n  }\n\n  .rwb-ticket-engine-stats span {\n    color: var(--rwb-cta-accent-yellow);\n    font-weight: bold;\n  }\n\n  \/* SUBMIT BUTTON BRUTAL *\/\n  .rwb-submit-ticket-btn {\n    display: block;\n    width: 100%;\n    background-color: var(--rwb-cta-accent-purple);\n    color: #FFFFFF;\n    border: 4px solid var(--rwb-cta-text);\n    padding: 14px;\n    font-family: var(--rwb-cta-font-heading);\n    font-size: 1.05rem; \/* Downsized *\/\n    text-transform: uppercase;\n    cursor: pointer;\n    box-shadow: 6px 6px 0px var(--rwb-cta-shadow);\n    text-align: center;\n    transition: transform 0.1s ease, box-shadow 0.1s ease;\n  }\n\n  .rwb-submit-ticket-btn:hover {\n    transform: translate(3px, 3px);\n    box-shadow: 3px 3px 0px var(--rwb-cta-shadow);\n  }\n\n  \/* ==========================================================\n     BRUTALIST TOAST NOTIFICATION SYSTEM (TOP SLIDE OVERLAY)\n     ========================================================== *\/\n  .rwb-toast-overlay {\n    position: fixed;\n    top: -200px; \/* Sembunyi di atas *\/\n    left: 50%;\n    transform: translateX(-50%);\n    width: 90%;\n    max-width: 420px;\n    background-color: #FFFFFF;\n    border: 4px solid var(--rwb-cta-text);\n    box-shadow: 8px 8px 0px var(--rwb-cta-shadow);\n    padding: 20px;\n    z-index: 999999;\n    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  .rwb-toast-overlay.is-toast-visible {\n    top: 30px; \/* Muncul pas di-trigger *\/\n  }\n\n  .rwb-toast-text {\n    font-size: 0.9rem;\n    font-weight: 700;\n    color: var(--rwb-cta-text);\n    line-height: 1.4;\n    margin-bottom: 14px;\n  }\n\n  .rwb-toast-wa-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-center: center;\n    gap: 8px;\n    background-color: #00FF66; \/* Hijau WA murni *\/\n    color: #000000;\n    border: 3px solid var(--rwb-cta-text);\n    padding: 8px 16px;\n    font-family: var(--rwb-cta-font-heading);\n    font-size: 0.85rem;\n    text-transform: uppercase;\n    text-decoration: none;\n    box-shadow: 4px 4px 0px var(--rwb-cta-shadow);\n    width: 100%;\n    box-sizing: border-box;\n    text-align: center;\n    justify-content: center;\n  }\n\n  .rwb-toast-wa-btn:active {\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0px var(--rwb-cta-shadow);\n  }\n\n  \/* === ANIMASI INTERSECTION OBSERVER SINKRON === *\/\n  .rwb-cta-section.rwb-cta-ready .rwb-cta-info,\n  .rwb-cta-section.rwb-cta-ready .rwb-ticket-box {\n    opacity: 0;\n    transform: translateY(40px) rotate(0.5deg);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);\n    will-change: opacity, transform;\n  }\n\n  .rwb-cta-section.rwb-cta-ready.is-cta-visible .rwb-cta-info {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n\n  .rwb-cta-section.rwb-cta-ready.is-cta-visible .rwb-ticket-box {\n    opacity: 1;\n    transform: translateY(0) rotate(0deg);\n    transition-delay: 0.3s;\n  }\n\n  \/* MEDIA RESPONSIVE SYSTEM *\/\n  @media (max-width: 768px) {\n    .rwb-cta-section {\n      padding: 60px 20px;\n    }\n    .rwb-cta-container {\n      grid-template-columns: 1fr;\n      gap: 36px;\n    }\n    .rwb-ticket-options {\n      grid-template-columns: 1fr;\n      gap: 8px;\n    }\n    .rwb-ticket-box {\n      padding: 20px;\n    }\n    \/* KECILIN TOTAL SUBMIT TEXT DI HP (ANTI-KEBESARAN) *\/\n    .rwb-submit-ticket-btn {\n      font-size: 0.9rem;\n      padding: 12px;\n    }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE -->\n<section class=\"rwb-cta-section\" id=\"rwbCtaSection\">\n  <div class=\"rwb-cta-container\">\n    \n    <!-- LEFT SIDE: RAW INFO -->\n    <div class=\"rwb-cta-info\">\n      <div class=\"rwb-cta-status\">\n        <div class=\"rwb-status-blink\"><\/div>\n        [ SYSTEM STATUS: OPEN FOR 2 SLOTS ]\n      <\/div>\n      <h2 class=\"rwb-cta-title\">LAUNCH YOUR NEXT <span>PROJECT<\/span> NOW<\/h2>\n      <p class=\"rwb-cta-desc\">\n        Pilih jenis tiket kebutuhan lo di sebelah kanan. Sistem bakal otomatis nge-kalkulasi antrean slot pengerjaan secara riil time.\n      <\/p>\n    <\/div>\n\n    <!-- RIGHT SIDE: INTERACTIVE TICKETING BOX -->\n    <div class=\"rwb-ticket-box\">\n      <span class=\"rwb-ticket-label\">1. SELECT TICKET TYPE:<\/span>\n      \n      <div class=\"rwb-ticket-options\">\n        <button class=\"rwb-opt-btn is-selected\" data-time=\"7-10 Days\" data-complexity=\"Medium\">Landing Page<\/button>\n        <button class=\"rwb-opt-btn\" data-time=\"14-21 Days\" data-complexity=\"High\">E-Commerce<\/button>\n        <button class=\"rwb-opt-btn\" data-time=\"20-30 Days\" data-complexity=\"Critical\">Web Application<\/button>\n        <button class=\"rwb-opt-btn\" data-time=\"5-7 Days\" data-complexity=\"Low\">UI\/UX Redesign<\/button>\n      <\/div>\n\n      <span class=\"rwb-ticket-label\">2. SYSTEM CALCULATION:<\/span>\n      <div class=\"rwb-ticket-engine-stats\">\n        <div>> COMPILING STACK... <span style=\"color:#00FF66;\">[SUCCESS]<\/span><\/div>\n        <div>> EST. TIMELINE: <span id=\"rwbEstTime\">7-10 Days<\/span><\/div>\n        <div>> COMPLEXITY : <span id=\"rwbEstComp\" style=\"color:#FF006E;\">Medium<\/span><\/div>\n      <\/div>\n\n      <!-- TRIGGER BUTTON -->\n      <button class=\"rwb-submit-ticket-btn\" id=\"rwbSubmitTicket\">\n        SUBMIT TICKET TO DEV ->\n      <\/button>\n    <\/div>\n\n  <\/div>\n\n  <!-- TOAST NOTIFICATION OVERLAY -->\n  <div class=\"rwb-toast-overlay\" id=\"rwbToastOverlay\">\n    <div class=\"rwb-toast-text\">\n      \ud83d\udce7 My email is on vacation. \ud83d\ude06 WhatsApp = Fast Reply! \u26a1\n    <\/div>\n    <!-- LINK DIARAHKAN LANGSUNG KE NOMOR WHATSAPP -->\n    <a href=\"https:\/\/wa.me\/6281227008020?text=Hi,%20I%20just%20submitted%20a%20project%20ticket%20on%20your%20website.\" class=\"rwb-toast-wa-btn\" target=\"_blank\">\n      LAUNCH WHATSAPP ->\n    <\/a>\n  <\/div>\n<\/section>\n\n<!-- ENGINE INTERACTIVE JS + OBSERVER SINKRON -->\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbCtaSection');\n      if(!section) return;\n\n      \/\/ 1. OBSERVER SINKRON FORMULA SAKTI\n      section.classList.add('rwb-cta-ready');\n      let isCtaAnimated = false;\n\n      function startCtaAnimations() {\n        if (isCtaAnimated) return;\n        isCtaAnimated = true;\n        section.classList.add('is-cta-visible');\n      }\n\n      const ctaObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(startCtaAnimations, 200); \n            ctaObserver.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.2,                  \n        rootMargin: '0px 0px -80px 0px'  \n      });\n      \n      ctaObserver.observe(section);\n\n      \/\/ 2. LIVE TICKET ENGINE LOGIC\n      const optButtons = section.querySelectorAll('.rwb-opt-btn');\n      const timeDisplay = document.getElementById('rwbEstTime');\n      const compDisplay = document.getElementById('rwbEstComp');\n      const submitBtn = document.getElementById('rwbSubmitTicket');\n      const toast = document.getElementById('rwbToastOverlay');\n\n      optButtons.forEach(btn => {\n        btn.addEventListener('click', function() {\n          optButtons.forEach(b => b.classList.remove('is-selected'));\n          this.classList.add('is-selected');\n\n          const time = this.getAttribute('data-time');\n          const complexity = this.getAttribute('data-complexity');\n\n          timeDisplay.innerText = time;\n          compDisplay.innerText = complexity;\n        });\n      });\n\n      \/\/ 3. TOAST TRIGGER SYSTEM\n      submitBtn.addEventListener('click', function(e) {\n        e.preventDefault();\n        \n        \/\/ Munculkan toast overlay dari atas\n        toast.classList.add('is-toast-visible');\n\n        \/\/ Otomatis tutup toast setelah 8 detik jika user tidak klik apa-apa\n        setTimeout(() => {\n          toast.classList.remove('is-toast-visible');\n        }, 8000);\n      });\n\n      \/\/ Tutup otomatis kalau user ngeklik di luar area toast untuk kenyamanan UX\n      document.addEventListener('click', function(e) {\n        if (!toast.contains(e.target) && e.target !== submitBtn) {\n          toast.classList.remove('is-toast-visible');\n        }\n      });\n\n    } catch(err) {\n      console.error(\"CTA Section Core Error:\", err);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-da3e566 e-con-full e-flex e-con e-parent\" data-id=\"da3e566\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adb5aca elementor-widget elementor-widget-html\" data-id=\"adb5aca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* ==========================================================\n     RWB - NEO BRUTALISM: BLUEPRINT PROCESS (CANVAS WHITE)\n     ========================================================== *\/\n  \n  .rwb-process-section {\n    --rwb-proc-bg: #FFFFFF; \/* KUNCI MATI: Canvas Tetap Putih Bersih *\/\n    --rwb-proc-text: #000000;\n    --rwb-proc-shadow: #000000;\n    --rwb-proc-accent-green: #00FF66; \/* Aksen highlight: Hijau Laser Siber *\/\n    --rwb-proc-font: 'Space Grotesk', sans-serif;\n    --rwb-proc-font-heading: 'Archivo Black', sans-serif;\n\n    font-family: var(--rwb-proc-font);\n    background-color: var(--rwb-proc-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-proc-text);\n  }\n\n  .rwb-process-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* HEADER ZONE *\/\n  .rwb-process-header {\n    margin-bottom: 60px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n\n  .rwb-process-tag {\n    display: inline-block;\n    background-color: var(--rwb-proc-text);\n    color: var(--rwb-proc-bg);\n    font-weight: 700;\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    align-self: flex-start;\n  }\n\n  .rwb-process-title {\n    font-family: var(--rwb-proc-font-heading);\n    font-size: clamp(1.8rem, 3.5vw, 2.6rem); \/* Ukuran standard sinkron *\/\n    line-height: 1.1;\n    color: var(--rwb-proc-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-process-title span {\n    background-color: var(--rwb-proc-accent-green);\n    color: var(--rwb-proc-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-proc-text);\n    box-shadow: 4px 4px 0px var(--rwb-proc-shadow);\n  }\n\n  \/* BLUEPRINT VERTICAL TRACK *\/\n  .rwb-process-flow {\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n    position: relative;\n  }\n\n  \/* Garis putus-putus arsitektur di background (Hanya aktif di desktop) *\/\n  @media (min-width: 769px) {\n    .rwb-process-flow::before {\n      content: '';\n      position: absolute;\n      left: 45px;\n      top: 20px;\n      bottom: 20px;\n      width: 4px;\n      border-left: 4px dashed var(--rwb-proc-text);\n      z-index: 1;\n    }\n  }\n\n  \/* STEPS CARD *\/\n  .rwb-process-node {\n    display: grid;\n    grid-template-columns: 90px 1fr;\n    gap: 24px;\n    align-items: flex-start;\n    position: relative;\n    z-index: 2;\n  }\n\n  \/* INDEX BOX *\/\n  .rwb-process-index {\n    background-color: #FFFFFF;\n    border: 3px solid var(--rwb-proc-text);\n    box-shadow: 4px 4px 0px var(--rwb-proc-shadow);\n    font-family: var(--rwb-proc-font-heading);\n    font-size: 1.2rem;\n    color: var(--rwb-proc-text);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 0;\n    text-align: center;\n    position: relative;\n  }\n\n  \/* CONTENT BLOCK *\/\n  .rwb-process-body {\n    background-color: #FFFFFF;\n    border: 4px solid var(--rwb-proc-text);\n    box-shadow: 6px 6px 0px var(--rwb-proc-shadow);\n    padding: 24px;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 24px;\n    align-items: center;\n  }\n\n  .rwb-process-meta h3 {\n    font-family: var(--rwb-proc-font-heading);\n    font-size: 1.1rem;\n    text-transform: uppercase;\n    margin: 0 0 6px 0;\n    line-height: 1.2;\n    letter-spacing: -0.3px;\n  }\n\n  .rwb-process-status-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: monospace;\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    background-color: #000000;\n    color: #FFFFFF;\n    padding: 2px 8px;\n  }\n\n  .rwb-process-dot {\n    width: 6px;\n    height: 6px;\n    background-color: var(--rwb-proc-accent-green);\n    border-radius: 50%;\n  }\n\n  .rwb-process-desc {\n    font-size: 0.9rem; \/* Downsized total, rapi semodel arsip *\/\n    line-height: 1.5;\n    color: #222222;\n    margin: 0;\n    font-weight: 500;\n  }\n\n  \/* === ANIMASI INTERSECTION OBSERVER SINKRON === *\/\n  .rwb-process-section.rwb-proc-ready .rwb-process-header,\n  .rwb-process-section.rwb-proc-ready .rwb-process-node {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);\n    will-change: opacity, transform;\n  }\n\n  .rwb-process-section.rwb-proc-ready.is-proc-visible .rwb-process-header {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n\n  .rwb-process-section.rwb-proc-ready.is-proc-visible .rwb-process-node {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* Stagger delay manual biar mengalir pas di-scroll *\/\n  .rwb-process-section.rwb-proc-ready.is-proc-visible .rwb-process-node:nth-child(1) { transition-delay: 0.2s; }\n  .rwb-process-section.rwb-proc-ready.is-proc-visible .rwb-process-node:nth-child(2) { transition-delay: 0.35s; }\n  .rwb-process-section.rwb-proc-ready.is-proc-visible .rwb-process-node:nth-child(3) { transition-delay: 0.5s; }\n\n  \/* RESPONSIVE LAYOUT HP (MUTLAK ANTI-PECAH) *\/\n  @media (max-width: 768px) {\n    .rwb-process-section {\n      padding: 60px 20px;\n    }\n    .rwb-process-header {\n      margin-bottom: 40px;\n    }\n    .rwb-process-node {\n      grid-template-columns: 1fr; \/* Hancurkan grid sampingan di mobile *\/\n      gap: 12px;\n    }\n    .rwb-process-index {\n      width: 50px;\n      padding: 6px 0;\n      font-size: 1rem;\n    }\n    .rwb-process-body {\n      grid-template-columns: 1fr;\n      gap: 12px;\n      padding: 16px;\n    }\n    .rwb-process-desc {\n      font-size: 0.85rem;\n    }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE -->\n<section class=\"rwb-process-section\" id=\"rwbProcessSection\">\n  <div class=\"rwb-process-container\">\n    \n    <!-- SECTION HEADER -->\n    <div class=\"rwb-process-header\">\n      <span class=\"rwb-process-tag\">\/\/ ENGINE BLUEPRINT<\/span>\n      <h2 class=\"rwb-process-title\">WORK PROCESS <span>PIPELINE<\/span><\/h2>\n    <\/div>\n\n    <!-- PIPELINE FLOW -->\n    <div class=\"rwb-process-flow\">\n      \n      <!-- STEP 01 -->\n      <div class=\"rwb-process-node\">\n        <div class=\"rwb-process-index\">P_01<\/div>\n        <div class=\"rwb-process-body\">\n          <div class=\"rwb-process-meta\">\n            <h3>RECONNAISSANCE<\/h3>\n            <div class=\"rwb-process-status-tag\">\n              <div class=\"rwb-process-dot\"><\/div>\n              BRIEF & ASSETS\n            <\/div>\n          <\/div>\n          <p class=\"rwb-process-desc\">\n            Once you submit the ticket, we lock the wireframe and requirements. All digital brand assets, copy docs, and access tokens must be cleared before the deployment engine triggers.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- STEP 02 -->\n      <div class=\"rwb-process-node\">\n        <div class=\"rwb-process-index\">P_02<\/div>\n        <div class=\"rwb-process-body\">\n          <div class=\"rwb-process-meta\">\n            <h3>ARCHITECTURE<\/h3>\n            <div class=\"rwb-process-status-tag\">\n              <div class=\"rwb-process-dot\"><\/div>\n              PRODUCTION RUN\n            <\/div>\n          <\/div>\n          <p class=\"rwb-process-desc\">\n            No bloated framework. Writing pure clean-coded layouts with pixel-perfect response mapping. Building the system core with blazing fast render speed directly inside the isolated terminal environment.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- STEP 03 -->\n      <div class=\"rwb-process-node\">\n        <div class=\"rwb-process-index\">P_03<\/div>\n        <div class=\"rwb-process-body\">\n          <div class=\"rwb-process-meta\">\n            <h3>DEPLOYMENT<\/h3>\n            <div class=\"rwb-process-status-tag\">\n              <div class=\"rwb-process-dot\"><\/div>\n              LIVE HANDOFF\n            <\/div>\n          <\/div>\n          <p class=\"rwb-process-desc\">\n            Staging environment testing is completed. Final handshake triggered, final balance cleared, and the core ecosystem is securely migrated directly to your production server or hosting domain.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- ENGINE INTERACTIVE JS + SINKRONISASI SCROLL -->\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbProcessSection');\n      if(!section) return;\n\n      \/\/ ENGINE INTERSECTION OBSERVER FORMULA SAKTI LO\n      section.classList.add('rwb-proc-ready');\n      let isProcAnimated = false;\n\n      function startProcAnimations() {\n        if (isProcAnimated) return;\n        isProcAnimated = true;\n        section.classList.add('is-proc-visible');\n      }\n\n      const procObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(startProcAnimations, 200); \/\/ Ritme delay 200ms\n            procObserver.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.2,\n        rootMargin: '0px 0px -80px 0px'\n      });\n      \n      procObserver.observe(section);\n\n    } catch(err) {\n      console.error(\"Process Section Core Error:\", err);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fff7056 e-con-full e-flex e-con e-parent\" data-id=\"fff7056\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47f9a38 elementor-widget elementor-widget-html\" data-id=\"47f9a38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* ==========================================================\n     RWB - NEO BRUTALISM: TECH MATRIX v2 (CANVAS WHITE)\n     ========================================================== *\/\n  \n  .rwb-matrix-section {\n    --rwb-mat-bg: #FFFFFF; \/* KUNCI MATI: Canvas Tetap Putih Bersih *\/\n    --rwb-mat-text: #000000;\n    --rwb-mat-shadow: #000000;\n    --rwb-mat-font: 'Space Grotesk', sans-serif;\n    --rwb-mat-font-heading: 'Archivo Black', sans-serif;\n\n    \/* PALET WARNA STATUS DINAMIS (BRUTAL & KONTRAS) *\/\n    --tag-active: #00F5D4;   \/* Cyan *\/\n    --tag-stable: #7000FF;   \/* Ungu (Teks Putih) *\/\n    --tag-core: #FF0055;     \/* Merah *\/\n    --tag-ready: #FFE600;    \/* Kuning *\/\n    --tag-heavy: #FF6B00;    \/* Oranye *\/\n    --tag-opt: #00FF66;      \/* Hijau *\/\n\n    font-family: var(--rwb-mat-font);\n    background-color: var(--rwb-mat-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-mat-text);\n  }\n\n  .rwb-matrix-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* HEADER ZONE *\/\n  .rwb-matrix-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n\n  .rwb-matrix-tag {\n    display: inline-block;\n    background-color: var(--rwb-mat-text);\n    color: var(--rwb-mat-bg);\n    font-weight: 700;\n    padding: 4px 12px;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    align-self: flex-start;\n  }\n\n  .rwb-matrix-title {\n    font-family: var(--rwb-mat-font-heading);\n    font-size: clamp(1.8rem, 3.5vw, 2.6rem);\n    line-height: 1.1;\n    color: var(--rwb-mat-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-matrix-title span {\n    background-color: #000000;\n    color: #FFFFFF;\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-mat-text);\n    box-shadow: 4px 4px 0px var(--rwb-mat-shadow);\n  }\n\n  \/* MATRIX GRID SYSTEM *\/\n  .rwb-matrix-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n  }\n\n  .rwb-matrix-cell {\n    background-color: #FFFFFF;\n    border: 4px solid var(--rwb-mat-text);\n    box-shadow: 6px 6px 0px var(--rwb-mat-shadow);\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  @media (min-width: 769px) {\n    .rwb-matrix-cell:hover {\n      transform: translate(-3px, -3px);\n      box-shadow: 10px 10px 0px var(--rwb-mat-shadow);\n    }\n  }\n\n  .rwb-cell-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .rwb-cell-code {\n    font-family: monospace;\n    font-size: 0.75rem;\n    font-weight: 700;\n    color: #666666;\n  }\n\n  \/* UTILITY CLASS FOR DYNAMIC TAGS *\/\n  .rwb-cell-status {\n    font-family: monospace;\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    border: 2px solid var(--rwb-mat-text);\n    padding: 2px 6px;\n    box-shadow: 2px 2px 0px var(--rwb-mat-shadow);\n  }\n\n  .rwb-cell-name {\n    font-family: var(--rwb-mat-font-heading);\n    font-size: 1.2rem;\n    text-transform: uppercase;\n    margin: 0;\n    line-height: 1.1;\n  }\n\n  \/* HARDWARE STAT BAR *\/\n  .rwb-cell-bar-container {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .rwb-bar-label {\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: #333333;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .rwb-bar-track {\n    width: 100%;\n    height: 12px;\n    background-color: rgba(0,0,0,0.06);\n    border: 2px solid var(--rwb-mat-text);\n    position: relative;\n    overflow: hidden;\n  }\n\n  .rwb-bar-fill {\n    height: 100%;\n    border-right: 2px solid var(--rwb-mat-text);\n    width: 0%; \n    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  \/* INJEKSI WARNA BERPASANGAN (TAG + BAR FILL) *\/\n  .status-active .rwb-cell-status { background-color: var(--tag-active); color: #000; }\n  .status-active .rwb-bar-fill { background-color: var(--tag-active); }\n\n  .status-stable .rwb-cell-status { background-color: var(--tag-stable); color: #FFF; }\n  .status-stable .rwb-bar-fill { background-color: var(--tag-stable); }\n\n  .status-core .rwb-cell-status { background-color: var(--tag-core); color: #FFF; }\n  .status-core .rwb-bar-fill { background-color: var(--tag-core); }\n\n  .status-ready .rwb-cell-status { background-color: var(--tag-ready); color: #000; }\n  .status-ready .rwb-bar-fill { background-color: var(--tag-ready); }\n\n  .status-heavy .rwb-cell-status { background-color: var(--tag-heavy); color: #FFF; }\n  .status-heavy .rwb-bar-fill { background-color: var(--tag-heavy); }\n\n  .status-opt .rwb-cell-status { background-color: var(--tag-opt); color: #000; }\n  .status-opt .rwb-bar-fill { background-color: var(--tag-opt); }\n\n\n  \/* === ANIMASI INTERSECTION OBSERVER SINKRON === *\/\n  .rwb-matrix-section.rwb-mat-ready .rwb-matrix-header,\n  .rwb-matrix-section.rwb-mat-ready .rwb-matrix-cell {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);\n    will-change: opacity, transform;\n  }\n\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-header {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* Stagger Delay Desktop *\/\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell:nth-child(1) { transition-delay: 0.15s; }\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell:nth-child(2) { transition-delay: 0.25s; }\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell:nth-child(3) { transition-delay: 0.35s; }\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell:nth-child(4) { transition-delay: 0.45s; }\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell:nth-child(5) { transition-delay: 0.55s; }\n  .rwb-matrix-section.rwb-mat-ready.is-mat-visible .rwb-matrix-cell:nth-child(6) { transition-delay: 0.65s; }\n\n\n  \/* ==========================================================\n     RESPONSIVE BREAKDOWN & SWIPE PEEK LAYOUT (MOBILE ONLY)\n     ========================================================== *\/\n  @media (max-width: 900px) {\n    .rwb-matrix-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  @media (max-width: 768px) {\n    .rwb-matrix-section {\n      padding: 60px 0px 60px 20px; \/* Padding kanan dimatikan biar swipe overflow lepas *\/\n    }\n    \n    .rwb-matrix-header {\n      padding-right: 20px;\n      margin-bottom: 30px;\n    }\n\n    \/* SISTEM SWIPE PEEK MURNI CSS SNAP *\/\n    .rwb-matrix-grid {\n      display: flex;\n      flex-direction: row;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      gap: 16px;\n      padding-bottom: 20px; \/* Ruang untuk bayangan box agar tidak terpotong *\/\n      padding-right: 20px; \/* Memberikan padding akhir slide *\/\n    }\n\n    .rwb-matrix-grid::-webkit-scrollbar {\n      display: none; \/* Sembunyikan scrollbar bawaan hp biar mulus *\/\n    }\n\n    .rwb-matrix-cell {\n      flex: 0 0 78%; \/* KUNCI PEEK: Kartu selanjutnya otomatis mengintip 22% *\/\n      scroll-snap-align: start;\n      padding: 20px;\n      box-shadow: 4px 4px 0px var(--rwb-mat-shadow);\n    }\n\n    .rwb-cell-name {\n      font-size: 1.1rem;\n    }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE -->\n<section class=\"rwb-matrix-section\" id=\"rwbMatrixSection\">\n  <div class=\"rwb-matrix-container\">\n    \n    <!-- SECTION HEADER -->\n    <div class=\"rwb-matrix-header\">\n      <span class=\"rwb-matrix-tag\">\/\/ SYSTEM CORES<\/span>\n      <h2 class=\"rwb-matrix-title\">CORE TECH <span>MATRIX<\/span><\/h2>\n    <\/div>\n\n    <!-- MATRIX GRID (SUPPORT AUTOMATIC SWIPE PEEK) -->\n    <div class=\"rwb-matrix-grid\">\n      \n      <!-- ITEM 1: NEXT.JS (ACTIVE \/ CYAN) -->\n      <div class=\"rwb-matrix-cell status-active\">\n        <div class=\"rwb-cell-top\">\n          <span class=\"rwb-cell-code\">SYS_ENG_01<\/span>\n          <span class=\"rwb-cell-status\">ACTIVE<\/span>\n        <\/div>\n        <h3 class=\"rwb-cell-name\">Next.js \/ React<\/h3>\n        <div class=\"rwb-cell-bar-container\">\n          <div class=\"rwb-bar-label\">\n            <span>STABILITY<\/span>\n            <span>95%<\/span>\n          <\/div>\n          <div class=\"rwb-bar-track\">\n            <div class=\"rwb-bar-fill\" data-width=\"95%\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ITEM 2: TYPESCRIPT (STABLE \/ PURPLE) -->\n      <div class=\"rwb-matrix-cell status-stable\">\n        <div class=\"rwb-cell-top\">\n          <span class=\"rwb-cell-code\">SYS_ENG_02<\/span>\n          <span class=\"rwb-cell-status\">STABLE<\/span>\n        <\/div>\n        <h3 class=\"rwb-cell-name\">TypeScript<\/h3>\n        <div class=\"rwb-cell-bar-container\">\n          <div class=\"rwb-bar-label\">\n            <span>TYPE_SAFETY<\/span>\n            <span>90%<\/span>\n          <\/div>\n          <div class=\"rwb-bar-track\">\n            <div class=\"rwb-bar-fill\" data-width=\"90%\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ITEM 3: VANILLA JS (CORE \/ RED) -->\n      <div class=\"rwb-matrix-cell status-core\">\n        <div class=\"rwb-cell-top\">\n          <span class=\"rwb-cell-code\">SYS_ENG_03<\/span>\n          <span class=\"rwb-cell-status\">CORE<\/span>\n        <\/div>\n        <h3 class=\"rwb-cell-name\">Vanilla ES6+<\/h3>\n        <div class=\"rwb-cell-bar-container\">\n          <div class=\"rwb-bar-label\">\n            <span>EXEC_SPEED<\/span>\n            <span>98%<\/span>\n          <\/div>\n          <div class=\"rwb-bar-track\">\n            <div class=\"rwb-bar-fill\" data-width=\"98%\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ITEM 4: TAILWIND CSS (READY \/ YELLOW) -->\n      <div class=\"rwb-matrix-cell status-ready\">\n        <div class=\"rwb-cell-top\">\n          <span class=\"rwb-cell-code\">SYS_STYLE_01<\/span>\n          <span class=\"rwb-cell-status\">READY<\/span>\n        <\/div>\n        <h3 class=\"rwb-cell-name\">Tailwind \/ CSS<\/h3>\n        <div class=\"rwb-cell-bar-container\">\n          <div class=\"rwb-bar-label\">\n            <span>RESPONSIVE<\/span>\n            <span>95%<\/span>\n          <\/div>\n          <div class=\"rwb-bar-track\">\n            <div class=\"rwb-bar-fill\" data-width=\"95%\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ITEM 5: NODEJS (HEAVY \/ ORANGE) -->\n      <div class=\"rwb-matrix-cell status-heavy\">\n        <div class=\"rwb-cell-top\">\n          <span class=\"rwb-cell-code\">SYS_BACK_01<\/span>\n          <span class=\"rwb-cell-status\">HEAVY<\/span>\n        <\/div>\n        <h3 class=\"rwb-cell-name\">Node.js Ecosystem<\/h3>\n        <div class=\"rwb-cell-bar-container\">\n          <div class=\"rwb-bar-label\">\n            <span>DATA_LOAD<\/span>\n            <span>85%<\/span>\n          <\/div>\n          <div class=\"rwb-bar-track\">\n            <div class=\"rwb-bar-fill\" data-width=\"85%\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ITEM 6: API ARCHITECTURE (OPTIMIZED \/ GREEN) -->\n      <div class=\"rwb-matrix-cell status-opt\">\n        <div class=\"rwb-cell-top\">\n          <span class=\"rwb-cell-code\">SYS_DATA_02<\/span>\n          <span class=\"rwb-cell-status\">OPTIMIZED<\/span>\n        <\/div>\n        <h3 class=\"rwb-cell-name\">API Architecture<\/h3>\n        <div class=\"rwb-cell-bar-container\">\n          <div class=\"rwb-bar-label\">\n            <span>THROUGHPUT<\/span>\n            <span>88%<\/span>\n          <\/div>\n          <div class=\"rwb-bar-track\">\n            <div class=\"rwb-bar-fill\" data-width=\"88%\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- ENGINE INTERACTIVE JS + SINKRONISASI SCROLL -->\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbMatrixSection');\n      if(!section) return;\n\n      \/\/ ENGINE INTERSECTION OBSERVER SAKTI SINKRON 200MS\n      section.classList.add('rwb-mat-ready');\n      let isMatAnimated = false;\n\n      function startMatAnimations() {\n        if (isMatAnimated) return;\n        isMatAnimated = true;\n        section.classList.add('is-mat-visible');\n\n        \/\/ ANIMASI FILL BAR BERJALAN SESUAI TARGET DATA ATRIBUT\n        const bars = section.querySelectorAll('.rwb-bar-fill');\n        bars.forEach(bar => {\n          const targetWidth = bar.getAttribute('data-width');\n          bar.style.width = targetWidth;\n        });\n      }\n\n      const matObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(startMatAnimations, 200); \n            matObserver.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.2,\n        rootMargin: '0px 0px -80px 0px'\n      });\n      \n      matObserver.observe(section);\n\n    } catch(err) {\n      console.error(\"Matrix Section Core Error:\", err);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4ca1395 e-con-full e-flex e-con e-parent\" data-id=\"4ca1395\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-761573a elementor-widget elementor-widget-html\" data-id=\"761573a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* ==========================================================\n     RWB - NEO BRUTALISM: PREMIUM DARK\/GREY FOOTER (REVISED)\n     ========================================================== *\/\n  \n  \/* SCOPED VARIABLES: Terisolasi penuh di dalam komponen footer, gampang diganti warna canvasnya *\/\n  .rwb-footer-section {\n    --rwb-foot-bg: #1A1A1A;              \/* Canvas Gelap \/ Grey Premium *\/\n    --rwb-foot-text-light: #FFFFFF;      \/* Teks utama putih bersih *\/\n    --rwb-foot-text-muted: #A0A0A0;      \/* Teks sekunder abu-abu soft *\/\n    --rwb-foot-border: #FFFFFF;          \/* Garis border putih kontras *\/\n    --rwb-foot-accent-flash: #CCFF00;    \/* Neon Lime Yellow untuk animasi berkedip *\/\n    --rwb-foot-hover-bg: #FF006E;        \/* Neon Pink untuk hover Back to Top *\/\n    --rwb-foot-pulse-color: #00F5D4;     \/* Cyan untuk status aktif *\/\n    --rwb-foot-font-body: 'Space Grotesk', sans-serif;\n    --rwb-foot-font-heading: 'Archivo Black', sans-serif;\n\n    \/* Base Layout Styles *\/\n    font-family: var(--rwb-foot-font-body);\n    background-color: var(--rwb-foot-bg);\n    color: var(--rwb-foot-text-light);\n    padding: 60px 40px;\n    border-top: 4px solid var(--rwb-foot-border); \/* Garis pembatas tegas top section *\/\n    position: relative;\n    overflow: hidden;\n  }\n\n  .rwb-foot-container {\n    max-width: 1000px; \/* Lebar container disamakan rata dengan seksi di atasnya *\/\n    margin: 0 auto;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n  }\n\n  \/* Baris Utama Atas *\/\n  .rwb-foot-main-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  \/* Elemen Logo \/ Branding *\/\n  .rwb-foot-brand {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .rwb-foot-logo {\n    font-family: var(--rwb-foot-font-heading);\n    font-size: 1.5rem;\n    text-transform: uppercase;\n    line-height: 1;\n    letter-spacing: -0.02em;\n    margin: 0;\n    color: var(--rwb-foot-text-light);\n  }\n\n  .rwb-foot-tagline {\n    font-size: 0.85rem;\n    font-weight: 500;\n    color: var(--rwb-foot-text-muted);\n    margin: 0;\n  }\n\n  \/* Status Ketersediaan Proyek (Availability Dashboard) *\/\n  .rwb-foot-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    border: 3px solid var(--rwb-foot-border);\n    padding: 8px 16px;\n    background-color: transparent;\n    box-shadow: 4px 4px 0px var(--rwb-foot-border);\n    font-weight: 700;\n    font-size: 0.85rem;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  \/* Efek denyut lampu indikator proyek *\/\n  .rwb-foot-pulse-dot {\n    width: 10px;\n    height: 10px;\n    background-color: var(--rwb-foot-pulse-color);\n    border: 2px solid var(--rwb-foot-bg);\n    border-radius: 50%;\n    position: relative;\n  }\n\n  .rwb-foot-pulse-dot::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: -2px;\n    left: -2px;\n    border-radius: 50%;\n    border: 2px solid var(--rwb-foot-pulse-color);\n    animation: rwbFootPulse 1.8s infinite ease-out;\n    opacity: 0.6;\n  }\n\n  @keyframes rwbFootPulse {\n    0% { transform: scale(1); opacity: 1; }\n    100% { transform: scale(2.5); opacity: 0; }\n  }\n\n  \/* Baris Bawah (Copyright & Control) *\/\n  .rwb-foot-bottom-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 2px dashed var(--rwb-foot-border);\n    padding-top: 24px;\n    width: 100%;\n  }\n\n  \/* Text Copyright Style Base *\/\n  .rwb-foot-copy {\n    font-size: 0.85rem;\n    font-weight: 700;\n    margin: 0;\n    color: var(--rwb-foot-text-light);\n    line-height: 1.6;\n  }\n\n  \/* ANIMASI BERKEDIP KONTRAS DENGAN LINK LINK KE WHATSAPP *\/\n  .rwb-foot-copy a.rwb-flash-credit-link {\n    color: var(--rwb-foot-accent-flash);\n    text-transform: uppercase;\n    text-decoration: none;\n    display: inline-block;\n    animation: rwbNeonBlink 1.5s infinite steps(2, start);\n    padding: 0 4px;\n    border: 1px dashed transparent;\n    transition: border 0.2s ease;\n  }\n\n  .rwb-foot-copy a.rwb-flash-credit-link:hover {\n    border-color: var(--rwb-foot-accent-flash);\n  }\n\n  @keyframes rwbNeonBlink {\n    0%, 100% {\n      opacity: 1;\n      text-shadow: 0 0 8px var(--rwb-foot-accent-flash);\n    }\n    50% {\n      opacity: 0.3;\n      text-shadow: none;\n    }\n  }\n\n  \/* Tombol Back to Top Kotak Elegan *\/\n  .rwb-foot-top-btn {\n    font-family: var(--rwb-foot-font-heading);\n    font-size: 0.9rem;\n    text-transform: uppercase;\n    background-color: transparent;\n    color: var(--rwb-foot-text-light);\n    border: 3px solid var(--rwb-foot-border);\n    padding: 10px 14px;\n    box-shadow: 4px 4px 0px var(--rwb-foot-border);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  \/* Warna hover text back to top jadi neon pink *\/\n  .rwb-foot-top-btn:hover {\n    transform: translate(3px, 3px);\n    box-shadow: 1px 1px 0px var(--rwb-foot-border);\n    background-color: var(--rwb-foot-hover-bg); \n    color: var(--rwb-foot-text-light);          \n  }\n\n  \/* ==========================================================\n     MOBILE RESPONSIVE LAYOUT (< 768px)\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-footer-section {\n      padding: 40px 20px;\n    }\n\n    .rwb-foot-container {\n      gap: 30px;\n    }\n\n    \/* Baris utama atas vertikal *\/\n    .rwb-foot-main-row {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 20px;\n    }\n\n    .rwb-foot-status-badge {\n      align-self: stretch;\n      justify-content: center;\n    }\n\n    \/* Penyesuaian baris bawah vertikal *\/\n    .rwb-foot-bottom-row {\n      flex-direction: column-reverse;\n      align-items: stretch;\n      gap: 24px;\n    }\n\n    \/* REVISI: Seluruh text credit wajib CENTER di mobile *\/\n    .rwb-foot-copy {\n      text-align: center;\n      width: 100%;\n    }\n\n    .rwb-foot-top-btn {\n      width: 100%;\n    }\n  }\n<\/style>\n\n<footer class=\"rwb-footer-section\">\n  <div class=\"rwb-foot-container\">\n    \n    <div class=\"rwb-foot-main-row\">\n      \n      <div class=\"rwb-foot-brand\">\n        <h4 class=\"rwb-foot-logo\">Rudi Dev<\/h4>\n        <p class=\"rwb-foot-tagline\">High-performance digital craftsperson.<\/p>\n      <\/div>\n\n      <div class=\"rwb-foot-status-badge\">\n        <div class=\"rwb-foot-pulse-dot\"><\/div>\n        <span>Available for Projects<\/span>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"rwb-foot-bottom-row\">\n      \n      <p class=\"rwb-foot-copy\">\n        &copy; <span id=\"rwbAutoYear\"><\/span> Rudi Dev. All rights reserved. \n        <a href=\"https:\/\/wa.me\/6281227008020?text=Hello%20Rudi%20Dev%2C%20I%20saw%20your%20awesome%20portfolio%20and%20want%20to%20collaborate%20on%20a%20high-performance%20web%20project.\" target=\"_blank\" class=\"rwb-flash-credit-link\">\n          Built with pure code.\n        <\/a>\n      <\/p>\n\n      <button class=\"rwb-foot-top-btn\" onclick=\"rwbScrollToTop()\">\n        Back To Top <span>&uarr;<\/span>\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n<\/footer>\n\n<script>\n  (function() {\n    try {\n      \/\/ Script pengisi TAHUN otomatis secara Real-Time sesuai tahun berjalan\n      const yearSpan = document.getElementById('rwbAutoYear');\n      if (yearSpan) {\n        yearSpan.textContent = new Date().getFullYear();\n      }\n    } catch (e) {\n      console.error(\"Year automated error:\", e);\n    }\n  })();\n\n  \/\/ Fungsi Kembali Ke Atas Halaman\n  function rwbScrollToTop() {\n    try {\n      window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n      });\n    } catch (e) {\n      window.scrollTo(0, 0);\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>Rudi Dev Home Works About Contact PORTFOLIO Archive 2026 My Projects &#038;Case Studies. A full archive of my digital craftsmanship. Click a category below to see my specific expertise and workflow. All Works UI\/UX Design Web Development Branding &times; Complete Portfolio All Works Over 50+ successful projects delivered to global clients. Expertise spans across UI\/UX, [&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-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":88,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/21\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}