/* ═══════════════════════════════════════════════════════
   enhance.css — Visual upgrade layer
   Tidak mengubah struktur, hanya mempercantik tampilan
   Syne (heading) + DM Sans (body) dipakai global
═══════════════════════════════════════════════════════ */

/* ── Font override global ── */
body,
input, textarea, select, button {
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4,
.brand, .sf-brand,
.sf-hero h1,
.sf-section-title h2,
.sf-why h2,
.sf-product-card h3,
.sf-cs-card b,
.sf-bottom-nav a,
.btn,
.sf-order-btn,
.user-primary-btn,
.ram-title,
.price,
.checkout-price,
.qris-amount-value,
.invoice-product-name,
.admin-head h1,
.sidebar h2 {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif;
}

/* ── Star canvas + aurora background ── */
#vfx-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vfx-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.vfx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: vfx-drift 16s ease-in-out infinite alternate;
}
.vfx-orb-a {
  width: 560px; height: 560px;
  top: -180px; left: -130px;
  background: radial-gradient(circle, rgba(255,107,0,.19), transparent 70%);
  animation-duration: 20s;
}
.vfx-orb-b {
  width: 480px; height: 480px;
  top: -60px; right: -100px;
  background: radial-gradient(circle, rgba(0,212,255,.14), transparent 70%);
  animation-duration: 14s; animation-delay: -5s;
}
.vfx-orb-c {
  width: 420px; height: 420px;
  bottom: 18%; left: 28%;
  background: radial-gradient(circle, rgba(156,61,255,.13), transparent 70%);
  animation-duration: 22s; animation-delay: -10s;
}
@keyframes vfx-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(38px, 28px) scale(1.07); }
}

/* ── Halaman non-storefront tetap z-index normal ── */
.storefront-body .store-shell,
.user-dashboard-page .user-dash-shell,
body > .container,
body > .admin-layout,
body > .center-screen {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   LOGO — spinning border ring
═══════════════════════════════════════════ */
.sf-logo {
  position: relative;
  overflow: visible !important;
}
.sf-logo::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    #ff4500 0%, #ffb000 25%, #ff4f8b 50%, #9b5cff 75%, #ff4500 100%
  );
  z-index: -1;
  animation: logo-ring-spin 3.5s linear infinite;
  opacity: .75;
  clip-path: none !important;
}
@keyframes logo-ring-spin {
  to { transform: rotate(360deg); }
}

/* ── sf-brand logo sama di user-dashboard ── */
.user-brand .sf-logo,
.sf-brand .sf-logo {
  position: relative;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════
   HERO — shimmer sweep + micro improvements
═══════════════════════════════════════════ */
.sf-hero {
  overflow: hidden;
}
.sf-hero::before {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 38%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: hero-sweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes hero-sweep {
  0%   { left: -70%; opacity: .5; }
  50%  { left: 125%; opacity: 1; }
  100% { left: 125%; opacity: .5; }
}

/* Pill pulse dot */
.sf-pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 0 0 rgba(0,230,118,.6);
  animation: sf-pulse 1.6s ease-out infinite;
}
@keyframes sf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,230,118,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(0,230,118,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); }
}

/* Server rack blink */
.server-stack span {
  animation: rack-glow 2.8s ease-in-out infinite;
}
.server-stack span:nth-child(2) { animation-delay: .5s; }
.server-stack span:nth-child(3) { animation-delay: 1s; }
@keyframes rack-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,170,255,.22), inset 0 0 16px rgba(255,150,0,.10); }
  50%       { box-shadow: 0 0 40px rgba(0,212,255,.50), inset 0 0 24px rgba(255,200,0,.26); }
}

/* Lightning flicker */
.sf-lightning-bolt {
  animation: sf-lightning 3.5s ease-in-out infinite;
}
@keyframes sf-lightning {
  0%, 88%, 100% { opacity: .5; filter: drop-shadow(0 0 18px rgba(255,200,0,.5)); }
  90% { opacity: 1; filter: drop-shadow(0 0 44px rgba(255,235,0,1)); }
  92% { opacity: .35; }
  94% { opacity: .95; filter: drop-shadow(0 0 38px rgba(255,220,0,.9)); }
}

/* Spark float */
.sf-spark {
  animation: spark-float 2.2s ease-in-out infinite;
}
.sf-spark.spark-2 { animation-delay: .6s; }
.sf-spark.spark-3 { animation-delay: 1.2s; }
@keyframes spark-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: .8; }
  50%       { transform: translateY(-14px) scale(1.2); opacity: 1; }
}

/* ═══════════════════════════════════════════
   LIVE STATUS STRIP — ticker upgrade
═══════════════════════════════════════════ */
.sf-live-strip {
  background: rgba(0,230,118,.06) !important;
  border: 1px solid rgba(0,230,118,.15) !important;
  border-radius: 999px !important;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 !important;
  height: 44px;
}
.sf-live-strip span {
  display: inline-block;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  border-right: 1px solid rgba(255,255,255,.08);
  height: 100%;
  line-height: 44px;
  flex-shrink: 0;
  transition: color .2s;
}
.sf-live-strip span:first-child {
  background: rgba(0,230,118,.13);
  color: #00e676;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .07em;
  padding: 0 18px;
}
.sf-live-strip span:hover { color: #fff; }

/* ═══════════════════════════════════════════
   CS CARDS — hover shimmer + lift
═══════════════════════════════════════════ */
.sf-cs-card {
  position: relative;
  overflow: hidden;
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s !important;
}
.sf-cs-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .48s ease;
  pointer-events: none;
}
.sf-cs-card:hover {
  transform: translateY(-4px) scale(1.015) !important;
}
.sf-cs-card:hover::after {
  transform: translateX(120%);
}
.sf-cs-card.whatsapp:hover {
  box-shadow: 0 24px 72px rgba(0,210,50,.3) !important;
}
.sf-cs-card.telegram:hover {
  box-shadow: 0 24px 72px rgba(0,150,255,.3) !important;
}

/* ═══════════════════════════════════════════
   PRODUCT CARDS — animated glow border + price shimmer
═══════════════════════════════════════════ */
.sf-product-card {
  position: relative;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s !important;
  overflow: hidden;
}

/* Hover lift — JS handles 3D tilt, CSS handles base */
.sf-product-card:hover {
  box-shadow: 0 28px 90px rgba(0,0,0,.44) !important;
}

