{"id":1088,"date":"2026-08-05T13:30:18","date_gmt":"2026-08-05T13:30:18","guid":{"rendered":"https:\/\/lab.rwb.my.id\/sma\/?page_id=1088"},"modified":"2026-08-08T09:43:48","modified_gmt":"2026-08-08T09:43:48","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/sma\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1088\" class=\"elementor elementor-1088\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55dab17 e-con-full e-flex e-con e-parent\" data-id=\"55dab17\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed3e2f5 elementor-widget elementor-widget-html\" data-id=\"ed3e2f5\" 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 (ON-DNA) === *\/\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.bento-portfolio-section * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.bento-portfolio-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.bento-container {\n  position: relative;\n  z-index: 2;\n  max-width: 1100px;\n  width: 100%;\n  margin: auto;\n}\n\n\/* === BENTO GRID LAYOUT === *\/\n.bento-grid {\n  display: grid;\n  grid-template-columns: 1.2fr 1fr 1.2fr;\n  grid-template-rows: 240px 240px;\n  gap: 20px;\n}\n\n\/* Kotak Teks Utama *\/\n.bento-text-box {\n  grid-column: 1 \/ 2;\n  grid-row: 1 \/ 3;\n  background: var(--clay-bg);\n  border-radius: 28px;\n  padding: 40px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light);\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n\/* Badge DNA *\/\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  align-self: flex-start;\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.bento-text-box 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.bento-text-box 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.bento-text-box 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\/* === ROBOT TIDUR & BUBBLE MARAH === *\/\n.robot-wrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: flex-start; \/* Rata kiri di desktop *\/\n}\n\n.robot-bubble {\n  position: absolute;\n  bottom: 115%; \/* Muncul di atas kotak *\/\n  width: 200px;\n  background: var(--clay-bg);\n  padding: 15px;\n  border-radius: 16px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n  z-index: 20;\n  cursor: default;\n  text-align: center;\n}\n.robot-bubble.show {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n.robot-bubble::after {\n  content: '';\n  position: absolute;\n  bottom: -8px;\n  left: 50%;\n  margin-left: -8px;\n  border-width: 8px 8px 0;\n  border-style: solid;\n  border-color: var(--clay-bg) transparent;\n}\n.robot-bubble p {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--clay-text);\n  line-height: 1.4;\n}\n\n.robot-box {\n  position: relative;\n  width: 130px;\n  height: 130px;\n  background: var(--clay-bg);\n  border-radius: 24px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  overflow: hidden;\n  cursor: pointer;\n  z-index: 10;\n  transition: transform 0.2s ease;\n}\n.robot-box:hover { transform: translateY(-3px); }\n.robot-box:active { transform: scale(0.98); }\n\n.robot-img-box {\n  width: 100%; height: 100%;\n  border-radius: 18px;\n  overflow: hidden;\n  position: relative;\n  background: rgba(255,255,255,0.1);\n}\n.robot-img-box img {\n  width: 100%; height: 100%;\n  object-fit: cover;\n  display: block;\n  pointer-events: none; \/* Biar klik ke box, bukan ke img *\/\n}\n\n.robot-zzz {\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  font-family: 'Poppins', sans-serif;\n  font-size: 1rem;\n  font-weight: 800;\n  color: var(--clay-accent);\n  z-index: 5;\n  animation: zzz 2s infinite;\n  text-shadow: 1px 1px 2px rgba(255,255,255,0.5);\n}\n\n@keyframes zzz { \n  0% { opacity: 0; transform: translateY(0) scale(0.8); } \n  50% { opacity: 1; transform: translateY(-10px) scale(1); } \n  100% { opacity: 0; transform: translateY(-20px) scale(1.1); } \n}\n\n\/* Wrapper Image Grid (Desktop) *\/\n.bento-images-wrap {\n  grid-column: 2 \/ 4;\n  grid-row: 1 \/ 3;\n  display: grid;\n  grid-template-columns: 1fr 1.2fr;\n  grid-template-rows: 240px 240px;\n  gap: 20px;\n}\n\n\/* Kotak Project *\/\n.bento-image-box {\n  position: relative;\n  border-radius: 28px;\n  overflow: hidden;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  z-index: 1;\n  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;\n}\n.bento-image-box img {\n  width: 100%; height: 100%; object-fit: cover;\n  filter: brightness(0.7) saturate(0.6); \/* Efek gelap kusam (ringan, no blur) *\/\n  transform: scale(1.05);\n  transition: filter 0.5s ease, transform 0.5s ease;\n}\n\n\/* Overlay Kaca (Tanpa backdrop-filter biar ringan) *\/\n.bento-overlay {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(230, 231, 238, 0.75); \/* Kaca buram palsu pakai solid opacity *\/\n  transition: opacity 0.5s ease;\n  z-index: 2;\n}\n\n\/* Label Project *\/\n.bento-label {\n  position: absolute;\n  bottom: 15px; left: 15px; right: 15px;\n  padding: 10px 15px;\n  background: rgba(255, 255, 255, 0.85); \/* Lebih solid biar teks jelas tanpa blur *\/\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 14px;\n  z-index: 5;\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.165, 0.84, 0.44, 1);\n}\n.bento-cat { font-size: 0.65rem; font-weight: 600; color: var(--clay-accent); text-transform: uppercase; letter-spacing: 1px; }\n.bento-title { font-size: 0.9rem; font-weight: 700; color: var(--clay-text); margin-top: 2px; }\n\n\/* === EFEK HOVER REVEAL === *\/\n.bento-image-box:hover {\n  transform: scale(1.03);\n  z-index: 10;\n  box-shadow: 15px 15px 30px rgba(197, 198, 208, 0.7), -15px -15px 30px rgba(255, 255, 255, 0.9);\n}\n.bento-image-box:hover img {\n  filter: brightness(1) saturate(1); \/* Gambar clear *\/\n  transform: scale(1);\n}\n.bento-image-box:hover .bento-overlay {\n  opacity: 0;\n}\n.bento-image-box:hover .bento-label {\n  transform: translateY(-5px);\n}\n\n\/* Posisi Grid Kotak Kanan *\/\n.bento-image-box:nth-child(1) { grid-column: 1 \/ 2; grid-row: 1 \/ 2; }\n.bento-image-box:nth-child(2) { grid-column: 2 \/ 3; grid-row: 1 \/ 3; }\n.bento-image-box:nth-child(3) { grid-column: 1 \/ 2; grid-row: 2 \/ 3; }\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@media (max-width: 768px) {\n  .bento-portfolio-section { padding: 60px 20px 100px !important; }\n  \n  \/* Bungkus grid jadi 1 kolom *\/\n  .bento-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 25px;\n  }\n  \n  \/* Kotak teks rapi di atas *\/\n  .bento-text-box {\n    padding: 30px;\n    text-align: center;\n    align-items: center;\n  }\n  .glass-badge { align-self: center; }\n  .bento-text-box p { margin-left: auto; margin-right: auto; }\n  .robot-wrap { align-self: center; margin-top: 1rem; } \/* Robot ke tengah di HP *\/\n  \n  \/* Wrapper gambar jadi horizontal swipe *\/\n  .bento-images-wrap {\n    display: flex;\n    grid-template-columns: none;\n    grid-template-rows: none;\n    gap: 15px;\n    overflow-x: auto;\n    overflow-y: hidden; \n    scroll-snap-type: x mandatory;\n    padding: 0 20px 20px 20px; \n    margin: 0 -20px; \n    -webkit-overflow-scrolling: touch;\n    touch-action: pan-x pan-y; \n    overscroll-behavior-x: contain; \n  }\n  \n  \/* Sembunyikan scrollbar biar bersih *\/\n  .bento-images-wrap::-webkit-scrollbar { display: none; }\n  .bento-images-wrap { scrollbar-width: none; }\n  \n  \/* Kartu ukuran 80% biar peek kelihatan *\/\n  .bento-image-box {\n    flex: 0 0 80%;\n    height: 250px;\n    scroll-snap-align: center;\n    grid-column: auto !important;\n    grid-row: auto !important;\n  }\n}\n<\/style>\n\n<section class=\"bento-portfolio-section\" id=\"bentoPortfolio\">\n  <div class=\"bento-container\">\n    \n    <div class=\"bento-grid\">\n      \n      <!-- KOTAK UTAMA (TEKS + ROBOT) -->\n      <div class=\"bento-text-box fade-up\">\n        <div class=\"glass-badge\"><span><\/span> Portfolio 2026<\/div>\n        <h1>Transforming Ideas Into <em>Digital Reality<\/em><\/h1>\n        <p>A curated showcase of our finest work. We blend cutting-edge UI\/UX design with robust engineering to deliver exceptional results for global brands.<\/p>\n        \n        <!-- ROBOT TIDUR BUBBLE -->\n        <div class=\"robot-wrap\">\n          <div class=\"robot-bubble\" id=\"robotBubble\">\n            <p>Woi manusia, jangan ganggu gue! Urus aja hidup lu yang membosankan \ud83d\ude34<\/p>\n          <\/div>\n          <div class=\"robot-box\" id=\"robotBox\">\n            <div class=\"robot-zzz\">Zzz<\/div>\n            <div class=\"robot-img-box\">\n              <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/Sleep-Robot.jpeg\" alt=\"Sleeping Robot\">\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- WRAPPER SWIPE KARTU -->\n      <div class=\"bento-images-wrap\">\n        \n        <!-- KOTAK PROJECT 1 -->\n        <div class=\"bento-image-box fade-up\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/Laboratorium-IPA.jpeg\" alt=\"Project 1\">\n          <div class=\"bento-overlay\"><\/div>\n          <div class=\"bento-label\">\n            <div class=\"bento-cat\">Web Design<\/div>\n            <div class=\"bento-title\">E-Commerce Platform<\/div>\n          <\/div>\n        <\/div>\n\n        <!-- KOTAK PROJECT 2 -->\n        <div class=\"bento-image-box fade-up\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/SMlibrar.jpeg\" alt=\"Project 2\">\n          <div class=\"bento-overlay\"><\/div>\n          <div class=\"bento-label\">\n            <div class=\"bento-cat\">SaaS Dashboard<\/div>\n            <div class=\"bento-title\">Cloud Analytics<\/div>\n          <\/div>\n        <\/div>\n\n        <!-- KOTAK PROJECT 3 -->\n        <div class=\"bento-image-box fade-up\">\n          <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/Smart-library.jpeg\" alt=\"Project 3\">\n          <div class=\"bento-overlay\"><\/div>\n          <div class=\"bento-label\">\n            <div class=\"bento-cat\">Mobile App<\/div>\n            <div class=\"bento-title\">Finance Tracker<\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (FADE UP ON SCROLL) ===\n  const bentoObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        bentoObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n\n  document.querySelectorAll('.bento-portfolio-section .fade-up').forEach(el => bentoObserver.observe(el));\n\n  \/\/ === LOGIKA ROBOT BUBBLE MARAH ===\n  const robotBox = document.getElementById('robotBox');\n  const robotBubble = document.getElementById('robotBubble');\n  let bubbleTimer;\n\n  if (robotBox && robotBubble) {\n    function showBubble() {\n      robotBubble.classList.add('show');\n      clearTimeout(bubbleTimer);\n      bubbleTimer = setTimeout(() => {\n        robotBubble.classList.remove('show');\n      }, 4000);\n    }\n\n    robotBox.addEventListener('click', function(e) {\n      e.stopPropagation();\n      showBubble();\n    });\n\n    document.addEventListener('click', function(e) {\n      if (!robotBubble.contains(e.target) && !robotBox.contains(e.target)) {\n        robotBubble.classList.remove('show');\n        clearTimeout(bubbleTimer);\n      }\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-29566df e-con-full e-flex e-con e-parent\" data-id=\"29566df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b41faa7 elementor-widget elementor-widget-html\" data-id=\"b41faa7\" 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\/* === DOMINO CLAY SECTION VARIABLES === *\/\n:root {\n  --clay-bg: #FFFFFF; \n  --clay-card-bg: #E6E7EE;\n  --clay-text: #4A4A4A;\n  --clay-accent: #F472B6;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.domino-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.domino-section-wrap {\n  background: var(--clay-bg);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 80px 20px;\n  overflow: hidden;\n}\n\n.domino-header {\n  text-align: center;\n  margin-bottom: 60px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\/* Badge DNA *\/\n.domino-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.domino-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.domino-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.5rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 10px; letter-spacing: -0.5px;\n}\n.domino-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.domino-header p {\n  font-size: 0.9rem; color: #6B7280; font-weight: 300;\n}\n\n\/* === KONTAINER BARISAN DOMINO === *\/\n.domino-stage {\n  display: flex;\n  gap: 20px;\n  justify-content: center;\n  perspective: 1000px;\n  flex-wrap: wrap;\n}\n\n\/* === KARTU DOMINO CLAY === *\/\n.domino-card {\n  width: 160px;\n  height: 280px;\n  background: var(--clay-card-bg);\n  border-radius: 24px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light);\n  opacity: 0;\n  transform: translateY(150px) rotate(15deg) scale(0.8);\n  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease, box-shadow 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n}\n\n.domino-card.is-flying-in {\n  opacity: 1;\n  transform: translateY(0) rotate(0deg) scale(1);\n}\n\n.domino-card:hover {\n  transform: translateY(-15px) rotate(-2deg) scale(1.05) !important;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  z-index: 10;\n}\n\n.domino-top { flex: 1; padding: 12px; }\n.domino-photo-frame {\n  width: 100%; height: 100%;\n  border-radius: 16px;\n  overflow: hidden;\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  display: flex; align-items: center; justify-content: center;\n}\n.domino-photo-frame img {\n  width: 100%; height: 100%;\n  object-fit: cover;\n  border-radius: 16px;\n  transition: transform 0.3s ease;\n}\n.domino-card:hover .domino-photo-frame img {\n  transform: scale(1.1); \/* Zoom in dikit pas hover *\/\n}\n\n.domino-divider {\n  height: 2px; width: 70%; margin: 0 auto;\n  background: var(--clay-shadow-dark);\n  border-radius: 2px;\n  box-shadow: 1px 1px 2px var(--clay-shadow-light);\n}\n\n.domino-bottom {\n  flex: 1; padding: 15px;\n  display: flex; flex-direction: column;\n  justify-content: center; align-items: center; text-align: center;\n}\n.domino-caption-main { font-size: 0.9rem; font-weight: 700; color: var(--clay-text); margin-bottom: 4px; }\n.domino-caption-sub { font-size: 0.65rem; font-weight: 500; color: var(--clay-accent); text-transform: uppercase; letter-spacing: 1px; }\n\n\/* === LIGHTBOX FULLSCREEN === *\/\n.domino-lightbox {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(58, 58, 58, 0.85);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 99999;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  padding: 40px;\n}\n.domino-lightbox.show { opacity: 1; visibility: visible; }\n\n.lightbox-img {\n  max-width: 90%;\n  max-height: 85%;\n  border-radius: 20px;\n  box-shadow: 10px 10px 40px rgba(0,0,0,0.5);\n  transform: scale(0.9);\n  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.domino-lightbox.show .lightbox-img { transform: scale(1); }\n\n.lightbox-close {\n  position: absolute;\n  top: 20px; right: 30px;\n  color: #fff; font-size: 2.5rem; font-weight: 300;\n  cursor: pointer; transition: transform 0.2s;\n  z-index: 100;\n  line-height: 1;\n}\n.lightbox-close:hover { transform: rotate(90deg); }\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .domino-section-wrap {\n    \/* FIX JURANG HP: Mulai dari atas, bukan tengah *\/\n    min-height: auto !important;\n    justify-content: flex-start !important;\n    padding: 10px 20px 80px !important;\n  }\n  .domino-header { margin-bottom: 40px; }\n  \n  .domino-stage { gap: 15px; width: 100%; }\n  .domino-card { width: 130px; height: 230px; }\n  .domino-caption-main { font-size: 0.8rem; }\n  \n  .lightbox-close { top: 15px; right: 20px; font-size: 2rem; }\n}\n\n\/* === PEMBUNUH WARNA MERAH\/ELEMENTOR FOCUS === *\/\n.domino-section-wrap button:focus, \n.domino-section-wrap button:focus-visible,\n.domino-section-wrap a:focus,\n.domino-section-wrap a:focus-visible {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background: transparent !important;\n  box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light) !important;\n  text-decoration: none !important;\n}\n<\/style>\n\n<section class=\"domino-section-wrap\" id=\"dominoSection\">\n  \n  <div class=\"domino-header\">\n    <div class=\"domino-badge\"><span><\/span> Selected Works<\/div>\n    <h2>Our <em>Featured Projects<\/em><\/h2>\n    <p>Tap or hover over the cards to see the magic.<\/p>\n  <\/div>\n\n  <div class=\"domino-stage\">\n    \n    <!-- Kartu 1 -->\n    <div class=\"domino-card\">\n      <div class=\"domino-top\">\n        <div class=\"domino-photo-frame\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517180102446-f3ece451e9d8?q=80&w=300&auto=format&fit=crop\" alt=\"E-Commerce Project\">\n        <\/div>\n      <\/div>\n      <div class=\"domino-divider\"><\/div>\n      <div class=\"domino-bottom\">\n        <div class=\"domino-caption-main\">E-Commerce<\/div>\n        <div class=\"domino-caption-sub\">Web Design<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Kartu 2 -->\n    <div class=\"domino-card\">\n      <div class=\"domino-top\">\n        <div class=\"domino-photo-frame\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551434678-e076c223a692?q=80&w=300&auto=format&fit=crop\" alt=\"SaaS Project\">\n        <\/div>\n      <\/div>\n      <div class=\"domino-divider\"><\/div>\n      <div class=\"domino-bottom\">\n        <div class=\"domino-caption-main\">SaaS Dashboard<\/div>\n        <div class=\"domino-caption-sub\">Web App<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Kartu 3 -->\n    <div class=\"domino-card\">\n      <div class=\"domino-top\">\n        <div class=\"domino-photo-frame\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611926653458-09294b3142bf?q=80&w=300&auto=format&fit=crop\" alt=\"Mobile App Project\">\n        <\/div>\n      <\/div>\n      <div class=\"domino-divider\"><\/div>\n      <div class=\"domino-bottom\">\n        <div class=\"domino-caption-main\">Finance App<\/div>\n        <div class=\"domino-caption-sub\">Mobile<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Kartu 4 -->\n    <div class=\"domino-card\">\n      <div class=\"domino-top\">\n        <div class=\"domino-photo-frame\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?q=80&w=300&auto=format&fit=crop\" alt=\"Corporate Web\">\n        <\/div>\n      <\/div>\n      <div class=\"domino-divider\"><\/div>\n      <div class=\"domino-bottom\">\n        <div class=\"domino-caption-main\">Corporate Site<\/div>\n        <div class=\"domino-caption-sub\">Branding<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Kartu 5 -->\n    <div class=\"domino-card\">\n      <div class=\"domino-top\">\n        <div class=\"domino-photo-frame\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556761175-5973dc0f32e7?q=80&w=300&auto=format&fit=crop\" alt=\"Portfolio Site\">\n        <\/div>\n      <\/div>\n      <div class=\"domino-divider\"><\/div>\n      <div class=\"domino-bottom\">\n        <div class=\"domino-caption-main\">Personal Site<\/div>\n        <div class=\"domino-caption-sub\">Portfolio<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- LIGHTBOX STRUCTURE -->\n<div class=\"domino-lightbox\" id=\"dominoLightbox\">\n  <span class=\"lightbox-close\" id=\"lightboxClose\">&times;<\/span>\n  <img decoding=\"async\" src=\"\" class=\"lightbox-img\" id=\"lightboxImg\" alt=\"Full Image\">\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const dominoCards = document.querySelectorAll('.domino-card');\n  const dominoSection = document.getElementById('dominoSection');\n\n  \/\/ Logic buat nge-trigger kartu terbang pas section masuk layar\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        dominoCards.forEach((card, index) => {\n          setTimeout(() => {\n            card.classList.add('is-flying-in');\n          }, 150 * index);\n        });\n        observer.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 }); \/\/ Trigger pas 20% section keliatan biar lebih cepet\n\n  observer.observe(dominoSection);\n\n  \/\/ === LOGIKA LIGHTBOX ===\n  const lightbox = document.getElementById('dominoLightbox');\n  const lightboxImg = document.getElementById('lightboxImg');\n  const lightboxClose = document.getElementById('lightboxClose');\n\n  dominoCards.forEach(card => {\n    card.addEventListener('click', function() {\n      const imgSrc = this.querySelector('img').src;\n      \/\/ Ubah resolusi gambar Unsplash jadi gede (1000px) biar tajam pas full screen\n      const fullImgSrc = imgSrc.replace('w=300', 'w=1000');\n      \n      lightboxImg.src = fullImgSrc;\n      lightbox.classList.add('show');\n    });\n  });\n\n  function closeLightbox() {\n    lightbox.classList.remove('show');\n  }\n\n  lightboxClose.addEventListener('click', closeLightbox);\n  \n  \/\/ Klik area gelap (di luar gambar) buat tutup\n  lightbox.addEventListener('click', function(e) {\n    if (e.target === lightbox) {\n      closeLightbox();\n    }\n  });\n\n  \/\/ Tutup pakai tombol ESC\n  document.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape') {\n      closeLightbox();\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-a5cd49d e-con-full e-flex e-con e-parent\" data-id=\"a5cd49d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be44697 elementor-widget elementor-widget-html\" data-id=\"be44697\" 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 (ON-DNA) === *\/\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.conveyor-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.conveyor-section-wrap {\n  background: var(--clay-bg);\n  padding: 80px 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n\n.conveyor-header {\n  text-align: center;\n  margin-bottom: 50px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.cv-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.cv-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.conveyor-header h2 {\n  font-size: clamp(1.8rem, 4vw, 2.5rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.conveyor-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\/* === MESIN KONVEYOR === *\/\n.cv-machine {\n  position: relative;\n  width: 100%;\n  max-width: 700px;\n  padding: 40px;\n  background: rgba(255, 255, 255, 0.25);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 32px;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light);\n  overflow: hidden;\n  margin-bottom: 20px;\n}\n\n\/* Stempel Atas *\/\n.cv-stamp {\n  position: absolute;\n  top: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80px;\n  height: 60px;\n  background: var(--clay-accent);\n  border-radius: 12px;\n  z-index: 10;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light), inset 1px 1px 2px var(--clay-accent-soft);\n  animation: stampPress 3s ease-in-out infinite;\n}\n.cv-stamp::after {\n  content: '';\n  position: absolute;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 50px;\n  height: 15px;\n  background: var(--clay-accent-soft);\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n@keyframes stampPress {\n  0%, 70%, 100% { top: 20px; }\n  85% { top: 40px; }\n}\n\n\/* Rel Konveyor *\/\n.cv-track {\n  position: relative;\n  margin-top: 80px;\n  height: 100px;\n  background: var(--clay-bg);\n  border-radius: 16px;\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n}\n\n\/* Garis Strip Konveyor (Background) *\/\n.cv-track::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0;\n  width: 200%; height: 100%;\n  background: repeating-linear-gradient(\n    45deg,\n    rgba(244, 114, 182, 0.1),\n    rgba(244, 114, 182, 0.1) 10px,\n    transparent 10px,\n    transparent 20px\n  );\n  animation: patternScroll 4s linear infinite;\n}\n\n@keyframes patternScroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-40px); }\n}\n\n\/* Bungkus File File (Belt) *\/\n.cv-belt {\n  display: flex;\n  gap: 40px;\n  padding: 0 20px;\n  z-index: 2;\n  width: max-content;\n  animation: beltScroll 25s linear infinite; \/* DIPERLANJAT DARI 12s jadi 25s *\/\n}\n\n@keyframes beltScroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n\/* Kartu File *\/\n.cv-item {\n  flex: 0 0 auto;\n  width: 120px;\n  height: 70px;\n  background: var(--clay-bg);\n  border-radius: 14px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform 0.2s ease, background 0.2s ease;\n}\n.cv-item:hover, .cv-item.active {\n  transform: scale(1.05);\n  background: rgba(255, 255, 255, 0.8);\n}\n.cv-item-icon { font-size: 1.2rem; margin-bottom: 4px; }\n.cv-item-title { font-size: 0.75rem; font-weight: 700; color: var(--clay-text); }\n\n\/* === STATE PAUSED (KONVEYOR BERHENTI) === *\/\n.cv-machine.paused .cv-stamp,\n.cv-machine.paused .cv-track::before,\n.cv-machine.paused .cv-belt {\n  animation-play-state: paused;\n}\n\n\/* === DETAIL BOX === *\/\n.cv-detail-box {\n  width: 100%;\n  max-width: 600px;\n  min-height: 100px;\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 20px 25px;\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1; \/* FIX: LANGSUNG MUNCUL DARI AWAL *\/\n  transform: translateY(0); \/* FIX: GAK ADA EFEK MENTAL *\/\n  transition: opacity 0.3s ease;\n}\n.cv-detail-title { font-size: 1rem; font-weight: 700; color: var(--clay-accent); margin-bottom: 8px; transition: opacity 0.2s; }\n.cv-detail-text { font-size: 0.85rem; color: var(--clay-text); line-height: 1.6; font-weight: 400; transition: opacity 0.2s; }\n.cv-hint { margin-top: 10px; font-size: 0.75rem; color: #6B7280; font-style: italic; text-align: center; }\n\n\/* === RESPONSIVE HP === *\/\n@media (max-width: 768px) {\n  .conveyor-section-wrap { padding: 60px 15px; min-height: auto; }\n  .conveyor-header { margin-bottom: 30px; }\n  .cv-machine { padding: 20px; margin-bottom: 15px; }\n  .cv-stamp { width: 60px; height: 45px; top: 15px; }\n  .cv-stamp::after { width: 40px; height: 12px; bottom: -8px; }\n  .cv-track { margin-top: 55px; height: 80px; }\n  .cv-item { width: 100px; height: 60px; }\n  .cv-item-icon { font-size: 1rem; }\n  .cv-item-title { font-size: 0.7rem; }\n  .cv-belt { gap: 30px; padding: 0 15px; }\n  \n  .cv-detail-box { min-height: 90px; padding: 15px 20px; }\n  .cv-detail-title { font-size: 0.9rem; }\n  .cv-detail-text { font-size: 0.8rem; }\n  .cv-hint { margin-top: 8px; }\n}\n<\/style>\n\n<section class=\"conveyor-section-wrap\" id=\"conveyorSection\">\n  \n  <div class=\"conveyor-header\">\n    <div class=\"cv-badge\"><span><\/span> How We Work<\/div>\n    <h2>Our <em>Process<\/em> Pipeline<\/h2>\n  <\/div>\n\n  <div class=\"cv-machine\" id=\"cvMachine\">\n    <div class=\"cv-stamp\"><\/div>\n    \n    <div class=\"cv-track\">\n      <div class=\"cv-belt\" id=\"cvBelt\">\n        <!-- SET 1 -->\n        <div class=\"cv-item\" data-title=\"1. Brief & Research\" data-text=\"We dig deep into your business goals, target audience, and competitors to craft a foolproof strategy.\">\n          <div class=\"cv-item-icon\">\ud83d\udcdd<\/div>\n          <div class=\"cv-item-title\">Brief<\/div>\n        <\/div>\n        <div class=\"cv-item\" data-title=\"2. UI\/UX Design\" data-text=\"Crafting immersive, intuitive, and beautiful interfaces. We ensure every pixel serves a purpose before a single line of code is written.\">\n          <div class=\"cv-item-icon\">\ud83c\udfa8<\/div>\n          <div class=\"cv-item-title\">Design<\/div>\n        <\/div>\n        <div class=\"cv-item\" data-title=\"3. Development\" data-text=\"Bringing designs to life with lightning-fast, secure, and scalable code. Powered by the latest tech stack.\">\n          <div class=\"cv-item-icon\">\u2699\ufe0f<\/div>\n          <div class=\"cv-item-title\">Dev<\/div>\n        <\/div>\n        <div class=\"cv-item\" data-title=\"4. Launch & Scale\" data-text=\"We don't just hit publish. We monitor, optimize, and scale your digital product for long-term success.\">\n          <div class=\"cv-item-icon\">\ud83d\ude80<\/div>\n          <div class=\"cv-item-title\">Launch<\/div>\n        <\/div>\n\n        <!-- DUPLICATE SET (Buat Loop Mulus) -->\n        <div class=\"cv-item\" data-title=\"1. Brief & Research\" data-text=\"We dig deep into your business goals, target audience, and competitors to craft a foolproof strategy.\">\n          <div class=\"cv-item-icon\">\ud83d\udcdd<\/div>\n          <div class=\"cv-item-title\">Brief<\/div>\n        <\/div>\n        <div class=\"cv-item\" data-title=\"2. UI\/UX Design\" data-text=\"Crafting immersive, intuitive, and beautiful interfaces. We ensure every pixel serves a purpose before a single line of code is written.\">\n          <div class=\"cv-item-icon\">\ud83c\udfa8<\/div>\n          <div class=\"cv-item-title\">Design<\/div>\n        <\/div>\n        <div class=\"cv-item\" data-title=\"3. Development\" data-text=\"Bringing designs to life with lightning-fast, secure, and scalable code. Powered by the latest tech stack.\">\n          <div class=\"cv-item-icon\">\u2699\ufe0f<\/div>\n          <div class=\"cv-item-title\">Dev<\/div>\n        <\/div>\n        <div class=\"cv-item\" data-title=\"4. Launch & Scale\" data-text=\"We don't just hit publish. We monitor, optimize, and scale your digital product for long-term success.\">\n          <div class=\"cv-item-icon\">\ud83d\ude80<\/div>\n          <div class=\"cv-item-title\">Launch<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Detail Box (Langsung Keliatan) -->\n  <div class=\"cv-detail-box\" id=\"cvDetailBox\">\n    <div class=\"cv-detail-title\" id=\"cvDetailTitle\">Hover or Tap a file<\/div>\n    <div class=\"cv-detail-text\" id=\"cvDetailText\">Interact with the conveyor to see our workflow steps.<\/div>\n  <\/div>\n  <p class=\"cv-hint\">(Tap a file to stop the machine)<\/p>\n\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const cvMachine = document.getElementById('cvMachine');\n  const cvItems = document.querySelectorAll('.cv-item');\n  const cvDetailBox = document.getElementById('cvDetailBox');\n  const cvDetailTitle = document.getElementById('cvDetailTitle');\n  const cvDetailText = document.getElementById('cvDetailText');\n\n  function showDetail(item) {\n    cvMachine.classList.add('paused');\n    cvItems.forEach(i => i.classList.remove('active'));\n    item.classList.add('active');\n    \n    cvDetailTitle.innerText = item.dataset.title;\n    cvDetailText.innerText = item.dataset.text;\n  }\n\n  function hideDetail() {\n    cvMachine.classList.remove('paused');\n    cvItems.forEach(i => i.classList.remove('active'));\n    \n    cvDetailTitle.innerText = \"Hover or Tap a file\";\n    cvDetailText.innerText = \"Interact with the conveyor to see our workflow steps.\";\n  }\n\n  \/\/ Deteksi apakah perangkat support Touch (HP\/Tablet) atau Desktop\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\n  if (isTouchDevice) {\n    \/\/ LOGIKA HP (PAKAI TOUCHSTART BIAR RESPONSIF)\n    cvItems.forEach(item => {\n      item.addEventListener('touchstart', (e) => {\n        e.preventDefault(); \/\/ Cegah scroll halaman pas nyentuh kartu\n        e.stopPropagation();\n        if (item.classList.contains('active')) {\n          hideDetail(); \/\/ Kalo lagi active, tap lagi buat jalan\n        } else {\n          showDetail(item);\n        }\n      }, { passive: false });\n    });\n\n    \/\/ Klik area luar buat jalanin lagi (HP)\n    document.addEventListener('touchstart', (e) => {\n      if (!cvMachine.contains(e.target) && !cvDetailBox.contains(e.target)) {\n        hideDetail();\n      }\n    }, { passive: true });\n\n  } else {\n    \/\/ LOGIKA DESKTOP (PAKAE HOVER & CLICK BIASA)\n    cvItems.forEach(item => {\n      item.addEventListener('mouseenter', () => showDetail(item));\n      item.addEventListener('mouseleave', hideDetail);\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-43d1977 e-con-full e-flex e-con e-parent\" data-id=\"43d1977\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf989a6 elementor-widget elementor-widget-html\" data-id=\"cf989a6\" 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 (ON-DNA) === *\/\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.claw-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.claw-section-wrap {\n  background: var(--clay-bg);\n  padding: 60px 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  \/* PERBAIKAN: Tambahan svh *\/\n  min-height: 100vh;\n  min-height: 100svh; \n}\n\n.claw-header {\n  text-align: center;\n  margin-bottom: 30px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.claw-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: 1rem; \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.claw-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.claw-header h2 {\n  font-size: clamp(1.6rem, 3.5vw, 2.2rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.claw-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\/* === MESIN CAPIT CLAY === *\/\n.claw-machine {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n  height: 400px;\n  background: rgba(255, 255, 255, 0.25);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 32px;\n  box-shadow: 12px 12px 24px var(--clay-shadow-dark), -12px -12px 24px var(--clay-shadow-light), inset 2px 2px 4px rgba(255,255,255,0.5);\n  overflow: hidden;\n  margin-bottom: 25px;\n}\n\n.claw-top-rail {\n  position: absolute;\n  top: 30px; left: 20px; right: 20px;\n  height: 8px;\n  background: var(--clay-bg);\n  border-radius: 4px;\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n  z-index: 5;\n}\n\n.claw-arm {\n  position: absolute;\n  top: 20px; left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  animation: clawMove 4s ease-in-out infinite alternate;\n  transition: left 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.claw-string {\n  width: 4px;\n  height: 40px; \n  background: var(--clay-shadow-dark);\n  margin: 0 auto;\n  transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\n  border-radius: 2px;\n}\n.claw-head {\n  width: 40px;\n  height: 30px;\n  background: var(--clay-accent);\n  border-radius: 8px 8px 12px 12px;\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light), inset 1px 1px 2px var(--clay-accent-soft);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n}\n.claw-head::before, .claw-head::after {\n  content: '';\n  position: absolute;\n  bottom: -12px;\n  width: 12px;\n  height: 18px;\n  background: var(--clay-accent);\n  box-shadow: 2px 2px 4px var(--clay-shadow-dark);\n  transition: transform 0.3s ease;\n  border-radius: 0 0 8px 8px;\n  transform-origin: top;\n  z-index: 2;\n}\n.claw-head::before { left: 2px; }\n.claw-head::after { right: 2px; }\n\n\/* EFEK CAPIT NUTUP *\/\n.claw-arm.grabbing .claw-head::before { transform: rotate(35deg); }\n.claw-arm.grabbing .claw-head::after { transform: rotate(-35deg); }\n\n@keyframes clawMove {\n  0% { left: 15%; }\n  100% { left: 75%; }\n}\n\n\/* BOLA YANG DIBAWA CAPIT (TAMBAHAN BARU) *\/\n.held-ball {\n  position: absolute;\n  bottom: -15px;\n  left: 50%;\n  transform: translateX(-50%) scale(0);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--clay-accent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1rem;\n  opacity: 0;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n  z-index: 1; \n  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px rgba(255,255,255,0.5);\n}\n.held-ball.show {\n  opacity: 1;\n  transform: translateX(-50%) scale(1);\n}\n\n.prize-pit {\n  position: absolute;\n  bottom: 70px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80%;\n  height: 100px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  gap: 15px;\n  flex-wrap: wrap;\n  z-index: 2;\n}\n\n.prize-ball {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1rem;\n  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px rgba(255,255,255,0.5), 4px 4px 8px var(--clay-shadow-dark);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  pointer-events: none;\n}\n.prize-ball.grabbed {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.drop-hole {\n  position: absolute;\n  bottom: 15px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 60px;\n  height: 25px;\n  background: var(--clay-shadow-dark);\n  border-radius: 30px 30px 0 0;\n  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2);\n  z-index: 1;\n}\n.drop-ball {\n  position: absolute;\n  bottom: 15px;\n  left: 50%;\n  transform: translateX(-50%) scale(0);\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--clay-accent);\n  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px rgba(255,255,255,0.5);\n  z-index: 2;\n  transition: transform 0.3s ease;\n  display: flex; \n  align-items: center;\n  justify-content: center;\n  font-size: 1rem;\n}\n.drop-ball.show {\n  transform: translateX(-50%) scale(1);\n}\n\n.claw-btn {\n  padding: 14px 36px;\n  border-radius: 16px;\n  border: none;\n  background: var(--clay-accent);\n  color: #fff;\n  font-family: 'Poppins', sans-serif;\n  font-weight: 700;\n  font-size: 0.9rem;\n  cursor: pointer;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light), inset 2px 2px 4px var(--clay-accent-soft);\n  transition: transform 0.1s ease;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n}\n.claw-btn:active { transform: scale(0.95); }\n.claw-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n\/* === POP-UP TESTIMONI === *\/\n.testi-overlay {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(58, 58, 58, 0.6);\n  z-index: 998;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease;\n}\n.testi-overlay.show { opacity: 1; visibility: visible; }\n\n.testi-popup {\n  position: fixed;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%) scale(0.8);\n  width: 90%;\n  max-width: 380px;\n  background: var(--clay-bg);\n  padding: 30px;\n  border-radius: 24px;\n  box-shadow: 10px 10px 20px var(--clay-shadow-dark), -10px -10px 20px var(--clay-shadow-light);\n  z-index: 999;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n  text-align: center;\n}\n.testi-popup.show {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(-50%, -50%) scale(1);\n}\n.testi-emoji { font-size: 2.5rem; margin-bottom: 10px; }\n.testi-text { font-size: 0.9rem; color: var(--clay-text); line-height: 1.6; margin-bottom: 20px; font-weight: 500; }\n.testi-name { font-size: 0.8rem; font-weight: 700; color: var(--clay-accent); text-transform: uppercase; }\n.testi-close {\n  margin-top: 20px;\n  padding: 10px 24px;\n  border: none;\n  background: var(--clay-bg);\n  border-radius: 12px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  cursor: pointer;\n  font-weight: 600;\n  color: var(--clay-text);\n}\n\n\/* === RESPONSIVE HP === *\/\n@media (max-width: 768px) {\n  .claw-section-wrap {\n    padding: 40px 15px; \n    justify-content: flex-start; \n    padding-top: 60px; \n    min-height: auto !important; \n  }\n  .claw-header { margin-bottom: 20px; }\n  .claw-header h2 { font-size: 1.5rem; }\n  \n  .claw-machine { \n    height: 320px; \n    max-width: 300px; \n    margin-bottom: 20px;\n  }\n  .claw-top-rail { top: 20px; }\n  .claw-arm { top: 10px; }\n  .prize-pit { bottom: 60px; height: 80px; gap: 10px; }\n  .prize-ball { width: 32px; height: 32px; font-size: 0.8rem; }\n  .drop-hole { bottom: 10px; width: 50px; height: 20px; }\n  .drop-ball { bottom: 10px; width: 32px; height: 32px; }\n  \n  .claw-btn { padding: 12px 30px; font-size: 0.85rem; }\n}\n\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR === *\/\n.claw-section-wrap button:focus, \n.claw-section-wrap button:focus-visible {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  text-decoration: none !important;\n}\n<\/style>\n\n<section class=\"claw-section-wrap\" id=\"clawSection\">\n  \n  <div class=\"claw-header\">\n    <div class=\"claw-badge\"><span><\/span> Real Testimonials<\/div>\n    <h2>Try Your <em>Luck<\/em><\/h2>\n  <\/div>\n\n  <!-- MESIN CAPIT -->\n  <div class=\"claw-machine\" id=\"clawMachine\">\n    <div class=\"claw-top-rail\"><\/div>\n    \n    <div class=\"claw-arm\" id=\"clawArm\">\n      <div class=\"claw-string\" id=\"clawString\"><\/div>\n      <div class=\"claw-head\">\n        <!-- Tambahan elemen bola yang dibawa -->\n        <div class=\"held-ball\" id=\"heldBall\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"prize-pit\" id=\"prizePit\">\n      <!-- Bola-bola JS -->\n    <\/div>\n\n    <div class=\"drop-hole\"><\/div>\n    <div class=\"drop-ball\" id=\"dropBall\"><\/div>\n  <\/div>\n\n  <button class=\"claw-btn\" id=\"clawBtn\">DROP THE CLAW!<\/button>\n\n<\/section>\n\n<!-- OVERLAY & POPUP -->\n<div class=\"testi-overlay\" id=\"testiOverlay\"><\/div>\n<div class=\"testi-popup\" id=\"testiPopup\">\n  <div class=\"testi-emoji\">\ud83c\udf89<\/div>\n  <p class=\"testi-text\" id=\"testiText\">Empty testimonial<\/p>\n  <p class=\"testi-name\" id=\"testiName\">- Client<\/p>\n  <button class=\"testi-close\" id=\"testiClose\">Close<\/button>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const clawMachine = document.getElementById('clawMachine');\n  const clawArm = document.getElementById('clawArm');\n  const clawString = document.getElementById('clawString');\n  const clawBtn = document.getElementById('clawBtn');\n  const prizePit = document.getElementById('prizePit');\n  const dropBall = document.getElementById('dropBall');\n  const heldBall = document.getElementById('heldBall'); \n  const testiPopup = document.getElementById('testiPopup');\n  const testiOverlay = document.getElementById('testiOverlay');\n  const testiText = document.getElementById('testiText');\n  const testiName = document.getElementById('testiName');\n  const testiClose = document.getElementById('testiClose');\n\n  \/\/ PERBAIKAN: Teks dibuat 1 baris lurus, tanpa ENTER, tanpa tanda ** agar JS tidak error\n  const testimonials = [\n    { emoji: \"\ud83d\ude80\", text: \"Website-nya baru jadi, eh langsung nongkrong di halaman pertama Google. \ud83d\ude2d Penjualan naik 200% dalam sebulan. Kita juga bingung, ini website apa pesugihan digital?\", name: \"Andi Pratama, CEO of TokoKita\" },\n    { emoji: \"\ud83d\udd25\", text: \"Desainnya sih udah nggak manusiawi. \ud83e\udd2f Beda banget sama kompetitor sampai mereka mungkin lagi buka website kita sambil mikir, Lah kok punya kita jelek? Pengunjung sekarang betah banget nongkrong di website. \ud83d\ude2d\", name: \"Sarah Wijaya, Founder of StartupX\" },\n    { emoji: \"\ud83d\udca1\", text: \"Timnya gercep parah dan langsung ngerti kebutuhan bisnis kita. Semua masalah UI\/UX yang selama ini bikin kita sakit kepala dibabat habis. Laptop akhirnya selamat dari amukan kami. \ud83d\ude2d\ud83d\udd25\", name: \"Budi Santoso, CMO of JayaMaju\" },\n    { emoji: \"\ud83d\udc8e\", text: \"Animasi doang udah bikin kita mikir, Waduh, ini mahal. Tapi pas lihat hasilnya: Yaudah deh, ambil duit gue. \ud83d\ude2d\ud83d\udcb8 Worth it sampai receh terakhir!\", name: \"Citra Lestari, Creative Dir.\" },\n    { emoji: \"\u26a1\", text: \"Nggak cuma cakep, website-nya juga ngebut kayak dikejar debt collector! \u26a1 PageSpeed langsung 100, nggak pake pemanasan. Kenceng, ganteng, dan nggak banyak drama. Highly recommended! \ud83d\ude2d\ud83d\udd25\", name: \"Dimas Anggara, Tech Lead\" }\n  ];\n\n  let balls = [];\n  let isPlaying = false;\n\n  function initBalls() {\n    prizePit.innerHTML = '';\n    balls = [];\n    const colors = ['#F472B6', '#A855F7', '#34D399', '#60A5FA', '#FBBF24'];\n    \n    testimonials.forEach((t, index) => {\n      const ball = document.createElement('div');\n      ball.className = 'prize-ball';\n      ball.style.background = colors[index % colors.length];\n      ball.dataset.index = index;\n      ball.innerText = t.emoji;\n      prizePit.appendChild(ball);\n      balls.push(ball);\n    });\n  }\n\n  function wait(ms) {\n    return new Promise(resolve => setTimeout(resolve, ms));\n  }\n\n  async function playClaw() {\n    if (isPlaying) return;\n    \n    const availableBalls = balls.filter(b => !b.classList.contains('grabbed'));\n    if (availableBalls.length === 0) {\n      alert(\"The machine is empty! Refresh the page to play again.\");\n      return;\n    }\n\n    isPlaying = true;\n    clawBtn.disabled = true;\n    clawBtn.innerText = \"GRABBING...\";\n\n    const targetBall = availableBalls[Math.floor(Math.random() * availableBalls.length)];\n    \n    const machineRect = clawMachine.getBoundingClientRect();\n    const ballRect = targetBall.getBoundingClientRect();\n    const ballCenterX = ballRect.left + ballRect.width \/ 2;\n    \n    let targetLeftPercent = ((ballCenterX - machineRect.left) \/ machineRect.width) * 100;\n    targetLeftPercent = Math.max(15, Math.min(75, targetLeftPercent)); \n    \n    clawArm.style.animation = 'none';\n    clawArm.style.left = targetLeftPercent + '%';\n\n    await wait(800);\n\n    const armRect = clawArm.getBoundingClientRect();\n    const ballCenterY = ballRect.top + ballRect.height \/ 2;\n    const distanceToDrop = ballCenterY - armRect.top - 30; \n    \n    clawString.style.height = distanceToDrop + 'px';\n    await wait(700);\n\n    clawArm.classList.add('grabbing');\n    heldBall.style.background = targetBall.style.background;\n    heldBall.innerText = targetBall.innerText;\n    heldBall.classList.add('show'); \n    targetBall.classList.add('grabbed'); \n    await wait(400);\n    \n    clawString.style.height = '40px';\n    await wait(700);\n\n    clawArm.style.left = '50%';\n    await wait(800);\n\n    const dropHoleRect = document.querySelector('.drop-hole').getBoundingClientRect();\n    const dropDistance = dropHoleRect.top - armRect.top - 30;\n    clawString.style.height = dropDistance + 'px';\n    await wait(500);\n\n    clawArm.classList.remove('grabbing');\n    heldBall.classList.remove('show'); \n    dropBall.style.background = targetBall.style.background;\n    dropBall.innerText = targetBall.innerText;\n    dropBall.classList.add('show'); \n    await wait(500);\n\n    clawString.style.height = '40px';\n    await wait(500);\n\n    const tIndex = parseInt(targetBall.dataset.index);\n    const tData = testimonials[tIndex];\n    testiText.innerText = tData.text;\n    testiName.innerText = \"- \" + tData.name;\n    testiPopup.querySelector('.testi-emoji').innerText = tData.emoji;\n    testiPopup.classList.add('show');\n    testiOverlay.classList.add('show');\n  }\n\n  function resetClaw() {\n    testiPopup.classList.remove('show');\n    testiOverlay.classList.remove('show');\n    dropBall.classList.remove('show');\n    heldBall.classList.remove('show'); \n    \n    setTimeout(() => {\n      clawArm.style.animation = '';\n      clawArm.style.left = '';\n      clawString.style.height = '';\n      clawBtn.disabled = false;\n      clawBtn.innerText = \"DROP THE CLAW!\";\n      isPlaying = false;\n    }, 500);\n  }\n\n  clawBtn.addEventListener('click', playClaw);\n  testiClose.addEventListener('click', resetClaw);\n  testiOverlay.addEventListener('click', resetClaw);\n\n  initBalls();\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>Portfolio 2026 Transforming Ideas Into Digital Reality A curated showcase of our finest work. We blend cutting-edge UI\/UX design with robust engineering to deliver exceptional results for global brands. Woi manusia, jangan ganggu gue! Urus aja hidup lu yang membosankan \ud83d\ude34 Zzz Web Design E-Commerce Platform SaaS Dashboard Cloud Analytics Mobile App Finance Tracker Selected [&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-1088","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1088","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=1088"}],"version-history":[{"count":115,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1088\/revisions"}],"predecessor-version":[{"id":1849,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1088\/revisions\/1849"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/media?parent=1088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}