/* Dialog konfirmasi brutalist. Menggantikan confirm() bawaan browser.
   Dipakai otomatis oleh setiap <form data-konfirmasi="..."> dan <a data-konfirmasi="...">. */
.kf-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .55);
  opacity: 0; transition: opacity .14s ease;
}
.kf-backdrop.kf-show { opacity: 1; }
.kf-box {
  width: 100%; max-width: 26rem; position: relative;
  background: #fff; border: 4px solid var(--ink, #14141a); border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink, #14141a);
  transform: translateY(8px) scale(.98); transition: transform .14s ease;
}
.kf-backdrop.kf-show .kf-box { transform: none; }
.kf-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-bottom: 4px solid var(--ink, #14141a);
  background: var(--orange, #ff9f1c); border-radius: 14px 14px 0 0;
}
.kf-head svg { width: 22px; height: 22px; flex: none; color: var(--ink, #14141a); }
.kf-head h2 { margin: 0; font: 800 17px/1.2 "Bricolage Grotesque", system-ui, sans-serif; color: var(--ink, #14141a); }
.kf-body { padding: 16px 18px; }
.kf-body p { margin: 0; font: 600 14px/1.55 system-ui, sans-serif; color: #1e293b; }
.kf-foot { display: flex; gap: 9px; padding: 0 18px 18px; }
.kf-btn {
  flex: 1; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  font: 800 14px/1 system-ui, sans-serif; border: 3px solid var(--ink, #14141a);
  transition: transform .1s ease, box-shadow .1s ease;
}
.kf-btn.kf-batal { background: #fff; color: var(--ink, #14141a); box-shadow: 3px 3px 0 var(--ink, #14141a); }
.kf-btn.kf-ya { background: var(--lime, #c8ff3a); color: var(--ink, #14141a); box-shadow: 4px 4px 0 var(--ink, #14141a); }
.kf-btn:hover { transform: translate(-1px, -1px); }
.kf-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, #14141a); }
.kf-btn:focus-visible { outline: 3px dashed var(--ink, #14141a); outline-offset: 3px; }
/* Mode bahaya: tombol ya merah (untuk hapus). */
.kf-box.kf-bahaya .kf-head { background: var(--pink, #ff2e88); }
.kf-box.kf-bahaya .kf-ya { background: var(--pink, #ff2e88); color: #fff; }
.kf-busy { display: flex; align-items: center; justify-content: center; gap: 8px; }
.kf-spin { width: 15px; height: 15px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kf-spin .7s linear infinite; }
@keyframes kf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kf-backdrop, .kf-box { transition: none; } .kf-spin { animation-duration: 2s; } }