/* Shimmer sweep on card */
.sf-product-card::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(108deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-12deg);
  opacity: 0;
  transition: left .6s ease, opacity .3s;
  pointer-events: none;
  z-index: 2;
}
.sf-product-card:hover::after {
  left: 130%;
  opacity: 1;
}

/* Animated glow corner — per color */
.sf-product-card.purple::before {
  content: '';
  position: absolute;
  top: -40px; left: -24px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,64,255,.36), transparent 72%);
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s;
}
.sf-product-card.blue::before {
  content: '';
  position: absolute;
  top: -40px; left: -24px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,185,255,.30), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.sf-product-card.orange::before {
  content: '';
  position: absolute;
  top: -40px; left: -24px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,130,0,.30), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Price shimmer text */
.sf-product-card strong {
  position: relative;
  display: inline-block;
  background-size: 200% auto;
  animation: price-shine 3s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
}
.sf-product-card.purple strong {
  background-image: linear-gradient(90deg, #d070ff 0%, #fff 38%, #d070ff 80%);
  color: transparent;
}
.sf-product-card.blue strong {
  background-image: linear-gradient(90deg, #30ccff 0%, #fff 38%, #30ccff 80%);
  color: transparent;
}
.sf-product-card.orange strong {
  background-image: linear-gradient(90deg, #ffaa40 0%, #fff 38%, #ffaa40 80%);
  color: transparent;
}
@keyframes price-shine {
  to { background-position: 200% center; }
}

/* ── Order button shimmer ── */
.sf-order-btn {
  position: relative;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s !important;
}
.sf-order-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-15deg);
  opacity: 0;
  transition: left .45s ease, opacity .2s;
  pointer-events: none;
}
.sf-order-btn:hover {
  transform: scale(1.04) translateY(-1px) !important;
  filter: brightness(1.1);
}
.sf-order-btn:hover::after {
  left: 130%;
  opacity: 1;
}
.sf-order-btn:active {
  transform: scale(.97) !important;
}

/* ── Mini features chip ── */
.sf-mini-features span {
  transition: background .2s, border-color .2s;
}
.sf-mini-features span:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* ═══════════════════════════════════════════
   WHY GRID — hover lift
═══════════════════════════════════════════ */
.sf-why-grid div {
  transition: background .22s, transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s !important;
}
.sf-why-grid div:hover {
  background: rgba(255,255,255,.07) !important;
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18) !important;
}

/* ═══════════════════════════════════════════
   BOTTOM NAV — active glow + icon bounce
═══════════════════════════════════════════ */
.sf-bottom-nav a {
  transition: color .2s, background .2s !important;
}
.sf-bottom-nav a span {
  display: inline-block;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sf-bottom-nav a:hover span {
  transform: translateY(-3px) scale(1.18);
}
.sf-bottom-nav a.active {
  box-shadow: inset 0 0 0 1px rgba(255,181,37,.3), 0 0 26px rgba(255,145,0,.18) !important;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL — semua section masuk smooth
═══════════════════════════════════════════ */
.vfx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.vfx-reveal.vfx-in {
  opacity: 1;
  transform: none;
}
.vfx-delay-1 { transition-delay: .08s; }
.vfx-delay-2 { transition-delay: .16s; }
.vfx-delay-3 { transition-delay: .24s; }

/* ═══════════════════════════════════════════
   CUSTOM CURSOR — desktop only
═══════════════════════════════════════════ */
@media (pointer: fine) {
  body { cursor: none; }
  body * { cursor: none; }
  body a, body button, body [role="button"], body input, body select, body textarea {
    cursor: none;
  }
}
#vfx-cursor-dot, #vfx-cursor-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  top: 0; left: 0;
}
#vfx-cursor-dot {
  width: 7px; height: 7px;
  background: #ffb800;
  box-shadow: 0 0 10px #ffb800, 0 0 22px rgba(255,184,0,.5);
  transition: width .15s, height .15s, background .2s;
}
#vfx-cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255,184,0,.45);
  transition: width .22s, height .22s, border-color .22s;
}
.vfx-cursor-grow #vfx-cursor-dot { width: 12px; height: 12px; background: #fff; }
.vfx-cursor-grow #vfx-cursor-ring { width: 48px; height: 48px; border-color: rgba(255,184,0,.8); }
@media (pointer: coarse) {
  #vfx-cursor-dot, #vfx-cursor-ring { display: none; }
}

/* ═══════════════════════════════════════════
   AUTH LOGIN — panel kiri + form upgrade
═══════════════════════════════════════════ */

/* Pulse dot di login */
.live-indicator {
  animation: sf-pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(0,230,118,.6);
}

/* Input focus glow ── login page pake class lain */
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,184,0,.55) !important;
  box-shadow: 0 0 0 4px rgba(255,184,0,.10) !important;
  transition: border-color .2s, box-shadow .2s;
}

/* Btn global shimmer ── .btn */
.btn {
  position: relative;
  overflow: hidden;
  transition: filter .18s, transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-15deg);
  opacity: 0;
  transition: left .42s ease, opacity .2s;
}
.btn:hover { filter: brightness(1.1); transform: scale(1.025) translateY(-1px); }
.btn:hover::after { left: 130%; opacity: 1; }
.btn:active { transform: scale(.97) !important; }

/* Card hover lift global */
.card {
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s !important;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 80px rgba(0,0,0,.36) !important;
}

/* RAM option hover bounce */
.ram-option {
  transition: border-color .18s, background .18s, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .18s !important;
}
.ram-option:hover, .ram-option.selected {
  transform: translateY(-2px) !important;
}

/* Sidebar link hover */
.sidebar a {
  transition: background .18s, color .18s, transform .18s !important;
}
.sidebar a:hover {
  transform: translateX(3px) !important;
}

/* Stat card */
.stat {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .2s !important;
}
.stat:hover {
  transform: translateY(-2px);
  background: rgba(59,130,246,.12) !important;
}

/* Table row hover */
tr:hover td {
  background: rgba(255,255,255,.025) !important;
}

