/* =============================================
   Enhanced Animations & Effects (drop-in)
   - Safe defaults, respects prefers-reduced-motion
   - Works with your existing classes without HTML changes
   ============================================= */

/* Smooth theme & color transitions */
* { transition: color .25s ease, background-color .25s ease, border-color .25s ease; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== Utility animation classes (opt-in) ===== */
:root {
  --anim-in: cubic-bezier(.22,1,.36,1);         /* springy */
  --anim-out: cubic-bezier(.22,1,.36,1);
  --glow: 0 0 0 rgba(30,122,223,0);
}

@keyframes fadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideInX { from { opacity:0; transform: translateX(-16px);} to { opacity:1; transform:none; } }
@keyframes floaty { 0% { transform: translateY(0) } 50% { transform: translateY(-6px) } 100% { transform: translateY(0) } }
@keyframes pulseSoft { 0%,100% { box-shadow: var(--shadow) } 50% { box-shadow: 0 12px 32px rgba(30,122,223,.28) } }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@keyframes borderGlow { 0%,100% { box-shadow: var(--glow) } 50% { box-shadow: 0 0 32px rgba(30,122,223,.35) } }

/* reveal-on-load variants (no JS needed) */
.hero .grid > * { animation: fadeUp .7s var(--anim-in) both; }
.hero .grid > *:nth-child(2) { animation-delay: .08s }
.hero .grid > *:nth-child(3) { animation-delay: .16s }

/* optional: scroll-reveal — when parent gets .in-view via small JS/intersectionObserver */
.reveal { opacity:0; transform: translateY(12px); transition: .6s var(--anim-in); }
.reveal.in-view { opacity:1; transform:none; }

/* ===== Buttons: micro-interactions ===== */
.btn { position: relative; overflow: hidden; isolation:isolate; }
.btn:hover { filter: saturate(1.05); }

/* subtle shine on hover */
.btn::after {
  content:""; position:absolute; inset:-120% auto -120% -40%; width:60%; transform: rotate(16deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transition: transform .6s ease; pointer-events:none;
}
.btn:hover::after { transform: translateX(260%) rotate(16deg); }

/* ripple on click */
.btn:active::before {
  content:""; position:absolute; inset:0; border-radius:inherit; 
  background: radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 40%);
  animation: fadeIn .5s ease-out both; mix-blend-mode: screen;
}

/* ===== Header: airy hover & subtle shadow breathing ===== */
header { will-change: box-shadow, background-color; animation: headerPulse 6s ease-in-out infinite; }
@keyframes headerPulse { 0%,100%{ box-shadow:0 4px 6px rgba(0,0,0,.02) } 50%{ box-shadow:0 10px 24px rgba(0,0,0,.06) } }
.dark header { animation:none; }

/* nav links underline grow */
.nav-links a { position:relative; display:inline-block; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--blue); transition:width .25s var(--anim-in); }
.nav-links a:hover::after { width:100%; }

/* ===== CTA Strip: animated gradient ===== */
.strip { position:relative; overflow:hidden; }
.strip::after {
  content:""; position:absolute; inset:-2px; z-index:0; border-radius:18px;
  background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,0), rgba(255,255,255,.15));
  background-size:200% 100%; animation: shimmer 4s linear infinite; pointer-events:none;
}
.strip > * { position:relative; z-index:1; }

/* ===== Cards: float + gradient border on hover ===== */
.p-card { transform-style: preserve-3d; will-change: transform, box-shadow; }
.p-card:hover { animation: none; }
.p-card:hover .p-media { animation: floaty 3.3s ease-in-out infinite; }

/* feature hover lift */
.feature { transition: transform .35s var(--anim-in), box-shadow .35s ease; }
.feature:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(16,24,40,.14); }

/* testi hover flicker of stars */
.stars { display:inline-block; animation: none; }
.testi:hover .stars { animation: pulseSoft 1.8s ease-in-out infinite; }

/* ===== Product carousel: focus ring & active slide emphasis ===== */
.product-carousel .track:focus { outline:none; }
.p-card:focus-within { box-shadow: 0 8px 24px rgba(30,122,223,.25); border-color: var(--blue); }

