/* Gaya khusus Persiapan Wawancara.

   Warna, tombol, dan panel meminjam cv.css supaya keempat alat terasa satu
   keluarga. Berkas ini hanya menambahkan yang khas: daftar pertanyaan
   berkategori, blok kerangka jawaban, dan bagian titik rawan. */

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

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

.hasil-kepala {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.jumlah-tanya { color: var(--redup); font-size: .85rem }

/* ---------- 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 pertanyaan ---------- */
h3.kat {
  font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--tema); margin: 26px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--garis);
}
h3.kat:first-child { margin-top: 0 }

ol.tanya { list-style: none; padding: 0; margin: 0; counter-reset: t }
ol.tanya > li {
  counter-increment: t;
  border: 1.5px solid var(--garis); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px; background: var(--bg2);
}
.tanya-teks { margin: 0; font-size: 1rem; line-height: 1.6; position: relative; padding-left: 30px }
.tanya-teks::before {
  content: counter(t); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: rgba(191, 247, 71, .1); color: var(--tema);
  border: 1px solid rgba(191, 247, 71, .4);
}

/* ---------- kerangka jawaban ---------- */
.tanya-rinci { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--garis) }
.blok { margin-bottom: 12px }
.blok:last-child { margin-bottom: 0 }
.blok b {
  display: block; font-size: .74rem; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--redup); margin-bottom: 5px;
}
.blok p { margin: 0; color: var(--teks2); font-size: .9rem; line-height: 1.65 }
/* Yang harus dihindari diberi tanda di tepi, bukan hanya warna teks —
   pembaca yang tidak membedakan warna tetap melihat pemisahnya. */
.blok.hindari { padding-left: 12px; border-left: 3px solid var(--galat) }
.blok.hindari b { color: var(--galat) }

/* ---------- titik rawan ---------- */
h3.kat.rawan-judul { color: var(--awas); border-bottom-color: rgba(250, 204, 21, .3) }
.rawan { display: grid; gap: 12px; margin-top: 12px }
.rawan-butir {
  border: 1.5px solid rgba(250, 204, 21, .3); border-radius: 14px;
  padding: 16px 18px; background: var(--bg2);
}
.rawan-butir b { display: block; font-size: .95rem; color: var(--awas) }
.rawan-tanya {
  margin: 8px 0 10px; font-style: italic;
  color: var(--teks); font-size: .95rem; line-height: 1.6;
}
.rawan-butir .bantu { font-size: .88rem; line-height: 1.65 }