/* Success icon pop */
.success-icon {
  animation: success-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes success-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Badge glow */
.badge.paid, .badge.processed {
  box-shadow: 0 0 14px rgba(34,197,94,.2) !important;
}
.badge.pending {
  box-shadow: 0 0 14px rgba(245,158,11,.18) !important;
}

/* User avatar pulse */
.user-avatar-live {
  animation: avatar-glow 2.5s ease-in-out infinite alternate;
}
@keyframes avatar-glow {
  0%   { box-shadow: 0 0 20px rgba(255,140,0,.3), 0 8px 32px rgba(0,0,0,.3); }
  100% { box-shadow: 0 0 38px rgba(255,160,0,.5), 0 8px 32px rgba(0,0,0,.3); }
}

/* Live dot on dashboard */
.live-dot {
  animation: sf-pulse 1.6s ease-out infinite !important;
}

/* ── Letter spacing refinement ── */
.sf-hero h1 { letter-spacing: -.07em !important; }
.sf-product-card h3 { letter-spacing: -.04em !important; }
.sf-why h2, .sf-section-title h2 { letter-spacing: -.05em !important; }
.admin-head h1 { letter-spacing: -.05em !important; }

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Selection color ── */
::selection { background: rgba(255,184,0,.25); color: #fff; }

/* ═══════════════════════════════════════════
   MINI FEATURES — checkout / invoice polish
═══════════════════════════════════════════ */
.feature-list span {
  transition: background .18s, border-color .18s, transform .18s !important;
}
.feature-list span:hover {
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.3) !important;
  transform: translateX(3px);
}

/* ── Amount box glow ── */
.amount-box {
  animation: amount-pulse 2.8s ease-in-out infinite;
}
@keyframes amount-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  50%       { box-shadow: 0 0 28px rgba(59,130,246,.2); }
}

/* ── QRIS frame glow ── */
.qris-box, .qris-img-frame {
  animation: qris-glow 2.5s ease-in-out infinite alternate;
}
@keyframes qris-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow: 0 0 38px rgba(255,255,255,.1); }
}

/* ═══════════════════════════════════════════
   SMOOTH PERFORMANCE PATCH
   - Semua elemen animasi pakai will-change + contain
   - Aurora orbs dikecilkan blur (90px → 60px)
   - Animasi infinite dikurangi intensitasnya
   - Tambah transform: translateZ(0) untuk GPU compositing
═══════════════════════════════════════════ */

/* GPU promotion untuk elemen background */
#vfx-canvas,
.vfx-aurora,
.vfx-orb,
.sf-bg-live,
.orb {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Aurora orb — blur dikecilkan signifikan */
.vfx-orb {
  filter: blur(60px) !important; /* was 90px */
}

/* Cursor GPU */
#vfx-cursor-dot,
#vfx-cursor-ring {
  will-change: transform;
  top: 0 !important;
  left: 0 !important;
  position: fixed;
}

/* Card hover — GPU layer */
.sf-product-card,
.sf-cs-card,
.card,
.ram-option,
.sf-why-grid div {
  will-change: transform;
  transform: translateZ(0);
}

/* Button shimmer — contain paint agar tidak repaint seluruh halaman */
.sf-order-btn,
.btn {
  contain: layout paint;
}

/* Animasi price-shine: gunakan transform bukan background-position untuk GPU */
.sf-product-card strong {
  will-change: background-position;
}

/* Kurangi jumlah animasi infinite yang berjalan bersamaan */
/* Glow animasi dikurangi intensitas */
@keyframes avatar-glow {
  0%   { box-shadow: 0 0 16px rgba(255,140,0,.2), 0 8px 24px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 28px rgba(255,160,0,.35), 0 8px 24px rgba(0,0,0,.25); }
}
@keyframes rack-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(0,170,255,.16), inset 0 0 10px rgba(255,150,0,.08); }
  50%       { box-shadow: 0 0 28px rgba(0,212,255,.38), inset 0 0 18px rgba(255,200,0,.18); }
}
@keyframes qris-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow: 0 0 22px rgba(255,255,255,.07); }
}
@keyframes amount-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  50%       { box-shadow: 0 0 16px rgba(59,130,246,.14); }
}

/* Logo ring lebih ringan */
.sf-logo::after {
  opacity: .6 !important;
}

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
}

/* Font display swap agar tidak FOUT */
@font-face {
  font-display: swap;
}

/* Transition global lebih singkat dan easing natural */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reduce motion — hormati preferensi aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #vfx-canvas,
  .vfx-aurora,
  .vfx-orb {
    display: none !important;
  }
}

/* ── sf-bg-live orb GPU compositing ── */
.sf-bg-live .orb {
  will-change: transform;
  transform: translateZ(0);
  filter: blur(48px) !important; /* pastikan tidak di-override jadi lebih berat */
}

/* grid-glow pakai GPU */
.sf-bg-live .grid-glow {
  will-change: background-position;
  transform: translateZ(0);
}

