:root{--g50:#effaf4;--g100:#d8f1e4;--g200:#b3e3cb;--g600:#146c43;--g700:#0f5a38;--g950:#04251a;--o500:#fd7e14;--o100:#ffe8d1;--o800:#9a410c}
/* Gaya fitur kelas: dialog masuk, papan skor, area guru. Ditulis manual (tanpa build). Warna = token ifp. */
.k-wrap{--g50:#effaf4;--g100:#d8f1e4;--g200:#b3e3cb;--g600:#146c43;--g700:#0f5a38;--g950:#04251a;--o500:#fd7e14;--o100:#ffe8d1;--o800:#9a410c;
  max-width:64rem;margin:0 auto;padding:1.5rem 1rem;color:var(--g950)}
.k-narrow{max-width:28rem}
.k-h1{font-size:2rem;font-weight:900;line-height:1.15}.k-h1 small{font-size:1rem;color:var(--g600)}
.k-sub{font-weight:700;color:var(--g700);margin:.25rem 0 1rem}
.k-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.k-back{display:inline-block;margin-bottom:.5rem;font-weight:800;color:var(--g700);text-decoration:underline}
.k-card{background:#fff;border:2px solid var(--g100);border-radius:1.25rem;padding:1rem 1.2rem;margin:1rem 0}
.k-form,.k-inline{display:flex;flex-direction:column;gap:.8rem}
.k-inline{flex-direction:row;flex-wrap:wrap;align-items:end}
.k-form label,.k-inline label,.k-dlg label{display:flex;flex-direction:column;gap:.25rem;font-weight:800;flex:0 0 auto}
.k-inline label{flex:1 1 10rem}
.k-dlg [hidden],.k-wrap [hidden]{display:none!important}
.k-wrap input,.k-wrap select,.k-dlg input{min-height:3.25rem;padding:0 .9rem;border:2px solid var(--g200);border-radius:.9rem;background:#fff;font:inherit;font-weight:700;color:var(--g950)}
.k-btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:0 1.25rem;border:2px solid var(--g600);border-radius:99px;background:var(--g600);color:#fff;font:inherit;font-size:1rem;font-weight:800;text-decoration:none;cursor:pointer}
.k-btn:active{transform:scale(.97)}
.k-ghost{background:#fff;color:var(--g700);border-color:#82cfab}
.k-danger{background:#fff;color:#b02a30;border-color:#f0b4b7}
.k-sm{min-height:2.5rem;padding:0 .9rem;font-size:.9rem}
.k-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.k-err{padding:.6rem .9rem;border-radius:.9rem;background:#ffe1e1;color:#b02a30;font-weight:800}
.k-note{font-size:.9rem;font-weight:700;color:var(--o800);background:var(--o100);border-radius:.9rem;padding:.5rem .8rem}
.k-kode span{font-weight:800;color:var(--g700)}
.k-code{display:inline-block;font-size:2.2rem;letter-spacing:.2em;font-weight:900;color:var(--g600);font-variant-numeric:tabular-nums}
td .k-code{font-size:1.2rem}
.k-scroll{overflow-x:auto}
.k-table{width:100%;border-collapse:collapse;background:#fff;border-radius:1rem;overflow:hidden}
.k-table th,.k-table td{padding:.6rem .8rem;border-bottom:1px solid var(--g100);text-align:left;white-space:nowrap}
.k-table th{background:var(--g50);color:var(--g700)}

.k-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.k-chip{min-height:3rem;padding:0 1.1rem;border:2px solid var(--g200);border-radius:99px;background:#fff;color:var(--g700);font:inherit;font-weight:800;cursor:pointer}
.k-chip[aria-pressed=true]{background:var(--g600);border-color:var(--g600);color:#fff}
.k-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.k-row{display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;background:#fff;border:2px solid var(--g100);border-radius:1.2rem;font-weight:800;font-size:1.25rem}
.k-row:nth-child(-n+3){border-color:var(--o500);background:#fffaf4}
.k-pos{min-width:2.4rem;text-align:center;font-size:1.6rem}
.k-nama{flex:1 1 auto}
.k-chips{font-size:.9rem;color:var(--g700)}
.k-xp{font-size:1.4rem;color:var(--g600)}

.k-dlg{width:min(28rem,92vw);padding:1.5rem;border:0;border-radius:1.5rem;color:var(--g950);font-family:inherit}
.k-dlg::backdrop{background:#04251acc}
.k-dlg h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:900}
.k-dlg form,.k-dlg .k-pane{display:flex;flex-direction:column;gap:.8rem}
.k-dlg .k-btns{margin:.5rem 0 0}
@media (max-width:40rem){.k-row{flex-wrap:wrap}.k-chips{order:5;flex-basis:100%}}

/* ===== UI umum: transisi, hover halus, fokus (header, footer, semua tombol) ===== */
.k-btn,.k-chip,a.rounded-full,button.rounded-full,button[data-kelas-chip],a[data-lab],.k-row{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
header a[aria-label^="poLABumi"]{transition:transform .18s ease,filter .18s ease}
a[data-lab][aria-disabled=true]{cursor:default}
footer a{text-decoration:none;transition:color .15s ease}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fd7e14;outline-offset:3px}

@media (hover:hover){
  header a[aria-label^="poLABumi"]:hover{transform:translateY(-2px);filter:drop-shadow(0 4px 6px #146c4338)}
  footer a:hover{color:#e8680a}
  a.rounded-full.bg-accent-500:hover,button.rounded-full.bg-accent-500:hover{background-color:#e8680a;transform:translateY(-2px);box-shadow:0 8px 18px #fd7e1459}
  a.rounded-full.bg-brand-600:hover{background-color:#0f5a38;transform:translateY(-2px);box-shadow:0 8px 18px #146c4359}
  a.rounded-full.bg-white:hover,button.rounded-full.bg-white:hover{background-color:#effaf4;border-color:#0f5a38;transform:translateY(-2px);box-shadow:0 8px 18px #146c4338}
  button[data-kelas-chip]:not([aria-pressed=true]):hover{border-color:#4fb585;background-color:#effaf4;transform:translateY(-2px)}
  button[data-kelas-chip][aria-pressed=true]:hover{background-color:#0f5a38;transform:translateY(-2px)}
  #cari:hover{border-color:#4fb585}
  a[data-lab]:not([aria-disabled=true]):hover{transform:translateY(-5px);border-color:#4fb585;box-shadow:0 14px 28px #146c4333}

  .k-btn:hover{background-color:#0f5a38;border-color:#0f5a38;transform:translateY(-2px);box-shadow:0 8px 18px #146c4348}
  .k-ghost:hover{background-color:#effaf4;border-color:#146c43;color:#0f5a38;box-shadow:0 8px 18px #146c4326}
  .k-danger:hover{background-color:#ffe9ea;border-color:#b02a30;color:#8f1d23;box-shadow:0 8px 18px #b02a3026}
  .k-chip:not([aria-pressed=true]):hover{border-color:#4fb585;background-color:#effaf4;transform:translateY(-2px)}
  .k-chip[aria-pressed=true]:hover{background-color:#0f5a38;transform:translateY(-2px)}
  .k-row:hover{border-color:#4fb585;transform:translateX(4px)}
  .k-table tbody tr:hover td{background:#effaf4}
  .k-back:hover{color:#e8680a}
  .k-wrap input:hover,.k-wrap select:hover,.k-dlg input:hover{border-color:#4fb585}
}
/* efek tekan menang atas hover */
.k-btn:active,.k-chip:active,a.rounded-full:active,button.rounded-full:active,button[data-kelas-chip]:active,a[data-lab]:not([aria-disabled=true]):active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){a,button,[data-lab],.k-row{transition:none!important;transform:none!important}}

/* ===== Skala tampilan =====
   Ubah angka --skala untuk memperbesar atau mengecilkan seluruh situs (0.8 = 80%).
   Berlaku untuk layar lebar 768px ke atas (tablet, laptop, IFP). HP tidak diubah supaya tetap terbaca. */
:root{--skala:.8}
@media (min-width:768px){html{font-size:calc(16px * var(--skala))}}
@media (min-width:1600px){html{font-size:calc(22px * var(--skala))}}
@media (min-width:2400px){html{font-size:calc(28px * var(--skala))}}