/* =============================================================
   SDI TEKNOLOGI — stats.css
   Stats section: stat cards, skill bars, satisfaction ring, survey form.
   ============================================================= */

/* ─────────────────────────────────────────────
   STATS BACKGROUND PATTERN
───────────────────────────────────────────── */
.stats-bg-pattern {
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(43, 16, 85, 0.4) 0%, transparent 70%),
    linear-gradient(rgba(217, 2, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 2, 238, 0.03) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
}

/* ─────────────────────────────────────────────
   STAT CARDS
───────────────────────────────────────────── */
.stat-card {
  background: var(--clr-brand-card);
  border: 1px solid rgba(217, 2, 238, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth);
}
.stat-card:hover {
  border-color: rgba(217, 2, 238, 0.3);
  box-shadow: 0 8px 32px rgba(217, 2, 238, 0.1), 0 8px 32px rgba(0,0,0,0.4);
}
html:not(.dark) .stat-card {
  background: var(--clr-light-card);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
html:not(.dark) .stat-card:hover { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1); }

/* ─────────────────────────────────────────────
   SKILL PROGRESS BARS
───────────────────────────────────────────── */
.skill-bar { transition: width 1.5s var(--ease-smooth); }

/* ─────────────────────────────────────────────
   SURVEY FORM (Light Mode)
───────────────────────────────────────────── */
html:not(.dark) .survey-option-btn {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}
html:not(.dark) .survey-option-btn:hover,
html:not(.dark) .survey-option-btn.selected {
  background-color: #f3e8ff;
  border-color: #7c3aed;
  color: #6b21a8;
}