/* dash-live-orb */
.dash-live-orb {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Pastikan semua animasi infinite punya contain:strict di wrapper */
.sf-bg-live {
  contain: strict;
}
.vfx-aurora {
  contain: strict;
}

/* ═══════════════════════════════════════════
   CS FLOATING WIDGET
═══════════════════════════════════════════ */

/* FAB Button */
.cs-fab {
  position: fixed;
  bottom: 90px; /* di atas bottom-nav */
  right: 18px;
  z-index: 9998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff6b00, #ffaa00);
  box-shadow: 0 8px 28px rgba(255, 107, 0, 0.45), 0 2px 8px rgba(0,0,0,.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  will-change: transform;
}
.cs-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 40px rgba(255, 107, 0, 0.55), 0 2px 10px rgba(0,0,0,.3);
}
.cs-fab:active {
  transform: scale(.94);
}

/* Notif pulse ring */
.cs-fab-notif {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--bg, #08111f);
  animation: cs-notif-pulse 2s ease-out infinite;
}
@keyframes cs-notif-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* FAB icon toggle */
.cs-fab-icon-default,
.cs-fab-icon-close {
  position: absolute;
  transition: opacity .18s, transform .22s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-fab-icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.cs-fab.open .cs-fab-icon-default { opacity: 0; transform: rotate(90deg) scale(.5); }
.cs-fab.open .cs-fab-icon-close   { opacity: 1; transform: rotate(0deg) scale(1); }
.cs-fab.open .cs-fab-notif        { display: none; }

/* Popup container */
.cs-popup {
  position: fixed !important;
  bottom: 160px !important;
  right: 18px !important;
  top: auto !important;
  left: auto !important;
  z-index: 9997 !important;
  width: 320px;
  max-width: calc(100vw - 36px);
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
  display: none;
  flex-direction: column;
  transform-origin: bottom right;
}
.cs-popup.cs-open {
  display: flex !important;
  animation: cs-popup-in .22s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cs-popup-in {
  from { opacity: 0; transform: translateY(10px) scale(.93); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Popup header */
.cs-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, #ff6b00, #ff9f00);
  position: relative;
}
.cs-popup-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cs-popup-title {
  flex: 1;
  line-height: 1.3;
}
.cs-popup-title b  { display: block; font-size: 14px; color: #fff; }
.cs-popup-title small { font-size: 11px; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 5px; }
.cs-online-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00e676;
  animation: cs-notif-pulse 1.8s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(0,230,118,.6);
}
@keyframes cs-online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,230,118,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(0,230,118,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); }
}
.cs-close-btn {
  border: none;
  background: rgba(0,0,0,.2);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.cs-close-btn:hover { background: rgba(0,0,0,.35); }

/* Panels */
.cs-panel {
  display: none !important;
  flex-direction: column;
}
.cs-panel.cs-panel-active {
  display: flex !important;
}

/* Menu panel */
.cs-menu-greeting {
  padding: 18px 16px 10px;
  text-align: center;
}
.cs-wave {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
  animation: cs-wave-anim .8s ease-in-out infinite alternate;
}
@keyframes cs-wave-anim {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(12deg); }
}
.cs-menu-greeting p {
  margin: 0;
  color: #e5e7eb;
  font-size: 14px;
}

/* Menu items */
.cs-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: #e5e7eb;
  border: none;
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .15s;
  font-family: inherit;
}
.cs-menu-item:hover  { background: rgba(255,255,255,.09); }
.cs-menu-item:active { background: rgba(255,255,255,.13); }
.cs-menu-item:last-child { border-radius: 0 0 24px 24px; }

.cs-item-icon {
  width: 40px; height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.wa-icon  { background: #25d366; }
.tg-icon  { background: #229ed9; }
.ai-icon  { background: linear-gradient(135deg, #ff6b00, #ff9f00); }

.cs-menu-item span:nth-child(2) { flex: 1; }
.cs-menu-item b     { display: block; font-size: 13px; font-weight: 700; }
.cs-menu-item small { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.cs-arrow { font-style: normal; font-size: 20px; color: #475569; }

/* ── AI Chat Panel ── */
.cs-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  min-height: 160px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.cs-msg { display: flex; }
.cs-msg.user { justify-content: flex-end; }
.cs-msg-bubble {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.cs-msg.bot  .cs-msg-bubble { background: rgba(255,255,255,.08); color: #e2e8f0; border-bottom-left-radius: 4px; }
.cs-msg.user .cs-msg-bubble { background: linear-gradient(135deg,#ff6b00,#ff9f00); color: #fff; border-bottom-right-radius: 4px; }
.cs-msg.typing .cs-msg-bubble { opacity: .65; }

/* Typing indicator */
.cs-typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.cs-typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: cs-dot-bounce .9s ease-in-out infinite;
}
.cs-typing-dots span:nth-child(2) { animation-delay: .15s; }
.cs-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes cs-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-6px); }
}

/* AI input row */
.cs-ai-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.cs-back-btn {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #94a3b8;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  padding-bottom: 2px;
}
.cs-back-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.cs-ai-input {
  flex: 1;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
  border-radius: 20px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  outline: none;
  min-height: unset;
}
.cs-ai-input:focus {
  border-color: rgba(255,107,0,.5) !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1) !important;
}
.cs-send-btn {
  width: 36px; height: 36px;
  border: none;
  background: linear-gradient(135deg, #ff6b00, #ff9f00);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, filter .15s;
}
.cs-send-btn:hover  { filter: brightness(1.15); transform: scale(1.07); }
.cs-send-btn:active { transform: scale(.93); }

/* Mobile: FAB lebih dekat ke bottom nav */
@media (max-width: 640px) {
  .cs-fab {
    bottom: 80px;
    right: 14px;
    width: 52px;
    height: 52px;
  }
  .cs-popup {
    bottom: 148px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }
}

/* Backdrop overlay saat popup terbuka */
.cs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9996;
  background: rgba(0,0,0,.35);
  display: none;
}
.cs-backdrop.cs-open {
  display: block;
}

/* ===== DARK LITE THEME OVERRIDE START =====
   Black/dark visual layer + efek berat dimatikan.
===== */
:root {
  --bg: #05060a;
  --bg2: #090d14;
  --card: rgba(10, 14, 23, 0.94);
  --border: rgba(255, 255, 255, 0.10);
  --text: #f4f7fb;
  --muted: #9aa6b8;
  --primary: #f59e0b;
  --primary2: #f97316;
}
html,
body,
.storefront-body,
.po-page,
.page-shell,
.user-dashboard-page,
.admin-page,
.auth-page,
body.center-screen {
  background: #05060a !important;
  background-image: none !important;
  color: #f4f7fb !important;
}
body::before,
.storefront-body::before,
.sf-bg-live,
.sf-bg-live .orb,
.sf-bg-live .grid-glow,
.vfx-aurora,
.vfx-orb,
#vfx-canvas,
#vfx-cursor-dot,
#vfx-cursor-ring {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.store-shell,
.container,
.admin-main,
.adm-main,
.user-dash-shell {
  position: relative !important;
  z-index: 1 !important;
}
.sf-header,
.sf-nav-pop,
.sf-bottom-nav,
.sidebar,
.adm-sidebar,
.user-topbar,
.user-bottom-nav {
  background: rgba(7, 10, 18, .94) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sf-hero,
.hero,
.user-hero-live,
.auth-hero,
.adm-top-card {
  background: linear-gradient(135deg, #080b12 0%, #0c111d 60%, #111827 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.34) !important;
}
.sf-hero::before,
.sf-hero::after,
.sf-hero-super::before,
.sf-hero-super::after,
.auth-hero::before,
.user-hero-live::before {
  opacity: .10 !important;
  animation: none !important;
}
.sf-lightning-art,
.sf-server-art,
.sf-neon-platform,
.sf-lightning-bolt,
.sf-spark,
.shield-art {
  filter: none !important;
  animation: none !important;
}
.sf-product-card,
.card,
.hero-card,
.checkout-card,
.invoice-wrap,
.invoice-wrap-v2,
.success-card,
.form-card,
.table-wrap,
.user-card,
.dash-progress-card,
.user-orders-section,
.panel-order-card,
.upload-script-card,
.adm-card,
.adm-stat,
.auth-card,
.po-card,
.po-box,
.ram-option {
  background: rgba(10, 14, 23, .94) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sf-product-card::before,
.sf-product-card::after,
.sf-cs-card::after,
.sf-logo::after,
.adm-stat-glow,
.vfx-reveal::before {
  animation: none !important;
}
.sf-product-card.purple,
.sf-product-card.blue,
.sf-product-card.orange {
  border-color: rgba(255,255,255,.12) !important;
}
.sf-product-card.purple::before,
.sf-product-card.blue::before,
.sf-product-card.orange::before {
  opacity: .10 !important;
  filter: none !important;
}
.sf-product-card:hover,
.sf-cs-card:hover,
.ram-option:hover,
.sf-why-grid div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.32) !important;
}
.sf-logo {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #090b10 !important;
}
.sf-pill,
.pill,
.sf-live-strip,
.sf-proof-row,
.sf-mini-features span,
.status-dot,
.badge,
.amount-box,
.alert.info,
.info-list div,
.detail-row {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
.sf-live-strip span:first-child {
  background: rgba(34,197,94,.10) !important;
}
.sf-order-btn,
.btn,
.user-primary-btn,
.adm-btn.primary,
.po-submit,
.cs-send-btn {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #090b10 !important;
  box-shadow: 0 10px 26px rgba(249,115,22,.18) !important;
}
.btn-ghost,
.adm-btn.ghost,
.mini-btn,
.mini-link,
.sf-nav-pop a,
.sidebar a,
.adm-nav a,
.user-nav a {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.10) !important;
}
input,
textarea,
select,
.po-field,
.auth-input,
.cs-ai-input {
  background: rgba(4, 7, 13, .90) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus,
.po-field:focus,
.auth-input:focus,
.cs-ai-input:focus {
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.10) !important;
}
select option {
  background: #090d14 !important;
  color: #f8fafc !important;
}
table,
th,
td {
  background-color: transparent !important;
}
tbody tr:hover td {
  background: rgba(255,255,255,.035) !important;
}
.qris-box {
  background: #ffffff !important;
}
.sf-pulse-dot,
.server-stack span,
.cs-typing-dots span {
  animation: none !important;
}
.vfx-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.vfx-in {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}
/* ===== DARK LITE THEME OVERRIDE END ===== */


/* ===== DARK PREMIUM CYAN THEME OVERRIDE START =====
   Versi preview: hitam navy + card gelap + aksen biru/cyan.
   Tetap ringan: tidak menyalakan canvas/aurora/cursor/tilt berat.
===== */
:root {
  --bg: #050713;
  --bg2: #07111f;
  --card: rgba(10, 18, 32, 0.94);
  --card2: rgba(15, 23, 42, 0.96);
  --border: rgba(148, 163, 184, 0.16);
  --text: #f8fafc;
  --muted: #97a6ba;
  --primary: #38bdf8;
  --primary2: #2563eb;
  --accent: #22d3ee;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}
html,
body,
.page-shell,
.storefront-body,
.user-dashboard-page,
.orders-page,
.invoice-page,
.success-page,
.po-page {
  background: #050713 !important;
  color: #f8fafc !important;
}
body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .20), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(34, 211, 238, .11), transparent 30%),
    linear-gradient(180deg, #050713 0%, #07101d 48%, #050713 100%) !important;
}
body::before,
.storefront-body::before,
.sf-bg-live,
.sf-bg-live .orb,
.sf-bg-live .grid-glow,
.vfx-aurora,
.vfx-orb,
#vfx-canvas,
#vfx-cursor-dot,
#vfx-cursor-ring {
  display: none !important;
}
.store-shell,
.container,
.page-content,
.admin-main,
.adm-main,
.user-dash-shell {
  position: relative !important;
  z-index: 1 !important;
}
.sf-header,
.sf-nav-pop,
.sf-bottom-nav,
.topbar,
.sidebar,
.adm-sidebar,
.adm-topbar,
.adm-mobile-bar,
.user-dash-header,
.user-bottom-nav-live,
.user-topbar,
.user-bottom-nav {
  background: rgba(5, 10, 22, .90) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.sf-brand,
.topbar-brand,
.user-brand,
.adm-brand {
  color: #f8fafc !important;
}
.sf-logo,
.topbar-logo,
.user-avatar-live,
.user-avatar,
.adm-brand-mark,
.adm-login-mark,
.checkout-product-icon,
.sf-product-icon,
.cs-popup-avatar {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 34px rgba(37,99,235,.24) !important;
  clip-path: none !important;
}
.sf-hero,
.hero,
.user-hero-live,
.auth-hero,
.adm-top-card,
.success-header-card,
.checkout-product-info,
.checkout-form-card,
.po-header,
.po-card,
.invoice-wrap-v2,
.checkout-card,
.invoice-wrap,
.success-card {
  background:
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(8,15,29,.96) 58%, rgba(10,24,42,.96)) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.40) !important;
}
.sf-hero::before,
.sf-hero::after,
.sf-hero-super::before,
.sf-hero-super::after,
.auth-hero::before,
.user-hero-live::before,
.checkout-product-info::before,
.checkout-form-card::before,
.adm-top-card::before {
  opacity: .09 !important;
  animation: none !important;
}
.sf-hero h1,
.sf-hero h1 span,
.hero h1,
.section-head h2,
.sf-section-title h2,
.sf-why h2,
.checkout-product-name,
.checkout-price-value,
.po-title,
.user-section-title-live h2,
.user-hero-live h1,
.orders-page-title,
.invoice-product-name,
.success-title,
.adm-page-title,
.adm-login-title,
.card h1,
.card h2,
.card h3,
.sf-product-card h3 {
  color: #f8fafc !important;
  text-shadow: none !important;
}
.sf-hero h1 span,
.checkout-price-value,
.po-pkg-price,
.qris-amount-value,
.amount-box strong,
.price,
.stat b,
.adm-stat-value,
.user-stat-live b,
.sf-product-card strong {
  color: #7dd3fc !important;
}
.sf-hero p,
.sf-section-title p,
.sf-why small,
.sf-product-card p,
.checkout-product-desc,
.checkout-buyer-info,
.checkout-flow-info,
.form-hint,
.muted,
.small,
.adm-page-sub,
.adm-stat-label,
.user-order-meta,
.orders-page-sub,
.invoice-detail-key,
.detail-key,
.payment-note,
.po-sub,
.po-hint,
.cs-menu-greeting,
.cs-msg-bubble,
.cs-ai-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9fb0c5 !important;
}
.sf-product-card,
.card,
.hero-card,
.form-card,
.table-wrap,
.table-card,
.product-admin-card,
.user-profile-card,
.user-stat-live,
.user-action-card-live,
.user-order-live-card,
.user-empty-live,
.dash-progress-card,
.dash-money-card,
.user-orders-section,
.panel-order-card,
.upload-script-card,
.adm-card,
.adm-stat,
.auth-card,
.po-box,
.po-pkg-card,
.ram-option,
.detail-card,
.invoice-detail-card,
.provision-success-card,
.provision-fail-card,
.provision-info-card,
.empty-state,
.order-item,
.cs-panel,
.cs-menu-item,
.cs-msg-bubble,
.cs-ai-input-row {
  background: rgba(10, 18, 32, .92) !important;
  border: 1px solid rgba(148,163,184,.15) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sf-product-card.purple,
.sf-product-card.blue,
.sf-product-card.orange,
.script-item-card,
.script-list-card {
  background: linear-gradient(180deg, rgba(14,24,43,.96), rgba(7,13,25,.96)) !important;
  border-color: rgba(56,189,248,.18) !important;
}
.sf-product-card.purple::before,
.sf-product-card.blue::before,
.sf-product-card.orange::before,
.sf-product-card::before,
.sf-product-card::after,
.sf-cs-card::after,
.sf-logo::after,
.adm-stat-glow,
.vfx-reveal::before {
  opacity: .08 !important;
  filter: none !important;
  animation: none !important;
}
.sf-product-card:hover,
.cs-menu-item:hover,
.ram-option:hover,
.po-pkg-card:hover,
.user-action-card-live:hover,
.sf-why-grid div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56,189,248,.32) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 0 1px rgba(56,189,248,.06) !important;
}
.sf-pill,
.pill,
.sf-live-strip,
.sf-proof-row,
.sf-mini-features span,
.status-dot,
.badge,
.amount-box,
.qris-amount-box,
.alert.info,
.info-list div,
.detail-row,
.invoice-detail-row,
.checkout-flow-info,
.checkout-buyer-info,
.section-eyebrow,
.form-hint,
.po-step-num,
.po-step,
.script-meta-row span,
.dash-live-chip,
.user-pill,
.filter-pill,
.status-tag {
  background: rgba(56,189,248,.075) !important;
  border: 1px solid rgba(56,189,248,.16) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}
.sf-live-strip span:first-child,
.alert.good,
.badge.paid,
.badge.processed,
.paid-stat,
.green,
.good {
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.22) !important;
  color: #bbf7d0 !important;
}
.badge.pending,
.pending-stat,
.alert.warn {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.22) !important;
  color: #fde68a !important;
}
.badge.expired,
.badge.cancelled,
.alert.error,
.form-error,
.expired-stat,
.danger,
.error {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.22) !important;
  color: #fecaca !important;
}
.sf-order-btn,
.btn,
.submit-btn,
.user-primary-btn,
.adm-btn.primary,
.po-submit,
.cs-send-btn,
.action-btn.primary,
.download-link {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(37,99,235,.22) !important;
}
.sf-order-btn:hover,
.btn:hover,
.submit-btn:hover,
.user-primary-btn:hover,
.po-submit:hover,
.cs-send-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}
.btn-ghost,
.adm-btn.ghost,
.mini-btn,
.mini-link,
.sf-nav-pop a,
.sidebar a,
.adm-nav a,
.user-nav a,
.user-soft-btn,
.back-link,
.topbar-nav a,
.order-action-link,
.empty-cta,
.dash-filter-tabs a,
.filter-row a,
.cs-back-btn,
.cs-close-btn {
  background: rgba(148,163,184,.08) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}
