/*! Stellar Design System v1.1.0: https://gitlab.com/stellar.digin/system-design */
/* Stellar Design System: tokens (dibangkitkan dari tokens/tokens.json; jangan diedit manual) */
:root {
  --sd-blue-50: #eef3ff;
  --sd-blue-100: #dce6ff;
  --sd-blue-200: #bccdff;
  --sd-blue-300: #8eaaff;
  --sd-blue-400: #5a80ff;
  --sd-blue-500: #2a5bff;
  --sd-blue-600: #0d42ff;
  --sd-blue-700: #0933d6;
  --sd-blue-800: #0c2aa6;
  --sd-blue-900: #102776;
  --sd-blue-950: #0b1a4d;
  --sd-cyan-50: #ebfcff;
  --sd-cyan-100: #cdf6ff;
  --sd-cyan-200: #a1edff;
  --sd-cyan-300: #5fe0ff;
  --sd-cyan-400: #00d4ff;
  --sd-cyan-500: #00b4e0;
  --sd-cyan-600: #008fbb;
  --sd-cyan-700: #037297;
  --sd-cyan-800: #0b5d7a;
  --sd-cyan-900: #0e4d67;
  --sd-ink-0: #ffffff;
  --sd-ink-25: #fafbfe;
  --sd-ink-50: #f4f6fb;
  --sd-ink-100: #e7ecf7;
  --sd-ink-200: #c9d4ea;
  --sd-ink-300: #9fb0cf;
  --sd-ink-400: #7184aa;
  --sd-ink-500: #3a4f78;
  --sd-ink-600: #243a62;
  --sd-ink-700: #182a4b;
  --sd-ink-800: #0e1d34;
  --sd-ink-900: #0a1530;
  --sd-ink-950: #060d1f;
  --sd-gold-300: #ffd978;
  --sd-gold-400: #ffc53d;
  --sd-gold-500: #f5a400;
  --sd-gold-700: #a86a00;
  --sd-success-50: #ecfdf5;
  --sd-success-500: #10b981;
  --sd-success-700: #047857;
  --sd-warning-50: #fffbeb;
  --sd-warning-500: #f59e0b;
  --sd-warning-700: #b45309;
  --sd-danger-50: #fef2f2;
  --sd-danger-500: #ef4444;
  --sd-danger-700: #b91c1c;
  --sd-info-50: #ebfcff;
  --sd-info-500: #00b4e0;
  --sd-info-700: #037297;
  --sd-bg: #fafbfe;
  --sd-bg-subtle: #f4f6fb;
  --sd-surface: #ffffff;
  --sd-surface-raised: #ffffff;
  --sd-border: #e3e8f2;
  --sd-border-strong: #c9d4ea;
  --sd-text: #0b1222;
  --sd-text-secondary: #46536d;
  --sd-text-muted: #6b7792;
  --sd-text-inverse: #ffffff;
  --sd-primary: #0d42ff;
  --sd-primary-hover: #0933d6;
  --sd-accent: #00d4ff;
  --sd-primary-soft: rgba(13, 66, 255, 0.08);
  --sd-focus: rgba(13, 66, 255, 0.35);
  --sd-viz-1: #0d42ff;
  --sd-viz-2: #d98200;
  --sd-viz-3: #0a8fb3;
  --sd-viz-4: #d6336c;
  --sd-viz-5: #7c3aed;
  --sd-viz-6: #15803d;
  --sd-font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --sd-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sd-text-xs: 0.75rem;
  --sd-text-sm: 0.875rem;
  --sd-text-md: 1rem;
  --sd-text-lg: 1.125rem;
  --sd-text-xl: 1.25rem;
  --sd-text-2xl: 1.5rem;
  --sd-text-3xl: 1.875rem;
  --sd-text-4xl: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  --sd-text-5xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);
  --sd-text-6xl: clamp(2.5rem, 1.8rem + 3.4vw, 4rem);
  --sd-weight-regular: 400;
  --sd-weight-medium: 500;
  --sd-weight-semibold: 600;
  --sd-weight-bold: 700;
  --sd-weight-extrabold: 800;
  --sd-leading-tight: 1.12;
  --sd-leading-snug: 1.3;
  --sd-leading-normal: 1.6;
  --sd-tracking-tight: -0.022em;
  --sd-tracking-wide: 0.08em;
  --sd-space-1: 4px;
  --sd-space-2: 8px;
  --sd-space-3: 12px;
  --sd-space-4: 16px;
  --sd-space-5: 20px;
  --sd-space-6: 24px;
  --sd-space-8: 32px;
  --sd-space-10: 40px;
  --sd-space-12: 48px;
  --sd-space-16: 64px;
  --sd-space-20: 80px;
  --sd-space-24: 96px;
  --sd-space-32: 128px;
  --sd-section-y: clamp(64px, 6vw + 32px, 120px);
  --sd-radius-xs: 6px;
  --sd-radius-sm: 8px;
  --sd-radius-md: 12px;
  --sd-radius-lg: 16px;
  --sd-radius-xl: 24px;
  --sd-radius-2xl: 32px;
  --sd-radius-full: 999px;
  --sd-shadow-xs: 0 1px 2px rgba(11, 18, 34, 0.06);
  --sd-shadow-sm: 0 1px 2px rgba(11, 18, 34, 0.05), 0 2px 8px rgba(11, 18, 34, 0.05);
  --sd-shadow-md: 0 2px 4px rgba(11, 18, 34, 0.04), 0 10px 28px rgba(11, 18, 34, 0.08);
  --sd-shadow-lg: 0 4px 8px rgba(11, 18, 34, 0.04), 0 22px 48px rgba(11, 18, 34, 0.12);
  --sd-shadow-xl: 0 32px 80px rgba(6, 13, 31, 0.28);
  --sd-shadow-brand: 0 10px 30px rgba(13, 66, 255, 0.32);
  --sd-dur-fast: 120ms;
  --sd-dur-base: 200ms;
  --sd-dur-slow: 320ms;
  --sd-dur-slower: 560ms;
  --sd-ease: cubic-bezier(0.2, 0, 0, 1);
  --sd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sd-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --sd-z-base: 1;
  --sd-z-sticky: 900;
  --sd-z-header: 1000;
  --sd-z-overlay: 1040;
  --sd-z-drawer: 1050;
  --sd-z-toast: 1080;
  --sd-container: 1240px;
  --sd-header-h: 72px;
  --sd-bp-sm: 576px;
  --sd-bp-md: 768px;
  --sd-bp-lg: 992px;
  --sd-bp-xl: 1200px;
  --sd-bp-xxl: 1400px;
  --sd-gradient-brand: linear-gradient(135deg, #0d42ff 0%, #2a5bff 45%, #00d4ff 100%);
  --sd-gradient-brand-soft: linear-gradient(135deg, rgba(13,66,255,0.10), rgba(0,212,255,0.08));
  --sd-gradient-text: linear-gradient(100deg, #5a80ff 0%, #00d4ff 100%);
  --sd-gradient-text-light: linear-gradient(100deg, #0d42ff 0%, #008fbb 100%);
  --sd-gradient-space: radial-gradient(120% 80% at 80% 0%, rgba(13, 66, 255, 0.35) 0%, rgba(6, 13, 31, 0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0, 212, 255, 0.16) 0%, rgba(6, 13, 31, 0) 60%),
    linear-gradient(180deg, #060d1f 0%, #0a1530 100%);
  --sd-focus-ring: 0 0 0 3px var(--sd-focus);
}

/* Permukaan gelap: tambahkan class .sd-dark atau atribut data-theme="dark" */
.sd-dark,
[data-theme="dark"] {
  --sd-bg: #060d1f;
  --sd-surface: rgba(255, 255, 255, 0.04);
  --sd-surface-raised: rgba(255, 255, 255, 0.07);
  --sd-border: rgba(255, 255, 255, 0.10);
  --sd-border-strong: rgba(255, 255, 255, 0.18);
  --sd-text: #ffffff;
  --sd-text-secondary: #c3cde3;
  --sd-text-muted: #8c9bbb;
  --sd-primary: #2a5bff;
  --sd-accent: #5fe0ff;
  --sd-primary-soft: rgba(90, 128, 255, 0.16);
  --sd-viz-1: #4d74ff;
  --sd-viz-2: #c07c00;
  --sd-viz-3: #1aa0c4;
  --sd-viz-4: #e0507e;
  --sd-viz-5: #8f6ef0;
  --sd-viz-6: #2e9a5e;
  color: var(--sd-text);
}

/* Stellar Design System - komponen dasar (.sd-*). Butuh tokens/dist/tokens.css. */

/* =========================================================
   2. KOMPONEN DASAR
   ========================================================= */

/* Eyebrow / label section */
.sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sd-font-body);
  font-size: var(--sd-text-xs);
  font-weight: 700;
  letter-spacing: var(--sd-tracking-wide);
  text-transform: uppercase;
  color: var(--sd-primary);
  margin-bottom: var(--sd-space-4);
}
.sd-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--sd-gradient-brand);
}
.sd-dark .sd-eyebrow { color: var(--sd-cyan-300); }
.sd-eyebrow--center { justify-content: center; }

