/* Halaman Profil baru (dashboard, profil karier, gap, aplikasi, langganan). Desain mengikuti catatan/MOCKUP_PROFIL_KARIER_V2_20261028.html.
   Semua kelas berawalan pf- supaya tidak bertabrakan dengan gaya situs. Mode gelap mengikuti html[data-tema="gelap"]. */
.pf { --pf-biru: #1E90E6; --pf-biru-tua: #1570C8; --pf-biru-muda: #E8F4FD; --pf-navy: #1A3A5C; --pf-teks: #2D2D2D; --pf-teks-2: #4F5B67; --pf-hijau: #2E8B57; --pf-hijau-teks: #1F6B42; --pf-hijau-bg: #E7F5EE;
  --pf-merah: #C0392B; --pf-merah-bg: #FDECEA; --pf-oranye-teks: #8A5200; --pf-oranye-bg: #FFF4DC; --pf-bg: #fff; --pf-kartu: #fff; --pf-kartu-2: #F5F7FA; --pf-judul: #14304D; --pf-garis: #D0DFF0;
  --pf-bayang: 0 1px 2px rgba(26,58,92,.06), 0 4px 16px rgba(26,58,92,.06); color: var(--pf-teks); font-size: 15px; line-height: 1.6; background: var(--pf-bg); }
