/* =====================================================
   AUTH PAGE – SIPENSI (FINAL CLEAN + SOFT COLOR)
===================================================== */

:root{
  --sipensi-blue: #22466C;
  --sipensi-teal: #2f7f8c;

  /* =========================
     SOFT BACKGROUND THEME (NEW)
     - lebih adem, gak ngejreng
  ========================= */
  --bg-1: #BFE4EE;                 /* soft sky teal */
  --bg-2: #8EC9DA;                 /* soft aqua */
  --bg-3: rgba(234, 244, 248, .92);/* very light */
  --bg-4: #ffffff;

  /* REGISTER VISUAL CONTROL */
  --reg-map-scale: 0.80;
  --reg-map-y: 200%;
  --reg-map-size: 74vh;

  --reg-net-scale: 1.08;
  --reg-net-opacity: .32;

  /* ORNAMENT (POJOK) */
  --orn-size: 850px;
  --orn-x: right -410px;
  --orn-y: top -370px;
  --orn-opacity: .26; /* sedikit lebih subtle */
}

/* =========================
   RESET
========================= */
html, body{
  width: 100%;
  overflow-x: hidden;
}

.auth-page,
.auth-page *{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI",
               Roboto, Arial, sans-serif;
}

/* =========================
   PAGE WRAPPER + BG GRADIENT
========================= */
.auth-page{
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  /* ✅ GRADIENT UTAMA (SOFT) */
  background: linear-gradient(
    170deg,
    var(--bg-1) 0%,
    var(--bg-2) 28%,
    var(--bg-3) 58%,
    var(--bg-4) 100%
  );
}

/* =========================
   ORNAMENT LAYER (POJOK)
========================= */
.auth-page::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("/assets/img/bunga_kemenumkm.png");
  background-repeat: no-repeat;
  background-position: var(--orn-x) var(--orn-y);
  background-size: var(--orn-size);

  opacity: 0;
  transform: translate3d(0,0,0) scale(1);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

/* content di atas background */
.auth-topbar,
.auth-main{
  position: relative;
  z-index: 5;
}

/* =========================
   TOPBAR
========================= */
.auth-topbar{
  background: transparent;
}

/* logo base */
.auth-logo{
  height: 54px !important;
  width: auto !important;
  max-height: none !important;
  object-fit: contain;
  transition: transform .18s ease, filter .18s ease;
}

/* kalau kamu mau SIPENSI juga ikut gede, naikin angka ini */
.auth-logo.auth-logo-sipensi{
  height: 30px !important;
  max-height: 30px !important;
}

.auth-nav-link{
  text-decoration: none;
  color: var(--sipensi-blue);
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 12px;
  transition: background .25s ease, color .25s ease;
}

.auth-nav-link:hover{
  background: rgba(34,70,108,0.10);
}

.auth-nav-link.active{
  background: var(--sipensi-blue);
  color: #fff;
}

/* LOGO GROUP CLICKABLE + HOVER */
.auth-logos-link{
  text-decoration: none;
  display: inline-flex;
  border-radius: 14px;
}

