/* =======================================================================
   polish.css — Lapisan "halus & nyaman di mata".
   Tujuan: gerakan lembut + cepat, rendering font rapi, umpan balik sentuh
   yang halus, transisi tema mulus, dan menghormati prefers-reduced-motion.
   Aman: TIDAK mengubah warna/desain. Dimuat paling akhir setelah style.css.
   ======================================================================= */

/* ── Rendering teks lebih halus & nyaman dibaca ───────────────────────── */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Pergantian tema (gelap/terang) jadi mulus, bukan "kedip" */
  transition: background-color .28s ease, color .28s ease;
}
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* ── Transisi lembut & CEPAT untuk elemen interaktif ──────────────────── */
/* Hanya properti "murah" (tidak memicu re-layout) supaya tetap ringan. */
a, button, summary, label[for],
input, select, textarea,
.prod-card, .gp-card, .card, .stat-card, .kpi-card,
.dg-sb-item, .admin-sb a, .success-card,
.btn-submit, .btn-ghost, .btn-gold, .btn-bayar, .btn-sm,
[class*="btn-"], [role="button"] {
  transition:
    background-color .17s ease,
    color .17s ease,
    border-color .17s ease,
    box-shadow .22s cubic-bezier(.2,.7,.3,1),
    transform .16s cubic-bezier(.2,.7,.3,1),
    opacity .17s ease;
}

/* Hover: angkat lembut pada kartu yang bisa diklik */
.card-hover:hover { transform: translateY(-2px); }

/* Tekan: umpan balik halus — terasa responsif tapi tidak kasar */
button:active, a.btn-submit:active, .btn-ghost:active, .btn-gold:active,
.btn-bayar:active, .btn-sm:active, .prod-card:active,
[class*="btn-"]:active, [role="button"]:active {
  transform: scale(.975);
}

/* ── Fokus keyboard: jelas tapi lembut (aksesibilitas) ────────────────── */
/* Hanya untuk link/tombol. Input/textarea/select TIDAK diberi outline di sini
   karena sudah punya gaya fokus sendiri (mis. search-bar jadi border merah) —
   kalau ditambah outline lagi jadi dobel/menumpuk & terlihat seperti bug. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid rgba(227, 24, 55, .45);
  outline-offset: 2px;
}

/* ── Scrollbar lembut (tidak mencolok) ────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--b2, rgba(128,128,128,.30)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--b2, rgba(128,128,128,.30));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--t3, rgba(128,128,128,.50));
  background-clip: content-box;
}

/* ── Hormati pengguna yang sensitif gerakan / hemat gerak ─────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}