:root{
      --red-1:#ff6b6b;
      --red-2:#ff9aa9;
      --blue-1:#4f86ff;
      --blue-2:#c9ddff;
      --ink:#1f2937;  
      --banner-anim-duration: 8s;
    }

    html, body { height: 100%; background: #f6f7fb; color: var(--ink); }

    .auth-wrap{ min-height: 100vh; }

    /* Left pane */
    .brand-badge{
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.5rem .9rem; border-radius:999px;
      background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.06);
      font-weight:600;
    }

    .card-clean{
      border:0; box-shadow:0 10px 30px rgba(0,0,0,.06);
      border-radius:20px;
    }

    .btn-gradient{
      /*background: linear-gradient(135deg, var(--red-1), var(--blue-1));*/
      background:linear-gradient(135deg, #4075aa, #89a877);
      border:0;
    }
    .btn-gradient:hover{ filter: brightness(.95); }

    /* Right banner with smooth red & blue */
    .banner{
      position:relative; min-height: 60vh; 
      border-radius: 24px;
      overflow:hidden; isolation:isolate;
        animation: color-fade 20s linear infinite;
    
    transition:
    width 700ms cubic-bezier(.2,.9,.3,1),
    right 700ms cubic-bezier(.2,.9,.3,1),
    top 700ms cubic-bezier(.2,.9,.3,1),
    height 700ms cubic-bezier(.2,.9,.3,1),
    border-radius 700ms cubic-bezier(.2,.9,.3,1);
  
      background:
        radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%),
        radial-gradient(800px 400px at 100% 0%, var(--red-2), transparent 55%),
        linear-gradient(135deg, var(--red-1) 0%, #ffb2b2 35%, #b8ccff 65%, var(--blue-1) 100%);
    }
    
    .banner-final {
         transition:
    width 700ms cubic-bezier(.2,.9,.3,1) ,
    right 700ms cubic-bezier(.2,.9,.3,1) ,
    top 700ms cubic-bezier(.2,.9,.3,1) ,
    height 700ms cubic-bezier(.2,.9,.3,1) ,
    border-radius 700ms cubic-bezier(.2,.9,.3,1) ;

                            top: 0 !important;
                            right: 0 !important;
                            width: 100% !important;
                            height: 100% !important;
                            border-radius: 0 !important;
                            zIndex: 9999
    }
    .policy-card.remove{
        opacity:0;
        transition:all 0.6s ease-in;
    }
    .banner.expanded {
          width: 94.5% !important;
          /* jika mau juga bergerak ke left: 24px, tambahkan left:24px; dan pastikan position sudah absolute/relative sesuai */
        }
    @keyframes color-fade {
      /* red on 0–33%, then fade to yellow */
          0%     { background: radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%),
            radial-gradient(800px 400px at 100% 0%, var(--red-2), transparent 55%),
            linear-gradient(135deg, var(--red-1) 0%, #ffb2b2 35%, #b8ccff 65%, var(--blue-1) 100%); }
          30%    { background: radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%), radial-gradient(800px 400px at 100% 0%, #e6b98e, transparent 55%), linear-gradient(135deg, #eaba8b 0%, #ebbb8b 35%, #b8ccff 65%, var(--blue-1) 100%)
    ; }
          33.333%{ background: radial-gradient(1200px 500px at 0% 100%, #a4b16b, transparent 60%), radial-gradient(800px 400px at 100% 0%, var(--red-2), transparent 55%), linear-gradient(135deg, #faad5c 0%, #ffb2b2 35%, #91ad66 65%, #72a65f 100%)
    ; }
          63.333%{ background: radial-gradient(1200px 500px at 0% 100%, #a4b16b, transparent 60%), radial-gradient(800px 400px at 100% 0%, var(--red-2), transparent 55%), linear-gradient(135deg, #faad5c 0%, #ffb2b2 35%, #91ad66 65%, #72a65f 100%)
    ; }
          66.666%{ background: radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%), radial-gradient(800px 400px at 100% 0%, #e6b98e, transparent 55%), linear-gradient(135deg, #eaba8b 0%, #ebbb8b 35%, #b8ccff 65%, var(--blue-1) 100%)
    ; }
          96.666%{ background: radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%), radial-gradient(800px 400px at 100% 0%, #e6b98e, transparent 55%), linear-gradient(135deg, #eaba8b 0%, #ebbb8b 35%, #b8ccff 65%, var(--blue-1) 100%)
    ; }
          100%   { background: radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%),
            radial-gradient(800px 400px at 100% 0%, var(--red-2), transparent 55%),
            linear-gradient(135deg, var(--red-1) 0%, #ffb2b2 35%, #b8ccff 65%, var(--blue-1) 100%)
    ; } /* loop back */
        }
.banner.expanded-final {
  transition: none !important; /* hentikan transition setelah final */
}
    
    .banner:before,
    .banner:after{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      will-change: opacity, transform;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      transition: opacity .6s linear;
      pointer-events: none;
    }
    .banner::before{
  /*background:*/
  /*  radial-gradient(1200px 500px at 0% 100%, #4075aa, transparent 60%),*/
  /*  radial-gradient(800px 400px at 100% 0%, var(--red-2), transparent 55%),*/
  /*  linear-gradient(135deg, var(--red-1) 0%, #ffb2b2 35%, #b8ccff 65%, var(--blue-1) 100%);*/
  
  background: linear-gradient(135deg, #4075aa, #89a877);
  
  opacity: 1;
  animation: bg-pan-before calc(var(--banner-anim-duration) * 1) ease-in-out infinite alternate;
  /* kita juga jalankan opacity animation yg kebalikan dari ::after */
  animation-name: bg-pan-before, bg-fade-before;
  animation-duration: calc(var(--banner-anim-duration) * 1), var(--banner-anim-duration);
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, normal;
}
   .banner::after{
  /*background:*/
  /*  radial-gradient(1200px 500px at 0% 100%, var(--blue-2), transparent 60%),*/
  /*  radial-gradient(800px 400px at 100% 0%, #e6b98e, transparent 55%),*/
  /*  linear-gradient(135deg, #eaba8b 0%, #ebbb8b 35%, #b8ccff 65%, var(--blue-1) 100%);*/
  
    background: linear-gradient(135deg, #89a877, #4075aa);
    
  opacity: 0;
  animation-name: bg-pan-after, bg-fade-after;
  animation-duration: calc(var(--banner-anim-duration) * 1), var(--banner-anim-duration);
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, normal;
}

/* opacity keyframes: before is visible while after hidden, then they swap */
@keyframes bg-fade-before {
  0%   { opacity: 1; }
  40%  { opacity: 0; }
  60%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bg-fade-after {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* subtle pan/scale to add motion to each layer */
/*@keyframes bg-pan-before {*/
/*  0%   { transform: translateY(0) scale(1); }*/
/*  100% { transform: translateY(-2%) scale(1.02); }*/
/*}*/
/*@keyframes bg-pan-after {*/
/*  0%   { transform: translateY(2%) scale(1.02); }*/
/*  100% { transform: translateY(0) scale(1); }*/
/*}*/

/* aksesibilitas: kalau user minta reduced motion, matikan animation */
@media (prefers-reduced-motion: reduce) {
  .banner::before,
  .banner::after {
    animation: none !important;
  }
  .banner::before { opacity: 1; }
  .banner::after  { opacity: 0; }
}

    /* Floating mini card on banner */
    .mini-card{
      position:absolute; top:40px; left:40px; z-index:3;
      background:#ffffffcc; backdrop-filter: blur(6px);
      border:1px solid #ffffff66; border-radius:16px; padding:14px 16px;
      box-shadow:0 10px 30px rgba(0,0,0,.12);
      max-width: 280px;
    }
    .mini-chip{
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
      background:#00000012; color:#111;
    }

    /* Responsive tweaks */
    @media (max-width: 991.98px){
      .banner{ border-radius:18px; min-height: 42vh; }
    }
    
    .banner::before,
.banner::after{
  z-index:1; /* di atas .bg (0), di bawah konten/policy-card (>=2) */
}

    /* Card info di sisi kanan banner */
/* Policy card memang ingin di pojok kanan bawah? Tambahkan posisi absolut di desktop */
.policy-card{
  position:absolute;  /* <-- tambahkan ini */
  top:10px; z-index:3;
  margin:40px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  color:#1f2937;
  transition: transform .3s ease-in;
}
.policy-card:hover{ transform: scale(1.02); }

/* Mobile: kembali ke statis */
@media (max-width: 991.98px){
  .policy-card{
    position: static; margin: 14px; max-width: unset;
  }
}


.policy-card .chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.28rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600;
  color:#fff;
  /* gunakan palet yang kamu minta (#db3231, #2f405a, #e3781c, #569140) */
  background: linear-gradient(135deg, #db3231, #e3781c 45%, #569140);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.policy-card h5{
  font-size: 1rem; margin: .6rem 0 .4rem 0; font-weight: 700;
}

.policy-card p{ margin-bottom:.5rem; }
.policy-card ul{ margin:0 0 .2rem 0; }

.policy-card a{ text-decoration: none; }
.policy-card a:hover{ text-decoration: underline; }

/* Responsive: di mobile, taruh card jadi statis (di bawah banner) */
@media (max-width: 991.98px){
  .policy-card{
    position: static; margin: 14px; max-width: unset;
  }
}



.fade-out-login{
    transform: translateX(-100px);
    opacity:0;
    transition: all 0.5s ease-in-out;
}


 .typing-wrap{min-height:1.5rem;font-weight:600;color:#6c757d}
  .typed-cursor{opacity:1;animation:typedBlink .7s infinite}
  @keyframes typedBlink{50%{opacity:0}}