/* Psikotes Yayasan Al-Amanah — psikotes.yayasanalamanah.id. Warna & huruf mengikuti situs tes Yayasan yang lain (test.yayasanalamanah.id):
   bidang netral, hijau Yayasan hanya untuk tombol utama, pilihan aktif, dan aksen kecil. Huruf disimpan sendiri (tanpa Google Fonts). */
@font-face{font-family:"Figtree";src:url(font/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Philosopher";src:url(font/philosopher.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --bg:#FAF7F2; --surface:#FFFFFF; --tint:#F2EFE9; --ink:#1D2420; --muted:#5C6560; --line:#E4E0D8;
  --accent:#08773F; --btn:#08773F; --on-btn:#FFFFFF; --sel-bg:#E8F3EC; --sel-line:#08773F;
  --tidak-bg:#FBEDEA; --tidak-line:#B42318;
  --alert:#B42318; --alert-bg:#FDEDEC; --info:#1F5F8B; --info-bg:#E9F2F8; --focus:#C98A00; --kepala:#FFFFFF; --kepala-ink:#1D2420;
  --d:#B3412E; --i:#B07A08; --s:#2E8B57; --c:#2D6A9F; --kisi:#E8E4DC;
  --f-display:"Philosopher",Georgia,"Times New Roman",serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121413; --surface:#1A1D1B; --tint:#232724; --ink:#ECEEEA; --muted:#A2AAA5; --line:#2F3431;
    --accent:#45B474; --btn:#45B474; --on-btn:#0E1511; --sel-bg:#203229; --sel-line:#45B474;
    --tidak-bg:#3A1B18; --tidak-line:#FFB4A9;
    --alert:#FFB4A9; --alert-bg:#3A1B18; --info:#9CC9EA; --info-bg:#16283A; --focus:#F4C430; --kepala:#002B15; --kepala-ink:#FFFFFF;
    --d:#E07A66; --i:#E5B23A; --s:#5CC08A; --c:#6FA8DA; --kisi:#2F3431;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121413; --surface:#1A1D1B; --tint:#232724; --ink:#ECEEEA; --muted:#A2AAA5; --line:#2F3431;
  --accent:#45B474; --btn:#45B474; --on-btn:#0E1511; --sel-bg:#203229; --sel-line:#45B474;
  --tidak-bg:#3A1B18; --tidak-line:#FFB4A9;
  --alert:#FFB4A9; --alert-bg:#3A1B18; --info:#9CC9EA; --info-bg:#16283A; --focus:#F4C430; --kepala:#002B15; --kepala-ink:#FFFFFF;
  --d:#E07A66; --i:#E5B23A; --s:#5CC08A; --c:#6FA8DA; --kisi:#2F3431;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;min-height:100vh;min-height:100dvh}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2{font-family:var(--f-display);font-weight:700;line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
h3{font-size:1rem;margin:0}
p,ul{margin:0}
ul{padding-left:1.2rem}
a{color:var(--accent)}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* kerangka */
.app{max-width:44rem;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface);border-inline:1px solid var(--line)}
.atas{background:var(--kepala);color:var(--kepala-ink);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.atas a{display:block;line-height:0}
.atas img.logo{height:36px;width:auto;display:block}
.atas .judul{flex:1;min-width:0}
.atas .judul b{display:block;font-family:var(--f-display);font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atas .judul span{display:block;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){ .atas{gap:8px} .atas img.logo{height:28px} }
@media (min-width:600px){ .disc-kepala,.disc-baris{grid-template-columns:1fr 5rem 5rem} }
.isi{flex:1;padding:16px;display:grid;gap:16px;align-content:start}
.bawah{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);text-align:center}
.kartu{border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px;background:var(--surface);min-width:0}
.kartu.tint{background:var(--tint)}
.kecil{font-size:.85rem;color:var(--muted)}
.galat{border-radius:10px;padding:10px 12px;background:var(--alert-bg);color:var(--alert);font-size:.92rem}
.info{border-radius:10px;padding:10px 12px;background:var(--info-bg);color:var(--info);font-size:.92rem}

/* kontrol */
.btn{appearance:none;font:inherit;font-weight:600;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 16px;min-height:46px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none}
.btn.utama{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
.btn.penuh{width:100%}
.btn:disabled{opacity:.5;cursor:progress}
.tautan-tombol{appearance:none;background:none;border:0;padding:4px 0;font:inherit;font-size:.9rem;color:var(--accent);text-decoration:underline;cursor:pointer;justify-self:start}
input[type=text],input[type=search],input[type=tel],input[type=email]{font:inherit;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-height:46px}
.soal{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.soal > label,.soal > legend{font-weight:600;padding:0}
.soal .bantu{font-size:.85rem;color:var(--muted)}
.soal .pesan-salah{font-size:.88rem;color:var(--alert);min-height:0}
.soal.salah input[type=text],.soal.salah input[type=tel],.soal.salah input[type=email],.soal.salah input[type=search]{border-color:var(--alert)}
.baris-tombol{display:flex;gap:10px;justify-content:space-between}
.baris-tombol .btn{flex:1}
.jebakan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* pilihan berbentuk kartu (jenis peserta, lembaga) */
.opsi-daftar{display:grid;gap:8px}
.opsi-daftar.dua{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
.opsi{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.opsi input{margin:4px 0 0;accent-color:var(--accent);width:18px;height:18px;flex:none}
.opsi b{display:block}
.opsi span.ket{display:block;font-size:.85rem;color:var(--muted)}
.opsi:has(input:checked){border-color:var(--sel-line);background:var(--sel-bg)}
.setuju{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.setuju input{margin:4px 0 0;accent-color:var(--accent);width:18px;height:18px;flex:none}

/* daftar nama karyawan */
.daftar-nama{display:grid;gap:6px;max-height:46vh;overflow:auto;padding:2px}
.nama-opsi{appearance:none;font:inherit;text-align:left;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface);color:var(--ink);cursor:pointer;display:grid}
.nama-opsi small{color:var(--muted);font-size:.8rem}
.nama-opsi[aria-pressed=true]{border-color:var(--sel-line);background:var(--sel-bg)}
.terpilih{border-radius:10px;padding:10px 12px;background:var(--sel-bg);border:1.5px solid var(--sel-line)}

/* satu nomor per layar */
.langkah-atas{display:grid;gap:6px;font-size:.88rem;color:var(--muted)}
.palang{height:6px;border-radius:3px;background:var(--tint);overflow:hidden}
.palang i{display:block;height:100%;background:var(--accent);border-radius:3px}
.disc-tabel{display:grid;gap:8px}
.disc-kepala{display:grid;grid-template-columns:1fr 3.6rem 3.6rem;gap:6px;font-size:.75rem;color:var(--muted);text-align:center;line-height:1.2}
.disc-baris{display:grid;grid-template-columns:1fr 3.6rem 3.6rem;gap:6px;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;padding:8px}
.disc-baris.pilih-mirip{border-color:var(--sel-line);background:var(--sel-bg)}
.disc-baris.pilih-tidak{border-color:var(--tidak-line);background:var(--tidak-bg)}
.disc-pernyataan{display:flex;gap:8px;align-items:flex-start;min-width:0}
.disc-huruf{flex:none;width:1.6rem;height:1.6rem;border-radius:6px;background:var(--tint);display:grid;place-items:center;font-size:.85rem}
.disc-pilih{position:relative;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;min-height:44px;background:var(--surface)}
.disc-pilih input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.disc-pilih .tanda{font-size:1.25rem;font-weight:700;color:var(--muted)}
.disc-pilih.mirip:has(input:checked){background:var(--btn);border-color:var(--btn)}
.disc-pilih.mirip:has(input:checked) .tanda{color:var(--on-btn)}
.disc-pilih.tidak:has(input:checked){background:var(--tidak-line);border-color:var(--tidak-line)}
.disc-pilih.tidak:has(input:checked) .tanda{color:var(--surface)}
.disc-pilih:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.kartu.salah{border-color:var(--alert)}
.kartu .pesan-salah{color:var(--alert);font-size:.9rem}
.kartu .pesan-salah:empty{display:none}
.disc-catatan{color:var(--info)}
.disc-catatan:empty{display:none}

/* hasil */
.hasil-kepala{display:flex;gap:14px;align-items:center}
.lencana{flex:none;width:4rem;height:4rem;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--f-body);font-size:2.1rem;font-weight:800}
.lencana.D{background:var(--d)} .lencana.I{background:var(--i)} .lencana.S{background:var(--s)} .lencana.C{background:var(--c)}
.hasil-kepala .label-atas{text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;color:var(--muted)}
.grafik-dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:16px}
.grafik{display:grid;gap:6px}
.grafik h3{font-size:.92rem}
.batang{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:9rem;margin-top:1.4rem;align-items:end;position:relative;border-bottom:1.5px solid var(--line)}
.batang::before{content:"";position:absolute;left:0;right:0;bottom:50%;border-top:1.5px dashed var(--muted);opacity:.55;z-index:1;pointer-events:none}
.batang .b{position:relative;border-radius:6px 6px 0 0;min-height:2px}
.batang .b span{position:absolute;top:-1.25rem;left:0;right:0;text-align:center;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.batang .b.D{background:var(--d)} .batang .b.I{background:var(--i)} .batang .b.S{background:var(--s)} .batang .b.C{background:var(--c)}
.batang.arsir .b{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 3px,transparent 3px 7px)}
.sumbu{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font-weight:700;font-size:.9rem}
.sumbu .D{color:var(--d)} .sumbu .I{color:var(--i)} .sumbu .S{color:var(--s)} .sumbu .C{color:var(--c)}
.gambaran{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr;gap:6px 12px;margin:0}
.gambaran dt{font-weight:600}
.gambaran dd{margin:0}
@media (max-width:520px){ .gambaran{grid-template-columns:1fr} .gambaran dd{margin-bottom:6px} }
.empat-gaya{display:grid;gap:10px}
.empat-gaya .g{display:grid;grid-template-columns:2rem 1fr;gap:10px;align-items:start}
.empat-gaya .huruf{width:2rem;height:2rem;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700}
.huruf.D{background:var(--d)} .huruf.I{background:var(--i)} .huruf.S{background:var(--s)} .huruf.C{background:var(--c)}

/* beranda */
.pintu{display:grid;gap:10px;text-decoration:none;color:inherit}
.pintu:hover{border-color:var(--sel-line)}