/* =================================================================
   fitur: kuliah — "Menuju SNBP" (siswa) + "Potensi SNBP" (guru) + kuis minat
   Desain krem + hitam hangat + vermilion (26 Okt 2026). Hanya token dari style.css, tanpa hex tetap.
   Aksen vermilion hemat: garis terkuat di grafik, angka sorotan, titik pilihan kuis, bar teratas.
   ================================================================= */

/* kartu halaman */
.kl-k{display:grid;gap:16px;align-content:start;min-width:0}
.kl-k .card-h{margin-bottom:0;align-items:flex-end;flex-wrap:wrap}
.kl-k .card-h .lbl{margin-bottom:4px}
.kl-foot{display:block;color:var(--muted);line-height:1.6}
.kl-foot .linkbtn{font-size:inherit}
.kl-kosong{padding:28px 14px;border:1.5px dashed var(--line-strong);border-radius:var(--r)}
.kl-sh{display:grid;gap:18px;min-width:0}

/* ---------- grafik tren nilai ---------- */
.kl-grafik{display:grid;gap:18px;min-width:0}
@media (min-width:1100px){.kl-lebar{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;gap:28px}}
.kl-fig{margin:0;min-width:0}
/* garis: 0 vermilion (terkuat), 1 tinta, 2–5 abu hangat bertingkat (cukup gelap untuk terbaca di krem dan di hitam) */
.kl-s0{--c:var(--api)}
.kl-s1{--c:var(--ink)}
.kl-s2{--c:color-mix(in srgb,var(--ink) 72%,var(--card))}
.kl-s3{--c:color-mix(in srgb,var(--ink) 62%,var(--card))}
.kl-s4{--c:color-mix(in srgb,var(--ink) 54%,var(--card))}
.kl-s5{--c:color-mix(in srgb,var(--ink) 46%,var(--card))}
.kl-chart{display:block;width:100%;height:auto;max-width:640px;overflow:visible}
.kl-chart .kl-grid{stroke:var(--line);stroke-width:1}
.kl-chart .kl-ax{fill:var(--muted);font:500 10.5px var(--f-mono);letter-spacing:.06em}
.kl-chart polyline{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.kl-s0 polyline{stroke-width:3}
.kl-s1 polyline{stroke-width:2.4}
.kl-mk{fill:var(--card);stroke:var(--c);stroke-width:2;stroke-linejoin:round}
.kl-s0 .kl-mk,.kl-s1 .kl-mk{fill:var(--c)}
.kl-bx{fill:none!important;stroke-linecap:round}
.kl-chart .kl-end{fill:var(--ink);font:600 12px var(--f-mono);font-variant-numeric:tabular-nums}
.kl-chart .kl-end.kl-s0{fill:var(--api-text)}
.kl-chart [data-r],.kl-leg{transition:opacity .2s var(--ease),border-color .15s,background-color .15s}
.kl-dim{opacity:.16}
/* gambar tergambar: garis menyapu dulu, penanda & angka menyusul (halaman: kelas .enter dari app.js) */
.view.enter .kl-chart .kl-mk,.view.enter .kl-chart .kl-end{animation:fade .35s .95s backwards}
.sheet .kl-chart polyline{stroke-dasharray:1;animation:draw 1s .15s var(--ease-out) backwards}
.sheet .kl-chart .kl-mk,.sheet .kl-chart .kl-end{animation:fade .35s .8s backwards}
.kl-legs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kl-leg{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 14px 4px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--ink);font:600 12.5px/1.2 var(--f-body);cursor:pointer;text-align:left}
.kl-leg:hover{border-color:var(--ink)}
.kl-leg[aria-pressed="true"]{border-color:var(--ink);background:var(--sunken)}
.kl-sw{width:28px;height:12px;flex:none;overflow:visible}
.kl-sl{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round}
.kl-cat{margin-top:10px;font:400 11px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.kl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.kl-table{width:100%;border-collapse:collapse;font:500 13px var(--f-mono);font-variant-numeric:tabular-nums}
.kl-table th,.kl-table td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.kl-table th:first-child{text-align:left;white-space:normal;min-width:104px}
.kl-table thead th{font:600 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--sunken)}
.kl-table tbody th{font:600 13px var(--f-body);color:var(--ink)}
.kl-table tr:last-child>*{border-bottom:0}
.kl-table .kl-avg>*{background:var(--sunken);font-weight:700;color:var(--ink)}
.kl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kl-sems{display:flex;flex-wrap:wrap;gap:6px}
.kl-sems span{display:inline-flex;gap:8px;padding:5px 12px;border-radius:999px;background:var(--sunken);font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kl-sems b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- kuis minat ---------- */
.kl-prog{height:5px;border-radius:9px;background:var(--line);overflow:hidden;margin-bottom:10px}
.kl-prog i{display:block;width:100%;height:100%;border-radius:9px;background:var(--ink);transform-origin:left;transition:transform .3s var(--ease-kuat)}
.kl-step{display:grid;gap:14px;animation:masukKecil .28s var(--ease-kuat) both}
.kl-q{font:400 clamp(1.45rem,5vw,1.85rem)/1.08 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.kl-opsi{display:grid;gap:8px}
.kl-opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:var(--r);background:transparent;color:var(--ink);
  font:600 15px/1.35 var(--f-body);text-align:left;cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease-kuat)}
