/* base.css — reset, token dasar, tombol, form. Dipakai halaman publik & admin.
   Semua warna diambil dari custom property tema; tidak ada warna hardcode di komponen. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body,system-ui,sans-serif);color:var(--text,#1a1a1a);
  background:var(--background,#fff);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading,serif);font-weight:600;line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:var(--background);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.3rem;border-radius:var(--radius,10px);border:1px solid transparent;
  background:var(--surface,#fff);color:var(--text);cursor:pointer;font-size:.95rem;font-weight:500;
  text-decoration:none;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--primary);color:var(--on-primary,#fff)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--ghost:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.btn--sm{padding:.4rem .8rem;font-size:.85rem;min-height:36px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* form */
.form{display:grid;gap:1rem;max-width:34rem}
.field{display:grid;gap:.35rem;border:0;padding:0;margin:0}
.field>label,.field>legend{font-size:.9rem;font-weight:600;color:var(--text)}
.hint{font-weight:400;color:var(--muted);font-size:.85em}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:calc(var(--radius,10px) - 4px);
  background:var(--surface,#fff);color:var(--text);font:inherit;font-size:1rem;min-height:44px}
textarea{resize:vertical;min-height:5.5rem}
input:focus,textarea:focus,select:focus{border-color:var(--primary);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.err{color:#c0392b;font-size:.85rem;margin:.15rem 0 0}
.alert{padding:.7rem .9rem;border-radius:8px;background:#fdecea;color:#8f2b1f;border:1px solid #f5c6c0;margin:0 0 1rem}
.form__note{margin:.5rem 0 0;font-size:.9rem;color:var(--muted)}
.form__note.is-ok{color:#1c7c54}
.form__note.is-err{color:#c0392b}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,120%);
  background:var(--primary);color:var(--on-primary,#fff);padding:.75rem 1.25rem;border-radius:999px;
  font-size:.9rem;box-shadow:var(--shadow);z-index:200;transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:92vw;text-align:center}
.toast.is-on{transform:translate(-50%,0)}

.loading{color:var(--muted);padding:2rem 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}