{"id":1036,"date":"2026-08-03T23:30:57","date_gmt":"2026-08-03T23:30:57","guid":{"rendered":"https:\/\/lab.rwb.my.id\/sma\/?page_id=1036"},"modified":"2026-08-07T17:52:11","modified_gmt":"2026-08-07T17:52:11","slug":"services","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/sma\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1036\" class=\"elementor elementor-1036\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2191ed9 e-con-full e-flex e-con e-parent\" data-id=\"2191ed9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3c092d elementor-widget elementor-widget-html\" data-id=\"c3c092d\" 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\/* === SERVICES HERO 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.services-hero-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.services-hero-wrap {\n  position: relative;\n  background: var(--clay-bg);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 60px 40px 80px;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.services-container {\n  max-width: 1200px;\n  width: 100%;\n  margin: auto;\n  display: flex;\n  align-items: center;\n  gap: 60px;\n}\n\n\/* === KIRI: KONTEN TEKS === *\/\n.services-content {\n  flex: 1;\n  z-index: 2;\n}\n\n.services-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.services-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.services-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.2rem; letter-spacing: -0.5px;\n}\n.services-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.services-content p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300; line-height: 1.7;\n  margin-bottom: 2rem; max-width: 500px;\n}\n\n.services-btns { display: flex; gap: 1rem; flex-wrap: wrap; }\n\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  text-decoration: none;\n  display: inline-block;\n  cursor: pointer;\n  border: none;\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\/* === KANAN: VISUAL 3D CLOUD === *\/\n.services-visual {\n  flex: 1;\n  position: relative;\n  z-index: 1;\n  height: 450px;\n  transform-style: preserve-3d;\n}\n\n\/* Bola Pusat Clay (Planet) *\/\n.cloud-core {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: inset 10px 10px 20px var(--clay-shadow-dark), inset -10px -10px 20px var(--clay-shadow-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n.cloud-core span {\n  font-size: 1.2rem; font-weight: 800; color: var(--clay-accent);\n  letter-spacing: 1px; display: block; text-align: center; line-height: 1.4;\n}\n\n\/* Kartu Layanan Melayang *\/\n.service-card {\n  position: absolute; width: 140px; padding: 15px;\n  background: var(--clay-bg); border-radius: 18px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  display: flex; flex-direction: column; align-items: center; gap: 8px;\n  text-align: center; z-index: 2;\n  animation: floatCard 4s ease-in-out infinite alternate;\n}\n.service-card:nth-child(2) { top: 10%; left: 10%; animation-delay: 0s; transform: translateZ(40px); }\n.service-card:nth-child(3) { top: 15%; right: 5%; animation-delay: 0.5s; transform: translateZ(60px); }\n.service-card:nth-child(4) { bottom: 15%; left: 5%; animation-delay: 1s; transform: translateZ(50px); }\n.service-card:nth-child(5) { bottom: 10%; right: 10%; animation-delay: 1.5s; transform: translateZ(30px); }\n\n@keyframes floatCard {\n  0% { transform: translateY(0px) translateZ(40px); }\n  100% { transform: translateY(-15px) translateZ(40px); }\n}\n\n.card-icon-box {\n  width: 40px; height: 40px; 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  color: var(--clay-accent);\n}\n.card-icon-box svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.card-title { font-size: 0.8rem; font-weight: 600; color: var(--clay-text); }\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0; 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  .services-hero-wrap { \n    padding: 80px 20px 150px !important; \n    min-height: auto !important; \n    justify-content: flex-start; \n    perspective: none; \n    overflow: visible;\n  }\n  .services-container { flex-direction: column; gap: 0px; align-items: center; }\n  .services-content { text-align: center; width: 100%; max-width: 450px; z-index: 5; position: relative; }\n  .services-btns { justify-content: center; }\n  .services-content p { margin-left: auto; margin-right: auto; }\n  \n  .services-visual { \n    height: 450px; width: 100%; max-width: 360px;\n    margin: 150px auto 0 !important; \n    transform-style: flat; position: relative; z-index: 1;\n  }\n  .cloud-core { width: 140px; height: 140px; }\n  .service-card { width: 105px; padding: 10px; animation: floatCardMobile 4s ease-in-out infinite alternate; }\n  .service-card:nth-child(2) { top: 40px; left: 0; right: auto; bottom: auto; animation-delay: 0s; }\n  .service-card:nth-child(3) { top: 40px; right: 0; left: auto; bottom: auto; animation-delay: 0.5s; }\n  .service-card:nth-child(4) { bottom: 40px; left: 0; top: auto; right: auto; animation-delay: 1s; }\n  .service-card:nth-child(5) { bottom: 40px; right: 0; top: auto; left: auto; animation-delay: 1.5s; }\n  \n  .card-icon-box { width: 35px; height: 35px; }\n  .card-icon-box svg { width: 18px; height: 18px; }\n  .card-title { font-size: 0.75rem; }\n}\n\n@keyframes floatCardMobile {\n  0% { transform: translateY(0px); }\n  100% { transform: translateY(-10px); }\n}\n\n\/* ====================================================== *\/\n\/* === CLAY MODAL POPUP (PERBAIKAN FULL) === *\/\n\/* ====================================================== *\/\n.modal-overlay {\n  position: fixed !important;\n  top: 0; left: 0; right: 0; bottom: 0; \/* Ganti 100vw\/100vh pakai inset *\/\n  background: rgba(58, 58, 58, 0.6);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999; \/* Naikin z-index biar nempel di paling atas Elementor *\/\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  padding: 20px;\n  overflow-y: auto; \/* Kalau layar HP kekecilan, bisa di-scroll *\/\n}\n\n.modal-overlay.active {\n  opacity: 1;\n  visibility: visible;\n}\n\n.modal-content-clay {\n  background: var(--clay-bg);\n  width: 100%;\n  max-width: 500px;\n  max-height: 85vh;\n  overflow-y: auto;\n  border-radius: 28px;\n  padding: 40px 30px;\n  position: relative;\n  box-shadow: 12px 12px 24px rgba(0,0,0,0.3), -12px -12px 24px rgba(255,255,255,0.1);\n  transform: translateY(30px) scale(0.95);\n  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n  margin: auto; \/* Tambahin margin auto biar center pas di-scroll *\/\n}\n\n.modal-overlay.active .modal-content-clay {\n  transform: translateY(0) scale(1);\n}\n\n.modal-close-btn {\n  position: absolute;\n  top: 20px; right: 20px;\n  width: 40px; height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: var(--clay-bg);\n  color: var(--clay-text);\n  font-size: 1.2rem;\n  font-weight: 600;\n  cursor: pointer;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  transition: transform 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n}\n.modal-close-btn:hover { transform: rotate(90deg); }\n\n.modal-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--clay-text);\n  margin-bottom: 0.5rem;\n  padding-right: 30px;\n}\n.modal-subtitle {\n  font-size: 0.85rem;\n  color: #6B7280;\n  margin-bottom: 2rem;\n  font-weight: 300;\n  line-height: 1.6;\n}\n\n.modal-services-list {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.modal-service-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 15px;\n  padding: 15px;\n  border-radius: 16px;\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.modal-service-item .card-icon-box {\n  flex-shrink: 0;\n}\n\n.modal-service-text h4 {\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--clay-text);\n  margin-bottom: 4px;\n}\n.modal-service-text p {\n  font-size: 0.8rem;\n  color: #6B7280;\n  font-weight: 300;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 100%;\n}\n\n.modal-cta {\n  width: 100%;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n\/* Custom Scrollbar for Modal *\/\n.modal-content-clay::-webkit-scrollbar { width: 8px; }\n.modal-content-clay::-webkit-scrollbar-track { background: transparent; }\n.modal-content-clay::-webkit-scrollbar-thumb { background: var(--clay-shadow-dark); border-radius: 10px; }\n\n\/* Body lock when modal active *\/\nbody.modal-open {\n  overflow: hidden;\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (SAFE OPTION) === *\/\n\/* ====================================================== *\/\n.services-hero-wrap button, \n.services-hero-wrap a {\n  background-image: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.services-hero-wrap button:focus, \n.services-hero-wrap button:focus-visible,\n.services-hero-wrap a:focus, \n.services-hero-wrap a:focus-visible {\n  outline: none !important;\n}\n\n.services-hero-wrap button:not(.clay-btn-primary):not(.clay-btn-ghost):not(.modal-close-btn):hover, \n.services-hero-wrap button:not(.clay-btn-primary):not(.clay-btn-ghost):not(.modal-close-btn):active,\n.services-hero-wrap a:not(.clay-btn-primary):not(.clay-btn-ghost):hover, \n.services-hero-wrap a:not(.clay-btn-primary):not(.clay-btn-ghost):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.services-hero-wrap .service-card,\n.services-hero-wrap .cloud-core {\n  background-color: var(--clay-bg) !important;\n}\n<\/style>\n\n<!-- BAGIAN 1: SECTION UTAMA (TANPA POPUP) -->\n<section class=\"services-hero-wrap\" id=\"servicesHero\">\n  <div class=\"services-container\">\n    \n    <!-- KIRI: TEKS -->\n    <div class=\"services-content\">\n      <div class=\"services-badge fade-up\"><span><\/span> Our Services<\/div>\n      <h1 class=\"fade-up\">Next-Gen <em>Digital Solutions<\/em> For Your Brand<\/h1>\n      <p class=\"fade-up\">We don't just build websites; we craft comprehensive digital ecosystems. From immersive UI\/UX to lightning-fast development, we provide the tools you need to dominate the digital landscape.<\/p>\n      \n      <!-- TOMBOL BUKA POPUP -->\n      <div class=\"services-btns fade-up\">\n        <button class=\"clay-btn-primary\" id=\"openServicesModal\">View All Services<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- KANAN: VISUAL 3D CLOUD -->\n    <div class=\"services-visual fade-up\" id=\"servicesVisual\">\n      \n      <!-- Planet Pusat -->\n      <div class=\"cloud-core\">\n        <span>RWB<br>CLOUD<\/span>\n      <\/div>\n\n      <!-- Kartu Layanan -->\n      <div class=\"service-card\">\n        <div class=\"card-icon-box\">\n          <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        <\/div>\n        <div class=\"card-title\">UI\/UX Design<\/div>\n      <\/div>\n\n      <div class=\"service-card\">\n        <div class=\"card-icon-box\">\n          <svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg>\n        <\/div>\n        <div class=\"card-title\">Web Dev<\/div>\n      <\/div>\n\n      <div class=\"service-card\">\n        <div class=\"card-icon-box\">\n          <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"card-title\">SEO Mastery<\/div>\n      <\/div>\n\n      <div class=\"service-card\">\n        <div class=\"card-icon-box\">\n          <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        <\/div>\n        <div class=\"card-title\">Speed Optim<\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- BAGIAN 2: STRUKTUR POP-UP MODAL (DIPISAH KE LUAR SECTION BIAR ELEMENTOR NGGAK NGOTAK NGATIK) -->\n<div class=\"modal-overlay\" id=\"servicesModal\">\n  <div class=\"modal-content-clay\">\n    <button class=\"modal-close-btn\" id=\"closeModalBtn\">&times;<\/button>\n    <h2 class=\"modal-title\">Our Core Services<\/h2>\n    <p class=\"modal-subtitle\">Everything you need to build, scale, and dominate your digital presence. Choose your path below.<\/p>\n    \n    <div class=\"modal-services-list\">\n      <!-- Item 1 -->\n      <div class=\"modal-service-item\">\n        <div class=\"card-icon-box\">\n          <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        <\/div>\n        <div class=\"modal-service-text\">\n          <h4>UI\/UX Design<\/h4>\n          <p>Crafting immersive, intuitive, and beautiful user interfaces that convert visitors into loyal customers.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Item 2 -->\n      <div class=\"modal-service-item\">\n        <div class=\"card-icon-box\">\n          <svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg>\n        <\/div>\n        <div class=\"modal-service-text\">\n          <h4>Web Development<\/h4>\n          <p>Lightning-fast, secure, and scalable websites built with the latest technologies to handle your growth.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Item 3 -->\n      <div class=\"modal-service-item\">\n        <div class=\"card-icon-box\">\n          <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"modal-service-text\">\n          <h4>SEO Mastery<\/h4>\n          <p>Dominate search rankings with data-driven strategies, technical optimization, and high-quality content.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Item 4 -->\n      <div class=\"modal-service-item\">\n        <div class=\"card-icon-box\">\n          <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        <\/div>\n        <div class=\"modal-service-text\">\n          <h4>Speed Optimization<\/h4>\n          <p>Boost your Core Web Vitals and user retention with extreme performance tuning and caching.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- TOMBOL AKSI DI DALAM POPUP -->\n    <a href=\"https:\/\/wa.me\/6281227008020?text=Hello%20RWB%20Cloud,%20I%20am%20interested%20in%20starting%20a%20project%20with%20you.\" target=\"_blank\" class=\"clay-btn-primary modal-cta\">Start a Project<\/a>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (FADE UP ON SCROLL) ===\n  const servicesObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        servicesObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n\n  document.querySelectorAll('.fade-up').forEach(el => servicesObserver.observe(el));\n\n  \/\/ === LOGIKA PARALLAX 3D (DESKTOP ONLY - STRICT) ===\n  const visual = document.getElementById('servicesVisual');\n  const cards = document.querySelectorAll('.service-card');\n  \n  const isDesktop = window.matchMedia('(hover: hover) and (pointer: fine) and (min-width: 769px)').matches;\n  \n  if (isDesktop && visual) {\n    const glow = document.createElement('div');\n    glow.style.cssText = `\n      position: absolute;\n      width: 300px; height: 300px;\n      border-radius: 50%;\n      background: radial-gradient(circle, rgba(244, 114, 182, 0.15), transparent 70%);\n      pointer-events: none;\n      transform: translate(-50%, -50%);\n      z-index: 0;\n      opacity: 0;\n      transition: opacity 0.3s ease;\n    `;\n    visual.appendChild(glow);\n\n    let rafId;\n    let targetX = 0, targetY = 0;\n    let currentX = 0, currentY = 0;\n\n    visual.addEventListener('mousemove', (e) => {\n      const rect = visual.getBoundingClientRect();\n      targetX = (e.clientX - rect.left) \/ rect.width - 0.5;\n      targetY = (e.clientY - rect.top) \/ rect.height - 0.5;\n      \n      glow.style.left = (e.clientX - rect.left) + 'px';\n      glow.style.top = (e.clientY - rect.top) + 'px';\n      glow.style.opacity = '1';\n    });\n\n    visual.addEventListener('mouseleave', () => {\n      targetX = 0; targetY = 0;\n      glow.style.opacity = '0';\n    });\n\n    function animateParallax() {\n      currentX += (targetX - currentX) * 0.1;\n      currentY += (targetY - currentY) * 0.1;\n\n      const rotateY = currentX * 30;\n      const rotateX = -currentY * 30;\n      visual.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;\n\n      rafId = requestAnimationFrame(animateParallax);\n    }\n\n    visual.addEventListener('mouseenter', () => {\n      if (!rafId) rafId = requestAnimationFrame(animateParallax);\n      cards.forEach(c => c.style.animation = 'none');\n    });\n\n    visual.addEventListener('mouseleave', () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n        rafId = null;\n      }\n      visual.style.transform = 'rotateY(0deg) rotateX(0deg)';\n      cards.forEach(c => c.style.animation = '');\n    });\n  }\n\n  \/\/ === LOGIKA MODAL POPUP ===\n  const modal = document.getElementById('servicesModal');\n  const openBtn = document.getElementById('openServicesModal');\n  const closeBtn = document.getElementById('closeModalBtn');\n\n  \/\/ Buka Modal\n  if (openBtn) {\n    openBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      modal.classList.add('active');\n      document.body.classList.add('modal-open');\n    });\n  }\n\n  \/\/ Tutup Modal (Tombol X)\n  if (closeBtn) {\n    closeBtn.addEventListener('click', function() {\n      modal.classList.remove('active');\n      document.body.classList.remove('modal-open');\n    });\n  }\n\n  \/\/ Tutup Modal (Klik area gelap di luar kotak)\n  if (modal) {\n    modal.addEventListener('click', function(e) {\n      if (e.target === modal) {\n        modal.classList.remove('active');\n        document.body.classList.remove('modal-open');\n      }\n    });\n  }\n\n  \/\/ Tutup Modal (Tombol ESC di Keyboard)\n  document.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape' && modal.classList.contains('active')) {\n      modal.classList.remove('active');\n      document.body.classList.remove('modal-open');\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-76ea6d2 e-con-full e-flex e-con e-parent\" data-id=\"76ea6d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad5a1b1 elementor-widget elementor-widget-html\" data-id=\"ad5a1b1\" 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\/* === VARIABLES (SAMA PERSIS KAYAK HERO) === *\/\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.glass-services-section * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.glass-services-section {\n  position: relative;\n  background: var(--clay-bg); \n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 80px 40px;\n  overflow: hidden;\n}\n\n.glass-container {\n  position: relative;\n  z-index: 2;\n  max-width: 1100px;\n  width: 100%;\n  margin: auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* === KIRI: TEKS === *\/\n.glass-content { display: flex; flex-direction: column; align-items: flex-start; }\n\n.glass-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.glass-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.glass-content h1 {\n  font-size: clamp(1.6rem, 3.5vw, 2.2rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 1.2rem; letter-spacing: -0.5px;\n}\n.glass-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.glass-content p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300; line-height: 1.7;\n  margin-bottom: 2rem; max-width: 450px;\n}\n\n.glass-btns { display: flex; gap: 1rem; flex-wrap: wrap; }\n\n\/* TOMBOL KACA *\/\n.btn-glass-primary {\n  position: relative;\n  padding: 12px 28px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; color: #fff !important;\n  background: linear-gradient(145deg, rgba(244, 114, 182, 0.9), rgba(168, 85, 247, 0.9)) !important;\n  border: 1px solid rgba(255, 255, 255, 0.4) !important;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light), inset 1px 1px 2px rgba(255,255,255,0.4) !important;\n  transition: transform 0.2s ease;\n  text-decoration: none;\n  display: inline-block;\n  cursor: pointer;\n  overflow: hidden;\n}\n.btn-glass-primary::before {\n  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;\n  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);\n  border-radius: 12px 12px 0 0; pointer-events: none;\n}\n.btn-glass-primary:hover { transform: translateY(-2px); }\n\n.btn-glass-ghost {\n  position: relative;\n  padding: 12px 28px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; color: var(--clay-text) !important;\n  background: rgba(255, 255, 255, 0.35) !important;\n  border: 1px solid rgba(255, 255, 255, 0.6) !important;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light), inset 1px 1px 2px rgba(255,255,255,0.5) !important;\n  transition: transform 0.2s ease;\n  text-decoration: none;\n  display: inline-block;\n  cursor: pointer;\n  overflow: hidden;\n}\n.btn-glass-ghost::before {\n  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;\n  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);\n  border-radius: 12px 12px 0 0; pointer-events: none;\n}\n.btn-glass-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.5) !important; }\n\n\/* === KANAN: VISUAL KACA === *\/\n.glass-visual {\n  position: relative;\n  height: 450px;\n}\n\n\/* Kartu Panel Besar *\/\n.glass-panel-card {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 85%;\n  height: 85%;\n  background: rgba(255, 255, 255, 0.2);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  border-radius: 28px;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light), inset 2px 2px 4px rgba(255,255,255,0.5);\n  padding: 30px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  z-index: 2;\n  animation: floatPanel 6s ease-in-out infinite alternate;\n}\n\n@keyframes floatPanel {\n  0% { transform: translate(-50%, -52%); }\n  100% { transform: translate(-50%, -48%); }\n}\n\n.panel-header { display: flex; justify-content: space-between; align-items: center; }\n.panel-dots { display: flex; gap: 6px; }\n.panel-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(58, 58, 58, 0.2); }\n.panel-title { font-size: 0.75rem; font-weight: 600; color: var(--clay-text); opacity: 0.7; }\n\n.panel-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 0; }\n\n\/* BINGKAI GAMBAR (MENGGANTIKAN CLIP-PATH) *\/\n.panel-image-box {\n  width: 100%; height: 100%;\n  border-radius: 12px;\n  overflow: hidden; \/* Biar gambar nggak keluar bingkai *\/\n  border: 1px solid rgba(255,255,255,0.4);\n  position: relative;\n  background: rgba(255,255,255,0.1);\n}\n.panel-image-box img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover; \/* INI YANG BIKIN GAMBAR OTOMATIS NUTUPIN BINGKAI *\/\n  display: block;\n}\n\n.panel-footer { display: flex; gap: 10px; }\n.panel-stat {\n  flex: 1;\n  padding: 12px;\n  background: rgba(255, 255, 255, 0.2);\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  border-radius: 12px;\n  text-align: center;\n}\n.panel-stat h4 { font-size: 1rem; font-weight: 700; color: var(--clay-accent); margin-bottom: 4px; }\n.panel-stat p { font-size: 0.7rem; color: var(--clay-text); opacity: 0.6; }\n\n\/* Kartu Kaca Kecil Numpuk (Desktop) *\/\n.glass-mini-card {\n  position: absolute;\n  width: 140px;\n  padding: 15px;\n  background: rgba(255, 255, 255, 0.35);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 18px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  z-index: 3;\n}\n.glass-mini-card.top-right { top: 10%; right: 0; animation: floatCard 4s ease-in-out infinite alternate; }\n.glass-mini-card.bottom-left { bottom: 10%; left: 0; animation-delay: 1s; animation: floatCard 4s ease-in-out infinite alternate; }\n\n@keyframes floatCard {\n  0% { transform: translateY(0px); }\n  100% { transform: translateY(-12px); }\n}\n\n.mini-icon {\n  width: 30px; height: 30px; border-radius: 8px;\n  display: flex; align-items: center; justify-content: center;\n  background: rgba(255, 255, 255, 0.5);\n  border: 1px solid rgba(255, 255, 255, 0.7);\n  color: var(--clay-accent);\n}\n.mini-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.mini-text h5 { font-size: 0.85rem; font-weight: 700; color: var(--clay-text); }\n.mini-text p { font-size: 0.7rem; color: #6B7280; }\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0; 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\/* === TOAST NOTIFICATION === *\/\n.toast-notification {\n  position: fixed;\n  top: 24px; \n  left: 50%;\n  transform: translateX(-50%) translateY(-150%);\n  min-width: 300px;\n  max-width: 90%;\n  width: fit-content;\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-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 svg { width: 14px; height: 14px; stroke: var(--clay-text); stroke-width: 2; fill: none; }\n\n\/* === RESPONSIVE MOBILE (PERBAIKAN KARTU NUTUPIN STATISTIK) === *\/\n@media (max-width: 768px) {\n  .glass-services-section { padding: 60px 20px 100px; }\n  .glass-container { grid-template-columns: 1fr; gap: 60px; }\n  .glass-content { text-align: center; align-items: center; }\n  .glass-content p { margin-left: auto; margin-right: auto; }\n  \n  .glass-visual { \n    height: auto;\n    max-width: 360px; \n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 25px; \/* Jarak antar panel besar sama kartu kecil diperlebar *\/\n  }\n  \n  \/* Panel Besar dinaikkin tingginya biar gambar & statistik keliatan *\/\n  .glass-panel-card {\n    position: relative !important;\n    top: auto !important; left: auto !important;\n    transform: none !important;\n    width: 100%;\n    height: 320px; \/* Dinaikin dari 250px biar muat gambar landscape + statistik *\/\n    animation: none !important;\n    z-index: 1; \/* Turunin z-index biar gak nimpa *\/\n  }\n  \n  \/* Kartu kecil dipaksa turun, gak melayang lagi *\/\n  .glass-mini-card {\n    position: relative !important;\n    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;\n    width: 100%;\n    flex-direction: row;\n    align-items: center;\n    animation: none !important;\n    z-index: 2;\n  }\n  .glass-mini-card.bottom-left { \n    animation: none !important;\n    margin-top: 10px; \/* Kasih jarak ekstra biar turun beneran *\/\n  }\n  \n  .panel-body { padding: 10px 0; }\n  .toast-notification { top: 16px; min-width: unset; width: calc(100% - 32px); max-width: calc(100% - 32px); }\n}\n<\/style>\n\n<section class=\"glass-services-section\" id=\"glassServicesSection\">\n  <div class=\"glass-container\">\n    \n    <!-- KIRI: TEKS -->\n    <div class=\"glass-content\">\n      <div class=\"glass-badge fade-up\"><span><\/span> Premium Quality<\/div>\n      <h1 class=\"fade-up\">Clay & Glass <em>Digital Solutions<\/em><\/h1>\n      <p class=\"fade-up\">Experience the perfect blend of soft 3D claymorphism and elegant frosted glass aesthetics. We build digital experiences that feel premium and perform flawlessly without heavy load times.<\/p>\n      \n      <div class=\"glass-btns fade-up\">\n        <!-- TARGET _BLANK DITAMBAHIN DI SINI -->\n        <a href=\"https:\/\/linktujuan.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn-glass-primary\">Explore Services<\/a>\n        <!-- TOMBOL DIGANTI JADI PEMICU TOAST -->\n        <button id=\"openToastBtn\" class=\"btn-glass-ghost\">Contact Us<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- KANAN: VISUAL KACA -->\n    <div class=\"glass-visual fade-up\">\n      \n      <!-- Kartu Panel Besar -->\n      <div class=\"glass-panel-card\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">Monthly Growth<\/div>\n          <div class=\"panel-dots\">\n            <span><\/span><span><\/span><span><\/span>\n          <\/div>\n        <\/div>\n        \n        <div class=\"panel-body\">\n          <!-- BINGKAI GAMBAR BARU -->\n          <div class=\"panel-image-box\">\n            <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/Laboratorium-IPA.jpeg\" alt=\"Grafik Pertumbuhan\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"panel-footer\">\n          <div class=\"panel-stat\">\n            <h4>+85%<\/h4>\n            <p>Speed Boost<\/p>\n          <\/div>\n          <div class=\"panel-stat\">\n            <h4>99%<\/h4>\n            <p>Uptime<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Kartu Kaca Kecil 1 -->\n      <div class=\"glass-mini-card top-right\">\n        <div class=\"mini-icon\">\n          <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        <\/div>\n        <div class=\"mini-text\">\n          <h5>Optimized<\/h5>\n          <p>Core Vitals passed<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Kartu Kaca Kecil 2 -->\n      <div class=\"glass-mini-card bottom-left\">\n        <div class=\"mini-icon\">\n          <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        <\/div>\n        <div class=\"mini-text\">\n          <h5>UI\/UX<\/h5>\n          <p>Conversion ready<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STRUKTUR TOAST NOTIFICATION -->\n<div class=\"toast-notification\" id=\"contactToast\">\n  <div class=\"toast-inner\">\n    <div class=\"toast-text\">\ud83d\udea8 Pesan berhasil masuk ke markas. Tim kami lagi rapat penting: es teh dulu atau langsung kerja? Habis voting, langsung hubungin lu. \ud83e\uddcb\ud83d\ude02<\/div>\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>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (FADE UP ON SCROLL) ===\n  const glassObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        glassObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n\n  document.querySelectorAll('.glass-services-section .fade-up').forEach(el => glassObserver.observe(el));\n\n  \/\/ === LOGIKA TOAST NOTIFICATION ===\n  const toast = document.getElementById('contactToast');\n  const openToastBtn = document.getElementById('openToastBtn');\n  const closeToastBtn = document.getElementById('closeToastBtn');\n  let toastTimer;\n\n  if (openToastBtn) {\n    openToastBtn.addEventListener('click', function(e) {\n      e.preventDefault();\n      toast.classList.add('show');\n      \n      clearTimeout(toastTimer);\n      toastTimer = setTimeout(() => {\n        toast.classList.remove('show');\n      }, 7000); \/\/ Otomatis ilang dalam 7 detik\n    });\n  }\n\n  if (closeToastBtn) {\n    closeToastBtn.addEventListener('click', function() {\n      toast.classList.remove('show');\n      clearTimeout(toastTimer);\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-bdb97e1 e-con-full e-flex e-con e-parent\" data-id=\"bdb97e1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f60b5c1 elementor-widget elementor-widget-html\" data-id=\"f60b5c1\" 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;900&family=Fira+Code&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.terminal-section * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.terminal-section {\n  background: var(--clay-bg);\n  padding: 40px 40px 80px; \/* JARAK ATAS DIKECILIN *\/\n  display: flex;\n  justify-content: center;\n  align-items: flex-start; \/* BIAR NEMPEL KE ATAS, BUKAN TENGAH *\/\n  min-height: 100vh;\n  overflow: hidden;\n}\n\n.terminal-container {\n  max-width: 800px;\n  width: 100%;\n  text-align: center;\n}\n\n\/* === HEADER & BADGE === *\/\n.terminal-header {\n  margin-bottom: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.term-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.term-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.terminal-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.terminal-header h2 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\/* === BINGKAI CLAY TERMINAL === *\/\n.clay-terminal-frame {\n  position: relative;\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 20px;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  text-align: left;\n}\n\n.clay-terminal-frame::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 20%; right: 20%; height: 2px;\n  background: linear-gradient(90deg, transparent, var(--clay-accent), transparent);\n  opacity: 0.7;\n}\n\n.term-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 10px 15px;\n  border-bottom: 1px solid rgba(58, 58, 58, 0.1);\n  margin-bottom: 15px;\n}\n.term-dot {\n  width: 12px; height: 12px;\n  border-radius: 50%;\n  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(255,255,255,0.3);\n}\n.term-dot.red { background: #FF5F56; }\n.term-dot.yellow { background: #FFBD2E; }\n.term-dot.green { background: #27C93F; }\n.term-title {\n  margin-left: auto;\n  font-size: 0.75rem;\n  color: var(--clay-text);\n  opacity: 0.6;\n  font-weight: 500;\n}\n\n.term-screen {\n  background: #1E1E2E;\n  border-radius: 14px;\n  padding: 25px;\n  min-height: 300px;\n  font-family: 'Fira Code', 'Courier New', monospace;\n  font-size: 0.85rem;\n  line-height: 1.6;\n  color: #A6E3A1;\n  box-shadow: inset 5px 5px 15px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.05);\n  overflow: hidden;\n}\n\n.term-line { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; }\n.term-prompt { color: #F472B6; margin-right: 8px; font-weight: 700; }\n.term-cmd { color: #89DCEB; }\n.term-out { color: #6C7086; width: 100%; padding-left: 20px; }\n.term-success { color: #A6E3A1; width: 100%; padding-left: 20px; }\n.term-error { color: #F38BA8; }\n\n.term-cursor {\n  display: inline-block;\n  width: 8px;\n  height: 16px;\n  background: #A6E3A1;\n  animation: blink 1s steps(2) infinite;\n  vertical-align: middle;\n  margin-left: 2px;\n}\n@keyframes blink {\n  0%, 50% { opacity: 1; }\n  51%, 100% { opacity: 0; }\n}\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0; 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 (PERBAIKAN JURANG) === *\/\n@media (max-width: 768px) {\n  .terminal-section { \n    padding: 20px 20px 60px !important; \/* Naikin ke atas di HP *\/\n    min-height: auto !important; \/* HAPUS 100vh *\/\n    display: block !important; \/* MATIIN FLEX CENTER BIAR GAK JURANG *\/\n  }\n  .terminal-container {\n    height: auto !important;\n  }\n  .term-screen { \n    padding: 15px; \n    font-size: 0.75rem; \n    min-height: 200px;\n    max-height: 300px; \/* BIAR KALO NGETIK PANJANG, SCROLL DI DALAM TERMINAL *\/\n    overflow-y: auto;\n  }\n  .term-title { display: none; }\n}\n<\/style>\n\n<section class=\"terminal-section\" id=\"terminalSection\">\n  <div class=\"terminal-container\">\n    \n    <div class=\"terminal-header fade-up\">\n      <div class=\"term-badge\"><span><\/span> System Status<\/div>\n      <h2>Deploying <em>Excellence<\/em><\/h2>\n    <\/div>\n\n    <div class=\"clay-terminal-frame fade-up\">\n      <div class=\"term-bar\">\n        <div class=\"term-dot red\"><\/div>\n        <div class=\"term-dot yellow\"><\/div>\n        <div class=\"term-dot green\"><\/div>\n        <div class=\"term-title\">rwb@cloud: ~<\/div>\n      <\/div>\n      \n      <div class=\"term-screen\" id=\"termScreen\">\n        <!-- Konten akan diisi oleh JavaScript -->\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER ===\n  const termObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        \n        if (entry.target.classList.contains('clay-terminal-frame')) {\n          startTerminal();\n        }\n        \n        termObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.3 });\n\n  document.querySelectorAll('.terminal-section .fade-up').forEach(el => termObserver.observe(el));\n\n  \/\/ === LOGIKA TERMINAL TYPEWRITER ===\n  const termScreen = document.getElementById('termScreen');\n  \n  const commands = [\n    { type: 'cmd', prompt: 'rwb@cloud', text: 'init --services --deploy' },\n    { type: 'out', text: '> Initializing RWB Cloud Engine...' },\n    { type: 'out', text: '> Fetching modules...' },\n    { type: 'success', text: '[\u2713] UI\/UX Design.........Ready' },\n    { type: 'success', text: '[\u2713] Web Development......Ready' },\n    { type: 'success', text: '[\u2713] SEO Mastery..........Ready' },\n    { type: 'success', text: '[\u2713] Speed Optimization...Ready' },\n    { type: 'out', text: '\\nAll systems operational. Ready to launch.' }\n  ];\n\n  let isTyping = false;\n\n  async function startTerminal() {\n    if (isTyping) return;\n    isTyping = true;\n\n    for (let i = 0; i < commands.length; i++) {\n      const cmd = commands[i];\n      \n      if (cmd.type === 'cmd') {\n        const lineDiv = document.createElement('div');\n        lineDiv.className = 'term-line';\n        lineDiv.innerHTML = `<span class=\"term-prompt\">${cmd.prompt}:~$<\/span><span class=\"term-cmd\" id=\"cmd-${i}\"><\/span>`;\n        termScreen.appendChild(lineDiv);\n        await typeText(`#cmd-${i}`, cmd.text, 50);\n      } else {\n        const lineDiv = document.createElement('div');\n        lineDiv.className = 'term-line';\n        const span = document.createElement('span');\n        span.className = cmd.type === 'success' ? 'term-success' : 'term-out';\n        span.id = `out-${i}`;\n        lineDiv.appendChild(span);\n        termScreen.appendChild(lineDiv);\n        await typeText(`#out-${i}`, cmd.text, 20);\n      }\n      \n      await delay(300);\n    }\n\n    const cursorLine = document.createElement('div');\n    cursorLine.className = 'term-line';\n    cursorLine.innerHTML = `<span class=\"term-prompt\">rwb@cloud:~$<\/span><span class=\"term-cursor\"><\/span>`;\n    termScreen.appendChild(cursorLine);\n\n    termScreen.scrollTop = termScreen.scrollHeight;\n  }\n\n  function typeText(selector, text, speed) {\n    return new Promise(resolve => {\n      const el = document.querySelector(selector);\n      let i = 0;\n      const interval = setInterval(() => {\n        el.innerHTML = text.substring(0, i + 1);\n        i++;\n        termScreen.scrollTop = termScreen.scrollHeight;\n        if (i >= text.length) {\n          clearInterval(interval);\n          resolve();\n        }\n      }, speed);\n    });\n  }\n\n  function delay(ms) {\n    return new Promise(resolve => setTimeout(resolve, ms));\n  }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-03faef5 e-con-full e-flex e-con e-parent\" data-id=\"03faef5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c58a55 elementor-widget elementor-widget-html\" data-id=\"4c58a55\" 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;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === 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.saas-ecosystem-section * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.saas-ecosystem-section {\n  background: var(--clay-bg);\n  padding: 80px 40px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  min-height: 100vh;\n  overflow: hidden;\n}\n\n.ecosystem-container {\n  max-width: 900px;\n  width: 100%;\n  text-align: center;\n}\n\n\/* === HEADER === *\/\n.eco-header {\n  margin-bottom: 60px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.eco-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.eco-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.eco-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.eco-header h2 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\/* === BINGKAI EKOSISTEM === *\/\n.ecosystem-wrap {\n  position: relative;\n  width: 100%;\n  height: 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Garis SVG *\/\n.eco-lines {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  pointer-events: none;\n}\n.eco-line {\n  stroke: rgba(58, 58, 58, 0.1);\n  stroke-width: 2;\n  stroke-dasharray: 6 6;\n  transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;\n}\n.eco-line.is-active {\n  stroke: var(--clay-accent);\n  stroke-width: 3;\n  filter: drop-shadow(0 0 4px var(--clay-accent));\n}\n\n\/* Core Platform Tengah *\/\n.core-platform {\n  position: relative;\n  width: 140px;\n  height: 140px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light), inset 4px 4px 8px rgba(255,255,255,0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n  text-align: center;\n}\n.core-platform span {\n  font-size: 0.9rem;\n  font-weight: 800;\n  color: var(--clay-accent);\n  line-height: 1.2;\n}\n\n@keyframes floatCore {\n  0%, 100% { translate: 0 0; }\n  50% { translate: 0 -10px; }\n}\n.core-platform { animation: floatCore 4s ease-in-out infinite; }\n\n\/* Node Integrasi *\/\n.api-node {\n  position: absolute;\n  width: 70px;\n  height: 70px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 10;\n  scale: 1; \n  transition: scale 0.3s ease, box-shadow 0.3s ease; \n}\n.api-node:hover, .api-node.is-active {\n  scale: 1.15; \n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light), 0 0 20px rgba(244, 114, 182, 0.4);\n}\n.api-node svg {\n  width: 30px;\n  height: 30px;\n  stroke: var(--clay-text);\n  fill: none;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transition: stroke 0.3s ease;\n}\n.api-node:hover svg, .api-node.is-active svg {\n  stroke: var(--clay-accent);\n}\n\n\/* Posisi Node (Desktop) *\/\n.node-1 { top: 10%; left: 20%; animation: floatNode1 5s ease-in-out infinite; }\n.node-2 { top: 10%; right: 20%; animation: floatNode2 6s ease-in-out infinite; }\n.node-3 { bottom: 10%; left: 20%; animation: floatNode2 5.5s ease-in-out infinite; }\n.node-4 { bottom: 10%; right: 20%; animation: floatNode1 6.5s ease-in-out infinite; }\n\n@keyframes floatNode1 {\n  0%, 100% { translate: 0 0; }\n  50% { translate: 0 -15px; }\n}\n@keyframes floatNode2 {\n  0%, 100% { translate: 0 0; }\n  50% { translate: 0 15px; }\n}\n\n\/* Pop-up Info Kaca Clay (Default Desktop) *\/\n.node-info {\n  position: absolute;\n  bottom: 115%; \n  left: 50%;\n  transform: translateX(-50%) translateY(10px);\n  width: 200px;\n  background: rgba(255, 255, 255, 0.5);\n  border: 1px solid rgba(255, 255, 255, 0.7);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  padding: 15px;\n  border-radius: 16px;\n  box-shadow: 4px 4px 10px rgba(0,0,0,0.05), inset 2px 2px 4px rgba(255,255,255,0.5);\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.3s ease;\n  z-index: 20;\n  pointer-events: none;\n  text-align: left;\n}\n.api-node:hover .node-info, .api-node.is-active .node-info {\n  opacity: 1;\n  visibility: visible;\n  transform: translateX(-50%) translateY(0);\n}\n\n.node-info h4 {\n  font-size: 0.9rem;\n  font-weight: 700;\n  color: var(--clay-text);\n  margin-bottom: 4px;\n}\n.node-info p {\n  font-size: 0.75rem;\n  color: #6B7280;\n  font-weight: 400;\n  line-height: 1.4;\n}\n\n\/* Node 2 & 4 pop-up posisinya di bawah node di Desktop *\/\n.node-2 .node-info, .node-4 .node-info {\n  bottom: auto;\n  top: 115%;\n  transform: translateX(-50%) translateY(-10px);\n}\n.node-2:hover .node-info, .node-2.is-active .node-info,\n.node-4:hover .node-info, .node-4.is-active .node-info {\n  transform: translateX(-50%) translateY(0);\n}\n\n\/* === ANIMASI & RESPONSIVE === *\/\n.fade-up {\n  opacity: 0; translate: 0 30px;\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), translate 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; translate: 0 0; }\n\n\/* === PERBAIKAN POP-UP MOBILE BIAR GAK KEPOTONG === *\/\n@media (max-width: 768px) {\n  .saas-ecosystem-section { padding: 60px 20px !important; min-height: auto !important; display: block !important; }\n  .ecosystem-wrap { height: 400px; }\n  .core-platform { width: 100px; height: 100px; }\n  .core-platform span { font-size: 0.75rem; }\n  .api-node { width: 55px; height: 55px; }\n  .api-node svg { width: 24px; height: 24px; }\n  \n  .node-1 { left: 5%; }\n  .node-2 { right: 5%; }\n  .node-3 { left: 5%; }\n  .node-4 { right: 5%; }\n\n  .node-info { width: 160px; padding: 12px; }\n\n  \/* Node Kiri (1 & 3): Pop-up muncul ke arah KANAN (ke dalam layar) *\/\n  .node-1 .node-info, .node-3 .node-info {\n    left: 100%;\n    bottom: 50%;\n    transform: translateY(50%) translateX(10px);\n  }\n  .node-1:hover .node-info, .node-1.is-active .node-info,\n  .node-3:hover .node-info, .node-3.is-active .node-info {\n    transform: translateY(50%) translateX(15px);\n  }\n\n  \/* Node Kanan (2 & 4): Pop-up muncul ke arah KIRI (ke dalam layar) *\/\n  .node-2 .node-info, .node-4 .node-info {\n    left: auto;\n    right: 100%;\n    bottom: 50%;\n    top: auto;\n    transform: translateY(50%) translateX(-10px);\n  }\n  .node-2:hover .node-info, .node-2.is-active .node-info,\n  .node-4:hover .node-info, .node-4.is-active .node-info {\n    transform: translateY(50%) translateX(-15px);\n  }\n}\n<\/style>\n\n<section class=\"saas-ecosystem-section\" id=\"saasEcosystem\">\n  <div class=\"ecosystem-container\">\n    \n    <div class=\"eco-header fade-up\">\n      <div class=\"eco-badge\"><span><\/span> Seamless Integration<\/div>\n      <h2>Connected <em>Ecosystem<\/em><\/h2>\n    <\/div>\n\n    <div class=\"ecosystem-wrap fade-up\">\n      \n      <!-- SVG Garis Nyambung -->\n      <svg class=\"eco-lines\">\n        <line class=\"eco-line\" id=\"line-1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" \/>\n        <line class=\"eco-line\" id=\"line-2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" \/>\n        <line class=\"eco-line\" id=\"line-3\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" \/>\n        <line class=\"eco-line\" id=\"line-4\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" \/>\n      <\/svg>\n\n      <!-- Core Platform -->\n      <div class=\"core-platform\">\n        <span>RWB<br>CLOUD API<\/span>\n      <\/div>\n\n      <!-- Node 1: Payment -->\n      <div class=\"api-node node-1\" data-line=\"1\">\n        <svg viewBox=\"0 0 24 24\"><rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"><\/line><\/svg>\n        <div class=\"node-info\">\n          <h4>Stripe API<\/h4>\n          <p>Securely process payments, subscriptions, and global payouts in real-time.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Node 2: Email -->\n      <div class=\"api-node node-2\" data-line=\"2\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\n        <div class=\"node-info\">\n          <h4>Mailgun SMTP<\/h4>\n          <p>Deliver transactional emails and automated campaigns with 99.9% inbox rate.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Node 3: Cloud Storage -->\n      <div class=\"api-node node-3\" data-line=\"3\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"><\/path><\/svg>\n        <div class=\"node-info\">\n          <h4>AWS S3<\/h4>\n          <p>Store and serve unlimited media files with enterprise-grade cloud scalability.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Node 4: Analytics -->\n      <div class=\"api-node node-4\" data-line=\"4\">\n        <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"><\/line><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"><\/line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"><\/line><\/svg>\n        <div class=\"node-info\">\n          <h4>Google Analytics<\/h4>\n          <p>Track user behavior, conversion funnels, and live traffic data effortlessly.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER ===\n  const ecoObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        ecoObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.saas-ecosystem-section .fade-up').forEach(el => ecoObserver.observe(el));\n\n  \/\/ === LOGIKA HOVER\/TAP API NODES ===\n  const nodes = document.querySelectorAll('.api-node');\n  const lines = document.querySelectorAll('.eco-line');\n  const ecoWrap = document.querySelector('.ecosystem-wrap');\n  const coreEl = document.querySelector('.core-platform');\n\n  nodes.forEach(node => {\n    \/\/ Desktop (Hover)\n    node.addEventListener('mouseenter', function() {\n      const lineId = this.getAttribute('data-line');\n      const line = document.getElementById('line-' + lineId);\n      if(line) line.classList.add('is-active');\n      this.classList.add('is-active');\n    });\n\n    node.addEventListener('mouseleave', function() {\n      const lineId = this.getAttribute('data-line');\n      const line = document.getElementById('line-' + lineId);\n      if(line) line.classList.remove('is-active');\n      this.classList.remove('is-active');\n    });\n\n    \/\/ Mobile (Tap)\n    node.addEventListener('click', function(e) {\n      e.stopPropagation(); \/\/ Cegah event bubble\n      \n      \/\/ Reset semua dulu\n      nodes.forEach(n => {\n        n.classList.remove('is-active');\n        const lid = n.getAttribute('data-line');\n        const l = document.getElementById('line-' + lid);\n        if(l) l.classList.remove('is-active');\n      });\n\n      \/\/ Aktifkan yang di-tap\n      const lineId = this.getAttribute('data-line');\n      const line = document.getElementById('line-' + lineId);\n      if(line) line.classList.add('is-active');\n      this.classList.add('is-active');\n    });\n  });\n\n  \/\/ Kalau user klik area kosong, reset semua (untuk mobile)\n  document.addEventListener('click', function() {\n    nodes.forEach(n => {\n      n.classList.remove('is-active');\n      const lid = n.getAttribute('data-line');\n      const l = document.getElementById('line-' + lid);\n      if(l) l.classList.remove('is-active');\n    });\n  });\n\n  \/\/ === LOGIKA GARIS SVG MENGIKUTI IKON (REAL-TIME) ===\n  function updateEcoLines() {\n    if (!ecoWrap || !coreEl || nodes.length === 0 || lines.length === 0) return;\n\n    const wrapRect = ecoWrap.getBoundingClientRect();\n    const coreRect = coreEl.getBoundingClientRect();\n\n    \/\/ Titik tengah Core Platform relatif terhadap wrapper\n    const coreX = coreRect.left + coreRect.width \/ 2 - wrapRect.left;\n    const coreY = coreRect.top + coreRect.height \/ 2 - wrapRect.top;\n\n    nodes.forEach((node, index) => {\n      const line = lines[index];\n      if (!line) return;\n\n      const nodeRect = node.getBoundingClientRect();\n      \/\/ Titik tengah Node relatif terhadap wrapper\n      const nodeX = nodeRect.left + nodeRect.width \/ 2 - wrapRect.left;\n      const nodeY = nodeRect.top + nodeRect.height \/ 2 - wrapRect.top;\n\n      \/\/ Set koordinat garis SVG supaya selalu nempel tepat di tengah\n      line.setAttribute('x1', coreX);\n      line.setAttribute('y1', coreY);\n      line.setAttribute('x2', nodeX);\n      line.setAttribute('y2', nodeY);\n    });\n\n    \/\/ Looping terus biar selalu update posisinya walau elemen melayang (float)\n    requestAnimationFrame(updateEcoLines);\n  }\n\n  \/\/ Jalankan fungsi update garis\n  requestAnimationFrame(updateEcoLines);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b15fc23 e-con-full e-flex e-con e-parent\" data-id=\"b15fc23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c98c724 elementor-widget elementor-widget-html\" data-id=\"c98c724\" 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;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === 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.saas-slider-section * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.saas-slider-section {\n  background: var(--clay-bg);\n  padding: 80px 40px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start; \n  min-height: 100vh;\n  overflow: hidden;\n}\n\n.saas-container {\n  max-width: 900px;\n  width: 100%;\n  text-align: center;\n}\n\n\/* === HEADER === *\/\n.saas-header {\n  margin-bottom: 50px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.saas-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.saas-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.saas-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.saas-header h2 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\/* === BINGKAI SLIDER === *\/\n.slider-wrapper {\n  background: var(--clay-bg);\n  border-radius: 32px;\n  padding: 40px;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  margin-bottom: 40px;\n}\n\n.scale-display {\n  margin-bottom: 30px;\n}\n.scale-label {\n  font-size: 0.85rem;\n  color: #6B7280;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  margin-bottom: 10px;\n  display: block;\n}\n.scale-number {\n  font-size: 3.5rem;\n  font-weight: 800;\n  background: linear-gradient(45deg, #F472B6, #A855F7);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  line-height: 1;\n}\n\n\/* Custom Slider Clay *\/\n.clay-slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 20px;\n  border-radius: 10px;\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  outline: none;\n  cursor: pointer;\n}\n.clay-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--clay-accent);\n  border: 4px solid var(--clay-bg);\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n.clay-slider::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n.clay-slider::-moz-range-thumb {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--clay-accent);\n  border: 4px solid var(--clay-bg);\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  cursor: pointer;\n}\n\n\/* === KARTU METRICS === *\/\n.metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n\n.metric-card {\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 25px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.metric-title {\n  font-size: 0.8rem;\n  color: #6B7280;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value {\n  font-size: 1.8rem;\n  font-weight: 700;\n  color: var(--clay-text);\n}\n\n\/* Bar Loader di kartu Server Load *\/\n.load-bar-bg {\n  width: 100%;\n  height: 10px;\n  border-radius: 5px;\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  overflow: hidden;\n}\n.load-bar-fill {\n  height: 100%;\n  width: 20%;\n  background: linear-gradient(90deg, #34D399, #F472B6);\n  border-radius: 5px;\n  transition: width 0.3s ease;\n}\n\n.metric-status {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #34D399;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.metric-status::before {\n  content: '';\n  width: 8px; height: 8px;\n  border-radius: 50%;\n  background: #34D399;\n  box-shadow: 0 0 8px #34D399;\n}\n\n\/* === ANIMASI & RESPONSIVE === *\/\n.fade-up {\n  opacity: 0; 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\/* === PERBAIKAN TAMPAK HP BIAR ELEGANT & RAMPING === *\/\n@media (max-width: 768px) {\n  .saas-slider-section { padding: 50px 15px !important; min-height: auto !important; display: block !important; }\n  .saas-header { margin-bottom: 30px; }\n  \n  .slider-wrapper { \n    padding: 25px 20px; \/* Rampung paddingnya *\/\n    border-radius: 24px; \n    margin-bottom: 25px;\n  }\n  .scale-display { margin-bottom: 20px; }\n  .scale-label { font-size: 0.7rem; margin-bottom: 5px; }\n  .scale-number { font-size: 2rem; } \/* Dari 3.5rem jadi 2rem biar gak kegedean *\/\n  \n  \/* Slider Thumb lebih kecil biar proposional di layar kecil *\/\n  .clay-slider { height: 14px; border-radius: 7px; }\n  .clay-slider::-webkit-slider-thumb { width: 28px; height: 28px; border-width: 3px; }\n  .clay-slider::-moz-range-thumb { width: 28px; height: 28px; border-width: 3px; }\n  \n  \/* Ubah Layout Metric dari 1 kolom jadi 2 kolom (grid) *\/\n  .metrics-grid { \n    grid-template-columns: 1fr 1fr; \n    gap: 12px; \n  }\n  \n  \/* Kartu ke-3 (Server Load) menyambar lebar 2 kolom biar load-bar nya panjang *\/\n  .metric-card:nth-child(3) {\n    grid-column: span 2;\n  }\n  \n  .metric-card { \n    padding: 15px; \n    border-radius: 18px; \n    gap: 8px;\n  }\n  .metric-title { font-size: 0.65rem; }\n  .metric-value { font-size: 1.1rem; } \/* Dari 1.8rem jadi 1.1rem *\/\n  .metric-status { font-size: 0.65rem; }\n  .load-bar-bg { height: 8px; }\n}\n<\/style>\n\n<section class=\"saas-slider-section\" id=\"saasSliderSection\">\n  <div class=\"saas-container\">\n    \n    <div class=\"saas-header fade-up\">\n      <div class=\"saas-badge\"><span><\/span> Scalable Infrastructure<\/div>\n      <h2>Estimate Your <em>Scale<\/em><\/h2>\n    <\/div>\n\n    <!-- BINGKAI SLIDER -->\n    <div class=\"slider-wrapper fade-up\">\n      <div class=\"scale-display\">\n        <span class=\"scale-label\">Active Monthly Users<\/span>\n        <div class=\"scale-number\" id=\"userCount\">10,000<\/div>\n      <\/div>\n      <input type=\"range\" min=\"1000\" max=\"100000\" step=\"1000\" value=\"10000\" class=\"clay-slider\" id=\"scaleSlider\">\n    <\/div>\n\n    <!-- KARTU METRICS -->\n    <div class=\"metrics-grid fade-up\">\n      \n      <!-- Kartu 1: API Limit -->\n      <div class=\"metric-card\">\n        <div class=\"metric-title\">API Limits<\/div>\n        <div class=\"metric-value\" id=\"apiValue\">1M req\/mo<\/div>\n        <div class=\"metric-status\">Healthy<\/div>\n      <\/div>\n\n      <!-- Kartu 2: Monthly Cost -->\n      <div class=\"metric-card\">\n        <div class=\"metric-title\">Estimated Cost<\/div>\n        <div class=\"metric-value\" id=\"costValue\">$49\/mo<\/div>\n        <div class=\"metric-status\">Bulk Discount<\/div>\n      <\/div>\n\n      <!-- Kartu 3: Server Load -->\n      <div class=\"metric-card\">\n        <div class=\"metric-title\">Server Load<\/div>\n        <div class=\"metric-value\" id=\"loadValue\">20%<\/div>\n        <div class=\"load-bar-bg\">\n          <div class=\"load-bar-fill\" id=\"loadBar\"><\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER ===\n  const saasObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        saasObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.saas-slider-section .fade-up').forEach(el => saasObserver.observe(el));\n\n  \/\/ === LOGIKA SLIDER SAAS ===\n  const slider = document.getElementById('scaleSlider');\n  const userCount = document.getElementById('userCount');\n  const apiValue = document.getElementById('apiValue');\n  const costValue = document.getElementById('costValue');\n  const loadValue = document.getElementById('loadValue');\n  const loadBar = document.getElementById('loadBar');\n\n  function formatNumber(num) {\n    return num.toString().replace(\/(\\d)(?=(\\d{3})+(?!\\d))\/g, '$1,');\n  }\n\n  function updateMetrics() {\n    const users = parseInt(slider.value);\n    \n    \/\/ Update User Count\n    userCount.innerText = formatNumber(users);\n\n    \/\/ Update API Limits (1,000 users = 100k API req)\n    const apiReq = users * 100;\n    if(apiReq >= 1000000) {\n      apiValue.innerText = (apiReq \/ 1000000).toFixed(1) + 'M req\/mo';\n    } else {\n      apiValue.innerText = (apiReq \/ 1000).toFixed(0) + 'K req\/mo';\n    }\n\n    \/\/ Update Cost (Base $49 + $0.05 per user)\n    let cost = 49 + (users * 0.05);\n    if(users > 50000) cost = cost * 0.8; \/\/ Discount 20% di atas 50k\n    costValue.innerText = '$' + cost.toFixed(0) + '\/mo';\n\n    \/\/ Update Server Load (Maks 85% biar tetep aman)\n    let load = Math.min(85, (users \/ 100000) * 100);\n    loadValue.innerText = Math.round(load) + '%';\n    loadBar.style.width = load + '%';\n\n    \/\/ Ubah warna server load kalau udah di atas 70%\n    if(load > 70) {\n      loadBar.style.background = 'linear-gradient(90deg, #F472B6, #F38BA8)';\n    } else {\n      loadBar.style.background = 'linear-gradient(90deg, #34D399, #F472B6)';\n    }\n  }\n\n  slider.addEventListener('input', updateMetrics);\n  updateMetrics(); \/\/ Init nilai pertama\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>Our Services Next-Gen Digital Solutions For Your Brand We don&#8217;t just build websites; we craft comprehensive digital ecosystems. From immersive UI\/UX to lightning-fast development, we provide the tools you need to dominate the digital landscape. View All Services RWBCLOUD UI\/UX Design Web Dev SEO Mastery Speed Optim &times; Our Core Services Everything you need to [&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-1036","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1036","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=1036"}],"version-history":[{"count":179,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1036\/revisions"}],"predecessor-version":[{"id":1658,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1036\/revisions\/1658"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/media?parent=1036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}