/* Khusus aplikasi ini. Tata letak (Halaman, BilahAtas, form) ada di komponen.css dari design system. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
/* pita di area poni HP berwarna sama dengan bilah */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--merek); z-index: 10; }
.wp-bilah { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
/* keadaan kosong: ilustrasi pori kosong + kalimat */
.wp-kosong { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-4) 0; }
.wp-kosong img { max-width: 100%; height: auto; }
.wp-kosong p { margin: 0; }
/* spanduk "Sesi live berlangsung" di beranda mahasiswa */
.wp-live-ajak { display: flex; flex-direction: column; gap: var(--space-2); border: var(--garis-pilih) solid var(--merek-teks); }
.wp-live-ajak .wp-tombol { align-self: flex-start; }
/* penghitung waktu uji: menempel di bawah bilah */
.wp-uji-waktu { position: sticky; top: calc(var(--tinggi-bilah) + env(safe-area-inset-top, 0px)); z-index: 4;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--permukaan); border: var(--garis-rambut) solid var(--batas); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }
.wp-uji-waktu b { font-family: var(--font-mono); font-size: 18px; }
.wp-uji-waktu.is-genting { background: var(--salah-latar); border-color: var(--salah); }
.wp-uji-waktu.is-genting b { color: var(--salah); }
.wp-kasus-daftar { display: flex; flex-direction: column; gap: var(--space-6); }

@media print {
  .wp-bilah, .wp-cetak-tidak, body::before { display: none !important; }
  body { background: #fff; }
  .wp-halaman { padding: 0; }
}

/* Landing page tamu (selalu tema terang; lihat viewMasuk). Kartu masuk di layar pertama, berdampingan mulai 900px. */
.wp-landing__hero { display: grid; gap: var(--space-6); align-items: center; }
.wp-landing__teks { display: flex; flex-direction: column; gap: var(--space-4); }
.wp-landing__teks h1 { max-width: 15ch; }
.wp-landing__lead { margin: 0; font-size: 18px; line-height: 28px; max-width: 46ch; }
.wp-landing__hero-gambar { display: none; width: 100%; max-width: 380px; height: auto; }
#masuk .wp-form { max-width: none; padding: var(--space-6); }
@media (min-width: 900px) {
  .wp-landing__hero { grid-template-columns: 1.15fr 1fr; gap: 56px; padding-block: var(--space-4) var(--space-8); }
  .wp-halaman .wp-landing__teks h1 { font-size: 48px; line-height: 54px; letter-spacing: -.025em; }
  .wp-landing__hero-gambar { display: block; }
}
.wp-landing__tersedia { color: var(--merek-teks); }
.wp-landing__mk { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .wp-landing__mk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wp-landing__mk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wp-landing__kartu { display: flex; flex-direction: column; gap: var(--space-2); }
.wp-landing__kartu > p { margin: 0; line-height: 24px; }
.wp-landing__kartu .wp-redup { font-size: 14px; line-height: 20px; }
.wp-landing__kartu.is-tersedia { border: var(--garis-pilih) solid var(--merek); }
.wp-landing__kartu img { width: 100%; max-width: 240px; height: auto; align-self: center; }
.wp-landing__kartu .wp-kartu__judul { margin: 0; }
.wp-landing__mk-kepala { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.wp-landing__angka { font-size: 14px; font-weight: 700; color: var(--merek-teks); }
/* pita permukaan-redup selebar layar untuk "Pertama kali ke sini?" */
.wp-landing__pita { display: flex; flex-direction: column; gap: var(--space-6); padding-block: var(--space-12);
  background: var(--permukaan-redup); box-shadow: 0 0 0 100vmax var(--permukaan-redup); clip-path: inset(0 -100vmax); }
.wp-landing__langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .wp-landing__langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wp-landing__langkah li { display: flex; flex-direction: column; gap: var(--space-2); }
.wp-landing__langkah h3 { margin: 0; font-size: 18px; line-height: 24px; }
.wp-landing__langkah p { margin: 0; line-height: 24px; }
.wp-landing__nomor { width: 40px; height: 40px; border-radius: var(--radius-bulat); background: var(--merek); color: var(--di-merek);
  display: grid; place-items: center; font-weight: 800; }
.wp-landing__tanya { max-width: var(--lebar-baca); }
.wp-landing__tanya summary { font-weight: 700; cursor: pointer; min-height: 24px; }
.wp-landing__tanya details p { margin: var(--space-2) 0 0; line-height: 24px; }
.wp-landing__kaki { margin: 0; font-size: 14px; }

/* judul halaman + satu aksi utama di kanan (mis. "Kelas saya" + Kelas baru) */
.wp-kepala-aksi { justify-content: space-between; gap: var(--space-3); }
#pinbaru:empty { display: none; }   /* wadah PIN kosong tidak menambah celah */
/* tombol Dasbor di bilah landing: pil krim di atas merek (sama dengan CTA Courses di drtarmizi.id) */
.wp-bilah__cta { background: var(--krim); border-color: var(--krim); color: var(--di-krim); font-weight: 800; flex: none; }
.wp-bilah__cta:hover { background: var(--di-merek); border-color: var(--di-merek); color: var(--di-krim); }
/* tautan teks di bilah (mis. "Halaman depan" di dasbor dosen); disembunyikan di HP sempit agar bilah muat */
.wp-bilah__tautan { color: var(--di-merek); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: var(--sentuh-min); }
.wp-bilah__tautan:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 479px) { .wp-bilah__tautan { display: none; } }