:root{
  --blue-900:#132163;
  --blue-700:#5a8ce0;
  --blue-600:#6f9fe8; /* Sesuai request user */
  --blue-500:#8cb5f2;
  --blue-100:#E6ECFF;
  --cream:#FFF8EC;
  --bg-stage:#fdfaf6;
  --pink:#ffd6e0;
  --pink-soft:#FFE1EA;
  --yellow:#fff3b0;
  --blue-pastel:#c0fdff;
  --ink:#152150;
  --ink-soft:#5A6280;
  --white:#FFFFFF;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,.brand-word{ font-family:'Baloo 2', sans-serif; }
a{color:inherit;}

.stage{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:28px;
  background-color: var(--bg-stage);
  overflow: hidden;
  z-index: 1;
}

.deco-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  z-index: -1;
  opacity: 0.8;
  animation: float 15s infinite alternate ease-in-out;
}
.deco-blob.pink { background: var(--pink); width: 450px; height: 450px; top: -100px; left: -100px; }
.deco-blob.yellow { background: var(--yellow); width: 400px; height: 400px; bottom: -50px; right: -50px; animation-delay: -2s; }
.deco-blob.blue { background: var(--blue-pastel); width: 500px; height: 500px; top: 30%; left: 20%; animation-delay: -5s; }

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -40px) scale(1.05); }
  100% { transform: translate(-30px, 30px) scale(0.95); }
}

.deco-spark{
  display: none; /* Disembunyikan agar rapi dengan bola-bola */
}

.frame{
  position:relative; z-index:1; width:100%; max-width:1080px; margin:auto;
  display:grid; grid-template-columns:1.05fr 1fr; background:var(--white);
  border-radius:32px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(19,33,99,.35);
}

.panel-brand{
  position:relative;
  background:linear-gradient(160deg,var(--blue-600) 0%, var(--blue-700) 62%, var(--blue-900) 100%);
  color:var(--white); padding:44px 40px 40px; display:flex; flex-direction:column;
  justify-content:space-between; overflow:hidden;
}
.panel-brand::before{
  content:""; position:absolute; width:260px;height:260px;
  background:rgba(255,255,255,.08); border-radius:50%; top:-90px; right:-90px;
}
.panel-brand::after{
  content:""; position:absolute; width:180px;height:180px; background:var(--pink);
  opacity:.35; border-radius:50%; bottom:-70px; left:-50px;
}

.brand-row{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.brand-mark{
  width:36px;height:36px; border-radius:11px; background:var(--white);
  display:flex;align-items:center;justify-content:center; font-size:18px; color:var(--blue-900); flex:none;
}
.brand-name{ font-weight:700; font-size:19px; letter-spacing:.2px; }

.brand-copy{ position:relative; z-index:1; margin-top:38px; }
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:600; margin-bottom:18px;
}
.panel-brand h1{ font-size:clamp(28px,3.4vw,38px); line-height:1.14; font-weight:700; margin:0 0 14px; }
.panel-brand p{ font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.86); max-width:34ch; margin:0; }

