/* ═══════════════════════════════════════════════════════════════════════════
   MESIN SOAL — penyambung antara mesin asesmen dan desain asesmen Lakon
   Dipasang Lapis, 18 Sep 2026.

   Mengapa berkas ini ada: mesin asesmen (lakon_assessment.js) menghasilkan
   penanda sendiri (.q-text, .skala5, .sk-btn, .pasangan, .p2-opt). Berkas ini
   memberi penanda itu tampilan yang sama dengan desain (aset krem, kartu
   membulat, aksen clay), tanpa mengubah mesin maupun asesmen.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layar: hanya satu yang tampil (dipakai app.js) ─────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

/* ── Nomor & pertanyaan ─────────────────────────────────────────────────── */
/* Kolom soal 860 px dan dimusatkan, seragam untuk ketiga jenis soal (pasangan,
   skala, pilih dua). Ini mengembalikan maksud desainer aslinya: kolom soal
   memang diniatkan lebih ramping dari kop. Sebelumnya kolom ini menyusut
   karena `.arena` memakai display:flex dan tampak rata kiri.                  */
.q-container { max-width: 860px; margin: 0 auto; }
/* Baris tombol Sebelumnya/Lanjut mengikuti kolom soal yang sama supaya tidak
   ada sisi yang kosong sebelah di desktop. Di ponsel tetap selebar layar. */
@media (min-width: 720px) {
  .navigasi { max-width: 860px; padding-inline: 0; }
}
.q-block + .q-block { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--garis-halus); }
.q-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; margin-bottom: 14px;
  border-radius: 999px; background: var(--clay-muda); color: var(--clay-gelap);
  font: 600 15px/1 var(--sans); letter-spacing: .02em;
}
.q-text, .q-tanya {
  font-family: var(--serif); font-size: clamp(1.45rem, 2.8vw, 2.05rem);
  line-height: 1.32; color: var(--tinta); margin: 0 0 26px;
}
.q-tanya { font-size: clamp(1.25rem, 2.15vw, 1.57rem); color: var(--teks); margin-bottom: 20px; }

/* ── Format A · lima titik (skala) ──────────────────────────────────────── */
.skala5 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sk-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: var(--krem-terang); border: 2px solid var(--garis); border-radius: 16px;
  padding: 18px 22px; font: 400 17px/1.45 var(--sans); color: var(--tinta);
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  min-height: 60px;
}
.sk-btn:hover { border-color: var(--garis-tebal); }
.sk-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.sk-btn.sel, .ps-btn.sel { background: var(--clay-muda); border-color: var(--clay); font-weight: 500; }
.sk-btn .sk-dot {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--garis-tebal); background: transparent; transition: all .15s ease;
}
.sk-btn.sel .sk-dot { border-color: var(--clay); background: var(--clay); box-shadow: inset 0 0 0 3px var(--krem-terang); }
@media (min-width: 720px) { .skala5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sk-btn { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; } }

/* ── Format B · pasangan: dua pernyataan + empat titik kecenderungan ──────
   Keempat pilihan berada dalam SATU kotak bersambung yang dipisah garis,
   bukan empat kotak terpisah. Bentuk bersambung inilah yang membuat arah
   terbaca sebagai satu sumbu: ujung kiri paling kuat ke kiri, ujung kanan
   paling kuat ke kanan. Empat kotak terpisah terbaca sebagai daftar pilihan
   biasa, bukan arah.
   Dua pilihan kiri duduk di bawah kotak pernyataan kiri dan dua pilihan
   kanan di bawah kotak kanan: kisi empat kolom sama lebar membagi dua tepat
   di tengah jarak antar kotak pernyataan.
   Panah di dalam kotak pernyataan menunjuk arah kutubnya masing-masing.
   Urutan pilihan wajib Jelas · Condong · Condong · Jelas: luar = nilai 2,
   dalam = 1, jadi makin ke ujung makin kuat.                              */
.pasangan { display: grid; gap: 10px; }
@media (min-width: 720px) { .pasangan { grid-template-columns: 1fr 1fr; } }
.ps-sisi {
  position: relative;
  background: var(--krem-terang); border: 2px solid var(--garis); border-radius: 16px;
  padding: 22px; font: 400 17px/1.5 var(--sans); color: var(--tinta);
  min-height: 96px; display: flex; align-items: center;
}
.ps-kiri { padding-left: 42px; }
.ps-kanan { padding-right: 42px; }
.ps-kiri::before, .ps-kanan::after {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--clay); font: 700 18px/1 var(--sans);
}
.ps-kiri::before { content: "\2190"; left: 16px; }
.ps-kanan::after { content: "\2192"; right: 16px; }
.ps-skala {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: 14px; background: #fff;
  border: 2px solid var(--garis-kuat); border-radius: 14px; overflow: hidden;
}
.ps-btn {
  width: 100%; min-height: 58px; padding: 10px 6px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: transparent;
  font: 500 15px/1.2 var(--sans); color: var(--tinta); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ps-btn + .ps-btn { border-left: 1px solid var(--garis); }
.ps-btn:nth-child(3) { border-left: 2px solid var(--garis-tebal); }
.ps-btn:hover { background: var(--clay-muda); }
.ps-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: -3px; }
.ps-btn .ps-dot { display: none; }
.ps-btn.sel { background: var(--clay); color: #fff; }
.ps-btn.sel .ps-lbl { font-weight: 600; }

/* ── Format C · pilih dua kegiatan ──────────────────────────────────────── */
.pick2-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .pick2-grid { grid-template-columns: 1fr 1fr; } }
.p2-opt {
  text-align: left; background: var(--krem-terang); border: 2px solid var(--garis);
  border-radius: 16px; padding: 18px 20px; font: 400 16px/1.45 var(--sans); color: var(--tinta);
  cursor: pointer; min-height: 64px; transition: background-color .15s ease, border-color .15s ease;
}
.p2-opt:hover { border-color: var(--garis-tebal); }
.p2-opt:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.p2-opt.sel { background: var(--clay-muda); border-color: var(--clay); font-weight: 500; }
.pick2-counter { margin-top: 14px; font: 500 14px/1 var(--sans); color: var(--clay-teks); }

/* ── Gerbang data (dibuat mesin saat semua soal selesai) ────────────────── */
.userinfo-wrap { max-width: 620px; margin: 0 auto; background: var(--krem-terang);
  border: 1px solid var(--garis); border-radius: var(--r-besar); padding: 34px; }
.userinfo-h { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; color: var(--tinta); }
.userinfo-sub { color: var(--teks); margin: 0 0 24px; }
.field-group { margin-bottom: 16px; }
.field-label { display: block; font: 600 14px/1 var(--sans); color: var(--teks); margin-bottom: 7px; }
.field-input {
  width: 100%; padding: 13px 15px; border: 2px solid var(--garis); border-radius: 12px;
  font: 400 16px/1.4 var(--sans); background: #fff; color: var(--tinta);
}
.field-input:focus { outline: 3px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }
/* Keterangan tetap untuk perusahaan dan divisi yang datang dari tautan.
   Dipakai menggantikan kolom isian supaya tidak ada varian nama institusi. */
.field-lock {
  padding: 13px 15px; border: 2px solid var(--krem); border-left: 4px solid var(--clay);
  border-radius: 12px; background: var(--krem); color: var(--teks);
  font: 400 15px/1.55 var(--sans);
}
.field-lock b { font-weight: 600; color: var(--tinta); }
.btn-submit {
  margin-top: 18px; width: 100%; padding: 16px 20px; border: 0; border-radius: 14px;
  background: var(--clay); color: #fff; font: 600 17px/1 var(--sans); cursor: pointer;
  min-height: 56px; transition: background-color .15s ease;
}
.btn-submit:hover { background: var(--clay-gelap); }
.btn-submit[disabled] { opacity: .6; cursor: progress; }

/* ═══ Tambahan pengalaman (keputusan Lapis 18 Sep 2026) ════════════════════ */

/* Maju otomatis: bilah kecil untuk membatalkan */
.batal-maju {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 40;
  background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 999px;
  font: 500 14px/1 var(--sans); box-shadow: 0 10px 28px rgba(34, 31, 26, .28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.batal-maju.tampil { opacity: 1; pointer-events: auto; }
.batal-maju button {
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff;
  padding: 7px 12px; font: 600 13px/1 var(--sans); cursor: pointer;
}
.batal-maju__isi { width: 74px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.3); overflow: hidden; }
.batal-maju__isi i { display: block; height: 100%; background: var(--clay-muda); width: 0; }

/* Tautan kecil di baris kemajuan: mode ringkas.
   Dulu ini tombol di bilah melekat bawah bersama "Apa maksud soalnya?".
   Bilah itu dihapus 19 Sep 2026 karena menutupi soal di ponsel. */
.tautan-alat {
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: 500 12px/1 var(--sans); color: var(--teks-samar);
  text-decoration: underline; text-underline-offset: 3px;
}
.tautan-alat:hover { color: var(--clay); }
.progres__alat { margin: 10px 0 0; text-align: right; }
body { padding-bottom: 26px; }

/* Bantuan pengerjaan di layar jeda (pengganti bilah bawah) */
.jeda__tanya { margin-top: 18px; font: 400 14px/1.6 var(--sans); color: var(--teks-samar); }
.jeda__tanya a { color: var(--clay-teks); }

/* Layar jeda antar bagian */
.jeda { text-align: center; padding: 40px 0 10px; }
.jeda__bukit { width: 100%; height: auto; display: block; }
.jeda h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 18px 0 10px; }
.jeda p { color: var(--teks); max-width: 560px; margin: 0 auto 26px; }

/* daftar tahap di bilah kemajuan: jangan sampai melipat dua baris */
.tahap li { white-space: nowrap; }

/* ═══ Ponsel: penyesuaian kisi pasangan (bentuk yang disetujui Dedy) ═══════
   Bentuk ponsel ini yang berlaku: kotak pernyataan kiri-kanan, panah di dalam
   kotaknya, lalu satu kotak pilihan bersambung berisi empat petak.
   Dua aturan yang harus dijaga: urutan petak tetap Jelas · Condong · Condong ·
   Jelas (luar = nilai 2, dalam = 1), dan jarak kotak pernyataan sama dengan
   jarak kolom pilihan supaya tepinya bertemu.                            */
@media (max-width: 719px) {
  .pasangan { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .ps-sisi {
    min-height: 120px; padding: 14px;
    font-size: 15px; line-height: 1.4; border-radius: 14px;
  }
  .ps-kiri { padding-left: 34px; }
  .ps-kanan { padding-right: 34px; }
  .ps-kiri::before { left: 11px; }
  .ps-kanan::after { right: 11px; }
  .ps-btn { min-height: 58px; padding: 8px 4px; font-size: 13px; }
}