/* Halaman login — mengikuti tampilan opr-mill (Mill & KCP Report). */
.ls {
  --c-surface: 255 255 255; --c-ink: 11 11 11; --c-ink2: 82 81 78; --c-ink3: 137 135 129; --c-line: 225 224 217;
  --c-field-ring: 214 211 209; --c-focus: 38 120 64; --c-forest: 11 61 30; --c-logo-bg: 255 255 255;
  position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: clip;
  background: rgb(var(--c-forest)); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
html.dark .ls {
  --c-surface: 22 27 24; --c-ink: 232 235 232; --c-ink2: 180 186 181; --c-ink3: 133 141 135; --c-line: 42 50 45;
  --c-field-ring: 63 72 66; --c-focus: 108 192 127; --c-forest: 13 42 24; --c-logo-bg: 0 0 0;
}
.ls * { box-sizing: border-box; }
.ls .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* latar: foto slide + overlay hijau + cahaya + partikel */
.ls-backdrop { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.ls-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2200ms ease-in-out; }
.ls-slide.on { opacity: 1; }
.ls-slide img { width: 100%; height: 100%; object-fit: cover; animation: ls-kb 26s ease-in-out infinite alternate; will-change: transform; }
.ls-overlay { position: absolute; inset: 0; background: linear-gradient(115deg, #06160c 0%, #0b3d1e 55%, #1c6034 100%); }
.ls-overlay.has-photo { background: linear-gradient(115deg, rgba(6,22,12,.93) 0%, rgba(6,30,14,.74) 38%, rgba(4,50,20,.38) 70%, rgba(0,0,0,.3) 100%); }
.ls-shade { position: absolute; inset: auto 0 0 0; height: 33%; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); }
.ls-glow { position: absolute; border-radius: 50%; filter: blur(64px); animation: ls-drift 18s ease-in-out infinite; }
.ls-glow.a { left: -160px; top: -160px; width: 520px; height: 520px; opacity: .4; background: radial-gradient(circle, rgba(28,160,60,.9), transparent 65%); }
.ls-glow.b { right: -128px; bottom: -192px; width: 560px; height: 560px; opacity: .25; background: radial-gradient(circle, rgba(249,217,95,.8), transparent 65%); animation-direction: reverse; animation-duration: 22s; }
.ls-dot { position: absolute; bottom: -20px; border-radius: 50%; animation: ls-float 18s linear infinite; }

/* kerangka */
.ls-top { position: relative; z-index: 10; display: flex; justify-content: flex-end; padding: 16px; }
.ls-theme {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12px;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.15); cursor: pointer; backdrop-filter: blur(6px);
}
.ls-theme:hover { background: rgba(255,255,255,.12); color: #fff; }
.ls-theme svg { width: 14px; height: 14px; }
.ls-main { position: relative; z-index: 10; display: flex; flex: 1; align-items: center; width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 20px 40px; }
.ls.preview .ls-main { padding: 32px 32px; }
.ls-grid { display: grid; width: 100%; align-items: center; gap: 40px; }
@media (min-width: 640px) { .ls-main { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) { .ls-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; } }
.ls.preview .ls-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; }

/* teks kiri */
.ls-hero { display: none; }
.ls-hero.compact { display: block; margin-bottom: 24px; }
@media (min-width: 1024px) { .ls-hero { display: block; } .ls-hero.compact { display: none; } }
.ls.preview .ls-hero { display: block; } .ls.preview .ls-hero.compact { display: none; }
.ls-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 12px;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(4px);
}
.ls-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f9d95f; }
.ls-badge:empty, .ls-badge.hide { display: none; }
.ls-title { max-width: 576px; margin: 24px 0 0; font-weight: 600; letter-spacing: -.025em; color: #fff; font-size: 44px; line-height: 1.08; }
@media (min-width: 1280px) { .ls-title { font-size: 50px; } }
.ls-sub { max-width: 576px; margin: 20px 0 0; font-size: 17px; line-height: 1.625; color: rgba(255,255,255,.75); }
.ls-sub:empty { display: none; }
.ls-feats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }
.ls-feats:empty { display: none; }
.ls-feat { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); }
.ls-feat i { width: 3px; height: 16px; border-radius: 99px; display: inline-block; }
.ls-hero.compact .ls-title { margin-top: 12px; font-size: 24px; line-height: 1.25; }
.ls-hero.compact .ls-sub { margin-top: 8px; font-size: 14px; }
.ls-hero.compact .ls-feats { display: none; }

