* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #fff; background: #0b1220; }

/* Tata letak: gambar diukur dari TINGGI layar (teks di kiri tidak pernah terpotong).
   Sisa ruang diisi blur dari gambar yang sama; panel login = kaca blur di kanan, boleh menimpa sisi kanan gambar. */
.login { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 440px; }
.bg { position: absolute; inset: -40px; z-index: 0; background: url('/static/hero-bg.webp') center/cover no-repeat;
  filter: blur(26px) brightness(.5) saturate(1.1); }
.hero { position: relative; z-index: 1; }
/* Gambar dipasang setinggi layar; sisa ruang di kanan diisi lanjutan gambar yang dicerminkan
   (bukan dipotong, bukan diregangkan) lalu dilebur ke latar blur. */
.picwrap { position: absolute; left: 0; top: 0; height: 100vh; }
.picwrap img.pic { height: 100%; width: auto; max-width: none; display: block; }
.picwrap .edge-fill {
  position: absolute; left: calc(100% - 1px); top: 0; height: 100%; width: 100vw; opacity: 0;
  transition: opacity .25s ease;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
}
.tag { position: absolute; left: 1.2rem; top: 1rem; font-size: .75rem; color: rgba(255,255,255,.45); z-index: 3; }

.panel { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem;
  background: rgba(8,14,32,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-left: 1px solid rgba(255,255,255,.12); }
.card { width: 100%; max-width: 340px; }
.logo { display: flex; justify-content: center; margin-bottom: 1rem; }
.logo img { width: 150px; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
h1 { font-size: 1.7rem; margin: 0 0 .3rem; font-weight: 700; text-align: center; }
p.sub { margin: 0 0 1.6rem; color: rgba(255,255,255,.65); font-size: .92rem; text-align: center; }
p.err { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 3px; background: rgba(220,38,38,.18); border: 1px solid rgba(248,113,113,.4); color: #fecaca; font-size: .88rem; }
label { display: block; font-size: .78rem; color: rgba(255,255,255,.7); margin-bottom: .35rem; letter-spacing: .04em; text-transform: uppercase; }
.field { position: relative; margin-bottom: 1rem; }
.field i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.45); }
input { width: 100%; padding: .8rem .9rem .8rem 2.4rem; border-radius: 3px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; outline: none; }
input::placeholder { color: rgba(255,255,255,.3); }
input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.25); }
button { width: 100%; padding: .85rem; border-radius: 3px; border: none; background: #7c3aed; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: .3rem; box-shadow: 0 8px 20px rgba(124,58,237,.35); }
button:hover { background: #6d28d9; }
.foot { margin-top: 1.6rem; font-size: .75rem; color: rgba(255,255,255,.4); display: flex; justify-content: space-between; }

@media (max-width: 820px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; min-height: 100vh; }
  .hero { min-height: 0; position: relative; }
  .logo img { width: 96px; }
  .picwrap { position: static; height: auto; display: block; }
  .picwrap .edge-fill { display: none; }
  .picwrap img.pic { position: static; width: 100%; height: auto; max-height: none; object-fit: contain; display: block; }
  /* tepi bawah gambar dipudarkan ke lapisan blur yang sama (yang juga terlihat di balik panel)
     → tidak ada perbedaan warna/tekstur, batasnya benar-benar menyatu */
  .picwrap img.pic { -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.35) 88%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.35) 88%, rgba(0,0,0,0) 100%); }
  .hero::after { content: none; }
  /* form naik merapat ke gambar */
  /* panel form: latar mulai transparan lalu menggelap perlahan → menyambung dengan gambar di atasnya */
  .panel { border-left: none; border-top: none; align-items: flex-start; padding: 1.1rem 1.2rem 2rem; margin-top: -1px;
    background: linear-gradient(180deg, rgba(8,14,32,0) 0%, rgba(8,14,32,.35) 10%, rgba(8,14,32,.62) 26%, rgba(8,14,32,.72) 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .logo { margin-bottom: .6rem; }
  p.sub { margin-bottom: 1.1rem; }
  .tag, .tagline { display: none; }
}

/* transisi: masuk halus & keluar saat submit */
.login { animation: loginIn .5s ease-out both; }
.card { animation: cardIn .55s .1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes loginIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.login.leaving { transition: opacity .38s ease, filter .38s ease; opacity: 0; filter: blur(6px); }
.login.leaving .card { transition: transform .38s ease; transform: translateY(-10px) scale(.98); }
@media (prefers-reduced-motion: reduce) { .login, .card { animation: none; } .login.leaving, .login.leaving .card { transition: none; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* halaman login mengikuti panel gelap; kalau perangkat memaksa tema terang, logo tetap terlihat */
html[data-theme="light"] .logo img { filter: none; }
/* tautan ke portal pelanggan di bawah tombol Masuk */
.klien-link { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .7rem;
  padding: .6rem .8rem; border-radius: 3px; font-size: .86rem; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.klien-link:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
/* tautan kembali ke portal admin di pojok kiri atas (halaman login pelanggan) */
.tagline { display: flex; flex-direction: column; gap: .3rem; }
.tagline .t { font-size: .75rem; color: rgba(255,255,255,.45); }
.tagline a { display: inline-flex; align-items: center; gap: .35rem; width: fit-content;
  font-size: .75rem; color: rgba(255,255,255,.7); text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35); padding-bottom: .1rem; }
.tagline a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.7); }
/* di HP tag pojok disembunyikan, tautannya dipindah ke bawah tombol Masuk */
.only-hp { display: none; }
@media (max-width: 820px) { .only-hp { display: flex; } }
/* di HP tautan pojok disembunyikan (versinya sudah ada di bawah tombol Masuk) */
@media (max-width: 820px) { .tag, .tagline { display: none; } }
/* di HP gambar tampil utuh tanpa pudar di tepi */
/* tautan di footer kartu login */
.foot-link { color: rgba(255,255,255,.5); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.28); }
.foot-link:hover { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.6); }
/* keterangan hubungan merek (wajib agar tidak dikira situs resmi) */
.disc { margin: .9rem 0 0; font-size: .64rem; line-height: 1.5; color: rgba(255,255,255,.35); text-align: left; }