:root{
    --page-bg: #060607;

    --card-bg: linear-gradient(180deg,#032117 0%, #021610 100%);
    --card-border: rgba(0,255,170,0.10);

    /* inputs (distinct from card) */
    --input-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
    --input-border: rgba(255,255,255,0.04);

    --muted: #9aa4b2;
    --gold-a: #fff7a8;
    --gold-b: #ffe15c;
    --gold-c: #ffcb11;
    --gold-d: #d69f00;
    --gold-gradient: linear-gradient(90deg,var(--gold-a),var(--gold-b),var(--gold-c));
    --gold-gradient-strong: linear-gradient(90deg,var(--gold-b),var(--gold-c),var(--gold-d));
    --text-dark-on-gold: #0a0d04;
    --pill-radius: 999px;
    --input-height:48px;
    --gap:10px;

    /* logo size (single source of truth) */
    --logo-size: 65px;
    --logo-radius: 12px;
  }

  html,body{
    height:100%;
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica;
    background:var(--page-bg);
    color:#f2f6ff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;}

  /* card */
  .card{
    width:100%;max-width:520px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius:14px;
    padding:18px;
    box-shadow:
      0 18px 60px rgba(3,8,15,0.75),
      inset 0 1px 0 rgba(255,255,255,0.02),
      0 0 40px rgba(212,175,55,0.02);
    box-sizing:border-box;
  }

  /* header center: center brand + hero horizontally, compact vertical spacing */
  .header-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    margin-bottom:10px;
  }

  /* brand (logo + text) */
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    justify-content:center;
    margin-bottom:8px;
  }

  /* logo container (transparent background; use image file that has no yellow box) */
  .logo-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--logo-size);
    height:var(--logo-size);
    border-radius:var(--logo-radius);
    overflow:hidden;
    flex-shrink:0;
    text-decoration:none;
    background:var(--gold-gradient-strong); /* kept as in original */
    box-shadow:0 10px 34px rgba(255,190,30,0.12), inset 0 -6px 12px rgba(255,255,255,0.04);
    border:0;
  }
  .logo-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    vertical-align:middle;
  }
  .logo-link:focus{
    outline: 3px solid rgba(255,203,17,0.18);
    outline-offset: 2px;
  }

  /* brand-text */
  .brand-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:75px;
    gap:4px;
    box-sizing:border-box;
  }

  /* Title & subtitle */
  /* brand-text */
  .brand-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:75px;
    gap:4px;
    box-sizing:border-box;
  }

  /* Title & subtitle */
  .brand h1{
    margin:0;
    font-size:43px;
    font-weight:800;
    letter-spacing:0.6px;
    line-height:0.9;
  }
  .brand p{
    margin:0;
    color:var(--muted);
    font-size:22px;
    line-height:1.05;
  }

  .hero{
    margin:12px 0 14px;
  }
  .hero h2{
    margin:0;
    font-size:20px;
    color:var(--gold-c);
    font-weight:900;
    text-shadow:0 4px 18px rgba(255,190,20,0.12);
  }
.hero p{
  margin:6px 0 0;
  font-size:11px;
  font-weight:700;      /* tebal */
  color:#ffffff;        /* putih */
}

  /* form */
  form{display:flex;flex-direction:column;gap:var(--gap);margin-top:8px}

  .input{
    background: var(--input-bg);
    border:1px solid var(--input-border);
    height:var(--input-height);
    padding:0 12px;
    border-radius:12px;
    display:flex;align-items:center;gap:8px;color:#fff;
    box-shadow: inset 0 -6px 16px rgba(0,0,0,0.55);
    box-sizing:border-box;
  }
  .input input{
    background:transparent;border:0;outline:none;color:inherit;font-size:15px;width:100%;height:100%;padding:0;margin:0;
  }

  .input:focus-within{
    box-shadow: 0 8px 40px rgba(2,6,10,0.6), inset 0 -6px 16px rgba(0,0,0,0.55), 0 0 0 4px rgba(255,203,17,0.05);
    border-color: rgba(255,203,17,0.12);
  }

  .row{display:flex;gap:8px;align-items:center;}
  .col{flex:1}

  .small{
    height:var(--input-height) !important;
    padding:0 12px !important;
    border-radius:12px !important;
    font-size:15px !important;
    display:inline-flex;align-items:center;justify-content:center;
  }

  .btn-gold{
    display:inline-flex;align-items:center;justify-content:center;
    height:var(--input-height);
    min-width:88px;padding:0 14px;border-radius:12px;border:0;
    background:var(--gold-gradient);color:var(--text-dark-on-gold);
    font-weight:800;font-size:15px;line-height:1;cursor:pointer;
    box-shadow: 0 10px 34px rgba(255,180,20,0.12), inset 0 -4px 10px rgba(255,255,255,0.06);
    transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
    vertical-align:middle;
  }
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(255,180,20,0.18);}
  .btn-gold:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

  .register-btn{
    height:var(--input-height);
    border-radius:999px;background:var(--gold-gradient-strong);
    color:var(--text-dark-on-gold);border:0;font-weight:900;cursor:not-allowed;
    box-shadow:0 18px 56px rgba(200,140,10,0.12);
    transition:all .12s;width:100%;padding:0 18px;font-size:15px;
  }
  .register-btn.active{cursor:pointer;transform:translateY(-2px);box-shadow:0 24px 68px rgba(200,140,10,0.22);}

  .muted{color:var(--muted);font-size:13px}
  .agree{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
  .agree input{width:18px;height:18px}
  .register-wrap{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  .download{display:block;text-align:center;color:var(--gold-a);text-decoration:underline;font-size:14px;margin-top:6px}

  .icon-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px}

  .captcha-display{font-family:monospace;font-weight:800;letter-spacing:2px;font-size:16px;padding:8px 12px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--text-dark-on-gold);box-shadow: inset 0 -3px 8px rgba(255,255,255,0.04);height:var(--input-height);display:flex;align-items:center;}
  #captchaBtn{font-family:monospace;letter-spacing:2px;height:var(--input-height);padding:0 14px;border-radius:12px;}

  .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:flex-end;z-index:60}
  .modal{width:100%;max-width:720px;background:#0c0d0e;border-radius:12px 12px 0 0;padding:16px;box-shadow:0 -8px 40px rgba(0,0,0,0.7);transform:translateY(100%);transition:.28s cubic-bezier(.22,.9,.35,1)}
  .modal.open{transform:translateY(0)}
  .modal-backdrop.open{display:flex}
  .modal-title{color:var(--gold-a)}
  .btn-primary{background:var(--gold-gradient);border:0;color:var(--text-dark-on-gold);font-weight:800;padding:10px 16px;border-radius:10px}
  .btn-primary:disabled{opacity:.5}
  .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted);padding:10px 16px;border-radius:10px}

  @media(min-width:920px){
    .card{max-width:720px}
  }

  @media(min-width:720px){
    .card{padding:20px}
    .wrap{padding:18px}
    .modal{margin:0 auto;padding:18px}
  }