body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,#3b82f6 0%,transparent 30%),radial-gradient(circle at bottom right,#1d4ed8 0%,transparent 35%),linear-gradient(135deg,#0f172a,#1e293b);min-height:100vh}*{box-sizing:border-box}.container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.card{width:100%;max-width:430px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:40px 35px;box-shadow:0 10px 40px #00000040,inset 0 1px #ffffff80;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;background:#2563eb1a;border-radius:50%}.logo{width:90px;height:90px;background:#fff;color:#fff;border-radius:24px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:700;margin:0 auto 20px;box-shadow:0 10px 25px #2563eb59}h1{margin:0;text-align:center;font-size:32px;color:#0f172a}.subtitle{text-align:center;margin-top:10px;color:#64748b;font-size:15px;line-height:1.5}.input-group{margin-top:30px}label{display:block;margin-bottom:8px;color:#334155;font-weight:600}input{width:100%;padding:16px;border-radius:14px;border:2px solid #e2e8f0;font-size:16px;transition:.3s;outline:none;background:#f8fafc}input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px #2563eb26}button{width:100%;margin-top:28px;padding:15px;border:none;border-radius:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:.3s;box-shadow:0 10px 20px #2563eb4d}button:hover{transform:translateY(-2px);box-shadow:0 14px 28px #2563eb66}.footer{margin-top:25px;text-align:center;font-size:13px;color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:25px}.candidate{border:2px solid #e2e8f0;padding:14px;border-radius:20px;cursor:pointer;text-align:center;transition:.3s;background:#fff;box-shadow:0 4px 10px #0000000d}.candidate:hover{transform:translateY(-4px);box-shadow:0 10px 25px #0000001a}.candidate.selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 4px #2563eb26}.candidate img{width:100%;height:330px;object-fit:cover;border-radius:16px}.candidate h3{margin:15px 0 5px;color:#0f172a}.candidate p{margin:0;color:#64748b;font-size:14px}.hasil{display:flex;gap:20px;flex-wrap:wrap}