{"id":993,"date":"2026-08-03T22:28:24","date_gmt":"2026-08-03T22:28:24","guid":{"rendered":"https:\/\/lab.rwb.my.id\/sma\/?page_id=993"},"modified":"2026-08-13T04:06:14","modified_gmt":"2026-08-13T04:06:14","slug":"home","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/sma\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"993\" class=\"elementor elementor-993\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9ceb73 e-con-full e-flex e-con e-parent\" data-id=\"d9ceb73\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3544be6 elementor-widget elementor-widget-html\" data-id=\"3544be6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === SUNSET CLAY HERO VARIABLES (SESUAI CONTOH) === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C9D6; \n  --clay-shadow-light: #FFFFFF;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.sun-canvas-wrap {\n  position: relative;\n  background: var(--clay-bg); \/* WARNA BACKGROUND DIGANTI *\/\n  width: 100%;\n  min-height: 100vh; \n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n\/* === MATAHARI CLAY === *\/\n.sun-clay {\n  position: absolute;\n  top: 100px; \n  left: 50%;\n  transform: translateX(-50%);\n  width: 600px;\n  height: 300px;\n  border-radius: 300px 300px 0 0;\n  background: var(--clay-bg);\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  z-index: 1; \n}\n\n\/* === ORBIT SINAR === *\/\n.sun-ray-orbit {\n  position: absolute;\n  top: 100px; \n  left: 50%;\n  transform: translateX(-50%);\n  width: 600px;\n  height: 300px;\n  pointer-events: none;\n  z-index: 2; \n}\n.sun-ray-rotator {\n  width: 100%;\n  height: 100%;\n  transform-origin: 50% 100%;\n  animation: sweepRay 8s ease-in-out infinite alternate; \n}\n.sun-ray {\n  position: absolute;\n  top: 0; left: 50%;\n  width: 24px; height: 24px;\n  margin-left: -12px; margin-top: -12px;\n  background: radial-gradient(circle, #FFFFFF 0%, #F472B6 80%, transparent 100%);\n  border-radius: 50%;\n  box-shadow: 0 0 15px 4px rgba(244, 114, 182, 0.6);\n}\n@keyframes sweepRay {\n  0% { transform: rotate(-90deg); }\n  100% { transform: rotate(90deg); }\n}\n\n\/* === WRAPPER BADGE === *\/\n.badge-wrapper {\n  position: absolute;\n  top: 50px; \n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n}\n.sunset-hero-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent);\n  background: var(--clay-bg);\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n}\n.sunset-hero-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); }\n\n\/* === WRAPPER TEKS === *\/\n.hero-content-center-wrapper {\n  position: absolute;\n  top: 190px; \n  left: 50%;\n  transform: translateX(-50%);\n  width: 100%;\n  max-width: 680px;\n  padding: 0 20px;\n  z-index: 10;\n  text-align: center;\n}\n.sunset-hero-content h1 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 1.5rem; letter-spacing: -0.5px;\n}\n.sunset-hero-content h1 em {\n  font-style: normal; color: var(--clay-accent);\n}\n\n\/* KOTAK CLAYMORE DESKRIPSI *\/\n.clay-desc-box {\n  background: rgba(255, 255, 255, 0.9);\n  padding: 18px 24px;\n  border-radius: 15px;\n  max-width: 480px;\n  margin: 0 auto;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n}\n.sunset-hero-content p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300; line-height: 1.7;\n  margin: 0;\n}\n\n\/* === WRAPPER TOMBOL === *\/\n.btn-wrapper {\n  position: absolute;\n  bottom: 60px; \n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: 100%;\n  max-width: 680px;\n  padding: 0 20px;\n}\n.sunset-hero-btns { \n  display: flex; \n  gap: 1rem; \n  justify-content: center; \n  flex-wrap: wrap;\n}\n.clay-btn-primary {\n  padding: 12px 30px; border-radius: 15px; font-weight: 600; font-size: 0.8rem; color: #fff;\n  background: var(--clay-accent); text-decoration: none; transition: 0.2s; border: none; cursor: pointer;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light),\n              inset 2px 2px 4px var(--clay-accent-soft), inset -2px -2px 4px rgba(0,0,0,0.1);\n}\n.clay-btn-primary:active { box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px var(--clay-accent-soft); transform: scale(0.97); }\n.clay-btn-ghost {\n  padding: 12px 30px; border-radius: 15px; font-weight: 600; font-size: 0.8rem; color: var(--clay-text);\n  background: var(--clay-bg); \n  text-decoration: none; transition: 0.2s; border: none; cursor: pointer;\n  box-shadow: 5px 5px 10px var(--clay-shadow-dark), -5px -5px 10px var(--clay-shadow-light);\n}\n.clay-btn-ghost:active { box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light); transform: scale(0.97); }\n\n\/* === IKON UI MELAYANG === *\/\n.float-icon-container {\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  pointer-events: none;\n  z-index: 3;\n}\n\n.float-ui-icon {\n  position: absolute;\n  will-change: transform; \n}\n\n.float-inner {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 14px;\n  border-radius: 12px;\n  background: rgba(255, 255, 255, 0.8);\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  font-size: 0.65rem; font-weight: 600; color: #6B7280;\n  animation: floatAnim 3s ease-in-out infinite alternate;\n}\n.float-inner svg {\n  width: 12px; height: 12px;\n  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;\n}\n@keyframes floatAnim {\n  0% { transform: translateY(0px); }\n  100% { transform: translateY(-8px); }\n}\n\n\/* === PAUSE ANIMASI SINAR === *\/\n.sun-canvas-wrap.paused .sun-ray-rotator {\n  animation-play-state: paused;\n}\n\n\/* === ANIMASI FADE UP (LOAD) === *\/\n.fade-up-element {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n}\n.fade-up-element.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* === RESPONSIVE MOBILE (SESUAI CONTOH) === *\/\n@media (max-width: 768px) {\n  .sun-canvas-wrap { \n    height: auto !important; \n    min-height: auto !important;\n    justify-content: flex-start !important; \n    padding: 70px 15px 60px; \n    overflow: hidden;\n  }\n  .sun-clay, .sun-ray-orbit {\n    top: 120px;\n    width: 320px;\n    height: 160px;\n  }\n  .sun-ray { width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; }\n  \n  \/* BIKIN KONTEN NAMPAK DARI ATAS DAN NAMPAK KE BAWAH *\/\n  .badge-wrapper { \n    position: relative; \n    top: auto; left: auto; transform: none; \n    margin-bottom: 20px; \n  } \n  .hero-content-center-wrapper { \n    position: relative; \n    top: auto; left: auto; transform: none; \n    margin-top: 40px; \/* Kasih jarak biar gak nabrak matahari *\/\n  } \n  .btn-wrapper { \n    position: relative; \n    bottom: auto; left: auto; transform: none; \n    margin-top: 40px; \/* INI YANG BIKIN TOMBOL NAIK NGEPEL DI TEKS *\/\n  } \n  .sunset-hero-content h1 { font-size: 1.5rem; }\n  .sunset-hero-content p { font-size: 0.8rem; }\n  .clay-btn-primary, .clay-btn-ghost { padding: 10px 24px; font-size: 0.75rem; }\n\n  \/* BIKIN IKON PINDAH POSISI DI HAPE (2 KIRI ATAS, 2 KANAN ATAS) *\/\n  .float-ui-icon.icon-0 { top: 40px !important; left: 15px !important; }\n  .float-ui-icon.icon-1 { top: 40px !important; left: auto !important; right: 15px !important; }\n  .float-ui-icon.icon-2 { top: 90px !important; left: 25px !important; }\n  .float-ui-icon.icon-3 { top: 90px !important; left: auto !important; right: 25px !important; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sun-ray-rotator, .float-inner { animation: none; }\n  html { scroll-behavior: auto; }\n}\n<\/style>\n\n<div class=\"sun-canvas-wrap\" id=\"sunCanvasWrap\">\n  \n  <!-- MATAHARI CLAY -->\n  <div class=\"sun-clay\"><\/div>\n\n  <!-- ORBIT SINAR -->\n  <div class=\"sun-ray-orbit\">\n    <div class=\"sun-ray-rotator\">\n      <div class=\"sun-ray\"><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- IKON UI MELAYANG -->\n  <div class=\"float-icon-container\" id=\"floatIconContainer\"><\/div>\n\n  <!-- 1. BADGE -->\n  <div class=\"badge-wrapper\">\n    <div class=\"sunset-hero-badge fade-up-element\" id=\"heroBadge\"><span><\/span> Creative Digital Agency<\/div>\n  <\/div>\n\n  <!-- 2. TEKS & DESKRIPSI -->\n  <div class=\"hero-content-center-wrapper\">\n    <div class=\"sunset-hero-content fade-up-element\" id=\"heroTextContent\">\n      <h1>We Build <em>Squishy<\/em> & Modern Digital Experiences<\/h1>\n      <div class=\"clay-desc-box\">\n        <p>We are an out-of-the-box creative agency. We craft interactive, soft, and high-converting digital products that make your brand unforgettable.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- 3. TOMBOL (WAJIB NAIK) -->\n  <div class=\"btn-wrapper\">\n    <div class=\"sunset-hero-btns fade-up-element\" id=\"heroBtns\">\n      <a href=\"https:\/\/wa.me\/6281227008020?text=Halo%20Rudi%2C%20saya%20mau%20beli%20template\" target=\"_blank\" class=\"clay-btn-primary\">Start a Project<\/a>\n      <a href=\"#portfolio\" class=\"clay-btn-ghost\">View Portfolios<\/a>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const sunWrap = document.getElementById('sunCanvasWrap');\n  const heroText = document.getElementById('heroTextContent');\n  const heroBadge = document.getElementById('heroBadge');\n  const heroBtns = document.getElementById('heroBtns');\n  const iconContainer = document.getElementById('floatIconContainer');\n\n  const iconData = [\n    { icon: '<path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>', color: '#F472B6', text: 'Like' },\n    { icon: '<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/>', color: '#60A5FA', text: 'Chat' },\n    { icon: '<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>', color: '#FBBF24', text: '5.0' },\n    { icon: '<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>', color: '#F472B6', text: 'Fast' }\n  ];\n\n  const iconPositions = [\n    { top: '150px', left: '15%' },\n    { top: '120px', left: '75%' },\n    { top: '280px', left: '8%' },\n    { top: '220px', left: '80%' }\n  ];\n\n  iconData.forEach((data, index) => {\n    const icon = document.createElement('div');\n    icon.className = 'float-ui-icon icon-' + index;\n    icon.innerHTML = `<div class=\"float-inner\"><svg viewBox=\"0 0 24 24\" style=\"stroke:${data.color}; fill:none;\">${data.icon}<\/svg> ${data.text}<\/div>`;\n    \n    icon.setAttribute('aria-hidden', 'true');\n    icon.style.top = iconPositions[index].top;\n    icon.style.left = iconPositions[index].left;\n    \n    icon.dataset.moveX = (Math.random() - 0.5) * 200;\n    icon.dataset.moveY = (Math.random() - 0.5) * 200;\n    icon.dataset.rotate = (Math.random() - 0.5) * 60;\n    \n    iconContainer.appendChild(icon);\n  });\n\n  const icons = document.querySelectorAll('.float-ui-icon');\n\n  let ticking = false;\n\n  window.addEventListener('scroll', function() {\n    if (!ticking) {\n      window.requestAnimationFrame(function() {\n        let scrollProgress = window.scrollY \/ window.innerHeight;\n        if (scrollProgress > 1) scrollProgress = 1;\n        if (scrollProgress < 0) scrollProgress = 0;\n\n        icons.forEach(icon => {\n          let x = parseFloat(icon.dataset.moveX) * scrollProgress;\n          let y = parseFloat(icon.dataset.moveY) * scrollProgress;\n          let r = parseFloat(icon.dataset.rotate) * scrollProgress;\n          icon.style.transform = `translate(${x}px, ${y}px) rotate(${r}deg)`;\n        });\n\n        ticking = false;\n      });\n      ticking = true;\n    }\n  });\n\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        sunWrap.classList.remove('paused');\n        heroBadge.classList.add('visible');\n        heroText.classList.add('visible');\n        heroBtns.classList.add('visible');\n      } else {\n        sunWrap.classList.add('paused');\n      }\n    });\n  }, { threshold: 0.1 });\n\n  observer.observe(sunWrap);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-77de568 e-con-full e-flex e-con e-parent\" data-id=\"77de568\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-331edc1 elementor-widget elementor-widget-html\" data-id=\"331edc1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === CLAY GLASS FUTURISTIC VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6; \n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C9D6; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.clay-hero-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.clay-hero-wrap {\n  position: relative;\n  background: var(--clay-bg); \n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 80px 20px 120px;\n  min-height: 85vh;\n}\n\n\/* === FLOATING UI BUBBLES (Hanya Ikon) === *\/\n.bubble-container {\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  pointer-events: none; \n  z-index: 1;\n  overflow: hidden;\n}\n\n.ui-bubble {\n  position: absolute;\n  top: -50px;\n  display: flex; align-items: center; justify-content: center;\n  width: 36px; height: 36px;\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.6); \n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  animation: floatDown linear infinite;\n  opacity: 0;\n}\n\n.ui-bubble svg {\n  width: 16px; height: 16px;\n  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;\n}\n\n@keyframes floatDown {\n  0% { transform: translateY(0) rotate(0deg) scale(var(--bubble-scale, 1)); opacity: 0; }\n  10% { opacity: 0.9; }\n  90% { opacity: 0.9; }\n  100% { transform: translateY(110vh) rotate(360deg) scale(var(--bubble-scale, 1)); opacity: 0; }\n}\n\n\/* === GLASS PANEL === *\/\n.glass-panel {\n  position: relative;\n  z-index: 10;\n  max-width: 700px;\n  width: 100%;\n  padding: 60px 40px;\n  border-radius: 32px;\n  background: rgba(255, 255, 255, 0.5); \n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: \n    0 20px 50px rgba(0, 0, 0, 0.05),\n    inset 0 0 0 1px rgba(255, 255, 255, 0.2),\n    20px 20px 40px var(--clay-shadow-dark), \n    -20px -20px 40px var(--clay-shadow-light);\n  cursor: pointer;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(40px);\n  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.2s ease, box-shadow 0.2s ease;\n}\n\n.glass-panel::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  border-radius: 32px;\n  background: linear-gradient(45deg, rgba(244, 114, 182, 0.05), rgba(99, 102, 241, 0.05), rgba(34, 211, 238, 0.05));\n  pointer-events: none;\n  z-index: -1;\n}\n\n.glass-panel.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.glass-panel.is-visible:hover {\n  transform: translateY(-5px);\n  background: rgba(255, 255, 255, 0.6); \n  box-shadow: \n    0 30px 60px rgba(244, 114, 182, 0.15),\n    inset 0 0 0 1px rgba(255, 255, 255, 0.4),\n    20px 20px 40px var(--clay-shadow-dark), \n    -20px -20px 40px var(--clay-shadow-light);\n}\n\n\/* === EFEK RETAK KACA === *\/\n.crack-svg {\n  position: absolute;\n  pointer-events: none;\n  width: 400px; \n  height: 400px;\n  transform: translate(-50%, -50%) scale(0);\n  opacity: 0;\n  z-index: 20;\n}\n\n.crack-hole { fill: rgba(20, 20, 30, 0.15); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.5; filter: drop-shadow(0 0 2px rgba(255,255,255,0.8)); }\n.crack-bolt { stroke: #FFFFFF; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px #A0E9FF) drop-shadow(0 0 8px #BFEEFF); }\n.crack-shard { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; fill: none; filter: drop-shadow(0 0 2px #A0E9FF); }\n\n.is-cracked .crack-svg { animation: crackAppear 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }\n.is-cracked { animation: glassShake 0.4s ease-in-out; }\n\n@keyframes crackAppear {\n  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }\n  20% { transform: translate(-50%, -50%) scale(0.8) rotate(5deg); opacity: 1; }\n  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }\n}\n\n@keyframes glassShake {\n  0%, 100% { transform: translateY(0) translateX(0); } \n  25% { transform: translateY(0) translateX(-4px); }\n  50% { transform: translateY(0) translateX(4px); }\n  75% { transform: translateY(0) translateX(-3px); }\n}\n\n\/* === KONTEN TEKS & FADE UP === *\/\n.clay-hero-content { position: relative; z-index: 5; text-align: center; }\n\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n.clay-hero-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n  transition-delay: 0.2s; \n}\n.clay-hero-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.clay-hero-content h1 {\n  font-size: clamp(1.8rem, 4vw, 2.8rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 1.2rem; letter-spacing: -0.5px;\n  text-shadow: 0 2px 4px rgba(255,255,255,0.5);\n  transition-delay: 0.4s; \n}\n.clay-hero-content h1 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.clay-hero-content p {\n  font-size: 0.9rem; color: #555; font-weight: 300; line-height: 1.7;\n  margin-bottom: 2rem; max-width: 480px; margin-left: auto; margin-right: auto;\n  transition-delay: 0.6s; \n}\n\n.clay-hero-btns { \n  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; \n  transition-delay: 0.8s; \n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.clay-hero-wrap button, .clay-hero-wrap a,\n.modal-overlay button, .toast-notification a, .toast-notification button {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.clay-hero-wrap button:hover, .clay-hero-wrap button:focus, .clay-hero-wrap button:active,\n.clay-hero-wrap a:hover, .clay-hero-wrap a:focus, .clay-hero-wrap a:active,\n.modal-overlay button:hover, .modal-overlay button:focus,\n.toast-notification a:hover, .toast-notification a:focus,\n.toast-notification button:hover, .toast-notification button:focus {\n  color: inherit !important;\n  background-color: transparent !important; \n  border-color: transparent !important;\n  box-shadow: none !important; \n  outline: none !important;\n  text-decoration: none !important;\n}\n\n\/* RE-APPLY CLAYMORPHISM SECARA MUTLAK *\/\n.clay-btn-primary {\n  padding: 14px 32px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; color: #fff !important;\n  background-color: var(--clay-accent) !important; \n  box-shadow: 4px 4px 10px var(--clay-shadow-dark), -4px -4px 10px var(--clay-shadow-light), inset 2px 2px 4px var(--clay-accent-soft), inset -2px -2px 4px rgba(0,0,0,0.1) !important;\n  transition: transform 0.2s ease;\n}\n.clay-btn-primary:hover { \n  transform: translateY(-2px); \n  background-color: var(--clay-accent) !important;\n  color: #fff !important;\n  box-shadow: 6px 6px 15px var(--clay-shadow-dark), -6px -6px 15px var(--clay-shadow-light) !important;\n}\n\n.clay-btn-ghost {\n  padding: 14px 32px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; color: var(--clay-text) !important;\n  background-color: rgba(255,255,255,0.5) !important; \n  border: 1px solid rgba(255,255,255,0.6) !important;\n  box-shadow: 4px 4px 10px var(--clay-shadow-dark), -4px -4px 10px var(--clay-shadow-light) !important;\n  transition: transform 0.2s ease;\n}\n.clay-btn-ghost:hover { \n  transform: translateY(-2px); \n  background-color: rgba(255,255,255,0.7) !important;\n  color: var(--clay-text) !important;\n}\n\n\/* === MODAL POPUP CLAYMORPHISM === *\/\n.modal-overlay {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0; \/* Ganti 100% pakai inset biar anti Elementor *\/\n  background: rgba(0, 0, 0, 0.6);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 99999; \/* Naikin dikit *\/\n  opacity: 0; visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  padding: 20px;\n  overflow-y: auto;\n}\n.modal-overlay.active { opacity: 1; visibility: visible; }\n\n.modal-content {\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 30px;\n  width: 100%; max-width: 600px;\n  position: relative;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light);\n  transform: scale(0.8);\n  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n  max-height: 90vh;\n  overflow-y: auto;\n  margin: auto;\n}\n.modal-overlay.active .modal-content { transform: scale(1); }\n\n\/* TOMBOL X (PAKAI SVG BIAR PRESISI) *\/\n.modal-close-btn {\n  position: absolute; \n  top: 15px; right: 15px;\n  width: 36px; height: 36px; border-radius: 50%;\n  background-color: var(--clay-bg) !important;\n  cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  padding: 0 !important;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light) !important;\n  z-index: 10;\n}\n.modal-close-btn:hover {\n  background-color: var(--clay-bg) !important;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light) !important;\n}\n.modal-close-btn:active { \n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light) !important; \n}\n.modal-close-btn svg { width: 16px; height: 16px; stroke: var(--clay-text); stroke-width: 2; fill: none; }\n\n\/* GRID FOTO & CAPTION *\/\n.image-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 15px;\n  margin-top: 20px;\n}\n\n.project-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.img-box {\n  aspect-ratio: 1;\n  border-radius: 12px;\n  background: var(--clay-bg);\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light);\n  overflow: hidden;\n  cursor: pointer; \/* KURSOR JARI PAS HOVER FOTO *\/\n}\n.img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; display: block; }\n.img-box:hover img { transform: scale(1.05); }\n\n.caption-box {\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 0.75rem;\n  color: var(--clay-text);\n  text-align: center;\n  background: var(--clay-bg);\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n}\n\n\/* === LIGHTBOX (ZOOM FOTO) === *\/\n.lightbox-overlay {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(0, 0, 0, 0.9);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 999999; \/* Di atas modal *\/\n  opacity: 0; visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  padding: 20px;\n  cursor: zoom-out;\n}\n.lightbox-overlay.active { opacity: 1; visibility: visible; }\n.lightbox-img {\n  max-width: 90%;\n  max-height: 90vh;\n  border-radius: 12px;\n  box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n  transform: scale(0.8);\n  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n  cursor: pointer;\n}\n.lightbox-overlay.active .lightbox-img { transform: scale(1); }\n\n\/* === TOAST NOTIFICATION (PERBAIKAN LEBAR DESKTOP) === *\/\n.toast-notification {\n  position: fixed;\n  top: 24px; \n  left: 50%; \/* Posisi tengah *\/\n  transform: translateX(-50%) translateY(-150%); \/* Centering & sembunyi *\/\n  min-width: 300px; \/* Minimum lebar *\/\n  max-width: 90%; \/* Maksimal lebar biar gak brutal full screen *\/\n  width: fit-content; \/* Ngikutin panjang teks *\/\n  background: var(--clay-bg);\n  padding: 20px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1), 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light) !important;\n  z-index: 999999 !important; \n  opacity: 0;\n  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;\n  border-bottom-left-radius: 20px;\n  border-bottom-right-radius: 20px;\n}\n.toast-notification.show { \n  transform: translateX(-50%) translateY(0); \n  opacity: 1; \n}\n\n.toast-inner {\n  max-width: 100%;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n  padding: 0 40px;\n}\n\n.toast-text {\n  font-size: 0.9rem; color: var(--clay-text); text-align: center;\n}\n\n.toast-download-btn {\n  padding: 8px 24px; border-radius: 10px; font-weight: 600; font-size: 0.8rem; color: #fff !important;\n  background-color: var(--clay-accent) !important;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light), inset 2px 2px 4px var(--clay-accent-soft), inset -2px -2px 4px rgba(0,0,0,0.1) !important;\n  transition: transform 0.2s ease;\n  display: inline-block;\n  text-align: center;\n}\n.toast-download-btn:hover { \n  background-color: var(--clay-accent) !important; \n  color: #fff !important;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light), inset 2px 2px 4px var(--clay-accent-soft), inset -2px -2px 4px rgba(0,0,0,0.1) !important;\n}\n.toast-download-btn:active { \n  transform: scale(0.97);\n  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2), inset -3px -3px 6px var(--clay-accent-soft) !important; \n}\n\n\/* X BUTTON DI TOAST JUGA PAKAI SVG *\/\n.toast-close-btn {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  background-color: var(--clay-bg) !important;\n  width: 30px; height: 30px;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  padding: 0 !important;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light) !important;\n}\n.toast-close-btn:hover {\n  background-color: var(--clay-bg) !important;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light) !important;\n}\n.toast-close-btn svg { width: 14px; height: 14px; stroke: var(--clay-text); stroke-width: 2; fill: none; }\n\n\/* === LOCK SCROLL BACKGROUND === *\/\n\/* Trik paling ampuh buat Elementor & Mobile Browser *\/\nhtml.lock-scroll, \nbody.lock-scroll {\n  overflow: hidden !important;\n  height: 100% !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  width: 100% !important;\n}\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .clay-hero-wrap {\n    min-height: auto !important;\n    justify-content: flex-start !important; \n    padding: 70px 15px 60px; \n  }\n  .glass-panel { padding: 40px 20px; }\n  .clay-hero-content h1 { font-size: 1.8rem; }\n  .clay-hero-content p { font-size: 0.85rem; }\n  .clay-btn-primary, .clay-btn-ghost { padding: 12px 24px; font-size: 0.8rem; }\n  .modal-content { padding: 20px; }\n  .image-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }\n  .toast-text { font-size: 0.8rem; }\n  .toast-notification { top: 16px; min-width: unset; width: calc(100% - 32px); max-width: calc(100% - 32px); }\n}\n<\/style>\n\n<div class=\"clay-hero-wrap\">\n  \n  <!-- Jatuhan Ikon -->\n  <div class=\"bubble-container\" id=\"bubbleContainer\"><\/div>\n\n  <!-- Glass Panel -->\n  <div class=\"glass-panel\" id=\"glassPanel\">\n    \n    <!-- SVG Crack Realistik -->\n    <svg class=\"crack-svg\" id=\"crackSvg\" viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path class=\"crack-hole\" d=\"M100,90 L112,98 L108,115 L92,118 L85,105 L90,93 Z\" \/>\n      <path class=\"crack-bolt\" d=\"M100,100 L85,75 L70,80 L45,35 L30,40 L5,5 M100,100 L115,70 L130,75 L165,25 L175,30 L195,5 M100,100 L75,110 L80,130 L25,165 L15,180 L0,195 M100,100 L120,115 L115,135 L175,170 L185,185 L200,195 M100,100 L100,60 L85,50 L90,25 M100,100 L100,140 L115,150 L110,175 M100,100 L135,100 L145,85 L170,90 M100,100 L65,100 L55,115 L30,110\" \/>\n      <path class=\"crack-shard\" d=\"M95,90 L70,95 L60,110 M108,95 L135,90 L145,105 M105,115 L130,125 L120,140 M92,115 L65,120 L75,135\" \/>\n    <\/svg>\n\n    <div class=\"clay-hero-content\">\n      <div class=\"clay-hero-badge fade-up\"><span><\/span> Featured Work<\/div>\n      <h1 class=\"fade-up\">Don't Just Build. <em>Break the Glass<\/em>.<\/h1>\n      <p class=\"fade-up\">We don't do boring templates. Click the glass to reveal how we crafted high-converting experiences for our top clients.<\/p>\n      \n      <div class=\"clay-hero-btns fade-up\">\n        <button id=\"openModalBtn\" class=\"clay-btn-primary\">View All Projects<\/button>\n        <button id=\"openToastBtn\" class=\"clay-btn-ghost\">Download Portfolio<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MODAL POPUP (DI LUAR SECTION WRAPPER) -->\n<div class=\"modal-overlay\" id=\"portfolioModal\">\n  <div class=\"modal-content\">\n    <button class=\"modal-close-btn\" id=\"closeModalBtn\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n    <\/button>\n    <div class=\"image-grid\">\n      <!-- Ganti src dengan link gambar kamu & isi caption -->\n      <div class=\"project-item\">\n        <div class=\"img-box\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/Laboratorium-IPA.jpeg\" alt=\"Project 1\"><\/div>\n        <div class=\"caption-box\">Nikola Tesla<\/div>\n      <\/div>\n      <div class=\"project-item\">\n        <div class=\"img-box\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/CSTomPape.jpeg\" alt=\"Project 2\"><\/div>\n        <div class=\"caption-box\">Project Caption 2<\/div>\n      <\/div>\n      <div class=\"project-item\">\n        <div class=\"img-box\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/Maskot-Mika-1.jpg\" alt=\"Project 3\"><\/div>\n        <div class=\"caption-box\">Project Caption 3<\/div>\n      <\/div>\n      <div class=\"project-item\">\n        <div class=\"img-box\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/images.jpeg\" alt=\"Project 4\"><\/div>\n        <div class=\"caption-box\">Project Caption 4<\/div>\n      <\/div>\n      <div class=\"project-item\">\n        <div class=\"img-box\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/images.jpeg\" alt=\"Project 5\"><\/div>\n        <div class=\"caption-box\">Project Caption 5<\/div>\n      <\/div>\n      <div class=\"project-item\">\n        <div class=\"img-box\"><img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/images.jpeg\" alt=\"Project 6\"><\/div>\n        <div class=\"caption-box\">Project Caption 6<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- LIGHTBOX (ZOOM FOTO) -->\n<div class=\"lightbox-overlay\" id=\"lightboxOverlay\">\n  <img decoding=\"async\" src=\"\" alt=\"Enlarged Image\" class=\"lightbox-img\" id=\"lightboxImg\">\n<\/div>\n\n<!-- TOAST NOTIFICATION -->\n<div class=\"toast-notification\" id=\"downloadToast\">\n  <div class=\"toast-inner\">\n    <div class=\"toast-text\">Portfolio file is ready! Click download to get the full PDF version.<\/div>\n    <!-- Ganti href dengan link file PDF kamu -->\n    <a href=\"https:\/\/dev.rwb.my.id\/all-templates\/\" download class=\"toast-download-btn\">Download<\/a>\n    <button class=\"toast-close-btn\" id=\"closeToastBtn\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n    <\/button>\n  <\/div>\n<\/div>\n\n<script>\n\/\/ === SCRIPT JATUHAN IKON (HANYA SVG) ===\ndocument.addEventListener('DOMContentLoaded', function() {\n  const container = document.getElementById('bubbleContainer');\n  \n  const bubbleData = [\n    '<path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\" stroke=\"#F472B6\"\/>',\n    '<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" stroke=\"#60A5FA\"\/>',\n    '<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\" stroke=\"#FBBF24\"\/>',\n    '<path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke=\"#34D399\"\/><polyline points=\"22 4 12 14.01 9 11.01\" stroke=\"#34D399\"\/>',\n    '<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\" stroke=\"#A78BFA\"\/>'\n  ];\n\n  function createBubble() {\n    const bubble = document.createElement('div');\n    bubble.className = 'ui-bubble';\n    \n    const svgData = bubbleData[Math.floor(Math.random() * bubbleData.length)];\n    \n    bubble.innerHTML = `<svg viewBox=\"0 0 24 24\" fill=\"none\">${svgData}<\/svg>`;\n    \n    const leftPos = Math.random() * 90; \n    const size = Math.random() * 0.4 + 0.8; \n    const duration = Math.random() * 8 + 12; \n    const delay = Math.random() * 5;\n\n    bubble.style.left = leftPos + '%';\n    bubble.style.setProperty('--bubble-scale', size);\n    bubble.style.animationDuration = duration + 's';\n    bubble.style.animationDelay = delay + 's';\n\n    container.appendChild(bubble);\n\n    setTimeout(() => {\n      bubble.remove();\n    }, (duration + delay) * 1000);\n  }\n\n  setInterval(createBubble, 1500);\n  createBubble(); createBubble(); createBubble();\n});\n\n\/\/ === SCRIPT INTERSECTION OBSERVER (FADE UP ON LOAD) ===\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      entry.target.classList.add('is-visible');\n      const fadeUps = entry.target.querySelectorAll('.fade-up');\n      fadeUps.forEach(el => el.classList.add('is-visible'));\n      observer.unobserve(entry.target);\n    }\n  });\n}, { threshold: 0.2 });\n\nconst glassPanel = document.getElementById('glassPanel');\nobserver.observe(glassPanel);\n\n\/\/ === SCRIPT EFEK RETAK KACA ===\nconst crackSvg = document.getElementById('crackSvg');\n\nglassPanel.addEventListener('click', function(e) {\n  if (e.target.closest('button') || e.target.closest('a')) return; \n  if (glassPanel.classList.contains('is-cracked')) return;\n\n  const rect = glassPanel.getBoundingClientRect();\n  const x = e.clientX - rect.left;\n  const y = e.clientY - rect.top;\n\n  crackSvg.style.left = x + 'px';\n  crackSvg.style.top = y + 'px';\n\n  glassPanel.classList.add('is-cracked');\n\n  const flash = document.createElement('div');\n  flash.style.cssText = `\n    position: absolute; top: 0; left: 0; right: 0; bottom: 0; \n    background: radial-gradient(circle at ${x}px ${y}px, rgba(160, 233, 255, 0.5), transparent 15%); \n    z-index: 15; pointer-events: none; opacity: 0; transition: opacity 0.1s;\n  `;\n  glassPanel.appendChild(flash);\n  setTimeout(() => { flash.style.opacity = '1'; }, 10);\n  setTimeout(() => { flash.style.opacity = '0'; }, 150);\n  setTimeout(() => { flash.remove(); }, 300);\n\n  setTimeout(() => {\n    glassPanel.classList.remove('is-cracked');\n  }, 2000);\n});\n\n\/\/ === SCRIPT MODAL POPUP & LIGHTBOX ===\nconst modal = document.getElementById('portfolioModal');\nconst openModalBtn = document.getElementById('openModalBtn');\nconst closeModalBtn = document.getElementById('closeModalBtn');\n\nconst lightboxOverlay = document.getElementById('lightboxOverlay');\nconst lightboxImg = document.getElementById('lightboxImg');\nconst galleryImages = document.querySelectorAll('.img-box img');\n\n\/\/ === LOCK SCROLL BACKGROUND ===\n\/\/ Kita bikin fungsi biar gampang manggilnya\nfunction lockScroll() {\n  document.body.classList.add('lock-scroll');\n  document.documentElement.classList.add('lock-scroll'); \/\/ Tag <html>\n}\nfunction unlockScroll() {\n  document.body.classList.remove('lock-scroll');\n  document.documentElement.classList.remove('lock-scroll'); \/\/ Tag <html>\n}\n\nopenModalBtn.addEventListener('click', function(e) {\n  e.stopPropagation(); \n  modal.classList.add('active');\n  lockScroll(); \/\/ Kunci scroll pas buka modal\n});\n\ncloseModalBtn.addEventListener('click', function() {\n  modal.classList.remove('active');\n  unlockScroll(); \/\/ Buka scroll pas tutup modal\n});\n\nmodal.addEventListener('click', function(e) {\n  if (e.target === modal) {\n    modal.classList.remove('active');\n    unlockScroll(); \/\/ Buka scroll pas klik luar modal\n  }\n});\n\n\/\/ LOGIKA KLIK FOTO -> BUKA LIGHTBOX\ngalleryImages.forEach(img => {\n  img.addEventListener('click', function(e) {\n    e.stopPropagation(); \/\/ Cegah modal tertutup\n    lightboxImg.src = this.src;\n    lightboxOverlay.classList.add('active');\n    \/\/ Nggak perlu lockScroll lagi, karena modal udah ngunci scroll sebelumnya\n  });\n});\n\n\/\/ LOGIKA TUTUP LIGHTBOX (Klik foto atau area gelap)\nlightboxOverlay.addEventListener('click', function(e) {\n  if (e.target === lightboxOverlay || e.target === lightboxImg) {\n    lightboxOverlay.classList.remove('active');\n  }\n});\n\n\/\/ LOGIKA TOMBOL ESC KEYBOARD (TUTUP LIGHTBOX DULU, KALO GAK ADA BARU TUTUP MODAL)\ndocument.addEventListener('keydown', function(e) {\n  if (e.key === 'Escape') {\n    if (lightboxOverlay.classList.contains('active')) {\n      lightboxOverlay.classList.remove('active');\n    } else if (modal.classList.contains('active')) {\n      modal.classList.remove('active');\n      unlockScroll(); \/\/ Buka scroll pas penc ESC\n    }\n  }\n});\n\n\/\/ === SCRIPT TOAST NOTIFICATION ===\nconst toast = document.getElementById('downloadToast');\nconst openToastBtn = document.getElementById('openToastBtn');\nconst closeToastBtn = document.getElementById('closeToastBtn');\nlet toastTimer;\n\nopenToastBtn.addEventListener('click', function(e) {\n  e.stopPropagation(); \n  toast.classList.add('show');\n  \n  clearTimeout(toastTimer);\n  toastTimer = setTimeout(() => {\n    toast.classList.remove('show');\n  }, 6000);\n});\n\ncloseToastBtn.addEventListener('click', function() {\n  toast.classList.remove('show');\n  clearTimeout(toastTimer);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-444e3e4 e-con-full e-flex e-con e-parent\" data-id=\"444e3e4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95699df elementor-widget elementor-widget-html\" data-id=\"95699df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* === GLASS VAULT PANEL VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6; \n  --clay-shadow-dark: #C5C9D6; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.vault-panel-section * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.vault-panel-section {\n  background: var(--clay-bg);\n  padding: 80px 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n\n.vault-container {\n  max-width: 800px;\n  width: 100%;\n}\n\n\/* === JUDUL & BADGE === *\/\n.vault-header {\n  text-align: center;\n  margin-bottom: 40px;\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s ease, transform 0.8s ease;\n}\n.vault-header.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* BADGE SERAGAM SAMPAI SECTION SEBELUMNYA *\/\n.vault-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n  transition-delay: 0.2s;\n}\n.vault-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n\/* === LAYAR UTAMA (BRANKAS) === *\/\n.vault-screen {\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 40px;\n  min-height: 260px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n  margin-bottom: 30px;\n  box-shadow: inset 8px 8px 16px var(--clay-shadow-dark), inset -8px -8px 16px var(--clay-shadow-light);\n  opacity: 0;\n  transform: translateY(40px);\n  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.vault-screen.is-visible { opacity: 1; transform: translateY(0); }\n\n.vault-screen::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0; height: 2px;\n  background: linear-gradient(90deg, transparent, var(--clay-accent), transparent);\n  opacity: 0.5;\n}\n\n.screen-content {\n  transition: opacity 0.3s ease, filter 0.3s ease;\n}\n.screen-content.is-switching {\n  opacity: 0;\n  filter: blur(10px);\n}\n\n.screen-icon {\n  width: 50px; height: 50px;\n  border-radius: 12px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--clay-bg);\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  margin-bottom: 20px;\n}\n.screen-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\n.screen-title {\n  font-size: 1.8rem;\n  font-weight: 700;\n  margin-bottom: 12px;\n  letter-spacing: -0.5px;\n  background: linear-gradient(45deg, #F472B6, #A855F7);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  display: inline-block;\n}\n\n.screen-desc {\n  font-size: 1rem;\n  font-weight: 400;\n  color: #4B5563;\n  line-height: 1.6;\n  max-width: 90%;\n}\n\n.screen-tag {\n  margin-top: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--clay-accent);\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  width: fit-content;\n}\n.screen-tag span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n\/* === TOMBOL-TOMBOL (KAPSEL CONTROLLER) === *\/\n.vault-controls {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 15px;\n}\n\n.vault-btn {\n  background: var(--clay-bg) !important;\n  border: none !important;\n  padding: 20px 10px;\n  border-radius: 18px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;\n}\n\n\/* PEMBUNUH WARNA MERAH ELEMENTOR (HOVER, FOCUS, ACTIVE) *\/\n.vault-btn:hover, \n.vault-btn:focus, \n.vault-btn:focus-visible,\n.vault-btn:active,\n.vault-panel-section button:hover, \n.vault-panel-section button:focus, \n.vault-panel-section button:focus-visible,\n.vault-panel-section button:active {\n  outline: none !important;\n  border: none !important;\n  color: #6B7280 !important; \/* Paksa warna teks tetap abu netral *\/\n  background-color: var(--clay-bg) !important; \/* Paksa background tetap clay *\/\n  text-decoration: none !important;\n}\n\n.vault-btn:hover {\n  transform: translateY(-3px);\n  box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light) !important;\n}\n\n\/* Tombol Aktif (Ditekan) *\/\n.vault-btn.is-active {\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light) !important;\n  transform: translateY(0) !important;\n}\n.vault-btn.is-active .btn-icon {\n  background: var(--clay-accent) !important;\n  box-shadow: 0 0 15px rgba(244, 114, 182, 0.4);\n}\n.vault-btn.is-active .btn-icon svg { stroke: #fff !important; }\n.vault-btn.is-active .btn-label { color: var(--clay-accent) !important; }\n\n.btn-icon {\n  width: 40px; height: 40px;\n  border-radius: 10px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--clay-bg);\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n  transition: background 0.3s ease, box-shadow 0.3s ease;\n}\n.btn-icon svg { width: 20px; height: 20px; stroke: #6B7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; }\n\n.btn-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #6B7280;\n  transition: color 0.3s ease;\n}\n\n@media (max-width: 768px) {\n  .vault-controls { grid-template-columns: repeat(2, 1fr); }\n  .vault-screen { padding: 30px 20px; min-height: 300px; }\n  .screen-title { font-size: 1.4rem; }\n}\n<\/style>\n\n<section class=\"vault-panel-section\">\n  <div class=\"vault-container\">\n    \n    <div class=\"vault-header\">\n      <div class=\"vault-badge\"><span><\/span> Our Capabilities<\/div>\n    <\/div>\n\n    <!-- Layar Brankas -->\n    <div class=\"vault-screen\">\n      <div class=\"screen-content\" id=\"screenContent\">\n        <!-- Konten default akan diisi oleh JS -->\n      <\/div>\n    <\/div>\n\n    <!-- Tombol Kontrol -->\n    <div class=\"vault-controls\">\n      \n      <button class=\"vault-btn is-active\" data-id=\"0\">\n        <div class=\"btn-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\/><\/svg>\n        <\/div>\n        <span class=\"btn-label\">Web Design<\/span>\n      <\/button>\n\n      <button class=\"vault-btn\" data-id=\"1\">\n        <div class=\"btn-icon\">\n          <svg viewBox=\"0 0 24 24\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n        <\/div>\n        <span class=\"btn-label\">Speed<\/span>\n      <\/button>\n\n      <button class=\"vault-btn\" data-id=\"2\">\n        <div class=\"btn-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg>\n        <\/div>\n        <span class=\"btn-label\">SEO<\/span>\n      <\/button>\n\n      <button class=\"vault-btn\" data-id=\"3\">\n        <div class=\"btn-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/><path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/><path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/><path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\"\/><\/svg>\n        <\/div>\n        <span class=\"btn-label\">Projects<\/span>\n      <\/button>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n\/\/ === ANIMATION OBSERVER ===\nconst vaultObserver = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      entry.target.classList.add('is-visible');\n      vaultObserver.unobserve(entry.target);\n    }\n  });\n}, { threshold: 0.2 });\n\ndocument.querySelectorAll('.vault-header, .vault-screen').forEach(el => {\n  vaultObserver.observe(el);\n});\n\n\/\/ === DATA KONTEN ===\nconst moduleData = [\n  {\n    icon: '<svg viewBox=\"0 0 24 24\" style=\"stroke: #F472B6;\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\/><\/svg>',\n    title: 'Futuristic Web Design',\n    desc: 'We build immersive, high-performance interfaces using cutting-edge tech like WebGL & 3D interactions tailored for your brand.',\n    tag: 'Primary Service'\n  },\n  {\n    icon: '<svg viewBox=\"0 0 24 24\" style=\"stroke: #A855F7;\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>',\n    title: 'Speed Optimized',\n    desc: 'Lightning fast load times under 1s guaranteed with optimized assets and clean code structure.',\n    tag: 'Performance'\n  },\n  {\n    icon: '<svg viewBox=\"0 0 24 24\" style=\"stroke: #60A5FA;\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg>',\n    title: 'SEO Mastery',\n    desc: 'Rank #1 on Google with our semantic and clean HTML structures designed for maximum visibility.',\n    tag: 'Visibility'\n  },\n  {\n    icon: '<svg viewBox=\"0 0 24 24\" style=\"stroke: #34D399;\"><path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/><path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/><path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/><path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\"\/><\/svg>',\n    title: 'Projects Completed',\n    desc: 'Over 150+ successful projects delivered globally. From innovative startups to enterprise-level solutions.',\n    tag: 'Achievement'\n  }\n];\n\nconst screenContent = document.getElementById('screenContent');\nconst allVaultBtns = document.querySelectorAll('.vault-btn');\n\n\/\/ Fungsi Render Konten\nfunction renderScreen(id) {\n  const data = moduleData[id];\n  screenContent.innerHTML = `\n    <div class=\"screen-icon\">${data.icon}<\/div>\n    <h3 class=\"screen-title\">${data.title}<\/h3>\n    <p class=\"screen-desc\">${data.desc}<\/p>\n    <div class=\"screen-tag\"><span><\/span> ${data.tag}<\/div>\n  `;\n}\n\n\/\/ Fungsi Klik Tombol\nallVaultBtns.forEach(btn => {\n  btn.addEventListener('click', function() {\n    const id = this.getAttribute('data-id');\n\n    \/\/ 1. Reset semua tombol jadi mati\n    allVaultBtns.forEach(b => b.classList.remove('is-active'));\n    \n    \/\/ 2. Aktifkan tombol yang diklik\n    this.classList.add('is-active');\n\n    \/\/ 3. Trigger Efek Blur di Layar\n    screenContent.classList.add('is-switching');\n\n    \/\/ Setelah 300ms (pas layar lagi nge-blur), ganti kontennya\n    setTimeout(() => {\n      renderScreen(id);\n      \/\/ Lepas blur-nya balik\n      screenContent.classList.remove('is-switching');\n    }, 300);\n  });\n});\n\n\/\/ Load konten default pertama kali\nrenderScreen(0);\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-329423e e-con-full e-flex e-con e-parent\" data-id=\"329423e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4845358 elementor-widget elementor-widget-html\" data-id=\"4845358\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === ROLLING CLAY DIVIDER VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.divider-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.divider-section-wrap {\n  position: relative;\n  background: var(--clay-bg);\n  padding: 40px 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n}\n\n\/* REL CEKUNG (TRACK) *\/\n.clay-track {\n  position: relative;\n  width: 100%;\n  max-width: 800px;\n  height: 12px;\n  border-radius: 10px;\n  background: var(--clay-bg);\n  box-shadow: inset 3px 3px 6px var(--clay-shadow-dark), inset -3px -3px 6px var(--clay-shadow-light);\n}\n\n\/* BOLA TANAH LIAT (SPHERE) *\/\n.clay-sphere {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n  transform: translate(-50%, -50%);\n  \n  \/* Animasi menggelinding bolak-balik *\/\n  animation: rollSphere 4s ease-in-out infinite alternate;\n  animation-play-state: paused; \/* Default paused, dikontrol JS *\/\n}\n\n\/* Tambahkan sedikit glow pink biar keren *\/\n.clay-sphere::after {\n  content: '';\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 10px; height: 10px;\n  border-radius: 50%;\n  background: var(--clay-accent);\n  box-shadow: 0 0 10px var(--clay-accent);\n}\n\n\/* Kelas untuk mengaktifkan animasi (dikontrol JS) *\/\n.divider-section-wrap.is-playing .clay-sphere {\n  animation-play-state: running;\n}\n\n@keyframes rollSphere {\n  0% {\n    left: 0%;\n    transform: translate(-50%, -50%) rotate(0deg);\n  }\n  100% {\n    left: 100%;\n    transform: translate(-50%, -50%) rotate(720deg); \/* Putar 2x lipat biar efek nggelindingnya kerasa *\/\n  }\n}\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .divider-section-wrap { padding: 30px 20px; }\n  .clay-track { max-width: 100%; }\n  .clay-sphere { width: 24px; height: 24px; }\n  .clay-sphere::after { width: 8px; height: 8px; }\n}\n<\/style>\n\n<section class=\"divider-section-wrap\" id=\"clayDivider1\">\n  <div class=\"clay-track\">\n    <div class=\"clay-sphere\"><\/div>\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const dividerWrap = document.getElementById('clayDivider1');\n\n  \/\/ === INTERSECTION OBSERVER (PAUSE\/KILL ANIMASI) ===\n  const dividerObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        \/\/ Kalau masuk layar, mainkan animasi\n        dividerWrap.classList.add('is-playing');\n      } else {\n        \/\/ Kalau keluar layar, pause animasinya\n        dividerWrap.classList.remove('is-playing');\n      }\n    });\n  }, { threshold: 0.1 }); \/\/ Trigger pas 10% divider masuk layar\n\n  dividerObserver.observe(dividerWrap);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c2b5045 e-con-full e-flex e-con e-parent\" data-id=\"c2b5045\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c1325d elementor-widget elementor-widget-html\" data-id=\"8c1325d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === TOGGLE SECTION VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-bg-pink: #FDF2F8; \n  --clay-text: #4A4A4A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.toggle-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.toggle-section-wrap {\n  background: var(--clay-bg);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start; \/* Diubah dari center ke flex-start biar naik *\/\n  align-items: center;\n  padding: 15vh 20px 100px; \/* Diubah jadi 15vh atas biar pas *\/\n  transition: background 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\n  overflow: hidden;\n}\n\n.toggle-section-wrap.is-rwb-mode {\n  background: var(--clay-bg-pink);\n}\n\n.toggle-header {\n  text-align: center;\n  margin-bottom: 50px;\n  z-index: 2;\n}\n\n\/* BADGE SERAGAM *\/\n.toggle-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.toggle-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.toggle-switch-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  margin-bottom: 60px;\n  z-index: 2;\n}\n\n.toggle-state-text {\n  font-size: 1rem;\n  font-weight: 700;\n  color: #9CA3AF;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n.toggle-state-text.active {\n  color: var(--clay-accent);\n  text-shadow: 0 0 10px rgba(244, 114, 182, 0.3);\n}\n\n.clay-toggle-btn {\n  width: 120px;\n  height: 60px;\n  border-radius: 30px;\n  background: var(--clay-bg);\n  border: none;\n  cursor: pointer;\n  position: relative;\n  box-shadow: inset 6px 6px 12px var(--clay-shadow-dark), inset -6px -6px 12px var(--clay-shadow-light);\n  transition: all 0.3s ease;\n  outline: none !important;\n}\n\n.clay-toggle-knob {\n  position: absolute;\n  top: 5px;\n  left: 5px;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9CA3AF;\n}\n\n.is-rwb-mode .clay-toggle-knob {\n  transform: translateX(60px);\n  background: var(--clay-accent);\n  color: #FFFFFF;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light), 0 0 15px rgba(244, 114, 182, 0.4);\n}\n\n.features-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 30px;\n  max-width: 900px;\n  width: 100%;\n  z-index: 2;\n}\n\n.feature-card {\n  background: var(--clay-bg);\n  padding: 35px 25px;\n  border-radius: 24px;\n  text-align: center;\n  box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light);\n  transition: all 0.4s ease;\n}\n\n.feature-icon-box {\n  width: 60px; height: 60px;\n  margin: 0 auto 20px;\n  border-radius: 16px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--clay-bg);\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light);\n  color: #9CA3AF;\n  transition: all 0.3s ease;\n}\n\n.is-rwb-mode .feature-icon-box {\n  background: var(--clay-accent);\n  color: #FFFFFF;\n  box-shadow: 0 10px 20px rgba(244, 114, 182, 0.3), inset 2px 2px 4px var(--clay-accent-soft);\n  animation: popOut 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n}\n\n@keyframes popOut {\n  0% { transform: scale(0.8); }\n  50% { transform: scale(1.15); }\n  100% { transform: scale(1); }\n}\n\n.feature-icon-box svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.clay-toggle-knob svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\n.feature-title {\n  font-size: 1.1rem; font-weight: 700; color: var(--clay-text); margin-bottom: 8px;\n}\n.feature-desc {\n  font-size: 0.8rem; font-weight: 300; color: #6B7280; line-height: 1.6;\n}\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n@media (max-width: 768px) {\n  .toggle-section-wrap {\n    padding: 8vh 15px 80px; \/* Naikin posisi di mobile juga *\/\n  }\n  .features-grid { grid-template-columns: 1fr; gap: 20px; }\n  .toggle-switch-wrapper { gap: 10px; }\n  .toggle-state-text { font-size: 0.8rem; }\n  .clay-toggle-btn { width: 90px; height: 45px; border-radius: 22px; }\n  .clay-toggle-knob { width: 37px; height: 37px; top: 4px; left: 4px; }\n  .is-rwb-mode .clay-toggle-knob { transform: translateX(45px); }\n  .clay-toggle-knob svg { width: 18px; height: 18px; }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (HOVER, FOCUS, ACTIVE) === *\/\n\/* ====================================================== *\/\n.toggle-section-wrap button, \n.toggle-section-wrap a,\n.toggle-section-wrap span {\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.toggle-section-wrap button:hover, \n.toggle-section-wrap button:focus, \n.toggle-section-wrap button:focus-visible,\n.toggle-section-wrap button:active,\n.toggle-section-wrap a:hover,\n.toggle-section-wrap a:focus,\n.toggle-section-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: var(--clay-bg) !important;\n  text-decoration: none !important;\n}\n\n\/* Khusus Toggle biar shadow dalemnya nggak hilang pas hover\/fokus *\/\n.toggle-section-wrap .clay-toggle-btn,\n.toggle-section-wrap .clay-toggle-btn:hover,\n.toggle-section-wrap .clay-toggle-btn:focus,\n.toggle-section-wrap .clay-toggle-btn:focus-visible,\n.toggle-section-wrap .clay-toggle-btn:active {\n  background-color: var(--clay-bg) !important;\n  box-shadow: inset 6px 6px 12px var(--clay-shadow-dark), inset -6px -6px 12px var(--clay-shadow-light) !important;\n}\n<\/style>\n\n<section class=\"toggle-section-wrap\" id=\"toggleSection\">\n  \n  <div class=\"toggle-header fade-up\">\n    <div class=\"toggle-badge\"><span><\/span> Why Choose Us?<\/div>\n  <\/div>\n\n  <div class=\"toggle-switch-wrapper fade-up\">\n    <span class=\"toggle-state-text active\" id=\"textNormal\">Standard Agency<\/span>\n    <button class=\"clay-toggle-btn\" id=\"clayToggleBtn\">\n      <div class=\"clay-toggle-knob\" id=\"toggleKnob\">\n        <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"5\"><\/circle><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"><\/line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"><\/line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"><\/line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"><\/line><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"><\/line><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"><\/line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"><\/line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"><\/line><\/svg>\n      <\/div>\n    <\/button>\n    <span class=\"toggle-state-text\" id=\"textRwb\">RWB Mode<\/span>\n  <\/div>\n\n  <div class=\"features-grid fade-up\">\n    \n    <div class=\"feature-card\">\n      <div class=\"feature-icon-box\" id=\"iconBox1\">\n        <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><\/svg>\n      <\/div>\n      <div class=\"feature-title\" id=\"feat1Title\">Rigid Templates<\/div>\n      <div class=\"feature-desc\" id=\"feat1Desc\">Same old designs with no fun interactions, making visitors bored quickly.<\/div>\n    <\/div>\n\n    <div class=\"feature-card\">\n      <div class=\"feature-icon-box\" id=\"iconBox2\">\n        <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n      <\/div>\n      <div class=\"feature-title\" id=\"feat2Title\">Slow Loading<\/div>\n      <div class=\"feature-desc\" id=\"feat2Desc\">Heavy, unoptimized scripts causing laggy scrolling and high bounce rates.<\/div>\n    <\/div>\n\n    <div class=\"feature-card\">\n      <div class=\"feature-icon-box\" id=\"iconBox3\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line><\/svg>\n      <\/div>\n      <div class=\"feature-title\" id=\"feat3Title\">Boring UI<\/div>\n      <div class=\"feature-desc\" id=\"feat3Desc\">Standard look with no micro-interactions to make users say 'wow'.<\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const section = document.getElementById('toggleSection');\n  const toggleBtn = document.getElementById('clayToggleBtn');\n  const textNormal = document.getElementById('textNormal');\n  const textRwb = document.getElementById('textRwb');\n  const toggleKnob = document.getElementById('toggleKnob');\n  \n  const iconBox1 = document.getElementById('iconBox1');\n  const iconBox2 = document.getElementById('iconBox2');\n  const iconBox3 = document.getElementById('iconBox3');\n\n  const svgNormal = {\n    icon1: '<svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><\/svg>',\n    icon2: '<svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>',\n    icon3: '<svg viewBox=\"0 0 24 24\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line><\/svg>'\n  };\n\n  const svgRwb = {\n    icon1: '<svg viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"><\/path><\/svg>',\n    icon2: '<svg viewBox=\"0 0 24 24\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"><\/polygon><\/svg>',\n    icon3: '<svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>'\n  };\n\n  const svgSun = '<svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"5\"><\/circle><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"><\/line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"><\/line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"><\/line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"><\/line><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"><\/line><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"><\/line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"><\/line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"><\/line><\/svg>';\n  const svgStar = '<svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>';\n\n  const contentData = {\n    normal: {\n      feat1Title: 'Rigid Templates',\n      feat1Desc: 'Same old designs with no fun interactions, making visitors bored quickly.',\n      feat2Title: 'Slow Loading',\n      feat2Desc: 'Heavy, unoptimized scripts causing laggy scrolling and high bounce rates.',\n      feat3Title: 'Boring UI',\n      feat3Desc: 'Standard look with no micro-interactions to make users say \\'wow\\'.'\n    },\n    rwb: {\n      feat1Title: 'Squishy & Interactive',\n      feat1Desc: 'Soft Claymorphism design with micro-interactions on every click.',\n      feat2Title: 'Fast & Lightweight',\n      feat2Desc: 'Pure Vanilla JS & CSS, no heavy libraries. Smooth 60fps scroll even on older phones.',\n      feat3Title: 'Out-of-the-Box UI',\n      feat3Desc: 'Unusual visual effects that make your brand look premium and memorable.'\n    }\n  };\n\n  function applyMode(isRwb) {\n    section.classList.toggle('is-rwb-mode', isRwb);\n    textNormal.classList.toggle('active', !isRwb);\n    textRwb.classList.toggle('active', isRwb);\n\n    const mode = isRwb ? 'rwb' : 'normal';\n    document.getElementById('feat1Title').innerText = contentData[mode].feat1Title;\n    document.getElementById('feat1Desc').innerText = contentData[mode].feat1Desc;\n    document.getElementById('feat2Title').innerText = contentData[mode].feat2Title;\n    document.getElementById('feat2Desc').innerText = contentData[mode].feat2Desc;\n    document.getElementById('feat3Title').innerText = contentData[mode].feat3Title;\n    document.getElementById('feat3Desc').innerText = contentData[mode].feat3Desc;\n\n    \/\/ Ganti Ikon Kartu\n    iconBox1.innerHTML = isRwb ? svgRwb.icon1 : svgNormal.icon1;\n    iconBox2.innerHTML = isRwb ? svgRwb.icon2 : svgNormal.icon2;\n    iconBox3.innerHTML = isRwb ? svgRwb.icon3 : svgNormal.icon3;\n\n    \/\/ Ganti Ikon Toggle\n    toggleKnob.innerHTML = isRwb ? svgStar : svgSun;\n\n    \/\/ Reset animasi pop\n    [iconBox1, iconBox2, iconBox3].forEach(icon => {\n      icon.style.animation = 'none';\n      void icon.offsetWidth;\n      if (isRwb) icon.style.animation = 'popOut 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\n    });\n  }\n\n  \/\/ Klik Tombol Saklar\n  toggleBtn.addEventListener('click', function() {\n    const isRwb = !section.classList.contains('is-rwb-mode');\n    applyMode(isRwb);\n  });\n\n  \/\/ Bisa diklik dari teksnya juga\n  textNormal.addEventListener('click', function() { applyMode(false); });\n  textRwb.addEventListener('click', function() { applyMode(true); });\n\n  \/\/ === INTERSECTION OBSERVER (FADE UP ON SCROLL) ===\n  const toggleObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        toggleObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n\n  document.querySelectorAll('.fade-up').forEach(el => {\n    toggleObserver.observe(el);\n  });\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a8c50b e-con-full e-flex e-con e-parent\" data-id=\"4a8c50b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-768ac6d elementor-widget elementor-widget-html\" data-id=\"768ac6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === SQUISHY CTA SECTION VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-accent-secondary: #A855F7; \/* Warna kedua untuk gradien teks *\/\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.cta-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.cta-section-wrap {\n  background: var(--clay-bg);\n  min-height: 80vh; \n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start; \n  align-items: center;\n  padding: 15vh 20px 100px; \n  overflow: hidden;\n}\n\n.cta-header {\n  text-align: center;\n  margin-bottom: 60px;\n}\n\n.cta-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.cta-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n\/* UKURAN TEKS DISESUAIKAN SAMA HOME HERO *\/\n.cta-header h2 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 15px; letter-spacing: -0.5px;\n}\n\n\/* STYLE GRADIEN UNTUK TEKS HIGHLIGHT *\/\n.cta-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, var(--clay-accent), var(--clay-accent-secondary)); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.cta-header p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300;\n  max-width: 500px; margin: 0 auto;\n}\n\n\/* === TOMBOL PRESS & HOLD === *\/\n.hold-btn-wrapper {\n  position: relative;\n  width: 220px;\n  height: 220px;\n}\n\n.hold-btn {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--clay-text);\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  transition: box-shadow 0.1s ease, transform 0.1s ease, background 0.3s ease;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.hold-btn-progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n  width: 0%;\n  background: var(--clay-accent);\n  opacity: 0.15;\n  transition: width 0.05s linear;\n  z-index: 1;\n}\n\n.hold-btn-content {\n  z-index: 2;\n  position: relative;\n  text-align: center;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n\n.hold-btn-content svg {\n  width: 40px;\n  height: 40px;\n  stroke: var(--clay-accent);\n  fill: none;\n  stroke-width: 2;\n  transition: transform 0.3s ease, stroke 0.3s ease;\n}\n\n.hold-btn:hover .hold-btn-content svg {\n  transform: scale(1.1) rotate(-10deg);\n}\n\n.hold-btn.is-holding {\n  box-shadow: inset 8px 8px 16px var(--clay-shadow-dark), inset -8px -8px 16px var(--clay-shadow-light);\n  transform: scale(0.95);\n}\n\n.hold-btn.is-holding .hold-btn-content svg {\n  transform: scale(0.9);\n}\n\n.hold-btn.is-success {\n  background: var(--clay-accent) !important;\n  box-shadow: 0 0 40px rgba(244, 114, 182, 0.6), inset 0 0 20px rgba(255,255,255,0.2) !important;\n}\n\n.hold-btn.is-success .hold-btn-content svg, \n.hold-btn.is-success .hold-btn-content span {\n  color: #fff !important;\n  stroke: #fff !important;\n}\n\n.hold-helper-text {\n  margin-top: 30px;\n  font-size: 0.8rem;\n  color: #9CA3AF;\n  font-weight: 500;\n  letter-spacing: 0.5px;\n}\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .cta-section-wrap {\n    padding: 9vh 15px 80px; \n  }\n  .hold-btn-wrapper { width: 180px; height: 180px; }\n  .hold-btn-content svg { width: 32px; height: 32px; }\n  .hold-btn-content { font-size: 0.9rem; }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.cta-section-wrap button, \n.cta-section-wrap a {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.cta-section-wrap button:hover, \n.cta-section-wrap button:focus, \n.cta-section-wrap button:focus-visible,\n.cta-section-wrap button:active,\n.cta-section-wrap a:hover, \n.cta-section-wrap a:focus, \n.cta-section-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: transparent !important; \n  text-decoration: none !important;\n}\n\n\/* RE-APPLY CLAY STYLE KE TOMBOL BIAR GAK DI-OVERRIDE ELEMENTOR *\/\n.cta-section-wrap .hold-btn {\n  background-color: var(--clay-bg) !important;\n  color: var(--clay-text) !important;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light) !important;\n}\n\n.cta-section-wrap .hold-btn:hover {\n  background-color: var(--clay-bg) !important;\n}\n\n.cta-section-wrap .hold-btn.is-holding {\n  box-shadow: inset 8px 8px 16px var(--clay-shadow-dark), inset -8px -8px 16px var(--clay-shadow-light) !important;\n}\n\n.cta-section-wrap .hold-btn.is-success {\n  background-color: var(--clay-accent) !important;\n}\n<\/style>\n\n<section class=\"cta-section-wrap\" id=\"ctaSection\">\n  \n  <div class=\"cta-header fade-up\">\n    <div class=\"cta-badge\"><span><\/span> Ready to Launch?<\/div>\n    <h2>Let's Build Something <em>Squishy<\/em><\/h2>\n    <p>Ready to break the mold? Press and hold the button below to start your next big project with us.<\/p>\n  <\/div>\n\n  <div class=\"hold-btn-wrapper fade-up\">\n    <button class=\"hold-btn\" id=\"holdBtn\">\n      <div class=\"hold-btn-progress\" id=\"holdProgress\"><\/div>\n      <div class=\"hold-btn-content\" id=\"holdContent\">\n        <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M5 3l14 9-14 9V3z\"><\/path>\n        <\/svg>\n        <span>Hold to Start<\/span>\n      <\/div>\n    <\/button>\n  <\/div>\n\n  <div class=\"hold-helper-text fade-up\">PRESS &amp; HOLD FOR 1.5 SECONDS<\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const holdBtn = document.getElementById('holdBtn');\n  const holdProgress = document.getElementById('holdProgress');\n  const holdContent = document.getElementById('holdContent');\n  \n  let holdInterval;\n  let progress = 0;\n  const holdDuration = 1500; \n  const stepTime = 15;\n  const stepValue = (stepTime \/ holdDuration) * 100;\n\n  const defaultContent = `\n    <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M5 3l14 9-14 9V3z\"><\/path>\n    <\/svg>\n    <span>Hold to Start<\/span>\n  `;\n  \n  const successContent = `\n    <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n    <\/svg>\n    <span>Success! Redirecting...<\/span>\n  `;\n\n  function resetButton() {\n    holdBtn.classList.remove('is-holding', 'is-success');\n    holdProgress.style.width = '0%';\n    progress = 0;\n    holdContent.innerHTML = defaultContent;\n  }\n\n  function startHold(e) {\n    e.preventDefault();\n    if (holdBtn.classList.contains('is-success')) return; \n    \n    holdBtn.classList.add('is-holding');\n    progress = 0;\n    holdProgress.style.width = '0%';\n    \n    holdInterval = setInterval(() => {\n      progress += stepValue;\n      if (progress >= 100) {\n        progress = 100;\n        holdProgress.style.width = '100%';\n        clearInterval(holdInterval);\n        triggerSuccess();\n      } else {\n        holdProgress.style.width = progress + '%';\n      }\n    }, stepTime);\n  }\n\n  function endHold() {\n    clearInterval(holdInterval);\n    if (progress < 100 && !holdBtn.classList.contains('is-success')) {\n      progress = 0;\n      holdProgress.style.width = '0%';\n      holdBtn.classList.remove('is-holding');\n    }\n  }\n\n  function triggerSuccess() {\n    holdBtn.classList.remove('is-holding');\n    holdBtn.classList.add('is-success');\n    holdContent.innerHTML = successContent;\n    \n    setTimeout(() => {\n      window.location.href = 'https:\/\/wa.me\/6281227008020?text=Halo%20Rudi%2C%20saya%20mau%20beli%20template';\n    }, 800);\n  }\n\n  holdBtn.addEventListener('mousedown', startHold);\n  holdBtn.addEventListener('mouseup', endHold);\n  holdBtn.addEventListener('mouseleave', endHold);\n\n  holdBtn.addEventListener('touchstart', startHold, { passive: false });\n  holdBtn.addEventListener('touchend', endHold);\n  holdBtn.addEventListener('touchcancel', endHold);\n\n  document.addEventListener('click', function(e) {\n    if (!holdBtn.contains(e.target) && holdBtn.classList.contains('is-success')) {\n      resetButton();\n    }\n  });\n\n  const ctaObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        ctaObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n\n  document.querySelectorAll('.fade-up').forEach(el => {\n    ctaObserver.observe(el);\n  });\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>Creative Digital Agency We Build Squishy &#038; Modern Digital Experiences We are an out-of-the-box creative agency. We craft interactive, soft, and high-converting digital products that make your brand unforgettable. Start a Project View Portfolios Featured Work Don&#8217;t Just Build. Break the Glass. We don&#8217;t do boring templates. Click the glass to reveal how we crafted [&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-993","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":336,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/993\/revisions"}],"predecessor-version":[{"id":1880,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/993\/revisions\/1880"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/media?parent=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}