<!DOCTYPE html><html lang="nl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wachtwoord vergeten — Mek-Tech</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/dynamic.css"><link rel="icon" href="/img/favicon.svg">
<style>
html,body{height:100%;margin:0;padding:0}
body{display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden;font-family:'Inter',-apple-system,sans-serif}
body::before{content:'';position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% -30%,rgba(88,166,255,.06) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 85% 85%,rgba(130,80,223,.05) 0%,transparent 50%)}
.login-wrap{position:relative;z-index:1;width:100%;max-width:400px;padding:1.5rem}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2.25rem 2rem;position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--purple),var(--green));background-size:200% 100%;animation:gradientShift 4s ease infinite}
.login-logo{text-align:center;margin-bottom:1.75rem}
.login-logo img{height:40px;width:auto;margin-bottom:.25rem;filter:drop-shadow(0 0 16px rgba(88,166,255,.12))}
.login-logo .tagline{font-size:.7rem;color:var(--text-dim);letter-spacing:.5px}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.68rem;font-weight:600;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.4px}
.field input{width:100%;padding:.55rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;font-family:inherit;transition:all .2s ease}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.1)}
.btn-primary{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--accent),#4d8fd9);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-primary:hover{box-shadow:0 4px 16px rgba(88,166,255,.25);transform:translateY(-1px)}
.alert{font-size:.72rem;padding:.45rem .7rem;border-radius:7px;margin-bottom:1rem;font-weight:500}
.alert-error{background:var(--red-bg);border:1px solid var(--red);color:var(--red)}
.alert-success{background:var(--green-bg);border:1px solid var(--green);color:var(--green)}
.link{color:var(--text-dim);text-decoration:none;font-size:.72rem;transition:color .15s;display:block;text-align:center;margin-top:1rem}
.link:hover{color:var(--accent)}
</style></head><body>
<div class="login-wrap"><div class="login-card">
<div class="login-logo"><img src="/img/logo.svg" alt="Mek-Tech"><p class="tagline">Wachtwoord herstellen</p></div>
<% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
<% if (success) { %><div class="alert alert-success"><%= success %></div><% } %>
<form method="POST" action="/wachtwoord-vergeten">
<div class="field"><label>E-mailadres</label><input type="email" name="email" placeholder="uw@email.nl" required></div>
<button type="submit" class="btn-primary">Reset-link versturen</button>
</form>
<a href="/login" class="link">Terug naar inloggen</a>
</div></div></body></html>