/* Hallmark · component: halaman-tulisan-server · genre: playful · theme: Hum
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * states: daftar · baca · kosong · galat
 * diperiksa: 320 · 375 · 414 · 768 · 1280 px — nol geser mendatar
 *
 * Berkas terpisah, bukan meminjam landing.css: halaman ini dikirim server dan
 * harus tergambar penuh sebelum apa pun yang lain dimuat. Menariknya lewat CSS
 * landing yang berisi seluruh halaman depan berarti mengunduh puluhan kilobita
 * aturan untuk hero, pita, dan prangko foto yang tidak satu pun dipakai di sini.
 */
@import url('/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-label); }

.lewati {
  position: absolute; inset-inline-start: -9999px; top: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  z-index: 10;
}
.lewati:focus { inset-inline-start: 0; }

.shell { max-width: 44rem; margin-inline: auto; padding-inline: var(--page-gutter, 1.25rem); }

/* ----------------------------------------------------------------- bilah -- */
.bilah {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  max-width: 72rem; margin-inline: auto;
  padding: var(--space-md) var(--page-gutter, 1.25rem);
  border-bottom: 1px solid var(--color-rule);
}
.bilah__merek img { display: block; width: auto; height: 1.75rem; }
.bilah__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.bilah__nav a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.bilah__nav a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.bilah__ajak {
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill);
  color: var(--color-ink) !important; font-weight: var(--weight-medium);
}
.bilah__ajak:hover { background: var(--color-pear); text-decoration: none !important; }

/* ---------------------------------------------------------------- daftar -- */
.kepala { padding-block: var(--space-2xl) 0; }
.kepala h1 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; }
.lede { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 46ch; }

.daftar { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.daftar__butir + .daftar__butir { border-top: 1px solid var(--color-rule); }

.kartu {
  display: grid;
  /* `minmax(0, 1fr)`, bukan `1fr`: kolom teks harus boleh menyusut, kalau tidak
     judul panjang mendorong sampulnya keluar layar. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.kartu__isi { min-width: 0; }
.kartu__oleh { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.kartu__judul { margin: var(--space-2xs) 0 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }
.kartu__judul a { color: inherit; text-decoration: none; }
.kartu__judul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kartu__cuplik {
  margin: var(--space-2xs) 0 0; color: var(--color-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kartu__kaki { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-ink-2); }
.kartu__sampul { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius-inner); background: var(--color-paper-3); }

@media (max-width: 29.99rem) {
  /* Di lebar paling sempit sampulnya dilepas: ia memakan sepertiga baris demi
     gambar yang sudah terlalu kecil untuk memberi tahu apa pun. */
  .kartu { grid-template-columns: minmax(0, 1fr); }
  .kartu__sampul { display: none; }
}

.kosong { margin-top: var(--space-xl); color: var(--color-ink-2); }

.halaman {
  margin-top: var(--space-xl); padding-bottom: var(--space-2xl);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.halaman .mono { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ------------------------------------------------------------------ baca -- */
.baca { padding-block: var(--space-xl) var(--space-3xl); max-width: 40rem; }
.remah { font-size: var(--text-sm); color: var(--color-ink-2); }
.remah a { color: inherit; }

.baca__judul {
  margin: var(--space-md) 0 0;
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15;
  /* Judul bisa memuat nama latin atau tautan panjang; tanpa ini ia mendorong
     lebar halaman di layar sempit. */
  overflow-wrap: anywhere;
}
.baca__meta { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-ink-2); }
.baca__sampul { margin-top: var(--space-xl); width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper-3); }

/* Menata TAG, bukan kelas — tulisannya tidak membawa kelas apa pun. Ukurannya
   lebih besar dan barisnya lebih longgar daripada teks antarmuka: antarmuka
   dipindai, artikel dibaca berturut-turut selama beberapa menit. */
.artikel-isi { margin-top: var(--space-xl); font-size: var(--text-md); line-height: 1.75; }
.artikel-isi p { margin-top: var(--space-md); }
.artikel-isi h2 { margin-top: var(--space-2xl); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }
.artikel-isi h3 { margin-top: var(--space-xl); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }
.artikel-isi h4 { margin-top: var(--space-lg); font-weight: var(--weight-bold); }
.artikel-isi ul, .artikel-isi ol { margin-top: var(--space-md); padding-inline-start: 1.35rem; }
.artikel-isi li { margin-top: var(--space-2xs); }
.artikel-isi img { margin-top: var(--space-lg); max-width: 100%; height: auto; border-radius: var(--radius-inner); }
.artikel-isi figure { margin: var(--space-lg) 0 0; }
.artikel-isi figcaption { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.artikel-isi hr { margin-block: var(--space-2xl); border: 0; border-top: 1px solid var(--color-rule); }
.artikel-isi blockquote {
  margin: var(--space-lg) 0 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-pear-deep);
  color: var(--color-ink-2);
}
/* Kode dan tabel menggulung DI DALAM wadahnya. Tanpa ini satu baris panjang di
   tengah tulisan menggeser seluruh halaman, dan yang membacanya tidak akan
   pernah menduga penyebabnya ada di tengah artikel. */
.artikel-isi pre {
  margin-top: var(--space-md); padding: var(--space-md);
  border-radius: var(--radius-inner); background: var(--color-paper-2);
  font-family: var(--font-label); font-size: var(--text-sm);
  overflow-x: auto;
}
.artikel-isi code { font-family: var(--font-label); font-size: 0.92em; }
.artikel-isi table { margin-top: var(--space-md); width: 100%; border-collapse: collapse; font-size: var(--text-sm); display: block; overflow-x: auto; }
.artikel-isi th, .artikel-isi td { padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule); text-align: start; }

.lain { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px dashed var(--color-rule); }
.lain h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-md); }
.lain ul { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.lain li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.lain .mono { font-size: var(--text-xs); color: var(--color-ink-2); }

.ajak {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-card);
  background: var(--color-paper-2);
}
.ajak p { margin: 0 0 var(--space-md); }

/* ---------------------------------------------------------------- tombol -- */
.tombol {
  display: inline-block; padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink);
  font-weight: var(--weight-medium); text-decoration: none;
  /* Label tombol tidak boleh pecah dua baris. */
  white-space: nowrap;
}
.tombol:hover { background: var(--color-paper-2); }
.tombol--utama { background: var(--color-pear); }
.tombol--utama:hover { background: var(--color-pear-deep); }
.tombol:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.kosong-halaman { padding-block: var(--space-3xl); }
.kosong-halaman h1 { font-family: var(--font-display); font-size: var(--text-2xl); }
.kosong-halaman p { color: var(--color-ink-2); }
.kosong-halaman .tombol { margin-top: var(--space-lg); }

/* ------------------------------------------------------------------ kaki -- */
.kaki {
  margin-top: var(--space-3xl);
  max-width: 72rem; margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter, 1.25rem) var(--space-2xl);
  border-top: 1px dashed var(--color-rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.kaki__logo { display: block; width: auto; height: 1.5rem; }
.kaki .mono { font-size: var(--text-xs); color: var(--color-ink-2); }