/* Judul */
.sd-display,
.sd-h1,
.sd-h2,
.sd-h3 {
  font-family: var(--sd-font-display);
  color: var(--sd-text);
  letter-spacing: var(--sd-tracking-tight);
  font-weight: 800;
  margin: 0;
}
.sd-display { font-size: var(--sd-text-6xl); line-height: 1.05; }
.sd-h1 { font-size: var(--sd-text-5xl); line-height: var(--sd-leading-tight); }
.sd-h2 { font-size: var(--sd-text-4xl); line-height: var(--sd-leading-tight); }
.sd-h3 { font-size: var(--sd-text-xl); line-height: var(--sd-leading-snug); font-weight: 700; letter-spacing: -0.01em; }
.sd-lead {
  font-size: var(--sd-text-lg);
  line-height: var(--sd-leading-normal);
  color: var(--sd-text-secondary);
}
.sd-text-gradient {
  background: var(--sd-gradient-text-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sd-dark .sd-text-gradient { background-image: var(--sd-gradient-text); }

/* Tombol */
.sd-btn {
  --_bg: var(--sd-primary);
  --_fg: #fff;
  --_bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--sd-radius-full);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--sd-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--sd-dur-base) var(--sd-ease), box-shadow var(--sd-dur-base) var(--sd-ease),
    background-color var(--sd-dur-base) var(--sd-ease), border-color var(--sd-dur-base) var(--sd-ease), color var(--sd-dur-base) var(--sd-ease);
}
.sd-btn:hover { color: var(--_fg); transform: translateY(-1px); }
.sd-btn:active { transform: translateY(0) scale(0.98); }
.sd-btn:focus-visible { outline: none; box-shadow: var(--sd-focus-ring); }
.sd-btn i { font-size: 1.05em; transition: transform var(--sd-dur-base) var(--sd-ease); }
.sd-btn:hover .bi-arrow-right,
.sd-btn:hover .bi-arrow-up-right { transform: translateX(3px); }

