/* ==========================================================================
   BERSUARA — layar masuk
   --------------------------------------------------------------------------
   Dimuat SETELAH app.css dan hanya oleh halaman masuk. Dari app.css yang
   dipakai kembali: huruf, token warna, dan primitif borang (.field .label
   .input .check .btn). Berkas ini hanya menyusun panggungnya.

   Bentuknya dua bidang berdampingan:

     kiri  — panel merek. SELALU gelap dan selalu membawa aksen, karena
             ia bukan "daerah bertema" melainkan sebuah permukaan merek, sama
             seperti sampul. Ia menyambung dari halaman muka, sehingga orang
             yang menekan "Masuk" di sana tidak merasa mendarat di aplikasi
             lain.
     kanan — borangnya. MENGIKUTI tema pilihan pengguna (terang/gelap), sama
             seperti seluruh isi aplikasi. Preferensi tema yang sudah ada
             tidak boleh hilang hanya karena layar ini dipercantik.

   Di bawah 60rem panel merek menyusut jadi pita atas, dan borang mengisi
   sisanya. Tidak ada yang disembunyikan; hanya disusun ulang.
   ========================================================================== */

.auth {
  /* 100dvh, bukan 100vh: di Safari iOS bilah alamat membuat 100vh melompat
     dan borangnya ikut bergeser saat papan ketik muncul. */
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .auth { grid-template-columns: 1.02fr .98fr; }
}

/* ============================================================ panel merek */
.auth-merek {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  color: #eaf1f8;

  /* Aksennya datang dari aksen.css — satu rona, tiga tingkat kepekatan.
     Tidak ada nilai warna yang ditulis di berkas ini. */
  background:
    radial-gradient(120% 90% at 8% 8%,  rgb(var(--ak-1) / .55), transparent 55%),
    radial-gradient(110% 90% at 92% 12%, rgb(var(--ak-2) / .30), transparent 55%),
    radial-gradient(120% 100% at 70% 100%, rgb(var(--ak-3) / .50), transparent 58%),
    linear-gradient(160deg, #0a1626, #060b12 60%);
}

/* Butiran halus supaya bidang gradasi tidak terbaca sebagai plastik. */
.auth-merek::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-merek-atas {
  display: flex; align-items: center; gap: .75rem;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em;
}
.auth-tanda {
  width: 2.375rem; height: 2.375rem; flex: none;
  display: grid; place-items: center;
  border-radius: .625rem;
  color: #fff;
  background: var(--ak-tombol);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    0 8px 22px -8px rgb(var(--ak-1) / .9);
}

.auth-merek h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
  max-width: 18ch;
}
.auth-merek h1 em {
  font-style: normal;
  background: var(--ak-sig);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-merek-lead {
  margin-top: .875rem;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.65;
  color: #b9c9dc;
}

/* Tiga penanda pendek. Bukan daftar fitur (itu tugas halaman muka) melainkan
   pengingat singkat tentang apa yang sedang dibuka. */
.auth-poin {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6875rem;
}
.auth-poin li {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .875rem;
  color: #cbd8e8;
}
.auth-poin svg {
  flex: none;
  margin-top: .1875rem;
  color: rgb(var(--ak-2));
}

.auth-merek-kaki {
  font-size: .8125rem;
  line-height: 1.6;
  color: #8ba0b8;
}

/* Di bawah 60rem panel merek jadi pita atas: ringkas, tanpa judul besar. */
@media (max-width: 59.999rem) {
  .auth-merek {
    padding: 1.25rem 1.25rem 1.5rem;
    gap: 1rem;
  }
  .auth-merek h1 { font-size: 1.5rem; max-width: none; }
  .auth-merek-lead { margin-top: .5rem; font-size: .9375rem; }
  /* Poin dan kaki dipindah ke bawah borang di layar sempit, supaya yang
     pertama terlihat tetap kolom nama pengguna. */
  .auth-poin, .auth-merek-kaki { display: none; }
}

/* ============================================================ panel borang */
.auth-borang {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem;
  background: var(--bg);
}

.auth-kotak {
  width: 100%;
  max-width: 23rem;
}

.auth-judul {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-str);
}
.auth-sub {
  margin-top: .375rem;
  font-size: .875rem;
  color: var(--text-mut);
}

