/* =====================================================================
   cv.css — CV / resume profesional (layar + cetak A4)
   Ukuran teks di dalam .lembar memakai em relatif terhadap satu ukuran
   dasar, supaya layar, ponsel, dan cetak cukup mengatur satu angka.
   ===================================================================== */

/* Token desain — salinan dari style.css :root (jaga tetap sama).
   Sengaja tidak memuat style.css utuh agar gaya beranda tidak bocor
   ke dokumen cetak. */
:root{
  --bg:#f1f2f8;
  --bg-soft:#e9ebf6;
  --card:#ffffff;
  --ink:#15152f;
  --ink-2:#6e7093;
  --ink-3:#707292;            /* CV: lebih gelap dari style.css (#9a9cb8) supaya teks kecil lolos kontras AA */
  --line:#dfe1ef;
  --indigo:#2a2aa0;
  --indigo-2:#3d3dcc;
  --pink:#ff4e8e;
  --mint:#31c48d;
  --amber:#f5a524;
  --violet:#8b5cf6;
  --radius:22px;
  --shadow-sm:0 10px 30px -14px rgba(23,23,74,.28);
  --shadow:0 26px 60px -24px rgba(23,23,74,.30);
  --shadow-lg:0 44px 90px -34px rgba(23,23,74,.38);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* khusus CV */
  --teks:#2a2a47;            /* isi paragraf: sedikit lebih lembut dari --ink */
  --garis:.6pt solid var(--line);
  --dasar:9.6pt;             /* ukuran dasar dokumen (layar lebar & cetak) */
}

/* Inter variabel (bobot 100–900, huruf Latin lengkap) dari berkas f27.
   Berkas Inter 500/600/700 di fonts.css adalah subset tanpa huruf Latin dasar,
   sehingga bobot itu jatuh ke font sistem; CV memakai satu berkas ini untuk semua bobot. */
