/* Layar masuk. Satu kotak di tengah, tidak ada yang lain.

   RUPANYA DIATUR DI SATU TEMPAT: enam nilai di bawah ini. Menggantinya tidak
   menuntut membaca satu baris pun dari aturan di bawahnya - ganti alamat gambar
   di --masuk-gambar, ganti warnanya di --masuk-latar, selesai. Pasangannya
   TAMPILAN_MASUK di page/login-page.js, yang memegang TULISANNYA.

   --masuk-gambar sengaja bernilai "none" dan bukan sebuah alamat: latar bergambar
   adalah pilihan, bukan bawaan, dan yang belum punya gambarnya tidak melihat
   kotak abu-abu menunggu diisi. */
.masuk {
  --masuk-latar: var(--latar);
  --masuk-gambar: none;
  --masuk-gambar-posisi: center / cover no-repeat;
  --masuk-kotak: var(--kertas);
  --masuk-kotak-lebar: 340px;
  --masuk-gambar-tinggi: 56px;

  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
  background: var(--masuk-gambar) var(--masuk-gambar-posisi), var(--masuk-latar);
}

.masuk__kotak {
  width: 100%;
  max-width: var(--masuk-kotak-lebar);
  padding: 28px 24px;
  background: var(--masuk-kotak);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  text-align: center;
}

.masuk__gambar {
  display: block;
  height: var(--masuk-gambar-tinggi);
  width: auto;
  margin: 0 auto 14px;
}

.masuk__merek {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.masuk__ket {
  margin: 6px 0 22px;
  color: var(--tinta-redup);
  font-size: 0.875rem;
}

/* Pesan gagal/batal: cukup terbaca, tidak perlu warna merah menyala karena
   satu-satunya jalan keluarnya tetap tombol yang sama. */
.masuk__pesan {
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--garis);
  border-radius: 9px;
  font-size: 0.875rem;
}

.masuk__kaki {
  margin: 16px 0 0;
  color: var(--tinta-redup);
  font-size: 0.8125rem;
}