.kl-opsi .kl-opt::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);transition:border-color .15s,background-color .15s,box-shadow .15s}
.kl-opt:hover{border-color:var(--ink);background:var(--brand-soft)}
.kl-opt:active{transform:scale(.985)}
.kl-opt.on,.kl-opt.on:hover{border-color:var(--pill);background:var(--pill);color:var(--pill-fg)}
.kl-opsi .kl-opt.on::before{border-color:var(--api);background:var(--api);box-shadow:inset 0 0 0 3px var(--pill)}
.kl-skala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.kl-skala .kl-opt{flex-direction:column;justify-content:center;gap:4px;padding:10px 2px;text-align:center}
.kl-skala .kl-opt b{font:400 1.6rem/1 var(--f-display)}
.kl-skala .kl-opt small{font:500 10.5px/1.25 var(--f-body);color:inherit;opacity:.8}
.kl-tawar-n{display:flex;align-items:flex-end;gap:14px}
.kl-tawar-n b{font:400 5rem/.85 var(--f-display);color:var(--api)}
.kl-tawar-n .lbl{padding-bottom:6px}

/* bar minat & hasil kuis */
.kl-bars{display:grid;gap:16px}
.kl-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline}
.kl-bar-n{display:flex;align-items:baseline;gap:10px;min-width:0;font-weight:700;font-size:15px}
.kl-rk{font:600 11px var(--f-mono);font-style:normal;letter-spacing:.1em;color:var(--muted)}
.kl-bar b{font:400 1.7rem/1 var(--f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kl-bar.top b{color:var(--api)}
.kl-bar .track{grid-column:1/-1;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.kl-bar .track i{display:block;height:100%;border-radius:9px;background:var(--ink);transform-origin:left}
.kl-bar.top .track i{background:var(--api)}
.sheet .kl-bar .track i{animation:grow .7s .2s var(--ease-out) backwards}
.sheet .kl-bar:nth-child(2) .track i{animation-delay:.3s}
.sheet .kl-bar:nth-child(3) .track i{animation-delay:.4s}
.kl-hasil > *{animation:masukKecil .34s var(--ease-kuat) backwards}
.kl-hasil > :nth-child(2){animation-delay:.07s}.kl-hasil > :nth-child(3){animation-delay:.14s}
.kl-hasil > :nth-child(4){animation-delay:.21s}.kl-hasil > :nth-child(5){animation-delay:.28s}
.kl-top1{margin-top:6px;font:400 clamp(2.2rem,9vw,3.1rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.kl-top1::after{content:".";color:var(--api)}
.kl-h3{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kl-lomba li,.kl-pres li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.kl-lomba li:last-child,.kl-pres li:last-child{border-bottom:0}
.kl-lomba li small,.kl-pres li small{font:500 11.5px/1.5 var(--f-mono);letter-spacing:.02em}
.kl-lomba li .tag{margin-top:6px}

/* ---------- Future Path Cards (saran awal jurusan) ---------- */
.kl-paths{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.kl-paths{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}}
.kl-path{display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--bg);
  transition:transform .2s var(--ease-kuat),border-color .2s var(--ease)}
.kl-path:hover{transform:translateY(-3px);border-color:var(--ink)}
.kl-path-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kl-path-top .lbl{font-size:11px}
.kl-mini{padding:4px 9px;border:1px solid var(--line-strong);border-radius:999px;font:600 10px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.kl-path h3{font:400 1.55rem/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.kl-why ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.kl-why li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;font-size:13.5px;line-height:1.35}
.kl-bj{min-width:46px;font:600 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kl-bt{overflow-wrap:anywhere;font-weight:600}
.kl-why li b{font:600 13px var(--f-mono);font-variant-numeric:tabular-nums}
.kl-why .bar{grid-column:1/-1;height:4px}
.kl-why .bar i{width:100%;transform-origin:left}
.view.enter .kl-why .bar i,.sheet .kl-why .bar i{animation:grow .7s .35s var(--ease-out) backwards}
.kl-prodi .lbl{font-size:11px}
.kl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);
  font:600 12.5px/1.3 var(--f-body);text-align:left}
button.kl-chip{cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s,transform .15s var(--ease-kuat)}
button.kl-chip:hover{border-color:var(--ink);background:var(--brand-soft)}
button.kl-chip:active{transform:scale(.96)}
button.kl-chip span{font:600 13px/1 var(--f-mono);color:var(--muted)}
button.kl-chip.on{border-color:var(--pill);background:var(--pill);color:var(--pill-fg)}
button.kl-chip.on span{color:inherit}
.kl-next{display:grid;justify-items:start;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.kl-next .lbl{font-size:11px}
.kl-next p{font-size:13.5px;line-height:1.5}
.kl-next .linkbtn{font-size:13px}
.kl-prodi + .kl-note{margin-top:auto}
.kl-note{font:400 10.5px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- form, daftar guru, jadwal ---------- */
.kl-form{display:grid;gap:0 14px}
.kl-form label{margin-top:0}
.kl-form>div{margin-top:4px}
@media (min-width:640px){.kl-form{grid-template-columns:1fr 1fr}}
.kl-filter{display:grid;gap:12px 14px;grid-template-columns:1fr 1fr}
.kl-filter label{margin-top:0}
@media (min-width:760px){.kl-filter{grid-template-columns:1.4fr 1fr 1fr 120px}}
.kl-check{display:flex;gap:10px;align-items:center;margin:0;font-size:14px;font-weight:600;cursor:pointer}
.kl-check input{width:18px;margin:0}
.kl-list{display:grid}
.kl-item{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.kl-item:last-child{border-bottom:0}
.kl-item .grow{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.kl-item > .btn{flex:none;white-space:nowrap}
.kl-item > .badge{min-width:64px;justify-content:center;text-align:center;flex:none}
button.kl-pick{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer;padding:14px 8px;
  transition:background-color .15s var(--ease)}
button.kl-pick:last-child{border-bottom:0}
button.kl-pick:hover{background:var(--brand-soft)}
.kl-pick .kl-chips{margin-top:8px}
.kl-go{flex:none;color:var(--muted);font-size:24px;line-height:1;transition:transform .2s var(--ease-kuat),color .15s}
button.kl-pick:hover .kl-go{transform:translateX(4px);color:var(--ink)}
.kl-sec{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.kl-sec h3{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kl-target{margin:0;padding-left:20px;display:grid;gap:4px}
.kl-jalur{display:grid;gap:8px}
.kl-jalur h3{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kl-cekbar i{width:100%;transform-origin:left}
.view.enter .kl-cekbar i{animation:grow .7s .3s var(--ease-out) backwards}
label.kl-cek{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:var(--r);background:var(--sunken);font-weight:500;cursor:pointer;
  transition:background-color .15s var(--ease)}
label.kl-cek:hover{background:var(--brand-soft)}
.kl-cek input{width:18px;height:18px;margin:2px 0 0;flex:none}
.kl-cek b{display:block;font-weight:700}
.kl-cek small{display:block;margin-top:2px;font:500 11.5px/1.4 var(--f-mono);letter-spacing:.02em}
.kl-cek:has(input:checked) b{text-decoration:line-through;text-decoration-color:var(--api);color:var(--muted)}