.auth-logos{
  padding: 6px 8px;
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-logos-link:hover .auth-logos{
  background: rgba(255,255,255,0.55);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.auth-logos-link:hover .auth-logo{
  transform: translateY(-1px);
}

/* =========================
   MAIN SPACING
========================= */
.auth-main{
  padding: 38px 0 80px;
}

/* =========================
   TYPOGRAPHY
========================= */
.auth-title{
  font-size: 48px;
  font-weight: 800;
  color: #212121;
  margin-top: 6px;
  text-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* FIX: buat page lupa password biar gak kegedean */
.auth-title-sm{
  font-size: 44px !important;
}

/* ✅ dulu putih, sekarang soft biar lebih “premium” */
.auth-subtitle{
  color: rgba(34,70,108,.78);
  margin-top: 10px;
}

/* =========================
   TITLE WRAP + DIVIDER
========================= */
.title-divider{
  width: min(520px, 86%);
  height: 4px;
  margin: 18px auto 30px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(34,70,108,.22) 0%,
    rgba(34,70,108,.10) 25%,
    rgba(255,255,255,.95) 50%,
    rgba(34,70,108,.10) 75%,
    rgba(34,70,108,.22) 100%
  );
}

/* =========================
   LINK STYLE (NO UNDERLINE)
========================= */
.auth-link{
  font-weight: 700;
  color: var(--sipensi-teal);
  text-decoration: none !important;
}

.auth-link:hover{
  opacity: .88;
}

/* =========================
   CARD + FORM
========================= */
.auth-card{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(34,70,108,0.10);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(34,70,108,0.10);
  backdrop-filter: blur(6px);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  z-index: 5;
}

.auth-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(34,70,108,0.14);
}

.auth-card-modern{
  border-radius: 16px;
  padding: 26px;
}

.auth-btn{
  background: var(--sipensi-blue) !important;
  border-color: var(--sipensi-blue) !important;
  color: #fff !important;
  font-weight: 900;
  border-radius: 10px;
}

.auth-btn:hover{
  filter: brightness(.95);
  color: #fff !important;
}

.form-control-lg{ border-radius: 12px; }
.form-control{ border: 1px solid rgba(34,70,108,0.14); }

.form-control:focus{
  border-color: rgba(142,201,218,0.95);
  box-shadow: 0 0 0 .18rem rgba(142,201,218,0.28);
}

.form-hint{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
}

/* =========================
   PAGE LOAD ANIMATION
========================= */
.page-loading *{ transition: none !important; }
.page-loading.auth-page{ opacity: 0; }

.page-loaded.auth-page{
  opacity: 1;
  transition: opacity .8s ease;
}

.page-loaded.auth-page::before{
  opacity: var(--orn-opacity);
  transform: scale(1.02);
}

/* =====================================================
   STAGGER ANIMATION (FIRST OPEN)
   - tinggal kasih class: stg stg-1, stg-2, dst di blade
===================================================== */

/* base state */
.auth-page .stg{
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

/* jangan jalanin stagger saat masih page-loading */
.auth-page.page-loading .stg{
  animation: none !important;
}

/* jalanin stagger ketika page-loading tidak ada / sudah lewat */
.auth-page:not(.page-loading) .stg{
  animation: authStgIn .65s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes authStgIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* arah kiri/kanan opsional */
.auth-page:not(.page-loading) .stg-left{
  transform: translateX(-14px);
  animation-name: authStgInLeft;
}
.auth-page:not(.page-loading) .stg-right{
  transform: translateX(14px);
  animation-name: authStgInRight;
}

@keyframes authStgInLeft{
  from{ opacity: 0; transform: translateX(-14px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes authStgInRight{
  from{ opacity: 0; transform: translateX(14px); }
  to{ opacity: 1; transform: translateX(0); }
}

/* delay preset */
.stg-1{ animation-delay: .06s; }
.stg-2{ animation-delay: .14s; }
.stg-3{ animation-delay: .22s; }
.stg-4{ animation-delay: .30s; }
.stg-5{ animation-delay: .38s; }
.stg-6{ animation-delay: .46s; }
.stg-7{ animation-delay: .54s; }
.stg-8{ animation-delay: .62s; }
.stg-9{ animation-delay: .70s; }
.stg-10{ animation-delay: .78s; }
.stg-11{ animation-delay: .86s; }
.stg-12{ animation-delay: .94s; }

/* aksesibilitas */
@media (prefers-reduced-motion: reduce){
  .auth-page .stg{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================
   MODAL FIX + TEAL BUTTONS
========================= */
.modal{ z-index: 1050 !important; }
.modal-backdrop{ z-index: 1040 !important; }
.modal-dialog, .modal-content{ pointer-events: auto !important; }
.modal-backdrop.show{ opacity: .25 !important; }

.help-modal, .help-modal *{
  font-family: "KoHo", sans-serif !important;
}

/* 3 tombol modal jadi TEAL */
.help-btn{
  border-radius: 12px;
  background: transparent !important;
  border: 1.5px solid rgba(47,127,140,0.55) !important;
  color: var(--sipensi-teal) !important;
  font-weight: 800;
  transition: all .25s ease;
  text-decoration: none !important;
}

.help-btn:hover,
.help-btn:focus{
  background: rgba(47,127,140,0.10) !important;
  border-color: rgba(47,127,140,0.75) !important;
  color: var(--sipensi-teal) !important;
  box-shadow: none !important;
}

.help-btn:active{
  background: rgba(47,127,140,0.16) !important;
  color: var(--sipensi-teal) !important;
}

.help-note{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
}

/* =========================
   LOGIN: logo besar (kontrol)
========================= */
.auth-title-logo img{
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
  margin: -50px auto -10px;
  pointer-events: none;
  user-select: none;
}

/* pastiin link di card bisa diklik */
.auth-card a,
.auth-card .auth-link{
  position: relative;
  z-index: 6;
}

/* =========================================
   REGISTER LEFT VISUAL (MAP + NET)
========================================= */
.auth-register-left{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.auth-register-left .left-visual{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* MAP UTAMA */
.auth-register-left .left-visual .register-visual-img{
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%) scale(1.0);
  width: 105%;
  height: auto;
  max-width: none;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* ORNAMEN BAWAH (NET) */
.auth-register-left .left-visual .net-banner{
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%) scale(1.08);
  width: 130%;
  height: auto;
  max-width: none;
  object-fit: cover;
  z-index: 1;
  opacity: .28;
  pointer-events: none;
  user-select: none;
  filter: blur(.25px);
}


/* Eye toggle button (password) */
.auth-eye-btn{
  border-radius: 0 12px 12px 0 !important;
  border-color: rgba(34,70,108,0.25) !important;
  color: rgba(34,70,108,0.85) !important;
  background: rgba(255,255,255,0.65) !important;
}

.auth-eye-btn:hover{
  background: rgba(34,70,108,0.08) !important;
  border-color: rgba(34,70,108,0.45) !important;
  color: rgba(34,70,108,1) !important;
}

/* rapihin input group biar radius mulus */
.input-group .form-control{
  border-right: 0;
}
.input-group .form-control:focus{
  border-right: 0;
}
/* =========================
   REGISTER RIGHT PADDING
========================= */
.register-form-col .auth-register-wrapper{
  padding-right: 50px; /* sesuaikan: 32 / 48 / 64 */
}