html[data-tema="gelap"] .pf { --pf-bg: #101319; --pf-kartu: #171B22; --pf-kartu-2: #1D2230; --pf-judul: #EAF1F8; --pf-teks: #E4E7EB; --pf-teks-2: #A9B4C0; --pf-garis: #2C3340; --pf-biru-muda: #16293D; --pf-navy: #8CC4F5;
  --pf-biru-tua: #5BAEF0; --pf-hijau-teks: #7FE0AB; --pf-hijau-bg: #14281F; --pf-oranye-teks: #F5C766; --pf-oranye-bg: #3A2D0B; --pf-merah-bg: #3A1C19; --pf-bayang: 0 1px 2px rgba(0,0,0,.4); }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf h1, .pf h2, .pf h3, .pf h4 { color: var(--pf-judul); margin: 0; line-height: 1.25; }
.pf button, .pf select, .pf input, .pf textarea { font: inherit; color: inherit; }
.pf button { cursor: pointer; }
.pf-rangka { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
.pf-rangka > * { min-width: 0; }
.pf-sisi { position: sticky; top: 96px; align-self: start; }
.pf-sisi h1 { font-size: 30px; margin-bottom: 6px; letter-spacing: -.02em; }
.pf-sisi .pf-ket { color: var(--pf-teks-2); font-size: 14px; margin: 0 0 22px; }
.pf-sisi nav a { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; color: var(--pf-teks); text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid transparent; margin-bottom: 4px; cursor: pointer; }
.pf-sisi nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--pf-teks-2); }
.pf-sisi nav a:hover { background: var(--pf-kartu-2); }
.pf-sisi nav a.on { background: var(--pf-biru-muda); color: var(--pf-biru-tua); }
.pf-sisi nav a.on svg { color: var(--pf-biru-tua); }
.pf-lencana { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; border-radius: 6px; padding: 2px 7px; background: var(--pf-judul); color: var(--pf-bg); margin-left: auto; }
.pf-mini { display: flex; gap: 12px; align-items: center; margin-top: 26px; padding: 14px; border: 1px solid var(--pf-garis); border-radius: 16px; background: var(--pf-kartu); box-shadow: var(--pf-bayang); }
.pf-mini b { display: block; color: var(--pf-judul); font-size: 14px; }
.pf-mini span { font-size: 12.5px; color: var(--pf-teks-2); }
.pf-avt { width: 38px; height: 38px; border-radius: 50%; background: var(--pf-biru-tua); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.pf-keluar { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 13px 14px; border: 1px solid var(--pf-garis); border-radius: 14px; background: var(--pf-bg); color: var(--pf-teks); font-weight: 600; font-size: 15px; }
.pf-keluar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--pf-teks-2); }
.pf-keluar:hover { background: var(--pf-kartu-2); }
.pf-isi { min-width: 0; }
.pf-pane { display: none; }
.pf-pane.on { display: block; }
.pf-judul { font-size: 28px; letter-spacing: -.02em; margin-bottom: 6px; }
.pf-sub { color: var(--pf-teks-2); margin: 0 0 26px; max-width: 62ch; }
.pf-kartu { background: var(--pf-kartu); border: 1px solid var(--pf-garis); border-radius: 18px; padding: 24px; box-shadow: var(--pf-bayang); margin-bottom: 22px; min-width: 0; }
.pf-kartu h3 { font-size: 18px; margin-bottom: 4px; }
.pf-kartu .pf-ket { color: var(--pf-teks-2); font-size: 14px; margin: 0 0 18px; }
.pf-grid { display: grid; gap: 18px; }
.pf-g2 { grid-template-columns: 1fr 1fr; }
.pf-g3 { grid-template-columns: repeat(3, 1fr); }
.pf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px; border: 1.5px solid var(--pf-biru-tua); background: var(--pf-biru-tua); color: #fff; text-decoration: none; }
.pf-btn.ghost { background: var(--pf-bg); color: var(--pf-biru-tua); }
.pf-btn.kecil { min-height: 34px; padding: 0 14px; font-size: 13px; }
.pf-btn[disabled] { opacity: .55; cursor: default; }
.pf-chip { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; background: var(--pf-biru-muda); color: var(--pf-biru-tua); margin: 3px 5px 3px 0; }
.pf-chip.ok { background: var(--pf-hijau-bg); color: var(--pf-hijau-teks); }
.pf-chip.no { background: var(--pf-merah-bg); color: var(--pf-merah); }
.pf-chip.nt { background: var(--pf-kartu-2); color: var(--pf-teks-2); border: 1px solid var(--pf-garis); }
.pf-bar { height: 8px; background: var(--pf-garis); border-radius: 99px; overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--pf-biru-tua); border-radius: 99px; }
.pf-baris { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.pf-pemisah { border-top: 1px solid var(--pf-garis); margin: 20px 0; }
.pf-stat b { font-size: 28px; color: var(--pf-judul); display: block; letter-spacing: -.02em; line-height: 1.2; }
.pf-stat span { font-size: 13px; color: var(--pf-teks-2); }
.pf-tautan { color: var(--pf-biru-tua); font-weight: 700; text-decoration: none; }
/* Dashboard: kartu angka, heatmap, progres kelas (markup lama profil.js memakai kelas p-*, dirapikan di sini) */
.pf-dash .p-kepala { display: none; }
.pf-publik .pf-dash .p-kepala { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pf-publik .pf-dash .p-nama { font-size: 28px; }
.pf-publik .pf-dash .p-user { margin: 0; color: var(--pf-teks-2); }
.pf-publik .pf-dash .p-foto { width: 56px; height: 56px; border-radius: 50%; background: var(--pf-biru-tua); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.pf-dash .p-statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.pf-dash .p-stat { background: var(--pf-kartu); border: 1px solid var(--pf-garis); border-radius: 18px; padding: 24px; box-shadow: var(--pf-bayang); }
.pf-dash .p-stat strong { font-size: 28px; color: var(--pf-judul); display: block; letter-spacing: -.02em; line-height: 1.2; }
.pf-dash .p-stat span { font-size: 13px; color: var(--pf-teks-2); }
.pf-dash .p-stat.pf-sembunyi { display: none; }
.pf-dash .p-seksi { background: var(--pf-kartu); border: 1px solid var(--pf-garis); border-radius: 18px; padding: 24px; box-shadow: var(--pf-bayang); margin: 0 0 22px; }
.pf-dash .p-seksi h3 { font-size: 18px; margin: 0 0 14px; color: var(--pf-judul); }
.pf-dash .p-heat-bungkus { overflow-x: auto; }
.pf-dash .p-kelas { list-style: none; margin: 0; padding: 0; }
.pf-dash .p-kelas__item { padding: 16px 0; border-top: 1px solid var(--pf-garis); }
.pf-dash .p-kelas__item:first-child { border-top: 0; padding-top: 0; }
.pf-dash .p-kelas__atas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-dash .p-kelas__nama { font-weight: 700; color: var(--pf-judul); text-decoration: none; }
.pf-dash .p-kelas__bintang, .pf-dash .p-kelas__ket { font-size: 13px; color: var(--pf-teks-2); }
.pf-dash .p-bar { height: 8px; background: var(--pf-garis); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.pf-dash .p-bar span { display: block; height: 100%; background: var(--pf-biru-tua); border-radius: 99px; }
/* Sertifikat */
.pf-sg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-sc { display: grid; grid-template-columns: 96px minmax(0, 1fr); border: 1px solid var(--pf-garis); border-radius: 16px; overflow: hidden; background: var(--pf-kartu); }
.pf-sc .th { background: linear-gradient(145deg, #0B2E52, #1570C8); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px; font-size: 11px; gap: 2px; }
.pf-sc .th b { font-size: 13px; color: #fff; }
.pf-sc .th span { opacity: .8; }
.pf-sc .in { padding: 14px 16px; min-width: 0; }
.pf-sc .in b { display: block; color: var(--pf-judul); font-size: 14px; line-height: 1.35; }
.pf-sc .in small { display: block; color: var(--pf-teks-2); font-size: 12.5px; margin-top: 2px; }
.pf-sc .mt { margin: 8px 0 2px; }
.pf-sc .ak { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
/* Badge */
.pf-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pf-bg { border: 1px solid var(--pf-garis); border-radius: 18px; background: var(--pf-kartu-2); padding: 16px 10px 14px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.pf-bg:hover { transform: translateY(-3px); box-shadow: var(--pf-bayang); }
.pf-bg svg { width: 104px; height: 104px; display: block; margin: 0 auto 8px; }
.pf-bg b { display: block; color: var(--pf-judul); font-size: 14px; }
.pf-bg small { display: block; color: var(--pf-teks-2); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.pf-bg.kunci svg { filter: grayscale(1) opacity(.45); }
.pf-bg.kunci .pf-bar { margin: 8px 14px 0; height: 5px; }
.pf-modal { position: fixed; inset: 0; background: rgba(5, 28, 44, .62); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 90; }
.pf-modal.on { display: flex; }
.pf-modal .pf-isi-m { background: var(--pf-kartu); border-radius: 22px; max-width: 760px; width: 100%; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; max-height: 94vh; overflow: auto; }
.pf-kshare { aspect-ratio: 1; border-radius: 18px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; position: relative; overflow: hidden;
  background: radial-gradient(420px 260px at 85% -5%, rgba(0,169,244,.4), transparent 60%), radial-gradient(300px 200px at 0% 110%, rgba(123,91,196,.35), transparent 60%), linear-gradient(145deg, #051C2C, #0B2E52 45%, #0F4C8A); }
.pf-kshare svg { width: 46%; min-width: 110px; max-width: 220px; flex: none; aspect-ratio: 1; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.pf-kshare .s1 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-top: 6px; }
.pf-kshare h4 { color: #fff; font-size: 26px; letter-spacing: -.02em; margin: 4px 0; }
.pf-kshare p { margin: 0; font-size: 13.5px; opacity: .85; }
.pf-kshare .f { position: absolute; bottom: 14px; font-size: 12px; opacity: .7; letter-spacing: .04em; }
.pf-aksi-share button, .pf-aksi-share a { display: block; width: 100%; margin-bottom: 10px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--pf-garis); background: var(--pf-bg); font-weight: 600; color: var(--pf-teks); text-decoration: none; }
.pf-aksi-share .tutup { float: right; display: block; width: auto; margin: 0; padding: 0 6px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--pf-teks-2); }
/* Langganan */
.pf-tbl-bungkus { overflow-x: auto; }
.pf-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.pf-tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pf-teks-2); padding: 8px 10px; border-bottom: 1px solid var(--pf-garis); }
.pf-tbl td { padding: 13px 10px; border-bottom: 1px solid var(--pf-garis); color: var(--pf-teks); }
.pf-tbl tr:last-child td { border-bottom: 0; }
.pf-hint { font-size: 12.5px; color: var(--pf-teks-2); margin-top: 5px; }
/* Terkunci (Pro) dan placeholder tahap berikutnya */
.pf-kunci-pro { text-align: center; }
.pf-kunci-pro .pf-ov { background: var(--pf-kartu); border: 1px solid var(--pf-garis); border-radius: 22px; padding: 28px; box-shadow: 0 12px 40px rgba(26,58,92,.16); max-width: 520px; margin: 0 auto; }
.pf-kunci-pro .pf-ov h3 { font-size: 22px; margin-bottom: 8px; }
.pf-kunci-pro .pf-ov p { color: var(--pf-teks-2); margin: 0 0 16px; }
/* Profil publik (?u=): tanpa menu kiri */
.pf-publik .pf-sisi { display: none; }
.pf-publik .pf-rangka { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.pf-publik .pf-pane:not(#pf-p-dash) { display: none; }
.pf-publik .pf-bagian-saya { display: none; }
@media (max-width: 900px) {
  .pf-rangka { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 16px 64px; }
  .pf-sisi { position: static; }
  .pf-sisi nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .pf-sisi nav a { white-space: nowrap; padding: 10px 14px; border: 1px solid var(--pf-garis); border-radius: 999px; margin: 0; }
  .pf-sisi nav a svg { display: none; }
  .pf-mini, .pf-sisi .pf-ket { display: none; }
  .pf-keluar { width: auto; margin-top: 8px; }
  .pf-sisi h1 { font-size: 24px; }
  .pf-g2, .pf-g3, .pf-sg, .pf-dash .p-statistik { grid-template-columns: 1fr; }
  .pf-sc { grid-template-columns: 72px minmax(0, 1fr); }
  .pf-modal .pf-isi-m { grid-template-columns: 1fr; }
  .pf-kshare { aspect-ratio: auto; min-height: 320px; padding: 28px 16px 44px; }
  .pf-judul { font-size: 24px; }
}
@media (max-width: 520px) {
  .pf-bgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pf-bg svg { width: 84px; height: 84px; }
  .pf-kartu { padding: 18px; }
}
.pf-sh-nama { margin-bottom: 6px; }
.pf-sh-desk { color: var(--pf-teks-2); font-size: 14px; margin: 0 0 16px; }
.pf-mini .pf-avt { color: #fff; font-size: 13px; }
#pf-hubung:empty { display: none; }
.pf-ok { background: var(--pf-hijau-bg); color: var(--pf-hijau-teks); border-radius: 14px; padding: 16px 18px; }
.pf-ok b { font-size: 16px; }
.pf-in { padding: 11px 13px; border: 1px solid var(--pf-garis); border-radius: 12px; background: var(--pf-bg); font-size: 15px; }
.pf-galat { color: var(--pf-merah); }

/* Profil Karier (tab #cv): unggah CV, lingkar kelengkapan, daftar pengalaman, bank cerita */
.pf-drop { border: 2px dashed var(--pf-garis); border-radius: 16px; padding: 28px 20px; text-align: center; background: var(--pf-kartu-2); }
.pf-drop.on { border-color: var(--pf-biru-tua); background: var(--pf-biru-muda); }
.pf-drop .pf-ket { margin: 8px auto 18px; max-width: 52ch; }
.pf-lingkar { width: 76px; height: 76px; flex: none; position: relative; display: grid; place-items: center; }
.pf-lingkar svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-lingkar circle { fill: none; stroke-width: 3.6; }
.pf-lingkar .lt { stroke: var(--pf-garis); }
.pf-lingkar .ls { stroke: var(--pf-biru-tua); stroke-linecap: round; }
.pf-lingkar span { position: relative; font-weight: 800; color: var(--pf-judul); font-size: 17px; }
.pf-cek { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.pf-cek input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.pf-item, .pf-cerita { border: 1px solid var(--pf-garis); border-radius: 14px; padding: 16px; margin-top: 14px; background: var(--pf-kartu-2); }
.pf-x { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 0 0 4px; min-width: 24px; min-height: 24px; }
.pf-kartu label { display: block; font-size: 13px; font-weight: 700; color: var(--pf-teks-2); margin-bottom: 5px; }
.pf-kartu .pf-cek { font-weight: 500; font-size: 14.5px; color: var(--pf-teks); }
@media (max-width: 640px) { .pf-g2 { grid-template-columns: 1fr; } }

.pf-pekan { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 14px; } .pf-pk { aspect-ratio: 1; border-radius: 5px; background: var(--pf-garis); } .pf-pk.on { background: var(--pf-hijau); }

/* Tab Profil (tahap 3): baris pengaturan dan tombol segmen */
.pf-atur-baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--pf-garis); }
.pf-atur-baris:first-of-type { border-top: 0; }
.pf-segs { display: inline-flex; border: 1px solid var(--pf-garis); border-radius: 999px; padding: 3px; gap: 2px; }
.pf-seg { border: 0; background: transparent; color: var(--pf-teks); min-height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.pf-seg.on { background: var(--pf-biru-tua); color: var(--pf-bg); }
.pf-seg:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }

/* Kontras tombol di tema gelap dan tombol jadwal di dalam profil */
.pf .tombol-utama, .pf .tombol-utama:hover { color: #fff; }
.pf .tombol-garis { color: var(--pf-biru-tua); background: transparent; border-color: var(--pf-biru-tua); }
html[data-tema="gelap"] .pf .pf-btn:not(.ghost) { color: #0B0C0F; }
html[data-tema="gelap"] .pf .pf-btn:not(.ghost):hover { color: #0B0C0F; }

/* Mode belajar: sub-navigasi lama disembunyikan, satu judul dan satu kolom isi per tab */
html.mode-belajar .pf:not(.pf-publik) .pf-sisi { display: none; }
html.mode-belajar .pf:not(.pf-publik) .pf-rangka { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.pf-karier-bar { margin: 0 0 18px; overflow-x: auto; }
.pf-segs-karier { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pf-segs-karier::-webkit-scrollbar { display: none; }
@media (max-width: 520px) { .pf-segs-karier .pf-seg { padding: 0 10px; font-size: 13px; } .pf-lencana-k { margin-left: 2px; padding: 1px 4px; } }
.pf-segs-karier .pf-seg { white-space: nowrap; }
.pf-lencana-k { font-size: 10px; font-weight: 800; letter-spacing: .05em; margin-left: 4px; padding: 1px 5px; border-radius: 5px; background: var(--pf-judul); color: var(--pf-bg); }
.pf-seg.on .pf-lencana-k { background: var(--pf-bg); color: var(--pf-biru-tua); }
.pf-karier-bawah { margin-top: 8px; }

/* Badge berhadiah dan peringkat berbasis server */
.pf-hadiah { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--pf-oranye-bg); color: var(--pf-oranye-teks); }
.pf-hadiah.ok { background: var(--pf-hijau-bg); color: var(--pf-hijau-teks); }
.pf-top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-top3 li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--pf-garis); border-radius: 12px; font-size: 14px; }
.pf-top3 li b { min-width: 22px; text-align: center; color: var(--pf-biru-tua); }
.pf-top3 li span { margin-left: auto; color: var(--pf-teks-2); font-size: 13px; }
.pf-top3 li.saya { background: var(--pf-biru-muda); }

/* Home (tab dash) dan peringkat bergaya podium di Pencapaian (keputusan pemilik 3 Nov 2026). Rancangan: catatan/MOCKUP_HOME_PERINGKAT_20261103.html. */
.pf-home .pf-kartu h3 { font-size: 17px; }
.pf .pf-lanjut { background: linear-gradient(160deg, #1A3A5C, #0F2740); color: #fff; border: 0; }
html[data-tema="gelap"] .pf .pf-lanjut { background: linear-gradient(160deg, #15304D, #0B1A2A); border: 1px solid #22344A; }
.pf-lanjut__kecil { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.pf .pf-lanjut h3 { color: #fff; font-size: 20px; margin: 6px 0 4px; }
.pf-lanjut p { margin: 0 0 14px; font-size: 14px; color: rgba(255, 255, 255, .88); }
.pf-lanjut__bar { height: 8px; background: rgba(255, 255, 255, .2); border-radius: 99px; overflow: hidden; margin: 0 0 16px; }
.pf-lanjut__bar i { display: block; height: 100%; background: #4CB2FF; border-radius: 99px; }
.pf a.pf-lanjut__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 12px; background: #fff; color: #1A3A5C; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.pf a.pf-lanjut__btn:hover { background: #E8F4FD; color: #1A3A5C; }
html[data-tema="gelap"] .pf a.pf-lanjut__btn, html[data-tema="gelap"] .pf a.pf-lanjut__btn:hover { color: #0F2740; }
.pf-lanjut__btn:focus-visible, .pf-tautan-k:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }
.pf-home-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
.pf-home-2 .pf-kartu { margin: 0; }
.pf-h-label { font-size: 13px; font-weight: 700; color: var(--pf-teks-2); }
.pf-h-angka { font-size: 30px; font-weight: 800; color: var(--pf-judul); line-height: 1.15; }
.pf-h-ket { font-size: 13px; color: var(--pf-teks-2); }
.pf-h-jam { font-size: 18px; font-weight: 800; color: var(--pf-judul); margin: 6px 0 2px; line-height: 1.3; }
.pf-hari7, .pf-hari7-l { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-width: 240px; }
.pf-hari7 { margin-top: 12px; }
.pf-hari7 i { aspect-ratio: 1; border-radius: 4px; background: var(--pf-garis); }
.pf-hari7 i.on { background: var(--pf-biru); }
.pf-hari7 i.kini { box-shadow: inset 0 0 0 2px var(--pf-biru-tua); }
.pf-hari7-l { margin-top: 4px; font-size: 10.5px; color: var(--pf-teks-2); text-align: center; }
.pf-tautan-k { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14px; color: var(--pf-biru-tua); text-decoration: none; }
.pf-tautan-k:hover { text-decoration: underline; }
.pf-riset { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.pf-riset__gbr { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #1E5A8C, #0F2740); color: #fff; display: grid; place-items: center; }
.pf-riset__gbr svg { width: 28px; height: 28px; }
.pf-riset__tipe { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-teks-2); margin-bottom: 2px; }
.pf-riset b { display: block; color: var(--pf-judul); font-size: 15px; line-height: 1.35; }
.pf-riset p { margin: 4px 0 10px; font-size: 14px; color: var(--pf-teks-2); }
.pf-riset-lain { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--pf-garis, #E3ECF5); display: grid; gap: 4px; }
.pf-riset-lain li { display: grid; gap: 0; }
.pf-riset-lain a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pf-judul); font-weight: 700; font-size: 14.5px; line-height: 1.35; text-decoration: none; }
.pf-riset-lain a:hover { text-decoration: underline; }
.pf-riset-lain a:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; border-radius: 4px; }
.pf-baru-daftar { list-style: none; margin: 6px 0 0; padding: 0; }
.pf-baru-daftar li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--pf-garis); font-size: 14px; }
.pf-baru-daftar li:first-child { border-top: 0; }
.pf-chip-baru { font-size: 11px; font-weight: 800; color: var(--pf-hijau-teks); background: var(--pf-hijau-bg); padding: 2px 8px; border-radius: 99px; white-space: nowrap; flex: none; }
.pf-h-komunitas { display: flex; gap: 14px; align-items: flex-start; }
.pf-h-komunitas__ik { width: 44px; height: 44px; border-radius: 12px; background: var(--pf-biru-muda); color: var(--pf-biru-tua); display: grid; place-items: center; flex: none; }
.pf-h-komunitas__ik svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .pf-home-2 { gap: 12px; margin-bottom: 18px; }
  .pf-home-2 .pf-kartu { padding: 14px; }
  .pf-h-jam { font-size: 16px; }
}

/* Pencapaian: total bintang dan bagian selesai berdampingan (streak ada di kartu Streak belajar). */
.pf:not(.pf-publik) .pf-dash .p-statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .pf:not(.pf-publik) .pf-dash .p-statistik { gap: 12px; } .pf:not(.pf-publik) .pf-dash .p-stat { padding: 16px; } }

/* Peringkat bulanan */
.pf-pr { border-radius: 20px; overflow: hidden; background: var(--pf-kartu); border: 1px solid var(--pf-garis); box-shadow: var(--pf-bayang); margin-bottom: 22px; }
.pf-pr__atas { padding: 20px 20px 0; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #24689F 0%, rgba(36, 104, 159, 0) 60%), linear-gradient(165deg, #1A3A5C, #0F2740); }
html[data-tema="gelap"] .pf .pf-pr__atas { background: radial-gradient(120% 120% at 100% 0%, rgba(36, 104, 159, .55) 0%, rgba(36, 104, 159, 0) 60%), linear-gradient(165deg, #142B44, #0A1522); }
.pf-pr__judul { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pf-pr__judul small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.pf .pf-pr__judul b { display: block; font-size: 21px; color: #fff; margin-top: 2px; }
.pf-pr__sisa { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.pf-pr__sisa svg { width: 14px; height: 14px; }
.pf-podium { list-style: none; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 10px; max-width: 460px; }
.pf-pd { text-align: center; min-width: 0; }
.pf-pd-1 { order: 2; }
.pf-pd-2 { order: 1; }
.pf-pd-3 { order: 3; }
.pf-pd__av { position: relative; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #0F2740; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.pf-pd-1 .pf-pd__av { width: 58px; height: 58px; font-size: 18px; background: #FBE3A0; }
.pf-pd-2 .pf-pd__av { background: #E3EAF1; }
.pf-pd-3 .pf-pd__av { background: #F1C9A8; }
.pf-pd.pf-pd-kosong .pf-pd__av { background: transparent; box-shadow: none; border: 2px dashed rgba(255, 255, 255, .45); }
.pf-pd.saya .pf-pd__av { box-shadow: 0 0 0 3px #4CB2FF; }
.pf-pd__mahkota { position: absolute; top: -16px; left: 50%; width: 24px; height: 18px; transform: translateX(-50%); color: #F6D47A; }
.pf-pd__nama { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pd.pf-pd-kosong .pf-pd__nama { font-weight: 600; color: rgba(255, 255, 255, .75); }
.pf-pd__kamu { display: inline-block; margin: 2px 0 0; font-size: 11px; font-weight: 800; color: #0F2740; background: #9CD0FA; padding: 1px 8px; border-radius: 99px; }
.pf-pd__n { font-size: 12px; color: rgba(255, 255, 255, .8); margin-bottom: 6px; min-height: 18px; }
.pf-pd__tiang { border-radius: 12px 12px 0 0; display: grid; place-items: start center; padding-top: 8px; font-weight: 800; font-size: 20px; color: #0F2740; transform-origin: 50% 100%; }
.pf-pd-1 .pf-pd__tiang { height: 88px; background: linear-gradient(180deg, #F6D47A, #E9B949); }
.pf-pd-2 .pf-pd__tiang { height: 64px; background: linear-gradient(180deg, #DCE4EC, #B8C4D0); }
.pf-pd-3 .pf-pd__tiang { height: 48px; background: linear-gradient(180deg, #E9B48A, #D0905E); }
.pf-pd.pf-pd-kosong .pf-pd__tiang { opacity: .45; }
.pf-podium-tunggu .pf-pd__tiang { transform: scaleY(.06); }
.pf-podium.naik .pf-pd__tiang { animation: pf-naik .8s cubic-bezier(.2, .8, .2, 1) both; }
.pf-podium.naik .pf-pd-2 .pf-pd__tiang { animation-delay: .12s; }
.pf-podium.naik .pf-pd-3 .pf-pd__tiang { animation-delay: .24s; }
@keyframes pf-naik { from { transform: scaleY(.06); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .pf-podium-tunggu .pf-pd__tiang, .pf-podium.naik .pf-pd__tiang { transform: none; animation: none; } }
.pf-pr__saya { margin: 16px; border: 1.5px solid var(--pf-biru); background: var(--pf-biru-muda); border-radius: 14px; padding: 14px; }
.pf-pr__saya-atas { display: flex; align-items: center; gap: 12px; }
.pf-pr__no { width: 42px; height: 42px; border-radius: 12px; background: var(--pf-biru-tua); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
html[data-tema="gelap"] .pf .pf-pr__no { color: #0B0C0F; }
.pf-pr__saya b { display: block; color: var(--pf-judul); font-size: 15px; }
.pf-pr__ket { display: block; font-size: 13px; color: var(--pf-teks-2); }
.pf-pr__ubah { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--pf-hijau-teks); background: var(--pf-hijau-bg); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.pf-pr__ubah.turun { color: var(--pf-oranye-teks); background: var(--pf-oranye-bg); }
.pf-pr__ubah svg { width: 14px; height: 14px; }
.pf-pr__kejar { margin: 12px 0 0; font-size: 13px; color: var(--pf-teks-2); }
.pf-pr__bar { height: 7px; background: var(--pf-garis); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.pf-pr__bar i { display: block; height: 100%; background: var(--pf-biru); border-radius: 99px; }
.pf-pr__urut { list-style: none; margin: 0; padding: 0 16px 6px; }
.pf-pr__urut li { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; padding: 9px 4px; border-top: 1px solid var(--pf-garis); }
.pf-pr__urut li:first-child { border-top: 0; }
.pf-pr__urut li.saya { background: var(--pf-biru-muda); border-radius: 10px; }
.pf-pr__urut .no { font-weight: 800; color: var(--pf-teks-2); text-align: center; }
.pf-pr__urut .av { width: 32px; height: 32px; border-radius: 50%; background: var(--pf-kartu-2); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--pf-teks-2); }
.pf-pr__urut .nm { font-weight: 700; color: var(--pf-judul); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pr__urut .bg { font-size: 13px; color: var(--pf-teks-2); white-space: nowrap; }
.pf-pr__hadiah { display: flex; gap: 12px; align-items: flex-start; margin: 6px 16px 16px; padding: 12px 14px; border-radius: 12px; background: var(--pf-oranye-bg); color: var(--pf-oranye-teks); font-size: 13px; line-height: 1.5; }
.pf-pr__hadiah svg { width: 22px; height: 22px; flex: none; }
.pf-pr__resmi { margin: 0 16px 16px; font-size: 13px; color: var(--pf-teks-2); }
.pf-pr__resmi h4 { font-size: 14px; margin: 0 0 6px; }
.pf-pr__resmi ol { margin: 0; padding-left: 20px; }
@media (max-width: 520px) {
  .pf-pr__atas { padding: 16px 14px 0; }
  .pf .pf-pr__judul b { font-size: 19px; white-space: nowrap; }
  .pf-pr__sisa { padding: 4px 8px; font-size: 11.5px; }
  .pf-pr__saya { margin: 12px; }
  .pf-pr__urut { padding: 0 12px 6px; }
  .pf-pr__hadiah { margin: 6px 12px 12px; }
  .pf-pr__resmi { margin: 0 12px 12px; }
}

/* Revisi v2 Home dan Pencapaian (3 Nov 2026): progres kelas dan heatmap di Home, ringkasan bintang satu baris, badge 6 dengan Lihat semua. */
.pf-hk { list-style: none; margin: 10px 0 0; padding: 0; }
.pf-hk__item { padding: 12px 0; border-top: 1px solid var(--pf-garis); }
.pf-hk__item:first-child { border-top: 0; padding-top: 4px; }
.pf-hk__atas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf a.pf-hk__nama { font-weight: 700; color: var(--pf-judul); text-decoration: none; font-size: 14.5px; }
.pf a.pf-hk__nama:hover { text-decoration: underline; }
.pf-hk__n { font-size: 13px; color: var(--pf-teks-2); white-space: nowrap; }
.pf-hk__bar { height: 8px; background: var(--pf-garis); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.pf-hk__bar i { display: block; height: 100%; background: var(--pf-biru-tua); border-radius: 99px; }
.pf-h-heat { overflow-x: auto; margin-top: 12px; padding-bottom: 6px; scrollbar-width: thin; }
.pf-h-heat .p-heat { min-width: 0; }
.pf-h-heat:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; border-radius: 8px; }
@media (max-width: 640px) { .pf-h-heat .p-heat { max-width: none; } }
.pf-dash .p-ringkas { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; background: var(--pf-kartu); border: 1px solid var(--pf-garis); border-radius: 18px; padding: 16px 24px; box-shadow: var(--pf-bayang); margin: 0 0 22px; font-size: 14px; color: var(--pf-teks-2); }
.pf-dash .p-ringkas strong { font-size: 22px; color: var(--pf-judul); letter-spacing: -.01em; margin-right: 4px; }
.pf-bg[hidden] { display: none; }
.pf-bg-aksi { margin-top: 16px; text-align: center; }

/* Jarak tepi di ponsel (revisi v2): satu lapis 16 px dari tepi layar ke kartu, 16 px di dalam kartu. Desktop tidak berubah. */
@media (max-width: 900px) { .pf .pf-isi > .wadah { padding-left: 0; padding-right: 0; } }
@media (max-width: 520px) {
  .pf .pf-kartu, .pf-home-2 .pf-kartu, .pf-dash .p-stat, .pf-dash .p-seksi, .pf-dash .p-ringkas { padding: 16px; }
  .pf-pr__atas { padding: 16px 16px 0; }
  .pf-pr__saya { margin: 16px; padding: 12px; }
  .pf-pr__urut { padding: 0 16px 6px; }
  .pf-pr__urut li { padding: 9px 0; }
  .pf-pr__hadiah { margin: 6px 16px 16px; }
  .pf-pr__resmi { margin: 0 16px 16px; }
}

/* Revisi v2b (3 Nov 2026): Rincian per kelas di Pencapaian, Aturan streak di Home, dua angka di kartu heatmap. */
.pf-dash .p-ringkas { align-items: center; }
.pf .p-rincian-tombol { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--pf-biru-tua); background: transparent; color: var(--pf-biru-tua); font-weight: 700; font-size: 13.5px; }
.pf .p-rincian-tombol[aria-expanded="true"] { background: var(--pf-biru-muda); }
.pf .p-rincian-tombol:focus-visible, .pf .pf-h-info:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }
.pf-h-kepala { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pf .pf-h-info { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; margin: -12px -10px -12px 0; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--pf-biru-tua); font-weight: 700; font-size: 12.5px; justify-content: center; }
.pf .pf-h-info:hover { background: var(--pf-biru-muda); }
.pf-h-info svg { width: 16px; height: 16px; flex: none; }
.pf-h-aturan { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pf-kartu-2); color: var(--pf-teks-2); font-size: 12.5px; line-height: 1.5; }
.pf-h-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 4px; }

/* Karier Pro (karier-pro.js): Gap dan Strategi dan papan lamaran Aplikasi Kamu */
.pf-chip.wn { background: var(--pf-oranye-bg); color: var(--pf-oranye-teks); }
.kp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pf .kp-link { border: 0; background: none; padding: 0; color: var(--pf-biru-tua); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 24px; }
.kp-peran { display: flex; flex-wrap: wrap; gap: 8px; }
.pf .kp-peran-b { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--pf-garis); background: var(--pf-bg); color: var(--pf-teks); font-weight: 600; font-size: 13.5px; text-align: left; }
.pf .kp-peran-b:hover { border-color: var(--pf-biru-tua); }
.pf .kp-peran-b.on { background: var(--pf-biru-muda); border-color: var(--pf-biru-tua); color: var(--pf-biru-tua); }
.kp-peran-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pf .kp-peran-b:focus-visible, .pf .kp-link:focus-visible, .kp-cara summary:focus-visible, .kp-papan:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }
.kp-label-analisis { font-size: 12px; font-weight: 700; color: var(--pf-oranye-teks); background: var(--pf-oranye-bg); border-radius: 999px; padding: 3px 10px; }
.kp-skor-daftar { display: grid; gap: 14px; margin-top: 14px; }
.kp-skor { display: flex; gap: 16px; align-items: flex-start; padding: 14px; border: 1px solid var(--pf-garis); border-radius: 14px; background: var(--pf-kartu-2); }
.kp-skor-isi { min-width: 0; }
.kp-skor-isi b { display: block; color: var(--pf-judul); font-size: 16px; }
.kp-skor-isi small { display: block; color: var(--pf-teks-2); font-size: 13px; }
.kp-hitung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 4px; font-size: 13px; color: var(--pf-teks); }
.kp-titik { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.kp-titik:first-child { margin-left: 0; }
.kp-titik.hijau { background: var(--pf-hijau); }
.kp-titik.kuning { background: #E3A21A; }
.kp-titik.merah { background: var(--pf-merah); }
.kp-skor-isi .kp-jam { margin-top: 4px; }
.kp-cara { margin-top: 16px; font-size: 14px; color: var(--pf-teks-2); }
.kp-cara summary { cursor: pointer; font-weight: 700; color: var(--pf-biru-tua); min-height: 32px; display: list-item; }
.kp-cara p { margin: 8px 0 0; }
.kp-cara .kp-rumus { color: var(--pf-teks); font-weight: 600; }
.kp-cara a { color: var(--pf-biru-tua); }
.kp-gap-daftar, .kp-rencana, .kp-lw-daftar { list-style: none; margin: 0; padding: 0; }
.kp-gap { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pf-garis); }
.kp-gap:first-child { border-top: 0; padding-top: 0; }
.kp-gap-isi { min-width: 0; flex: 1; }
.kp-gap-isi b { color: var(--pf-judul); }
.kp-gap-isi small { display: block; color: var(--pf-teks-2); font-size: 13px; margin-top: 2px; }
.kp-gap-isi .kp-saran { color: var(--pf-teks); }
.kp-bar { height: 6px; margin-top: 8px; max-width: 320px; }
.kp-gap[data-status="kuning"] .kp-bar i { background: #E3A21A; }
.kp-st { flex: none; margin: 0; }
.kp-bobot { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em; border-radius: 6px; padding: 1px 7px; vertical-align: 1px; border: 1px solid var(--pf-garis); color: var(--pf-teks-2); }
.kp-bobot.b3 { background: var(--pf-judul); color: var(--pf-bg); border-color: var(--pf-judul); }
.kp-bobot.b2 { color: var(--pf-biru-tua); border-color: var(--pf-biru-tua); }
.kp-kuat { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pf-garis); }
.kp-kuat-l { font-size: 13px; font-weight: 700; color: var(--pf-teks-2); margin-right: 4px; }
.kp-rencana { position: relative; }
.kp-rencana::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 3px; background: var(--pf-garis); border-radius: 2px; }
.kp-rc { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin-bottom: 12px; position: relative; }
.kp-no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--pf-biru-tua); border: 3px solid var(--pf-kartu); position: relative; font-size: 14px; }
html[data-tema="gelap"] .pf .kp-no { color: #0B0C0F; }
.kp-no.b { background: var(--pf-garis); color: var(--pf-teks-2); }
html[data-tema="gelap"] .pf .kp-no.b { color: var(--pf-teks); }
.kp-rc-isi { border: 1px solid var(--pf-garis); border-radius: 14px; padding: 12px 14px; background: var(--pf-kartu); min-width: 0; }
.kp-rc-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kp-rc-atas b { color: var(--pf-judul); }
.kp-rc-atas .pf-chip { flex: none; margin: 0; }
.kp-rc-isi small { display: block; color: var(--pf-teks-2); font-size: 13px; margin-top: 2px; }
.kp-rc-isi .kp-rc-skill { color: var(--pf-teks); }
.kp-rc-aksi { margin-top: 10px; }
.kp-tanpa { margin-top: 10px; padding: 14px; border: 1px dashed var(--pf-garis); border-radius: 14px; }
.kp-tanpa b { color: var(--pf-judul); }
.kp-tanpa p { margin: 6px 0; }
.kp-tanpa small { color: var(--pf-teks-2); font-size: 13px; }
.kp-segera { border-style: dashed; box-shadow: none; }
.kp-aksi { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pf .pf-btn.kp-merah { background: var(--pf-merah); border-color: var(--pf-merah); color: #fff; }
html[data-tema="gelap"] .pf .pf-btn.kp-merah { color: #fff; }
.kp-tempo-kotak { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--pf-oranye-bg); color: var(--pf-oranye-teks); font-size: 14px; }
.kp-tempo-kotak ul { margin: 6px 0 0; padding-left: 20px; }
.kp-tempo-kotak small { color: inherit; }
.kp-papan { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; scrollbar-width: thin; }
.kp-kol { background: var(--pf-kartu-2); border: 1px solid var(--pf-garis); border-radius: 16px; padding: 12px; min-width: 0; }
.kp-kol h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-teks-2); margin: 0 0 10px; display: flex; justify-content: space-between; }
.kp-kol h4 span { color: var(--pf-judul); }
.kp-kosong { margin: 0; font-size: 13px; color: var(--pf-teks-2); }
.kp-lw { background: var(--pf-kartu); border: 1px solid var(--pf-garis); border-radius: 14px; padding: 12px; margin-bottom: 10px; min-width: 0; overflow-wrap: anywhere; }
.kp-lw.tempo { border-color: #E3A21A; box-shadow: 0 0 0 2px var(--pf-oranye-bg); }
.kp-lw b { display: block; color: var(--pf-judul); font-size: 14px; line-height: 1.3; }
.kp-lw small { display: block; color: var(--pf-teks-2); font-size: 12.5px; }
.kp-tl { margin-top: 6px; }
.kp-tl .pf-chip { margin: 0; font-size: 11.5px; }
.kp-catatan { margin: 6px 0 0; font-size: 13px; color: var(--pf-teks); white-space: pre-line; }
.kp-taut { display: inline-block; font-size: 13px; margin-top: 6px; min-height: 24px; }
.kp-lw .kp-tgl { margin-top: 6px; font-size: 11.5px; }
.kp-lw-aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kp-lw-aksi .kp-pindah { flex: 1 1 100%; padding: 7px 10px; font-size: 13px; min-height: 36px; }
.kp-lw-aksi .pf-btn { flex: 1 1 auto; }
.kp-konfirmasi { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--pf-merah-bg); }
.kp-konfirmasi p { margin: 0; font-size: 13px; color: var(--pf-teks); font-weight: 600; }
.kp-konfirmasi .kp-aksi { margin-top: 8px; }
@media (max-width: 900px) {
  .kp-papan { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .kp-kol { padding: 12px; }
  .kp-lw-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .kp-lw { margin-bottom: 0; }
}
@media (max-width: 520px) {
  .kp-skor { flex-direction: column; gap: 10px; }
  .kp-gap { flex-direction: column; gap: 6px; }
  .kp-rc-atas { flex-direction: column; gap: 6px; }
}
/* K4 Lowongan untukmu dan Skill paling dicari lowongan (4 Nov 2026) */
.kp-lo-daftar, .kp-dc-daftar { list-style: none; margin: 0; padding: 0; }
.kp-lo { padding: 14px 0; border-top: 1px solid var(--pf-garis); min-width: 0; overflow-wrap: anywhere; }
.kp-lo:first-child { border-top: 0; padding-top: 0; }
.kp-lo.pilihan { border: 1px solid var(--pf-biru-tua); border-radius: 14px; padding: 12px 14px; background: var(--pf-biru-muda); margin-bottom: 12px; }
.kp-lo.pilihan + .kp-lo { border-top: 0; }
.kp-lo.pilihan .kp-lo-skill .pf-chip { background: var(--pf-kartu); }
.kp-lo-pilihan { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--pf-biru-tua); border: 1px solid var(--pf-biru-tua); border-radius: 6px; padding: 1px 7px; margin-bottom: 6px; }
.kp-lo-judul { display: block; color: var(--pf-judul); font-size: 15px; line-height: 1.35; }
.kp-lo-meta { display: block; color: var(--pf-teks-2); font-size: 13px; margin-top: 2px; }
.kp-lo-cup { margin: 6px 0 0; font-size: 13.5px; color: var(--pf-teks); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.kp-lo-skill { margin: 6px 0 0; }
.kp-lo-skill .pf-chip { font-size: 12px; padding: 3px 10px; }
.kp-lo-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kp-lo-aksi svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-right: 5px; flex: none; }
.pf .pf-btn.kp-lo-simpan.ada { border-color: var(--pf-hijau-teks); color: var(--pf-hijau-teks); background: var(--pf-hijau-bg); cursor: default; }
.kp-lo-sumber { display: block; color: var(--pf-teks-2); font-size: 12px; margin-top: 6px; }
.kp-lo-catatan { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--pf-garis); font-size: 12.5px; color: var(--pf-teks-2); }
.kp-lo-galat { margin: 0 0 10px; font-size: 14px; }
.kp-dc { padding: 10px 0; border-top: 1px solid var(--pf-garis); min-width: 0; }
.kp-dc:first-child { border-top: 0; padding-top: 0; }
.kp-dc-atas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kp-dc-atas b { color: var(--pf-judul); font-size: 14.5px; }
.kp-dc-atas .pf-chip { margin: 0; font-size: 11.5px; padding: 2px 9px; }
.kp-dc-n { margin-left: auto; font-size: 13px; color: var(--pf-teks-2); font-variant-numeric: tabular-nums; }
.kp-dc-bar { height: 8px; margin-top: 6px; }
.kp-dc[data-gap] .kp-dc-bar i { background: #E3A21A; }
.kp-dc-modul { display: block; font-size: 13px; color: var(--pf-teks-2); margin-top: 4px; }
.pf .kp-lo-aksi .pf-btn:focus-visible, .pf .kp-lipat:focus-visible, .kp-dc-modul a:focus-visible, #kp-lowongan h3:focus-visible, #kp-dicari h3:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }
#kp-lowongan h3:focus:not(:focus-visible), #kp-dicari h3:focus:not(:focus-visible) { outline: none; }
@media (max-width: 520px) {
  .kp-lo-cup { -webkit-line-clamp: 2; line-clamp: 2; }
  .kp-lo-aksi .pf-btn { flex: 1 1 auto; }
  .kp-dc-n { margin-left: 0; flex-basis: 100%; }
}
/* Tombol WhatsApp mengambang (kiri bawah) tidak menutupi aksi kartu terakhir di ponsel. */
@media (max-width: 640px) { body:has(.wa-kontak) #kp-lowongan { margin-bottom: 76px; } }

/* Info lowongan terbaru (papan kurasi lowongan_papan, 4 Nov 2026) */
.kp-infolo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pf-garis); }
.kp-infolo-judul { margin: 0 0 4px; font-size: 15px; }
/* Cincin progres di Progres kelas (gerak.css, 5 Nov 2026) */
.pf-hk__item--cincin { display: flex; gap: 14px; align-items: center; }
.pf-hk__item--cincin .pf-hk__isi { flex: 1; min-width: 0; }
.pf-hk__item--cincin .g-cincin { color: var(--pf-teks); }