@font-face{
  font-family:"Inter CV";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/f27-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter CV",Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--indigo);color:#fff}
:focus-visible{outline:2px solid var(--indigo-2);outline-offset:3px;border-radius:6px}

.lompat{position:fixed;top:-100px;left:20px;z-index:200;background:var(--indigo);color:#fff;padding:12px 18px;border-radius:12px;transition:top .3s}
.lompat:focus{top:20px}

/* ============================ bilah alat ============================ */
.alat{position:sticky;top:0;z-index:50;padding:14px 16px 0}
.alat__isi{
  max-width:210mm;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(223,225,239,.9);border-radius:18px;padding:7px;
  box-shadow:var(--shadow-sm);
}
.alat__kiri,.alat__kanan{display:flex;align-items:center;gap:4px}
.alat__tombol{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  border:0;border-radius:12px;background:transparent;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;
  transition:background .25s var(--ease),color .25s,transform .25s var(--ease);
}
.alat__tombol svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.alat__tombol--hantu{color:var(--ink-2)}
.alat__tombol--hantu:hover{background:var(--bg);color:var(--ink)}
.alat__tombol--utama{background:var(--indigo);color:#fff;box-shadow:0 10px 22px -12px rgba(42,42,160,.7)}
.alat__tombol--utama:hover{background:var(--indigo-2);transform:translateY(-1px)}

.alat__mode{display:inline-flex;padding:3px;border-radius:12px;background:var(--bg)}
.alat__pilih{
  min-height:32px;padding:0 13px;border:0;border-radius:9px;background:transparent;cursor:pointer;
  font-size:12.5px;font-weight:600;color:#565879;white-space:nowrap;   /* kontras ≥ 4,5:1 di atas latar bilah */
  transition:background .25s var(--ease),color .25s,box-shadow .25s;
}
.alat__pilih:hover{color:var(--ink)}
.alat__pilih[aria-pressed="true"]{background:#fff;color:var(--indigo);box-shadow:0 4px 12px -6px rgba(23,23,74,.35)}

.alat__pesan{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);z-index:60;
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;padding:10px 16px;border-radius:12px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
  max-width:calc(100vw - 32px);text-align:center;
}
.alat__pesan.is-tampil{opacity:1;transform:translate(-50%,0)}
.alat__pesan:empty{display:none}

/* ============================ panggung & lembar ============================ */
.panggung{padding:22px 16px 64px}
.lembar{
  position:relative;
  width:210mm;max-width:100%;min-height:297mm;margin-inline:auto;
  background:var(--card);color:var(--ink);
  padding:12mm 12mm 11mm;   /* lebar isi 186 mm = lebar isi cetak A4 bermargin 12 mm */
  border-radius:6px;
  box-shadow:0 1px 0 rgba(23,23,74,.04),var(--shadow-lg);
  font-size:var(--dasar);line-height:1.5;
}
.lembar:focus{outline:none}
.lembar__muat{color:var(--ink-3);font-size:1.1em;text-align:center;padding:30mm 0}
.lembar__muat a{color:var(--indigo);text-decoration:underline}

/* garis aksen di pucuk dokumen: indigo dengan sedikit pink */
.lembar__aksen{height:2.4pt;border-radius:2pt;margin-bottom:6mm;
  background:linear-gradient(90deg,var(--indigo) 0 72%,var(--indigo-2) 72% 88%,var(--pink) 88% 100%)}

.ikon{width:1.05em;height:1.05em;flex:none;fill:none;stroke:var(--indigo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------- kepala ------------------------------- */
.kepala{display:grid;grid-template-columns:26mm 1fr;gap:6mm;align-items:center}
.kepala__foto{width:26mm;height:26mm;border-radius:4.5mm;overflow:hidden;background:#101830;
  box-shadow:0 8px 18px -10px rgba(23,23,74,.55)}
.kepala__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.kepala__label{font-size:.72em;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--indigo);margin-bottom:1.2mm}
.kepala__nama{font-family:Poppins,"Inter CV",sans-serif;font-weight:700;font-size:2.2em;line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.kepala__gelar{font-weight:600;font-size:.62em;letter-spacing:-.01em;color:var(--ink-2)}
.kepala__peran{margin-top:1.6mm;font-size:.9em;font-weight:500;color:var(--ink-2);display:flex;flex-wrap:wrap;column-gap:.55em;row-gap:.5mm}
.kepala__peran i{font-style:normal;color:var(--pink);font-weight:700}

.kontak{margin-top:3mm;display:flex;flex-wrap:wrap;gap:1.4mm 4.6mm;font-size:.84em;color:var(--teks)}
.kontak li,.kontak a{display:inline-flex;align-items:center;gap:1.4mm;min-width:0}
.kontak a{transition:color .2s}
.kontak a:hover{color:var(--indigo)}
@media screen{.kontak a{min-height:24px}}   /* ukuran target sentuh minimum (WCAG 2.5.8) */
.kontak span{overflow-wrap:anywhere}
.kontak__ket{color:var(--ink-2)}   /* --ink-3 tak lolos kontras AA */

/* ------------------------------ ringkasan ------------------------------ */
.ringkasan{margin-top:5.5mm;padding-top:4mm;border-top:var(--garis);display:grid;grid-template-columns:26mm 1fr;gap:6mm}
.ringkasan__judul{font-family:Poppins,"Inter CV",sans-serif;font-weight:600;font-size:.76em;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);padding-top:.35em}
.ringkasan p{font-size:1.02em;line-height:1.58;color:var(--teks)}

/* ------------------------------ angka kunci ------------------------------ */
.angka{margin-top:4.5mm;display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--garis);border-bottom:var(--garis)}
.angka li{padding:2.6mm 3mm 2.6mm 3.4mm;display:grid;gap:.4mm;align-content:start}
.angka li+li{border-left:var(--garis)}
.angka li:first-child{padding-left:0}
.angka b{font-family:Poppins,"Inter CV",sans-serif;font-weight:700;font-size:1.55em;line-height:1.1;letter-spacing:-.02em;color:var(--indigo)}
.angka li:first-child b{color:var(--pink)}
.angka span{font-size:.76em;line-height:1.35;color:var(--ink-2)}

/* ------------------------------ kolom ------------------------------ */
.kolom{margin-top:6mm;display:grid;grid-template-columns:minmax(0,1fr) 58mm;column-gap:7mm}
.kolom__samping{border-left:var(--garis);padding-left:6mm}

.bagian{margin-bottom:5.2mm}
.bagian__judul{
  display:flex;align-items:baseline;gap:2mm;
  font-family:Poppins,"Inter CV",sans-serif;font-weight:600;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);
  padding-bottom:1.6mm;margin-bottom:3mm;border-bottom:var(--garis);
  break-after:avoid;page-break-after:avoid;
}
.bagian__judul::before{content:"";width:1.5mm;height:1.5mm;border-radius:.4mm;background:var(--pink);flex:none;align-self:center}
.bagian__judul small{margin-left:auto;font-family:"Inter CV",Inter,sans-serif;font-weight:500;font-size:.95em;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}

/* entri (pengalaman, proyek, pengajaran) */
.entri,.ajar{break-inside:avoid;page-break-inside:avoid}
.entri+.entri{margin-top:3.3mm}
.entri__baris{display:flex;align-items:baseline;justify-content:space-between;gap:3mm}
.entri__judul{font-family:Poppins,"Inter CV",sans-serif;font-weight:600;font-size:1.04em;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.entri__waktu{flex:none;font-size:.8em;font-weight:500;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.entri__org{font-size:.86em;font-weight:500;color:var(--indigo);margin-top:.3mm}
.entri__catatan{font-size:1em;line-height:1.5;color:var(--teks);margin-top:.9mm}
.entri__tag{font-size:.74em;color:var(--ink-2);margin-top:.7mm;letter-spacing:.01em}
.entri__tag i{font-style:normal}
.entri__hasil{font-size:1em;line-height:1.48;color:var(--teks);margin-top:.9mm}
.entri__hasil b{font-size:.78em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d11d66;margin-right:1mm}   /* pink digelapkan: kontras AA */
.entri__stack{display:flex;flex-wrap:wrap;align-items:center;gap:.6mm 3mm;font-size:.76em;color:var(--ink-2);margin-top:.8mm}
.entri__tautan{display:inline-flex;align-items:center;gap:1mm;color:var(--indigo);font-weight:600}
.entri__tautan .ikon{width:1.1em;height:1.1em}
.entri__tautan:hover{text-decoration:underline}

/* teks sebaris: hanya dipakai mode ringkas (organisasi/tempat pindah ke baris judul) */
.sebaris{display:none}

/* status */
.pil{display:inline-block;vertical-align:.12em;margin-left:1.2mm;padding:.25mm 1.6mm;border-radius:99px;
  font-family:"Inter CV",Inter,sans-serif;font-size:.6em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;
  color:var(--ink-2);background:var(--bg-soft);white-space:nowrap}
.pil[data-tone="hijau"]{color:#127a55;background:#e3f6ee}
.pil[data-tone="indigo"]{color:var(--indigo);background:#e7e8fb}
.pil[data-tone="kuning"]{color:#9a5b00;background:#fdf1dc}
.pil[data-tone="ungu"]{color:#6437c9;background:#efe8fe}
.pil[data-tone="abu"]{color:#4f5172;background:var(--bg-soft)}

/* ------------------------------ buku ------------------------------ */
.bagian.buku,.bagian.pengajaran{margin-top:.6mm}
.buku-daftar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7mm}
.buku{padding:1.8mm 0 2mm;border-bottom:.5pt dotted var(--line);break-inside:avoid;page-break-inside:avoid}
.buku__baris{display:flex;align-items:baseline;justify-content:space-between;gap:2mm}
.buku__baris .pil{flex:none;margin-left:0}
.buku__judul{font-family:Poppins,"Inter CV",sans-serif;font-weight:600;font-size:.96em;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.buku__sub{font-size:.84em;font-style:italic;line-height:1.4;color:var(--ink-2);margin-top:.2mm}
.buku__meta{font-size:.74em;color:var(--ink-3);margin-top:.4mm}
.buku__ringkas-ket{display:none;font-size:.76em;color:var(--ink-3);margin-top:1.6mm}

/* ------------------------------ pengajaran ------------------------------ */
.ajar-daftar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3mm 7mm}

/* ------------------------------ kolom samping ------------------------------ */
.kolom__samping .bagian{margin-bottom:5mm}
.bilah-daftar{display:grid;gap:1.9mm}
.bilah{display:grid;gap:.8mm;break-inside:avoid}
.bilah__nama{font-size:.84em;font-weight:500;color:var(--teks);line-height:1.3}
.bilah__jalur{display:block;height:2.2pt;border-radius:2pt;background:var(--bg-soft);overflow:hidden}
.bilah__jalur span{display:block;height:100%;width:var(--nilai);border-radius:inherit;background:linear-gradient(90deg,var(--indigo),var(--indigo-2))}

.tek+.tek{margin-top:2.4mm}
.tek__judul{font-size:.68em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.2mm}
.tek__teks{display:none;font-size:.82em;line-height:1.45;color:var(--teks)}
.cip-daftar{display:flex;flex-wrap:wrap;gap:1.1mm}
.cip{display:inline-flex;align-items:center;gap:1mm;font-size:.74em;line-height:1.4;color:var(--teks);
  padding:.35mm 1.7mm .35mm 1.4mm;border:.5pt solid var(--line);border-radius:99px;background:#fff;white-space:nowrap}
.cip::before{content:"";width:1.3mm;height:1.3mm;border-radius:50%;background:var(--warna,var(--indigo));flex:none}

.mini-daftar{display:grid;gap:2.4mm}
.mini{break-inside:avoid}
.mini__judul{font-size:.88em;font-weight:600;line-height:1.35;color:var(--ink)}
.mini__meta{font-size:.8em;line-height:1.4;color:var(--ink-2);margin-top:.3mm}
.mini__meta span{color:var(--ink-3);white-space:nowrap}
.mini__ket{font-size:.76em;font-style:italic;color:var(--ink-3);margin-top:.2mm}
.perusahaan__alamat{font-size:.78em}

.layanan-daftar{display:grid;gap:.9mm;font-size:.84em;color:var(--teks)}
.layanan-daftar li{display:flex;gap:1.8mm;align-items:baseline;line-height:1.35}
.layanan-daftar li::before{content:"";width:2mm;height:.6pt;background:var(--indigo);flex:none;transform:translateY(-.25em)}

/* -------------------------------- kaki -------------------------------- */
.kaki{margin-top:5mm;padding-top:2.6mm;border-top:var(--garis);display:flex;justify-content:space-between;gap:4mm;flex-wrap:wrap;
  font-size:.76em;color:var(--ink-3);break-inside:avoid}
.kaki a{color:var(--indigo);font-weight:600}
.kaki a:hover{text-decoration:underline}

/* ============================ mode ringkas ============================ */
[data-mode="ringkas"] .detail,
[data-mode="ringkas"] .lebih{display:none}
[data-mode="ringkas"] .buku__ringkas-ket{display:block}
[data-mode="ringkas"] .entri+.entri{margin-top:2.2mm}
[data-mode="ringkas"] .buku__sub{display:none}
[data-mode="ringkas"] .bagian{margin-bottom:4mm}
[data-mode="ringkas"] .kolom__samping .bagian{margin-bottom:3.8mm}
[data-mode="ringkas"] .sebaris{display:inline;font-family:"Inter CV",Inter,sans-serif;font-weight:500;font-size:.84em;letter-spacing:0;color:var(--indigo)}
[data-mode="ringkas"] .buku .sebaris{color:var(--ink-3)}
[data-mode="ringkas"] .pengalaman .entri__org,
[data-mode="ringkas"] .pengajaran .entri__org,
[data-mode="ringkas"] .proyek .entri__org,
[data-mode="ringkas"] .mini__ket,
[data-mode="ringkas"] .layanan,
[data-mode="ringkas"] .perusahaan{display:none}
[data-mode="ringkas"] .entri__hasil{margin-top:.4mm}
[data-mode="ringkas"] .buku-daftar,
[data-mode="ringkas"] .ajar-daftar{grid-template-columns:1fr}
[data-mode="ringkas"] .buku{padding:.9mm 0;border-bottom:0}
[data-mode="ringkas"] .ajar-daftar{row-gap:1.2mm}
[data-mode="ringkas"] .bawah .bagian{margin-top:0}
[data-mode="ringkas"] .angka,
[data-mode="ringkas"] .proyek .entri__hasil,
[data-mode="ringkas"] .cip-daftar{display:none}
[data-mode="ringkas"] .tek__teks{display:block}
[data-mode="ringkas"] .tek+.tek{margin-top:1.6mm}
[data-mode="ringkas"] .tek__judul{margin-bottom:.4mm}
[data-mode="ringkas"] .bilah-daftar{gap:1.5mm}
[data-mode="ringkas"] .kolom{margin-top:4.5mm;grid-template-columns:minmax(0,1fr) 62mm;column-gap:6mm}
[data-mode="ringkas"] .kolom__samping{padding-left:5mm}
[data-mode="ringkas"] .lembar__aksen{margin-bottom:4.5mm}
[data-mode="ringkas"] .kepala{grid-template-columns:22mm 1fr;gap:5mm}
[data-mode="ringkas"] .kepala__foto{width:22mm;height:22mm;border-radius:4mm}
[data-mode="ringkas"] .kepala__nama{font-size:2em}
[data-mode="ringkas"] .kontak{margin-top:2.2mm}
[data-mode="ringkas"] .ringkasan{grid-template-columns:1fr;margin-top:4mm;padding-top:3.2mm}
[data-mode="ringkas"] .ringkasan__judul{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-mode="ringkas"] .entri+.entri{margin-top:1.8mm}
/* keahlian: nama dan bilah sebaris */
[data-mode="ringkas"] .bilah{grid-template-columns:minmax(0,1fr) 13mm;align-items:center;column-gap:2mm}
[data-mode="ringkas"] .bilah-daftar{gap:1.1mm}
/* teknologi: label kelompok sebaris dengan daftarnya */
[data-mode="ringkas"] .tek__judul{display:inline;margin:0 1.2mm 0 0}
[data-mode="ringkas"] .tek__teks{display:inline}
[data-mode="ringkas"] .kontak__ket{display:none}
[data-mode="ringkas"] .kontak{column-gap:3mm;font-size:.8em}
[data-mode="ringkas"] .bagian__judul{margin-bottom:2.2mm}
[data-mode="ringkas"] .kolom__utama .bagian{margin-bottom:3.4mm}
[data-mode="ringkas"] .kaki{margin-top:2.5mm;padding-top:2mm}

/* ============================ layar sempit ============================ */
@media screen and (max-width:860px){
  .alat{padding:10px 10px 0}
  .alat__isi{justify-content:center}
  .lembar{width:100%;min-height:0;padding:26px 20px 20px;border-radius:18px;font-size:13.5px}
}
@media screen and (max-width:640px){
  .alat{position:static}       /* di ponsel bilah alat tidak menempel agar dokumen lega */
  .alat__isi{gap:4px;padding:6px}
  .alat__kiri,.alat__kanan{flex:1 1 100%;justify-content:space-between}
  .alat__mode{flex:1 1 100%}
  .alat__pilih{flex:1}
  .alat__tombol{padding:0 11px;font-size:12.5px}
  .panggung{padding:14px 10px 48px}
  .lembar{padding:22px 18px 18px;font-size:13.5px}

  .kepala{grid-template-columns:76px 1fr;gap:14px;align-items:start}
  .kepala__foto{width:76px;height:76px;border-radius:16px}
  .kepala__nama{font-size:1.6em}
  .kepala__peran{flex-direction:column;row-gap:2px}
  .kepala__peran i{display:none}
  .kontak{grid-column:1 / -1;flex-direction:column;gap:6px;margin-top:4px}
  .kepala__teks{display:contents}
  .kepala__label,.kepala__nama,.kepala__peran{grid-column:2}
  .kepala__label{grid-row:1;align-self:end;margin-bottom:0}

  .ringkasan{grid-template-columns:1fr;gap:6px}
  .angka{grid-template-columns:repeat(2,1fr)}
  .angka li{padding:10px 10px 10px 12px}
  .angka li:nth-child(odd){padding-left:0;border-left:0}
  .angka li:nth-child(n+3){border-top:var(--garis)}

  .kolom{grid-template-columns:1fr}
  .kolom__samping{border-left:0;padding-left:0;border-top:var(--garis);padding-top:18px}
  .buku-daftar,.ajar-daftar{grid-template-columns:1fr}
  .entri__baris{flex-direction:column;gap:0}
  .buku__baris{flex-wrap:wrap}
}
/* foto kepala tetap di baris sendiri pada layout ponsel */
@media screen and (max-width:640px){
  .kepala__foto{grid-row:1 / span 3}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ================================ cetak ================================ */
@page{size:A4;margin:12mm}
@media print{
  html,body{background:#fff}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .alat,.lompat,.alat__pesan{display:none!important}
  .panggung{padding:0}
  .lembar{width:auto;max-width:none;min-height:0;margin:0;padding:0;border-radius:0;box-shadow:none;font-size:var(--dasar)}
  a{color:inherit}
  .entri__tautan,.kaki a{color:var(--indigo)}
  .kepala,.angka,.ringkasan{break-inside:avoid}
}