/* Halaman login & halaman depan — Bootstrap 5.3, modern, mendukung mode gelap */
:root { --ease: cubic-bezier(.2,.8,.2,1); }
body.auth-body, body.front-body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased;
}
body.auth-body { display: flex; align-items: center; overflow-x: hidden; background: #0b1220; }

/* latar bergerak */
.auth-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: linear-gradient(135deg, #0b1220, #0f2a4a 45%, #1e1b4b); background-size: 200% 200%; animation: bgShift 18s ease infinite; }
@keyframes bgShift { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
.auth-bg .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: float 12s ease-in-out infinite; }
.orb-1 { width: 420px; height: 420px; background: #2563eb; top: -120px; left: -80px; }
.orb-2 { width: 480px; height: 480px; background: #7c3aed; bottom: -160px; right: -120px; animation-delay: -4s; }
.orb-3 { width: 260px; height: 260px; background: #06b6d4; top: 40%; left: 55%; opacity: .3; animation-delay: -8s; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-40px) scale(1.08); } }
.auth-bg .grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); }

.btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .25s var(--ease); }
.btn-glass:hover { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-1px); }

.auth-card { border-radius: 28px; background: var(--bs-body-bg); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.12); animation: cardIn .8s var(--ease) both; }
[data-bs-theme="dark"] .auth-card { background: #111a2c; }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.auth-brand { position: relative; color: #fff; background: linear-gradient(160deg, #1d4ed8 0%, #4338ca 55%, #312e81 100%); }
.auth-brand::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 85% 90%, rgba(255,255,255,.18), transparent 45%),
  radial-gradient(circle at 10% 0%, rgba(6,182,212,.35), transparent 40%); pointer-events: none; }
.auth-brand > * { position: relative; }
.brand-logo { width: 68px; height: 68px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 2rem; overflow: hidden;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); }
.brand-logo img { width: 100%; height: 100%; object-fit: cover; padding: 4px; border-radius: 20px; }
.brand-logo.sm { width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; flex-shrink: 0;
  background: linear-gradient(135deg,#2563eb,#7c3aed); border: 0; }
.brand-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); font-weight: 600; letter-spacing: .04em; padding: .5rem .85rem; text-transform: uppercase; font-size: .68rem; }
.unit-list { display: grid; gap: .5rem; max-height: 260px; overflow: auto; padding-right: 4px; }
.unit-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: 14px; font-size: .88rem; font-weight: 500;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); transition: transform .25s var(--ease), background .25s; }
.unit-item:hover { background: rgba(255,255,255,.16); transform: translateX(6px); }
.unit-item .dot { width: 9px; height: 9px; border-radius: 50%; background: #67e8f9; box-shadow: 0 0 0 0 rgba(103,232,249,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(103,232,249,0); } 100% { box-shadow: 0 0 0 0 rgba(103,232,249,0); } }

/* form */
.auth-form .form-control { height: calc(3.6rem + 2px); border-radius: 16px; border: 1.5px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.auth-form .form-floating > label { padding-left: 2.9rem; }
.auth-form .input-icon .form-control { padding-left: 2.9rem; }
.auth-form .form-floating > .form-control:focus ~ label,
.auth-form .form-floating > .form-control:not(:placeholder-shown) ~ label { padding-left: 2.9rem; }
.input-icon { position: relative; }
.input-icon > i:first-child { position: absolute; z-index: 5; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); transition: color .2s; pointer-events: none; }
.input-icon:focus-within > i:first-child { color: #2563eb; }
.auth-form .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 .3rem rgba(37,99,235,.15); background: var(--bs-body-bg); }
.eye-btn { position: absolute; z-index: 5; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 42px; height: 42px; border-radius: 12px; color: var(--bs-secondary-color); }
.eye-btn:hover { background: var(--bs-tertiary-bg); color: #2563eb; }
.btn-primary { --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8;
  background-image: linear-gradient(135deg, #2563eb, #4f46e5); border: 0; border-radius: 16px; font-weight: 700; padding: .95rem 1.25rem;
  box-shadow: 0 14px 28px -10px rgba(37,99,235,.7); transition: transform .2s var(--ease), box-shadow .2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(37,99,235,.85); background-image: linear-gradient(135deg, #1d4ed8, #4338ca); }
.btn-primary:active { transform: scale(.98); }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 55%,100% { transform: translateX(100%); } }
.shake { animation: shake .5s; border-radius: 16px; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.min-w-0 { min-width: 0; }

@media (max-width: 991.98px) {
  .auth-card { border-radius: 24px; }
  .auth-form { padding: 1.75rem 1.4rem !important; }
  .auth-form .form-control { font-size: 16px; } /* cegah zoom otomatis iOS */
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }