/* Gaya: simpel seperti aryadzul.pages.dev — putih, Arial, tombol abu-abu datar. */
:root{
  --bg:#fff; --ink:#222; --muted:#666; --faint:#999;
  --line:#ccc; --box:#f5f5f5;
  --btn:#eee; --btn-b:#999; --btn-h:#ddd;
  --dark:#555; --dark-b:#333; --dark-h:#444;
  --green:#2e7d32; --red:#c62828; --orange:#d97706;
}
*{box-sizing:border-box}
body{margin:20px auto;max-width:900px;padding:0 12px;background:var(--bg);color:var(--ink);
  font-family:Arial,sans-serif;font-size:14px}
.wrap{max-width:none;margin:0;padding:0}

.box{border:1px solid var(--line);background:#fff;margin-bottom:16px;padding:12px 14px}
.box h2{font-size:20px;margin:0 0 4px;color:#111}
.box h3{font-size:16px;margin:0 0 8px;color:#111}
.box .sub{margin:0 0 12px;color:var(--muted);font-size:13px}
.muted{color:var(--muted);font-weight:normal}
.hint{color:var(--muted);font-size:12px}
a{color:#1a5fb4}

.field{margin-bottom:12px}
.field label{display:block;font-weight:bold;margin-bottom:4px;font-size:14px}
input[type=text],select,textarea{width:100%;padding:8px;border:1px solid var(--btn-b);
  font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #bbb;border-color:#666}
textarea{resize:vertical}
.hint{display:block;margin-top:4px}

.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn{background:var(--btn);border:1px solid var(--btn-b);padding:8px 18px;font-size:15px;
  cursor:pointer;color:var(--ink);font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--btn-h)}
.btn.primary{background:var(--dark);border-color:var(--dark-b);color:#fff;font-weight:bold}
.btn.primary:hover{background:var(--dark-h)}
.btn:disabled{opacity:.5;cursor:not-allowed}
#formMsg{font-size:13px}

.result{margin-top:12px;padding:10px 12px;font-size:14px;border:1px solid var(--line)}
.result.ok{background:#f2f9f2;color:var(--green);border-color:#a3c9a3}
.result.err{background:#fdf2f2;color:var(--red);border-color:#e0aaaa}
.result.warn{background:#fef9f0;color:var(--orange);border-color:#e8c99a}

.steps{margin:0 0 8px;padding-left:22px;line-height:1.7;font-size:14px}
.steps code{background:var(--box);border:1px solid var(--line);padding:0 4px;font-size:13px}

.foot{text-align:center;font-size:12px;color:var(--faint);margin:32px 0 12px}

@media(max-width:640px){
  input[type=text],select,textarea{font-size:16px}
  .box h2{font-size:18px}
}