/* ==========================================================================
   Halaman CV — tata letak A4 dua kolom, mempertahankan struktur CV lama:
   kolom kiri (foto, nama, ringkasan, kontak, kemampuan, framework, sosial),
   kolom kanan (pendidikan, pengalaman, sertifikat, informasi lain).
   Dirancang untuk layar sekaligus cetak; isinya datang dari data/site.json.
   ========================================================================== */

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

.cv-page {
  --cv-accent: #0bad94;
  --cv-accent-dark: #047664;
  --cv-ink: #2e2e2e;
  --cv-muted: #5e5e5e;
  --cv-rule: #d8dedd;
  --cv-left: 36%;

  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: #fff;
  color: var(--cv-ink);
  font-family: var(--font);
  font-size: 9.2pt;
  line-height: 1.5;
  display: grid;
  grid-template-columns: var(--cv-left) 1fr;
  box-shadow: var(--shadow-lg);
}

.cv-col { padding: 11mm 9mm; }
.cv-col--left { padding-top: 0; }

/* --- Kepala kolom kiri --------------------------------------------------- */
.cv-photo { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cv-namebar {
  background: var(--cv-accent);
  color: #fff;
  padding: 3mm 9mm;
  margin: -6mm -9mm 4mm;
  position: relative;
}
.cv-name { font-size: 17pt; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.1; }
.cv-role { font-size: 11pt; color: var(--cv-muted); margin: 0 0 5mm; font-weight: 500; }

/* --- Judul bagian -------------------------------------------------------- */
.cv-h {
  font-size: 10.5pt; font-weight: 700; margin: 0 0 1.5mm;
  color: var(--cv-ink); letter-spacing: -.01em;
}
.cv-h + .cv-rule { margin-bottom: 3mm; }
.cv-rule { height: 1px; background: var(--cv-rule); position: relative; margin-bottom: 3mm; }
.cv-rule::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 12mm; height: 1.6px; background: var(--cv-accent);
}
.cv-block { margin-bottom: 6mm; }
.cv-block:last-child { margin-bottom: 0; }
.cv-text { margin: 0 0 2.5mm; color: var(--cv-muted); }

/* --- Kontak -------------------------------------------------------------- */
.cv-contact { list-style: none; margin: 0; padding: 0; }
.cv-contact li { display: flex; gap: 2.5mm; align-items: flex-start; margin-bottom: 2mm; color: var(--cv-muted); }
.cv-contact svg { width: 3.6mm; height: 3.6mm; flex: 0 0 auto; color: var(--cv-accent); margin-top: .6mm; }

/* --- Meter kemampuan: blok tersegmen seperti CV lama --------------------- */
.cv-skill { display: flex; align-items: center; gap: 2mm; margin-bottom: 1.8mm; }
.cv-skill__name { flex: 0 0 26mm; font-size: 8.6pt; }
.cv-skill__blocks { display: flex; gap: .8mm; flex: 1; }
.cv-skill__blocks i {
  flex: 1; height: 2.6mm; background: #d9dedd; border-radius: .4mm; display: block;
}
.cv-skill__blocks i.on { background: var(--cv-accent); }

.cv-list { list-style: none; margin: 0; padding: 0; }
.cv-list li { position: relative; padding-left: 3.5mm; margin-bottom: 1.4mm; color: var(--cv-muted); }
.cv-list li::before {
  content: ""; position: absolute; left: 0; top: 1.6mm;
  width: 1.4mm; height: 1.4mm; border-radius: 50%; background: var(--cv-accent);
}

.cv-social { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8mm; }
.cv-social li { display: flex; gap: 2mm; align-items: center; color: var(--cv-muted); font-size: 8.4pt; }
.cv-social svg { width: 3.4mm; height: 3.4mm; flex: 0 0 auto; color: var(--cv-accent); }

/* --- Entri kolom kanan --------------------------------------------------- */
.cv-entry { margin-bottom: 4.5mm; }
.cv-entry:last-child { margin-bottom: 0; }
.cv-entry__date { font-size: 8.4pt; color: var(--cv-muted); font-style: italic; margin-bottom: .6mm; }
.cv-entry__title { font-size: 10pt; font-weight: 700; margin: 0 0 .4mm; line-height: 1.25; }
.cv-entry__org { font-size: 9pt; margin: 0 0 1mm; }
.cv-entry__org span { color: var(--cv-muted); }
.cv-entry__text { font-size: 8.6pt; color: var(--cv-muted); margin: 0; }
.cv-entry__text b { color: var(--cv-ink); font-weight: 600; }

/* Baris pendidikan: tahun di kiri, isi di kanan (seperti CV lama) */
.cv-edu { display: grid; grid-template-columns: 22mm 1fr; gap: 3mm; margin-bottom: 3.5mm; }
.cv-edu__years { font-weight: 700; font-size: 9pt; }

/* --- Informasi lain + QR ------------------------------------------------- */
.cv-other { display: flex; gap: 4mm; align-items: flex-start; }
.cv-other img { width: 24mm; height: 24mm; flex: 0 0 auto; }
.cv-other p { font-size: 8.6pt; color: var(--cv-muted); margin: 0; }

.cv-footbar { grid-column: 1 / -1; height: 6mm; background: var(--cv-accent); }

/* --- Batang aksi (hanya di layar) ---------------------------------------- */
.cv-actions {
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
}
.cv-hint { text-align: center; color: var(--text-muted); font-size: var(--step--1); padding-bottom: var(--sp-6); margin: 0; }

@media (max-width: 220mm) {
  .cv-page { width: 100%; min-height: 0; grid-template-columns: 1fr; }
  .cv-col { padding: var(--sp-5); }
  .cv-namebar { margin-inline: calc(-1 * var(--sp-5)); padding-inline: var(--sp-5); }
}

@media print {
  .header, .footer, .cv-actions, .cv-hint, .skip-link { display: none !important; }
  body { background: #fff; }
  .cv-page {
    width: 210mm; min-height: 297mm; box-shadow: none; margin: 0;
    grid-template-columns: var(--cv-left) 1fr;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cv-entry, .cv-edu, .cv-block { break-inside: avoid; }
}