/* assets/css/sertifikat.css
 *
 * Tampilan dan aturan cetak Sertifikat Kompetensi.
 *
 * Dipisahkan dari components.css bukan sekadar demi kerapian: berkas ini
 * memuat aturan @page yang mengubah ukuran kertas seluruh dokumen. Aturan
 * seperti itu harus mudah ditemukan dan mudah dicabut, bukan terselip di
 * tengah dua ribu baris gaya komponen.
 *
 * MENGAPA ADA TIGA MODE CETAK, BUKAN SATU
 * Sertifikat butuh A4 lanskap; tabel kompetensi jauh lebih terbaca pada A4
 * potret. Satu dokumen tidak dapat memuat dua ukuran halaman sekaligus secara
 * andal di semua peramban — named pages (@page nama) baru didukung Chrome versi
 * baru dan tidak di Safari. Karena itu ukuran kertas ditentukan oleh kelas pada
 * <body> yang dipasang tepat sebelum window.print(), dan tiap tombol mencetak
 * satu jenis dokumen saja. "Cetak semua" memakai lanskap untuk keduanya —
 * pilihan yang berhasil di semua peramban, bukan yang paling ideal di satu.
 */

/* ============================================================== layar ==== */

.sertifikat-publik {
  display: flex;
  flex-direction: column;
  gap: var(--jarak-5);
  padding-bottom: var(--jarak-6);
}

/* Anak sebuah kotak flex ber-min-width:auto tidak mau menyusut di bawah lebar
 * isinya. Tanpa baris ini, lembar sertifikat yang memang lebih lebar daripada
 * layar ponsel mendorong SELURUH halaman menggulir ke samping, alih-alih
 * menggulir di dalam wadahnya sendiri. */
.sertifikat-publik > * { min-width: 0; }

/* ---------------------------------------------------------- pita status -- */

.pita-status {
  display: flex;
  gap: var(--jarak-3);
  align-items: flex-start;
  padding: var(--jarak-4);
  border-radius: var(--radius-3);
  border: 2px solid;
}

.pita-status--sah {
  border-color: var(--warna-sukses);
  background: var(--warna-sukses-lembut, rgba(22, 128, 74, .08));
  color: var(--warna-teks-sukses, var(--warna-sukses));
}

/* Sertifikat yang asli tetapi belum berisi kompetensi. Sengaja TIDAK hijau:
 * hijau dibaca sebagai "lulus", dan di sini belum ada apa pun yang lulus. */
.pita-status--netral {
  border-color: var(--warna-garis-kuat, var(--warna-garis));
  background: var(--warna-permukaan-2);
  color: var(--warna-teks);
}

.pita-status--tangguh {
  border-color: var(--warna-peringatan);
  background: var(--warna-peringatan-lembut, rgba(180, 120, 10, .1));
  color: var(--warna-teks-peringatan, var(--warna-peringatan));
}

.pita-status__ikon { flex: none; line-height: 0; }

.pita-status__judul {
  margin: 0 0 var(--jarak-1);
  font-size: var(--teks-lg);
  font-weight: 700;
  letter-spacing: .04em;
}

.pita-status__pesan {
  margin: 0 0 var(--jarak-1);
  font-size: var(--teks-sm);
  color: var(--warna-teks);
}

.kartu-verifikasi-bs { break-inside: avoid; }

.bilah-cetak {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jarak-2);
}

.bilah-cetak .tombol { flex: 1 1 12rem; }

/* ------------------------------------------------------ lembar A4 layar -- */

.sertifikat-publik__lembar-wadah {
  /* Lembar dibuat selebar apa pun ruang yang ada, lalu tingginya mengikuti
   * proporsi A4 lanskap. Di layar sempit ia mengecil utuh, tidak terpotong,
   * dan tidak memaksa halaman menggulir ke samping. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lembar {
  /* 297 x 210 mm. Dikunci di sini supaya yang terlihat di layar benar-benar
   * sama susunannya dengan yang keluar dari pencetak. */
  aspect-ratio: 297 / 210;
  width: 100%;
  min-width: 34rem;
  container-type: inline-size;
  background: #fdfdfb;
  color: #12212f;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: var(--radius-2);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  padding: 2.2cqw;
}

