/* ===== SIAGA - Light Modern Gradient UI ===== */
:root{
  --surface:#ffffff;
  --page:#f7f9fc;
  --ink:#0f172a;
  --muted:#64748b;

  /* gradients */
  --grad-brand: linear-gradient(90deg,#2563eb 0%, #7c3aed 100%);
  --grad-green:  linear-gradient(135deg,#16a34a 0%, #22c55e 100%);
  --grad-blue:   linear-gradient(135deg,#2563eb 0%, #6366f1 100%);
  --grad-orange: linear-gradient(135deg,#f59e0b 0%, #f97316 100%);
  --grad-cyan:   linear-gradient(135deg,#06b6d4 0%, #22d3ee 100%);
  --grad-purple: linear-gradient(135deg,#7c3aed 0%, #a78bfa 100%);
  --grad-pink:   linear-gradient(135deg,#ec4899 0%, #db2777 100%);

  --radius:18px;
  --shadow: 0 10px 26px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  color:var(--ink);
  background:
    radial-gradient(900px 650px at -10% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(1000px 700px at 110% -10%, rgba(14,165,233,.10), transparent 60%),
    var(--page);
  min-height:100vh;
}

/* ===== NAVBAR ===== */
.navbar{
  background: var(--surface);
  border-bottom:1px solid rgba(2,6,23,.06);
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.brand-logo{ height:52px; display:block }
.navbar .btn{
  border-color:#2563eb !important; color:#2563eb !important; border-radius:10px;
}
.navbar .btn:hover{ background:#2563eb; color:#fff !important }

/* ===== HERO ===== */
.hero{
  border-radius:24px;
  padding:28px 26px;
  color:#0b1a2a;
  background:
    radial-gradient(900px 600px at 120% -40%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(135deg,#e0f2fe 0%, #ecfeff 60%, #e8f5ff 100%);
  box-shadow:0 16px 36px rgba(2,6,23,.08);
  border:1px solid rgba(2,6,23,.06);
  position:relative;
  overflow:hidden;
}
.fancy-hero::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background: linear-gradient(90deg,rgba(37,99,235,.35),rgba(124,58,237,.35));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; pointer-events:none; opacity:.55; mix-blend:soft-light;
}
.hero-chip{
  display:inline-block;
  background:#fff;
  color:#0b1a2a;
  border:1px solid rgba(2,6,23,.06);
  border-radius:999px;
  font-weight:700; font-size:.75rem;
  padding:.35rem .75rem;
  box-shadow:0 6px 14px rgba(2,6,23,.06);
  margin-bottom:.35rem;
}
.hero-title{ font-weight:800; letter-spacing:.2px }
#typewriter-wrap{ display:inline-block; white-space:nowrap; min-width:min(100%, 780px) }
#typewriter{ display:inline-block }

/* ===== CARD PUTIH (FAQ) ===== */
.card-variant{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid rgba(2,6,23,.06);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-variant:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(2,6,23,.12) }
.card-variant .card-title{ font-weight:800 }

/* ===== METRIC CARD (gradient penuh + ikon kanan atas) ===== */
.metric{
  position:relative;
  border-radius:22px;
  color:#fff;
  padding:32px 22px 36px;
  min-height: 260px;
  box-shadow:0 16px 34px rgba(2,6,23,.12);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric:hover{ transform: translateY(-4px); box-shadow:0 22px 46px rgba(2,6,23,.16) }
.metric .metric-title{ font-weight:800; font-size:1.12rem; margin:0 0 4px }
.metric .metric-sub{ font-size:.94rem; opacity:.98 }
.metric .btn{ border-radius:10px; font-weight:700; box-shadow:0 4px 12px rgba(255,255,255,.25) }
.metric .metric-icon{
  position:absolute; right:10px; top:10px;
  font-size:84px; opacity:.16; color:#fff; pointer-events:none;
  filter: contrast(110%) brightness(105%);
}
.metric.green{  background: var(--grad-green) }
.metric.blue{   background: var(--grad-blue) }
.metric.orange{ background: var(--grad-orange) }
.metric.cyan{   background: var(--grad-cyan) }
.metric.purple{ background: var(--grad-purple) }

/* ===== GUIDE CARDS ===== */
.guide-header .bi{ font-size:20px }
.guide-grid{ margin-top:.25rem }
.guide-card{
  position:relative;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 12px 26px rgba(2,6,23,.06);
  padding:18px 18px 18px 64px;
  min-height:120px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.guide-card:hover{ transform: translateY(-4px); box-shadow:0 18px 36px rgba(2,6,23,.10) }
.step-badge{
  position:absolute; left:16px; top:16px;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; box-shadow:0 10px 18px rgba(2,6,23,.12);
}
.gc-title{ font-weight:800; margin-bottom:6px }
.gc-text{ margin:0; color:var(--muted) }

/* accent variants */
.accent-blue  .step-badge{ background:linear-gradient(135deg,#2563eb,#6366f1) }
.accent-green .step-badge{ background:linear-gradient(135deg,#16a34a,#22c55e) }
.accent-orange .step-badge{ background:linear-gradient(135deg,#f59e0b,#f97316) }
.accent-purple .step-badge{ background:linear-gradient(135deg,#7c3aed,#a78bfa) }
.accent-cyan .step-badge{ background:linear-gradient(135deg,#06b6d4,#22d3ee) }
.accent-pink .step-badge{ background:linear-gradient(135deg,#ec4899,#db2777) }

/* ===== FORM & BUTTON ===== */
.form-label{ font-weight:700 }
.form-control, .form-select, textarea{
  background:#fff; color: var(--ink);
  border:1px solid rgba(2,6,23,.12);
  border-radius:12px;
}
.form-control:focus, .form-select:focus, textarea:focus{
  box-shadow:0 0 0 .2rem rgba(37,99,235,.18);
  border-color:#2563eb;
}
.btn-brand{
  background: linear-gradient(90deg,#2563eb 0%, #7c3aed 100%);
  color:#fff; border:none; border-radius:12px;
  box-shadow:0 10px 22px rgba(37,99,235,.25);
  font-weight:800; padding:.7rem 1.05rem;
}

/* ===== FOOTER ===== */
.footer-muted{ opacity:.7 }

/* ===== RESPONSIVE ===== */
@media (max-width:991.98px){
  .hero{ padding:22px 20px }
  #typewriter-wrap{ min-width: 100% }
  .metric{ border-radius:20px; padding:26px 18px 28px; min-height:220px }
  .metric .metric-icon{ font-size:72px }
  .guide-card{ padding:18px 16px 18px 60px }
}