/* ============================================================
   Gaya untuk apa yang HANYA ada di port ini dan tidak di proyek
   sumber: halaman 404, halaman legal, pemilih bahasa, dan tautan
   legal di footer.

   BERBEDA STATUSNYA DARI styles.css. Berkas ini ditulis tangan di
   repo ini dan BOLEH disunting di sini. styles.css sebelahnya adalah
   keluaran terkompilasi yang di-vendor dari proyek sumber dan tidak
   boleh disunting — lihat header berkas itu.

   ATURANNYA: kalau sebuah gaya juga masuk akal untuk proyek sumber,
   tempatnya di sana, bukan di sini. Bagian kontak, tautan lewati ke
   konten, dan perbaikan padding .architecture-section pernah ada di
   berkas ini lalu dipindahkan ke app/globals.css di sumber; salinannya
   di sini dihapus setelah ./sync-from-source.sh menariknya masuk.
   Membiarkan duplikatnya bukan sekadar mubazir — berkas ini dimuat
   SETELAH styles.css, jadi nilai basi di sini akan diam-diam menimpa
   pembaruan dari sumber.

   Dimuat SETELAH styles.css dan mengandalkan token serta komponen di
   sana (--ink, --blue, .container, .button, .site-header, footer).
   Yang ditambahkan hanya yang hilang: Tailwind Preflight menormalkan
   h1-h6, p, ul dan ol ke ukuran serta margin nol, jadi halaman berisi
   prosa perlu mengembalikannya sendiri.
   ============================================================ */

/* --- kerangka halaman ---------------------------------------- */

.doc-main {
  padding: 64px 0 110px;
}

.doc-shell {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
}

.doc-kicker {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-shell h1 {
  margin: 14px 0 0;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.doc-updated {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.doc-lead {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* --- prosa ---------------------------------------------------- */

.doc-body {
  margin-top: 44px;
}

.doc-body h2 {
  margin: 44px 0 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.doc-body h2:first-child {
  margin-top: 0;
}

.doc-body h3 {
  margin: 26px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.doc-body p {
  margin: 14px 0 0;
  color: #3d4d66;
  font-size: 15px;
  line-height: 1.75;
}

.doc-body ul,
.doc-body ol {
  margin: 14px 0 0;
  padding-left: 22px;
  color: #3d4d66;
  font-size: 15px;
  line-height: 1.75;
}

.doc-body ul {
  list-style: disc;
}

.doc-body ol {
  list-style: decimal;
}

.doc-body li {
  margin-top: 7px;
}

.doc-body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-body strong {
  font-weight: 700;
  color: var(--ink);
}

/* Blok kontak di akhir dokumen legal. */
.doc-contact {
  margin-top: 44px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--wash);
}

.doc-contact p {
  margin-top: 8px;
}

.doc-contact p:first-child {
  margin-top: 0;
}

/* --- 404 ------------------------------------------------------ */

.notfound {
  padding: 96px 0 120px;
  text-align: center;
}

.notfound-code {
  display: block;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.notfound h1 {
  margin: 16px 0 0;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

.notfound p {
  margin: 20px auto 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* --- pemilih bahasa ------------------------------------------- */

/* Pembungkus yang menjaga .nav-shell tetap punya tiga anak. Lihat komentar
   di index.html; grid `1fr auto 1fr` di styles.css tidak punya kolom
   keempat, dan styles.css tidak boleh disunting di repo ini. */
.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 14px;
}

/* Di bawah 980px styles.css menyembunyikan .main-nav dan
   `.nav-shell > .button`, lalu menampilkan menu hamburger. Selektor anak
   langsung itu tidak lagi mengenai tombol kita sekarang setelah dibungkus,
   jadi seluruh pembungkusnya yang disembunyikan — panel mobile sudah membawa
   CTA dan tautan bahasanya sendiri. */
@media (max-width: 979px) {
  .nav-actions {
    display: none;
  }
}

/* Dipakai di header kedua bahasa. Dibuat di sini, bukan di styles.css,
   karena styles.css di-vendor — lihat catatan di puncak berkas. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.lang-switch a,
.lang-switch span {
  /* 44px tinggi target sentuh, sejalan dengan perbaikan di proyek sumber */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--muted);
}

.lang-switch [aria-current="true"] {
  background: var(--blue);
  color: #fff;
}

.lang-switch a:hover {
  color: var(--ink);
}

.lang-switch [aria-current="true"]:hover {
  color: #fff;
}

footer .lang-switch {
  border-color: rgba(255, 255, 255, 0.16);
  background: transparent;
}

footer .lang-switch a {
  color: #9fafc3;
}

footer .lang-switch a:hover {
  color: #fff;
}

/* --- tautan legal di footer ----------------------------------- */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}

.footer-legal li {
  color: #6f829a;
  font-size: 12px;
}

.footer-legal a {
  color: #9fafc3;
}

.footer-legal a:hover {
  color: #fff;
}

@media (max-width: 760px) {
  .doc-main {
    padding: 44px 0 80px;
  }
  .notfound {
    padding: 64px 0 90px;
  }
}