/* Gaya khusus ATS Job Match.

   Warna, tombol, dan panel meminjam cv.css supaya ketiga alat terasa satu
   keluarga. Berkas ini hanya menambahkan yang khas perbandingan: daftar
   lowongan, peringkat, dan rincian faktornya. */

.kolom-cocok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 1100px) {
  .kolom-cocok { grid-template-columns: minmax(0, 1fr) }
}

.sisi-kanan { position: sticky; top: 84px }
@media (max-width: 1100px) { .sisi-kanan { position: static } }

.hasil-kepala { margin-bottom: 14px }

/* ---------- ringkasan CV ---------- */
.cv-ringkas {
  border: 1.5px solid var(--garis); border-radius: 14px;
  padding: 16px 18px; background: var(--bg2);
}
.cv-ringkas b { display: block; font-size: 1.05rem }
.cv-ringkas > span { display: block; color: var(--redup); font-size: .88rem; margin-top: 2px }
.cv-ringkas ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px }
.cv-ringkas li { color: var(--teks2); font-size: .87rem }
.cv-ringkas li::before { content: "·"; color: var(--tema); margin-right: 8px }
.ubah-cv { display: inline-block; margin-top: 12px; font-size: .85rem; color: var(--redup) }
.ubah-cv:hover { color: var(--tema) }

.kosong-cv { color: var(--teks2); line-height: 1.7 }

/* ---------- daftar lowongan ---------- */
.lowongan {
  border: 1.5px solid var(--garis); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; background: var(--bg2);
}
.lowongan-kepala {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.lowongan-kepala b { font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tema) }
.hapus {
  background: none; border: 0; color: var(--redup); cursor: pointer;
  font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px;
}
.hapus:hover { color: var(--galat) }
.tbl.tambah { width: 100%; margin-top: 4px }

/* ---------- peringkat ---------- */
ol.peringkat { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px }
ol.peringkat li {
  border: 1.5px solid var(--garis); border-radius: 14px;
  padding: 16px 18px; background: var(--bg2);
}
/* Warna hanya menegaskan angkanya, tidak menggantikannya: angka dan bilahnya
   tetap ada, jadi yang tidak membedakan warna tidak kehilangan apa pun. */
ol.peringkat li.tinggi { border-color: rgba(191, 247, 71, .5) }
ol.peringkat li.rendah { border-color: rgba(248, 113, 113, .35) }

.pr-kepala { display: flex; align-items: center; gap: 14px }
.pr-urut {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .85rem; font-weight: 700;
  background: rgba(191, 247, 71, .1); color: var(--tema);
  border: 1.5px solid rgba(191, 247, 71, .4);
}
.pr-nama { flex: 1 1 auto; min-width: 0 }
.pr-nama b { display: block; font-size: .98rem }
.pr-nama span { display: block; color: var(--redup); font-size: .84rem }
.pr-nilai { flex: 0 0 auto; font-size: 1.7rem; font-weight: 700; color: var(--tema) }
.pr-nilai i { font-size: .8rem; font-style: normal; color: var(--redup); margin-left: 2px }

.pr-bilah { height: 6px; border-radius: 3px; background: #2a2a2a; margin-top: 12px; overflow: hidden }
.pr-bilah i { display: block; height: 100%; border-radius: 3px; background: var(--tema) }

/* ---------- rincian faktor ---------- */
.pr-rinci { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--garis) }
.faktor { margin-bottom: 14px }
.faktor-atas { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem }
.faktor-atas b { color: var(--tema) }
.faktor-bilah { height: 4px; border-radius: 2px; background: #262626; margin: 6px 0 6px; overflow: hidden }
.faktor-bilah i { display: block; height: 100%; border-radius: 2px; background: var(--tema) }
.faktor .bantu { font-size: .82rem; line-height: 1.55 }

.kunci-kurang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.kunci-kurang span {
  padding: 5px 12px; border-radius: 99px;
  border: 1.5px solid var(--garis); background: var(--bg);
  font-size: .82rem; color: var(--teks2);
}

ul.saran { padding-left: 20px; margin: 8px 0 0; display: grid; gap: 9px }
ul.saran li { color: var(--teks2); font-size: .9rem; line-height: 1.6 }