/* =========================================================
   Captchas.my.id — App Stylesheet
   Konsep: "tiket verifikasi" — tiap captcha selesai = 1 tiket
   yang sudah diperiksa. Elemen signature: tepi kartu bergerigi
   (seperti sobekan tiket) & garis putus-putus ala struk kasir.
   ========================================================= */

:root {
  --color-bg: #FAFAF9;
  --color-ink: #16181D;
  --color-ink-soft: #565B66;
  --color-primary: #123C3E;
  --color-primary-light: #1F5B5E;
  --color-gold: #C99A3E;
  --color-gold-soft: #F1E4C6;
  --color-success: #2F7A5C;
  --color-danger: #B3432B;
  --color-border: #E4E1D9;
  --color-card: #FFFFFF;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Ticket Stub Card ----
   Kartu dengan 2 lubang perforasi di kiri-kanan tepi tengah,
   dipakai untuk kartu captcha & konfirmasi reward. */
.ticket-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: visible;
}

.ticket-card::before,
.ticket-card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transform: translateY(-50%);
}

.ticket-card::before { left: -12px; }
.ticket-card::after  { right: -12px; }

.ticket-divider {
  border: none;
  border-top: 2px dashed var(--color-border);
  margin: 0;
}

/* ---- Ledger row (dipakai di Recent Transactions, ala struk) ---- */
.ledger-row {
  border-bottom: 1px dashed var(--color-border);
}
.ledger-row:last-child {
  border-bottom: none;
}

/* ---- Bottom nav (mobile) ---- */
.bottom-nav-item.active {
  color: var(--color-primary);
}
.bottom-nav-item {
  color: var(--color-ink-soft);
}

/* ---- Focus visibility (aksesibilitas, jangan dihapus) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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