
  .auth-split {
    display:flex; align-items:center; justify-content:center; padding: 24px;
   
  }
  .auth-grid {
    width: 100%; max-width: 980px; background:#ffffff; border:1px solid #e5e7eb; border-radius: 20px; overflow:hidden;
    box-shadow: 0 24px 60px rgba(2,6,23,.08);
    display:grid; grid-template-columns: 1.1fr 1fr;
  }
  @media (max-width: 992px){ .auth-grid { grid-template-columns: 1fr; } }

  /* Left brand panel */
  .brand-panel {
    position:relative; padding: 40px 36px; color:#0f172a; background:
      linear-gradient(135deg, rgba(99,102,241,.08), rgba(59,130,246,.08));
  }
  .brand-badge{
    display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px;
    background:#06c32f; color:#fff; font-size:1rem;
  }
  .brand-badge i{ opacity:.9; }

  .brand-title{ margin:18px 0 8px; font-size:1.8rem; font-weight:800; letter-spacing:-.02em; color:#0f172a; }
  .brand-text { color:#334155; max-width: 44ch; }
  .brand-illus {
    margin-top: 24px; border-radius:16px; border:1px dashed #c7d2fe; background:
      conic-gradient(from 90deg at 50% 50%, #eef2ff, #e0f2fe, #ecfeff, #eef2ff);
    min-height: 160px; display:flex; align-items:center; justify-content:center;
  }
  .brand-illus i{ font-size:60px; color:#4f46e5; }

  .brand-list{ margin-top: 18px; padding-left: 0; list-style:none; color:#334155;}
  .brand-list li{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
  .brand-list i{ color:#16a34a; margin-top: 3px; }

  /* Right form panel */
  .form-panel{ padding: 36px 32px; background:#fff; }
  .form-title{ font-size: 1.25rem; font-weight:700; color:#0f172a; margin-bottom:4px; }
  .form-sub{ color:#64748b; margin-bottom: 18px; }

  .form-control, .input-group-text { border-radius:12px; }
  .form-control{
    border:1px solid #e5e7eb; background:#fff; color:#0f172a;
  }
  .form-control:focus{
    border-color:#a5b4fc; box-shadow:0 0 0 .2rem rgba(99,102,241,.20);
  }
  .input-group-text{ background:#f8fafc; color:#334155; border:1px solid #e5e7eb; }
  .btn-primary{
    background: linear-gradient(135deg, #4f46e5, #3b82f6); border:none; border-radius:12px;
  }
  .btn-outline{
    border-radius:12px; border:1px solid #e5e7eb; background:#fff; color:#0f172a;
  }
  .link-muted{ color:#64748b; text-decoration:none; }
  .link-muted:hover{ text-decoration:underline; }

  .divider{
    display:flex; align-items:center; gap:12px; margin: 18px 0; color:#94a3b8; font-size:.9rem;
  }
  .divider::before, .divider::after{
    content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  }

  /* Remember switch – minimal */
  .switch { position: relative; display:inline-block; width: 42px; height: 24px; margin-right:8px;}
  .switch input { display:none; }
  .slider {
    position:absolute; inset:0; background:#e5e7eb; border-radius:999px; transition:.2s;
  }
  .slider:before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.15);}
  .switch input:checked + .slider { background:#a5b4fc; }
  .switch input:checked + .slider:before{ transform: translateX(18px); }

  /* Footer small */
  .panel-footer{
    border-top:1px solid #f1f5f9; margin-top:18px; padding-top:16px; color:#64748b;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }
  /* ==== Animations — drop-in only (paste after your current <style>) ==== */

/* Entrance anim untuk container kartu */
.auth-grid{
  will-change: transform, opacity;
  animation: cardPop .6s cubic-bezier(.2,.8,.2,1) .05s both;
}

/* Staggered reveal di sisi brand */
.brand-badge{
  animation: floatUp .6s ease-out .10s both;
}
.brand-title{
  animation: floatUp .6s ease-out .18s both;
}
.brand-text{
  animation: floatUp .6s ease-out .24s both;
}
.brand-illus{
  animation: floatUp .6s ease-out .30s both;
}
.brand-illus i{
  animation: bob 4s ease-in-out infinite;
}

/* List fitur muncul berurutan */
.brand-list li{ opacity: 0; transform: translateY(8px); }
.brand-list li:nth-child(1){ animation: floatUp .6s ease-out .36s both; }
.brand-list li:nth-child(2){ animation: floatUp .6s ease-out .42s both; }
.brand-list li:nth-child(3){ animation: floatUp .6s ease-out .48s both; }
/* kalau list-nya lebih panjang, lanjutkan pola di atas... */

/* Focus state input lebih hidup (tanpa mengganggu style existing) */
.input-group{
  transition: box-shadow .2s, transform .2s;
}
.form-group .input-group:focus-within{
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.18);
  transform: translateY(-1px);
}

/* Button hover lift */
.btn-primary{
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
  box-shadow: 0 10px 20px rgba(79,70,229,.22);
}
.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(59,130,246,.26);
}
.btn-outline{
  transition: background .2s, transform .15s ease;
}
.btn-outline:hover{ transform: translateY(-1px); }

/* Divider shimmer halus */
.divider::before, .divider::after{
  animation: shimmer 2.8s linear infinite;
}

/* ===== Keyframes ===== */
@keyframes cardPop{
  0%{ transform: translateY(12px) scale(.985); opacity: .01; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes floatUp{
  0%{ transform: translateY(10px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes shimmer{
  0%{ opacity:.65; }
  50%{ opacity:.35; }
  100%{ opacity:.65; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}