:root{
    --navy:#071a4a; --blue:#0f3fae; --blue2:#1b63e8; --sky:#5fb2ff;
    --orange:#ff7a1a; --orange2:#ffa53a; --sun:#ffd166;
    --ink:#0d1b3d; --muted:#5d6b8a; --line:#e3e8f3; --soft:#f4f7fd;
    --ok:#12a150; --bad:#e23b3b; --r:18px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  html{background:#0f3fae}
  body{
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(900px 520px at 85% -10%, rgba(255,140,40,.55), transparent 60%),
      radial-gradient(700px 500px at -10% 110%, rgba(95,178,255,.45), transparent 60%),
      linear-gradient(160deg, var(--navy) 0%, var(--blue) 55%, var(--blue2) 100%);
    background-attachment:fixed;
  }
  body::before{ /* garis speed tipis */
    content:""; position:fixed; inset:0; pointer-events:none; opacity:.08;
    background:repeating-linear-gradient(115deg,#fff 0 2px,transparent 2px 46px);
  }
  .awan{position:fixed; left:50%; bottom:-30px; width:min(900px,120vw); transform:translateX(-50%); opacity:.22; pointer-events:none; z-index:0}
  .wrap{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:28px 18px 80px}
  .brand{display:flex; align-items:center; gap:16px; color:#fff; margin-bottom:22px}
  .brand img{height:64px; width:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
  .brand .t{font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(18px,3.4vw,26px); line-height:1.05}
  .brand .s{opacity:.8; font-size:14px; margin-top:4px; font-weight:500}
  .card{background:#fff; border-radius:var(--r); padding:26px; box-shadow:0 20px 60px rgba(4,16,52,.35); position:relative}
  .card + .card{margin-top:18px}
  h2{margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:-.01em}
  h3{margin:0 0 12px; font-size:16px; font-weight:800}
  p.lead{margin:0 0 20px; color:var(--muted); font-size:14.5px; line-height:1.55}
  label.l{display:block; font-weight:700; font-size:13.5px; margin:0 0 7px}
  label.l small{font-weight:500; color:var(--muted)}
  .req{color:var(--orange)}
  input[type=text],input[type=tel],input[type=password],input[type=search],select,textarea{
    width:100%; font:inherit; font-size:15px; color:var(--ink);
    border:1.5px solid var(--line); background:var(--soft); border-radius:12px; padding:12px 14px; outline:none;
    transition:border-color .15s, background .15s, box-shadow .15s;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--blue2); background:#fff; box-shadow:0 0 0 4px rgba(27,99,232,.12)}
  input.err{border-color:var(--bad); background:#fff5f5}
  .btn{
    appearance:none; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:15px;
    padding:13px 22px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff;
    box-shadow:0 8px 20px rgba(255,122,26,.35); transition:transform .12s, box-shadow .12s, opacity .12s;
    text-decoration:none;
  }
  .btn:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,122,26,.42)}
  .btn:active{transform:translateY(0)}
  .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
  .btn.blue{background:linear-gradient(135deg,var(--blue),var(--blue2)); box-shadow:0 8px 20px rgba(15,63,174,.3)}
  .btn.ghost{background:var(--soft); color:var(--ink); box-shadow:none; border:1.5px solid var(--line)}
  .btn.ghost:hover{border-color:var(--blue2); color:var(--blue)}
  .btn.danger{background:#fff; color:var(--bad); border:1.5px solid #f3c9c9; box-shadow:none}
  .btn.sm{padding:8px 13px; font-size:13px; border-radius:10px}
  .btn.block{width:100%}
  .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .muted{color:var(--muted)}
  .msg{border-radius:12px; padding:12px 14px; font-size:14px; font-weight:600; margin-top:14px; display:none; line-height:1.45}
  .msg.show{display:block}
  .msg.bad{background:#fff1f1; color:#b42323; border:1px solid #f6caca}
  .msg.ok{background:#ecfbf2; color:#0c7a3b; border:1px solid #bfe9cf}
  .msg.info{background:#eef4ff; color:#1a3f99; border:1px solid #cfdcff}
  .pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--muted)}
  .pill.ok{background:#e6f8ee; color:#0c7a3b}
  .pill.warn{background:#fff3e6; color:#b45309}
  .spin{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; display:inline-block}
  .spin.dark{border-color:rgba(13,27,61,.15); border-top-color:var(--blue2)}
  @keyframes sp{to{transform:rotate(360deg)}}
  .hide{display:none !important}
  @media (max-width:600px){ .card{padding:20px} .brand img{height:48px} }