.btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-control-md);
  font-size: var(--typography-size-sm);
  font-weight: var(--typography-weight-medium);
  font-family: var(--typography-family-sans);
  white-space: nowrap;
  /* Sama seperti badge: `.btn` bisa dipasang di `<a>`, jadi underline bawaan
     browser harus dimatikan supaya cuma variant `--link` yang punya. */
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
  outline: none;
  border: var(--border-1) solid transparent;
  /* Tanpa baris ini, `.btn` tanpa variant memakai latar bawaan browser
     (`buttonface`). Di light mode nilainya abu muda dan nyaris tidak
     kelihatan salah; di dark mode tombolnya jadi kotak putih menyala.
     Ketahuan dari screenshot dark mode, bukan dari test. */
  background-color: transparent;
  cursor: pointer;
  height: var(--space-9);
  padding: var(--space-2) var(--space-4);
}

.btn:focus-visible {
  border-color: var(--color-ring);
  box-shadow: 0 0 0 var(--ring-width) var(--color-ring-focus);
}

.btn:disabled {
  pointer-events: none;
  opacity: var(--opacity-50);
}

/* `.btn` juga dipasang di `<a>` (lihat catatan text-decoration di atas), dan
   `:disabled` tidak pernah cocok di sana — tautan tidak punya atribut itu.
   Yang dipakai markup adalah `aria-disabled="true"` plus `tabindex="-1"`, dan
   tanpa aturan ini keadaan itu nol tanda: tautannya tampil normal, MENYALA saat
   di-hover, dan kliknya tetap jalan karena `href` masih hidup. Jadi pengguna
   keyboard terhalang sementara pengguna mouse tidak — kebalikan dari yang
   dimaksud. Ketahuan dari tautan mundur Pagination di halaman pertama. */
.btn[aria-disabled='true'] {
  pointer-events: none;
  opacity: var(--opacity-50);
}

.btn svg {
  pointer-events: none;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
}

/* --- Variants --- */

.btn--default {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.btn--default:hover {
  filter: brightness(0.92);
}

.btn--destructive {
  background: var(--color-destructive-surface);
  color: var(--color-destructive-foreground);
}
.btn--destructive:hover {
  filter: brightness(0.92);
}
.btn--destructive:focus-visible {
  box-shadow: 0 0 0 var(--ring-width) var(--color-destructive-ring);
}

.btn--outline {
  background: var(--color-field);
  border-color: var(--button-outline-border);
  color: var(--color-foreground);
  box-shadow: var(--shadow-1);
}
.btn--outline:hover {
  background: var(--color-field-hover);
  color: var(--color-accent-foreground);
}
/* Ring fokus MENAMBAH, bukan mengganti. `.btn:focus-visible` menulis
   `box-shadow` penuh, dan `box-shadow` tidak menumpuk antar rule — yang
   belakangan menang seluruhnya. Cuma `--outline` yang membawa bayangan sendiri,
   jadi cuma varian ini yang perlu menuliskan keduanya. Paling terasa di
   halaman aktif Pagination (`btn--outline` + `aria-current`): satu-satunya
   penanda "kamu di sini" berubah bentuk begitu difokus. */
.btn--outline:focus-visible {
  box-shadow: 0 0 0 var(--ring-width) var(--color-ring-focus), var(--shadow-1);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-foreground);
}
.btn--secondary:hover {
  filter: brightness(0.96);
}

.btn--ghost {
  background: transparent;
  color: var(--color-foreground);
}
.btn--ghost:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-foreground);
}

.btn--link {
  background: transparent;
  color: var(--color-primary);
  height: auto;
  padding: 0;
  text-underline-offset: var(--space-1);
}
.btn--link:hover {
  text-decoration: underline;
}

/* --- Sizes --- */

.btn--sm {
  height: var(--space-8);
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control-md);
}

.btn--lg {
  height: var(--space-10);
  padding: 0 var(--space-6);
  border-radius: var(--radius-control-md);
}

.btn--icon {
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
}