.auth-borang form { margin-top: 1.75rem; }

/* Label dan kolom sedikit lebih lapang daripada di dalam aplikasi: layar ini
   dipakai sekali, dalam keadaan tergesa, sering pada laptop di ruang remang. */
.auth-borang .input {
  padding: .75rem .875rem;
  font-size: .9375rem;
  border-radius: .625rem;
}
.auth-borang .label {
  font-size: .8125rem;
}

/* Cincin fokus memakai aksen yang sama dengan panel merek, supaya
   kedua bidang terbaca sebagai satu layar. */
.auth-borang .input:focus {
  border-color: rgb(var(--ak-3));
  box-shadow: 0 0 0 3px rgb(var(--ak-3) / .3);
}

/* ---- kolom sandi beserta tombol lihat */
.auth-sandi { position: relative; }
.auth-sandi .input { padding-right: 3rem; }

.auth-lihat {
  position: absolute; right: .375rem; top: 50%;
  transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 0; border-radius: .5rem;
  background: transparent;
  color: var(--text-mut);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.auth-lihat:hover { color: var(--text-str); background: var(--hover); }
.auth-lihat:focus-visible {
  outline: 2px solid rgb(var(--ak-3));
  outline-offset: 2px;
}

/* ---- peringatan Caps Lock
   Sebab paling sering sandi ditolak padahal diketik benar. Disembunyikan
   sampai benar-benar menyala, dan diumumkan ke pembaca layar lewat
   aria-live pada markupnya. */
.auth-caps {
  display: flex; align-items: center; gap: .4375rem;
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--warn-text);
}
.auth-caps[hidden] { display: none; }

/* Tombol utama membawa aksen yang sama dengan panel merek. Tanpa ini
   benda paling terang di sisi kanan adalah biru datar bawaan aplikasi,
   sementara sisi kiri menyala — dan kedua bidang berhenti terbaca sebagai satu
   layar. Isiannya sengaja bernada tua: teks putih di atas sian terang gagal
   kontras, dua nada tua ini lolos WCAG AA dengan lapang. */
.auth-borang .btn-primary.auth-tombol {
  margin-top: 1.5rem;
  border-color: transparent;
  background: var(--ak-tombol);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    0 10px 26px -10px rgb(var(--ak-3) / .85);
}
.auth-borang .btn-primary.auth-tombol:hover {
  background: linear-gradient(112deg, rgb(var(--ak-3)), rgb(var(--ak-1)));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .34),
    0 14px 32px -10px rgb(var(--ak-3) / .95);
}

/* Baris bawah: pengingat yang sama dengan panel merek, hanya muncul di layar
   sempit tempat panel itu diringkas. */
.auth-kaki-hp {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
  font-size: .78125rem;
  line-height: 1.6;
  color: var(--text-fnt);
}
@media (min-width: 60rem) {
  .auth-kaki-hp { display: none; }
}

/* =============================================================== gerak */
/* Satu gerakan saja, dan hanya sekali: bidangnya naik sedikit saat halaman
   dibuka. Layar masuk harus terasa kokoh; apa pun yang berdenyut di sini
   membuatnya terasa seperti mainan. */
@media (prefers-reduced-motion: no-preference) {
  .auth-kotak,
  .auth-merek > * {
    animation: auth-naik .5s cubic-bezier(.16, 1, .3, 1) both;
  }
  .auth-merek > *:nth-child(2) { animation-delay: .06s; }
  .auth-merek > *:nth-child(3) { animation-delay: .12s; }

  @keyframes auth-naik {
    from { opacity: 0; transform: translateY(.75rem); }
    to   { opacity: 1; transform: none; }
  }
}