* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Segoe UI', Arial, sans-serif; background:#f2f4f7; color:#1a2233;
       min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.kotak { background:#fff; border-radius:12px; box-shadow:0 2px 14px rgba(0,0,0,.10);
         padding:28px 26px; width:100%; max-width:360px; }
.judul { font-size:20px; font-weight:800; line-height:1.15; color:#1a2233; letter-spacing:.5px; }
.judul span { color:#1d6f42; }
.ver { font-size:12px; color:#5a6a85; margin:4px 0 18px; }
label { display:block; font-size:12px; color:#5a6a85; margin:12px 0 4px; }
input { width:100%; padding:10px 11px; border:1px solid #cfd6e0; border-radius:7px; font-size:15px; background:#fffbe6; }
input:focus { outline:2px solid #1d6f42; outline-offset:-2px; background:#fff; }
button { width:100%; margin-top:20px; padding:12px; background:#1d6f42; color:#fff; border:none;
         border-radius:7px; font-size:15px; font-weight:700; cursor:pointer; }
button:hover { background:#175935; }
button:disabled { background:#9ab; cursor:wait; }
.pesan { margin-top:12px; font-size:13px; color:#c0392b; font-weight:600; min-height:18px; }
.kaki { margin-top:18px; font-size:11px; color:#8895ab; border-top:1px solid #eef2f7; padding-top:12px; }