{"id":4,"date":"2026-06-28T15:08:58","date_gmt":"2026-06-28T15:08:58","guid":{"rendered":"https:\/\/lab.rwb.my.id\/neo\/?page_id=4"},"modified":"2026-06-29T15:54:20","modified_gmt":"2026-06-29T15:54:20","slug":"home","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/neo\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4\" class=\"elementor elementor-4\">\n\t\t\t\t<div class=\"elementor-element elementor-element-207522f e-con-full e-flex e-con e-parent\" data-id=\"207522f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56d6724 elementor-widget elementor-widget-html\" data-id=\"56d6724\" 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 THEME (ELEGANT & PROPORTIONAL)\n     ========================================================== *\/\n  :root {\n    --rwb-bg: #FFFFFF;\n    --rwb-text: #000000;\n    --rwb-shadow: #000000;\n    --rwb-accent-1: #FF006E;    \/* Pink Accent *\/\n    --rwb-accent-2: #00F5D4;    \/* Cyan Accent *\/\n    --rwb-accent-3: #FFD6A5;    \/* Soft Orange Accent *\/\n    --rwb-font: 'Space Grotesk', sans-serif;\n    --rwb-font-heading: 'Archivo Black', sans-serif;\n  }\n\n  * { box-sizing: border-box; }\n\n  \/* ==========================================\n     FIXED NAVBAR SECTION\n     ========================================== *\/\n  .rwb-nav {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 999;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 40px;\n    background-color: var(--rwb-bg);\n    border-bottom: 3px solid var(--rwb-text);\n    box-sizing: border-box;\n    font-family: var(--rwb-font);\n  }\n\n  .rwb-logo-area {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    text-decoration: none;\n  }\n\n  .rwb-logo-img {\n    width: 36px;\n    height: 36px;\n    object-fit: cover;\n    border: 3px solid var(--rwb-text);\n    background-color: var(--rwb-text);\n  }\n\n  .rwb-logo-text {\n    font-family: var(--rwb-font-heading);\n    font-size: 1.2rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    color: var(--rwb-text);\n  }\n\n  \/* UNIFIED MENU (No Duplication) *\/\n  .rwb-menu {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n  }\n\n  .rwb-menu-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    text-decoration: none;\n    color: var(--rwb-text);\n    font-weight: 700;\n    font-size: 0.85rem;\n    padding: 8px 14px;\n    border: 3px solid transparent;\n    transition: all 0.2s ease;\n    text-transform: uppercase;\n  }\n\n  .rwb-menu-item:hover {\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  \/* PERBAIKAN: STYLE 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 for Keyboard Nav *\/\n  .rwb-menu-item:focus-visible,\n  .rwb-btn:focus-visible,\n  .rwb-menu-mobile-btn:focus-visible {\n    outline: 3px solid var(--rwb-accent-1);\n    outline-offset: 2px;\n  }\n\n  .rwb-menu-item svg {\n    width: 16px;\n    height: 16px;\n    stroke-width: 2.5;\n  }\n\n  .rwb-menu-mobile-btn {\n    display: none;\n    background: var(--rwb-bg);\n    border: 3px solid var(--rwb-text);\n    box-shadow: 4px 4px 0px var(--rwb-shadow);\n    cursor: pointer;\n    padding: 6px;\n    transition: transform 0.1s;\n  }\n\n  .rwb-menu-mobile-btn:active {\n    transform: translate(4px, 4px);\n    box-shadow: 0 0 0 var(--rwb-shadow);\n  }\n\n  .rwb-menu-mobile-btn svg {\n    width: 24px;\n    height: 24px;\n    stroke: var(--rwb-text);\n    stroke-width: 3;\n  }\n\n  \/* ==========================================\n     HERO SECTION (PROPORTIONAL TYPOGRAPHY)\n     ========================================== *\/\n  .rwb-hero-new {\n    font-family: var(--rwb-font);\n    background-color: var(--rwb-bg);\n    padding: 120px 40px 0 40px;\n    overflow: hidden;\n    position: relative;\n    min-height: 85vh;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .rwb-hero-content {\n    max-width: 1200px;\n    margin: 0 auto;\n    width: 100%;\n    position: relative;\n    z-index: 2;\n  }\n\n  .rwb-hero-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background-color: var(--rwb-text);\n    color: var(--rwb-bg);\n    font-weight: 700;\n    padding: 6px 14px;\n    border: 3px solid var(--rwb-text);\n    margin-bottom: 24px;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n  }\n\n  .rwb-hero-badge span {\n    width: 8px;\n    height: 8px;\n    background-color: var(--rwb-accent-2);\n    border-radius: 50%;\n    animation: rwb-blink 1.5s infinite;\n  }\n\n  .rwb-mono-title {\n    font-family: var(--rwb-font-heading);\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    line-height: 1.15;\n    color: var(--rwb-text);\n    text-transform: uppercase;\n    margin: 0 0 24px 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-mono-title span {\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n    padding: 2px 4px; \n  }\n\n  .rwb-mono-title span::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: -4px;\n    right: -4px;\n    background-color: var(--rwb-accent-1);\n    border: 3px solid var(--rwb-text);\n    z-index: -1;\n    transform: skewX(-10deg);\n  }\n\n  .rwb-hero-lower {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: 40px;\n    flex-wrap: wrap;\n  }\n\n  .rwb-hero-desc {\n    font-size: 0.95rem;\n    font-weight: 500;\n    color: #333333;\n    max-width: 400px;\n    line-height: 1.6;\n    margin: 0;\n  }\n\n  .rwb-hero-btn-group {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n  }\n\n  .rwb-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background-color: var(--rwb-text);\n    color: var(--rwb-bg);\n    text-decoration: none;\n    font-weight: 700;\n    font-size: 0.85rem;\n    padding: 12px 24px;\n    border: 3px solid var(--rwb-text);\n    box-shadow: 5px 5px 0px var(--rwb-shadow);\n    text-transform: uppercase;\n    transition: transform 0.1s ease, box-shadow 0.1s ease;\n  }\n\n  .rwb-btn:hover {\n    transform: translate(3px, 3px);\n    box-shadow: 2px 2px 0px var(--rwb-shadow);\n  }\n\n  .rwb-btn-outline {\n    background-color: var(--rwb-bg);\n    color: var(--rwb-text);\n  }\n\n  \/* MARQUEE TEKS BERJALAN *\/\n  .rwb-marquee {\n    width: 100%;\n    background: var(--rwb-text);\n    color: var(--rwb-bg);\n    border-top: 4px solid var(--rwb-text);\n    border-bottom: 4px solid var(--rwb-text);\n    padding: 12px 0;\n    margin-top: 60px;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .rwb-marquee-track {\n    display: inline-block;\n    animation: rwb-scroll 20s linear infinite;\n    font-family: var(--rwb-font-heading);\n    font-size: 0.9rem;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n  }\n\n  .rwb-marquee-track span {\n    margin: 0 20px;\n  }\n\n  .rwb-marquee-track span.star {\n    color: var(--rwb-accent-2);\n  }\n\n  @keyframes rwb-scroll {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n  }\n\n  @keyframes rwb-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.3; }\n  }\n\n  \/* === ANIMASI FADE UP HALUS === *\/\n  .rwb-hero-wrapper.rwb-js-ready .rwb-hero-badge,\n  .rwb-hero-wrapper.rwb-js-ready .rwb-mono-title,\n  .rwb-hero-wrapper.rwb-js-ready .rwb-hero-lower {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n    will-change: opacity, transform;\n  }\n  .rwb-hero-wrapper.rwb-js-ready.is-visible .rwb-hero-badge { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }\n  .rwb-hero-wrapper.rwb-js-ready.is-visible .rwb-mono-title { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }\n  .rwb-hero-wrapper.rwb-js-ready.is-visible .rwb-hero-lower { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }\n\n  \/* RESPONSIVE HP *\/\n  @media (max-width: 768px) {\n    .rwb-nav {\n      padding: 12px 20px;\n    }\n    \n    \/* Convert unified menu to mobile dropdown *\/\n    .rwb-menu {\n      display: none;\n      flex-direction: column;\n      gap: 15px;\n      padding: 20px 30px;\n      background-color: var(--rwb-bg);\n      border-bottom: 4px solid var(--rwb-text);\n      position: absolute;\n      top: 100%;\n      left: 0;\n      width: 100%;\n      z-index: 998;\n    }\n\n    .rwb-menu.active {\n      display: flex;\n    }\n\n    .rwb-menu .rwb-menu-item {\n      font-size: 1rem;\n      padding: 12px 0;\n      border-bottom: 2px dashed var(--rwb-text);\n      width: 100%;\n    }\n    \n    .rwb-menu .rwb-menu-item:last-child {\n      border-bottom: none;\n    }\n\n    \/* Agar menu active di HP tidak berantakan *\/\n    .rwb-menu-item.rwb-active-menu { transform: none; box-shadow: none; border: 3px solid var(--rwb-text); }\n\n    .rwb-menu-mobile-btn {\n      display: block;\n    }\n\n    .rwb-hero-new {\n      padding: 100px 20px 0 20px;\n      min-height: auto;\n    }\n    .rwb-hero-lower {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 24px;\n    }\n    .rwb-hero-desc {\n      font-size: 0.85rem;\n    }\n    .rwb-marquee-track {\n      font-size: 0.8rem;\n    }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE START -->\n\n<div class=\"rwb-hero-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    <!-- Unified Menu (Desktop & Mobile) -->\n    <div class=\"rwb-menu\" id=\"rwbMobileMenu\">\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/\" class=\"rwb-menu-item\">\n        <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>\n        Home\n      <\/a>\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/works\/\" class=\"rwb-menu-item\">\n        <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>\n        Works\n      <\/a>\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/about\/\" class=\"rwb-menu-item\">\n        <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>\n        About\n      <\/a>\n      <a href=\"https:\/\/lab.rwb.my.id\/neo\/contact\/\" class=\"rwb-menu-item\">\n        <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>\n        Contact\n      <\/a>\n    <\/div>\n\n    <!-- Mobile Hamburger Button -->\n    <button class=\"rwb-menu-mobile-btn\" id=\"rwbMenuToggle\" aria-label=\"Toggle Menu\" aria-expanded=\"false\">\n      <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n    <\/button>\n  <\/nav>\n\n  <!-- HERO CONTENT -->\n  <div class=\"rwb-hero-new\">\n    <div class=\"rwb-hero-content\">\n      \n      <!-- Badge Status -->\n      <div class=\"rwb-hero-badge\">\n        <span><\/span> Available for Freelance\n      <\/div>\n\n      <!-- Judul Proporsional -->\n      <h1 class=\"rwb-mono-title\">\n        UI\/UX<br>\n        <span>DESIGNER<\/span><br>\n        & DEVELOPER.\n      <\/h1>\n\n      <!-- Bawah: Deskripsi & Tombol -->\n      <div class=\"rwb-hero-lower\">\n        <p class=\"rwb-hero-desc\">\n          I craft high-performance, purely coded Elementor templates and user-centric digital experiences. Bold design, unapologetic results.\n        <\/p>\n\n        <div class=\"rwb-hero-btn-group\">\n          <a href=\"https:\/\/lab.rwb.my.id\/neo\/works\/\" class=\"rwb-btn\">\n            View My Works\n            <svg style=\"width:16px;height:16px;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n          <\/a>\n          \n          <!-- TOMBOL HIRE ME DIUBAH KE WHATSAPP -->\n          <a href=\"https:\/\/wa.me\/6281227008020?text=Hi%20Rudi%2C%20I%20saw%20your%20portfolio%20and%20I%27m%20interested%20in%20hiring%20you%20for%20a%20project.\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"rwb-btn rwb-btn-outline\">\n            Hire Me\n          <\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- Teks Berjalan (Marquee) -->\n    <div class=\"rwb-marquee\">\n      <div class=\"rwb-marquee-track\">\n        <span>FIGMA<\/span> <span class=\"star\">\u2726<\/span>\n        <span>ELEMENTOR<\/span> <span class=\"star\">\u2726<\/span>\n        <span>WORDPRESS<\/span> <span class=\"star\">\u2726<\/span>\n        <span>TAILWIND<\/span> <span class=\"star\">\u2726<\/span>\n        <span>UI\/UX DESIGN<\/span> <span class=\"star\">\u2726<\/span>\n        <span>FIGMA<\/span> <span class=\"star\">\u2726<\/span>\n        <span>ELEMENTOR<\/span> <span class=\"star\">\u2726<\/span>\n        <span>WORDPRESS<\/span> <span class=\"star\">\u2726<\/span>\n        <span>TAILWIND<\/span> <span class=\"star\">\u2726<\/span>\n        <span>UI\/UX DESIGN<\/span> <span class=\"star\">\u2726<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<!-- Vanilla JS for Mobile Menu & Animations -->\n<script>\n  (function(){\n    try {\n      \/\/ 1. Animasi Fade Up\n      const wrapper = document.querySelector('.rwb-hero-wrapper');\n      if(!wrapper) return;\n\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      \/\/ 2. Mobile Menu Toggle & Auto Close\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        \/\/ Auto close when menu item is clicked\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      \/\/ 3. PERBAIKAN: Deteksi Halaman Aktif berdasarkan URL\n      const currentUrl = window.location.href;\n      const menuItems = document.querySelectorAll('.rwb-menu-item');\n      menuItems.forEach(item => {\n        \/\/ Hapus trailing slash (tanda \/ di akhir) agar pencocokan lebih akurat\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    } catch(e) {\n      const wrapper = document.querySelector('.rwb-hero-wrapper');\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-8f9ff4c e-con-full e-flex e-con e-parent\" data-id=\"8f9ff4c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ecd5ac elementor-widget elementor-widget-html\" data-id=\"9ecd5ac\" 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 STACK (TERMINAL \/ CMD)\n     ========================================================== *\/\n  :root {\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\n  .rwb-tech-section {\n    font-family: var(--rwb-font);\n    background-color: var(--rwb-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .rwb-tech-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* Header Section *\/\n  .rwb-tech-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rwb-section-tag {\n    display: inline-block;\n    background-color: var(--rwb-text);\n    color: var(--rwb-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-tech-title {\n    font-family: var(--rwb-font-heading);\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    line-height: 1.1;\n    color: var(--rwb-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-tech-title span {\n    background-color: var(--rwb-accent-2);\n    color: var(--rwb-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-text);\n    box-shadow: 4px 4px 0px var(--rwb-shadow);\n    margin-left: 8px;\n  }\n\n  .rwb-tech-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    \/* Terminal Window *\/\n  .rwb-terminal-window {\n    background-color: #111111;\n    border: 4px solid var(--rwb-text);\n    box-shadow: 12px 12px 0px var(--rwb-shadow);\n    overflow: hidden;\n    \/* Hapus rotate di sini, biarkan di animasi yang ngatur *\/\n    transition: box-shadow 0.3s ease; \n  }\n\n  .rwb-terminal-window:hover {\n    box-shadow: 16px 16px 0px var(--rwb-shadow); \/* Efek hover diganti jadi shadow aja biar gak bentrok sama animasi awal *\/\n  }\n\n  \/* Terminal Header Bar *\/\n  .rwb-terminal-header {\n    background-color: var(--rwb-bg);\n    border-bottom: 4px solid var(--rwb-text);\n    padding: 10px 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .rwb-term-dot {\n    width: 14px;\n    height: 14px;\n    border: 2px solid var(--rwb-text);\n  }\n\n  .rwb-term-dot.pink { background-color: var(--rwb-accent-1); }\n  .rwb-term-dot.cyan { background-color: var(--rwb-accent-2); }\n  .rwb-term-dot.orange { background-color: var(--rwb-accent-3); }\n\n  .rwb-term-title {\n    margin-left: 16px;\n    font-family: monospace;\n    font-weight: 700;\n    font-size: 0.85rem;\n    color: var(--rwb-text);\n    text-transform: uppercase;\n  }\n\n  \/* Terminal Body Content *\/\n  .rwb-terminal-body {\n    padding: 24px;\n    font-family: 'Courier New', monospace;\n    color: #00FF00; \/* Hijau terminal klasik *\/\n    font-size: 1rem;\n    line-height: 1.8;\n    min-height: 300px;\n  }\n\n  .rwb-term-line {\n    display: block;\n    margin-bottom: 4px;\n  }\n\n  .rwb-term-prompt {\n    color: var(--rwb-accent-2);\n    font-weight: bold;\n    margin-right: 8px;\n  }\n\n  .rwb-term-command {\n    color: #FFFFFF;\n  }\n\n  .rwb-term-output {\n    color: #CCCCCC;\n    padding-left: 16px;\n  }\n\n  .rwb-term-output span {\n    color: var(--rwb-accent-1); \/* Pink untuk highlight *\/\n    font-weight: bold;\n  }\n\n  .rwb-term-cursor {\n    display: inline-block;\n    width: 10px;\n    height: 18px;\n    background-color: #00FF00;\n    vertical-align: text-bottom;\n    animation: rwb-blink 1s steps(1) infinite;\n    margin-left: 4px;\n  }\n\n  @keyframes rwb-blink {\n    50% { opacity: 0; }\n  }\n\n    \/* === ANIMASI FADE UP (SMOOTHENED) === *\/\n  .rwb-tech-section.rwb-js-ready .rwb-tech-header,\n  .rwb-tech-section.rwb-js-ready .rwb-terminal-window {\n    opacity: 0;\n    transform: translateY(40px) rotate(-1deg); \/* Gabungkan rotasi di awal *\/\n    \/* Gunakan cubic-bezier yang lebih halus seperti referensi *\/\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);\n    will-change: opacity, transform;\n  }\n  \n  .rwb-tech-section.rwb-js-ready.is-visible .rwb-tech-header {\n    opacity: 1; \n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n  \n  .rwb-tech-section.rwb-js-ready.is-visible .rwb-terminal-window {\n    opacity: 1;\n    transform: translateY(0) rotate(-1deg); \/* Kembali ke posisi miring *\/\n    transition-delay: 0.3s;\n  }\n\n  \/* RESPONSIVE HP *\/\n  @media (max-width: 768px) {\n    .rwb-tech-section {\n      padding: 60px 20px;\n    }\n    .rwb-terminal-window {\n      transform: rotate(0deg); \/* Hilangkan rotasi di mobile biar gak makan space *\/\n    }\n    .rwb-terminal-body {\n      font-size: 0.85rem;\n      padding: 16px;\n    }\n    .rwb-tech-desc {\n      font-size: 0.9rem;\n    }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE START -->\n\n<section class=\"rwb-tech-section\" id=\"rwbTechSection\">\n  <div class=\"rwb-tech-container\">\n    \n    <!-- Header -->\n    <div class=\"rwb-tech-header\">\n      <span class=\"rwb-section-tag\">\/ Arsenal<\/span>\n      <h2 class=\"rwb-tech-title\">MY <span>TECH STACK<\/span><\/h2>\n      <p class=\"rwb-tech-desc\">\n        No bloated plugins, no unnecessary dependencies. Just pure, raw, and high-performance tools to craft unapologetic digital experiences.\n      <\/p>\n    <\/div>\n\n    <!-- Terminal Window -->\n    <div class=\"rwb-terminal-window\">\n      <!-- Header Bar -->\n      <div class=\"rwb-terminal-header\">\n        <div class=\"rwb-term-dot pink\"><\/div>\n        <div class=\"rwb-term-dot cyan\"><\/div>\n        <div class=\"rwb-term-dot orange\"><\/div>\n        <div class=\"rwb-term-title\">rudi@dev: ~\/stack<\/div>\n      <\/div>\n      \n      <!-- Body Content -->\n      <div class=\"rwb-terminal-body\">\n        <span class=\"rwb-term-line\">\n          <span class=\"rwb-term-prompt\">rudi@dev:~$<\/span>\n          <span class=\"rwb-term-command\">run --list-stack<\/span>\n        <\/span>\n        \n        <span class=\"rwb-term-line rwb-term-output\">\n          Initializing workflow... <span>[OK]<\/span>\n        <\/span>\n        \n        <span class=\"rwb-term-line rwb-term-output\">\n          > DESIGN & UI\/UX  : Figma, Adobe Suite\n        <\/span>\n        <span class=\"rwb-term-line rwb-term-output\">\n          > CMS & BACKEND   : WordPress, Webflow\n        <\/span>\n        <span class=\"rwb-term-line rwb-term-output\">\n          > PAGE BUILDER    : Elementor Pro (Pure Code)\n        <\/span>\n        <span class=\"rwb-term-line rwb-term-output\">\n          > STYLING         : Tailwind CSS, SCSS, Vanilla CSS\n        <\/span>\n        <span class=\"rwb-term-line rwb-term-output\">\n          > CORE LANGUAGES  : HTML5, CSS3, JavaScript, PHP\n        <\/span>\n        \n        <span class=\"rwb-term-line\" style=\"margin-top: 16px;\">\n          <span class=\"rwb-term-prompt\">rudi@dev:~$<\/span>\n          <span class=\"rwb-term-cursor\"><\/span>\n        <\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- Vanilla JS for Scroll Delayed Fade-Up (FIXED) -->\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbTechSection');\n      if(!section) return;\n\n      \/\/ Tambahkan class rwb-js-ready untuk memastikan state awal hidden\n      section.classList.add('rwb-js-ready');\n      \n      let hasAnimated = false;\n\n      function runAnimations() {\n        if (hasAnimated) return;\n        hasAnimated = true;\n        \/\/ Tambahkan class is-visible untuk memicu CSS transition\n        section.classList.add('is-visible');\n      }\n\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            \/\/ Delay 200ms supaya tidak bentrok dengan animasi section sebelumnya\n            setTimeout(runAnimations, 200);\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.2,                  \/\/ 20% section harus terlihat\n        rootMargin: '0px 0px -80px 0px'  \/\/ Section harus 80px lebih masuk ke viewport\n      });\n      \n      observer.observe(section);\n    } catch(e) {\n      console.error(\"Tech Section Error:\", e);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65a5087 e-con-full e-flex e-con e-parent\" data-id=\"65a5087\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b5fd56 elementor-widget elementor-widget-html\" data-id=\"5b5fd56\" 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: WORKFLOW SECTION (DEVELOPER FRIENDLY)\n     ========================================================== *\/\n  \n  \/* SCOPED VARIABLES: Developer gampang ganti warna di sini, \n     dan DIJAMIN aman tidak akan merusak seksi lain karena dikunci ke .rwb-flow-section *\/\n  .rwb-flow-section {\n    --rwb-flow-bg: #FFFFFF;\n    --rwb-flow-text: #000000;\n    --rwb-flow-shadow: #000000;\n    --rwb-flow-accent-1: #FF006E;       \/* Pink *\/\n    --rwb-flow-accent-2: rgba(0,0,0,0.08); \/* Grey Transparan untuk Highlight TEXT PROCESS *\/\n    --rwb-flow-accent-3: #FFD6A5;       \/* Orange *\/\n    --rwb-flow-card-bg: #FFFFFF;\n    --rwb-flow-font: 'Space Grotesk', sans-serif;\n    --rwb-flow-font-heading: 'Archivo Black', sans-serif;\n\n    \/* Base Section Style *\/\n    font-family: var(--rwb-flow-font);\n    background-color: var(--rwb-flow-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .rwb-flow-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* Header Section *\/\n  .rwb-flow-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rwb-flow-tag {\n    display: inline-block;\n    background-color: var(--rwb-flow-text);\n    color: var(--rwb-flow-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-flow-title {\n    font-family: var(--rwb-flow-font-heading);\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    line-height: 1.1;\n    color: var(--rwb-flow-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-flow-title span {\n    background-color: var(--rwb-flow-accent-2); \/* Memakai Grey Transparan *\/\n    color: var(--rwb-flow-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-flow-text);\n    box-shadow: 4px 4px 0px var(--rwb-flow-shadow);\n    margin-left: 8px;\n  }\n\n  .rwb-flow-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  \/* Grid Layout (Desktop) *\/\n  .rwb-flow-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 32px;\n  }\n\n  \/* Card Base *\/\n  .rwb-flow-card {\n    background-color: var(--rwb-flow-card-bg);\n    border: 4px solid var(--rwb-flow-text);\n    box-shadow: 12px 12px 0px var(--rwb-flow-shadow);\n    padding: 32px;\n    position: relative;\n    transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;\n  }\n\n  \/* --- Efek Hover Menggunakan Variabel Scoped --- *\/\n  .rwb-flow-card:hover {\n    transform: translate(-4px, -4px);\n    box-shadow: 16px 16px 0px var(--rwb-flow-shadow);\n  }\n  \n  \/* Hover Card 1: Orange Soft *\/\n  .rwb-flow-card:nth-child(1):hover {\n    background-color: var(--rwb-flow-accent-3); \n  }\n\n  \/* Hover Card 2: Grey Transparan *\/\n  .rwb-flow-card:nth-child(2):hover {\n    background-color: var(--rwb-flow-accent-2); \n  }\n\n  \/* Hover Card 3: Pink Brutal *\/\n  .rwb-flow-card:nth-child(3):hover {\n    background-color: var(--rwb-flow-accent-1); \n  }\n  \n  \/* Transisi Kontras Teks Khusus Card 3 Pas Hover *\/\n  .rwb-flow-card:nth-child(3):hover .rwb-card-desc { color: #FFFFFF; }\n  .rwb-flow-card:nth-child(3):hover .rwb-card-title,\n  .rwb-flow-card:nth-child(3):hover .rwb-flow-step { color: #FFFFFF; }\n  .rwb-flow-card:nth-child(3):hover .rwb-card-header { border-bottom-color: #FFFFFF; }\n  .rwb-flow-card:nth-child(3):hover .rwb-flow-dot { border-color: #FFFFFF; background-color: #FFFFFF; }\n\n  \/* Terminal Header *\/\n  .rwb-card-header {\n    border-bottom: 3px solid var(--rwb-flow-text);\n    padding-bottom: 12px;\n    margin-bottom: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: border-color 0.3s ease;\n  }\n\n  .rwb-card-dots {\n    display: flex;\n    gap: 6px;\n  }\n\n  .rwb-flow-dot {\n    width: 10px;\n    height: 10px;\n    border: 2px solid var(--rwb-flow-text);\n    border-radius: 50%;\n    transition: border-color 0.3s ease, background-color 0.3s ease;\n  }\n\n  \/* Warna Dot bawaan diambil dari variabel atas *\/\n  .rwb-flow-card:nth-child(1) .rwb-flow-dot { background-color: var(--rwb-flow-accent-1); }\n  .rwb-flow-card:nth-child(2) .rwb-flow-dot { background-color: #00F5D4; } \/* Warna dot tetap cyan asli biar estetik *\/\n  .rwb-flow-card:nth-child(3) .rwb-flow-dot { background-color: var(--rwb-flow-accent-3); }\n\n  .rwb-flow-step {\n    font-family: monospace;\n    font-weight: 700;\n    font-size: 0.8rem;\n    color: var(--rwb-flow-text);\n    transition: color 0.3s ease;\n  }\n\n  .rwb-card-title {\n    font-family: var(--rwb-flow-font-heading);\n    font-size: 1.35rem;\n    text-transform: uppercase;\n    color: var(--rwb-flow-text);\n    margin: 0 0 12px 0;\n    letter-spacing: -0.01em;\n    transition: color 0.3s ease;\n  }\n\n  .rwb-card-desc {\n    font-size: 0.95rem;\n    font-weight: 500;\n    color: #333333;\n    line-height: 1.6;\n    margin: 0;\n    transition: color 0.3s ease;\n  }\n\n  \/* === ANIMASI FADE UP === *\/\n  .rwb-flow-section.rwb-js-ready .rwb-flow-header,\n  .rwb-flow-section.rwb-js-ready .rwb-flow-card {\n    opacity: 0;\n    transform: translateY(40px) rotate(-1deg);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94), background-color 0.3s ease, box-shadow 0.3s ease;\n    will-change: opacity, transform;\n  }\n\n  .rwb-flow-section.rwb-js-ready.is-visible .rwb-flow-header {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n\n  .rwb-flow-section.rwb-js-ready.is-visible .rwb-flow-card {\n    opacity: 1;\n    transform: translateY(0) rotate(-1deg);\n  }\n\n  .rwb-flow-section.rwb-js-ready.is-visible .rwb-flow-card:nth-child(1) { transition-delay: 0.2s; }\n  .rwb-flow-section.rwb-js-ready.is-visible .rwb-flow-card:nth-child(2) { transition-delay: 0.35s; }\n  .rwb-flow-section.rwb-js-ready.is-visible .rwb-flow-card:nth-child(3) { transition-delay: 0.5s; }\n\n  \/* ==========================================================\n     MOBILE RESPONSIVE: SYSTEM SWIPE PEEK MURNI CSS\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-flow-section {\n      padding: 60px 0px 60px 20px;\n    }\n\n    .rwb-flow-header {\n      padding-right: 20px;\n      margin-bottom: 40px;\n    }\n\n    .rwb-flow-grid {\n      display: flex;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      gap: 20px;\n      padding: 10px 20px 30px 0px;\n      scrollbar-width: none;\n    }\n\n    .rwb-flow-grid::-webkit-scrollbar {\n      display: none;\n    }\n\n    .rwb-flow-card {\n      flex: 0 0 82%;\n      scroll-snap-align: start;\n      box-shadow: 8px 8px 0px var(--rwb-flow-shadow);\n      padding: 24px;\n      transform: none !important;\n    }\n\n    .rwb-flow-card:hover {\n      box-shadow: 10px 10px 0px var(--rwb-flow-shadow);\n      transform: none !important;\n    }\n\n    .rwb-card-desc {\n      font-size: 0.9rem;\n    }\n  }\n<\/style>\n\n<section class=\"rwb-flow-section\" id=\"rwbFlowSection\">\n  <div class=\"rwb-flow-container\">\n    \n    <div class=\"rwb-flow-header\">\n      <span class=\"rwb-flow-tag\">\/ Blueprint<\/span>\n      <h2 class=\"rwb-flow-title\">WORK <span>PROCESS<\/span><\/h2>\n      <p class=\"rwb-flow-desc\">\n        A structured, tactical, and highly transparent approach to turning raw ideas into powerful digital execution.\n      <\/p>\n    <\/div>\n\n    <div class=\"rwb-flow-grid\">\n      \n      <div class=\"rwb-flow-card\">\n        <div class=\"rwb-card-header\">\n          <div class=\"rwb-card-dots\">\n            <div class=\"rwb-flow-dot\"><\/div>\n          <\/div>\n          <div class=\"rwb-flow-step\">STEP_01<\/div>\n        <\/div>\n        <h3 class=\"rwb-card-title\">Discovery<\/h3>\n        <p class=\"rwb-card-desc\">\n          We deep-dive into your objectives, analyze the landscape, and eliminate all fluff to align on a solid blueprint.\n        <\/p>\n      <\/div>\n\n      <div class=\"rwb-flow-card\">\n        <div class=\"rwb-card-header\">\n          <div class=\"rwb-card-dots\">\n            <div class=\"rwb-flow-dot\"><\/div>\n          <\/div>\n          <div class=\"rwb-flow-step\">STEP_02<\/div>\n        <\/div>\n        <h3 class=\"rwb-card-title\">Execution<\/h3>\n        <p class=\"rwb-card-desc\">\n          Building with precision using clean structures and robust frameworks. No bloat, just high-geared development.\n        <\/p>\n      <\/div>\n\n      <div class=\"rwb-flow-card\">\n        <div class=\"rwb-card-header\">\n          <div class=\"rwb-card-dots\">\n            <div class=\"rwb-flow-dot\"><\/div>\n          <\/div>\n          <div class=\"rwb-flow-step\">STEP_03<\/div>\n        <\/div>\n        <h3 class=\"rwb-card-title\">Deployment<\/h3>\n        <p class=\"rwb-card-desc\">\n          Rigorous optimization followed by a flawless launch. Your digital ecosystem is live and optimized to perform.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbFlowSection');\n      if(!section) return;\n\n      section.classList.add('rwb-js-ready');\n      let hasAnimated = false;\n\n      function runAnimations() {\n        if (hasAnimated) return;\n        hasAnimated = true;\n        section.classList.add('is-visible');\n      }\n\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(runAnimations, 200);\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.15,\n        rootMargin: '0px 0px -80px 0px'\n      });\n      \n      observer.observe(section);\n    } catch(e) {\n      console.error(\"Workflow Section Error:\", e);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9963c79 e-con-full e-flex e-con e-parent\" data-id=\"9963c79\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ea3b78 elementor-widget elementor-widget-html\" data-id=\"0ea3b78\" 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: ARCADE PRICING (STANDALONE WITH :ROOT)\n     ========================================================== *\/\n  :root {\n    \/* Dikunci dengan nama variabel unik khusus seksi pricing agar TIDAK ngerusak seksi lain *\/\n    --rwb-price-bg: #FFFFFF;\n    --rwb-price-text: #000000;\n    --rwb-price-shadow: #000000;\n    --rwb-price-accent-1: #FF006E;    \/* Pink *\/\n    --rwb-price-accent-2: #CCFF00;    \/* Lime Green Highlight *\/\n    --rwb-price-accent-3: #FFD6A5;    \/* Orange *\/\n    --rwb-price-card-bg: #FFFFFF;\n    --rwb-price-featured-bg: #FFFDF6;  \/* Krem tipis untuk tier andalan *\/\n    --rwb-price-font: 'Space Grotesk', sans-serif;\n    --rwb-price-font-heading: 'Archivo Black', sans-serif;\n  }\n\n  .rwb-pricing-section {\n    font-family: var(--rwb-price-font);\n    background-color: var(--rwb-price-bg);\n    color: var(--rwb-price-text);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-price-text);\n  }\n\n  .rwb-price-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* Header Section *\/\n  .rwb-price-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rwb-price-tag {\n    display: inline-block;\n    background-color: var(--rwb-price-text);\n    color: var(--rwb-price-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-price-title {\n    font-family: var(--rwb-price-font-heading);\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    line-height: 1.1;\n    color: var(--rwb-price-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-price-title span {\n    background-color: var(--rwb-price-accent-2);\n    color: var(--rwb-price-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-price-text);\n    box-shadow: 4px 4px 0px var(--rwb-price-shadow);\n    margin-left: 8px;\n  }\n\n  .rwb-price-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  \/* SYSTEM TABS - HANYA MUNCUL DI MOBILE (< 768px) *\/\n  .rwb-price-tabs {\n    display: none;\n    gap: 10px;\n    margin-bottom: 30px;\n  }\n\n  .rwb-price-tab-btn {\n    flex: 1;\n    font-family: var(--rwb-price-font-heading);\n    font-size: 0.85rem;\n    text-transform: uppercase;\n    padding: 12px 8px;\n    background-color: var(--rwb-price-bg);\n    color: var(--rwb-price-text);\n    border: 3px solid var(--rwb-price-text);\n    box-shadow: 4px 4px 0px var(--rwb-price-shadow);\n    cursor: pointer;\n    text-align: center;\n    transition: all 0.1s ease;\n  }\n\n  .rwb-price-tab-btn.rwb-active-tab {\n    background-color: var(--rwb-price-accent-2);\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0px var(--rwb-price-shadow);\n  }\n\n  \/* Grid Layout (Desktop) *\/\n  .rwb-price-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 32px;\n  }\n\n  \/* Card Base *\/\n  .rwb-price-card {\n    background-color: var(--rwb-price-card-bg);\n    border: 4px solid var(--rwb-price-text);\n    box-shadow: 12px 12px 0px var(--rwb-price-shadow);\n    padding: 32px;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-height: 420px;\n    transition: box-shadow 0.3s ease, transform 0.3s ease;\n  }\n\n  .rwb-price-card:hover {\n    box-shadow: 16px 16px 0px var(--rwb-price-shadow);\n  }\n\n  \/* Card Top Header *\/\n  .rwb-pcard-header {\n    border-bottom: 3px solid var(--rwb-price-text);\n    padding-bottom: 16px;\n    margin-bottom: 20px;\n  }\n\n  .rwb-pcard-badge {\n    font-family: monospace;\n    font-weight: 700;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    padding: 2px 6px;\n    border: 2px solid var(--rwb-price-text);\n    display: inline-block;\n    margin-bottom: 12px;\n  }\n\n  \/* Pengaturan Warna Badge Berdasarkan :root *\/\n  .rwb-price-card:nth-child(1) .rwb-pcard-badge { background-color: var(--rwb-price-accent-3); }\n  .rwb-price-card:nth-child(2) .rwb-pcard-badge { background-color: var(--rwb-price-accent-2); }\n  .rwb-price-card:nth-child(3) .rwb-pcard-badge { background-color: var(--rwb-price-accent-1); color: #FFFFFF; }\n\n  .rwb-pcard-title {\n    font-family: var(--rwb-price-font-heading);\n    font-size: 1.35rem;\n    text-transform: uppercase;\n    color: var(--rwb-price-text);\n    margin: 0 0 8px 0;\n    letter-spacing: -0.01em;\n  }\n\n  .rwb-pcard-price {\n    font-family: var(--rwb-price-font-heading);\n    font-size: 1.8rem;\n    color: var(--rwb-price-text);\n    margin: 0;\n  }\n\n  \/* Card Features List *\/\n  .rwb-pcard-features {\n    list-style: none;\n    padding: 0;\n    margin: 0 0 30px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .rwb-pcard-features li {\n    font-size: 0.95rem;\n    font-weight: 500;\n    color: #333333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .rwb-pcard-features li::before {\n    content: \"\u25a0\";\n    color: var(--rwb-price-text);\n    font-size: 0.8rem;\n  }\n\n  \/* Button CTA *\/\n  .rwb-pcard-btn {\n    font-family: var(--rwb-price-font-heading);\n    text-transform: uppercase;\n    text-decoration: none;\n    text-align: center;\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--rwb-price-text);\n    background-color: var(--rwb-price-bg);\n    padding: 12px;\n    border: 3px solid var(--rwb-price-text);\n    box-shadow: 4px 4px 0px var(--rwb-price-shadow);\n    transition: transform 0.1s ease, box-shadow 0.1s ease;\n  }\n\n  .rwb-pcard-btn:hover {\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0px var(--rwb-price-shadow);\n  }\n\n  \/* Featured Tier Styling dari :root *\/\n  .rwb-price-card.rwb-featured-tier {\n    background-color: var(--rwb-price-featured-bg);\n  }\n  .rwb-price-card.rwb-featured-tier .rwb-pcard-btn {\n    background-color: var(--rwb-price-accent-2);\n  }\n\n  \/* === ANIMASI FADE UP (Sesuai Standar Kode Utama) === *\/\n  .rwb-pricing-section.rwb-js-ready .rwb-price-header,\n  .rwb-pricing-section.rwb-js-ready .rwb-price-card {\n    opacity: 0;\n    transform: translateY(40px) rotate(-1deg);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);\n    will-change: opacity, transform;\n  }\n\n  .rwb-pricing-section.rwb-js-ready.is-visible .rwb-price-header {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n\n  .rwb-pricing-section.rwb-js-ready.is-visible .rwb-price-card {\n    opacity: 1;\n    transform: translateY(0) rotate(-1deg);\n  }\n\n  .rwb-pricing-section.rwb-js-ready.is-visible .rwb-price-card:nth-child(1) { transition-delay: 0.2s; }\n  .rwb-pricing-section.rwb-js-ready.is-visible .rwb-price-card:nth-child(2) { transition-delay: 0.35s; }\n  .rwb-pricing-section.rwb-js-ready.is-visible .rwb-price-card:nth-child(3) { transition-delay: 0.5s; }\n\n\n  \/* ==========================================================\n     MOBILE RESPONSIVE: INTERACTIVE TAB LAYOUT (< 768px)\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-pricing-section {\n      padding: 60px 20px;\n    }\n\n    \/* Aktifkan Navigasi Tab di Mobile *\/\n    .rwb-price-tabs {\n      display: flex;\n    }\n\n    .rwb-price-grid {\n      display: block; \/* Matikan sistem grid desktop *\/\n    }\n\n    \/* Sembunyikan semua card secara default di mobile, dikontrol JS *\/\n    .rwb-price-card {\n      display: none;\n      box-shadow: 8px 8px 0px var(--rwb-price-shadow);\n      padding: 24px;\n      min-height: auto;\n      margin-bottom: 10px;\n      transform: none !important; \/* Matikan rotasi desktop di mobile *\/\n    }\n\n    \/* Tampilkan hanya card yang aktif sesuai tab pilihan *\/\n    .rwb-price-card.rwb-tab-active {\n      display: flex;\n    }\n\n    .rwb-price-card:hover {\n      box-shadow: 10px 10px 0px var(--rwb-price-shadow);\n    }\n  }\n<\/style>\n\n<section class=\"rwb-pricing-section\" id=\"rwbPricingSection\">\n  <div class=\"rwb-price-container\">\n    \n    <div class=\"rwb-price-header\">\n      <span class=\"rwb-price-tag\">\/ Weapon of Choice<\/span>\n      <h2 class=\"rwb-price-title\">SELECT <span>YOUR AMMO<\/span><\/h2>\n      <p class=\"rwb-price-desc\">\n        No hidden fees, no bullshit retainers. Pick the exact power capacity your project demands to run at full speed.\n      <\/p>\n    <\/div>\n\n    <div class=\"rwb-price-tabs\">\n      <button class=\"rwb-price-tab-btn rwb-active-tab\" onclick=\"rwbSwitchTab(0)\">Tier 1<\/button>\n      <button class=\"rwb-price-tab-btn\" onclick=\"rwbSwitchTab(1)\">Tier 2<\/button>\n      <button class=\"rwb-price-tab-btn\" onclick=\"rwbSwitchTab(2)\">Tier 3<\/button>\n    <\/div>\n\n    <div class=\"rwb-price-grid\" id=\"rwbPriceGrid\">\n      \n      <div class=\"rwb-price-card rwb-tab-active\">\n        <div class=\"rwb-pcard-header\">\n          <div class=\"rwb-pcard-badge\">TIER_01 \/\/ LIGHT<\/div>\n          <h3 class=\"rwb-pcard-title\">Tactical<\/h3>\n          <p class=\"rwb-pcard-price\">$1,499<\/p>\n        <\/div>\n        <ul class=\"rwb-pcard-features\">\n          <li>Core Landing Page<\/li>\n          <li>Vanilla JS Performance<\/li>\n          <li>Custom Asset Design<\/li>\n          <li>3 Days Support<\/li>\n        <\/ul>\n        <a href=\"#\" class=\"rwb-pcard-btn\">Deploy Now<\/a>\n      <\/div>\n\n      <div class=\"rwb-price-card rwb-featured-tier\">\n        <div class=\"rwb-pcard-header\">\n          <div class=\"rwb-pcard-badge\">TIER_02 \/\/ RECOMMENDED<\/div>\n          <h3 class=\"rwb-pcard-title\">Overkill<\/h3>\n          <p class=\"rwb-pcard-price\">$2,999<\/p>\n        <\/div>\n        <ul class=\"rwb-pcard-features\">\n          <li>Full Digital Ecosystem<\/li>\n          <li>Advanced Animation Stack<\/li>\n          <li>CMS & Backend Integration<\/li>\n          <li>30 Days Support<\/li>\n        <\/ul>\n        <a href=\"#\" class=\"rwb-pcard-btn\">Lock Target<\/a>\n      <\/div>\n\n      <div class=\"rwb-price-card\">\n        <div class=\"rwb-pcard-header\">\n          <div class=\"rwb-pcard-badge\">TIER_03 \/\/ UNLIMITED<\/div>\n          <h3 class=\"rwb-pcard-title\">Juggernaut<\/h3>\n          <p class=\"rwb-pcard-price\">$5,499<\/p>\n        <\/div>\n        <ul class=\"rwb-pcard-features\">\n          <li>Bespoke Web Application<\/li>\n          <li>High-Load Optimization<\/li>\n          <li>VIP Priority Pipeline<\/li>\n          <li>Lifetime Maintenance<\/li>\n        <\/ul>\n        <a href=\"#\" class=\"rwb-pcard-btn\">Go Absolute<\/a>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ Fungsi Switch Tab Khusus Layar Mobile\n  function rwbSwitchTab(index) {\n    try {\n      const tabs = document.querySelectorAll('.rwb-price-tab-btn');\n      const cards = document.querySelectorAll('.rwb-price-card');\n      \n      \/\/ Reset state tombol tab\n      tabs.forEach(tab => tab.classList.remove('rwb-active-tab'));\n      \/\/ Reset penampilan card\n      cards.forEach(card => card.classList.remove('rwb-tab-active'));\n      \n      \/\/ Aktifkan tab dan card pilihan user\n      tabs[index].classList.add('rwb-active-tab');\n      cards[index].classList.add('rwb-tab-active');\n    } catch(e) {\n      console.error(\"Tab Error:\", e);\n    }\n  }\n\n  \/\/ Animasi Scroll Intersection Observer\n  (function(){\n    try {\n      const section = document.getElementById('rwbPricingSection');\n      if(!section) return;\n\n      section.classList.add('rwb-js-ready');\n      let hasAnimated = false;\n\n      function runAnimations() {\n        if (hasAnimated) return;\n        hasAnimated = true;\n        section.classList.add('is-visible');\n      }\n\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(runAnimations, 200);\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.15,\n        rootMargin: '0px 0px -80px 0px'\n      });\n      \n      observer.observe(section);\n    } catch(e) {\n      console.error(\"Pricing Section Error:\", e);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0bc705f e-con-full e-flex e-con e-parent\" data-id=\"0bc705f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05f2861 elementor-widget elementor-widget-html\" data-id=\"05f2861\" 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 SPLIT CTA (MOBILE TAB MODE)\n     ========================================================== *\/\n  \n  \/* SCOPED VARIABLES: Terisolasi penuh di dalam section, aman 100% dari kebocoran warna *\/\n  .rwb-cta-section {\n    --rwb-cta-bg: #FFFFFF;              \/* Background putih bersih *\/\n    --rwb-cta-text-dark: #000000;\n    --rwb-cta-text-light: #FFFFFF;\n    --rwb-cta-shadow: #000000;\n    --rwb-cta-btn-left-bg: #CCFF00;     \/* Neon Lime Green *\/\n    --rwb-cta-btn-right-bg: #FF006E;    \/* Neon Pink *\/\n    --rwb-cta-highlight-grey: rgba(0, 0, 0, 0.08); \/* Grey transparan *\/\n    --rwb-cta-font-body: 'Space Grotesk', sans-serif;\n    --rwb-cta-font-heading: 'Archivo Black', sans-serif;\n\n    \/* Base Layout *\/\n    font-family: var(--rwb-cta-font-body);\n    background-color: var(--rwb-cta-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    color: var(--rwb-cta-text-dark);\n  }\n\n  .rwb-cta-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* Header Center Layout *\/\n  .rwb-cta-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rwb-cta-tag {\n    display: inline-block;\n    background-color: var(--rwb-cta-text-dark);\n    color: var(--rwb-cta-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-cta-title {\n    font-family: var(--rwb-cta-font-heading);\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    line-height: 1.1;\n    color: var(--rwb-cta-text-dark);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-cta-title span {\n    background-color: var(--rwb-cta-highlight-grey);\n    color: var(--rwb-cta-text-dark);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-cta-text-dark);\n    box-shadow: 4px 4px 0px var(--rwb-cta-shadow);\n    margin-left: 8px;\n  }\n\n  \/* Sembunyikan Navigasi Tab di Desktop *\/\n  .rwb-cta-mobile-nav {\n    display: none;\n  }\n\n  \/* Split Zones (Desktop Layout) *\/\n  .rwb-cta-split-zone {\n    display: flex;\n    gap: 32px;\n    margin-top: 40px;\n  }\n\n  \/* Base Premium Card Trigger *\/\n  .rwb-cta-gate {\n    flex: 1;\n    border: 4px solid var(--rwb-cta-text-dark);\n    padding: 32px;\n    text-decoration: none;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-height: 320px;\n    box-shadow: 12px 12px 0px var(--rwb-cta-shadow);\n    background-color: var(--rwb-cta-bg);\n    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    overflow: hidden;\n  }\n\n  \/* Efek Hover Desktop *\/\n  .rwb-cta-split-zone:hover .rwb-cta-gate {\n    opacity: 0.6;\n    transform: scale(0.98);\n  }\n\n  .rwb-cta-split-zone .rwb-cta-gate:hover {\n    flex: 1.2;\n    opacity: 1;\n    transform: scale(1.02) translateY(-4px);\n    box-shadow: 16px 16px 0px var(--rwb-cta-shadow);\n  }\n\n  .rwb-cta-gate.rwb-left:hover {\n    background-color: var(--rwb-cta-btn-left-bg);\n  }\n\n  .rwb-cta-gate.rwb-right:hover {\n    background-color: var(--rwb-cta-btn-right-bg);\n  }\n  \n  .rwb-cta-gate.rwb-right:hover .rwb-gate-title,\n  .rwb-cta-gate.rwb-right:hover .rwb-gate-desc,\n  .rwb-cta-gate.rwb-right:hover .rwb-gate-num {\n    color: var(--rwb-cta-text-light);\n  }\n  .rwb-cta-gate.rwb-right:hover .rwb-gate-action-btn {\n    background-color: var(--rwb-cta-text-light);\n    color: var(--rwb-cta-text-dark);\n  }\n\n  \/* Typography *\/\n  .rwb-gate-num {\n    font-family: monospace;\n    font-size: 0.8rem;\n    font-weight: 700;\n    color: var(--rwb-cta-text-dark);\n    transition: color 0.3s ease;\n  }\n\n  .rwb-gate-meta {\n    margin-top: 30px;\n    margin-bottom: 25px;\n  }\n\n  .rwb-gate-title {\n    font-family: var(--rwb-cta-font-heading);\n    font-size: 1.35rem;\n    text-transform: uppercase;\n    line-height: 1.2;\n    color: var(--rwb-cta-text-dark);\n    margin: 0 0 10px 0;\n    letter-spacing: -0.01em;\n    transition: color 0.3s ease;\n  }\n\n  .rwb-gate-desc {\n    font-size: 0.95rem;\n    font-weight: 500;\n    color: #333333;\n    line-height: 1.6;\n    margin: 0;\n    transition: color 0.3s ease;\n  }\n\n  .rwb-gate-action-btn {\n    font-family: var(--rwb-cta-font-heading);\n    text-transform: uppercase;\n    font-size: 0.95rem;\n    padding: 12px 20px;\n    color: var(--rwb-cta-text-dark);\n    background-color: var(--rwb-cta-bg);\n    border: 3px solid var(--rwb-cta-text-dark);\n    box-shadow: 4px 4px 0px var(--rwb-cta-text-dark);\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    align-self: flex-start;\n    transition: all 0.3s ease;\n  }\n\n  \/* Animation Basics *\/\n  .rwb-cta-section.rwb-js-ready .rwb-cta-header,\n  .rwb-cta-section.rwb-js-ready .rwb-cta-split-zone {\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-cta-section.rwb-js-ready.is-visible .rwb-cta-header,\n  .rwb-cta-section.rwb-js-ready.is-visible .rwb-cta-split-zone {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* ==========================================================\n     MOBILE RESPONSIVE: OUT OF THE BOX TAB SYSTEM MURNI CSS & JS\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-cta-section {\n      padding: 60px 20px;\n    }\n\n    \/* Munculkan tombol navigasi TAB *\/\n    .rwb-cta-mobile-nav {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 24px;\n      width: 100%;\n    }\n\n    .rwb-cta-tab-btn {\n      flex: 1;\n      font-family: var(--rwb-cta-font-heading);\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      text-align: center;\n      padding: 12px 8px;\n      background-color: var(--rwb-cta-bg);\n      color: var(--rwb-cta-text-dark);\n      border: 3px solid var(--rwb-cta-text-dark);\n      box-shadow: 4px 4px 0px var(--rwb-cta-shadow);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    \/* Status Tab Aktif *\/\n    .rwb-cta-tab-btn.rwb-active-tab-01 {\n      background-color: var(--rwb-cta-btn-left-bg);\n      transform: translate(2px, 2px);\n      box-shadow: 2px 2px 0px var(--rwb-cta-shadow);\n    }\n\n    .rwb-cta-tab-btn.rwb-active-tab-02 {\n      background-color: var(--rwb-cta-btn-right-bg);\n      color: var(--rwb-cta-text-light);\n      transform: translate(2px, 2px);\n      box-shadow: 2px 2px 0px var(--rwb-cta-shadow);\n    }\n\n    \/* Kontrol Tampilan Kartu Berdasarkan Tab *\/\n    .rwb-cta-split-zone {\n      margin-top: 0;\n      position: relative;\n      display: block; \/* Matikan flex di mobile *\/\n    }\n\n    .rwb-cta-gate {\n      display: none; \/* Sembunyikan semua kartu secara default *\/\n      min-height: auto;\n      padding: 24px;\n      box-shadow: 8px 8px 0px var(--rwb-cta-shadow);\n      transform: none !important;\n      opacity: 1 !important;\n    }\n\n    \/* Tampilkan kartu yang aktif saja *\/\n    .rwb-cta-section[data-active-tab=\"1\"] .rwb-cta-gate.rwb-left {\n      display: flex;\n      animation: rwbTabFadeIn 0.3s ease forwards;\n    }\n\n    .rwb-cta-section[data-active-tab=\"2\"] .rwb-cta-gate.rwb-right {\n      display: flex;\n      animation: rwbTabFadeIn 0.3s ease forwards;\n    }\n\n    \/* Override paksa warna latar belakang statis di mobile agar terlihat premium tanpa hover *\/\n    .rwb-cta-section[data-active-tab=\"1\"] .rwb-cta-gate.rwb-left {\n      background-color: var(--rwb-cta-btn-left-bg);\n    }\n    .rwb-cta-section[data-active-tab=\"2\"] .rwb-cta-gate.rwb-right {\n      background-color: var(--rwb-cta-btn-right-bg);\n    }\n    .rwb-cta-section[data-active-tab=\"2\"] .rwb-cta-gate.rwb-right .rwb-gate-title,\n    .rwb-cta-section[data-active-tab=\"2\"] .rwb-cta-gate.rwb-right .rwb-gate-desc,\n    .rwb-cta-section[data-active-tab=\"2\"] .rwb-cta-gate.rwb-right .rwb-gate-num {\n      color: var(--rwb-cta-text-light);\n    }\n    .rwb-cta-section[data-active-tab=\"2\"] .rwb-cta-gate.rwb-right .rwb-gate-action-btn {\n      background-color: var(--rwb-cta-text-light);\n      color: var(--rwb-cta-text-dark);\n    }\n\n    @keyframes rwbTabFadeIn {\n      from { opacity: 0; transform: translateY(10px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  }\n<\/style>\n\n<section class=\"rwb-cta-section\" id=\"rwbCtaSection\" data-active-tab=\"1\">\n  <div class=\"rwb-cta-container\">\n    \n    <div class=\"rwb-cta-header\">\n      <span class=\"rwb-cta-tag\">\/ Final Mission<\/span>\n      <h2 class=\"rwb-cta-title\">ENOUGH TALK. <span>EXECUTE NOW.<\/span><\/h2>\n    <\/div>\n\n    <div class=\"rwb-cta-mobile-nav\">\n      <div class=\"rwb-cta-tab-btn rwb-active-tab-01\" id=\"rwbTabBtn1\" onclick=\"switchRwbTab(1)\">Option 01<\/div>\n      <div class=\"rwb-cta-tab-btn\" id=\"rwbTabBtn2\" onclick=\"switchRwbTab(2)\">Option 02<\/div>\n    <\/div>\n\n    <div class=\"rwb-cta-split-zone\">\n      \n      <a href=\"https:\/\/wa.me\/6281227008020?text=Hello%20Rudi%20Dev%2C%20I%20would%20like%20to%20book%20a%20tactical%20strategy%20session%20with%20you%20regarding%20Option%2001%20%5BBook%20a%20Call%5D.\" target=\"_blank\" class=\"rwb-cta-gate rwb-left\">\n        <div class=\"rwb-gate-num\">STEP_01 \/\/ OPTION<\/div>\n        \n        <div class=\"rwb-gate-meta\">\n          <h3 class=\"rwb-gate-title\">Book a Call<\/h3>\n          <p class=\"rwb-gate-desc\">Lock a direct 15-min tactical strategy session straight with our technical commanders.<\/p>\n        <\/div>\n\n        <div class=\"rwb-gate-action-btn\">\n          Secure Slot <span>\u2192<\/span>\n        <\/div>\n      <\/a>\n\n      <a href=\"https:\/\/wa.me\/6281227008020?text=Hello%20Rudi%20Dev%2C%20I%20want%20to%20skip%20negotiations%20and%20instantly%20deploy%20my%20brief%20to%20your%20pipeline%20via%20Option%2002%20%5BInstant%20Deploy%5D.\" target=\"_blank\" class=\"rwb-cta-gate rwb-right\">\n        <div class=\"rwb-gate-num\">STEP_02 \/\/ VIP<\/div>\n        \n        <div class=\"rwb-gate-meta\">\n          <h3 class=\"rwb-gate-title\">Instant Deploy<\/h3>\n          <p class=\"rwb-gate-desc\">Skip negotiations. Submit your brief directly to our priority assembly pipeline instantly.<\/p>\n        <\/div>\n\n        <div class=\"rwb-gate-action-btn\">\n          Get Started <span>\u26a1<\/span>\n        <\/div>\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ Fungsi Pengendali Tab Mobile\n  function switchRwbTab(tabIndex) {\n    const section = document.getElementById('rwbCtaSection');\n    const btn1 = document.getElementById('rwbTabBtn1');\n    const btn2 = document.getElementById('rwbTabBtn2');\n    \n    if(!section || !btn1 || !btn2) return;\n    \n    \/\/ Set atribut active tab pada section wrapper\n    section.setAttribute('data-active-tab', tabIndex);\n    \n    \/\/ Reset dan atur kelas aktif tombol tab\n    if(tabIndex === 1) {\n      btn1.className = \"rwb-cta-tab-btn rwb-active-tab-01\";\n      btn2.className = \"rwb-cta-tab-btn\";\n    } else {\n      btn1.className = \"rwb-cta-tab-btn\";\n      btn2.className = \"rwb-cta-tab-btn rwb-active-tab-02\";\n    }\n  }\n\n  \/\/ Pengendali Scroll Animasi Fade-Up\n  (function(){\n    try {\n      const section = document.getElementById('rwbCtaSection');\n      if(!section) return;\n\n      section.classList.add('rwb-js-ready');\n      let hasAnimated = false;\n\n      function runAnimations() {\n        if (hasAnimated) return;\n        hasAnimated = true;\n        section.classList.add('is-visible');\n      }\n\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(runAnimations, 150);\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.15,\n        rootMargin: '0px 0px -40px 0px'\n      });\n      \n      observer.observe(section);\n    } catch(e) {\n      console.error(\"CTA Section Error:\", e);\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9d4c6b6 e-con-full e-flex e-con e-parent\" data-id=\"9d4c6b6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-305c358 elementor-widget elementor-widget-html\" data-id=\"305c358\" 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 Available for Freelance UI\/UX DESIGNER &#038; DEVELOPER. I craft high-performance, purely coded Elementor templates and user-centric digital experiences. Bold design, unapologetic results. View My Works Hire Me FIGMA \u2726 ELEMENTOR \u2726 WORDPRESS \u2726 TAILWIND \u2726 UI\/UX DESIGN \u2726 FIGMA \u2726 ELEMENTOR \u2726 WORDPRESS \u2726 TAILWIND \u2726 UI\/UX DESIGN \u2726 [&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-4","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/4","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=4"}],"version-history":[{"count":67,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/4\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/4\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/media?parent=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}