/* Halaman masuk — papan nama bertinta + kolom formulir rata kiri.
   Palet netral abu aplikasi (dasar.css) dipakai ulang; panel tinta tetap gelap di kedua tema
   supaya identitas acara tidak berubah wujud. Tanpa font web: CSP font-src 'self' (SRS-API-22). */
:root{
  --tinta:#17202b;--tinta-teks:#eef0f2;--tinta-teks-2:#9aa6b4;--tinta-garis:#31404f;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
}

.masuk-laman{display:grid;grid-template-columns:minmax(20rem,38%) 1fr;min-height:100vh}

/* ---- papan nama ---- */
.papan{background:var(--tinta);color:var(--tinta-teks);padding:5rem 2.5rem 2.5rem;display:flex;flex-direction:column;gap:1.75rem}
.papan-lembaga{font-size:.8125rem;color:var(--tinta-teks-2);margin:0}
.papan-nama{font-family:var(--serif);font-size:2.125rem;line-height:1.1;font-weight:400;margin:.35rem 0 0;letter-spacing:-.01em}
.papan-nama span{display:block;font-size:1.25rem;color:var(--tinta-teks-2);margin-top:.35rem}
.papan-guna{margin:0;font-size:.9375rem;color:var(--tinta-teks-2);max-width:26rem;line-height:1.6}

/* Pita hari: 20 hari pertandingan sebagai tanda garis rambut */
.pita{display:flex;flex-direction:column;gap:.5rem}
.pita-tanda{display:flex;justify-content:space-between;align-items:flex-end;height:1.5rem;border-bottom:1px solid var(--tinta-garis)}
.pita-tanda i{width:1px;background:var(--tinta-garis);height:.55rem}
.pita-tanda i:first-child,.pita-tanda i:last-child{background:var(--tinta-teks-2);height:1.5rem}
.pita-tepi{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--tinta-teks-2);font-variant-numeric:tabular-nums}

/* ---- kolom formulir ---- */
.kertas{padding:5rem 2rem 3rem;display:flex;justify-content:center;background:var(--kartu);border-left:1px solid var(--garis)}
.kertas-isi{width:100%;max-width:26rem}
.kertas h1{font-size:1.75rem;letter-spacing:-.01em;margin:0 0 1.5rem}
.kertas p{line-height:1.6}
.masuk-form label{margin-top:1rem}
.masuk-form label:first-of-type{margin-top:0}
.masuk-form .tombol{width:100%;margin-top:1.25rem;text-align:center}
.masuk-catatan{font-size:.8125rem;color:var(--teks-2);margin:.75rem 0 0;line-height:1.55}

/* Pintu kedua: jelas lebih ringan daripada pintu utama, tetap terlihat penuh */
.pintu-kedua{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--garis)}
.pintu-kedua h2{font-size:1rem;margin:0 0 .35rem}
.pintu-kedua p{font-size:.875rem;color:var(--teks-2);margin:0}
.pintu-kedua .masuk-form{margin-top:1.25rem}
.pintu-kedua .tombol{margin-top:1rem}

.masuk-galat{margin:0 0 1.25rem;padding:.75rem .9rem;border-left:3px solid var(--kritis);background:color-mix(in srgb,var(--kritis) 8%,transparent)}
.masuk-galat p{margin:0;font-size:.9375rem}
.masuk-galat .kode-galat{display:block;margin-top:.25rem}
.masuk-pesan{margin:0 0 1.25rem;padding:.75rem .9rem;border-left:3px solid var(--info);background:color-mix(in srgb,var(--info) 8%,transparent);font-size:.9375rem}
.galat-medan{color:var(--kritis);font-size:.8125rem;margin:.35rem 0 0}
.masuk-bantuan{margin-top:2rem;font-size:.8125rem;color:var(--teks-2)}
.masuk-bantuan a{color:inherit}

/* ---- ponsel: papan nama menyusut jadi pita atas ---- */
@media (max-width:60rem){
  .masuk-laman{grid-template-columns:1fr;min-height:0}
  .papan{padding:1.5rem 1.25rem;gap:1.25rem}
  .papan-nama{font-size:1.625rem}
  .papan-nama span{font-size:1.0625rem}
  .papan-guna{display:none}
  .pita-tanda{display:none}
  .pita-tepi{border-top:1px solid var(--tinta-garis);padding-top:.5rem}
  .kertas{padding:1.75rem 1.25rem;border-left:0;border-top:1px solid var(--garis)}
}

@media (prefers-color-scheme:dark){
  .papan{background:#0f151d}
  .kertas .tombol{color:#10161d}
  .kertas .tombol-sekunder{color:var(--aksen)}
}

@media print{.papan{background:#fff;color:#000}.kertas{border-left:0}}