<!doctype html><html lang="id"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Login — ailham</title><style>
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,sans-serif}
body{background:#f7f8fa;color:#1a1d24;min-height:100vh}
.nav{background:#fff;border-bottom:1px solid #e9ebef;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.nav a{text-decoration:none;color:inherit;font-weight:600}
.brand{font-size:18px;font-weight:800;color:#25D366}
.container{max-width:900px;margin:0 auto;padding:20px}
.card{background:#fff;border:1px solid #e9ebef;border-radius:16px;padding:24px;margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:200px}
.stat{text-align:center;padding:16px}
.stat .num{font-size:28px;font-weight:800;color:#25D366}
.stat .lbl{font-size:12px;color:#6b7280;margin-top:4px}
.btn{display:inline-block;padding:10px 20px;border-radius:10px;border:none;font-weight:600;cursor:pointer;text-decoration:none;font-size:14px;margin:2px}
.btn-primary{background:#25D366;color:#fff}
.btn-ghost{background:#f1f2f4;color:#1a1d24}
.input{width:100%;padding:10px 14px;border:1px solid #d9dbdf;border-radius:10px;font-size:14px;margin:6px 0}
.label{font-size:13px;font-weight:600;color:#6b7280;margin-top:12px;display:block}
.note{font-size:13px;color:#6b7280;line-height:1.6}
.chat-box{border:1px solid #e9ebef;border-radius:12px;overflow:hidden;margin-top:20px}
.chat-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#25D366;color:white}
.chat-body{height:300px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#ece5dd}
.chat-msg{padding:8px 12px;border-radius:10px;font-size:13px;max-width:80%;line-height:1.4}
.chat-msg.user{background:#dcf8c6;color:#1a1d23;align-self:flex-end;border-bottom-right-radius:2px}
.chat-msg.bot{background:white;color:#1a1d23;align-self:flex-start;border-bottom-left-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.chat-footer{display:flex;gap:8px;padding:12px;background:#f0f0f0;border-top:1px solid #eaecef}
.chat-footer input{flex:1;padding:10px 14px;border:1px solid #d1d5da;border-radius:8px;font-size:13.5px}
.chat-footer input:focus{outline:none;border-color:#25D366}
.chat-footer button{padding:10px 16px;border-radius:8px;background:#25D366;color:white;font-weight:600;font-size:13px;white-space:nowrap}
</style></head><body>
<div style="display:grid;place-items:center;min-height:100vh">
<div class="card" style="width:100%;max-width:380px">
<h2 style="margin-bottom:20px">Login</h2>
<form method="POST" action="/api/login">
<label class="label">Email</label>
<input class="input" type="email" name="email" required>
<label class="label">Password</label>
<input class="input" type="password" name="password" required>
<button class="btn btn-primary" type="submit">Login</button>
</form>
<p class="note" style="margin-top:16px">Belum punya akun? <a href="/register">di sini</a></p>
</div></div></body></html>