/* =========================================================================
   📁 FILE: /static/css/signup.css
   📝 BRISTLE · SIGNUP · Vision Pro Glass (Light) · Konsisten index/login
   ========================================================================= */

/* ============================== BASE & LAYOUT ============================== */
html,body{height:auto!important;min-height:100svh;overflow-y:auto!important}
.phone.signup-card{
  width:clamp(300px,92vw,420px);
  padding:22px 22px 20px;
  border-radius:var(--r);
  background:transparent;
  border:none;
  box-shadow:none;
}
.phone.signup-card .hero{display:grid;justify-items:center;gap:6px;text-align:center}
.phone.signup-card .signup-subtitle{
  margin:2px 0 12px;line-height:1.35;color:var(--fg-2);text-align:center
}

/* ============================== FIELDSET ============================== */
.field{display:block;margin-top:12px}
.label-text{display:block;margin:0 0 6px;color:var(--fg-2);font-size:12px}
.input-wrap{position:relative}

/* ============================== INPUTS · GLASS TIPIS ============================== */
input,select,textarea{
  width:100%;
  border-radius:14px;
  padding:12px 42px 12px 14px;
  color:var(--fg);
  font:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease)
}
input::placeholder{color:rgba(255,255,255,.45)}
input:focus{
  outline:0;
  border-color:rgba(255,255,255,.38);
  box-shadow:0 0 0 2px rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.10);
}

/* ============================== PASSWORD TOGGLE (TRANSPARENT) ============================== */
.password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:transparent!important;border:none!important;box-shadow:none!important;
  width:auto;height:auto;padding:0;color:var(--fg-2);cursor:pointer
}
.password-toggle i{font-size:1.05rem;line-height:1}
.password-toggle:hover,.password-toggle:focus-visible{color:var(--fg);outline:0}

/* ============================== DIVIDER ============================== */
.login-divider{
  margin:14px 0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent)
}

/* ============================== BUTTON · TRANSPARENT BORDER ============================== */
.btn-submit{
  width:100%;position:relative;cursor:pointer;
  padding:13px 14px;border-radius:999px;
  background:transparent;color:var(--fg);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  font-weight:800;letter-spacing:.04em;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform .14s var(--ease)
}
.btn-submit:hover{border-color:rgba(255,255,255,.82);box-shadow:0 12px 26px rgba(0,0,0,.10)}
.btn-submit:active{transform:translateY(0)}
.btn-submit:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,186,126,.22),0 8px 20px rgba(0,0,0,.06)}

/* ============================== LOADING OVERLAY (RADIUS INHERIT + BRIGHT) ============================== */
:root{
  --btn-bar-bg: rgba(255,255,255,.12);
  --btn-bar-fill-a: rgba(255,230,205,.85);
  --btn-bar-fill-b: rgba(255,176,116,.70);
  --btn-bar-glow: rgba(255,186,126,.34);
}
.btn-submit{overflow:hidden}
.btn-submit .loading-bar{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg, var(--btn-bar-bg), rgba(255,255,255,.06));
  opacity:0;pointer-events:none;transition:opacity .25s ease;border-radius:999px
}
.btn-submit.loading .loading-bar{opacity:1}
.btn-submit.loading .btn-text{opacity:0}
.bar-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg, var(--btn-bar-fill-a), var(--btn-bar-fill-b));
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 0 22px var(--btn-bar-glow)
}
.progress-text{font-size:.9rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.note-text{font-size:.8rem;color:rgba(255,255,255,.95);opacity:.95;margin-top:2px}

/* ============================== META LINK (ORANGE HALUS) ============================== */
:root{
  --accent-warm:#ff9a5a;        /* orange halus (sunset) */
  --accent-warm-strong:#ff8037; /* hover */
}
.phone.signup-card .meta{ text-align:center;color:var(--fg-2) }
.phone.signup-card .meta .link{
  color:var(--accent-warm);text-decoration:none;font-weight:700;
  transition:color var(--dur) var(--ease), opacity var(--dur) var(--ease)
}
.phone.signup-card .meta .link:visited{color:var(--accent-warm)}
.phone.signup-card .meta .link:hover,
.phone.signup-card .meta .link:focus-visible{
  color:var(--accent-warm-strong);text-decoration:none!important;outline:0;opacity:.98
}

/* ============================== SOCIAL (KONSISTEN LOGIN/SIGNUP) ============================== */
.social{ display:flex; justify-content:center; gap:10px; margin-top:14px }
.social a{
  width:34px; height:34px; display:grid; place-items:center; border-radius:999px;
  color:var(--fg); text-decoration:none;
  background:transparent; border:none; box-shadow:none;
  transition: opacity var(--dur) var(--ease), transform .14s var(--ease);
  font-size:1.05rem;
}
.social a:hover{ opacity:.9; transform: translateY(-1px) }

/* ============================== ERROR STATE (SELALU MENANG) ============================== */
.field .error-message{
  display:none !important;
  visibility:hidden;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .2s ease, transform .2s ease;
  align-items:center;
  gap:6px;
  color:#ffd1d1;
  font-size:.8rem
}
.field.has-error .error-message{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:translateY(0) !important
}
.field.has-error input{
  border-color:rgba(255,100,100,.6) !important;
  box-shadow:inset 0 0 0 1px rgba(255,100,100,.18) !important
}
.error-message.shake{
  animation:errorNudge 360ms cubic-bezier(.3,.7,.4,1) both
}
@keyframes errorNudge{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
}

/* ============================== PAGE ANIMATIONS (MATCH INDEX) ============================== */
@media (prefers-reduced-motion:no-preference){
  .bg{opacity:0;transform:scale(1.02);animation:bgFade 900ms ease-out forwards}
  .phone.signup-card{opacity:0;transform:translateY(12px) scale(.992);animation:cardIn 620ms var(--ease) 120ms forwards;will-change:transform,opacity,filter}
}
@keyframes bgFade{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1024px){
  .phone.signup-card{width:min(480px,94vw);padding:20px 16px;border-radius:var(--r)}
}
@media (max-width:480px){
  .phone.signup-card{width:92vw;padding:16px 14px;border-radius:var(--r-sm)}
  input,select,textarea{font-size:16px} /* iOS: >=16px agar tidak auto-zoom */
}