/* Generator CV ATS SIKATIN.

   Dua tampilan dalam satu berkas: antarmuka aplikasi (gelap, mengikuti sistem
   desain SIKATIN) dan lembar CV itu sendiri (putih, hitam, satu kolom).

   Lembar CV sengaja TIDAK memakai warna tema, kolom ganda, ikon, maupun batang
   penilaian. Yang membuat sebuah CV mudah dibaca mesin penyaring bukan
   keindahannya, melainkan strukturnya yang lurus dari atas ke bawah. */

:root{
  --bg:#060606; --bg2:#111110; --bg3:#171914; --garis:rgba(193,193,193,.16);
  --teks:#fff; --teks2:#c1c1c1; --redup:#8a8a8a;
  --tema:#BFF747; --ok:#4ade80; --awas:#facc15; --galat:#f87171;
  --judul:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --isi:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --ui:'Manrope','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--teks);font-family:var(--isi);line-height:1.65}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tema);outline-offset:3px}
button{font-family:inherit;cursor:pointer}

/* ---------- remah roti ----------
   Kepala halaman kini dipakai bersama dengan modul Kerja (css/kepala-kerja.css),
   sehingga remah roti berdiri sendiri di bawahnya. Ia tetap dipertahankan
   meski menunya sudah lengkap: menu memberi tahu ke mana bisa pergi, remah
   roti memberi tahu di mana pemakai sedang berada. */
.remah-luar{width:min(1280px,94%);margin:14px auto 0}
.remah ol{list-style:none;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.remah li{display:flex;align-items:center;gap:6px;font-family:var(--ui);
  font-size:.76rem;color:var(--redup)}
.remah li+li::before{content:"›";color:var(--garis)}
.remah a{color:var(--teks2)}
.remah a:hover{color:var(--tema)}

/* ---------- pengantar ---------- */
.wadah{width:min(1000px,92%);margin-inline:auto}
.hero{padding:64px 0 40px}
.eyebrow{display:block;font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--tema);margin-bottom:12px}
.hero h1{font-family:var(--judul);font-size:clamp(2.4rem,7vw,4.4rem);font-weight:800;
  text-transform:uppercase;line-height:1.02;text-wrap:balance}
.sub{color:var(--teks2);max-width:60ch;margin:16px 0 26px;font-size:1.03rem}
.hero-aksi{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.tbl{padding:12px 24px;border-radius:99px;border:1.5px solid var(--garis);
  background:transparent;color:var(--teks);font-family:var(--ui);font-weight:700;font-size:.86rem}
.tbl:hover:not(:disabled){border-color:var(--tema);color:var(--tema)}
.tbl:disabled{opacity:.35;cursor:not-allowed}
.tbl.utama{background:var(--tema);border-color:var(--tema);color:#060606}
.tbl.utama:hover{background:#a8d93e;color:#060606}
.tbl.tambah{margin-top:10px}

.jaminan{border:1.5px solid var(--tema);border-radius:14px;padding:18px 20px;
  background:var(--bg2);margin-bottom:26px}
.jaminan p{color:var(--teks2);font-size:.94rem}
.fitur{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.fitur div{background:var(--bg2);border:1.5px solid var(--garis);border-radius:14px;padding:18px}
.fitur b{display:block;font-family:var(--ui);font-size:.95rem;margin-bottom:4px}
.fitur span{color:var(--redup);font-size:.86rem}

/* ---------- aplikasi ---------- */
.app{width:min(1280px,94%);margin:26px auto 60px}
.app-atas{margin-bottom:18px}
.langkah{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.langkah button{padding:7px 14px;border-radius:99px;border:1.5px solid var(--garis);
  background:transparent;color:var(--redup);font-family:var(--ui);font-size:.76rem;font-weight:700}
.langkah button.kini{background:var(--tema);border-color:var(--tema);color:#060606}
.langkah button.isi{border-color:var(--ok);color:var(--ok)}
.maju{display:flex;align-items:center;gap:12px}
.maju-bar{flex:1;height:6px;border-radius:99px;background:var(--bg3);overflow:hidden}
.maju-bar i{display:block;height:100%;width:0;background:var(--tema);transition:width .3s}
.maju span{font-family:var(--ui);font-size:.78rem;color:var(--redup);min-width:42px;text-align:right}

.app-isi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.kolom-form{background:var(--bg2);border:1.5px solid var(--garis);border-radius:16px;padding:26px}
.panel h2{font-family:var(--judul);font-size:1.7rem;text-transform:uppercase;margin-bottom:6px}
.panel h3{font-family:var(--ui);font-size:1rem;margin-bottom:8px}
.panel h3.jarak{margin-top:26px}
label{display:block;font-family:var(--ui);font-size:.8rem;font-weight:700;
  margin:16px 0 6px;color:var(--teks2)}
.wajib{font-weight:600;font-size:.68rem;color:var(--awas);text-transform:uppercase;
  letter-spacing:1px;margin-left:6px}
input,select,textarea{width:100%;padding:11px 13px;border-radius:9px;
  border:1.5px solid var(--garis);background:var(--bg);color:var(--teks);
  font-family:var(--isi);font-size:.95rem}
input:focus,select:focus,textarea:focus{border-color:var(--tema);outline:none}
textarea{resize:vertical;line-height:1.6}
.bantu{color:var(--redup);font-size:.8rem;margin-top:6px}
.bantu.tengah{text-align:center}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pesan-kecil{margin-top:18px;padding:13px 15px;border-radius:10px;background:var(--bg);
  border-left:3px solid var(--tema);color:var(--teks2);font-size:.86rem}
.pesan-kecil.penting{border-left-color:var(--awas)}
.navigasi{display:flex;justify-content:space-between;gap:12px;margin-top:24px}

/* entri berulang */
.entri{border:1.5px solid var(--garis);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--bg)}
.entri-atas{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.entri-judul{font-family:var(--ui);font-size:.78rem;font-weight:700;color:var(--redup);
  text-transform:uppercase;letter-spacing:1px}
.hapus{background:transparent;border:1.5px solid var(--garis);color:var(--redup);
  border-radius:99px;padding:4px 12px;font-family:var(--ui);font-size:.72rem}
.hapus:hover{border-color:var(--galat);color:var(--galat)}
.entri label{margin-top:12px}
.baris-cek{display:flex;align-items:center;gap:9px;margin-top:12px}
.baris-cek input{width:auto}
.baris-cek label{margin:0;font-weight:600}

/* daftar urutan bagian */
.urutan{list-style:none;display:grid;gap:8px;margin-top:10px}
.urutan li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border:1.5px solid var(--garis);border-radius:10px;background:var(--bg);
  font-family:var(--ui);font-size:.85rem}
.urutan .geser{display:flex;gap:6px}
.urutan .geser button{border:1.5px solid var(--garis);background:transparent;color:var(--teks2);
  border-radius:7px;width:30px;height:28px;font-size:.8rem}
.urutan .geser button:hover:not(:disabled){border-color:var(--tema);color:var(--tema)}
.urutan .geser button:disabled{opacity:.3;cursor:not-allowed}

/* hasil pemeriksaan */
.cek-skor{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.cek-skor b{font-family:var(--judul);font-size:3rem;line-height:1}
.cek-skor span{font-family:var(--ui);font-size:.8rem;color:var(--redup)}
.cek-daftar{list-style:none;display:grid;gap:7px;margin-top:14px}
.cek-daftar li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--teks2)}
.cek-daftar .tanda{flex:none;width:20px;font-weight:700}
.cek-daftar .ok .tanda{color:var(--ok)}
.cek-daftar .awas .tanda{color:var(--awas)}
.cek-daftar .kurang .tanda{color:var(--galat)}

/* ---------- bantuan mesin ----------
   Semua kotak di bawah ini berisi USUL, bukan isi CV. Warnanya dibuat lebih
   redup daripada isian sungguhan supaya perbedaan itu terlihat sekilas. */
.opsional{font-weight:600;font-size:.68rem;color:var(--redup);text-transform:uppercase;
  letter-spacing:1px;margin-left:6px}
.tbl.kecil{padding:6px 14px;font-size:.74rem}

/* periksa tiap poin */
.poin-cek{display:grid;gap:8px}
.poin-cek:not(:empty){margin-top:10px}
.poin-cek .poin{border-left:2px solid var(--garis);padding-left:11px;
  font-family:var(--ui);font-size:.78rem}
.poin-cek .poin b{color:var(--redup);text-transform:uppercase;letter-spacing:1px;font-size:.7rem}
.poin-cek .poin.ok{border-left-color:var(--ok)}
.poin-cek .poin.ok span{color:var(--ok);margin-left:6px}
.poin-cek ul{list-style:none;display:grid;gap:5px;margin-top:4px}
.poin-cek li{padding-left:13px;position:relative;color:var(--teks2);line-height:1.5}
.poin-cek li::before{content:"•";position:absolute;left:0}
.poin-cek li.awas::before{color:var(--awas)}
.poin-cek li.info::before{color:var(--redup)}
.poin-cek li em{display:block;font-style:normal;color:var(--redup);font-size:.74rem}

/* pembangun satu poin */
.bangun{margin-top:12px;border:1.5px solid var(--garis);border-radius:10px;background:var(--bg2)}
.bangun summary{padding:9px 14px;cursor:pointer;font-family:var(--ui);
  font-size:.78rem;font-weight:700;color:var(--teks2)}
.bangun summary:hover{color:var(--tema)}
.bangun[open] summary{border-bottom:1.5px solid var(--garis)}
.bangun-isi{padding:4px 14px 16px}
.bangun-isi label{margin-top:12px}
.bangun-hasil{display:block;margin-top:14px;padding:12px 14px;border-radius:9px;
  background:var(--bg);border:1.5px dashed var(--garis);color:var(--redup);
  font-size:.9rem;line-height:1.55}
.bangun-hasil.ada{border-style:solid;border-color:var(--tema);color:var(--teks)}
.bangun-isi .tbl{margin-top:12px}

/* unggah foto */
.foto-baris{display:flex;gap:16px;align-items:flex-start;margin-top:10px}
.foto-pratinjau{flex:none;width:72px;height:96px;border:1.5px dashed var(--garis);
  border-radius:8px;display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.foto-pratinjau span{font-family:var(--ui);font-size:.66rem;color:var(--redup);
  text-align:center;padding:6px;line-height:1.3}
.foto-pratinjau img{width:100%;height:100%;object-fit:cover}
.foto-aksi{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.foto-aksi .bantu{width:100%;margin-top:0}
.foto-aksi .baris-cek{width:100%;margin-top:2px}
/* Input berkas bawaan tidak bisa diberi gaya; labelnya yang dijadikan tombol.
   Inputnya tetap ada di alur fokus supaya bisa dicapai dengan papan ketik. */
.sembunyi-berkas{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tbl.berkas{display:inline-block;margin:0;cursor:pointer;color:var(--teks)}
.sembunyi-berkas:focus-visible+.tbl.berkas,
.tbl.berkas:hover{border-color:var(--tema);color:var(--tema)}

.galat-simpan{margin-top:16px;padding:12px 15px;border-radius:10px;
  border:1.5px solid var(--galat);color:var(--galat);
  font-family:var(--ui);font-size:.84rem;line-height:1.5}
.galat-simpan[hidden]{display:none}

/* usul ringkasan dan keahlian */
.usul-wadah{margin-top:14px;display:grid;gap:10px}
.usul{border:1.5px solid var(--garis);border-radius:11px;padding:13px 15px;background:var(--bg)}
.usul-atas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.usul-atas b{font-family:var(--ui);font-size:.74rem;text-transform:uppercase;
  letter-spacing:1px;color:var(--redup)}
.usul p{color:var(--teks2);font-size:.9rem;line-height:1.55}

.keping{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.keping button,.keping span{border:1.5px solid var(--garis);border-radius:99px;
  padding:5px 13px;background:transparent;color:var(--teks2);
  font-family:var(--ui);font-size:.76rem}
.keping button:hover{border-color:var(--tema);color:var(--tema)}
.keping.mati span{color:var(--redup);border-style:dashed}

/* kecocokan lowongan */
.cocok-skor{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.cocok-skor b{font-family:var(--judul);font-size:2.4rem;line-height:1;color:var(--tema)}
.cocok-skor span{font-family:var(--ui);font-size:.8rem;color:var(--redup)}

/* ---------- pratinjau ---------- */
.kolom-pratinjau{position:sticky;top:80px}
.pratinjau-atas{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ui);font-size:.76rem;color:var(--redup);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.skor{font-family:var(--judul);font-size:1.5rem;color:var(--tema);letter-spacing:0}
/* Pratinjau memakai panggung berskala. Lembarnya tetap 210mm apa adanya —
   yang diubah hanya perbesarannya lewat transform, sehingga jarak, ukuran
   huruf, dan letak baris di layar persis sama dengan yang keluar saat dicetak.
   Melebarkan atau menyempitkan lembarnya sendiri akan membuat pratinjau
   berbohong tentang berapa halaman CV itu sebenarnya. */
.kertas-luar{background:var(--bg3);border:1.5px solid var(--garis);border-radius:14px;
  padding:14px;max-height:78vh;overflow:auto;display:flex;justify-content:center}
.kertas-panggung{position:relative;flex:none}

.zoom{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.zoom button{border:1.5px solid var(--garis);background:transparent;color:var(--teks2);
  border-radius:8px;min-width:32px;height:30px;padding:0 9px;
  font-family:var(--ui);font-size:.82rem;font-weight:700;line-height:1}
.zoom button:hover{border-color:var(--tema);color:var(--tema)}
.zoom button.zoom-pas{font-size:.74rem;font-weight:600}
.zoom button.aktif{border-color:var(--tema);color:var(--tema)}
#zoomTeks{font-family:var(--ui);font-size:.78rem;color:var(--redup);
  min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.pratinjau-mobil{display:none}

/* ---------- LEMBAR CV ----------
   Ukuran A4 dengan margin nyata, agar yang terlihat di layar sama dengan
   yang keluar saat dicetak. */
/* Huruf tanpa kait, bukan Times. Selain lebih sesuai dengan CV yang jadi
   acuan, huruf tanpa kait lebih tahan terhadap pemindaian ulang: kail-kail
   halus pada Times kerap luluh saat PDF di-render ulang oleh mesin penyaring. */
.kertas{position:relative;width:210mm;min-height:297mm;padding:14mm 13mm;
  background:#fff;color:#1a1a1a;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:9.5pt;line-height:1.45;
  transform-origin:top left;box-shadow:0 2px 20px rgba(0,0,0,.45)}

/* Garis batas halaman. Tanpa penanda ini, satu-satunya cara mengetahui isi
   melewati halaman pertama adalah dengan mencetaknya dulu — dan poin yang
   terpotong di ujung halaman baru ketahuan setelah CV terlanjur dikirim. */
.cv-batas{position:absolute;left:0;right:0;height:0;
  border-top:1px dashed rgba(200,60,60,.55);pointer-events:none}
.cv-batas span{position:absolute;right:0;top:2pt;font-size:7pt;
  font-family:Arial,sans-serif;color:rgba(200,60,60,.75);letter-spacing:.3px}

/* Kepala: foto di kiri, seluruh keterangan mengalir di kolom kanan. Ringkasan
   ikut di dalamnya tanpa judul bagian — pembaca sudah tahu paragraf pembuka
   sebuah CV adalah ringkasan, dan satu judul lagi hanya memakan tinggi. */
.kertas .cv-kepala{display:flex;align-items:flex-start;gap:6mm;
  padding-bottom:4pt;border-bottom:1.2pt solid #1a1a1a;margin-bottom:2pt}
.kertas .cv-kepala-teks{flex:1;min-width:0}
.kertas .cv-foto{flex:none;width:26mm;height:34mm;object-fit:cover;background:#fff}
.kertas .cv-nama{font-size:20pt;font-weight:700;letter-spacing:.2px;
  text-transform:uppercase;line-height:1.1}
.kertas .cv-jabatan{font-size:11pt;margin-top:1pt;color:#333}
.kertas .cv-kontak{font-size:8.5pt;margin-top:4pt;color:#3a5a8c;line-height:1.5;
  word-break:break-word}
.kertas .cv-pisah{color:#999}
.kertas .cv-kota{font-size:8.5pt;color:#666;margin-top:1pt}
.kertas .cv-ringkas{margin-top:5pt;font-size:9.5pt;text-align:justify}

/* Judul bagian: huruf kapital-awal seperti pada CV acuan, bukan KAPITAL SEMUA,
   dengan garis penuh di bawahnya sebagai pemisah blok. */
.kertas h2{font-size:12.5pt;font-weight:700;letter-spacing:0;
  margin:9pt 0 4pt;border-bottom:1.2pt solid #1a1a1a;padding-bottom:1pt}

/* Entri dimasukkan sedikit dari tepi supaya batas antara judul bagian dan
   isinya terbaca tanpa perlu garis tambahan. */
.kertas .cv-item{margin-bottom:7pt;padding-left:3mm}
.kertas .cv-baris{display:flex;justify-content:space-between;gap:8pt;align-items:baseline}
.kertas .cv-utama{font-weight:700;font-size:10pt}
.kertas .cv-tempat-kecil{font-weight:400;color:#777}
.kertas .cv-peran{font-style:italic;color:#333}
.kertas .cv-tanggal{white-space:nowrap;font-size:9pt;color:#333}
.kertas ul{margin:2pt 0 0 14pt}
.kertas li{margin-bottom:1.5pt}
/* Sejajar dengan butir di entri lain: 3mm masuknya entri, 14pt ruang bulatan. */
.kertas .cv-skill{margin:2pt 0 0 calc(3mm + 14pt)}
.kertas .cv-skill b{font-weight:700}
.kertas .cv-kosong{color:#999;font-style:italic}

/* ---------- tirai teks polos ---------- */
.tirai{position:fixed;inset:0;background:rgba(6,6,6,.9);z-index:60;display:grid;place-items:center;padding:20px}
.tirai[hidden]{display:none}
.tirai-isi{background:var(--bg2);border:1.5px solid var(--garis);border-radius:16px;
  padding:24px;width:min(760px,100%);max-height:86vh;overflow:auto}
.tirai-isi h3{font-family:var(--judul);font-size:1.5rem;text-transform:uppercase;margin-bottom:4px}
#teksPolos{margin:14px 0 18px;padding:16px;background:var(--bg);border:1px solid var(--garis);
  border-radius:10px;white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;
  font-size:.83rem;color:var(--teks2);max-height:52vh;overflow:auto}

/* ---------- layar sempit ---------- */
@media (max-width:1080px){
  .app-isi{grid-template-columns:1fr}
  .kolom-pratinjau{position:static;display:none}
  .kolom-pratinjau.buka{display:block}
  .pratinjau-mobil{display:block;position:sticky;bottom:14px;width:100%;margin-top:16px;
    /* 56px sesuai ambang sasaran sentuh yang nyaman di ponsel */
    min-height:56px;padding:16px;border-radius:99px;border:1.5px solid var(--tema);background:var(--tema);
    color:#060606;font-family:var(--ui);font-weight:700}
  /* Lembarnya tidak lagi dilebarkan mengikuti layar — perbesaran yang
     menyesuaikan, sehingga pratinjau di ponsel tetap A4 yang sebenarnya. */
}
@media (max-width:560px){
  .dua{grid-template-columns:1fr}
  .hero{padding:40px 0 28px}
}

/* ---------- CETAK ----------
   Hanya lembar CV yang ikut tercetak. Antarmuka, tombol, dan bilah tidak.
   PDF hasil cetak peramban tetap berupa teks, bukan gambar — inilah yang
   membuatnya dapat dibaca mesin penyaring. */
@page{size:A4;margin:14mm}
@media print{
  html,body{background:#fff;color:#000;height:auto}
  /* #halamanInfo ("Perkiraan panjang: …") dulu ikut tercetak di kaki CV.
     Itu catatan untuk penulisnya, bukan bagian dari CV — dan pembaca yang
     menerima berkasnya tidak punya urusan dengan perkiraan itu. */
  .kepala-kerja,.remah-luar,.kk-lanjut,.kk-iklan,
  .hero,.app-atas,.kolom-form,.pratinjau-atas,.pratinjau-mobil,
  .tirai,.navigasi,#halamanInfo,.galat-simpan,.zoom,.cv-batas{display:none !important}
  /* Perbesaran layar tidak boleh ikut tercetak: kertas asli sudah A4. */
  .kertas-panggung{width:auto !important;height:auto !important}
  .kertas{transform:none !important}
  .app{width:auto;margin:0;padding:0}
  .app-isi{display:block;gap:0}
  .kolom-pratinjau{position:static;display:block;top:auto}
  .kertas-luar{background:none;border:0;border-radius:0;padding:0;max-height:none;overflow:visible}
  /* min-height:297mm pada tampilan layar membuat halaman kosong tambahan saat
     dicetak: kertasnya sudah setinggi A4 sebelum margin @page ditambahkan. */
  .kertas{width:auto;min-height:0;padding:0;font-size:9.5pt;box-shadow:none;
    overflow:visible}
  .kertas>*:last-child{margin-bottom:0}
  /* Judul bagian tidak boleh tertinggal sendirian di dasar halaman */
  .kertas h2{break-after:avoid;page-break-after:avoid}
  .kertas .cv-item{break-inside:avoid;page-break-inside:avoid}
  .kertas .cv-kepala{break-inside:avoid;page-break-inside:avoid}
  /* Foto harus tetap tercetak meski peramban menghemat tinta. */
  .kertas .cv-foto{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}