.sf-nav-pop a:hover,
.sidebar a:hover,
.sidebar a.active,
.adm-nav a:hover,
.adm-nav a.active,
.user-nav a:hover,
.user-dashboard-active,
.topbar-nav a:hover,
.dash-filter-tabs a.active,
.filter-pill.active {
  background: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.24) !important;
  color: #ffffff !important;
}
input,
textarea,
select,
.form-field,
.po-field,
.adm-field,
.auth-input,
.cs-ai-input {
  background: rgba(4, 8, 18, .92) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus,
.form-field:focus,
.po-field:focus,
.adm-field:focus,
.auth-input:focus,
.cs-ai-input:focus {
  border-color: rgba(56,189,248,.62) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.10) !important;
}
select option {
  background: #07101d !important;
  color: #f8fafc !important;
}
.table-wrap,
.adm-table-wrap {
  overflow-x: auto !important;
}
table,
th,
td {
  background-color: transparent !important;
}
th {
  color: #cbd5e1 !important;
}
td {
  color: #e5edf7 !important;
}
tbody tr:hover td {
  background: rgba(56,189,248,.045) !important;
}
.qris-box,
.qris-img-frame,
.qris-container {
  background: #ffffff !important;
  color: #0f172a !important;
}
.qris-missing,
.qris-missing-v2 {
  color: #0f172a !important;
}
.sf-lightning-art,
.sf-server-art,
.sf-neon-platform,
.sf-lightning-bolt,
.sf-spark,
.shield-art,
.sf-pulse-dot,
.server-stack span,
.cs-typing-dots span,
.dash-live-orb,
.money-bars span,
.progress-ring {
  animation: none !important;
  filter: none !important;
}
.vfx-reveal,
.vfx-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.sf-card-line,
.po-step-sep,
.adm-nav-sep {
  background: rgba(148,163,184,.14) !important;
  border-color: rgba(148,163,184,.14) !important;
}
.cs-fab {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  box-shadow: 0 16px 42px rgba(37,99,235,.28) !important;
}
.cs-popup-header {
  background: linear-gradient(135deg, #0f172a, #0b1830) !important;
  border-bottom: 1px solid rgba(148,163,184,.15) !important;
}
.cs-msg.bot .cs-msg-bubble,
.cs-msg.ai .cs-msg-bubble {
  background: rgba(15,23,42,.96) !important;
  border-color: rgba(56,189,248,.14) !important;
}
.cs-msg.user .cs-msg-bubble {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
}
@media (max-width: 720px) {
  body {
    background-image:
      radial-gradient(circle at 20% 0%, rgba(37,99,235,.14), transparent 30%),
      linear-gradient(180deg, #050713 0%, #07101d 100%) !important;
  }
  .sf-header,
  .topbar,
  .sf-bottom-nav {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}
/* ===== DARK PREMIUM CYAN THEME OVERRIDE END ===== */


/* ===== KHF 3D PREMIUM THEME START ===== */
:root{
  --khf3d-bg:#050608;
  --khf3d-panel:rgba(13,18,32,.78);
  --khf3d-panel-strong:rgba(17,24,39,.92);
  --khf3d-edge:rgba(255,255,255,.13);
  --khf3d-edge-hot:rgba(255,132,32,.38);
  --khf3d-orange:#ff7a18;
  --khf3d-gold:#ffd35a;
  --khf3d-cyan:#22d3ee;
  --khf3d-purple:#a855f7;
  --khf3d-shadow:0 26px 80px rgba(0,0,0,.58),0 10px 32px rgba(255,104,24,.10);
}

/* background 3D khusus halaman user/order, admin tetap aman */
.orange-home-page,
.storefront-body,
.page-shell,
.po-page,
.user-dashboard-page,
body:has(.auth-left){
  background:
    radial-gradient(circle at 15% 8%, rgba(255,122,24,.20), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(34,211,238,.13), transparent 30%),
    radial-gradient(circle at 48% 92%, rgba(168,85,247,.16), transparent 36%),
    linear-gradient(145deg,#050608 0%,#080b12 42%,#0f1118 100%) !important;
  color:#f8fafc;
  overflow-x:hidden;
}

.khf3d-ready .khf3d-stage{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  perspective:1100px;
}
.khf3d-ready .khf3d-stage::before{
  content:"";
  position:absolute;
  left:-15vw;
  right:-15vw;
  bottom:-34vh;
  height:64vh;
  transform:rotateX(62deg) translateZ(-120px);
  transform-origin:50% 0;
  background-image:
    linear-gradient(rgba(255,122,24,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.13) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to top,rgba(0,0,0,.75),transparent 82%);
  opacity:.65;
  animation:khfGridDrift 13s linear infinite;
}
.khf3d-ready .khf3d-stage::after{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,35%), rgba(255,211,90,.16), transparent 20%),
    radial-gradient(circle at calc(var(--mx,50%) + 16%) calc(var(--my,35%) + 12%), rgba(34,211,238,.10), transparent 28%);
  filter:blur(8px);
  opacity:.95;
}
.khf3d-ready .khf3d-shape{
  position:absolute;
  width:clamp(82px,12vw,160px);
  height:clamp(82px,12vw,160px);
  border-radius:30px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 24px 90px rgba(0,0,0,.50);
  backdrop-filter:blur(8px);
  transform-style:preserve-3d;
}
.khf3d-ready .khf3d-shape.s1{top:16%;left:7%;transform:rotateX(58deg) rotateZ(42deg);animation:khfFloatA 8s ease-in-out infinite;}
.khf3d-ready .khf3d-shape.s2{top:18%;right:8%;border-radius:999px;background:radial-gradient(circle at 35% 30%,rgba(255,211,90,.32),rgba(255,122,24,.06) 58%,rgba(255,255,255,.03));animation:khfFloatB 10s ease-in-out infinite;}
.khf3d-ready .khf3d-shape.s3{bottom:18%;right:18%;width:90px;height:90px;transform:rotateX(50deg) rotateZ(-28deg);animation:khfFloatC 9s ease-in-out infinite;}
@keyframes khfGridDrift{to{background-position:46px 46px}}
@keyframes khfFloatA{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -18px;rotate:8deg}}
@keyframes khfFloatB{0%,100%{translate:0 0;scale:1}50%{translate:-12px 20px;scale:1.06}}
@keyframes khfFloatC{0%,100%{translate:0 0;rotate:0deg}50%{translate:16px -12px;rotate:-10deg}}

/* pastikan konten tetap di atas background */
.orange-home-shell,.store-shell,.page-content,.invoice-wrap-v2,.success-wrap,.po-content,
.user-dash-shell,.auth-left,.auth-right,.topbar,.center-screen,.container.narrow{
  position:relative;
  z-index:2;
}

/* efek kartu 3D umum */
.khf3d-card,
.orange-home-hero,.orange-live-card,.orange-info-card,.orange-product-card,
.pd-hero,.pd-live-card,.pd-stat-panel,.pd-stat-vps,.pd-stat-script,.pd-filter-bar,.pd-product-card,.pd-flow-panel,
.sf-product-card,.script-item-card,
.checkout-product-info,.checkout-form-card,
.invoice-head-v2,.qris-container,.invoice-detail-card,
.success-header-card,.detail-card,.provision-success-card,.provision-info-card,.provision-fail-card,
.po-pkg-card,.po-info,.po-submit,.po-block,
.user-hero-live,.user-profile-card,.user-stat-live,.user-action-card-live,.user-order-live-card,.dash-money-card,.dash-progress-card,
.order-item,.auth-form-wrap,.af-wrap,.auth-left,.auth-right{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:var(--khf3d-shadow), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.khf3d-card::before,
.orange-home-hero::before,.orange-live-card::before,.orange-info-card::before,.orange-product-card::before,
.pd-hero::before,.pd-live-card::before,.pd-product-card::before,.sf-product-card::before,
.checkout-product-info::before,.checkout-form-card::before,.qris-container::before,.invoice-detail-card::before,.success-header-card::before,.detail-card::before,
.po-pkg-card::before,.user-hero-live::before,.user-profile-card::before,.user-stat-live::before,.user-action-card-live::before,.user-order-live-card::before{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.khf3d-tilt{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.khf3d-tilt:hover{
  border-color:rgba(255,167,38,.34) !important;
  filter:saturate(1.08);
}
.khf3d-tilt.is-tilting{
  transition:box-shadow .16s ease, border-color .16s ease;
}

/* Home 3D premium */
.orange-home-hero{
  perspective:1200px;
  transform:translateZ(0);
  background:
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.035) 52%,rgba(255,122,24,.105)),
    radial-gradient(circle at 80% 16%,rgba(255,211,90,.22),transparent 24%),
    rgba(10,14,24,.78) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 38px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,122,24,.12),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.orange-home-hero::after{
  filter:blur(0) drop-shadow(0 0 45px rgba(255,139,24,.55)) !important;
  transform:translateZ(70px);
}
.orange-home-hero h1,
.pd-hero h1,
.po-title,
.success-title,
.auth-left-title,.al-title{
  text-shadow:0 12px 34px rgba(0,0,0,.45),0 0 28px rgba(255,122,24,.16);
}
.orange-home-proof article,
.orange-live-mini div,
.pd-live-row,
.detail-row,
.invoice-detail-row{
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.orange-live-card,
.pd-live-card{
  background:linear-gradient(145deg,rgba(14,19,34,.82),rgba(5,8,14,.72)) !important;
  transform:translateZ(0);
}
.orange-eq i,.pd-eq i{
  box-shadow:0 0 18px rgba(255,122,24,.45),0 0 24px rgba(34,211,238,.18);
}
.orange-product-card,.orange-info-card,.pd-product-card,.sf-product-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.028) 58%,rgba(255,122,24,.06)),
    rgba(9,12,22,.86) !important;
}
.orange-product-card::after,.orange-info-card::after,.pd-product-card::after,.sf-product-card::after,
.checkout-form-card::after,.checkout-product-info::after,.qris-container::after,.success-header-card::after{
  content:"";
  position:absolute;
  inset:auto -30% -45% auto;
  width:70%;
  height:70%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,122,24,.17),transparent 68%);
  transform:translateZ(-1px);
}
.orange-product-icon,.pd-icon-box,.sf-product-icon,.checkout-product-icon,.order-brand-mark,.success-icon-wrap,.user-avatar-live,.topbar-logo,.sf-logo,.orange-home-logo{
  transform:translateZ(42px);
  box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 38px rgba(255,122,24,.16) !important;
}
.orange-product-card h3,.pd-product-card h3,.sf-product-card h3,.checkout-product-name{
  transform:translateZ(30px);
}
.orange-product-card a,.orange-info-card a,.pd-order-btn,.sf-order-btn,.submit-btn,.po-submit,.action-btn,.auth-submit,.af-btn,.user-primary-btn,.user-soft-btn,.order-action-link,.btn{
  transform:translateZ(34px);
  box-shadow:0 16px 36px rgba(0,0,0,.32),0 0 28px rgba(255,122,24,.12) !important;
}