/* ===== Promo banner: decorative orbs drifting ===== */
.promo-banner::before,
.promo-banner::after {
  content:""; position:absolute; width:420px; height:420px; border-radius:50%; filter: blur(60px);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%);
  animation: floaty 10s ease-in-out infinite;
}
.promo-banner::after { right:-160px; top:-120px; animation-duration: 13s; }
.promo-banner::before { left:-160px; bottom:-120px; }

/* ===== Waves: gentle bobbing ===== */
.wave.wave1 { animation-duration: 18s; }
.wave.wave2 { animation-duration: 26s; }
@media (prefers-reduced-motion: no-preference) {
  .wave { will-change: transform; }
}

/* ===== Focus visibility for a11y ===== */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--blue) 70%, white 30%);
  outline-offset: 2px; border-radius: 10px;
}

/* ===== Fancy gradient text helper ===== */
.gradient-text { background: linear-gradient(90deg, var(--blue), var(--red)); -webkit-background-clip: text; color: transparent; }

/* ===== Glass utility (for overlays, dropdown, search) ===== */
.glass { backdrop-filter: blur(10px) saturate(130%); background: color-mix(in oklab, var(--bg) 70%, transparent 30%); border:1px solid color-mix(in oklab, var(--border) 70%, transparent 30%); }

/* apply glass to search & dropdown subtly */
.search-box { backdrop-filter: blur(8px); }
.dropdown-menu { backdrop-filter: blur(8px); }

