/*
 * Stylesheet mandiri untuk login, pendaftaran, status pembayaran, dan offline.
 * Semua selector dibatasi oleh body.auth-page agar tidak memengaruhi area lain.
 */
:root{
  --auth-blue:#1769ff;
  --auth-cyan:#19a9e8;
  --auth-text:#10213f;
  --auth-muted:#687891;
  --auth-line:#cdd8e8;
}
body.auth-page,
body.auth-page *,
body.auth-page *::before,
body.auth-page *::after{box-sizing:border-box}
body.auth-page{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--auth-text);
  background:
    radial-gradient(circle at 12% 15%,rgba(31,169,255,.18),transparent 28rem),
    radial-gradient(circle at 88% 85%,rgba(40,201,190,.15),transparent 26rem),
    linear-gradient(145deg,#f8fbff 0%,#eef5ff 52%,#f8fcff 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.auth-page button,
body.auth-page input,
body.auth-page select,
body.auth-page textarea{font:inherit}
body.auth-page button{cursor:pointer}
body.auth-page a{color:inherit}
body.auth-page img{max-width:100%}
body.auth-page .muted{color:var(--auth-muted)}
body.auth-page::before,
body.auth-page::after{
  content:"";
  position:fixed;
  z-index:0;
  border-radius:999px;
  pointer-events:none;
  filter:blur(1px);
}
body.auth-page::before{
  width:22rem;
  height:22rem;
  left:-10rem;
  top:-9rem;
  border:1px solid rgba(37,99,235,.10);
  box-shadow:0 0 0 4rem rgba(37,99,235,.025),0 0 0 8rem rgba(8,145,178,.018);
}
body.auth-page::after{
  width:18rem;
  height:18rem;
  right:-7rem;
  bottom:-7rem;
  background:linear-gradient(145deg,rgba(37,99,235,.05),rgba(34,211,238,.11));
}
.auth-card{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100vh;
  padding:42px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.auth-card>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 22px;
  text-decoration:none;
}
.auth-logo{
  display:block;
  width:210px;
  max-width:62vw;
  height:auto;
  object-fit:contain;
}
.auth-card>.card{
  width:min(470px,100%);
  margin:0;
  padding:32px;
  border:1px solid rgba(195,210,232,.85);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(28,65,125,.14);
  backdrop-filter:blur(14px);
}
.auth-card>.card h1{
  margin:0 0 8px;
  color:#0d1f3d;
  font-size:31px;
  line-height:1.18;
  letter-spacing:-.035em;
}
.auth-card>.card>.muted{
  margin:0 0 22px;
  color:var(--auth-muted);
  font-size:14px;
  line-height:1.65;
}
.auth-card>.card form{display:grid;gap:15px}
.auth-card .field{display:grid;gap:7px;margin:0}
.auth-card .field label{
  display:block;
  margin:0;
  color:#263a58;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}
.auth-card .field input,
.auth-card .field select,
.auth-card .field textarea{
  width:100%;
  min-height:49px;
  margin:0;
  padding:11px 13px;
  border:1px solid var(--auth-line);
  border-radius:13px;
  background:#fff;
  color:#15253f;
  font-size:14px;
  outline:0;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.auth-card .field input::placeholder,
.auth-card .field textarea::placeholder{color:#9aa7b8}
.auth-card .field input:focus,
.auth-card .field select:focus,
.auth-card .field textarea:focus{
  border-color:#6ea0f3;
  box-shadow:0 0 0 4px rgba(37,99,235,.11);
}
.auth-card .field small{
  display:block;
  margin:0;
  color:#7a899d;
  font-size:12px;
  line-height:1.45;
}
.auth-card .btn{
  min-height:49px;
  border:1px solid transparent;
  border-radius:13px;
  padding:11px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:850;
  text-decoration:none;
}
.auth-card .btn.primary{
  background:linear-gradient(135deg,var(--auth-blue),var(--auth-cyan));
  color:#fff;
  box-shadow:0 10px 24px rgba(23,105,255,.24);
}
.auth-card .btn.primary:hover{
  background:linear-gradient(135deg,#115dde,#0799dc);
  box-shadow:0 13px 28px rgba(23,105,255,.30);
}
.auth-card .btn:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
.auth-card>.card>p:last-child{
  margin:20px 0 0;
  color:#66758a;
  font-size:13px;
  text-align:center;
}
.auth-card>.card>p:last-child a{
  color:var(--auth-blue)!important;
  font-weight:800;
  text-decoration:none;
}
.auth-card>.card>p:last-child a:hover{text-decoration:underline}
.auth-card .alert{
  margin:0 0 15px;
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  line-height:1.55;
}
.auth-card .alert.error{border:1px solid #fecaca;background:#fff1f2;color:#991b1b}
.auth-card .alert.info{border:1px solid #cfe0fb;background:#f1f6ff;color:#244f8d}
.auth-card .alert.success{border:1px solid #bfe5d5;background:#effbf6;color:#176144}
.payment-return-card>.card{text-align:center}
.return-status{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:22px;
  font-size:34px;
  font-weight:900;
}
.return-status.success{background:#eafaf3;color:#15805b;border:1px solid #c4ebda}
.return-status.pending{background:#eef5ff;color:#2563eb;border:1px solid #d4e3ff}
@media (max-width:560px){
  .auth-card{padding:28px 14px}
  .auth-logo{width:184px}
  .auth-card>.card{padding:24px 20px;border-radius:20px}
  .auth-card>.card h1{font-size:27px}
}