/* Halaman menu yang cakupannya sudah ditetapkan, isinya belum tersedia. */

.body {
  margin-top: 2.5rem;
}

/*
  Keterangan status: garis, bukan kotak berlencana.

  Bentuk sebelumnya kotak berlatar abu dengan lencana merah bulat bertuliskan
  "SEDANG DISIAPKAN" dalam huruf kapital. Itu bobot sebuah peringatan, padahal
  isinya kabar biasa: materinya sedang disiapkan bidang terkait. Lencana merah
  di puncak halaman juga merebut perhatian dari judul halaman itu sendiri.

  Sekarang satu garis merah di tepi kiri, label kecil, dan teksnya mengalir
  seperti kalimat biasa. Kabarnya tetap tersampaikan tanpa berteriak.
*/
.status {
  max-width: 46rem;
  margin: 0 0 3rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--primary);
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.7;
}

.statusLabel {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--brand-ink);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scopeTitle {
  /* Gabungan: pasang juga kelas "judulSeksi" pada elemennya di Blade. */
}

/* ---------- Rangka cakupan ---------- */

.rangka {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/*
  Dua kolom di layar lebar: kepala bagian di kiri, butirnya di kanan.

  Lebar kolom kiri dipatok 13rem supaya seluruh kepala bagian sejajar di satu
  sumbu vertikal — itulah yang membuat daftar ini terbaca sebagai daftar isi
  naskah, bukan sebagai tumpukan judul dan paragraf.
*/
.bagian {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.bagian:last-child {
  border-bottom: 1px solid var(--border);
}

@media (min-width: 48rem) {
  .bagian {
    grid-template-columns: 13rem 1fr;
    gap: 2.5rem;
  }
}

.bagianKepala {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

/*
  Nomor urut memakai `--text-muted`, BUKAN `--roman`.

  Percobaan pertama memakai `--roman`, token angka romawi bidang di beranda.
  Terukur, hasilnya 1,55:1 di tema terang dan 1,85:1 di tema gelap: angkanya
  praktis tidak terlihat. Token itu memang disetel untuk angka setinggi 2,6rem
  yang menempati seperempat ubin; pada angka setinggi 1,38rem di dalam baris
  teks, ia hilang.

  `--text-muted` adalah token yang memang berarti "keterangan sekunder yang
  tetap terbaca", dan sudah benar di keempat keadaan tema tanpa aturan
  tambahan. Merah disimpan untuk penanda butir saja, supaya di dalam rangka ini
  hanya ada satu hal berwarna.

  KONTRAS TERUKUR, keempat keadaan tema:
    #4a4a4a di atas #ffffff -> 8,86:1   (sebelumnya 1,55:1)
    #b0b0b4 di atas #121212 -> 8,67:1   (sebelumnya 1,85:1)
*/
.nomor {
  flex: none;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-besar);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.bagianJudul {
  margin: 0;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-isi);
  line-height: 1.3;
  color: var(--text);
}

/*
  BUTIR DISUSUN BERLAJUR, BUKAN SATU PER BARIS.

  Butir di halaman ini adalah label pendek — "Industri", "Perguruan tinggi",
  "Mitra internasional" — bukan kalimat. Ditumpuk satu per baris, masing-masing
  menyeberangi kolom selebar 978px yang isinya hanya 141px.

  TERUKUR pada /kemitraan, layar 1920px, sebelum diperbaiki:
    lebar kolom butir   978px
    teks terpanjang     141px   <- 86% lebar kolom kosong
    jumlah butir          8
    tinggi halaman     2221px

  `auto-fill` dengan batas 15rem membiarkan jumlah lajurnya mengikuti ruang
  yang ada, bukan dipatok angka. Itu penting karena keempat halaman yang
  memakai template ini punya jumlah butir yang berbeda — Kemitraan enam mitra,
  Think Tank tiga perangkat — dan lajur yang dipaksa sama akan menyisakan sel
  kosong pada yang butirnya sedikit.
*/
.butir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem 2rem;
}

@media (min-width: 48rem) {
  .butir {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

/*
  Penanda butir berupa garis pendek merah, bukan bulatan bawaan.

  Bulatan `disc` membuat daftar apa pun terbaca sebagai catatan rapat. Garis
  pendek adalah penanda yang lazim pada daftar isi terbitan, dan ia satu-
  satunya tempat warna merek muncul di dalam rangka ini.
*/
.butir li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--t-dasar);
  line-height: 1.6;
  color: var(--text);
}

.butir li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 2px;
  background: var(--primary);
}

/* ---------- Ajakan ---------- */

.ctaBox {
  /* Gabungan: pasang juga kelas "ajakan" pada elemennya di Blade. */
  margin-top: 3.5rem;
}

.ctaNote {
  /* Gabungan: pasang juga kelas "ajakanTeks" pada elemennya di Blade. */
}

.cta {
  /* Gabungan: pasang juga kelas "ajakanTombol" pada elemennya di Blade. */
}