.story-card{
  position:relative; z-index:1; margin-top:30px; background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-md); padding:16px;
}
.story-people{ display:flex; align-items:center; }
.avatar{
  width:34px;height:34px; border-radius:50%; display:flex;align-items:center;justify-content:center;
  font-size:12px; font-weight:700; color:var(--blue-900); border:2px solid var(--blue-700); margin-left:-9px;
}
.avatar:first-child{margin-left:0;}
.story-people .avatar:nth-child(1){background:var(--pink);}
.story-people .avatar:nth-child(2){background:var(--yellow);}
.story-people .avatar:nth-child(3){background:#B9E4FF;}
.story-text{ margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.85); }
.story-text strong{color:#fff;}

.panel-foot{ position:relative; z-index:1; display:flex; gap:22px; margin-top:28px; font-size:12.5px; color:rgba(255,255,255,.7); }

.panel-form{ padding:46px 46px 38px; display:flex; flex-direction:column; justify-content:center; }
.form-head{margin-bottom:26px;}
.form-head h2{ font-size:26px; font-weight:700; margin:0 0 8px; color:var(--blue-900); }
.form-head p{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.form-head p a{ color:var(--blue-600); font-weight:600; text-decoration:none; }
.form-head p a:hover{text-decoration:underline;}

form{display:flex;flex-direction:column;gap:16px;}

.field label{ display:block; font-size:13px; font-weight:600; color:var(--blue-900); margin-bottom:6px; }
.input-wrap{
  position:relative; display:flex; align-items:center; border:1.6px solid #E4E7F5;
  background:#FBFBFF; border-radius:var(--radius-sm);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-wrap:focus-within{ border-color:var(--blue-600); box-shadow:0 0 0 4px var(--blue-100); background:var(--white); }
.input-wrap.has-error{ border-color:#FF6B7A; box-shadow:0 0 0 4px #FFE3E6; }
.input-icon{ width:20px;height:20px; margin-left:14px; flex:none; color:#9AA2C0; }
.input-wrap:focus-within .input-icon{color:var(--blue-600);}

.input-wrap input{
  flex:1; border:none; outline:none; background:transparent; padding:13px 12px;
  font-size:14.5px; font-family:inherit; color:var(--ink); min-width:0;
}
.input-wrap input::placeholder{color:#AEB4CE;}

/* Sembunyikan ikon mata bawaan dari browser (Edge dll) */
.input-wrap input::-ms-reveal,
.input-wrap input::-ms-clear {
  display: none;
}

.toggle-pass{ background:none; border:none; cursor:pointer; padding:0 14px; color:#9AA2C0; display:flex; align-items:center; flex:none; }
.toggle-pass:hover{color:var(--blue-600);}
.toggle-pass svg{width:19px;height:19px;}

.error-msg{ font-size:12.5px; color:#E24C5B; margin-top:6px; min-height:1px; display:none; }
.error-msg.show{display:block;}

.row-between{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; margin-top:2px; }
.remember{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.remember input{ width:16px;height:16px; accent-color:var(--blue-600); cursor:pointer; }
.link-forgot{ color:var(--blue-600); text-decoration:none; font-weight:600; }
.link-forgot:hover{text-decoration:underline;}

.btn-submit{
  margin-top:6px; border:none; cursor:pointer; background:var(--blue-600); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700; padding:14px 18px; border-radius:var(--radius-sm);
  box-shadow:0 14px 26px -12px rgba(47,94,255,.7);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-submit:hover{ background:var(--blue-700); transform:translateY(-1px); box-shadow:0 18px 30px -12px rgba(47,94,255,.8); }
.btn-submit:active{transform:translateY(0);}
.btn-submit[disabled]{ opacity:.75; cursor:not-allowed; transform:none; }
.spinner{
  width:16px;height:16px; border-radius:50%; border:2.4px solid rgba(255,255,255,.5);
  border-top-color:#fff; animation:spin .7s linear infinite; display:none;
}
.spinner.show{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

.divider{ display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:#B6BBD6; font-size:12.5px; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:#ECEEF7; }

.social-row{ display:flex; gap:12px; }
.btn-social{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1.6px solid #E4E7F5; background:#fff; border-radius:var(--radius-sm); padding:11px 10px;
  font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.btn-social:hover{border-color:var(--blue-500);background:var(--blue-100);}
.btn-social svg{width:17px;height:17px;flex:none;}

.signup-note{ margin-top:22px; text-align:center; font-size:13.5px; color:var(--ink-soft); }
.signup-note a{ color:var(--blue-600); font-weight:700; text-decoration:none; }
.signup-note a:hover{text-decoration:underline;}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--blue-900); color:#fff; padding:13px 22px; border-radius:999px;
  font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:20; box-shadow:0 16px 30px -12px rgba(19,33,99,.55);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:860px){
  .frame{ grid-template-columns:1fr; max-width:480px; }
  .panel-brand{ padding:34px 30px 60px; }
  .panel-brand h1{font-size:26px;}
  .story-card{margin-top:22px;}
  .panel-foot{display:none;}
  .panel-form{padding:34px 30px 32px;}
}
@media (max-width:420px){
  .stage{padding:14px;}
  .frame{border-radius:24px;}
  .panel-brand{padding:28px 22px 46px;}
  .panel-form{padding:28px 22px 26px;}
  .social-row{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  .deco-spark{animation:none;}
  .btn-submit,.btn-social,.input-wrap{transition:none;}
}
:focus-visible{ outline:2.5px solid var(--blue-600); outline-offset:2px; }
/* ==========================================================================
   STAGGERED ENTRANCE ANIMATION
   ========================================================================== */

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Panel kiri — urut satu-satu */
.brand-row {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.05s;
}
.eyebrow-pill {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.18s;
}
.panel-brand h1 {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.3s;
}
.panel-brand p {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.42s;
}
.story-card {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.54s;
}
.panel-foot {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.66s;
}

/* Panel kanan (form) — nyusul abis panel kiri kelar */
.form-head {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.4s;
}
.field:nth-of-type(1) {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.52s;
}
.field:nth-of-type(2) {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.62s;
}
.row-between {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.72s;
}
.btn-submit {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.82s;
}

/* Bungkus wrapper card demo akun biar ikut kena stagger juga */
form > div[style*="border-top"] {
  animation: fadeSlideUp 0.6s ease-out both;
  animation-delay: 0.92s;
}

/* Frame keseluruhan tetap fade duluan biar transisinya mulus */
.frame {
  animation: fadeSlideUp 0.45s ease-out both;
}

/* Hormati preferensi reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .brand-row,
  .eyebrow-pill,
  .panel-brand h1,
  .panel-brand p,
  .story-card,
  .panel-foot,
  .form-head,
  .field,
  .row-between,
  .btn-submit,
  form > div[style*="border-top"],
  .frame {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}