/* Produk / list */
.pd-product-grid,.script-products-list,.orange-section-grid,.po-pkg-grid,.user-action-grid-live,.user-stat-live-grid,.order-list{
  perspective:1200px;
}
.pd-product-card:hover,.sf-product-card:hover,.orange-product-card:hover,.orange-info-card:hover,.po-pkg-card:hover,.user-action-card-live:hover,.order-item:hover{
  transform:translateY(-10px) rotateX(3deg) rotateY(-3deg);
}
.pd-card-glow{
  opacity:.85 !important;
  filter:blur(28px);
}
.pd-filter-bar,.filter-row,.orange-mini-strip,.sf-live-strip{
  background:rgba(10,14,24,.72) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 54px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter:blur(16px);
}

/* Checkout / Invoice / Success */
.checkout-layout,.invoice-wrap-v2,.success-wrap,.po-content{
  perspective:1200px;
}
.checkout-product-info,.checkout-form-card,.invoice-head-v2,.qris-container,.invoice-detail-card,.success-header-card,.detail-card,.po-block{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 60%,rgba(34,211,238,.045)),rgba(8,12,22,.86) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.qris-container{
  overflow:hidden;
}
.qris-img-frame{
  background:linear-gradient(145deg,rgba(18,23,38,.96),rgba(8,10,18,.94)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 22px 55px rgba(0,0,0,.42) !important;
}
.qris-img-frame img,
.qris-container img{
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.qris-amount-box,.checkout-price-display{
  background:linear-gradient(135deg,rgba(255,122,24,.18),rgba(255,211,90,.08),rgba(34,211,238,.08)) !important;
  border:1px solid rgba(255,211,90,.18) !important;
}
.invoice-status-badge,.status-tag,.badge{
  box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 24px rgba(34,211,238,.12) !important;
}

/* Form 3D */
.form-field,.po-field,.auth-field,.af-field,select,textarea,input{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.14);
}
.form-field:focus,.po-field:focus,.auth-field:focus,.af-field:focus,select:focus,textarea:focus,input:focus{
  border-color:rgba(255,167,38,.62) !important;
  box-shadow:0 0 0 4px rgba(255,122,24,.12),inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Navbar glass */
.topbar,.orange-home-header,.sf-header,.user-dash-header{
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(5,8,14,.62) !important;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Auth page */
body:has(.auth-left){
  min-height:100vh;
}
.auth-left,.auth-right,.auth-form-wrap,.af-wrap{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 58%,rgba(255,122,24,.06)),rgba(9,12,22,.86) !important;
  border-color:rgba(255,255,255,.11) !important;
}
.auth-left-features .auth-feature,.al-step,.captcha-pill{
  background:rgba(255,255,255,.065) !important;
  border:1px solid rgba(255,255,255,.09) !important;
}

/* Mobile lebih ringan */
@media (max-width: 780px){
  .khf3d-ready .khf3d-stage::before{height:45vh;bottom:-28vh;background-size:34px 34px;}
  .khf3d-ready .khf3d-shape{opacity:.45;filter:blur(.2px)}
  .orange-product-card,.orange-info-card,.pd-product-card,.sf-product-card,.checkout-product-info,.checkout-form-card,.qris-container,.invoice-detail-card,.detail-card,.po-pkg-card,.user-action-card-live,.order-item{
    transform:none !important;
  }
  .khf3d-tilt:hover{transform:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .khf3d-ready .khf3d-stage::before,.khf3d-ready .khf3d-shape{animation:none !important;}
  .khf3d-tilt{transition:none !important;transform:none !important;}
}
/* ===== KHF 3D PREMIUM THEME END ===== */