@page {
  size: landscape; /* Orientasi Landscape sesuai gambar */
  margin: 1cm;
}

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 20px;
  background-color: #fff;
  color: #000;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0056b3; /* Warna Biru Profesional */
  padding: 15px 30px;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky; /* Agar navbar tetap di atas saat scroll */
  top: 0;
  z-index: 1000;
}

/* Logo */
.navbar .logo {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Menu Links (Desktop) */
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px; /* Jarak antar menu */
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 8px 12px;
  transition: 0.3s;
  border-radius: 4px;
}

/* Efek saat mouse diarahkan (Hover) */
.nav-links li a:hover {
  background-color: #004494; /* Biru lebih gelap */
  color: #ffcc00; /* Aksen kuning */
}

/* Tombol Hamburger (Disembunyikan di Desktop) */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: white;
  border-radius: 2px;
}

/* --- 3. RESPONSIVE (MOBILE VIEW) --- */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* Munculkan tombol hamburger */
  }

  .nav-links {
    display: none; /* Sembunyikan menu desktop */
    width: 100%;
    flex-direction: column;
    position: absolute;
    top: 60px; /* Sesuaikan dengan tinggi navbar */
    left: 0;
    background-color: #0056b3;
    text-align: center;
    padding: 20px 0;
  }

  .nav-links li {
    margin: 10px 0;
  }

  /* Class 'active' ditambahkan lewat JavaScript saat diklik */
  .nav-links.active {
    display: flex;
  }
}

/* --- 1. HEADER SECTION --- */
.header-container {
  position: relative;
  text-align: center;
  margin-bottom: 5px;
}

.garuda-logo {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
}

.header-title {
  font-weight: bold;
  text-transform: uppercase;
  margin: 2px 0;
  font-size: 16px;
}

.header-subtitle {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 5px;
}

.header-line {
  border: none;
  border-top: 3px solid black;
  margin-top: 15px;
  margin-bottom: 20px;
}

.qr-code {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
}

/* --- 2. INFO TABLE (Instansi, Jabatan, dll) --- */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 12px;
}

.info-table td,
.info-table th {
  padding: 5px 8px;
  vertical-align: top;
}

/* Baris Header Biru (Kode - Jumlah) */
.row-header {
  background-color: #87cefa; /* Warna biru langit */
  font-weight: bold;
}

.row-header .left {
  text-align: left;
}
.row-header .right {
  text-align: right;
}

/* Kolom Label (Instansi :) */
.col-label {
  font-weight: bold;
  width: 130px;
}
.col-sep {
  width: 10px;
  text-align: center;
}
.col-val {
  text-align: left;
}
.col-count {
  width: 80px;
  text-align: right;
}

.summary-table {
  width: 80%;
  margin: 0 auto; /* Tengah halaman */
  border-collapse: collapse;
  text-align: center;
  font-size: 11px;
}

.summary-table th,
.summary-table td {
  border: 1px solid #000;
  padding: 5px;
  vertical-align: middle;
}

.summary-table thead th {
  background-color: #87cefa; /* Warna biru yang sama */
  font-weight: bold;
}

/* Baris nomor (1, 2, 3...) */
.row-number td {
  background-color: #f0f0f0;
  font-size: 9px;
  padding: 2px;
}

.bg-blue {
  background-color: #87cefa;
  font-weight: bold;
}

/* --- Table Styles --- */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 20px;
}

th,
td {
  border: 1px solid black;
  padding: 4px 2px;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  font-size: 11px;
}

thead th {
  background-color: #6ddaf3;
  font-weight: bold;
  text-transform: uppercase;
  height: 30px;
}

.col-index td {
  background-color: #6ddaf3;
  font-size: 8px;
  height: 12px;
  padding: 0;
}

/* --- Column Widths --- */
.w-no {
  width: 30px;
}
.w-nopes {
  width: 110px;
}
.w-nama {
  width: 200px;
}
.w-tgl {
  width: 70px;
}
.w-pend {
  width: 60px;
}
.w-skd {
  width: 40px;
}
.w-total {
  width: 50px;
}
.w-ket {
  width: 35px;
}

/* --- Footer & Section --- */
.section {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 20px;
}

.text {
  flex: 2;
}

.image {
  flex: 0.8;
}

.image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.footer-note {
  margin-top: 20px;
  font-size: 9px;
  font-style: italic;
}

/* --- Helpers --- */
.text-left {
  text-align: left !important;
  padding-left: 5px;
}

.bold {
  font-weight: bold;
}

.line {
  border: none;
  border-top: 2px solid black;
  margin: 20px 0;
}

.grid-container {
  display: grid;
  /* Definisi 4 Kolom:
               1. Label (Instansi...) : 120px
               2. Pemisah (:)         : 20px
               3. Isi Data            : Auto (sisa ruang)
               4. Jumlah              : 60px
            */
  grid-template-columns: 120px 20px 1fr 60px;
  width: 100%;
  border-collapse: collapse;
}

/* Style umum untuk setiap sel */
.cell {
  padding: 5px;
  display: flex;
  align-items: center; /* Teks vertikal di tengah */
}

/* --- Styling Khusus --- */

/* Background Biru Muda */
.bg-blue {
  background-color: #9cdbf9; /* Warna disesuaikan dengan gambar */
  font-weight: bold;
}

/* Tulisan Tebal */
.bold {
  font-weight: bold;
}

/* Posisi Teks */
.text-center {
  justify-content: center;
}
.text-right {
  justify-content: flex-end;
}

/* --- Pengaturan Posisi Kolom (Grid Spanning) --- */

/* Header "Kode" (Mengambil kolom 1 s/d 3) */
.header-kode {
  grid-column: 1 / 4;
  padding-left: 100px; /* Geser visual agar terlihat di tengah area data */
  justify-content: center;
}

/* Header "Jumlah" (Kolom 4) */
.header-jumlah {
  grid-column: 4 / 5;
}

/* Baris Pendidikan (Isi mengambil kolom 2 dan 3) */
.pendidikan-content {
  grid-column: 2 / 4;
  font-weight: normal; /* Isinya tidak bold */
}

/* Baris Halaman (Isi mengambil kolom 2 s/d 4) */
.halaman-content {
  grid-column: 2 / 5;
  align-items: flex-start;
}

/* Jarak antar baris sedikit lebih renggang seperti di gambar */
.row-gap {
  margin-bottom: 2px;
}