/* kartu */
.ls-cardwrap { width: 100%; max-width: 400px; margin: 0 auto; animation: ls-rise .6s ease-out both; }
.ls-card {
  border-radius: 24px; padding: 28px; color: rgb(var(--c-ink)); background: rgb(var(--c-surface) / .9);
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
@media (min-width: 640px) { .ls-card { padding: 32px; } }
.ls-logos { display: flex; align-items: center; gap: 12px; }
.ls-logo-co { width: 56px; height: 56px; object-fit: contain; flex: none; }
.ls-logo-app { width: 56px; height: 56px; object-fit: contain; flex: none; padding: 6px; border-radius: 16px; background: rgb(var(--c-logo-bg));
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1), 0 0 0 1px rgb(var(--c-line)); }
.ls-card h2 { margin: 20px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.ls-card h2.sm { font-size: 18px; margin-top: 16px; }
.ls-card-sub { margin: 4px 0 0; font-size: 14px; color: rgb(var(--c-ink2)); }
.ls-card-sub:empty { display: none; }
.ls-fields { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.ls-field { position: relative; display: block; }
.ls-field > svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: rgb(var(--c-ink3)); pointer-events: none; }
.ls-input {
  display: block; width: 100%; border: 0; border-radius: 12px; padding: 12px 12px 12px 40px; font: inherit; font-size: 15px;
  color: rgb(var(--c-ink)); background: rgb(var(--c-surface)); box-shadow: inset 0 0 0 1px rgb(var(--c-field-ring)); outline: none; min-height: 0;
}
.ls-input.plain { padding-left: 12px; }
.ls-input::placeholder { color: rgb(168 162 158); }
.ls-input:focus { box-shadow: inset 0 0 0 2px rgb(var(--c-focus)); }
.ls-input:disabled { opacity: 1; }
.ls-input.pw { padding-right: 44px; }
.ls-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px; border: 0; border-radius: 8px; background: none; color: rgb(var(--c-ink3)); cursor: pointer; display: flex; }
.ls-eye:hover { color: rgb(var(--c-ink)); }
.ls-eye svg { width: 16px; height: 16px; }
.ls-label { display: block; font-size: 12px; font-weight: 500; color: rgb(var(--c-ink2)); margin-bottom: 4px; }
.ls-submit {
  position: relative; display: flex; align-items: center; width: 100%; border: 0; border-radius: 12px; padding: 12px 0 12px 20px;
  font: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(to right, #0f5e2e, #1c7a3e, #3a9153); box-shadow: 0 10px 24px rgba(15,94,46,.35); transition: all .15s;
}
.ls-submit:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(15,94,46,.5); filter: brightness(1.1); }
.ls-submit:disabled { cursor: not-allowed; opacity: .6; }
.ls-submit .ls-arrow { position: absolute; right: 8px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: #fff; color: #0f5e2e; transition: transform .15s; }
.ls-submit:hover:not(:disabled) .ls-arrow { transform: translateX(2px); }
.ls-submit svg { width: 16px; height: 16px; }
.ls-submit.center { justify-content: center; padding-left: 0; }
.ls-ghost { display: block; width: 100%; margin-top: 12px; padding: 9px; border-radius: 10px; text-align: center; font-weight: 500; color: rgb(var(--c-ink2)); text-decoration: none; }
.ls-ghost:hover { background: rgb(var(--c-line) / .6); }
.ls-error { padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgb(254 242 242); color: rgb(185 28 28); box-shadow: inset 0 0 0 1px rgb(254 202 202); }
.ls-help { margin: 20px 0 0; font-size: 12px; color: rgb(var(--c-ink3)); }
.ls-help:empty { display: none; }
.ls-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgb(var(--c-line)); font-size: 11px; color: rgb(var(--c-ink3)); }
.ls-foot:empty { display: none; }
.ls-caption { position: relative; z-index: 10; padding: 0 20px 16px; text-align: right; font-size: 11px; color: rgba(255,255,255,.55); min-height: 1em; }
.ls-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ls-spin .7s linear infinite; }

@keyframes ls-kb { 0% { transform: scale(1.04) translate3d(0, 0, 0); } 100% { transform: scale(1.2) translate3d(-1.5%, -2%, 0); } }
@keyframes ls-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -4%) scale(1.08); } }
@keyframes ls-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ls-float { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translateY(-110vh); } }
@keyframes ls-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ls-slide img, .ls-glow, .ls-cardwrap { animation: none; }
  .ls-dot { display: none; }
}