/* latihantes.com — identitas: "lembar ujian" — tinta biru tua, kuning stabilo, kertas bergaris */
:root{--ink:#14213d;--ink2:#2b3a67;--hi:#ffc93c;--hi2:#fff1c1;--paper:#fbfaf5;--card:#fff;--line:#e4e1d6;--mut:#5e6478;--ok:#1a7f4b;--okbg:#e5f6ec;--bad:#c0392b;--badbg:#fdecea;--r:14px;--sh:0 1px 2px rgba(20,33,61,.06),0 6px 20px rgba(20,33,61,.06);
--f:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Ubuntu,sans-serif;--mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--ink:#e9ecf5;--ink2:#b9c3e6;--paper:#10131c;--card:#181c28;--line:#2a3042;--mut:#9aa1b5;--hi2:#3a3216;--okbg:#12301f;--badbg:#3a1714;--ok:#4cc38a;--bad:#ff7b6b}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 var(--f);color:var(--ink);background:var(--paper);background-image:linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px);background-size:100% 32px;background-attachment:fixed}
a{color:var(--ink2);text-underline-offset:3px}a:hover{color:var(--ink)}
img,svg{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--hi);padding:8px;z-index:9}
header.top{background:var(--card);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:58px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}.logo svg{height:30px;width:auto}
nav.main{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}nav.main::-webkit-scrollbar{display:none}
nav.main a{padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap;color:var(--ink)}
nav.main a:hover,nav.main a[aria-current]{background:var(--hi2)}
@media(max-width:720px){header.top{position:static}header.top .wrap{flex-wrap:wrap;padding-top:6px}nav.main{margin:0 -16px;width:calc(100% + 32px);padding:0 16px 8px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}nav.main a{background:var(--paper);border:1.5px solid var(--line);padding:6px 12px}nav.main a[aria-current]{border-color:var(--ink)}}
main{padding:18px 0 40px}
.crumbs{font-size:.85rem;color:var(--mut);margin:4px 0 8px}.crumbs a{color:var(--mut)}
h1{font-size:clamp(1.55rem,4.6vw,2.3rem);line-height:1.2;margin:.2em 0 .3em;letter-spacing:-.01em}
h1 .mark{background:linear-gradient(transparent 58%,var(--hi) 58%);padding:0 2px}
h2{font-size:1.35rem;margin:1.6em 0 .5em}h3{font-size:1.08rem;margin:1.2em 0 .4em}
.lead{font-size:1.05rem;color:var(--mut);max-width:62ch;margin:0 0 14px}
.muted{color:var(--mut)}.small{font-size:.86rem}
.card,.tool{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.tool{padding:16px;border-top:5px solid var(--ink);margin:10px 0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--ink);border-radius:12px;padding:10px 16px;font:600 1rem var(--f);cursor:pointer;text-decoration:none;min-height:46px;background:var(--card);color:var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:var(--ink2);color:var(--paper)}
.btn-ghost{background:transparent}.btn-ghost:hover{background:var(--hi2)}
.btn-lg{font-size:1.1rem;padding:12px 26px;min-height:54px;box-shadow:4px 4px 0 var(--hi)}
.btn-sm{min-height:36px;padding:4px 10px;font-size:.88rem;border-width:1.5px}
.btn:disabled{opacity:.4;cursor:default}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
/* setup */
.setup-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:14px}
fieldset{border:1.5px dashed var(--line);border-radius:12px;padding:10px 12px;margin:0}legend{font-weight:700;padding:0 6px}
.opt-row{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;cursor:pointer}.opt-row input{margin-top:5px;accent-color:var(--ink);width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip input{position:absolute;opacity:0}.chip span{display:inline-block;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600;background:var(--card)}
.chip input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}.chip input:focus-visible+span{outline:3px solid var(--hi)}
.mini-hist{margin-top:18px;font-size:.92rem}.mini-hist ul{list-style:none;padding:0;margin:6px 0}.mini-hist li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:5px 0}
/* run */
.run-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--hi2);border-radius:10px;padding:6px 10px;margin-bottom:10px;font-weight:600;position:sticky;top:60px;z-index:3}
@media(max-width:720px){.run-bar{top:0}}
.run-timer{font-family:var(--mono);font-size:1.05rem}.run-timer.warn{color:var(--bad);animation:bl 1s infinite}@keyframes bl{50%{opacity:.4}}
.qcard{padding:4px 0}.qhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.qno{font-weight:700}
.tag{font-size:.75rem;background:var(--ink);color:var(--paper);border-radius:6px;padding:2px 8px;text-transform:uppercase;letter-spacing:.04em}.tag-alt{background:var(--hi);color:#14213d}
.qtext{font-size:1.07rem;margin:6px 0 12px}.seq{font-family:var(--mono);font-size:1.25rem;font-weight:700;margin:10px 0;letter-spacing:.02em;word-spacing:.15em}
.ctx{background:var(--paper);border-left:4px solid var(--hi);padding:8px 12px;border-radius:8px;font-size:.97rem;max-height:340px;overflow:auto;margin-bottom:8px}.ctx p{margin:.3em 0}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-height:48px}
.opt:hover:not(:disabled){border-color:var(--ink2)}.opt.sel{border-color:var(--ink);background:var(--hi2)}
.opt .ol{flex:none;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.opt.sel .ol{background:var(--ink);color:var(--paper)}.opt .ot{flex:1;padding-top:2px}.opt .pt{font-weight:800;background:var(--hi);color:#14213d;border-radius:6px;padding:0 8px}
.opt.ok{border-color:var(--ok);background:var(--okbg)}.opt.bad{border-color:var(--bad);background:var(--badbg)}.opt:disabled{cursor:default;opacity:1}
table.tf{width:100%;border-collapse:collapse}.tf th,.tf td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:middle}.tf th:not(:first-child),.tf td:not(:first-child){text-align:center;width:58px}
.tf tr.ok{background:var(--okbg)}.tf tr.bad{background:var(--badbg)}
.tfb{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:700 1rem var(--f);cursor:pointer}.tfb.on{background:var(--ink);color:var(--paper)}
#periksa{margin-top:12px}
.feedback{margin-top:12px;border-radius:12px;padding:10px 12px;border:1.5px solid}.feedback.ok{border-color:var(--ok);background:var(--okbg)}.feedback.bad{border-color:var(--bad);background:var(--badbg)}.feedback.neutral{border-color:var(--line);background:var(--paper)}
.expl{margin-top:4px}
.qnav{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:14px 0;flex-wrap:wrap}.ragu{display:flex;gap:6px;align-items:center;font-weight:600;background:var(--hi2);padding:8px 12px;border-radius:10px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.gb{height:40px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:600 .9rem var(--f);cursor:pointer}
.gb.done{background:var(--ink);color:var(--paper);border-color:var(--ink)}.gb.flag{background:var(--hi);color:#14213d;border-color:var(--hi)}.gb.cur{outline:3px solid var(--hi2);box-shadow:0 0 0 2px var(--ink)}
.gb.gok{background:var(--ok);border-color:var(--ok);color:#fff}.gb.gbad{background:var(--bad);border-color:var(--bad);color:#fff}
/* result */
.result-hero{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;margin:8px 0 14px;border:2px solid}
.result-hero.pass{background:var(--okbg);border-color:var(--ok)}.result-hero.fail{background:var(--badbg);border-color:var(--bad)}
.result-hero .big{font:800 2.6rem/1 var(--mono);min-width:84px;text-align:center}
.tbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:.95rem}.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left}.tbl tr.ok td:last-child{color:var(--ok);font-weight:700}.tbl tr.bad td:last-child{color:var(--bad);font-weight:700}
.rv{border:1.5px solid var(--line);border-radius:10px;margin:6px 0;padding:6px 10px;background:var(--card)}.rv summary{cursor:pointer;font-weight:600;list-style-position:outside}
.rv.ok{border-left:5px solid var(--ok)}.rv.bad{border-left:5px solid var(--bad)}.rv.neutral{border-left:5px solid var(--hi)}.rvn{font-family:var(--mono);color:var(--mut)}.rvq{font-weight:400}
/* kraepelin */
.kbar{display:flex;align-items:center;gap:10px;font-weight:700;font-family:var(--mono)}.kprog{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden}.kprog i{display:block;height:100%;width:0;background:var(--ink)}
.kstage{display:flex;justify-content:center;margin:8px 0;min-height:250px}
.kstrip{display:flex;flex-direction:column;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:8px 30px;font-family:var(--mono);min-width:150px;user-select:none;justify-content:center}
.kd{font-size:1.7rem;font-weight:700;line-height:1.05;color:var(--ink)}.kd.past{opacity:.3}.kd.act{background:var(--hi);color:#14213d;border-radius:8px;padding:0 18px}
.ka{font-size:.95rem;color:var(--ok);height:1.05em;line-height:1.05em;align-self:flex-end;margin-right:-20px}.ka.slot{color:var(--bad);font-weight:800;animation:bl 1s infinite}
.kcount{font:800 4rem var(--mono)}.kwait{text-align:center;font-weight:700;padding:40px 10px}
.kpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px;margin:0 auto}
.kpad button{height:54px;border-radius:12px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:800 1.6rem var(--mono);cursor:pointer;touch-action:manipulation}
.kpad button:active{background:var(--hi)}.kpad .z{grid-column:2}
.kfoot{text-align:center;margin-top:12px}.krun{position:relative}
.kflash{position:absolute;inset:40% 10% auto;background:var(--ink);color:var(--hi);text-align:center;font:800 1.6rem var(--mono);padding:14px;border-radius:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.kpi{border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--card)}.kpi span{font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;color:var(--mut)}.kpi b{display:block;font:800 2rem var(--mono)}.kpi small{color:var(--mut)}
.kchart{width:100%;height:auto;font:11px var(--f);fill:var(--mut)}.kchart .gl{stroke:var(--line)}.kchart .ln{fill:none;stroke:var(--ink);stroke-width:2.5}.kchart .dt{fill:var(--ink)}.kchart .bw{fill:var(--bad);opacity:.75}.kchart .trend{stroke:#e0a800;stroke-width:2;stroke-dasharray:6 4}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--mut)}.lg::before{content:"";display:inline-block;width:14px;height:4px;margin-right:6px;vertical-align:middle;background:var(--ink)}.lg.bw::before{background:var(--bad);height:10px}.lg.trend::before{background:#e0a800}
.interp{background:var(--paper);border-radius:12px;padding:4px 14px;margin:12px 0;border:1.5px dashed var(--line)}
/* konten */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{display:block;padding:14px;text-decoration:none;color:var(--ink);position:relative;transition:transform .12s}.tile:hover{transform:translateY(-2px);border-color:var(--ink)}
.tile h3{margin:.2em 0;font-size:1.05rem}.tile p{margin:0;color:var(--mut);font-size:.92rem}.tile .ic{font-size:1.5rem}
.tile.star{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--hi)}.badge{position:absolute;top:10px;right:10px;background:var(--hi);color:#14213d;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:6px}
.hero{display:grid;gap:18px;grid-template-columns:1.3fr 1fr;align-items:center;padding:10px 0 6px}@media(max-width:760px){.hero{grid-template-columns:1fr}}
.hero-art{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:14px;box-shadow:6px 6px 0 var(--hi)}
.prose{max-width:72ch}.prose li{margin:.25em 0}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}.faq summary{font-weight:700;cursor:pointer}
.note{background:var(--hi2);border-radius:12px;padding:10px 14px;font-size:.95rem}
.formula{font-family:var(--mono);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;overflow-x:auto}
.ad-slot{min-height:0;margin:0}.ad-slot:empty{display:none}
footer.foot{border-top:2px solid var(--ink);background:var(--card);padding:22px 0;font-size:.92rem}
.foot-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.foot h4{margin:.2em 0 .5em}.foot ul{list-style:none;padding:0;margin:0}.foot li{margin:4px 0}
.price{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.price .card{padding:16px}.price .card.hl{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--hi)}
form.interest{display:grid;gap:10px;max-width:520px}form.interest label{font-weight:600}form.interest input,form.interest select,form.interest textarea{width:100%;padding:10px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--card);color:var(--ink)}
.hist-table td,.hist-table th{font-size:.9rem}
@media print{header.top,footer.foot,.ad-slot,.qnav,.qgrid{display:none}}
.tool{scroll-margin-top:70px}@media(max-width:720px){.tool{scroll-margin-top:10px}}

/* v2: konten SEO & komponen */
.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0 0 4px}
.stats{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:6px 0 0;font-size:.9rem;color:var(--mut)}.stats b{font:800 1.15rem var(--mono);color:var(--ink);margin-right:4px}
.tile{display:flex;gap:12px;align-items:flex-start}.tile .ic{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--hi2);border-radius:12px;font-size:1.35rem}.tile .tt{min-width:0}.tile h3{margin:.1em 0 .15em}
.tile.star{padding-top:16px}.tile.star .badge{top:-10px;right:12px}
@media(max-width:560px){.grid{grid-template-columns:1fr;gap:8px}.tile{padding:12px}.tile p{font-size:.88rem}}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:6px}
.mono{font-family:var(--mono);font-weight:700}
.ex{background:var(--card);border:1.5px solid var(--line);border-left:5px solid var(--hi);border-radius:12px;padding:10px 14px;margin:12px 0}
.exq{margin:.2em 0 .4em}.exo{margin:.2em 0 .5em;padding-left:1.6em}.exo li{margin:.15em 0}.exo .pt{display:inline-block;min-width:22px;text-align:center;font:800 .82rem var(--mono);background:var(--hi);color:#14213d;border-radius:6px;margin-left:6px}
.ex details{border-top:1px dashed var(--line);padding-top:6px}.ex summary{cursor:pointer;font-weight:700;color:var(--ink2)}
.refs{margin-top:22px;font-size:.92rem}.refs ul{padding-left:1.2em}.refs h2{font-size:1.1rem}
.updated{margin:18px 0 6px;border-top:1px dashed var(--line);padding-top:10px}
.toc{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0 4px;font-size:.95rem;line-height:1.9}
.sq{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;font-family:var(--mono)}.sq span{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:5px 8px}
.prose .tbl{display:block;overflow-x:auto}
/* psikotes gambar */
.gtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.chipbtn{padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:600 .95rem var(--f);cursor:pointer;min-height:42px}.chipbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gins{margin:4px 0 10px}.gbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:var(--hi2);border-radius:10px;padding:6px 8px;margin-bottom:8px}
.gtime{font:700 1.05rem var(--mono)}.gtime.warn{color:var(--bad)}.gtools{display:flex;gap:6px;flex-wrap:wrap}.gtools .btn.on{background:var(--ink);color:var(--paper)}
.gcanvas{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;touch-action:none}.gcanvas canvas{display:block;width:100%;touch-action:none;cursor:crosshair}
.gchk{list-style:none;padding:0}.gchk li{padding:4px 0}.gchk input{width:18px;height:18px;accent-color:var(--ink);vertical-align:-3px;margin-right:6px}
@media(max-width:480px){.hero-art{display:none}.stats{gap:4px 14px}}