.sd-btn--primary {
  --_bg: var(--sd-primary);
  background-image: linear-gradient(135deg, #0d42ff 0%, #2a5bff 60%, #3f7bff 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, var(--sd-shadow-brand);
}
.sd-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--sd-dur-slower) var(--sd-ease-out);
}
.sd-btn--primary:hover::after { transform: translateX(120%); }
.sd-btn--primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 36px rgba(13, 66, 255, 0.42); }

.sd-btn--secondary {
  --_bg: var(--sd-surface);
  --_fg: var(--sd-text);
  --_bd: var(--sd-border-strong);
  box-shadow: var(--sd-shadow-xs);
}
.sd-btn--secondary:hover { --_bd: var(--sd-primary); --_fg: var(--sd-primary); }
.sd-dark .sd-btn--secondary {
  --_bg: rgba(255, 255, 255, 0.06);
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sd-dark .sd-btn--secondary:hover { --_bg: rgba(255, 255, 255, 0.12); --_bd: rgba(255, 255, 255, 0.4); --_fg: #fff; }

.sd-btn--ghost { --_bg: transparent; --_fg: var(--sd-text); }
.sd-btn--ghost:hover { --_bg: var(--sd-primary-soft); --_fg: var(--sd-primary); }
.sd-dark .sd-btn--ghost:hover { --_fg: #fff; --_bg: rgba(255, 255, 255, 0.08); }

.sd-btn--whatsapp { --_bg: #15803d; box-shadow: 0 10px 26px rgba(21, 128, 61, 0.3); }
.sd-btn--whatsapp:hover { --_bg: #166534; }

.sd-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; gap: 8px; }
.sd-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.sd-btn--block { width: 100%; }

/* Badge / chip */
.sd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--sd-radius-full);
  font-size: var(--sd-text-xs);
  font-weight: 600;
  line-height: 1;
  background: var(--sd-primary-soft);
  color: var(--sd-primary);
  border: 1px solid rgba(13, 66, 255, 0.14);
}
.sd-badge--success { background: var(--sd-success-50); color: var(--sd-success-700); border-color: rgba(16, 185, 129, 0.2); }
.sd-badge--warning { background: var(--sd-warning-50); color: var(--sd-warning-700); border-color: rgba(245, 158, 11, 0.24); }
.sd-badge--danger { background: var(--sd-danger-50); color: var(--sd-danger-700); border-color: rgba(239, 68, 68, 0.2); }
.sd-badge--neutral { background: var(--sd-ink-50); color: var(--sd-text-secondary); border-color: var(--sd-border); }
.sd-dark .sd-badge { background: rgba(255, 255, 255, 0.06); color: #dbe5ff; border-color: rgba(255, 255, 255, 0.14); }

/* Dot status */
.sd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sd-success-500); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); animation: sd-ping 2.2s var(--sd-ease) infinite; }
@keyframes sd-ping { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } }

/* Kartu */
.sd-card {
  position: relative;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  box-shadow: var(--sd-shadow-sm);
  transition: transform var(--sd-dur-slow) var(--sd-ease), box-shadow var(--sd-dur-slow) var(--sd-ease), border-color var(--sd-dur-slow) var(--sd-ease);
}
.sd-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--sd-shadow-lg);
  border-color: rgba(13, 66, 255, 0.22);
}

/* Spotlight mengikuti kursor: set --mx/--my via JS (data-spotlight) */
.sd-spotlight { overflow: hidden; }
.sd-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(13, 66, 255, 0.09), transparent 45%);
  transition: opacity var(--sd-dur-slow) var(--sd-ease);
}
.sd-spotlight:hover::before { opacity: 1; }
.sd-dark .sd-spotlight::before,
.sd-spotlight.sd-dark::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 212, 255, 0.12), transparent 45%); }

/* Ikon dalam kotak */
.sd-icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--sd-radius-md);
  background: var(--sd-gradient-brand-soft);
  color: var(--sd-primary);
  font-size: 20px;
  border: 1px solid rgba(13, 66, 255, 0.12);
}
.sd-icon-tile--solid { background: var(--sd-gradient-brand); color: #fff; border-color: transparent; box-shadow: var(--sd-shadow-brand); }
.sd-icon-tile--sm { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
.sd-icon-tile--lg { width: 60px; height: 60px; font-size: 26px; border-radius: var(--sd-radius-lg); }
.sd-dark .sd-icon-tile { background: rgba(90, 128, 255, 0.14); color: var(--sd-cyan-300); border-color: rgba(255, 255, 255, 0.1); }

/* Tautan dengan panah */
.sd-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--sd-text-sm);
  color: var(--sd-primary);
  text-decoration: none;
}
.sd-link i { transition: transform var(--sd-dur-base) var(--sd-ease); }
.sd-link:hover i,
a:hover > .sd-link i,
.sd-card:hover .sd-link i { transform: translateX(4px); }
.sd-dark .sd-link { color: var(--sd-cyan-300); }

/* Divider */
.sd-divider { height: 1px; border: 0; background: var(--sd-border); margin: var(--sd-space-8) 0; opacity: 1; }

/* Section shell */
.sd-section { padding-block: var(--sd-section-y); position: relative; }
.sd-section-head { max-width: 720px; margin-bottom: var(--sd-space-12); }
.sd-section-head--center { margin-inline: auto; text-align: center; }
.sd-section-head .sd-lead { margin-top: var(--sd-space-4); margin-bottom: 0; }

/* Aksesibilitas */
.sd-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sd-btn, .sd-card, .sd-link i, .sd-btn::after { transition: none !important; }
  .sd-dot { animation: none; }
}