{"id":23,"date":"2026-06-28T15:17:13","date_gmt":"2026-06-28T15:17:13","guid":{"rendered":"https:\/\/lab.rwb.my.id\/neo\/?page_id=23"},"modified":"2026-06-29T18:24:12","modified_gmt":"2026-06-29T18:24:12","slug":"about","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/neo\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23\" class=\"elementor elementor-23\">\n\t\t\t\t<div class=\"elementor-element elementor-element-086b0b1 e-con-full e-flex e-con e-parent\" data-id=\"086b0b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-811f29f elementor-widget elementor-widget-html\" data-id=\"811f29f\" 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: ABOUT PAGE HERO (POLAROID & STICKERS)\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  * { box-sizing: border-box; }\n\n  \/* ==========================================\n     FIXED NAVBAR SECTION ( Konsisten dengan page lain )\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); box-sizing: border-box;\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  .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  \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  .rwb-menu-item svg { width: 16px; height: 16px; stroke-width: 2.5; }\n  .rwb-menu-item:focus-visible, .rwb-btn:focus-visible, .rwb-menu-mobile-btn:focus-visible { outline: 3px solid var(--rwb-accent-1); outline-offset: 2px; }\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 ABOUT SECTION === *\/\n  .rwb-about-hero {\n    font-family: var(--rwb-font);\n    background-color: var(--rwb-bg);\n    padding: 140px 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-about-container {\n    max-width: 1200px;\n    margin: 0 auto;\n    width: 100%;\n    display: grid;\n    grid-template-columns: 1.2fr 0.8fr; \/* Layout Asymetris *\/\n    gap: 60px;\n    align-items: center;\n    position: relative;\n  }\n\n  \/* KIRI: TEKS *\/\n  .rwb-about-text-wrap {\n    position: relative;\n    z-index: 2;\n  }\n\n  .rwb-about-greeting {\n    font-family: var(--rwb-font-heading);\n    font-size: clamp(1rem, 2vw, 1.5rem);\n    text-transform: uppercase;\n    background: var(--rwb-accent-3);\n    border: 3px solid var(--rwb-text);\n    box-shadow: 5px 5px 0px var(--rwb-text);\n    padding: 4px 12px;\n    display: inline-block;\n    transform: rotate(-2deg);\n    margin-bottom: 20px;\n  }\n\n  .rwb-about-title {\n    font-family: var(--rwb-font-heading);\n    font-size: clamp(2.5rem, 6vw, 5rem);\n    line-height: 0.9;\n    text-transform: uppercase;\n    margin: 0 0 20px 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-about-title span {\n    background-color: var(--rwb-accent-1);\n    color: #FFFFFF;\n    padding: 0 12px;\n    display: inline-block;\n    transform: rotate(-1deg) skew(-5deg);\n    border: 4px solid var(--rwb-text);\n    box-shadow: 8px 8px 0px var(--rwb-text);\n    margin-left: 10px;\n  }\n\n  .rwb-about-desc {\n    font-size: 1rem;\n    font-weight: 500;\n    color: #333333;\n    max-width: 450px;\n    line-height: 1.6;\n    margin-top: 30px;\n  }\n\n  \/* KANAN: POLAROID & STICKERS *\/\n  .rwb-about-visuals {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 450px;\n  }\n\n  .rwb-polaroid {\n    background: #fff;\n    padding: 15px 15px 60px 15px;\n    border: 4px solid var(--rwb-text);\n    box-shadow: 12px 12px 0px var(--rwb-text);\n    transform: rotate(4deg);\n    transition: transform 0.3s ease;\n    max-width: 300px;\n    width: 100%;\n    position: relative;\n    z-index: 2;\n  }\n\n  .rwb-polaroid:hover {\n    transform: rotate(0deg) scale(1.02);\n  }\n\n  .rwb-polaroid-img {\n    width: 100%;\n    aspect-ratio: 1\/1;\n    object-fit: cover;\n    border: 3px solid var(--rwb-text);\n    background-color: #f0f0f0;\n    display: block;\n  }\n\n  .rwb-polaroid-tape {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%) rotate(-2deg);\n    width: 100px;\n    height: 30px;\n    background-color: rgba(255, 0, 110, 0.6);\n    border: 2px solid rgba(0,0,0,0.1);\n    z-index: 3;\n  }\n\n  \/* STIKER MELAYANG *\/\n  .rwb-sticker {\n    position: absolute;\n    font-family: var(--rwb-font-heading);\n    text-transform: uppercase;\n    border: 3px solid var(--rwb-text);\n    box-shadow: 4px 4px 0px var(--rwb-text);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    z-index: 3;\n  }\n\n  .rwb-sticker-1 {\n    background: var(--rwb-accent-2);\n    color: var(--rwb-text);\n    width: 80px; height: 80px;\n    border-radius: 50%;\n    font-size: 0.8rem;\n    top: -20px; right: 20px;\n    transform: rotate(15deg);\n  }\n\n  .rwb-sticker-2 {\n    background: var(--rwb-text);\n    color: var(--rwb-bg);\n    padding: 8px 16px;\n    font-size: 0.9rem;\n    bottom: 20px; left: -20px;\n    transform: rotate(-5deg);\n  }\n\n  .rwb-sticker-3 {\n    background: var(--rwb-bg);\n    color: var(--rwb-text);\n    padding: 6px 12px;\n    font-size: 0.75rem;\n    top: 40%; right: -30px;\n    transform: rotate(8deg);\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 { margin: 0 20px; }\n  .rwb-marquee-track span.star { color: var(--rwb-accent-2); }\n\n  @keyframes rwb-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\n\n  \/* === ANIMASI FADE UP === *\/\n  .rwb-about-hero.rwb-js-ready .rwb-about-text-wrap,\n  .rwb-about-hero.rwb-js-ready .rwb-about-visuals {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n    will-change: opacity, transform;\n  }\n  .rwb-about-hero.rwb-js-ready.is-visible .rwb-about-text-wrap { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }\n  .rwb-about-hero.rwb-js-ready.is-visible .rwb-about-visuals { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }\n\n  \/* RESPONSIVE HP *\/\n  @media (max-width: 768px) {\n    .rwb-nav { padding: 12px 20px; }\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    \/* 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    .rwb-menu-mobile-btn { display: block; }\n\n    .rwb-about-hero { padding: 110px 20px 0 20px; }\n    .rwb-about-container {\n      grid-template-columns: 1fr;\n      gap: 80px;\n      text-align: center;\n    }\n    .rwb-about-greeting { transform: rotate(0); }\n    .rwb-about-desc { margin-left: auto; margin-right: auto; }\n    .rwb-about-visuals { min-height: 350px; }\n    .rwb-sticker-3 { right: 0; }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE START -->\n\n<div class=\"rwb-about-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 ABOUT -->\n  <section class=\"rwb-about-hero\">\n    <div class=\"rwb-about-container\">\n      \n      <!-- KIRI: TEKS -->\n      <div class=\"rwb-about-text-wrap\">\n        <div class=\"rwb-about-greeting\">Hi, I am<\/div>\n        <h1 class=\"rwb-about-title\">\n          RUDI<br>\n          <span>DEV.<\/span>\n        <\/h1>\n        <p class=\"rwb-about-desc\">\n          I don't just build websites; I craft digital experiences. With over 5 years in the game, I blend unapologetic Neo-Brutalism with high-performance code to make your brand impossible to ignore.\n        <\/p>\n      <\/div>\n\n      <!-- KANAN: POLAROID & STICKERS -->\n      <div class=\"rwb-about-visuals\">\n        \n        <!-- Stiker Bulat (CSS 3) -->\n        <div class=\"rwb-sticker rwb-sticker-1\">\n          CSS<br>3\n        <\/div>\n        \n        <!-- Stiker Panjang (Elementor) -->\n        <div class=\"rwb-sticker rwb-sticker-2\">\n          ELEMENTOR\n        <\/div>\n\n        <!-- Stiker Kecil (Clean Code) -->\n        <div class=\"rwb-sticker rwb-sticker-3\">\n          CLEAN CODE\n        <\/div>\n\n        <!-- Foto Polaroid -->\n        <div class=\"rwb-polaroid\">\n          <div class=\"rwb-polaroid-tape\"><\/div>\n          <!-- Gambar sementara pakai unsplash, nanti ganti URL ini -->\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/neo\/wp-content\/uploads\/sites\/19\/2026\/06\/Rudi-Dev-e1782738803664.jpeg\" alt=\"Rudi Dev Photo\" class=\"rwb-polaroid-img\">\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- Marquee Bawah -->\n    <div class=\"rwb-marquee\">\n      <div class=\"rwb-marquee-track\">\n        <span>NEO-BRUTALISM<\/span> <span class=\"star\">\u2726<\/span>\n        <span>UI\/UX DESIGN<\/span> <span class=\"star\">\u2726<\/span>\n        <span>WEB DEVELOPMENT<\/span> <span class=\"star\">\u2726<\/span>\n        <span>BRANDING<\/span> <span class=\"star\">\u2726<\/span>\n        <span>NEO-BRUTALISM<\/span> <span class=\"star\">\u2726<\/span>\n        <span>UI\/UX DESIGN<\/span> <span class=\"star\">\u2726<\/span>\n        <span>WEB DEVELOPMENT<\/span> <span class=\"star\">\u2726<\/span>\n        <span>BRANDING<\/span> <span class=\"star\">\u2726<\/span>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- Vanilla JS for Mobile Menu & Animations -->\n<script>\n  (function(){\n    try {\n      \/\/ 1. Mobile Menu Toggle\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      \/\/ 2. Animasi Fade Up\n      const wrapper = document.querySelector('.rwb-about-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      \/\/ 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-about-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-9822277 e-con-full e-flex e-con e-parent\" data-id=\"9822277\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53ff42c elementor-widget elementor-widget-html\" data-id=\"53ff42c\" 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: ABOUT MANIFESTO v2 (CANVAS WHITE)\n     ========================================================== *\/\n  \n  .rwb-abt-manifest-section {\n    --rwb-abt-bg: #FFFFFF; \/* KUNCI MATI: Canvas Tetap Putih Bersih *\/\n    --rwb-abt-text: #000000;\n    --rwb-abt-shadow: #000000;\n    --rwb-abt-font: 'Space Grotesk', sans-serif;\n    --rwb-abt-font-heading: 'Archivo Black', sans-serif;\n\n    \/* WARNA HIGHLIGHT ASLI PER KARTU *\/\n    --abt-clr-1: #FFE600; \/* Kuning Neon *\/\n    --abt-clr-2: #00F5D4; \/* Cyan Elektrik *\/\n    --abt-clr-3: #FF0055; \/* Merah Amarah *\/\n\n    font-family: var(--rwb-abt-font);\n    background-color: var(--rwb-abt-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-abt-text);\n  }\n\n  .rwb-abt-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* FIX: INDUK HEADER ZONE (JUDUL + DESKRIPSI) *\/\n  .rwb-abt-section-header {\n    margin-bottom: 50px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    max-width: 600px;\n  }\n\n  .rwb-abt-main-tag {\n    display: inline-block;\n    background-color: var(--rwb-abt-text);\n    color: var(--rwb-abt-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-abt-main-title {\n    font-family: var(--rwb-abt-font-heading);\n    font-size: clamp(1.8rem, 3.5vw, 2.6rem);\n    line-height: 1.1;\n    color: var(--rwb-abt-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-abt-main-title span {\n    background-color: var(--abt-clr-1);\n    color: var(--rwb-abt-text);\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-abt-text);\n    box-shadow: 4px 4px 0px var(--rwb-abt-shadow);\n  }\n\n  .rwb-abt-main-desc {\n    font-size: 0.95rem;\n    font-weight: 500;\n    line-height: 1.6;\n    margin: 0;\n    color: #333333;\n  }\n\n  \/* MOBILE ONLY ENGINE: TABS NAVIGATION (HIDDEN ON DESKTOP) *\/\n  .rwb-abt-mobile-tabs {\n    display: none;\n  }\n\n  \/* MANIFESTO GRID SYSTEM (DESKTOP) *\/\n  .rwb-abt-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1.2fr;\n    gap: 24px;\n  }\n\n  .rwb-abt-card {\n    background-color: #FFFFFF;\n    border: 4px solid var(--rwb-abt-text);\n    box-shadow: 6px 6px 0px var(--rwb-abt-shadow);\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    position: relative;\n  }\n\n  \/* HIGHLIGHT TAG WARNA-WARNI KONTRAK MILITER *\/\n  .rwb-abt-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 2px dashed var(--rwb-abt-text);\n    padding-bottom: 10px;\n    font-family: monospace;\n    font-size: 0.75rem;\n    font-weight: 700;\n  }\n\n  .card-style-1 .rwb-abt-card-header { color: #000; background-color: var(--abt-clr-1); padding: 4px 8px; border: 2px solid #000; }\n  .card-style-2 .rwb-abt-card-header { color: #000; background-color: var(--abt-clr-2); padding: 4px 8px; border: 2px solid #000; }\n  .card-style-3 .rwb-abt-card-header { color: #FFF; background-color: var(--abt-clr-3); padding: 4px 8px; border: 2px solid #000; }\n\n  .rwb-abt-card-title {\n    font-family: var(--rwb-abt-font-heading);\n    font-size: 1.15rem;\n    text-transform: uppercase;\n    margin: 0;\n    line-height: 1.1;\n  }\n\n  \/* INSIDE CONTENT *\/\n  .rwb-abt-manifest-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .rwb-abt-manifest-list li {\n    font-size: 0.85rem;\n    line-height: 1.4;\n    font-weight: 500;\n    color: #222222;\n  }\n\n  .rwb-abt-stat-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    border-bottom: 2px solid var(--rwb-abt-text);\n    padding-bottom: 6px;\n  }\n\n  .rwb-abt-stat-val {\n    font-family: var(--rwb-abt-font-heading);\n    font-size: 1.4rem;\n    line-height: 1;\n  }\n\n  .rwb-abt-stat-lbl {\n    font-size: 0.72rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: #444444;\n  }\n\n  .rwb-abt-terminal-text {\n    font-size: 0.85rem;\n    line-height: 1.5;\n    color: var(--rwb-abt-text);\n    font-weight: 500;\n    margin: 0;\n    background-color: #F5F5F5;\n    padding: 12px;\n    border: 2px solid var(--rwb-abt-text);\n  }\n\n  \/* === ANIMASI INTERSECTION OBSERVER SINKRON === *\/\n  .rwb-abt-manifest-section.rwb-abt-ready .rwb-abt-section-header,\n  .rwb-abt-manifest-section.rwb-abt-ready .rwb-abt-card {\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-abt-manifest-section.rwb-abt-ready.is-abt-visible .rwb-abt-section-header {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .rwb-abt-manifest-section.rwb-abt-ready.is-abt-visible .rwb-abt-card {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .rwb-abt-manifest-section.rwb-abt-ready.is-abt-visible .rwb-abt-card:nth-child(1) { transition-delay: 0.15s; }\n  .rwb-abt-manifest-section.rwb-abt-ready.is-abt-visible .rwb-abt-card:nth-child(2) { transition-delay: 0.25s; }\n  .rwb-abt-manifest-section.rwb-abt-ready.is-abt-visible .rwb-abt-card:nth-child(3) { transition-delay: 0.35s; }\n\n\n  \/* ==========================================================\n     INTERACTIVE MOBILE SYSTEM (TABS DEGRADATION)\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-abt-manifest-section {\n      padding: 60px 20px;\n    }\n\n    \/* MUNCULKAN NAVIGASI TAB DI HP *\/\n    .rwb-abt-mobile-tabs {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 8px;\n      margin-bottom: 24px;\n    }\n\n    .rwb-abt-tab-btn {\n      border: 3px solid var(--rwb-abt-text);\n      padding: 10px 4px;\n      font-family: var(--rwb-abt-font-heading);\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      cursor: pointer;\n      background-color: #FFFFFF;\n      box-shadow: 3px 3px 0px var(--rwb-abt-shadow);\n      text-align: center;\n      transition: transform 0.1s ease, box-shadow 0.1s ease;\n    }\n\n    \/* KONDISI AKTIF TAB BEDA WARNA SESUAI INSTRUKSI LO SOB *\/\n    .rwb-abt-tab-btn.is-active-tab[data-tab=\"0\"] { background-color: var(--abt-clr-1); transform: translate(1px, 1px); box-shadow: 1px 1px 0px var(--rwb-abt-shadow); }\n    .rwb-abt-tab-btn.is-active-tab[data-tab=\"1\"] { background-color: var(--abt-clr-2); transform: translate(1px, 1px); box-shadow: 1px 1px 0px var(--rwb-abt-shadow); }\n    .rwb-abt-tab-btn.is-active-tab[data-tab=\"2\"] { background-color: var(--abt-clr-3); color: #FFF; transform: translate(1px, 1px); box-shadow: 1px 1px 0px var(--rwb-abt-shadow); }\n\n    \/* MANAGING CARDS VISIBILITY VIA TABS *\/\n    .rwb-abt-grid {\n      grid-template-columns: 1fr; \/* Runtuh jadi 1 kolom saja *\/\n    }\n\n    .rwb-abt-card {\n      display: none; \/* Sembunyikan semua kartu secara default di HP *\/\n      box-shadow: 4px 4px 0px var(--rwb-abt-shadow);\n    }\n\n    \/* Kartu yang dapet class aktif dari JS baru muncul *\/\n    .rwb-abt-card.is-active-card {\n      display: flex !important;\n    }\n  }\n<\/style>\n\n<section class=\"rwb-abt-manifest-section\" id=\"rwbAboutManifestSection\">\n  <div class=\"rwb-abt-container\">\n    \n    <div class=\"rwb-abt-section-header\">\n      <span class=\"rwb-abt-main-tag\">\/\/ RAW METRICS<\/span>\n      <h2 class=\"rwb-abt-main-title\">SYSTEM <span>MANIFESTO<\/span><\/h2>\n      <p class=\"rwb-abt-main-desc\">\n        A raw compilation of my operational codes, performance data telemetry, and architectural workflow development guidelines.\n      <\/p>\n    <\/div>\n\n    <div class=\"rwb-abt-mobile-tabs\">\n      <button class=\"rwb-abt-tab-btn is-active-tab\" data-tab=\"0\">IDEOLOGY<\/button>\n      <button class=\"rwb-abt-tab-btn\" data-tab=\"1\">STATS<\/button>\n      <button class=\"rwb-abt-tab-btn\" data-tab=\"2\">STATUS<\/button>\n    <\/div>\n\n    <div class=\"rwb-abt-grid\">\n      \n      <div class=\"rwb-abt-card card-style-1 is-active-card\">\n        <div class=\"rwb-abt-card-header\">\n          <span>SEC_DATA \/\/ 01<\/span>\n          <span>[ MANIFESTO ]<\/span>\n        <\/div>\n        <h3 class=\"rwb-abt-card-title\">Core Ideology<\/h3>\n        <ul class=\"rwb-abt-manifest-list\">\n          <li><strong>Performance:<\/strong> Zero bloated frameworks. Fast execution is an absolute core priority.<\/li>\n          <li><strong>Honesty:<\/strong> Functional layout interfaces over unnecessary cosmetic noise.<\/li>\n          <li><strong>Blueprint:<\/strong> Structuring rigid components that scale perfectly without side effects.<\/li>\n        <\/ul>\n      <\/div>\n\n      <div class=\"rwb-abt-card card-style-2\">\n        <div class=\"rwb-abt-card-header\">\n          <span>SEC_DATA \/\/ 02<\/span>\n          <span>[ TELEMETRY ]<\/span>\n        <\/div>\n        <h3 class=\"rwb-abt-card-title\">Vital Stats<\/h3>\n        <div class=\"rwb-abt-manifest-list\" style=\"gap: 10px;\">\n          <div class=\"rwb-abt-stat-row\">\n            <span class=\"rwb-abt-stat-lbl\">Years Active<\/span>\n            <span class=\"rwb-abt-stat-val\">05+<\/span>\n          <\/div>\n          <div class=\"rwb-abt-stat-row\">\n            <span class=\"rwb-abt-stat-lbl\">Projects Closed<\/span>\n            <span class=\"rwb-abt-stat-val\">42<\/span>\n          <\/div>\n          <div class=\"rwb-abt-stat-row\">\n            <span class=\"rwb-abt-stat-lbl\">Lines Written<\/span>\n            <span class=\"rwb-abt-stat-val\">120K+<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"rwb-abt-card card-style-3\">\n        <div class=\"rwb-abt-card-header\">\n          <span>SEC_DATA \/\/ 03<\/span>\n          <span>[ PRODUCTION ]<\/span>\n        <\/div>\n        <h3 class=\"rwb-abt-card-title\">System Status<\/h3>\n        <p class=\"rwb-abt-terminal-text\">\n          \"The internet is crowded with slow web assets. My goal is simple: stripping away the noise to build heavy-duty, clean-engineered interfaces that hit the performance target every single time.\"\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    try {\n      const section = document.getElementById('rwbAboutManifestSection');\n      if(!section) return;\n\n      \/\/ 1. ENGINE INTERSECTION OBSERVER SAKTI SINKRON 200MS\n      section.classList.add('rwb-abt-ready');\n      let isAbtAnimated = false;\n\n      function startAbtAnimations() {\n        if (isAbtAnimated) return;\n        isAbtAnimated = true;\n        section.classList.add('is-abt-visible');\n      }\n\n      const abtObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(startAbtAnimations, 200); \n            abtObserver.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.2,\n        rootMargin: '0px 0px -80px 0px'\n      });\n      \n      abtObserver.observe(section);\n\n      \/\/ 2. MOBILE INTERACTIVE TAB LOGIC\n      const tabButtons = section.querySelectorAll('.rwb-abt-tab-btn');\n      const dataCards = section.querySelectorAll('.rwb-abt-card');\n\n      tabButtons.forEach(btn => {\n        btn.addEventListener('click', function() {\n          const targetIndex = parseInt(this.getAttribute('data-tab'));\n\n          \/\/ Reset status aktif tombol tab\n          tabButtons.forEach(t => t.classList.remove('is-active-tab'));\n          \/\/ Tambahkan class aktif ke tombol yang di-tap\n          this.classList.add('is-active-tab');\n\n          \/\/ Sembunyikan semua kartu & munculkan hanya kartu pasangan index-nya\n          dataCards.forEach((card, idx) => {\n            if (idx === targetIndex) {\n              card.classList.add('is-active-card');\n            } else {\n              card.classList.remove('is-active-card');\n            }\n          });\n        });\n      });\n\n    } catch(err) {\n      console.error(\"About Manifesto 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-b3cb92d e-con-full e-flex e-con e-parent\" data-id=\"b3cb92d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29170fc elementor-widget elementor-widget-html\" data-id=\"29170fc\" 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: EXPERIENCE LOG v2.1 (CANVAS WHITE)\n     ========================================================== *\/\n  \n  .rwb-log-section {\n    --rwb-log-bg: #FFFFFF; \/* KUNCI MATI: Canvas Tetap Putih Bersih *\/\n    --rwb-log-text: #000000;\n    --rwb-log-shadow: #000000;\n    --rwb-log-accent-red: #FF0055; \/* Aksen: Merah Laser *\/\n    --rwb-log-font: 'Space Grotesk', sans-serif;\n    --rwb-log-font-heading: 'Archivo Black', sans-serif;\n\n    font-family: var(--rwb-log-font);\n    background-color: var(--rwb-log-bg);\n    padding: 100px 40px;\n    overflow: hidden;\n    position: relative;\n    border-top: 4px solid var(--rwb-log-text);\n  }\n\n  .rwb-log-container {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n  }\n\n  \/* SECTION HEADER *\/\n  .rwb-log-header {\n    margin-bottom: 60px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n\n  .rwb-log-tag {\n    display: inline-block;\n    background-color: var(--rwb-log-text);\n    color: var(--rwb-log-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-log-title {\n    font-family: var(--rwb-log-font-heading);\n    font-size: clamp(1.8rem, 3.5vw, 2.6rem);\n    line-height: 1.1;\n    color: var(--rwb-log-text);\n    text-transform: uppercase;\n    margin: 0;\n    letter-spacing: -0.02em;\n  }\n\n  .rwb-log-title span {\n    background-color: var(--rwb-log-accent-red);\n    color: #FFFFFF;\n    padding: 2px 8px;\n    display: inline-block;\n    transform: skewX(-10deg);\n    border: 3px solid var(--rwb-log-text);\n    box-shadow: 4px 4px 0px var(--rwb-log-shadow);\n  }\n\n  \/* TIMELINE GRID ENGINE (DESKTOP) *\/\n  .rwb-log-timeline {\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n\n  .rwb-log-row {\n    background-color: #FFFFFF;\n    border: 4px solid var(--rwb-log-text);\n    box-shadow: 6px 6px 0px var(--rwb-log-shadow);\n    padding: 24px;\n    display: grid;\n    grid-template-columns: 160px 1fr;\n    gap: 30px;\n    align-items: flex-start;\n    transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.2s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.2s ease;\n    cursor: pointer;\n  }\n\n  \/* DESKTOP HOVER ANIMATION EFFECT *\/\n  @media (min-width: 769px) {\n    .rwb-log-row:hover {\n      transform: translate(-4px, -4px);\n      box-shadow: 12px 12px 0px var(--rwb-log-shadow);\n      background-color: rgba(255, 0, 85, 0.02);\n    }\n  }\n\n  \/* TIMESTAMP BLOCK *\/\n  .rwb-log-timeframe {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .rwb-log-badge {\n    background-color: var(--rwb-log-text);\n    color: #FFFFFF;\n    font-family: monospace;\n    font-size: 0.8rem;\n    font-weight: 700;\n    padding: 4px 10px;\n    text-align: center;\n    border: 2px solid var(--rwb-log-text);\n  }\n\n  .rwb-log-status {\n    font-family: monospace;\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--rwb-log-accent-red);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding-left: 4px;\n  }\n\n  \/* CONTENT BLOCK *\/\n  .rwb-log-content {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .rwb-log-role-meta {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    border-bottom: 2px dashed #000;\n    padding-bottom: 6px;\n  }\n\n  .rwb-log-role {\n    font-family: var(--rwb-log-font-heading);\n    font-size: 1.15rem;\n    text-transform: uppercase;\n    margin: 0;\n  }\n\n  .rwb-log-company {\n    font-family: monospace;\n    font-size: 0.8rem;\n    font-weight: 700;\n    color: #555555;\n  }\n\n  .rwb-log-desc {\n    font-size: 0.85rem;\n    line-height: 1.5;\n    color: #222222;\n    margin: 0;\n    font-weight: 500;\n  }\n\n  \/* === ANIMASI INTERSECTION OBSERVER SINKRON === *\/\n  .rwb-log-section.rwb-log-ready .rwb-log-header,\n  .rwb-log-section.rwb-log-ready .rwb-log-row {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94), background-color 0.2s ease, box-shadow 0.2s ease;\n    will-change: opacity, transform;\n  }\n\n  .rwb-log-section.rwb-log-ready.is-log-visible .rwb-log-header {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .rwb-log-section.rwb-log-ready.is-log-visible .rwb-log-row {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .rwb-log-section.rwb-log-ready.is-log-visible .rwb-log-row:nth-child(1) { transition-delay: 0.15s; }\n  .rwb-log-section.rwb-log-ready.is-log-visible .rwb-log-row:nth-child(2) { transition-delay: 0.25s; }\n  .rwb-log-section.rwb-log-ready.is-log-visible .rwb-log-row:nth-child(3) { transition-delay: 0.35s; }\n\n\n  \/* ==========================================================\n     MOBILE CRITICAL UPDATES: FIXED VERTICAL BLEEDING & SWIPE PEEK\n     ========================================================== *\/\n  @media (max-width: 768px) {\n    .rwb-log-section {\n      padding: 60px 0px 60px 20px;\n    }\n\n    .rwb-log-header {\n      padding-right: 20px;\n      margin-bottom: 40px;\n    }\n\n    \/* 1. SELEKSI UKURAN TEKS TAHUN DI HP *\/\n    .rwb-log-badge {\n      padding: 2px 8px;\n      font-size: 0.65rem; \/* Terkunci aman dari tumpang tindih *\/\n    }\n\n    \/* 2. SELEKSI UKURAN TEKS STATUS DI HP *\/\n    .rwb-log-status {\n      font-size: 0.6rem;\n      letter-spacing: 0px;\n    }\n\n    \/* ENGINE SLIDER SWIPE PEEK MURNI CSS SNAP (ANTI-WOBBLE) *\/\n    .rwb-log-timeline {\n      display: flex;\n      flex-direction: row;\n      overflow-x: auto;\n      \n      \/* KUNCI MATI VERTIKAL: Melempar scroll jempol langsung ke halaman utama *\/\n      overflow-y: hidden !important; \n      \n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      gap: 16px;\n      padding-top: 4px;\n      padding-bottom: 24px; \n      padding-right: 20px;\n      height: auto;\n    }\n\n    .rwb-log-timeline::-webkit-scrollbar {\n      display: none;\n    }\n\n    .rwb-log-row {\n      flex: 0 0 80%; \/* Kartu selanjutnya mengintip 20% pas di margin kanan *\/\n      scroll-snap-align: start;\n      grid-template-columns: 1fr;\n      gap: 16px;\n      padding: 20px;\n      box-shadow: 4px 4px 0px var(--rwb-log-shadow);\n      overflow: hidden;\n    }\n\n    \/* MOBILE CLICK\/TOUCH ACTIVE EFFECT *\/\n    .rwb-log-row:active {\n      transform: translate(2px, 2px);\n      box-shadow: 2px 2px 0px var(--rwb-log-shadow);\n      background-color: rgba(255, 0, 85, 0.04);\n    }\n\n    .rwb-log-timeframe {\n      flex-direction: row;\n      align-items: center;\n      gap: 12px;\n    }\n\n    \/* FIX: .rwb-log-badge duplikat 0.75rem di sini sudah di-banned permanen *\/\n\n    .rwb-log-role-meta {\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .rwb-log-role {\n      font-size: 1.05rem;\n    }\n  }\n<\/style>\n\n<!-- HTML STRUCTURE -->\n<section class=\"rwb-log-section\" id=\"rwbLogSection\">\n  <div class=\"rwb-log-container\">\n    \n    <!-- SECTION HEADER -->\n    <div class=\"rwb-log-header\">\n      <span class=\"rwb-log-tag\">\/\/ DEPLOYMENT HISTORY<\/span>\n      <h2 class=\"rwb-log-title\">EXPERIENCE <span>LOGS<\/span><\/h2>\n    <\/div>\n\n    <!-- TIMELINE LIST (SUPPORTS MOBILE SWIPE PEEK & ACTIVE TOUCH) -->\n    <div class=\"rwb-log-timeline\">\n      \n      <!-- LOG ENTRY 1 -->\n      <div class=\"rwb-log-row\">\n        <div class=\"rwb-log-timeframe\">\n          <div class=\"rwb-log-badge\">2024 \u2014 PRESENT<\/div>\n          <span class=\"rwb-log-status\">[ RUNNING_LIVE ]<\/span>\n        <\/div>\n        <div class=\"rwb-log-content\">\n          <div class=\"rwb-log-role-meta\">\n            <h3 class=\"rwb-log-role\">Senior Core Engineer<\/h3>\n            <span class=\"rwb-log-company\">HYPER_LABS INC.<\/span>\n          <\/div>\n          <p class=\"rwb-log-desc\">\n            Leading production architecture migration to isolated micro-frontends. Refactoring legacy systems to pure semantic layout structures, stripping off unnecessary framework dependencies to boost runtime execution by 40%.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- LOG ENTRY 2 -->\n      <div class=\"rwb-log-row\">\n        <div class=\"rwb-log-timeframe\">\n          <div class=\"rwb-log-badge\">2022 \u2014 2024<\/div>\n          <span class=\"rwb-log-status\">[ TERM_SUCCESS ]<\/span>\n        <\/div>\n        <div class=\"rwb-log-content\">\n          <div class=\"rwb-log-role-meta\">\n            <h3 class=\"rwb-log-role\">Full Stack Developer<\/h3>\n            <span class=\"rwb-log-company\">NEXUS_CORE DIGITAL<\/span>\n          <\/div>\n          <p class=\"rwb-log-desc\">\n            Engineered pixel-perfect component blueprints for complex enterprise web applications. Supervised database pipeline integrity and integrated rigid RESTful interface parameters with zero security hand-shake leaks.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- LOG ENTRY 3 -->\n      <div class=\"rwb-log-row\">\n        <div class=\"rwb-log-timeframe\">\n          <div class=\"rwb-log-badge\">2020 \u2014 2022<\/div>\n          <span class=\"rwb-log-status\">[ ARCHIVED ]<\/span>\n        <\/div>\n        <div class=\"rwb-log-content\">\n          <div class=\"rwb-log-role-meta\">\n            <h3 class=\"rwb-log-role\">Interface Operator<\/h3>\n            <span class=\"rwb-log-company\">ALPHA_NODE STUDIO<\/span>\n          <\/div>\n          <p class=\"rwb-log-desc\">\n            Developed responsive web mockups using brutalist styling mechanics. Monitored cross-browser viewport scaling layouts and optimized layout loading speed parameters under rigid operational deadlines.\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('rwbLogSection');\n      if(!section) return;\n\n      \/\/ ENGINE INTERSECTION OBSERVER SAKTI SINKRON 200MS\n      section.classList.add('rwb-log-ready');\n      let isLogAnimated = false;\n\n      function startLogAnimations() {\n        if (isLogAnimated) return;\n        isLogAnimated = true;\n        section.classList.add('is-log-visible');\n      }\n\n      const logObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            setTimeout(startLogAnimations, 200); \n            logObserver.unobserve(entry.target);\n          }\n        });\n      }, { \n        threshold: 0.1,\n        rootMargin: '0px 0px -60px 0px'\n      });\n      \n      logObserver.observe(section);\n\n    } catch(err) {\n      console.error(\"Experience Log 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-9f15510 e-con-full e-flex e-con e-parent\" data-id=\"9f15510\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8361935 elementor-widget elementor-widget-html\" data-id=\"8361935\" 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 Hi, I am RUDI DEV. I don&#8217;t just build websites; I craft digital experiences. With over 5 years in the game, I blend unapologetic Neo-Brutalism with high-performance code to make your brand impossible to ignore. CSS3 ELEMENTOR CLEAN CODE NEO-BRUTALISM \u2726 UI\/UX DESIGN \u2726 WEB DEVELOPMENT \u2726 BRANDING \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-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/23","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=23"}],"version-history":[{"count":34,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/pages\/23\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/neo\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}