/* Gambar latar, bila sekolah memasangnya. Diletakkan sebagai elemen tersendiri
 * di bawah isi — bukan sebagai background-image milik .lembar — supaya tetap
 * ikut tercetak pada peramban yang mematikan pencetakan latar belakang CSS. */
.lembar__latar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.lembar { position: relative; }

.lembar__tepi { position: relative; z-index: 1; }

/* Ketika latar dipasang, bingkai bawaan dihilangkan supaya tidak bertumpuk
 * dengan ornamen milik latar itu sendiri. */
.lembar--berlatar .lembar__tepi { border: 0; outline: 0; }

/* Desain bawaan (tanpa latar sekolah): lambang samar di tengah dan siku emas
 * di keempat sudut bingkai (v2.62.0). Disembunyikan bila latar dipasang
 * supaya tidak bertumpuk dengan ornamen latar itu sendiri. */
.lembar:not(.lembar--berlatar) .lembar__tepi::before {
  content: '';
  position: absolute;
  inset: 24% 38% 22%;
  background: url('../icons/logo-sekolah.png') center / contain no-repeat;
  opacity: .045;
  z-index: -1;
  pointer-events: none;
}
.lembar:not(.lembar--berlatar) .lembar__tepi::after {
  content: '';
  position: absolute;
  inset: .9cqw;
  pointer-events: none;
  --s: 2.6cqw;
  --g: linear-gradient(#c8a64b, #c8a64b);
  background:
    var(--g) top left / var(--s) 2px, var(--g) top left / 2px var(--s),
    var(--g) top right / var(--s) 2px, var(--g) top right / 2px var(--s),
    var(--g) bottom left / var(--s) 2px, var(--g) bottom left / 2px var(--s),
    var(--g) bottom right / var(--s) 2px, var(--g) bottom right / 2px var(--s);
  background-repeat: no-repeat;
  z-index: -1;
}

.lembar__tepi {
  height: 100%;
  border: 2px solid #1e3a5f;
  outline: 1px solid #c8a64b;
  outline-offset: 2px;
  padding: 3cqw 4cqw;
  display: flex;
  flex-direction: column;
  /* Tanpa ini, nama panjang mendorong kaki sertifikat keluar halaman. */
  min-height: 0;
}

.lembar__kepala {
  display: flex;
  align-items: center;
  gap: 2cqw;
  flex: none;
}

/* Nomor di kanan atas, sejajar lambang (v2.62.0). */
.lembar__institusi { flex: 1 1 auto; min-width: 0; }
.lembar__nomor-blok {
  flex: none;
  text-align: right;
  padding: .6cqw 0 .6cqw 1.6cqw;
  border-left: 1px solid rgba(200, 166, 75, .7);
}
.lembar__nomor-blok .lembar__nomor { font-size: 1.75cqw; letter-spacing: .04em; color: #1e3a5f; }

/* Lambang sekolah. Sudut putihnya sudah dibuat transparan (lihat CHANGELOG),
 * jadi tidak perlu latar sendiri dan tidak meninggalkan kotak putih di atas
 * kertas krem. */
.lembar__logo {
  width: 8cqw;
  height: 8cqw;
  flex: none;
  object-fit: contain;
}

.lembar__sekolah {
  margin: 0;
  font-size: 2.9cqw;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1e3a5f;
}

.lembar__subsekolah {
  margin: .3cqw 0 0;
  font-size: 1.5cqw;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5b6b7c;
}

.lembar__badan {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 1cqw 0;
}

.lembar__judul {
  margin: 0;
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: .22em;
  color: #1e3a5f;
}

/* Garis hias emas di bawah judul: dua garis memudar dengan belah ketupat. */
.lembar__hias {
  display: block;
  position: relative;
  width: 30cqw;
  height: .9cqw;
  margin: 1cqw auto 0;
  background: linear-gradient(90deg, transparent, #c8a64b 30%, #c8a64b 44%, transparent 44%, transparent 56%, #c8a64b 56%, #c8a64b 70%, transparent)
    center / 100% 1px no-repeat;
}
.lembar__hias::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: .8cqw;
  height: .8cqw;
  background: #c8a64b;
  transform: translate(-50%, -50%) rotate(45deg);
}

.lembar__pengantar {
  margin: 1.4cqw 0 0;
  font-size: 1.7cqw;
  letter-spacing: .08em;
  color: #5b6b7c;
}

/* Nama siswa adalah titik pandang utama dokumen ini. */
.lembar__nama {
  margin: .6cqw 0 0;
  font-size: 5cqw;
  font-weight: 700;
  line-height: 1.1;
  color: #12212f;
  overflow-wrap: anywhere;
}

.lembar__identitas {
  margin: 1cqw 0 0;
  font-size: 1.7cqw;
  color: #3d4d5c;
}

.lembar__pernyataan {
  margin: 1.8cqw auto 0;
  max-width: 76%;
  font-size: 1.65cqw;
  line-height: 1.65;
  color: #3d4d5c;
  text-wrap: pretty;
}

.lembar__tangguh {
  margin: 1.6cqw auto 0;
  padding: .7cqw 2cqw;
  border: 2px solid #b4780a;
  color: #8a5c05;
  background: rgba(180, 120, 10, .09);
  font-size: 1.8cqw;
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: 4px;
}

.lembar__kaki {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 2cqw;
}

.lembar__label {
  margin: 0;
  font-size: 1.3cqw;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5b6b7c;
}

/* Huruf monospace dipasang di sini, bukan lewat kelas .angka: sejak .angka
   memakai huruf antarmuka, nomor pada lembar cetak tetap harus monospace. */
.lembar__nomor { margin: .3cqw 0 0; font-size: 2cqw; font-weight: 700; font-family: var(--font-angka); }
.lembar__tanggal { margin: .2cqw 0 0; font-size: 1.3cqw; font-weight: 600; color: #3d4d5c; }
.lembar__label--jarak { margin-top: 1.1cqw; }

/* Tanggal di kiri bawah: lebih kecil dan sedikit naik, tidak menempel di
 * pojok bingkai (v2.62.0). */
.lembar__kaki-kiri { align-self: end; padding: 0 0 1.4cqw 1.2cqw; }
.lembar__kaki-kiri .lembar__label { font-size: 1.05cqw; }

.lembar__kaki-qr { text-align: center; }

.lembar__qr {
  width: 15cqw;
  height: 15cqw;
  margin: 0 auto;
  background: #fff;
  padding: .6cqw;
  border-radius: 3px;
}

.lembar__qr svg { width: 100%; height: 100%; display: block; }

.lembar__qr-teks {
  margin: .5cqw 0 0;
  font-size: 1.2cqw;
  letter-spacing: .06em;
  color: #5b6b7c;
}

.lembar__kaki-kanan { text-align: center; justify-self: end; margin: 0 2.4cqw .6cqw 0; }
/* Tempat & tanggal pengesahan: huruf biasa, lebih kecil, gaya naskah dinas. */
.lembar__tempat { margin: 0; font-size: 1.35cqw; color: #3d4d5c; }
.lembar__jabatan { margin: .3cqw 0 0; font-size: 1.5cqw; font-weight: 600; }

/* Ruang tanda tangan. Tetap setinggi ini walau gambarnya tidak ada, supaya
 * tata letak kaki sertifikat tidak berubah antara yang bertanda tangan dan
 * yang akan ditandatangani basah. */
.lembar__ttd {
  height: 7cqw;
  display: grid;
  place-items: center;
}

.lembar__ttd img {
  max-height: 100%;
  max-width: 18cqw;
  object-fit: contain;
}

.lembar__pejabat {
  margin: 0;
  font-size: 1.7cqw;
  font-weight: 700;
  border-top: 1px solid #12212f;
  padding-top: .5cqw;
  display: inline-block;
  min-width: 18cqw;
}

.lembar__pejabat--kosong { min-height: 1.7cqw; }

/* ------------------------------------------------------- cropper -------- */

.cropper { display: flex; flex-direction: column; gap: var(--jarak-3); }

.cropper__bingkai {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-2);
  /* Papan catur tipis: bagian gambar yang tembus pandang jadi terlihat jelas,
   * terutama pada tanda tangan PNG. */
  background-color: var(--warna-permukaan-2);
  background-image:
    linear-gradient(45deg, rgba(128, 128, 128, .12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128, 128, 128, .12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, .12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, .12) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid var(--warna-garis);
  cursor: grab;
  touch-action: none;          /* geser dipegang skrip, bukan oleh gulir halaman */
}

.cropper__bingkai--seret { cursor: grabbing; }

.cropper__kanvas { display: block; }

.cropper__kendali {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  flex-wrap: wrap;
}

.cropper__zoom { flex: 1 1 8rem; min-width: 6rem; }

/* --------------------------------------------------- desain sertifikat -- */

.bilah-tab {
  display: flex;
  gap: var(--jarak-1);
  border-bottom: 1px solid var(--warna-garis);
  overflow-x: auto;
}

.bilah-tab__item {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--jarak-3) var(--jarak-4);
  font: inherit;
  color: var(--warna-teks-lembut);
  cursor: pointer;
  white-space: nowrap;
}

.bilah-tab__item:hover { color: var(--warna-teks); }

.bilah-tab__item[aria-current="page"] {
  color: var(--warna-primer);
  border-bottom-color: var(--warna-primer);
  font-weight: var(--tebal-tebal);
}

.bilah-tab__item:focus-visible {
  outline: 2px solid var(--warna-primer);
  outline-offset: -2px;
}

.aset-kartu__pratinjau {
  border-radius: var(--radius-2);
  border: 1px solid var(--warna-garis);
  background: var(--warna-permukaan-2);
  overflow: hidden;
}

.aset-kartu__pratinjau img { display: block; width: 100%; height: auto; }

/* Tanda tangan diperiksa di atas putih, karena di situlah ia akan dicetak. */
.aset-kartu__pratinjau--ttd { background: #fff; padding: var(--jarak-3); }
.aset-kartu__pratinjau--ttd img { max-height: 120px; width: auto; margin: 0 auto; }

/* ------------------------------------------------- QR di luar lembar ----- */

/* Dipakai laci LSP dan modal passport. Latar putih dan ruang di sekelilingnya
 * bukan hiasan: pemindai butuh kontras dan zona sunyi, termasuk ketika tema
 * gelap sedang aktif. */
.qr-kotak {
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-2);
  padding: var(--jarak-2);
}

.qr-kotak svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------- detail KC ----- */

.blok-detail .keadaan-kosong { padding: var(--jarak-5) var(--jarak-4); }

.blok-detail__jenis {
  font-size: var(--teks-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warna-teks-samar);
  margin-bottom: var(--jarak-2);
}

.tabel-kk__pemicu {
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-1);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tabel-kk__pemicu:focus-visible {
  outline: 2px solid var(--warna-primer);
  outline-offset: 2px;
  border-radius: 3px;
}

.tabel-kk__karet { line-height: 0; transition: transform .15s ease; }
.tabel-kk__pemicu[aria-expanded="true"] .tabel-kk__karet { transform: rotate(180deg); }

.daftar-ik {
  margin: 0;
  padding-left: var(--jarak-4);
  display: flex;
  flex-direction: column;
  gap: var(--jarak-1);
}

.daftar-ik__item {
  display: flex;
  gap: var(--jarak-2);
  font-size: var(--teks-sm);
}

.daftar-ik__kode { flex: none; color: var(--warna-teks-samar); }

@media (prefers-reduced-motion: reduce) {
  .tabel-kk__karet { transition: none; }
}

/* Di ponsel, tabel kompetensi berubah menjadi kartu — mengikuti perlakuan yang
 * sudah dipakai .tabel--peringkat di components.css.
 *
 * Bukan sekadar soal selera. Pada lebar <= 640px, components.css mengubah
 * .tabel-gulir menjadi overflow-x: visible, karena tabel yang seharusnya sudah
 * menjadi kartu tidak perlu digulir lagi. Tabel yang TIDAK ikut berubah akan
 * kehilangan wadah gulirnya dan mendorong seluruh halaman menggeser ke samping.
 */
@media (max-width: 640px) {
  .tabel-kk thead { display: none; }
  .tabel-kk, .tabel-kk tbody, .tabel-kk tr, .tabel-kk td { display: block; width: 100%; }

  .tabel-kk__utama {
    padding: var(--jarak-3);
    border-bottom: 1px solid var(--warna-garis);
  }

  .tabel-kk td {
    border: 0;
    padding: 0;
    white-space: normal;
  }

  .tabel-kk__utama td + td {
    display: inline-flex;
    align-items: baseline;
    gap: var(--jarak-1);
    margin-top: var(--jarak-2);
    margin-right: var(--jarak-4);
    text-align: left;
  }

  .tabel-kk__utama td[data-label]:not(:first-child)::before {
    content: attr(data-label) ' ';
    color: var(--warna-teks-samar);
    font-size: var(--teks-xs);
  }

  /* Baris indikator membentang penuh, tanpa mewarisi perataan sel tetangganya. */
  .tabel-kk__ik td { padding: 0 var(--jarak-3) var(--jarak-3); }
}

/* ============================================================== cetak ==== */

@media print {
  /* Kerangka aplikasi tidak pernah ikut tercetak. */
  .appbar, .bottomnav, .sidebar, .banner-jaringan, .toast-wadah,
  .bilah-aksi, .bilah-cetak, .lewati-ke-konten, .pemuat-denyut { display: none !important; }

  body { background: #fff; }
  .konten { padding: 0; margin: 0; }

  /* Warna latar pada dokumen resmi bukan hiasan: tanpa ini, pita penangguhan
   * dan bingkai sertifikat hilang saat pencetak menghemat tinta. */
  .lembar, .pita-status, .lembar__tangguh {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .lembar {
    width: 100%;
    min-width: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    /* Pada halaman cetak, satuan cqw tetap berlaku karena container-type
     * ikut tercetak; lebarnya kini lebar area cetak A4 lanskap. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .blok-kaki, .kartu-verifikasi-bs { break-inside: avoid; }

  /* Tabel tidak boleh terpotong di tengah baris, dan kepalanya diulang di
   * tiap halaman supaya kolom tetap terbaca pada cetakan berlembar-lembar. */
  .tabel-kk thead { display: table-header-group; }
  .tabel-kk tr { break-inside: avoid; page-break-inside: avoid; }
  .tabel-gulir { overflow: visible !important; }

  /* Indikator selalu ikut tercetak, walau di layar sedang terlipat: lembar
   * cetak tidak punya tombol untuk membukanya. */
  .tabel-kk__ik[hidden] { display: table-row !important; }
  .tabel-kk__karet { display: none; }

  /* Nomor halaman pada cetakan rincian kompetensi.
   *
   * Dipasang lewat @page, bukan sebagai elemen di dalam aliran dokumen:
   * elemen biasa hanya akan tercetak sekali, di halaman tempat ia berada.
   * `counter(page)` adalah satu-satunya penghitung halaman yang tersedia bagi
   * CSS, dan hanya berlaku di dalam margin box milik @page. */
  .blok-detail { counter-reset: none; }
}

/* --- mode 1: hanya sertifikat, A4 lanskap ------------------------------- */

@media print {
  body.cetak-sertifikat .blok-detail,
  body.cetak-sertifikat .blok-kaki,
  body.cetak-sertifikat .kartu-verifikasi-bs,
  body.cetak-sertifikat .pita-status { display: none !important; }
}

/* --- mode 2: hanya detail kompetensi, A4 potret ------------------------- */

@media print {
  body.cetak-detail .sertifikat-publik__lembar-wadah,
  body.cetak-detail .blok-kaki { display: none !important; }

  /* Pita status tetap ikut pada lembar detail. Daftar kompetensi milik
   * sertifikat yang ditangguhkan tidak boleh beredar tanpa keterangan itu. */
  body.cetak-detail .pita-status { display: flex !important; }

  /* Pada potret, lembar sertifikat tidak ikut, jadi tabel boleh selebar kertas. */
  body.cetak-detail .halaman, body.cetak-detail .sertifikat-publik { gap: 6mm; }
}

/* --- ukuran kertas ------------------------------------------------------ */

/*
 * Bawaannya A4 lanskap, karena dua dari tiga mode memakainya.
 *
 * @page TIDAK menerima selektor, sehingga ukuran kertas tidak dapat diikat ke
 * kelas pada <body> lewat CSS. Mode potret karena itu dipasang dari JavaScript
 * (components/cetak.js) sebagai elemen <style> sementara, lalu dicabut lagi
 * setelah dialog cetak ditutup. Itu satu-satunya cara yang bekerja di Chrome,
 * Firefox, maupun Safari.
 */
@page { size: A4 landscape; margin: 8mm; }

@media print {
  /* Ukuran lembar dikunci dalam milimeter saat mencetak, bukan mengikuti
   * aspect-ratio. Dengan margin 8mm, area cetak A4 lanskap adalah 281 x 194 mm;
   * membiarkan tingginya dihitung dari rasio 297:210 menghasilkan 198,7 mm —
   * lebih tinggi 4,7 mm daripada yang tersedia, dan sertifikat tumpah ke
   * halaman kedua. Selisih sekecil itu tidak terlihat sampai benar-benar
   * dicetak, jadi ukurannya dinyatakan eksplisit di sini.
   */
  .lembar {
    aspect-ratio: auto;
    width: 100%;
    height: 194mm;
  }

  /* Lembar mengisi tinggi halaman secara PAS. Sisa jarak sekecil apa pun di
   * bawahnya — padding wadah, gap flex, margin section — melampaui batas
   * halaman dan melahirkan halaman kedua yang kosong. Itu tidak terlihat di
   * layar dan baru ketahuan setelah 2.499 lembar tercetak dua kali lipat. */
  .sertifikat-publik { padding-bottom: 0; margin-bottom: 0; }
  .sertifikat-publik__lembar-wadah { overflow: visible; margin: 0; }
  body.cetak-sertifikat .sertifikat-publik { gap: 0; display: block; }

  /* Pada "cetak semua", tabel kompetensi mulai di halaman baru — bukan
   * menempel di bawah sertifikat. */
  body.cetak-semua .sertifikat-publik__lembar-wadah { break-after: page; }
}

/* --- mode "hadir": daftar hadir uji kompetensi, A4 potret (v2.43.0) ------ */
/* Dicetak dari Rincian Sesi penguji (cetak('hadir')). Hanya lembar .uj-hadir
 * yang ikut; seluruh isi halaman lain disembunyikan. */
@media print {
  body.cetak-hadir #konten .halaman > :not(.uj-hadir) { display: none !important; }
  body.cetak-hadir .uj-hadir { display: block !important; color: #000; font-size: 11pt; }
  body.cetak-hadir .uj-hadir h1 { margin: 0 0 4mm; font-size: 15pt; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
  body.cetak-hadir .uj-hadir table { width: 100%; border-collapse: collapse; }
  body.cetak-hadir .uj-hadir__info { margin-bottom: 5mm; }
  body.cetak-hadir .uj-hadir__info th { width: 32mm; padding: 1mm 2mm 1mm 0; text-align: left; font-weight: 600; vertical-align: top; }
  body.cetak-hadir .uj-hadir__info td { padding: 1mm 0; }
  body.cetak-hadir .uj-hadir__tabel th, body.cetak-hadir .uj-hadir__tabel td { border: .3mm solid #000; padding: 2mm; text-align: left; }
  body.cetak-hadir .uj-hadir__tabel th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.cetak-hadir .uj-hadir__tabel td { height: 9mm; }
  body.cetak-hadir .uj-hadir__tabel td:first-child { width: 10mm; text-align: center; }
  body.cetak-hadir .uj-hadir__tabel td:nth-child(3) { white-space: nowrap; }
  body.cetak-hadir .uj-hadir__tabel td:nth-child(4) { width: 40mm; }
  body.cetak-hadir .uj-hadir__tabel td:nth-child(5) { width: 32mm; }
  body.cetak-hadir .uj-hadir__tabel tr { break-inside: avoid; }
  body.cetak-hadir .uj-hadir__ttd { margin: 10mm 0 0 auto; width: 60mm; text-align: center; break-inside: avoid; }
  body.cetak-hadir .uj-hadir__ttd p { margin: 0; }
  body.cetak-hadir .uj-hadir__nama { margin-top: 18mm !important; font-weight: 600; text-decoration: underline; }
}