:root{--bg:#0f172a;--card:#0b1224;--muted:#94a3b8;--text:#e5e7eb;--brand:#06b6d4;--accent:#22d3ee;--danger:#ef4444;--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.15), transparent 60%),
             radial-gradient(900px 500px at 110% 10%, rgba(6,182,212,.12), transparent 50%),
             var(--bg)}
.hero{padding:64px 16px 40px}
.hero-inner{max-width:880px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px;font-weight:800}
.brand{color:var(--accent)}
.sub{color:var(--muted);margin:0 auto 22px;max-width:720px}
.search{display:flex;gap:10px;background:rgba(255,255,255,.04);padding:10px;border-radius:999px;box-shadow:var(--shadow);backdrop-filter: blur(6px)}
.search input{flex:1;border:0;outline:none;padding:16px 18px;border-radius:999px;background:#0a1222;color:var(--text);font-size:16px}
.search button{border:0;border-radius:999px;padding:14px 22px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#001014;font-weight:700;cursor:pointer;transition:transform .12s ease, filter .15s ease}
.search button:hover{transform:translateY(-1px);filter:brightness(1.05)}
.note{color:#cbd5e1;margin-top:18px;font-size:14px}
.note .safe{color:#16f1ff;font-weight:600}

/* Alert "tidak ditemukan" seperti screenshot */
.alert.nf-red{
  margin:18px auto 0;
  width:min(720px,92vw);
  background:#1f0b0b;
  border:2px solid #ef4444;
  color:#ffd2d2;
  padding:14px 16px;
  border-radius:12px;
  font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

.nf{min-height:70vh;display:grid;place-items:center;padding:24px}
.card{width:min(720px,92vw);background:linear-gradient(180deg,#0e1630,#0b1226);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card h2{margin:0 0 10px}
.chip{background:rgba(34,211,238,.15);color:var(--accent);padding:2px 8px;border-radius:999px;border:1px solid rgba(34,211,238,.35)}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#001014;text-decoration:none;font-weight:700}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(148,163,184,.35)}
.foot{padding:24px 16px;color:var(--muted);text-align:center}
@media (max-width:640px){.search{padding:8px}.search input{padding:14px 14px}.search button{padding:12px 16px}}
/* Suggestions (auto-suggest) */
.suggest { width:min(760px,94vw); margin:16px auto 0; text-align:left }
.suggest-title { color:#cbd5e1; margin:8px 2px 8px; font-weight:600 }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip {
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.04); color:#e5e7eb; text-decoration:none; font-weight:600;
  transition:transform .12s ease, background .12s ease;
}
.chip:hover { transform:translateY(-1px); background:rgba(255,255,255,.08) }