/* Dokumen cetak A4: Company Profile, Katalog, Profil Kemampuan Usaha.
   Selalu terang karena dokumen ini adalah kertas. Token sama dengan main.css (mode terang). */
/* IBM Plex Sans, satu file variabel (berat 100-700), huruf latin. Lisensi: assets/fonts/OFL.txt */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2?v=e2291e842c") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #E4E8EE;
  --surface: #FFFFFF;
  --surface-2: #EEF1F5;
  --text: #18212F;
  --text-2: #475467;
  --line: #D5DBE3;
  --line-strong: #7B8798;
  --navy: #1E3A5F;
  --navy-hover: #142A47;
  --navy-tint: #E7EDF5;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@page { size: A4; margin: 0; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 10pt;
  line-height: 1.5;
}

a { color: var(--navy); }
a:focus-visible, .tombol:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Bilah atas, hanya di layar */
.alat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  width: 210mm;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 0;
}
.alat a { display: inline-flex; align-items: center; min-height: 44px; }
.alat-kanan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tombol {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 4px;
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.tombol:hover { background: var(--navy-hover); }
.tombol-garis { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.tombol-garis:hover { background: var(--navy-tint); }

/* Lembar A4 */
.lembar {
  display: flex;
  flex-direction: column;
  width: 210mm;
  height: 297mm;
  margin: 0 auto 24px;
  padding: 16mm 18mm 7mm;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.lembar-isi { flex: 1; min-height: 0; overflow: hidden; }
.kaki {
  display: flex;
  justify-content: space-between;
  gap: 8mm;
  padding-top: 2.5mm;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 7.5pt;
}

/* Teks */
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h2 {
  margin: 0 0 3mm;
  padding-bottom: 1.5mm;
  border-bottom: 1px solid var(--line);
  font-size: 13pt;
}
h3 { margin: 4mm 0 1.5mm; font-size: 10.5pt; }
h2 + h3 { margin-top: 0; }
.bagian + .bagian > h3:first-child { margin-top: 0; }
.bagian + .bagian:has(> h3:first-child) { margin-top: 4mm; }
p { margin: 0 0 2.5mm; }
ul, ol { margin: 0 0 2.5mm; padding-left: 5mm; }
li { margin-bottom: 1mm; }
.kecil { font-size: 8.5pt; color: var(--text-2); }
.bagian + .bagian { margin-top: 6mm; }
.angka { font-variant-numeric: tabular-nums; white-space: nowrap; }
.istilah { display: block; font-size: 7.5pt; font-weight: 400; color: var(--text-2); }
.catatan {
  margin: 2.5mm 0 0;
  padding: 2mm 3mm;
  background: var(--surface-2);
  font-size: 8.5pt;
}

/* Tabel */
.tabel {
  width: 100%;
  margin: 0 0 3mm;
  border-collapse: collapse;
  font-size: 8.75pt;
  line-height: 1.4;
}
.tabel th, .tabel td {
  padding: 1.5mm 2mm;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.tabel thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: 8pt;
  font-weight: 600;
}
.tabel tbody th { font-weight: 600; }
.tabel .lebar-status { width: 27mm; }
.tabel-data th { width: 30%; font-weight: 500; color: var(--text-2); }
.tabel-data td { font-variant-numeric: tabular-nums; }

/* Label status, sama dengan situs. Bentuk garis membedakan label saat dicetak hitam putih. */
.status {
  display: inline-block;
  padding: 0 1.5mm;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: var(--navy-tint);
  color: var(--navy);
  font-size: 7.5pt;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.status-permintaan { border-color: var(--line-strong); background: transparent; color: var(--text-2); }
.status-purwarupa { border-style: dashed; background: transparent; }
.status-internal { background: transparent; }
.status-kembang { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--text-2); }
.status-rancangan { border-style: dotted; border-color: var(--line-strong); background: transparent; color: var(--text-2); }

/* QR */
.qr-baris { display: flex; flex-wrap: wrap; gap: 6mm; margin: 2mm 0 0; padding: 0; list-style: none; }
.qr-baris li { margin: 0; width: 30mm; font-size: 7.5pt; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.qr { display: block; width: 22mm; height: 22mm; margin-bottom: 1mm; }
.qr-baris b { display: block; color: var(--text); font-weight: 500; }

/* Sampul */
.sampul { padding: 18mm 18mm 0; }
.sampul .lembar-isi { display: flex; flex-direction: column; }
.sampul-kepala { display: flex; align-items: center; gap: 4mm; font-size: 12pt; font-weight: 500; }
.sampul-kepala img { width: 16mm; height: 16mm; }
.sampul-judul { margin-top: 62mm; max-width: 150mm; }
.sampul-judul .jenis { margin: 0 0 3mm; font-size: 13pt; color: var(--text-2); }
.sampul-judul h1 { margin: 0 0 6mm; font-size: 30pt; letter-spacing: -0.01em; color: var(--navy); }
.sampul-judul .posisi { margin: 0 0 6mm; font-size: 15pt; line-height: 1.35; }
.sampul-judul .edisi { font-size: 11pt; color: var(--text-2); }
.sampul-bawah { margin-top: auto; padding-bottom: 12mm; font-size: 9pt; color: var(--text-2); }
.sampul-bawah p { margin: 0 0 1mm; }
.sampul::after { content: ""; display: block; height: 5mm; margin: 0 -18mm; background: var(--navy); }

/* Dua kolom di lembar A4 */
.dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7mm; }
.dua-kiri { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 7mm; }

/* Profil Kemampuan Usaha: satu lembar padat */
.ringkas { font-size: 9pt; }
.ringkas h2 { font-size: 10.5pt; margin-bottom: 2mm; }
.ringkas .tabel { font-size: 8pt; margin-bottom: 2mm; }
.ringkas .tabel th, .ringkas .tabel td { padding: 1mm 1.5mm; }
.ringkas ul { margin-bottom: 1.5mm; }
.ringkas li { margin-bottom: 0.5mm; }
.ringkas .bagian + .bagian { margin-top: 4mm; }
.kepala-ringkas { display: flex; align-items: center; gap: 4mm; padding-bottom: 3mm; margin-bottom: 4mm; border-bottom: 2px solid var(--navy); }
.kepala-ringkas img { width: 13mm; height: 13mm; }
.kepala-ringkas .nama { font-size: 14pt; font-weight: 600; line-height: 1.2; }
.kepala-ringkas .sub { color: var(--text-2); font-size: 9pt; }
.kepala-ringkas .edisi { margin-left: auto; text-align: right; color: var(--text-2); font-size: 9pt; }

/* Cetak */
@media print {
  body { background: none; }
  .alat { display: none; }
  .lembar { margin: 0; border: 0; break-after: page; }
  .lembar:last-of-type { break-after: auto; }
  a { color: inherit; text-decoration: none; }
}

/* HP dan tablet kecil: lembar mengalir, tidak lagi setinggi A4. Versi A4 tetap ada di PDF. */
@media screen and (max-width: 840px) {
  body { font-size: 15px; }
  .alat { padding: 8px 16px; }
  .lembar { width: auto; height: auto; margin: 0 0 12px; padding: 28px 16px; border-width: 1px 0; }
  .lembar-isi { overflow: visible; }
  .kaki { display: none; }
  .dua, .dua-kiri { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sampul { padding-bottom: 0; }
  .sampul-judul { margin-top: 40px; }
  .sampul-judul h1 { font-size: 30px; }
  .sampul-judul .posisi { font-size: 19px; }
  .sampul-bawah { margin-top: 32px; padding-bottom: 24px; }
  .sampul::after { margin: 0 -16px; }
  .kepala-ringkas { flex-wrap: wrap; }
  .alat .alat-ganti { display: none; }
  .kepala-ringkas .edisi { margin-left: 0; text-align: left; width: 100%; }
  .tabel { font-size: 14px; }
  .ringkas, .ringkas .tabel { font-size: 14px; }
  .status, .kaki, .qr-baris li, .istilah { font-size: 12px; }
  .kecil, .catatan { font-size: 13px; }
  .qr { width: 96px; height: 96px; }
  .qr-baris li { width: 110px; }
  a.istilah { display: flex; align-items: center; min-height: 44px; }
}

@media screen and (max-width: 639px) {
  .tabel, .tabel tbody, .tabel tr, .tabel th, .tabel td { display: block; width: auto; }
  .tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .tabel th, .tabel td { padding: 2px 0; border: 0; }
  .tabel-data th { width: auto; }
}