/* ===== Animated skeleton/shimmer utility ===== */
.skeleton { position:relative; overflow:hidden; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; }
.dark .skeleton { background: linear-gradient(90deg, #111827 25%, #1f2937 37%, #111827 63%); }

/* ===== Stats count pop (when adding .tick class via JS) ===== */
.stat-number.tick { animation: countPop .4s var(--anim-in); }
@keyframes countPop { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ===== Mobile toolbar: tap feedback ===== */
.icon-btn:active, .social-link:active { transform: scale(.96); }

/* ===== Theme toggle micro-press ===== */
.theme-toggle-desktop:active { transform: translateY(1px); }
.theme-toggle-desktop:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* ===== Enhanced link hover (global) ===== */
a { position:relative; }
a:hover { filter: saturate(1.1); }

/* ===== Ripple position helper (set via JS on mousemove to expose --x/--y) ===== */
.btn { --x: 50%; --y: 50%; }

/* ===== Dark mode: glow accents on interactive elements ===== */
.dark .btn:hover { box-shadow: 0 10px 28px rgba(96,165,250,.25); }
.dark .p-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.45); }

/* ===== Fancy underline helper ===== */
.underline-fx { background: linear-gradient(0deg, currentColor, currentColor) no-repeat left 100%/0 2px; transition: background-size .25s var(--anim-in); }
.underline-fx:hover { background-size: 100% 2px; }

/* ===== Optional tilt on hover for product/testi cards ===== */
.tilt { transform: perspective(800px) rotateX(0) rotateY(0); transition: transform .2s ease; }
.tilt:hover { transform: perspective(800px) rotateX(3deg) rotateY(-3deg) translateY(-4px); }

/* ===== Section headers: gentle entrance ===== */
.section-header { animation: fadeUp .6s var(--anim-in) both; }

/* ===== Animated gradient border utility ===== */
.border-animated {
  position:relative; border-radius: var(--radius); background: linear-gradient(var(--bg), var(--bg)) padding-box, 
  linear-gradient(135deg, var(--blue), var(--red)) border-box; border: 2px solid transparent;
}
.border-animated:hover { animation: borderGlow 2.4s ease-in-out infinite; }

/* ===== Keyframes for soft breathing shadow on cards ===== */
.card-breathe { animation: cardBreathe 6s ease-in-out infinite; }
@keyframes cardBreathe { 0%,100%{ box-shadow: var(--shadow) } 50%{ box-shadow: 0 14px 36px rgba(16,24,40,.16) } }

/* ===== Improve search overlay show/hide transitions ===== */
.search-overlay { opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease; }
.search-overlay.open { display:block; opacity:1; visibility:visible; }

/* ===== Personas (Dirancang untuk Siapa Saja) — rotating icons ===== */
@keyframes spinIcon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.features.personas { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; }
.persona-card {
  background: var(--bg);
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.persona-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }

.persona-icon {
  width: 72px; height: 72px; display:grid; place-items:center;
  margin: 0 auto 16px; border-radius: 18px;
  background: linear-gradient(135deg,var(--c1,#60a5fa),var(--c2,#2563eb));
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  transition: transform .3s ease;
  animation: spinIcon 8s linear infinite;
  will-change: transform;
}
.persona-icon img {
  width: 42px; height: 42px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition: transform .3s ease;
}
.persona-card:hover .persona-icon { animation-play-state: paused; transform: scale(1.1) rotate(3deg); }
.persona-card:hover .persona-icon img { transform: scale(1.1); }

.persona-card h3 { font-size:18px; color:var(--blue-dark); margin-bottom:8px; }
.persona-card p { color:var(--muted); line-height:1.5; }
.dark .persona-card { background: var(--soft); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.dark .persona-card h3 { color: var(--blue); }

/* Slow down rotation on small screens (more “adem”) */
@media (max-width:768px){
  .persona-icon { animation-duration: 12s; }
}

/* =====================================================
   ORIGINAL CSS (kept) — appended below for reference
   ===================================================== */

/* (styling unchanged — saya pertahankan seluruh CSS aslinya) */
/* --------------------------------------------
 * TOKENS
 * ------------------------------------------ */
:root{
  --blue:#1E7ADF; --blue-dark:#0F60C7;
  --red:#E53935;  --red-dark:#C62828;
  --text:#0f172a; --muted:#64748b;
  --bg:#ffffff;   --soft:#f8fafc;
  --radius:14px;  --shadow:0 8px 24px rgba(16,24,40,.08);
  --border:#e5e7eb;
}
.dark{
  --bg:#0b1220; --soft:#0f1629;
  --text:#e5e7eb; --muted:#94a3b8;
  --blue:#60a5fa; --blue-dark:#3b82f6;
  --red:#ef4444;  --red-dark:#dc2626;
  --border:#1f2937;
}

/* --------------------------------------------
 * RESET / UTIL
 * ------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Poppins",sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:700}
a{text-decoration:none;color:var(--blue)}
a:hover{color:var(--red)}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(12px,3.5vw,20px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;border:none;white-space:nowrap;
  font-weight:600;color:#fff;background:var(--blue);box-shadow:var(--shadow);transition:.2s ease;
}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn.red{background:var(--red)} .btn.red:hover{background:var(--red-dark)}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--blue);box-shadow:none}

/* --------------------------------------------
 * HEADER (DESKTOP)
 * ------------------------------------------ */
header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 4px 6px rgba(0,0,0,.02)}
.dark header{background:#0f172a;border-color:var(--border);box-shadow:0 4px 6px rgba(0,0,0,.3)}
header .nav{display:flex;align-items:center;gap:12px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700;color:var(--blue)}
.logo img{max-height:40px;width:auto;height:auto}
.nav-links{margin-left:auto;display:flex;align-items:center}
.nav-links a{margin-left:20px;font-weight:600;color:var(--text)}
.nav-links a:hover{color:var(--blue)}
.menu-btn{display:none} /* tombol lama, disembunyikan di desktop */


/* CTA kanan desktop */
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  padding:8px 14px;border-radius:999px;border:1px solid var(--blue);
  background:#fff;color:var(--blue);font-weight:600;
}
/* DESKTOP THEME TOGGLE BUTTON */
.theme-toggle-desktop{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;padding:8px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;
}
.theme-toggle-desktop svg{width:18px;height:18px}
.theme-toggle-desktop[aria-pressed="true"]{box-shadow:0 6px 18px rgba(0,0,0,.06)}

.nav-cta:hover{background:var(--blue);color:#fff}
.nav-cta svg{width:18px;height:18px;flex:0 0 18px}

/* --------------------------------------------
 * CTA STRIP
 * ------------------------------------------ */
.strip{
  --strip1: var(--blue); --strip2: var(--blue-dark);
  width:min(1100px,calc(100% - 32px));
  margin:60px auto;padding:clamp(20px,4vw,36px);
  color:#fff;text-align:center;border-radius:18px;
  background:linear-gradient(135deg,var(--strip1),var(--strip2));
  box-shadow:0 10px 30px rgba(15,96,199,.25);
}
.strip h3{margin:0 0 6px;font-size:clamp(18px,2.4vw,24px);font-weight:700}
.strip p{margin:0 0 14px;opacity:.95}
.strip .btn{
  background:#fff;color:var(--blue-dark);font-weight:700;border:0;
  padding:12px 22px;box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.strip .btn:hover{background:#f1f5f9;transform:translateY(-1px)}
.dark .strip{box-shadow:0 12px 28px rgba(0,0,0,.35)}
.dark .strip .btn{background:#e2e8f0;color:#0f172a}
.dark .strip .btn:hover{background:#cbd5e1}

/* --------------------------------------------
 * HEADER (MOBILE ≤820px)
 * ------------------------------------------ */
.mobile-topbar,.mobile-toolbar{display:none}
@media (max-width:820px){
  header .nav{display:none}

  /* baris 1 */
  .mobile-topbar{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
    padding:10px clamp(12px,3.5vw,16px);background:#fff;
  }
  .dark .mobile-topbar{background:#0f172a}
  .mobile-topbar .brand-wrap{display:flex;align-items:center;gap:10px;min-width:0}
  .mobile-topbar img{height:30px}
  .mobile-topbar .brand{
    font-weight:700;color:var(--blue);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mobile-cta{
    display:inline-flex;align-items:center;gap:8px;line-height:1;
    padding:9px 12px;border-radius:999px;color:#fff;font-weight:700;
    background:linear-gradient(135deg,#53e0e0,#1fb0ff);box-shadow:0 6px 18px rgba(31,176,255,.25);
    font-size:14px;
  }
  .mobile-cta svg{width:18px;height:18px}

  /* baris 2 */
  .mobile-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px clamp(10px,3.5vw,18px);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;
  }
  .dark .mobile-toolbar{background:#0f172a;border-color:var(--border)}
  .toolbar-left,.toolbar-right{display:flex;align-items:center;gap:12px;min-width:0}
  .icon-btn,.social-link{
    display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;
    color:#0f172a;background:#f7fafc;border:1px solid var(--border);
  }
  .dark .icon-btn,.dark .social-link{color:#e5e7eb;background:#0b1324}
  .icon-btn:hover,.social-link:hover{background:#eef6ff}
  .icon-btn svg,.social-link svg{width:18px;height:18px}
}


/* --------------------------------------------
 * SEARCH OVERLAY
 * ------------------------------------------ */
.search-overlay{position:fixed;inset:0;z-index:95;display:none;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}
.search-box{max-width:680px;margin:10vh auto 0;background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.dark .search-box{background:#0f172a;border-color:var(--border)}
.search-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.search-input{flex:1;border:none;outline:none;font-size:16px;padding:10px;background:transparent;color:var(--text)}
.search-close{border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px;cursor:pointer}
.search-results{max-height:50vh;overflow:auto;padding:8px}
.result-item{display:block;padding:10px 12px;border-radius:10px;color:var(--text)}
.result-item:hover{background:var(--soft)}
.dark .result-item:hover{background:#0b1324}

/* --------------------------------------------
 * DROPDOWN MENU (MOBILE)
 * ------------------------------------------ */
.dropdown-menu{
  position:fixed;display:none;z-index:96;min-width:220px;max-width:min(92vw,360px);max-height:70vh;overflow:auto;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.dark .dropdown-menu{background:#0f172a;border-color:var(--border)}
.dropdown-menu a{display:block;margin:4px;padding:10px 12px;border-radius:8px;color:var(--text)}
.dropdown-menu a:hover{background:var(--soft)}
.dark .dropdown-menu a:hover{background:#0b1324}

/* --------------------------------------------
 * HERO & SECTION
 * ------------------------------------------ */
.hero{position:relative;overflow:hidden;padding:86px 0 140px;background:linear-gradient(180deg,#EAF3FF 0%,#ffffff 100%)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px;position:relative;z-index:3}
.hero h1{font-size:clamp(26px,4.2vw,40px);line-height:1.2;margin-bottom:10px;word-wrap:break-word}
#typed-text{display:inline-block;min-height:1.25em}
.hero p{color:var(--muted);margin:0 0 20px}
.badge{display:inline-block;background:#EAF3FF;color:var(--blue-dark);padding:6px 10px;border-radius:999px;font-weight:600;font-size:13px;margin-bottom:10px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

.wave{position:absolute;left:0;width:300%;height:200px;pointer-events:none}
.wave.wave1{bottom:60px;opacity:.4;z-index:1;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'><path fill='%231E7ADF' d='M0,192L80,197.3C160,203,320,213,480,197.3C640,181,800,139,960,144C1120,149,1280,203,1360,229.3L1440,256L1440,320L0,320Z'/></svg>") repeat-x bottom;background-size:contain;animation:scroll1 18s linear infinite}
.wave.wave2{bottom:0;opacity:.9;z-index:2;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'><path fill='%230F60C7' d='M0,224L60,197.3C120,171,240,117,360,101.3C480,85,600,107,720,138.7C840,171,960,213,1080,224C1200,235,1320,213,1380,202.7L1440,192L1440,320L0,320Z'/></svg>") repeat-x bottom;background-size:contain;animation:scroll2 26s linear infinite}
@keyframes scroll1{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
@keyframes scroll2{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){ .wave{animation:none} }

.section{padding:70px 0}
.section-header{text-align:center;margin-bottom:40px}
.section-header p{color:var(--muted);max-width:720px;margin:10px auto 0}

/* --------------------------------------------
 * PRODUCT CAROUSEL (visual + auto slide)
 * ------------------------------------------ */
.product-carousel{
  position:relative;overflow:hidden;max-width:100%;
  margin:30px auto;border-radius:20px;padding:20px 0;
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);box-shadow:0 10px 30px rgba(30,122,223,0.1);
}
.product-carousel::before,
.product-carousel::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.product-carousel::before{left:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%)}
.product-carousel::after{right:0;background:linear-gradient(-90deg,#fff 0%,rgba(255,255,255,0) 100%)}

.product-carousel .track{
  display:flex;align-items:stretch;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:0 20px;
  will-change:transform;animation:productScroll 28s linear infinite;scrollbar-width:none;
}
.product-carousel .track::-webkit-scrollbar{display:none}
.product-carousel:hover .track{animation-play-state:paused}

.p-card{
  flex:0 0 300px; position:relative; text-align:center;
  padding:22px 18px;background:#fff;border-radius:18px;border:2px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);transition:all .3s ease;
}
.p-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 8px 20px rgba(30,122,223,0.2)}
/* ornamen pinggir */
.p-card::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:2px;opacity:.15;pointer-events:none;
  background:linear-gradient(135deg,#1E7ADF,#0F60C7);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.p-card h3{margin-bottom:6px;font-size:18px;font-weight:700;color:var(--blue-dark)}
.p-card p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}

@keyframes productScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* tombol next/prev */
.carousel-nav{
  position:absolute;top:50%;z-index:5;transform:translateY(-50%);
  width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.15);transition:all .2s ease;
}
.carousel-nav:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.carousel-nav svg{width:20px;height:20px;stroke:var(--blue-dark)}
.carousel-prev{left:8px} .carousel-next{right:8px}

/* responsif kartu */
@media (max-width:768px){
  .p-card{flex:0 0 240px;padding:18px}
  .carousel-nav{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .product-carousel .track{animation:none}
  .product-carousel{overflow-x:auto;scroll-snap-type:x mandatory}
  .p-card{scroll-snap-align:start}
}

/* --------------------------------------------
 * PROMO BANNER
 * ------------------------------------------ */
.promo-referral{position:relative;overflow:hidden;color:#fff;padding:80px 0;border-radius:0 0 80px 80px;background:linear-gradient(135deg,#1E7ADF,#0F60C7)}
.promo-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:40px}
.promo-img{flex:1;min-width:280px;text-align:center}
.promo-text{flex:1;min-width:260px;text-align:left}
.promo-text h2{margin:0 0 10px;font-size:clamp(22px,3vw,32px);font-weight:700}
.promo-text h2 span{color:#FFD700}

/* --------------------------------------------
 * FEATURES / TESTI / STATS
 * ------------------------------------------ */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.feature{display:flex;gap:16px;align-items:center;padding:18px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.feature-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{padding:18px;background:#fff;border:1px solid #e6eaf2;border-radius:14px;box-shadow:var(--shadow)}
.testi-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.testi-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#eaf3ff;color:var(--blue-dark)}
.testi-name{font-weight:600;font-size:14px}
.stars{color:#f6b21a;font-size:13px;letter-spacing:1px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;padding:40px 0}
.stat-number{margin-bottom:6px;font-size:36px;font-weight:700;color:var(--blue-dark)}
.stat-number::after{content:"+"}
.stat-label{font-size:14px;color:var(--muted)}

/* RESPONSIVE TWEAKS */
@media (max-width:992px){
  .hero{padding:68px 0 120px}
  .hero .grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
  .actions .btn{width:100%;max-width:360px}
  .testi-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .testi-grid{grid-template-columns:1fr}
  .hero{padding:56px 0 96px}
  .p-card{min-width:260px;padding:18px}
  .product-carousel::before,.product-carousel::after{width:40px}
  .stats{grid-template-columns:1fr;gap:22px}
  .stat-number{font-size:28px}
}

/* --------------------------------------------
 * FOOTER
 * ------------------------------------------ */
.site-footer{background:#0b1220;color:#cbd5e1;padding:48px 0 18px;margin-top:60px}
.dark .site-footer{background:#0b1220}
.site-footer a{color:#93c5fd}
.footer-grid{
  display:grid;gap:28px;
  grid-template-columns:2fr 1.3fr 1.3fr 1.4fr;
}
@media (max-width:920px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-brand img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:#fff;padding:4px}
.foot-title{margin-bottom:10px;font-weight:700;color:#e2e8f0}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin:8px 0}
.foot-list a{display:inline-flex;gap:8px;align-items:center}

.foot-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.badge-card{
  display:flex;gap:10px;align-items:center;min-width:180px;
  padding:10px 12px;border-radius:12px;background:#0f1629;border:1px solid #1f2937;
}
.badge-card img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.badge-card span{font-weight:600;color:#e2e8f0;font-size:14px}

.foot-social{display:flex;gap:12px;margin-top:14px}
.foot-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#0f1629;border:1px solid #1f2937}
.foot-social svg{width:18px;height:18px;color:#e5e7eb}

.store-row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.store-row img{height:40px;display:block}

.foot-bottom{margin-top:26px;padding-top:14px;border-top:1px solid #1f2937;text-align:center;font-size:14px}

/* ===============================================
 FIX TAMPILAN DARK MODE — TEKS & BACKGROUND
 =============================================== */
.dark body,
.dark section,
.dark .p-card,
.dark .feature,
.dark .testi,
.dark .search-box,
.dark .dropdown-menu {
  background: var(--soft);
  color: var(--text);
  border-color: var(--border);
}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark span,
.dark li,
.dark a { color: var(--text); }
.dark a:hover { color: var(--blue); }
.dark .p-card h3,
.dark .feature-icon,
.dark .testi-name,
.dark .stat-number { color: var(--blue); }
.dark .p-card p,
.dark .feature p,
.dark .testi p,
.dark .stat-label { color: var(--muted); }
.dark .p-card,
.dark .feature,
.dark .testi { background: var(--soft); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.dark .search-input { color: var(--text); }
.dark .result-item:hover { background: rgba(255,255,255,.05); }
.dark .btn.ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.dark .btn.ghost:hover { background: rgba(96,165,250,.1); }
.dark .site-footer { color: #e2e8f0; }
.dark .site-footer a { color: #93c5fd; }
.dark .site-footer .foot-title { color: #f1f5f9; }

/* =======================================================
   TAMBAHAN UNTUK TAMPILAN PRODUK + BANNER PROFESIONAL
   ======================================================= */
.promo-banner { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff; padding:60px 0; position:relative; overflow:hidden; }
.promo-content { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.promo-text h2 { font-size: clamp(24px, 3vw, 36px); font-weight:700; margin-bottom:10px; }
.promo-text p { font-size:16px; opacity:.95; margin-bottom:20px; }
.promo-image img { max-width:400px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.dark .promo-banner { background: linear-gradient(135deg, #1e293b, #0f172a); }

/* Grid Produk */
.product-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; }
.product-card { background:var(--bg); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); text-align:center; padding:22px 18px; transition:all .25s ease; }
.product-card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: 0 10px 25px rgba(30,122,223,0.2); }
.product-card img { width:100%; border-radius:12px; margin-bottom:14px; }
.product-card h3 { font-size:18px; color:var(--blue-dark); margin-bottom:6px; }
.product-card p { font-size:14px; color:var(--muted); margin-bottom:16px; }
.dark .product-card { background:var(--soft); border-color:var(--border); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.dark .product-card h3 { color:var(--blue); }
.dark .product-card p { color:var(--muted); }

/* ==== Icon button global (desktop & mobile) ==== */
.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f7fafc;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.icon-btn:hover { background: #eef6ff; }
.icon-btn:active { transform: scale(.97); }
.icon-btn svg { width: 18px; height: 18px; }

.dark .icon-btn {
  background: #0b1324;
  color: #e5e7eb;
  border-color: var(--border);
}
.dark .icon-btn:hover { background: #0f172a; }

/* sedikit jarak saat di bar desktop */
header .nav .icon-btn { margin-left: 12px; }
/* =========================================
   Anim Pack: fall, slide, twinkle (drop-in)
   ========================================= */

/* Base reveal (kompatibel dengan yang sudah ada) */
.reveal { opacity:0; transform: translateY(10px); transition: .6s cubic-bezier(.22,1,.36,1) }
.reveal.in-view { opacity:1; transform:none }

/* Variasi anim via data-anim */
[data-anim="fall"]     { opacity:0; transform: translateY(-24px) rotate(-2deg); }
[data-anim="slide-l"]  { opacity:0; transform: translateX(-28px); }
[data-anim="slide-r"]  { opacity:0; transform: translateX( 28px); }
[data-anim="twinkle"]  { position:relative; }

/* Saat masuk viewport */
.in-view[data-anim="fall"]    { animation: rr-fall   .7s cubic-bezier(.22,1,.36,1) both; }
.in-view[data-anim="slide-l"] { animation: rr-slideL .65s cubic-bezier(.22,1,.36,1) both; }
.in-view[data-anim="slide-r"] { animation: rr-slideR .65s cubic-bezier(.22,1,.36,1) both; }
.in-view[data-anim="twinkle"]::after { animation-play-state: running; }

/* Keyframes */
@keyframes rr-fall {
  0%   { opacity:0; transform: translateY(-26px) rotate(-6deg) scale(.98) }
  60%  { opacity:1; transform: translateY(4px)  rotate( 2deg)  scale(1.005) }
  100% { opacity:1; transform: translateY(0)    rotate( 0)     scale(1) }
}
@keyframes rr-slideL {
  0%   { opacity:0; transform: translateX(-32px) }
  100% { opacity:1; transform: none }
}
@keyframes rr-slideR {
  0%   { opacity:0; transform: translateX(32px) }
  100% { opacity:1; transform: none }
}

/* Twinkle/kelap-kelip halus (pseudo elemen) */
[data-anim="twinkle"]::after {
  content:""; position:absolute; inset:auto auto -8px -8px; width:10px; height:10px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 70%),
              radial-gradient(circle, rgba(255,215,0,.9) 0%, rgba(255,215,0,0) 70%);
  filter: blur(0.2px);
  opacity:.0;
  transform: translate3d(0,0,0);
  animation: rr-twinkle 2.2s ease-in-out infinite;
  animation-play-state: paused;  /* aktif saat .in-view */
  pointer-events:none;
}
@keyframes rr-twinkle {
  0%,100% { opacity:0; transform: translateY(0) scale(.9) }
  10%     { opacity:.9; transform: translate(-6px,-6px) scale(1.2) }
  20%     { opacity:.2; transform: translate(4px,-2px)  scale(1) }
  40%     { opacity:.8; transform: translate(-3px,-8px) scale(1.25) }
  60%     { opacity:.3; transform: translate(2px,-3px)  scale(1) }
  80%     { opacity:.75;transform: translate(-5px,-10px) scale(1.3) }
}

/* Stagger helper: parent dengan .stagger akan mengurutkan delay anak2 .reveal */
.stagger > .reveal { transition-delay: var(--stagger, 0ms); }

/* Optional: bounce kecil saat selesai (tambahkan .tiny-bounce di elemen) */
.tiny-bounce.in-view { animation: rr-bounce .5s ease-out both; }
@keyframes rr-bounce { 0%{transform:scale(.98)} 60%{transform:scale(1.02)} 100%{transform:none} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-anim], .reveal { transition: none !important; animation: none !important; opacity:1 !important; transform: none !important; }
}

/* Pusatkan teks di promo-referral */
.promo-referral .promo-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* pastikan jarak antar elemen rapi */
.promo-referral .promo-text h2 {
  margin: 8px 0;
}

/* agar gambar dan teks rapi di tampilan kecil */
@media (max-width: 768px) {
  .promo-flex {
    flex-direction: column;
    text-align: center;
  }
  .promo-img {
    margin-bottom: 20px;
  }
}

/* =========================================
   BLUE HALF-CIRCLE (Top + Bottom)
   ========================================= */
:root {
  --wave-c1: #1E7ADF;   /* biru utama */
  --wave-c2: #3A9FFF;   /* biru muda cerah */
  --wave-bg: #F5F9FF;   /* latar belakang lembut */
}

/* bungkus setiap section */
.section-wrap {
  position: relative;
  background: var(--wave-bg);
  overflow: clip;
}

/* half-circle top dan bottom */
.wave-top,
.wave-bottom {
  position: relative;
  width: 100%;
  line-height: 0;
}

.wave-top svg,
.wave-bottom svg {
  display: block;
  width: 100%;
  height: 100px;
  animation: waveFlow 8s ease-in-out infinite alternate;
  transform-origin: center;
  opacity: 0.97;
}

/* variasi ukuran */
.wave-sm svg { height: 60px; }
.wave-lg svg { height: 140px; }

/* animasi lembut */
@keyframes waveFlow {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* background section di dark mode tetap biru */
.dark .section-wrap {
  background: linear-gradient(180deg, #0D2F80 0%, #0E49B5 100%);
}

/* warna sabit di dark mode */
.dark .wave-top path,
.dark .wave-bottom path {
  fill: url(#gradBlue);
}

/* =========================================
   SECTION PERSONAS (Dirancang untuk Siapa Saja)
   ========================================= */
.section-dotted {
  position: relative;
  background: linear-gradient(180deg, #E8F2FF 0%, #ffffff 100%); /* biru lembut gradasi */
  padding: 80px 0;
  z-index: 1;
}

/* Jika mau sama persis dengan pembatas gelombang biru */
.section-dotted.blue {
  background: linear-gradient(180deg, #1E7ADF 0%, #1862B8 100%);
  color: #fff;
}

.section-dotted .section-header h2,
.section-dotted .section-header p {
  color: inherit;
}
/* ===== Alternating section themes (auto) ===== */
:root{
  --sec-blue-start:#1E7ADF;
  --sec-blue-end:#1862B8;
  --sec-soft-0:#F4F9FF;
  --sec-soft-1:#FFFFFF;
}

/* default */
.section{background:var(--bg);}

/* putih/soft (gradasi sangat halus) */
.section.is-soft{
  background:linear-gradient(180deg,var(--sec-soft-0) 0%, var(--sec-soft-1) 100%);
}

/* biru penuh (ikuti palet Ragil) + teks dibalik */
.section.is-blue{
  background:linear-gradient(180deg,var(--sec-blue-start) 0%, var(--sec-blue-end) 100%);
  color:#fff;
}
.section.is-blue .section-header h2,
.section.is-blue .section-header p,
.section.is-blue h1,.section.is-blue h2,.section.is-blue h3,
.section.is-blue p{color:#fff;}
.section.is-blue a{color:#fff;}
.section.is-blue .feature,
.section.is-blue .product-card,
.section.is-blue .testi{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}

/* opt-out: jika ada bagian yang TIDAK mau diotak-atik */
.section.no-auto{background:unset !important;}