/* ============================================================
   auth-v2.css
   Satu tampilan untuk SEMUA halaman masuk dan daftar:
   /auth/login (admin), /akun/login, /akun/daftar.

   Yang dipilih: tata letak belah dua milik halaman admin. Alasannya
   panel kiri memberi ruang untuk membangun kepercayaan sebelum orang
   mengetik kata sandinya, dan itu justru lebih dibutuhkan pelanggan
   baru daripada admin yang memang sudah kenal situsnya.

   Yang TIDAK disamakan: isi panel kiri dan warna aksen. Dua halaman
   yang identik total membuat pelanggan mencoba masuk lewat pintu admin
   lalu gagal berkali kali tanpa tahu kenapa.
   ============================================================ */

:root {
  --au-sky:   #03A9F4;
  --au-deep:  #01579B;
  --au-amber: #FF9800;
  --au-ember: #E65100;
  --au-ink:   #0A1A26;
  --au-ink2:  #41586B;
  --au-ink3:  #7A8FA1;
  --au-line:  #E3EBF1;
  --au-mist:  #F6FAFC;
  --au-ok:    #12A150;
  --au-okbg:  #E7F7EE;
  --au-no:    #C2410C;
  --au-nobg:  #FDF0E8;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body.au {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--au-ink2);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body.au a { color: inherit; text-decoration: none; }
body.au ul { list-style: none; }
/* Reset TIDAK boleh menyetel color dan font sekaligus di sini. Selector
   `body.au button` punya spesifisitas (0,1,2) dan akan mengalahkan kelas
   komponen seperti .au-btn--go yang cuma (0,1,0). Itu yang bikin tulisan di
   tombol oranye tetap gelap. Cukup samakan keluarga hurufnya saja. */
body.au button,
body.au input { font-family: inherit; font-size: 100%; }
body.au :focus-visible { outline: 2px solid var(--au-sky); outline-offset: 2px; }

.au-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* ---------- Panel kiri ---------- */
.au-brand {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 40px; overflow: hidden; color: #fff; text-align: center;
}

/* Foto awan sebagai lapisan paling bawah, 70% seperti diminta. */
.au-brand__photo {
  position: absolute; inset: 0;
  background: url("../images/auth-bg.jpg") center / cover no-repeat;
  opacity: .7;
}

/* Lapisan gradasi WAJIB ada di atas foto.
   Foto awannya terang, dan teks putih di atasnya tidak akan terbaca tanpa
   ini. Gradasi menjaga kontras tetap lolos tanpa menghilangkan fotonya. */
.au-brand__veil {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(1,42,74,.88) 0%, rgba(1,87,155,.78) 45%, rgba(3,169,244,.62) 100%);
}
.au-brand__in { position: relative; z-index: 2; width: 100%; max-width: 340px; }

/* Varian pelanggan dibuat lebih terang, supaya dua pintu masuk ini tidak
   pernah tertukar meski tata letaknya sama. */
.au-brand--cust .au-brand__veil {
  background: linear-gradient(160deg, rgba(1,87,155,.72) 0%, rgba(3,169,244,.6) 55%, rgba(255,152,0,.42) 100%);
}

.au-logo { width: 74px; height: 74px; margin: 0 auto 20px; display: block; }
.au-name {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
}
.au-name span { color: #7FDBFF; }
.au-brand--cust .au-name span { color: #FFD9A0; }
.au-tag {
  margin-top: 8px; font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}

.au-points { display: grid; gap: 10px; margin-top: 34px; }
.au-point {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  font-size: .88rem; font-weight: 500; text-align: left;
}
.au-point svg { width: 17px; height: 17px; flex: none; opacity: .9; }

/* ---------- Panel kanan ---------- */
.au-side {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px; background: #fff;
}
.au-form { width: 100%; max-width: 400px; }

.au-head { margin-bottom: 26px; }
.au-head h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.032em; color: var(--au-ink); }
.au-head p { margin-top: 6px; font-size: .92rem; color: var(--au-ink3); }

.au-alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 15px; border-radius: 10px; font-size: .88rem; line-height: 1.5;
  margin-bottom: 16px;
}
.au-alert svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.au-alert--bad  { background: var(--au-nobg); color: var(--au-no); }
.au-alert--ok   { background: var(--au-okbg); color: var(--au-ok); }
.au-alert--info { background: #E9F7FE;        color: var(--au-deep); }
.au-alert div + div { margin-top: 3px; }

.au-field { display: block; margin-bottom: 15px; }
.au-lab {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--au-ink2); margin-bottom: 6px;
}
.au-lab em { font-style: normal; font-weight: 400; color: var(--au-ink3); }
.au-input {
  position: relative;
  display: flex !important;   /* menang atas reset apa pun di masa depan */
  align-items: center;
  width: 100%;
}
.au-input > svg {
  position: absolute; left: 14px; width: 17px; height: 17px;
  color: var(--au-ink3); pointer-events: none;
}
.au-input input {
  width: 100%; height: 48px; padding: 0 14px 0 40px;
  border: 1.5px solid var(--au-line); border-radius: 11px; background: var(--au-mist);
  font-size: .94rem; color: var(--au-ink); outline: none;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.au-input input:focus {
  border-color: var(--au-sky); background: #fff;
  box-shadow: 0 0 0 3px rgba(3,169,244,.14);
}
.au-input input::placeholder { color: #A7BACB; }
.au-input--pass input { padding-right: 46px; }
.au-input--plain input { padding-left: 14px; }
.au-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--au-ink3); border-radius: 7px;
  padding: 0;
}
/* SVG-nya diberi ukuran eksplisit. Tanpa ini dia memakai ukuran bawaan
   viewBox, jadi tetap besar walau tombolnya sudah dikecilkan. */
.au-eye svg { width: 16px; height: 16px; display: block; }
.au-eye:hover { background: var(--au-mist); color: var(--au-ink); }

.au-input--pass input { padding-right: 42px; }
.au-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.au-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 50px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .96rem; line-height: 1;
  margin-top: 6px; color: #fff;
  transition: background .16s, transform .14s, box-shadow .16s;
}
.au-btn:active { transform: translateY(1px); }
.au-btn--go { background: var(--au-amber); color: #fff !important; box-shadow: 0 6px 20px -6px rgba(255,152,0,.6); }
.au-btn--go:hover { background: var(--au-ember); }
.au-btn--deep { background: var(--au-deep); color: #fff !important; box-shadow: 0 6px 20px -6px rgba(1,87,155,.5); }
.au-btn--deep:hover { background: #013F70; }

.au-or {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 14px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--au-ink3);
}
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }

.au-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit;
  width: 100%; height: 48px; border-radius: 11px;
  border: 1.5px solid var(--au-line); background: #fff;
  font-weight: 600; font-size: .92rem; color: var(--au-ink);
  transition: border-color .16s, background .16s;
}
.au-google:hover { border-color: var(--au-sky); background: #FBFDFF; }
.au-google svg { width: 19px; height: 19px; }

.au-note { margin-top: 10px; font-size: .79rem; color: var(--au-ink3); text-align: center; line-height: 1.5; }
.au-foot { margin-top: 26px; text-align: center; }
.au-foot p { font-size: .89rem; color: var(--au-ink3); }
.au-foot a.au-strong { color: var(--au-deep); font-weight: 700; }
.au-back {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .85rem; color: var(--au-ink3);
}
.au-back:hover { color: var(--au-deep); }
.au-copy { margin-top: 12px; font-size: .78rem; color: #A7BACB; }

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
  .au-split { grid-template-columns: 1fr; }
  .au-brand { min-height: 220px; padding: 34px 24px; }
  .au-logo { width: 54px; height: 54px; margin-bottom: 14px; }
  .au-name { font-size: 1.4rem; }
  /* Pil keunggulan disembunyikan di layar kecil. Di ponsel, ruang paling
     berharga adalah yang menampilkan kolom isian tanpa perlu scroll. */
  .au-points { display: none; }
  .au-side { padding: 30px 20px 46px; align-items: flex-start; }
}
@media (max-width: 420px) {
  .au-head h1 { font-size: 1.45rem; }
  .au-row2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}