/*
Theme Name: Carbon Kampus
Theme URI: https://github.com/carbon-kampus/carbon-kampus
Author: Tim Carbon Kampus
Author URI: https://github.com/carbon-kampus
Description: Tema kampus lengkap dengan mesin kuis Carbon Quiz sudah menyatu di dalamnya — tidak perlu memasang plugin terpisah. Tata letaknya memakai rel navigasi kiri yang berubah jadi panel geser di ponsel: arsip kuis, halaman kuis tunggal, papan peringkat, profil, dan dasbor mahasiswa. Mendukung mode gelap, navigasi yang dapat diakses, serta tipografi Inter dan Space Grotesk.
Version: 7.77.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carbon-kampus
Tags: education, custom-menu, featured-images, translation-ready, two-columns, right-sidebar, custom-logo, accessibility-ready

Carbon Kampus, (C) 2026 Tim Carbon Kampus.
Carbon Kampus didistribusikan dengan lisensi GNU GPL v2 atau versi berikutnya.
*/

/* ==========================================================================
   DAFTAR ISI
   --------------------------------------------------------------------------
   01. Token desain (:root) dan mode gelap (.ck-dark)
   02. Reset ringan dan dasar dokumen
   03. Tipografi dasar
   04. Aksesibilitas: fokus, skip link, teks pembaca layar
   05. Tata letak: container, layout, main, sidebar
   06. Kepala situs: header, brand, nav, menu seluler, aksi, toggle tema
   07. Tombol
   08. Lencana dan chip
   09. Kartu dan grid
   10. Kepala halaman, remah roti, entri
   11. Formulir dan pencarian
   12. Blok kuis milik TEMA (bukan .cq-*)
   13. Paginasi dan keadaan kosong
   14. Sidebar widget dan komentar (kelas inti WordPress)
   15. Kelas inti WordPress yang wajib (alignment, caption, sticky)
   16. Kaki situs
   17. Ruang untuk kartu kuis plugin (.cq-quiz) — HANYA jarak, bukan warna
   18. Gerak yang dikurangi
   19. Gaya cetak
   ========================================================================== */


/* ==========================================================================
   01. TOKEN DESAIN
   Nilai disalin PERSIS dari KONTRAK.md. Alasannya: kartu kuis plugin memakai
   skala warna yang sama, sehingga tema dan plugin tidak saling bertabrakan.
   ========================================================================== */

:root {
  /* Merek */
  --ck-primary:      #2f80ed;
  --ck-primary-dark: #1c6ad4;
  --ck-primary-bg:   #eaf2fe;

  /* Tinta */
  --ck-ink:      #1f2933;
  --ck-ink-2:    #3e4c59;
  --ck-muted:    #52606d;
  --ck-faint:    #627d98;

  /* Permukaan & garis */
  --ck-bg:       #f5f7fa;
  --ck-surface:  #ffffff;
  --ck-line:     #e4e7eb;
  --ck-line-2:   #cbd2d9;

  /* Status (sama dengan plugin) */
  --ck-ok:    #2f9e44;
  --ck-bad:   #e03131;
  --ck-warn:  #f0b429;

  /* VARIAN KHUSUS TEKS. Ketiga token di atas dirancang sebagai warna PITA dan
     garis tepi, dan sebagai huruf mereka gagal 4,5:1 di atas latar terang:
     hijau hanya 3,21:1 dan merah 4,21:1 (diukur di atas --ck-bg). Angka
     berwarna di dasbor tetap dituntut memenuhi ambang teks, jadi ia memakai
     pasangan yang lebih gelap ini — bukan versi pitanya. */
  --ck-ok-teks:  #157f3c;
  --ck-bad-teks: #c92a2a;

  /* Latar pita "berhasil", sepasang dengan --ck-ok-teks di atasnya.
     Hijau #e4f5ea yang lebih pekat sempat dipakai di sini dan GAGAL tipis:
     terukur 4,49:1 di peramban — di bawah ambang 4,5:1 untuk teks. Nilai ini
     terukur 4,73:1. Selisihnya memang halus di mata, tapi lencana ini bertulis
     huruf 12px tebal, dan ambang itu berlaku untuknya. */
  --ck-ok-bg: #edfaf1;

  /* Pasangan --ck-bad-teks. Teks #c92a2a di atasnya terukur 4,77:1. */
  --ck-bad-bg: #fdecec;

  /* Pasangan peringatan. Ditambahkan bersama halaman Aturan/Ketentuan Kuis,
     yang memakai kotak amber untuk hal-hal yang paling sering disalahpahami.
     Sebelumnya latarnya ditulis mati sehingga tulisannya hilang di mode gelap. */
  --ck-warn-bg:   #fdf6e3;
  --ck-warn-teks: #7a5600;

  /* Bentuk */
  --ck-radius:    12px;   /* kartu  */
  --ck-radius-sm: 8px;    /* kontrol */
  --ck-shadow:    0 1px 3px rgba(0,0,0,.04);
  --ck-shadow-lg: 0 6px 24px rgba(31,41,51,.08);

  /* Ritme spasi */
  --ck-s1: 4px;  --ck-s2: 8px;  --ck-s3: 12px;
  --ck-s4: 16px; --ck-s5: 24px; --ck-s6: 40px;

  /* Lebar */
  --ck-wide:    1180px;
  --ck-content: 760px;

  /* Tinggi .ck-topbar yang lengket, PLUS sedikit napas. Dipakai bersama oleh
     scroll-padding-top (agar sasaran jangkar tidak mendarat di baliknya),
     .ck-sidebar, dan .ck-dash-samping.

     ADA SEBAGAI TOKEN, BUKAN ANGKA YANG DITULIS BERULANG, karena dua di
     antaranya pernah berselisih: bilah dibuat membungkus dua baris di ponsel
     (131px) sementara scroll-padding masih 96px, dan setiap lompatan jangkar
     mendarat 35px DI BALIK bilah. Nilainya dinaikkan bersama-sama di media
     query yang membuat bilah itu membungkus, tepat di tempat sebabnya. */
  --ck-bilah: 6rem;
}

/* --------------------------------------------------------------------------
   Mode gelap. Kelas `ck-dark` dipasang JS pada <html>; tanpa JS situs tetap
   terang dan terbaca. Nilai di bawah bukan sekadar pembalikan: setiap warna
   tinta dan merek dinaikkan luminansinya sampai kontrasnya terhadap
   --ck-bg (#141a21) dan --ck-surface (#1c242e) tetap >= 4.5:1.
   -------------------------------------------------------------------------- */

.ck-dark {
  /* Merek dicerahkan. #7fb4f7 = 8,1:1 terhadap latar; 7,3:1 terhadap permukaan.
     --ck-primary-dark sengaja TIDAK lebih gelap di mode gelap: token ini dipakai
     sebagai latar tombol utama, dan tombol gelap di halaman gelap tidak terbaca.
     #5b9df2 memberi 6,3:1 terhadap teks tombol yang dibalik menjadi --ck-bg. */
  --ck-primary:      #7fb4f7;
  --ck-primary-dark: #5b9df2;
  --ck-primary-bg:   #1b2b40;

  /* Tinta terang. --ck-faint tetap yang paling redup, tapi masih 6,0:1
     terhadap latar sehingga aman dipakai untuk pemisah dan ikon. */
  --ck-ink:      #e8edf3;
  --ck-ink-2:    #cdd7e2;
  --ck-muted:    #a7b4c2;
  --ck-faint:    #8b9aab;

  /* Permukaan & garis. Garis dibuat lebih redup daripada mode terang karena
     kontras garis terang di latar gelap terlihat berisik. */
  --ck-bg:       #141a21;
  --ck-surface:  #1c242e;
  --ck-line:     #2b3542;
  --ck-line-2:   #3b4756;

  /* Status dicerahkan supaya tetap terbaca sebagai TEKS, bukan hanya sebagai
     latar. Nilai gelap bawaan (#2f9e44 dsb.) jatuh di bawah 4.5:1 di sini. */
  --ck-ok:    #51cf66;
  --ck-bad:   #ff8787;
  --ck-warn:  #ffd43b;

  /* Di mode gelap warna status SUDAH cerah, jadi versi teksnya sama persis —
     memberi warna lain di sini justru akan membuat dua hijau berbeda dalam
     satu layar tanpa alasan. */
  --ck-ok-teks:  #51cf66;
  --ck-bad-teks: #ff8787;

  /* Hijau tua pekat, bukan versi muda: lencananya berdiri di atas permukaan
     kartu gelap, dan latar terang di sana akan menyilaukan. */
  --ck-ok-bg: #16321f;

  /* Merah tua pekat, sepasang dengan --ck-bad-teks: terukur 6,70:1. */
  --ck-bad-bg: #3a1b1b;

  /* Peringatan di mode gelap: latar hangat yang teredam, teks amber cerah. */
  --ck-warn-bg:   #33290f;
  --ck-warn-teks: #f0c44a;

  /* Bayangan halus tidak terlihat di latar gelap; dipertegas dengan hitam. */
  --ck-shadow:    0 1px 3px rgba(0,0,0,.5);
  --ck-shadow-lg: 0 8px 28px rgba(0,0,0,.45);

  /* Memberi tahu peramban agar kontrol bawaan (scrollbar, pemilih tanggal)
     ikut gelap; tanpa ini kontrol form menyala putih. */
  color-scheme: dark;
}


/* ==========================================================================
   02. RESET RINGAN DAN DASAR DOKUMEN
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Dipasang di wadah gulirnya, bukan per-id, sehingga SEMUA sasaran jangkar
     ikut terlindungi sekaligus — #ck-content, #ck-data-diri, #ck-ganti-sandi,
     dan id sasaran apa pun yang ditambahkan kelak. Tanpa ini jangkar mendarat
     persis di balik bilah atas: judul bagian yang dituju tak terlihat.

     Tidak mengganggu plugin kuis: quiz/assets/css/frontend.css memasang
     `html:has(.cq-quiz) { scroll-padding-top: 56px }` yang spesifisitasnya
     lebih tinggi, jadi halaman ujian tetap memakai nilainya sendiri. */
  scroll-padding-top: var(--ck-bilah);
}

/* Guliran halus DIMATIKAN selama ada kolom teks yang sedang difokus.
   Alasannya ponsel: begitu papan ketik terbuka, peramban terus-menerus
   menggeser halaman sedikit demi sedikit agar caret tetap terlihat di atas
   papan ketik. Dengan scroll-behavior: smooth setiap geseran kecil itu
   dianimasikan, dan karena ketukan berikutnya datang sebelum animasi
   sebelumnya selesai, halamannya hanyut terus selama orang mengetik. Di
   desktop nyaris tak terasa karena tidak ada papan ketik yang memakan
   separuh layar.
   :has() tidak dikenali peramban lawas; di sana aturan ini diabaikan dan
   perilaku lama tetap berlaku. Plugin kuis TIDAK bergantung pada aturan ini
   — ia mematikan scroll-behavior lewat JavaScript untuk kolom jawabannya
   sendiri, karena jalur ujian tidak boleh bergantung pada dukungan :has(). */
html:has(textarea:focus),
html:has(input[type="text"]:focus),
html:has(input[type="search"]:focus),
html:has(input[type="email"]:focus),
html:has(input[type="number"]:focus),
html:has(input[type="password"]:focus) {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background-color: var(--ck-bg);
  color: var(--ck-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kaki situs harus menempel bawah walau isi halaman pendek (404, hasil
     pencarian kosong). Body dibuat kolom fleks, .ck-main yang memanjang. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Gambar sematan (oEmbed) kerap punya lebar tetap dari penyedia. */
iframe,
embed,
object {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--ck-line);
  margin: var(--ck-s6) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}


/* ==========================================================================
   03. TIPOGRAFI DASAR
   Space Grotesk hanya untuk h1-h4. h5/h6 tetap Inter agar judul kecil tidak
   ikut tampil "display" dan mengacaukan hierarki.
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ck-ink);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 var(--ck-s3);
  text-wrap: balance;
}

h5, h6 {
  font-family: inherit;
  color: var(--ck-ink);
  line-height: 1.35;
  margin: 0 0 var(--ck-s2);
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);  font-weight: 700; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.85vw, 1.875rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);   font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem;     font-weight: 600; }
h6 { font-size: .875rem;  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ck-muted); }

p {
  margin: 0 0 var(--ck-s4);
}

a {
  /* --ck-primary-dark, BUKAN --ck-primary. #2f80ed di atas permukaan putih
     hanya 3,87:1 — di bawah ambang 4,5:1 WCAG AA untuk teks. Karena aturan ini
     mewarnai SETIAP tautan teks di tema, satu token yang keliru di sini membuat
     seluruh tautan situs gagal syarat kontras sekaligus. #1c6ad4 memberi
     5,17:1 dan tetap terbaca sebagai warna merek yang sama.
     Di mode gelap --ck-primary-dark sudah dicerahkan menjadi #5b9df2 (lihat
     blok .ck-dark), jadi token ini benar di kedua mode. */
  color: var(--ck-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus {
  color: var(--ck-primary-dark);
  text-decoration-thickness: 2px;
}

strong, b { font-weight: 700; }
em, i     { font-style: italic; }

small {
  font-size: .875rem;
}

ul, ol {
  margin: 0 0 var(--ck-s4);
  padding-left: 1.4em;
}

li + li {
  margin-top: var(--ck-s1);
}

blockquote {
  margin: 0 0 var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s5);
  border-left: 4px solid var(--ck-primary);
  background: var(--ck-primary-bg);
  border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
  color: var(--ck-ink-2);
}

blockquote > :last-child { margin-bottom: 0; }

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: .9em;
}

code {
  background: var(--ck-primary-bg);
  color: var(--ck-ink);
  padding: .1em .35em;
  border-radius: var(--ck-radius-sm);
}

pre {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  padding: var(--ck-s4);
  overflow-x: auto;
  margin: 0 0 var(--ck-s4);
}

pre code {
  background: none;
  padding: 0;
}

/* Elemen yang dipilih pengguna tetap terbaca di kedua mode. */
::selection {
  background: var(--ck-primary);
  color: #ffffff;
}

.ck-dark ::selection {
  background: var(--ck-primary);
  color: var(--ck-bg);
}


/* ==========================================================================
   04. AKSESIBILITAS
   ========================================================================== */

/* Cincin fokus tunggal untuk semua kontrol. Dipisahkan dari :hover supaya
   pengguna papan ketik selalu melihat posisi fokusnya. Sengaja TIDAK menyetel
   border-radius: outline modern sudah mengikuti lengkung elemen, dan
   memaksakannya di sini akan merusak bentuk avatar bulat saat difokuskan. */
:focus-visible {
  outline: 3px solid var(--ck-primary);
  outline-offset: 3px;
}

/* Peramban lama tanpa :focus-visible tetap mendapat outline lewat :focus.
   `outline: none` di bawah hanya berlaku bila :focus-visible DIDUKUNG, jadi
   penggantinya selalu ada — bukan penghapusan fokus. */
:focus {
  outline: 3px solid var(--ck-primary);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Tautan lewati navigasi. Disembunyikan sampai difokuskan papan ketik.
   `fixed`, bukan `absolute`: dengan absolute tautan bisa muncul di luar layar
   ketika halaman sudah tergulir dan pengguna menekan Tab. */
.ck-skip-link {
  position: fixed;
  top: -100px;
  left: var(--ck-s4);
  z-index: 1000;
  display: inline-block;
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-surface);
  color: var(--ck-primary-dark);
  border: 2px solid var(--ck-primary);
  border-radius: var(--ck-radius-sm);
  box-shadow: var(--ck-shadow-lg);
  font-weight: 600;
  text-decoration: none;
}

.ck-skip-link:focus,
.ck-skip-link:focus-visible {
  top: var(--ck-s3);
}

/* Teks khusus pembaca layar. `.screen-reader-text` ikut disertakan karena
   markup bawaan WordPress (balas komentar, paginasi) memakainya. */
.ck-screen-reader-text,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ck-screen-reader-text:focus,
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Sasaran lompatan skip link. Perlindungan pokoknya kini `scroll-padding-top`
   pada `html` (berlaku untuk SEMUA jangkar); baris ini tinggal sebagai jaring
   pengaman untuk peramban tanpa dukungan scroll-padding. --ck-s6 (40px) lebih
   kecil dari bilah atas, jadi nilainya disamakan ke token yang sama. */
#ck-content {
  scroll-margin-top: var(--ck-bilah);
}


/* ==========================================================================
   05. TATA LETAK
   .ck-container   = kolom baca (760px) untuk artikel dan halaman tunggal.
   .ck-container--wide = kulit lebar (1180px) untuk kepala, kaki, arsip, grid.
   Keduanya aditif: tulis class="ck-container ck-container--wide".
   ========================================================================== */

.ck-container {
  width: 100%;
  max-width: var(--ck-content);
  margin-inline: auto;
  padding-inline: var(--ck-s4);
}

.ck-container--wide {
  max-width: var(--ck-wide);
}

@media (min-width: 600px) {
  .ck-container {
    padding-inline: var(--ck-s5);
  }
}

/* Pembungkus isi halaman. flex:1 menahan kaki situs tetap di bawah. */
.ck-main {
  flex: 1 0 auto;
  display: block;
  width: 100%;
  padding-block: var(--ck-s5) var(--ck-s6);
  min-width: 0;
}

.ck-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-s6);
  align-items: start;
}

/* TITIK PUTUS 76rem, BUKAN 900px. Alasannya sama persis dengan .ck-dash dan
   .ck-profilv-duo: di 62rem rel navigasi berhenti jadi panel geser lalu memakan
   16rem, sehingga kolom BACA justru menyusut saat layar melebar. Terukur, bagi
   pengguna yang sudah masuk dan punya widget terpasang:

     991px  (tanpa rel) : 943 - 300 - 40 = 603px
     992px  (dengan rel): 688 - 300 - 40 = 348px

   Menambah lebar jendela satu piksel memotong kolom baca 42%, dan 348px itu
   lebih sempit daripada kolom baca satu-kolom di ponsel 390px. Rentang
   992-1088px justru kelas layar yang paling umum di laptop kampus. Pada 76rem
   kolom bacanya 572px dan tidak pernah menyusut lagi.

   Di bawah ambang ini sidebar jatuh ke bawah isi, bukan disembunyikan — widget
   arsip kuis tetap terjangkau di ponsel maupun tablet.

   minmax(0, 300px), bukan 300px tetap: kalau ruangnya kelak kurang, yang
   menyusut kolom widget, bukan kolom baca. */
@media (min-width: 76rem) {
  .ck-layout--sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }
}

.ck-sidebar {
  min-width: 0;
}

/* Ambang SAMA dengan .ck-layout--sidebar di atas — keduanya sepasang, dan
   memisahkannya berarti .ck-sidebar lengket di rentang yang kisinya masih satu
   kolom. */
@media (min-width: 76rem) {
  .ck-sidebar {
    position: sticky;
    /* Token yang sama dengan scroll-padding-top dan .ck-dash-samping. Dengan
       --ck-s5 (24px) judul widget pertama berhenti 45px DI DALAM wilayah
       bilah atas dan tertutup olehnya. */
    top: var(--ck-bilah);
  }
}


/* ==========================================================================
   06. KEPALA SITUS
   ========================================================================== */

.ck-header {
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-line);
  position: relative;
  z-index: 20;
}

.ck-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s3);
  padding-block: var(--ck-s3);
  /* Kontrak lebar yang SAMA dengan .ck-container--wide. Tanpa tiga baris ini
     kepala situs tidak punya jarak tepi sama sekali: nama situs menempel sisi
     kiri layar dan tombol menempel sisi kanan, sementara seluruh isi halaman
     di bawahnya rapi menjorok. Kaki situs sudah memakai .ck-container, jadi
     header adalah satu-satunya bagian yang keluar dari grid halaman. */
  width: 100%;
  max-width: var(--ck-wide);
  margin-inline: auto;
  padding-inline: var(--ck-s4);
}

/* Merek */
.ck-brand {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  margin-right: auto;
  text-decoration: none;
  color: var(--ck-ink);
  min-width: 0;
}

.ck-brand:hover,
.ck-brand:focus {
  color: var(--ck-primary-dark);
}

.ck-brand-logo {
  display: block;
  width: auto;
  max-height: 44px;
  flex: 0 0 auto;
}

.ck-brand-logo img {
  display: block;
  width: auto;
  max-height: 44px;
}

/* NAMA SITUS + TAGLINE.
   Sebelumnya blok ini hanya menata pembungkusnya, dan <span> deskripsi di
   header.php tidak punya aturan sama sekali. Akibatnya keduanya inline dengan
   ukuran dan bobot yang sama persis, tanpa spasi di antaranya: yang terbaca di
   layar adalah satu kata sambung "Carbon KampusPoliteknik Negeri Ambon".
   Ditumpuk dua baris dengan hierarki yang jelas — dan itu sekaligus memangkas
   lebar merek dari 346px menjadi selebar barisnya yang terpanjang, ruang yang
   memang dibutuhkan bilah ini pada lebar tanggung 782-900px. */
.ck-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  line-height: 1.2;
}

.ck-brand-text > a {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ck-ink);
  text-decoration: none;
  /* Nama panjang dipotong, bukan dibungkus: merek yang membungkus akan
     menaikkan tinggi seluruh bilah dan menggeser semua tombol di kanannya. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-brand-text > a:hover,
.ck-brand-text > a:focus {
  color: var(--ck-primary-dark);
}

.ck-brand-text > span {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ck-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Di bawah 782px bilah sudah berisi tombol hamburger dan kluster akun; tagline
   adalah satu-satunya isi yang murni hiasan, jadi ia yang pertama dilepas. */
@media (max-width: 781px) {
  .ck-brand-text > span {
    display: none;
  }
}

/* Navigasi */
.ck-nav {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
}

.ck-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s1);
}

.ck-menu li {
  margin: 0;
  position: relative;
}

.ck-menu a {
  display: flex;
  align-items: center;
  /* 44px DIPAKSA. Dengan padding 8px dan baris teks 26px, tingginya berhenti di
     42px. Itu terlewat karena di ponsel menu ini tersembunyi di balik tombol —
     tetapi pada 1024px (tablet mendatar) tombolnya justru disembunyikan dan
     menu mendatar inilah satu-satunya navigasi, di perangkat yang disentuh. */
  min-height: 44px;
  padding: var(--ck-s2) var(--ck-s3);
  border-radius: var(--ck-radius-sm);
  color: var(--ck-ink-2);
  font-weight: 500;
  text-decoration: none;
}

.ck-menu a:hover,
.ck-menu a:focus {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

/* Halaman aktif ditandai warna DAN garis bawah — warna saja tidak cukup. */
.ck-menu .current-menu-item > a,
.ck-menu .current_page_item > a,
.ck-menu .current-menu-ancestor > a,
.ck-menu .current-menu-parent > a {
  color: var(--ck-primary-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--ck-primary);
}

/* Submenu sederhana. Muncul saat tetikus DAN saat fokus papan ketik masuk. */
.ck-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--ck-s2);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow-lg);
  z-index: 30;
}

.ck-menu li:hover > .sub-menu,
.ck-menu li:focus-within > .sub-menu {
  display: block;
}

/* Tombol menu seluler.
   Aturan tampil/sembunyi HANYA bergantung pada aria-expanded, sehingga JS
   cukup membalik atribut itu — tidak ada kelas tambahan yang perlu dijaga
   agar tetap sinkron dengan status yang dibacakan pembaca layar. */
.ck-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-s2);
  /* 44px DIPAKSA, bukan hasil kebetulan dari padding. Dengan padding 8px dan
     ikon 24px, tingginya berhenti di 42px — dua piksel di bawah ambang sasaran
     sentuh, pada satu-satunya kendali navigasi yang tersedia di ponsel. */
  min-width: 44px;
  min-height: 44px;
  padding: var(--ck-s2) var(--ck-s3);
  background: var(--ck-surface);
  color: var(--ck-ink);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

.ck-nav-toggle:hover {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border-color: var(--ck-primary);
}

.ck-nav-toggle[aria-expanded="true"] {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border-color: var(--ck-primary);
}

/* Ikon garis tiga digambar dari CSS supaya tidak butuh berkas gambar. */
.ck-nav-toggle::before {
  content: "";
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

/* --- Di bawah 782px: menu runtuh menjadi panel dropdown ---
   Menu dilepas dari alur dokumen (position: absolute terhadap .ck-header yang
   sudah position: relative) supaya tinggi kepala situs tidak berubah saat menu
   dibuka; isi halaman tidak melompat ke bawah. */
@media (max-width: 781px) {
  .ck-header-inner {
    row-gap: var(--ck-s2);
  }

  /* DIHAPUS: blok .ck-nav (panel dropdown menu seluler kepala LAMA).

     Elemen <nav class="ck-nav"> sudah tidak pernah dicetak sejak navigasi
     pindah ke rel kiri: header.php kini hanya mencetak .ck-nav-toggle (tombol,
     kelas BERBEDA) yang membuka .ck-rel. Aturan ini karena itu tidak pernah
     cocok dengan satu elemen pun.

     .ck-menu di bawah SENGAJA DIPERTAHANKAN: footer.php masih memakainya untuk
     menu kaki (wp_nav_menu dengan 'menu_class' => 'ck-menu'), dan aturan kolom
     di layar sempit ini tetap benar untuk menu itu. */
  .ck-menu {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--ck-s4);
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  /* DIHAPUS: dua aturan "menu terbuka" milik kepala LAMA —
     `.ck-nav-toggle[aria-expanded="true"] ~ .ck-nav` dan
     `.ck-header-inner:has(.ck-nav-toggle[aria-expanded="true"]) .ck-nav`.

     Keduanya menyalakan panel <nav class="ck-nav">, dan elemen itu — begitu
     pula pembungkusnya .ck-header-inner — sudah tidak pernah dicetak tema ini.
     Menu seluler sekarang adalah rel kiri .ck-rel, dan yang menyalakannya
     adalah aturan di bagian 30 (`.ck-shell:has(.ck-nav-toggle[aria-expanded=
     "true"]) .ck-rel`), bukan aturan di sini. Dua aturan ini mustahil cocok. */
  .ck-menu li + li {
    margin-top: 0;
    border-top: 1px solid var(--ck-line);
  }

  .ck-menu a {
    border-radius: 0;
    padding: var(--ck-s3) var(--ck-s2);
  }

  .ck-menu .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 var(--ck-s4);
    background: none;
  }

  .ck-menu .sub-menu a {
    color: var(--ck-muted);
  }

  /* Pencarian di kaki panel, dipisah garis supaya tidak terbaca sebagai butir
     menu yang lain. */
  .ck-nav-cari {
    padding: var(--ck-s3) var(--ck-s4) var(--ck-s4);
    border-top: 1px solid var(--ck-line);
    margin-top: var(--ck-s2);
  }
}

/* --- 782px ke atas: menu mendatar, tombol disembunyikan --- */
@media (min-width: 782px) {
  .ck-nav-toggle {
    display: none;
  }

  .ck-menu {
    display: flex;
  }
}

/* PENCARIAN DI DALAM NAVIGASI.
   Ditaruh di dalam <nav>, bukan di .ck-actions, supaya di layar sempit ia ikut
   masuk ke panel menu yang terbuka tanpa satu pun aturan tambahan. Di layar
   lebar ia berdiri di ujung navigasi. */
.ck-nav-cari {
  display: flex;
  min-width: 0;
}

.ck-nav-cari .search-form {
  margin: 0;
}

@media (min-width: 782px) {
  /* Kompak di layar lebar: kepala situs hanya setinggi satu baris, dan kolom
     pencarian selebar kolom normal akan mendorong akun keluar baris. Melebar
     saat difokus supaya kata kunci panjang tetap terbaca saat diketik. */
  /* Selebar teks petunjuknya. Sebelumnya 9rem mati, dan placeholder
     "Cari kuis atau materi…" terpotong jadi "Cari kuis atau" — kolom pencarian
     yang kalimat ajakannya sendiri tidak muat terbaca seperti tata letak rusak.
     clamp() dipakai supaya ia menyusut sendiri di layar 782-1100px, tempat
     kepala situs paling sesak, tanpa media query tambahan. */
  /* 17rem, bukan 15,5rem. Diukur di 1280px: placeholder "Cari kuis atau
     materi…" selebar 162px, sedangkan 15,5rem hanya menyisakan 166px ruang
     teks. Empat piksel sisa bukan "muat" — satu perbedaan render font, satu
     terjemahan yang lebih panjang, atau satu pengguna yang memperbesar teks
     sudah cukup memotongnya lagi. */
  .ck-nav-cari .search-field {
    /* Batas BAWAH 13,5rem, bukan 11rem: pada 900-1100px nilai vw-nya sendiri
       masih menyisakan ruang teks di bawah 162px, dan di situlah placeholder
       terpotong lagi. Diukur di 900px: 13,5rem menyisakan 164px — pas muat,
       dan kepala situs tetap satu baris. */
    width: clamp(13.5rem, 21vw, 17rem);
    transition: width .15s ease;
  }

  .ck-nav-cari .search-field:focus {
    width: 19rem;
  }
}

/* Aksi kanan kepala (pencarian, masuk, toggle tema) */
.ck-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ck-s2);
}

/* Toggle tema. Keadaan dibaca dari aria-pressed, bukan kelas, supaya tombol
   dan pengumuman pembaca layar tidak mungkin berbeda. */
.ck-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-s2);
  /* 44px, sama dengan .ck-nav-toggle di sebelahnya. Sebelumnya 40px: lolos
     ambang minimum AA (24x24, SC 2.5.8) tetapi gagal 2.5.5, dan berdiri
     bersebelahan dengan tombol menu yang 44px sehingga dua kendali sentuh yang
     berdampingan punya ukuran berbeda tanpa alasan. */
  min-width: 44px;
  min-height: 44px;
  padding: var(--ck-s2) var(--ck-s3);
  background: var(--ck-surface);
  color: var(--ck-ink-2);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.ck-theme-toggle:hover {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border-color: var(--ck-primary);
}

.ck-theme-toggle[aria-pressed="true"] {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border-color: var(--ck-primary);
}


/* ==========================================================================
   07. TOMBOL
   .ck-btn--primary memakai --ck-primary-dark, bukan --ck-primary: teks putih
   di atas #2f80ed hanya 3,9:1, sedangkan di atas #1c6ad4 mencapai 5,2:1.
   ========================================================================== */

.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-s2);
  padding: var(--ck-s3) var(--ck-s5);
  min-height: 44px;              /* sasaran sentuh nyaman di ponsel */
  background: var(--ck-surface);
  color: var(--ck-ink);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
    border-color .15s ease, filter .15s ease;
}

.ck-btn:hover {
  border-color: var(--ck-primary);
  color: var(--ck-primary-dark);
  text-decoration: none;
}

.ck-btn[disabled],
.ck-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.ck-btn--primary {
  background: var(--ck-primary-dark);
  border-color: var(--ck-primary-dark);
  color: #ffffff;
}

/* Hover MENGGELAPKAN, bukan mencerahkan: menaikkan kontras terhadap teks
   putih alih-alih menurunkannya. */
.ck-btn--primary:hover,
.ck-btn--primary:focus {
  background: var(--ck-primary-dark);
  border-color: var(--ck-primary-dark);
  color: #ffffff;
  filter: brightness(.92);
}

/* Di mode gelap latar tombol terang, jadi tulisannya dibalik ke warna latar
   halaman (#141a21) — 6,3:1. Teks putih di sini hanya 2,4:1. */
.ck-dark .ck-btn--primary,
.ck-dark .ck-btn--primary:hover,
.ck-dark .ck-btn--primary:focus {
  color: var(--ck-bg);
}

.ck-dark .ck-btn--primary:hover,
.ck-dark .ck-btn--primary:focus {
  filter: brightness(1.1);
}

.ck-btn--ghost {
  background: transparent;
  border-color: var(--ck-line-2);
  color: var(--ck-ink-2);
}

.ck-btn--ghost:hover,
.ck-btn--ghost:focus {
  background: var(--ck-primary-bg);
  border-color: var(--ck-primary);
  color: var(--ck-primary-dark);
}


/* ==========================================================================
   08. LENCANA DAN CHIP
   .ck-badge  = label statis (jumlah soal, status)
   .ck-chip   = tautan taksonomi yang bisa diklik
   ========================================================================== */

.ck-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-s1);
  padding: 2px var(--ck-s2);
  background: var(--ck-bg);
  color: var(--ck-muted);
  border: 1px solid var(--ck-line);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
}

.ck-badge--cat {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border-color: transparent;
}

.ck-dark .ck-badge--cat {
  /* Di mode gelap --ck-primary-dark adalah warna LATAR tombol, terlalu pekat
     untuk teks di atas --ck-primary-bg. Pakai varian terang. */
  color: var(--ck-primary);
}

.ck-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--ck-s1) var(--ck-s3);
  background: var(--ck-surface);
  color: var(--ck-ink-2);
  border: 1px solid var(--ck-line-2);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}

.ck-chip:hover,
.ck-chip:focus {
  background: var(--ck-primary-bg);
  border-color: var(--ck-primary);
  color: var(--ck-primary-dark);
  text-decoration: none;
}

.ck-dark .ck-chip:hover,
.ck-dark .ck-chip:focus {
  color: var(--ck-primary);
}


/* ==========================================================================
   09. KARTU DAN GRID
   ========================================================================== */

.ck-card {
  display: flex;
  flex-direction: column;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  overflow: hidden;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease,
    transform .15s ease;
}

.ck-card:hover,
.ck-card:focus-within {
  border-color: var(--ck-line-2);
  box-shadow: var(--ck-shadow-lg);
  transform: translateY(-2px);
}

/* Media kartu memakai rasio tetap agar baris grid rata walau ukuran
   thumbnail kuis berbeda-beda. */
.ck-card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ck-primary-bg);
  border-bottom: 1px solid var(--ck-line);
  overflow: hidden;
}

.ck-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kuis tanpa thumbnail: kotak media tetap ada supaya tinggi kartu konsisten. */
.ck-card-media:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(47,128,237,.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(47,128,237,.12), transparent 50%);
}

.ck-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--ck-s2);
  padding: var(--ck-s4);
  flex: 1 1 auto;
}

.ck-card-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ck-ink);
}

.ck-card-title a {
  color: inherit;
  text-decoration: none;
}

/* --- KOTAK YANG DICIUTKAN ---
   Dipakai kotak "Data diri" begitu NIM dan Kelas terisi: formulir yang hanya
   perlu dilihat sekali tidak lagi mendorong riwayat nilai dan papan peringkat
   ke bawah lipatan, tetapi tetap dapat dibuka bila ada yang perlu dibetulkan.
   <details> HTML bawaan, jadi tidak ada JavaScript yang perlu dijaga. */
.ck-ciut > summary {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  /* Segitiga bawaan dibuang dan diganti tanda sendiri di ::after, supaya
     bentuknya sama di semua peramban. list-style ditulis DUA KALI: WebKit
     hanya mengenal pseudo-elemen -webkit-details-marker. */
  list-style: none;
  cursor: pointer;
  /* Sasaran sentuh 44px tanpa menambah tinggi terlihat. */
  min-height: 44px;
  padding-block: var(--ck-s1);
}

.ck-ciut > summary::-webkit-details-marker { display: none; }

.ck-ciut > summary:focus-visible {
  outline: 3px solid var(--ck-primary);
  outline-offset: 3px;
  border-radius: var(--ck-radius);
}

/* Status ditulis sebagai KATA, bukan hanya centang berwarna: WCAG 1.4.1
   melarang warna jadi satu-satunya pembawa makna. --ck-ok-teks, bukan
   --ck-ok — yang terakhir dirancang untuk latar, bukan untuk teks kecil. */
.ck-ciut-status {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ck-ok-teks);
  white-space: nowrap;
}

.ck-ciut-status::before {
  content: "\2713\00a0";
  font-weight: 700;
}

/* Didorong ke kanan dan diberi rupa tautan supaya terbaca sebagai "ini bisa
   diklik". Bukan <button>: seluruh <summary> memang sudah tombolnya, dan
   menaruh tombol di dalam summary membuat dua sasaran klik bersarang. */
.ck-ciut-aksi {
  margin-inline-start: auto;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ck-primary-dark);
  white-space: nowrap;
}

.ck-ciut-aksi::after {
  content: "\00a0\25be";
}

.ck-ciut[open] > summary .ck-ciut-aksi::after {
  content: "\00a0\25b4";
}

.ck-ciut-isi {
  margin-top: var(--ck-s4);
  padding-top: var(--ck-s4);
  border-top: 1px solid var(--ck-line);
}

/* Ruang antara judul dan status saat layar sempit: statusnya turun ke baris
   berikutnya alih-alih memeras judul jadi satu huruf per baris. */
@media (max-width: 480px) {
  .ck-ciut > summary { flex-wrap: wrap; }
  .ck-ciut-aksi { margin-inline-start: 0; }
}

.ck-card-title a:hover,
.ck-card-title a:focus {
  color: var(--ck-primary-dark);
  text-decoration: underline;
}

.ck-dark .ck-card-title a:hover,
.ck-dark .ck-card-title a:focus {
  color: var(--ck-primary);
}

/* Meta kartu: jumlah soal, kategori, tanggal. Dibuat flex agar lencana dan
   teks bisa dicampur tanpa markup tambahan. */
.ck-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s2);
  margin-top: auto;          /* meta selalu menempel dasar kartu */
  padding-top: var(--ck-s2);
  color: var(--ck-muted);
  font-size: .8125rem;
  line-height: 1.5;
}

.ck-card-meta a {
  color: var(--ck-muted);
  text-decoration: none;
}

.ck-card-meta a:hover,
.ck-card-meta a:focus {
  color: var(--ck-primary-dark);
  text-decoration: underline;
}

.ck-dark .ck-card-meta a:hover,
.ck-dark .ck-card-meta a:focus {
  color: var(--ck-primary);
}

/* Grid. Bawaan satu kolom; modifier menaikkan jumlahnya bertahap. */
.ck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-grid > li {
  margin-top: 0;
}

/*
   KISI KARTU — jumlah kolom mengikuti RUANG, bukan lebar layar.

   Dulu kisi ini menghitung kolom lewat titik putus lebar layar: dua kolom di
   600px, tiga di 900px, dengan satu aturan tambahan untuk tata letak bersidebar.
   Cara itu patah begitu rel navigasi kiri dipasang (Tahap 1): rel memakan 16rem
   mulai 62rem, sehingga pada layar 992px kisinya tetap menuruti aturan "900px ke
   atas = tiga kolom" padahal ruang yang tersisa cuma ~736px — tiga kartu selebar
   229px berdempetan di layar yang sebenarnya lebar.

   auto-fill mengukur wadahnya sendiri, jadi ia benar dengan rel maupun tanpa
   rel, di dalam tata letak bersidebar maupun tidak, tanpa satu pun aturan
   tambahan. Tangganya jadi: 1 kolom di ponsel, 2 di tablet, 3 di laptop 1280,
   4 di layar 1440 ke atas.

   auto-fill, BUKAN auto-fit. auto-fit meruntuhkan jalur kosong, sehingga arsip
   yang hanya berisi SATU kuis akan merentangkan kartu tunggal itu selebar
   1132px — kartu sepanjang layar berisi judul tiga kata terlihat seperti
   halaman rusak. Dengan auto-fill kartunya tetap selebar satu jalur.
*/
.ck-grid--kartu {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}


/* ==========================================================================
   10. KEPALA HALAMAN, REMAH ROTI, ENTRI
   ========================================================================== */

.ck-page-head {
  margin-bottom: var(--ck-s6);
  padding-bottom: var(--ck-s4);
  border-bottom: 1px solid var(--ck-line);
}

.ck-page-title {
  margin: 0 0 var(--ck-s2);
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  font-weight: 700;
}

.ck-page-sub {
  margin: 0;
  max-width: var(--ck-content);
  color: var(--ck-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ck-page-sub > :last-child { margin-bottom: 0; }

.ck-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s2);
  margin: 0 0 var(--ck-s3);
  padding: 0;
  list-style: none;
  color: var(--ck-muted);
  font-size: .8125rem;
}

.ck-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
  margin-top: 0;
}

/* Pemisah dibuat lewat ::before agar tidak ada teks palsu di pohon
   aksesibilitas yang ikut dibacakan pembaca layar. */
.ck-breadcrumb li + li::before {
  content: "/";
  color: var(--ck-faint);
  speak: never;
}

.ck-breadcrumb a {
  /* Tinggi barisnya sendiri hanya 21px — di bawah ambang minimum 24x24 WCAG
     2.5.8, padahal ini kendali navigasi, bukan tautan di tengah kalimat.
     Padding tegak menaikkannya tanpa memaksa 44px penuh, yang akan meregangkan
     jejak remah roti sampai setinggi bilah tersendiri. Tujuan yang sama tetap
     tersedia lewat menu utama yang sasarannya sudah 44px. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 2px;
  color: var(--ck-muted);
  text-decoration: none;
}

.ck-breadcrumb a:hover,
.ck-breadcrumb a:focus {
  color: var(--ck-primary-dark);
  text-decoration: underline;
}

.ck-dark .ck-breadcrumb a:hover,
.ck-dark .ck-breadcrumb a:focus {
  color: var(--ck-primary);
}

.ck-breadcrumb [aria-current="page"] {
  color: var(--ck-ink-2);
  font-weight: 600;
}

/* Entri (artikel, halaman, kuis) */
.ck-entry {
  margin: 0 0 var(--ck-s6);
}

.ck-entry:last-child {
  margin-bottom: 0;
}

.ck-entry-title {
  margin: 0 0 var(--ck-s2);
}

.ck-entry-title a {
  color: inherit;
  text-decoration: none;
}

.ck-entry-title a:hover,
.ck-entry-title a:focus {
  color: var(--ck-primary-dark);
  text-decoration: underline;
}

.ck-dark .ck-entry-title a:hover,
.ck-dark .ck-entry-title a:focus {
  color: var(--ck-primary);
}

.ck-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s2) var(--ck-s3);
  margin: 0 0 var(--ck-s4);
  color: var(--ck-muted);
  font-size: .875rem;
}

.ck-entry-meta a {
  color: var(--ck-muted);
}

.ck-entry-meta a:hover,
.ck-entry-meta a:focus {
  color: var(--ck-primary-dark);
}

.ck-dark .ck-entry-meta a:hover,
.ck-dark .ck-entry-meta a:focus {
  color: var(--ck-primary);
}

.ck-entry-content {
  color: var(--ck-ink-2);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.ck-entry-content > :last-child {
  margin-bottom: 0;
}

.ck-entry-content h2 { margin-top: var(--ck-s6); }
.ck-entry-content h3 { margin-top: var(--ck-s5); }
.ck-entry-content h4 { margin-top: var(--ck-s5); }

.ck-entry-content img,
.ck-entry-content figure {
  border-radius: var(--ck-radius);
}

.ck-entry-content figure {
  margin: 0 0 var(--ck-s5);
}

.ck-entry-content table {
  margin: 0 0 var(--ck-s5);
  font-size: .9375rem;
  /* Tabel lebar tidak boleh membuat seluruh halaman menggeser mendatar. */
  display: block;
  overflow-x: auto;
}

.ck-entry-content th,
.ck-entry-content td {
  padding: var(--ck-s2) var(--ck-s3);
  border: 1px solid var(--ck-line);
  text-align: left;
  vertical-align: top;
}

.ck-entry-content th {
  background: var(--ck-bg);
  color: var(--ck-ink);
  font-weight: 600;
}

/* Tautan "lanjut membaca" dan tautan halaman ganda bawaan WordPress. */
.ck-entry-content .more-link {
  font-weight: 600;
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s2);
  margin: var(--ck-s5) 0 0;
  font-size: .875rem;
}


/* ==========================================================================
   11. FORMULIR DAN PENCARIAN
   Kontrol form distandarkan lewat selektor elemen supaya searchform.php dan
   formulir komentar tidak butuh nama kelas baru.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--ck-s3) var(--ck-s3);
  background: var(--ck-surface);
  color: var(--ck-ink);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-size: 1rem;
  line-height: 1.4;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ck-muted);
  opacity: 1;         /* Firefox meredupkan placeholder sampai gagal kontras */
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--ck-primary);
}

label {
  display: inline-block;
  margin-bottom: var(--ck-s1);
  color: var(--ck-ink-2);
  font-size: .9375rem;
  font-weight: 600;
}

.search-form {
  display: flex;
  gap: var(--ck-s2);
  align-items: stretch;
}

/* Label dijadikan wadah posisi supaya ikon kaca pembesar bisa ditumpangkan di
   dalam kolom isian. Input HARUS berada di dalam label ini (lihat catatan di
   searchform.php), jadi wadahnya memang sudah pas di sini. */
.search-form label {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  display: flex;
}

.ck-cari-ikon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ck-muted);
  /* Klik menembus ikon dan mengenai kolomnya — ikon yang menelan klik membuat
     orang mengetuk kaca pembesar lalu tidak terjadi apa-apa. */
  pointer-events: none;
}

.search-form .search-field {
  min-width: 0;
  /* Ruang untuk ikon di depannya. */
  padding-inline-start: 40px;
}

.search-form .search-submit {
  /* 44px DIPAKSA. Hasil padding-nya berhenti di 43px — satu piksel di bawah
     ambang sasaran sentuh, jenis kekurangan yang mustahil terlihat mata tetapi
     tetap gagal diukur. */
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ==========================================================================
   12. BLOK KUIS MILIK TEMA
   Semua di bawah ini kelas .ck-*, yaitu bingkai di LUAR kartu kuis plugin.
   Tidak satu pun menyentuh .cq-*.
   ========================================================================== */

.ck-quiz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-s5);
  align-items: start;
  margin-bottom: var(--ck-s5);
  padding: var(--ck-s5);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
}

/* Sampul kuis pindah ke kolom kanan begitu ada ruang; di ponsel ia menumpuk
   di atas judul. */
@media (min-width: 700px) {
  /* HANYA kuis yang benar-benar punya sampul. Aturan lama memasang dua kolom
     pada SETIAP hero, sehingga kuis tanpa sampul — dan hampir semua kuis tanpa
     sampul, karena CPT-nya tidak punya editor konten — tetap memesan 280px
     untuk kolom kosong. Hasilnya kolom teks tersisa 358px di dalam wadah
     760px: hampir separuh halaman terbuang untuk gambar yang tidak ada.
     Kelasnya dipasang PHP lewat has_post_thumbnail(); selector :has() sengaja
     dihindari agar tema tetap benar di peramban lama. */
  .ck-quiz-hero--media {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .ck-quiz-hero--media .ck-quiz-hero-media {
    order: 2;
  }
}

.ck-quiz-hero > :last-child {
  margin-bottom: 0;
}

/* Baris atas hero: lencana + judul di kiri, kotak jumlah soal di kanan.
   Sebelumnya semuanya satu kolom, sehingga kotak "70 SOAL" melebar penuh dan
   tampil sepenting judulnya padahal ia hanya satu angka pendukung. Di layar
   sempit keduanya menumpuk kembali — angkanya turun ke bawah judul, bukan
   menyempit sampai tak terbaca. */
.ck-quiz-hero-atas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ck-s4);
}

.ck-quiz-hero-judul {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s4);
  flex: 1 1 320px;
  min-width: 0;
}

.ck-quiz-hero-teks {
  min-width: 0;
}

/* Lencana: bujur sangkar membulat berwarna aksen. Ukurannya dikunci lewat
   flex: 0 0 auto supaya judul dua atau tiga baris tidak meregangkannya. */
.ck-quiz-lencana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--ck-radius-sm);
  background: var(--ck-primary);
  color: #fff;
}

.ck-quiz-lencana-ikon {
  width: 26px;
  height: 26px;
}

/* Di dalam baris atas, daftar statistik berhenti melebar penuh. */
.ck-quiz-hero-atas .ck-quiz-stats {
  margin: 0;
  flex: 0 0 auto;
}

.ck-quiz-hero-atas .ck-quiz-stat {
  flex: 0 0 auto;
  align-items: center;
  min-width: 132px;
  padding: var(--ck-s4) var(--ck-s5);
  background: var(--ck-primary-bg);
  border-color: transparent;
  text-align: center;
}

.ck-quiz-hero-atas .ck-quiz-stat strong {
  font-size: 2rem;
  color: var(--ck-primary);
}

.ck-quiz-hero-media {
  margin: 0;
  border-radius: var(--ck-radius-sm);
  overflow: hidden;
  background: var(--ck-primary-bg);
  aspect-ratio: 16 / 10;
}

.ck-quiz-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ringkasan angka kuis (jumlah soal, acak, teks, per jenis). */
.ck-quiz-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s3);
  margin: var(--ck-s4) 0 0;
  padding: 0;
  list-style: none;
}

.ck-quiz-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 120px;
  min-width: 0;
  margin-top: 0;
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-bg);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-sm);
}

/* Nilai ditulis dengan <strong>, labelnya dengan <span>. Struktur ini dipilih
   agar tidak perlu menambah nama kelas di luar kontrak. */
.ck-quiz-stat strong {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ck-ink);
}

.ck-quiz-stat span {
  color: var(--ck-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Wadah tempat the_content() dicetak pada single-carbon_quiz.php. Plugin
   menyuntikkan kartunya ke dalam sini; tema hanya menyediakan lebar. */
.ck-quiz-body {
  margin-top: var(--ck-s5);
  width: 100%;
  min-width: 0;
}

.ck-quiz-body > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   13. PAGINASI DAN KEADAAN KOSONG
   ========================================================================== */

.ck-pagination {
  margin-top: var(--ck-s6);
  padding-top: var(--ck-s5);
  border-top: 1px solid var(--ck-line);
}

.ck-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ck-s2);
}

/* .page-numbers adalah keluaran paginate_links() bawaan WordPress. */
.ck-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ck-s3);
  background: var(--ck-surface);
  color: var(--ck-ink-2);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

.ck-pagination a.page-numbers:hover,
.ck-pagination a.page-numbers:focus {
  background: var(--ck-primary-bg);
  border-color: var(--ck-primary);
  color: var(--ck-primary-dark);
}

.ck-dark .ck-pagination a.page-numbers:hover,
.ck-dark .ck-pagination a.page-numbers:focus {
  color: var(--ck-primary);
}

/* Halaman aktif: warna + tebal + border, bukan warna saja. */
.ck-pagination .page-numbers.current {
  background: var(--ck-primary-dark);
  border-color: var(--ck-primary-dark);
  color: #ffffff;
}

.ck-dark .ck-pagination .page-numbers.current {
  color: var(--ck-bg);
}

.ck-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--ck-muted);
  min-width: 0;
}

/* Navigasi pos sebelumnya/berikutnya (post_navigation). */
.ck-pagination .nav-previous,
.ck-pagination .nav-next {
  flex: 1 1 240px;
}

.ck-pagination .nav-next {
  text-align: right;
}

.ck-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ck-s3);
  padding: var(--ck-s6) var(--ck-s5);
  background: var(--ck-surface);
  border: 1px dashed var(--ck-line-2);
  border-radius: var(--ck-radius);
  color: var(--ck-muted);
  text-align: center;
}

.ck-empty > :last-child {
  margin-bottom: 0;
}

.ck-empty h1,
.ck-empty h2,
.ck-empty h3 {
  margin-bottom: 0;
  color: var(--ck-ink);
}

.ck-empty .search-form {
  width: 100%;
  max-width: 420px;
  text-align: left;
}


/* ==========================================================================
   14. SIDEBAR WIDGET DAN KOMENTAR
   Memakai kelas inti WordPress (.widget, .comment-list) — bukan nama .ck-*
   baru — karena markupnya dihasilkan WordPress, bukan oleh tema.
   ========================================================================== */

.ck-sidebar .widget {
  margin-bottom: var(--ck-s5);
  padding: var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  font-size: .9375rem;
}

.ck-sidebar .widget:last-child {
  margin-bottom: 0;
}

.ck-sidebar .widget-title,
.ck-sidebar .widgettitle {
  margin: 0 0 var(--ck-s3);
  padding-bottom: var(--ck-s2);
  border-bottom: 1px solid var(--ck-line);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ck-ink);
}

.ck-sidebar .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-sidebar .widget li + li {
  margin-top: 0;
  border-top: 1px solid var(--ck-line);
}

.ck-sidebar .widget li a {
  display: block;
  padding: var(--ck-s2) 0;
  color: var(--ck-ink-2);
  text-decoration: none;
}

.ck-sidebar .widget li a:hover,
.ck-sidebar .widget li a:focus {
  color: var(--ck-primary-dark);
  text-decoration: underline;
}

.ck-dark .ck-sidebar .widget li a:hover,
.ck-dark .ck-sidebar .widget li a:focus {
  color: var(--ck-primary);
}

.ck-sidebar .widget > :last-child {
  margin-bottom: 0;
}

/* Komentar */
.comments-area {
  margin-top: var(--ck-s6);
  padding-top: var(--ck-s5);
  border-top: 1px solid var(--ck-line);
}

.comment-list,
.comment-list .children {
  margin: 0 0 var(--ck-s5);
  padding: 0;
  list-style: none;
}

.comment-list .children {
  margin: var(--ck-s4) 0 0 var(--ck-s4);
  padding-left: var(--ck-s4);
  border-left: 2px solid var(--ck-line);
}

.comment-body {
  margin-bottom: var(--ck-s4);
  padding: var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
}

.comment-meta,
.comment-metadata {
  margin-bottom: var(--ck-s2);
  color: var(--ck-muted);
  font-size: .8125rem;
}

.comment-author .avatar {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--ck-s2);
  border-radius: 50%;
}

.comment-author .fn {
  font-style: normal;
  font-weight: 600;
  color: var(--ck-ink);
}

.comment-respond {
  padding: var(--ck-s5);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
}

.comment-reply-title {
  margin-top: 0;
}

.comment-form p {
  margin-bottom: var(--ck-s4);
}

.comment-form .form-submit {
  margin-bottom: 0;
}

.bypostauthor > .comment-body {
  border-color: var(--ck-primary);
}

.no-comments {
  color: var(--ck-muted);
}


/* ==========================================================================
   15. KELAS INTI WORDPRESS YANG WAJIB
   Diperlukan agar tema lulus Theme Check dan editor klasik tampil benar.
   ========================================================================== */

.alignleft {
  float: left;
  margin: 0 var(--ck-s5) var(--ck-s4) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--ck-s4) var(--ck-s5);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--ck-s4);
}

.alignnone {
  margin-bottom: var(--ck-s4);
}

.ck-entry-content .alignwide,
.ck-entry-content .alignfull {
  /* Melebar keluar kolom baca tanpa menambah markup pembungkus. */
  width: auto;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (min-width: 1180px) {
  .ck-entry-content .alignwide {
    max-width: var(--ck-wide);
    margin-left: calc(50% - (var(--ck-wide) / 2));
    margin-right: calc(50% - (var(--ck-wide) / 2));
  }
}

.wp-caption {
  max-width: 100%;
  margin-bottom: var(--ck-s4);
}

.wp-caption img {
  border-radius: var(--ck-radius-sm);
}

.wp-caption-text,
.gallery-caption {
  margin: var(--ck-s2) 0 0;
  color: var(--ck-muted);
  font-size: .8125rem;
  text-align: center;
}

.sticky .ck-entry-title::before {
  /* Penanda pos tersemat. Karakter dekoratif, tidak dibacakan sebagai teks. */
  content: "\2605\00a0";
  color: var(--ck-warn);
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}


/* ==========================================================================
   16. KAKI SITUS
   ========================================================================== */

.ck-footer {
  flex: 0 0 auto;
  margin-top: var(--ck-s6);
  padding-block: var(--ck-s6) var(--ck-s5);
  background: var(--ck-surface);
  border-top: 1px solid var(--ck-line);
  color: var(--ck-muted);
  font-size: .9375rem;
}

/*
   Baris kredit pembuat sistem. Lebih kecil daripada baris hak cipta institusi
   di atasnya — keduanya pernyataan hak cipta, tetapi yang menaungi situs ini
   adalah jurusannya.

   WARNANYA --ck-muted, BUKAN --ck-faint. Versi pertama memakai --ck-faint dan
   terukur 4,28:1 di atas permukaan kaki halaman — di bawah ambang 4,5:1, dan
   pada huruf 13px itu bukan angka yang boleh ditawar. Pembedaannya kini datang
   dari ukuran saja, yang tidak berbiaya keterbacaan sama sekali.
*/
.ck-footer-kredit {
  margin-top: var(--ck-s1);
  font-size: .8125rem;
  color: var(--ck-muted);
}

/* Merapatkan kedua baris jadi satu blok. Tanpa ini jaraknya 16px — margin
   bawaan paragraf — sehingga keduanya terbaca sebagai dua paragraf lepas.
   :has() adalah penyempurnaan murni: peramban yang tidak mendukungnya tetap
   mendapat jarak 16px yang wajar, bukan tata letak yang rusak. */
.ck-footer p:has( + .ck-footer-kredit ) {
  margin-bottom: var(--ck-s1);
}

.ck-footer a {
  color: var(--ck-ink-2);
  text-decoration: none;
}

.ck-footer a:hover,
.ck-footer a:focus {
  color: var(--ck-primary-dark);
  text-decoration: underline;
}

.ck-dark .ck-footer a:hover,
.ck-dark .ck-footer a:focus {
  color: var(--ck-primary);
}

.ck-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ck-s5);
  margin-bottom: var(--ck-s5);
  padding-bottom: var(--ck-s5);
  border-bottom: 1px solid var(--ck-line);
}

.ck-footer-cols > * > :last-child {
  margin-bottom: 0;
}

.ck-footer-cols .widget {
  margin: 0;
}

.ck-footer-cols .widget-title,
.ck-footer-cols .widgettitle {
  margin: 0 0 var(--ck-s3);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ck-ink);
}

.ck-footer-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-footer-cols li + li {
  margin-top: var(--ck-s2);
}


/* ==========================================================================
   17. RUANG UNTUK KARTU KUIS PLUGIN
   HANYA jarak dan lebar. Warna, tipografi, dan isi .cq-* adalah milik plugin
   dan tidak boleh ditimpa dari sini (lihat KONTRAK.md butir 3).
   ========================================================================== */

.cq-quiz {
  margin-top: var(--ck-s5);
  width: 100%;
  max-width: 100%;
}

/* Di dalam .ck-quiz-body wadahnya sudah memberi jarak atas, jadi jarak ganda
   dihilangkan agar kartu tidak melayang jauh dari judul kuis. */
.ck-quiz-body > .cq-quiz:first-child {
  margin-top: 0;
}


/* ==========================================================================
   17b. KARTU KUIS — DESAIN ULANG
   Diletakkan SETELAH bagian kartu umum supaya menimpanya tanpa perlu
   membongkar aturan .ck-card yang masih dipakai pos & halaman biasa.

   Yang berubah dan mengapa:

   1. SAMPUL DIHAPUS. Kuis tidak punya isi dan hampir tidak pernah punya
      gambar; kotak placeholder bergradien hanya mengisi ruang dan mendorong
      informasi yang sebenarnya dicari ke bawah lipatan.
   2. SATU AJAKAN BERTINDAK. Sebelumnya tidak ada tombol sama sekali — kartu
      hanya bisa diklik lewat judulnya, dan tidak ada yang memberi tahu
      mahasiswa bahwa kartu itu bisa diklik.
   3. FAKTA SEBELUM HIASAN. "Soal 36" dan "Waktu 45 menit" adalah dua hal yang
      menentukan mahasiswa mulai sekarang atau nanti, jadi keduanya diberi
      bobot terbesar setelah judul. Dulu jumlah soal tampil sebagai lencana
      yang bentuknya persis sama dengan lencana kategori — dua jenis
      informasi, satu bobot visual.
   ========================================================================== */

.ck-quizcard {
  position: relative;          /* jangkar tautan yang diregangkan */
  display: flex;
  flex-direction: column;
  gap: var(--ck-s3);
  padding: var(--ck-s5);
  /* Transisi hanya pada properti yang tidak memicu tata letak ulang. */
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
}

/* Sampul tidak dipakai lagi pada kartu kuis. Aturan lama .ck-card-media
   tetap ada untuk pos biasa; di sini ia dimatikan agar placeholder
   bergradiennya tidak muncul. */
.ck-quizcard .ck-card-media {
  display: none;
}

.ck-quizcard:hover {
  transform: translateY(-2px);
  border-color: var(--ck-line-2);
  box-shadow: var(--ck-shadow-lg);
}

/* Fokus keyboard menyorot SELURUH kartu, bukan hanya teks judul —
   sasaran kliknya memang seluas kartu, jadi indikatornya harus sama. */
.ck-quizcard:focus-within {
  outline: 3px solid var(--ck-primary);
  outline-offset: 2px;
}
.ck-quizcard-title a:focus,
.ck-quizcard-title a:focus-visible {
  outline: none;               /* sudah diwakili outline kartu di atas */
}

/* Baris atas kartu: lencana kategori di kiri, penanda keadaan di kanan.
   Dicetak PHP hanya bila salah satunya ada, jadi tidak pernah jadi baris
   kosong yang menyisakan celah di puncak kartu. */
.ck-quizcard-atas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ck-s2);
}

.ck-quizcard-cat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s1);
}

/* "Sudah dikerjakan". margin-inline-start:auto menahannya tetap di kanan
   walau kartu itu tidak punya lencana kategori sama sekali. */
.ck-quizcard-sudah {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: auto;
  padding: 3px var(--ck-s2);
  border-radius: 999px;
  background: var(--ck-ok-bg);
  color: var(--ck-ok-teks);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.ck-quizcard-sudah svg { flex: 0 0 auto; }

.ck-quizcard-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.ck-quizcard-title a {
  color: var(--ck-ink);
  text-decoration: none;
}

/* Tautan yang diregangkan: inilah yang membuat seluruh kartu dapat diklik
   tanpa menambah satu pun tautan kedua ke pohon aksesibilitas. */
.ck-quizcard-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Lencana kategori adalah tautan tersendiri ke arsip kategorinya. Tanpa
   diangkat, ia tertimbun lapisan ::after di atas, dan ketukan tepat di atasnya
   membuka KUIS alih-alih menyaring kategori — tautan yang terlihat tetapi
   mustahil dituju. Bukan `pointer-events: none` pada ::after: itu akan
   membatalkan keputusan "seluruh kartu dapat diklik" yang memang disengaja.

   .ck-badge memakai display:inline-flex tanpa offset, jadi position:relative
   tidak menggesernya sepiksel pun. Dilingkupi .ck-quizcard-cat supaya
   .ck-badge di halaman lain tidak ikut berubah. */
.ck-quizcard-cat .ck-badge {
  position: relative;
  z-index: 1;
}

.ck-quizcard-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s5);
  margin: 0;
}

.ck-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ck-fact dt {
  /* --ck-muted, BUKAN --ck-faint: yang terakhir hanya 4,28:1 terhadap putih
     dan tidak memenuhi ambang 4,5:1 untuk teks yang harus dibaca. */
  color: var(--ck-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ck-fact dd {
  margin: 0;
  color: var(--ck-ink);
  font-size: 1.05rem;
  /* Angka sejajar antar-kartu, jadi kolomnya terbaca sebagai kolom. */
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   17c. JALUR SEMESTER
   Deretan pertemuan sebagai satu rangkaian berurutan. Bentuknya sengaja
   meminjam bahasa diagram alir proses — mata kuliah ini tentang rangkaian
   unit yang beruntun, dan urutan pertemuannya membawa arti yang sama.

   Tidak ada palet baru di sini, dan itu disengaja: kontrak token dengan
   plugin adalah alasan tema ini ada. Kartu kuis milik plugin dan dasbor
   milik tema harus terbaca sebagai satu situs.
   ========================================================================== */

.ck-run {
  margin-bottom: var(--ck-s5);
  padding: var(--ck-s5);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
}

.ck-run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-s2) var(--ck-s4);
  margin-bottom: var(--ck-s4);
}

.ck-run-title {
  margin: 0;
  font-size: 1.125rem;
}

.ck-run-count {
  margin: 0;
  color: var(--ck-muted);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}

.ck-run-count strong {
  color: var(--ck-ink);
}

/* Rangkaiannya: segmen berderet, disambung satu garis rambut yang lewat di
   belakangnya. Garis digambar sebagai latar agar tidak menambah elemen. */
.ck-run-track {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-run-item {
  margin: 0;
}

.ck-run-item > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px: sasaran sentuh penuh, bukan kotak kecil yang menuntut ketepatan. */
  min-width: 44px;
  height: 44px;
  padding: 0 var(--ck-s2);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
  color: var(--ck-muted);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ck-run-item > a:hover,
.ck-run-item > a:focus-visible {
  border-color: var(--ck-primary);
  color: var(--ck-primary-dark);
}

.ck-run-tag {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  /* Angka sejajar lebarnya, jadi deretannya terbaca sebagai deret. */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Sudah dikerjakan. Warna BUKAN satu-satunya penanda: ada centang, dan nama
   aksesibelnya menyebut statusnya dengan kata. */
.ck-run-item.is-done > a {
  background: var(--ck-primary-bg);
  border-color: var(--ck-primary);
  /* Nomornya memakai tinta biasa, BUKAN warna merek. Biru tua di atas biru
     muda hanya 4,59:1 — lolos ambang, tetapi nyaris tanpa ruang, dan angka
     inilah yang paling sering dibaca di jalur ini. Statusnya sudah disampaikan
     oleh latar, centang, dan kata pada nama aksesibelnya; warna teks tidak
     perlu ikut memikulnya. */
  color: var(--ck-ink);
}

.ck-run-check {
  position: absolute;
  right: 3px;
  bottom: 3px;
  color: var(--ck-primary-dark);
}

.ck-dark .ck-run-check {
  color: var(--ck-primary);
}

.ck-run-next {
  margin: var(--ck-s4) 0 0;
  color: var(--ck-ink-2);
  font-size: .9375rem;
}

.ck-run-next-label {
  display: inline-block;
  margin-right: var(--ck-s2);
  color: var(--ck-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ck-run-next--done {
  color: var(--ck-muted);
}

@media (max-width: 480px) {
  .ck-run {
    padding: var(--ck-s4);
  }
}


/* Susunan soal pada halaman kuis tunggal: keterangan, bukan statistik.
   Angka tetap di kotak .ck-quiz-stat; kalimat panjang turun ke baris ini. */
.ck-quiz-breakdown {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s3);
  margin: var(--ck-s4) 0 0;
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-bg);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-sm);
  color: var(--ck-muted);
  font-size: .9375rem;
}

.ck-quiz-breakdown-ikon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--ck-primary);
}

/* min-width: 0 wajib — tanpanya butir flex menolak menyusut dan rincian
   panjang mendorong jalurnya melebihi lebar kartu. */
.ck-quiz-breakdown-teks {
  min-width: 0;
}

.ck-quiz-breakdown-label {
  font-weight: 600;
  color: var(--ck-ink-2);
}

/* Jaring pengaman: templat sudah tidak mencetak <dl> kosong, tetapi kartu ini
   juga dipakai di luar arsip (mis. blok "kuis terkait"), dan daftar kosong yang
   ikut mendapat `gap` dari induknya meninggalkan celah menganga di tengah kartu. */
.ck-quizcard-facts:empty {
  display: none;
}

.ck-quizcard-types {
  margin: 0;
  color: var(--ck-muted);
  font-size: .875rem;
}

.ck-quizcard-foot {
  display: flex;
  align-items: center;
  margin-top: auto;            /* tombol sejajar di dasar tiap kartu */
  padding-top: var(--ck-s2);
}

.ck-quizcard-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-s2);
  min-height: 44px;            /* sasaran sentuh, walau kartunya jauh lebih luas */
  padding: 0 var(--ck-s4);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-primary-dark);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
}

.ck-quizcard-cta svg {
  transition: transform .18s ease-out;
}

.ck-quizcard:hover .ck-quizcard-cta svg {
  transform: translateX(3px);
}

.ck-quizcard-empty {
  color: var(--ck-muted);
  font-size: .875rem;
  font-style: italic;
}

/* Mode gelap: teks putih di atas #5b9df2 hanya 2,4:1, jadi tombolnya
   dibalik menjadi tinta gelap di atas biru terang. */
.ck-dark .ck-quizcard-cta {
  background: var(--ck-primary);
  color: var(--ck-bg);
}

@media (max-width: 480px) {
  .ck-quizcard {
    padding: var(--ck-s4);
  }
  .ck-quizcard-title {
    font-size: 1.125rem;
  }
  .ck-quizcard-cta {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   17d. AKUN DI KEPALA SITUS
   --------------------------------------------------------------------------
   Sebelum ini kepala situs hanya berisi tombol "Kuis" (yang menduplikasi butir
   menu bernama sama) dan tombol tema. Tidak ada jalan ke dasbor dan tidak ada
   cara keluar akun — di situs yang seluruh isinya milik-per-orang, itu dua
   hal yang paling sering dicari.

   Bentuknya satu keping: inisial + nama depan menuju dasbor, lalu "Keluar".
   Keduanya dijadikan satu wadah bergaris supaya terbaca sebagai milik pengguna
   dan tidak tertukar dengan navigasi isi di sebelah kirinya.
   ========================================================================== */

.ck-akun {
  display: flex;
  align-items: center;
  border: 1px solid var(--ck-line);
  border-radius: 999px;
  background: var(--ck-surface);
}

.ck-akun-nama {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-s2);
  /* 44px pada TAUTANNYA, bukan pada wadahnya. Bentuk sebelumnya memberi wadah
     padding 3px dan tautan 38px lalu menyebutnya "44px" — padahal yang bisa
     disentuh adalah tautannya, dan itu 38px. Sasaran sentuh diukur pada elemen
     yang menerima klik, bukan pada hiasan di sekelilingnya. */
  min-height: 44px;
  padding-inline: 4px var(--ck-s3);
  border-radius: 999px;
  color: var(--ck-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  max-width: 11rem;
}

a.ck-akun-nama:hover,
a.ck-akun-nama:focus {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

.ck-akun-inisial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Pasangan latar-muda/teks-tua, BUKAN latar --ck-primary-dark dengan huruf
     putih. Token --ck-primary-dark sengaja tidak digelapkan di mode gelap
     (ia dipakai sebagai warna teks tautan di atas permukaan gelap), sehingga
     sebagai LATAR ia jadi biru muda dan huruf putih di atasnya hanya 2,78:1.
     Pasangan ini dipakai di seluruh tema untuk keadaan tersorot dan lolos di
     kedua mode. */
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border: 1px solid var(--ck-primary);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}

/* Nama dipotong dengan elipsis, bukan dibungkus: kepala situs setinggi satu
   baris, dan nama panjang yang membungkus akan menaikkan tinggi seluruh bilah. */
.ck-akun-teks {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Keluar dari mode "Lihat sebagai". Sengaja BERWARNA PERINGATAN, bukan mengikuti
   warna merek: ia menandai keadaan yang tidak normal, dan pengelola harus dapat
   menemukannya sekilas tanpa membaca.

   Warnanya LITERAL dan SAMA di kedua mode, bukan var(--ck-bad). Token itu
   dirancang sebagai warna pita: di mode terang (#e03131) huruf putih di atasnya
   hanya 4,51:1 — lolos setipis rambut — dan di mode gelap (#ff8787) ia merah
   muda, dengan huruf putih jatuh ke sekitar 2,3:1. Merah tua di bawah ini
   berlaku sama di terang maupun gelap dan tidak bergeser mengikuti tema. */
.ck-akun-kembali {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: var(--ck-s3);
  border-radius: 999px;
  background: #8a2b06;
  /* Tepi terang. Hurufnya sendiri sudah 8,65:1 di atas latar merah tua, tetapi
     latar itu hanya 1,81:1 terhadap latar kepala situs di mode gelap — kedua
     warna sama-sama gelap, dan tanpa tepi tombolnya kehilangan bentuk. Garis
     ini yang membuat batasnya terbaca sebagai kendali (SC 1.4.11). */
  border: 1px solid rgba(255, 255, 255, .45);
  color: #ffffff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

.ck-akun-kembali:hover,
.ck-akun-kembali:focus {
  /* Digelapkan lewat filter, bukan token baru: hanya satu keadaan hover pada
     satu tombol, tidak sebanding dengan menambah warna ke palet tema. */
  filter: brightness(.9);
  color: #ffffff;
}

@media (max-width: 900px) {
  .ck-akun-kembali {
    justify-content: center;
    min-width: 44px;
    padding-inline: var(--ck-s2);
  }

  /* Diklip, bukan dibuang — pembaca layar tetap harus menyebutnya. */
  .ck-akun-kembali-teks {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Tautan ke backend, hanya untuk pengelola. Ditaruh PALING KIRI di dalam keping
   akun supaya "Keluar" tetap berada di ujung — posisi yang sudah dihafal orang. */
.ck-akun-kelola {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: var(--ck-s3);
  border-radius: 999px;
  border-inline-end: 1px solid var(--ck-line);
  color: var(--ck-primary-dark);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.ck-akun-kelola:hover,
.ck-akun-kelola:focus {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

/* Di bawah 900px hanya ikonnya yang tersisa; kepala situs di sana sudah sesak
   oleh hamburger, toggle tema, dan keping akun. Teksnya DIKLIP, bukan
   display:none dan bukan font-size:0 — pembaca layar tetap harus menyebut
   "Kelola".

   Pola klipnya sama dengan .ck-screen-reader-text di bagian 04; JANGAN mengutip
   .ck-akun-teks sebagai contoh — blok klip miliknya sudah dihapus (catatan
   penghapusannya di bawah), dan aturan responsifnya sekarang justru memakai
   display: none, yaitu cara yang TIDAK boleh ditiru di sini. Bedanya: nama akun
   sudah disebut di tempat lain pada bilah yang sama, sedangkan "Kelola" hanya
   ada di tombol ini. */
@media (max-width: 900px) {
  .ck-akun-kelola {
    /* 44px DIPAKSA di kedua sisi. Dengan teksnya diklip, yang tersisa hanya
       ikon 18px + padding 16px = 34px — cukup tinggi tetapi terlalu sempit,
       dan sasaran sentuh diukur pada kedua sumbu. */
    justify-content: center;
    min-width: 44px;
    padding-inline: var(--ck-s2);
  }

  .ck-akun-kelola-teks {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ck-akun-kelola svg {
    width: 18px;
    height: 18px;
  }
}

.ck-akun-keluar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--ck-s3);
  border-radius: 999px;
  border-left: 1px solid var(--ck-line);
  color: var(--ck-muted);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
}

.ck-akun-keluar:hover,
.ck-akun-keluar:focus {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

/* DIHAPUS: blok @media (max-width: 900px) yang dulu mengklip .ck-akun-teks.

   Aturan itu ditulis untuk kepala situs LAMA yang bilahnya sesak oleh menu
   mendatar. Bilah atas sekarang (bagian 30) memakai ulang nama kelas yang sama
   dengan aturan tanggung jawabnya sendiri: peran hilang di bawah 61,99rem,
   nama hilang di bawah 30rem. Di rentang 481-900px KEDUA aturan baru itu tidak
   berlaku — 30rem terlalu sempit, dan yang 61,99rem hanya menyentuh peran —
   sehingga blok lama berdiri sendirian di situ tanpa satu pun aturan yang
   membantahnya, dan nama akun terklip padahal seharusnya tampil.

   (Yang membuatnya menang adalah TIDAK ADANYA penantang di rentang itu, bukan
   letaknya yang lebih awal. Pada spesifisitas sama, yang menang adalah aturan
   yang LEBIH BAWAH di berkas — lihat .ck-stat-row.ck-profilv-angka di bagian
   17c yang harus memakai selektor ganda justru karena kaidah itu.)

   `.ck-akun-nama { padding-inline: 4px }` ikut dihapus karena ia PASANGAN klip
   itu: padding simetris 4px hanya masuk akal saat isinya cuma lingkaran
   inisial. Dengan nama kembali tampil, dasar `padding-inline: 4px var(--ck-s3)`
   di atas yang benar.

   Dua blok 900px lainnya (.ck-akun-kembali-teks dan .ck-akun-kelola-teks)
   SENGAJA DIBIARKAN: keduanya meringkas kendali khusus pengelola jadi ikon
   saja dan tidak dibantah aturan mana pun. */


/* ==========================================================================
   17e. RINGKASAN DASBOR
   --------------------------------------------------------------------------
   Tiga blok, diurutkan menurut seberapa besar akibatnya bila diabaikan:
   peringatan profil, tenggat, lalu angka. Warna TIDAK pernah menjadi satu-
   satunya pembeda — tiap blok punya judul teks sendiri (SC 1.4.1).
   ========================================================================== */

.ck-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ck-s3) var(--ck-s4);
  padding: var(--ck-s4);
  margin-bottom: var(--ck-s4);
  border: 1px solid var(--ck-line);
  /* Pita tebal di tepi awal: penanda yang tetap terlihat di mode paksa-warna,
     saat latar belakang kustom dibuang peramban. */
  border-inline-start: 4px solid var(--ck-line-2);
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
  box-shadow: var(--ck-shadow);
}

.ck-alert > div {
  min-width: 0;
  flex: 1 1 18em;
}

.ck-alert--warn {
  border-inline-start-color: var(--ck-warn);
}

.ck-alert--info {
  border-inline-start-color: var(--ck-primary);
}

/* Teksnya memakai --ck-ink, BUKAN --ck-warn. Kuning tema (#f0b429) di atas
   permukaan putih hanya sekitar 1,9:1 — jauh di bawah 4,5:1. Kuning itu
   hanya boleh jadi pita, tidak pernah jadi huruf. */
/* Kini dipakai sebagai <h2> (lihat dash-tenggat.php), jadi ukurannya DIKUNCI
   di sini. Tanpa font-size eksplisit, ia akan mewarisi ukuran h2 tema —
   clamp(1.4rem, ...) — dan judul panel kecil ini mendadak sebesar judul kartu
   besar. Nilainya disamakan dengan .ck-card-title supaya tampilannya persis
   seperti saat ia masih <p>. */
.ck-alert-judul {
  margin: 0 0 var(--ck-s1);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.32;
  font-weight: 700;
  color: var(--ck-ink);
}

.ck-alert-teks {
  margin: 0;
  color: var(--ck-muted);
  font-size: .92rem;
}

.ck-alert .ck-btn {
  flex: 0 0 auto;
}

/* --- PERINGATAN "DATA DIRI BELUM LENGKAP" ---
   Panel kuning penuh, bukan .ck-alert--warn yang putih berpita tipis: ia harus
   menonjol di antara kartu-kartu putih dasbor DAN di atas kartu kuis, karena
   akibat mengabaikannya baru terasa berminggu-minggu kemudian saat nilai tidak
   tercocokkan ke daftar mahasiswa.

   Warna kuning tema (--ck-warn #f0b429) TIDAK dipakai untuk huruf di mana pun
   di sini — di atas permukaan terang ia hanya sekitar 1,9:1. Ia hanya jadi
   latar tipis, tepi, dan warna ikon di atas latar kuningnya sendiri. Seluruh
   teks memakai tinta biasa. */
.ck-peringatan-profil {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--ck-s3) var(--ck-s4);
  padding: var(--ck-s4);
  margin-bottom: var(--ck-s4);
  /* Tepi #c78f1f, bukan kuning muda. Alasannya terukur: latar kuning panel ini
     hanya 1,01:1 terhadap latar halaman (#f5f7fa) — mata melihatnya kuning
     karena RONA, tetapi rona tidak diukur WCAG dan tidak membantu pengguna
     penglihatan rendah atau layar monokrom. Jadi tugas "menandai batas panel"
     diserahkan ke tepinya: #c78f1f mencapai 2,65:1, jauh di atas #f5cf7a yang
     hanya 1,39:1. */
  border: 1px solid #c78f1f;
  /* Pita tebal di tepi awal: tetap terlihat di mode paksa-warna, saat peramban
     membuang latar belakang kustom. */
  border-inline-start: 4px solid var(--ck-warn);
  border-radius: var(--ck-radius);
  background: #fdf0cf;
}

.ck-peringatan-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f7dfa5;
  /* Cokelat tua, bukan kuning: 5,3:1 di atas bulatan kuningnya. */
  color: #7a5300;
  flex: 0 0 auto;
}

.ck-peringatan-ikon svg { width: 22px; height: 22px; }

.ck-peringatan-isi {
  min-width: 0;
  flex: 1 1 20em;
}

.ck-peringatan-judul {
  margin: 0 0 var(--ck-s1);
  font-weight: 700;
  color: var(--ck-ink);
}

.ck-peringatan-teks {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  /* --ck-ink-2, bukan --ck-muted: abu redup dirancang untuk latar putih dan
     kehilangan terlalu banyak kontras di atas kuning muda. */
  color: var(--ck-ink-2);
}

.ck-peringatan-aksi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #e0ab3a;
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
  color: #7a5300;
  font-weight: 600;
  text-decoration: none;
  flex: 0 0 auto;
}

.ck-peringatan-aksi:hover,
.ck-peringatan-aksi:focus {
  background: #fffdf7;
  border-color: #7a5300;
  color: #5c3e00;
}

/* Mode gelap: kuning muda jadi cokelat gelap, hurufnya tinta terang. Ditulis
   dengan kelas .ck-dark mengikuti mekanisme tema (bukan prefers-color-scheme,
   yang akan lepas dari tombol terang/gelap di kepala situs). */
.ck-dark .ck-peringatan-profil {
  background: #3a2f14;
  border-color: #6b5620;
  border-inline-start-color: var(--ck-warn);
}

.ck-dark .ck-peringatan-ikon {
  background: #5c4a1a;
  color: #ffd97a;
}

.ck-dark .ck-peringatan-aksi {
  background: #2a2413;
  border-color: #8a7030;
  color: #ffd97a;
}

.ck-dark .ck-peringatan-aksi:hover,
.ck-dark .ck-peringatan-aksi:focus {
  background: #3f3418;
  border-color: #ffd97a;
  color: #ffe9ad;
}

/* --- DAFTAR "BELUM DIKERJAKAN" ---
   Melengkapi jalur semester: yang di sana hanya penanda pendek, di sini judul
   penuh yang bisa dibaca dan diklik. */
.ck-belum {
  list-style: none;
  margin: var(--ck-s3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
}

.ck-belum-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s3);
  padding: var(--ck-s3);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
}

/* Penanda pertemuan, sama bentuknya dengan yang di jalur semester supaya
   mahasiswa mengenali keduanya sebagai kuis yang sama. */
.ck-belum-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  font-size: .8125rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.ck-belum-teks {
  min-width: 0;
  flex: 1 1 auto;
}

.ck-belum-judul {
  display: block;
  font-weight: 600;
  color: var(--ck-ink);
  text-decoration: none;
  overflow-wrap: break-word;
}

a.ck-belum-judul:hover,
a.ck-belum-judul:focus { color: var(--ck-primary-dark); text-decoration: underline; }

.ck-belum-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin-top: 2px;
  font-size: .8125rem;
  color: var(--ck-muted);
}

/* Status ditulis sebagai KATA di markup; warna hanya menguatkan, tidak pernah
   menjadi satu-satunya pembawa makna (WCAG 1.4.1). */
.ck-belum-status {
  font-weight: 600;
  color: var(--ck-ink-2);
}

.ck-belum-item[data-status="buka"] .ck-belum-status { color: var(--ck-ok-teks); }
.ck-belum-item[data-status="tutup"] .ck-belum-status { color: var(--ck-muted); }

/* "Terlambat — masih bisa dikerjakan" SENGAJA tidak diredupkan seperti 'tutup'.
   Butir ini justru yang paling mendesak di seluruh daftar: tenggatnya sudah
   lewat, nilainya sudah dipotong, dan tiap hari tambahan memperburuk. Warna
   peringatan bertugas menarik mata, bukan menepikannya. --ck-bad-teks, bukan
   --ck-warn: kuning gagal 4,5:1 sebagai huruf di atas latar terang. */
.ck-belum-item[data-status="terlambat"] .ck-belum-status {
  color: var(--ck-bad-teks);
  font-weight: 700;
}

/* Yang sudah lewat tenggat DITURUNKAN penekanannya, tetapi TIDAK dengan
   opacity. Versi pertama memakai opacity: .78 dan terukur menjatuhkan status
   serta tenggatnya ke 3,87:1 — di bawah 4,5:1 untuk teks kecil. Opacity
   meredupkan teks dan latarnya sekaligus, jadi ia selalu memakan kontras.
   Penekanannya kini datang dari hal yang tidak berbiaya keterbacaan: penanda
   pertemuan yang dinetralkan, latar sedikit lebih redup, dan judul yang
   sengaja BUKAN tautan. */
.ck-belum-item[data-status="tutup"] {
  background: var(--ck-bg);
}

.ck-belum-item[data-status="tutup"] .ck-belum-tag {
  background: var(--ck-line);
  color: var(--ck-ink-2);
}

.ck-belum-kunci::before,
.ck-belum-tenggat::before {
  content: "·";
  margin-inline-end: .5rem;
}

.ck-belum-sisa {
  margin: var(--ck-s3) 0 0;
  font-size: .875rem;
}

/* ==========================================================================
   HALAMAN PROFIL PENGGUNA (hanya-lihat)
   --------------------------------------------------------------------------
   Dua kolom: kartu identitas + angka di KIRI, kartu informasi di KANAN. Nama
   berawalan .ck-profilv (v = view) supaya tidak tertukar dengan .cq-profil
   milik FORMULIR plugin. Sebagian besar isinya memakai ulang kelas yang sudah
   ada (.ck-card, .ck-btn, .ck-stat-row, .ck-badge); yang baru hanya kerangka
   halaman, avatar besar, daftar kontak berikon, dan baris label/nilai.
   ========================================================================== */
.ck-profilv {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-s4);
  align-items: start;
}

/* Kolom sempit di KIRI (mockup), berbeda dari .ck-layout--sidebar yang
   menaruhnya di kanan. minmax(0,…) supaya kolom tidak melebar karena isi
   panjang seperti alamat email. */
@media (min-width: 60rem) {
  .ck-profilv {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}

.ck-profilv-kiri,
.ck-profilv-kanan {
  display: grid;
  gap: var(--ck-s4);
  min-width: 0;
}

/* Kartu identitas: avatar + nama + peran + kontak + tombol, semua rata tengah.

   align-items IKUT DISETEL, dan tanpa itu avatarnya rata kiri. Elemen ini
   membawa DUA kelas: `ck-card-body ck-profilv-id`, dan .ck-card-body sudah
   menyetel display:flex; flex-direction:column. text-align TIDAK berlaku pada
   butir fleks, jadi .ck-avatar yang lebarnya pasti 6rem menempel ke tepi kiri
   kartu sementara nama dan lencana peran di bawahnya rata tengah — hanya
   lingkarannya sendiri yang melenceng. align-items: center memusatkan butir
   fleksnya; text-align: center tetap dipertahankan untuk teks di dalamnya. */
.ck-profilv-id {
  text-align: center;
  align-items: center;
}

.ck-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin-bottom: var(--ck-s3);
  border-radius: 50%;
  /* Pasangan warna SAMA dengan .ck-akun-inisial — latar muda, huruf tua —
     yang sudah terbukti lolos kontras di kedua mode. Jangan buat pasangan baru. */
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  border: 1px solid var(--ck-primary);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}

.ck-profilv-nama {
  margin: 0 0 var(--ck-s2);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ck-ink);
  overflow-wrap: break-word;
}

.ck-profilv-peran {
  margin: 0 0 var(--ck-s4);
}

/* Daftar kontak berikon, rata kiri di dalam kartu yang rata tengah. */
.ck-kontak {
  list-style: none;
  margin: 0 0 var(--ck-s4);
  padding: var(--ck-s3) 0 0;
  border-top: 1px solid var(--ck-line);
  display: grid;
  gap: var(--ck-s2);
  text-align: start;
}

.ck-kontak li {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
  min-width: 0;
  color: var(--ck-ink-2);
  font-size: .9rem;
}

.ck-kontak li > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.ck-kontak-ikon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ck-primary-dark);
}

.ck-profilv-aksi {
  display: grid;
  gap: var(--ck-s2);
}

/* Angka: memakai ulang .ck-stat-row/.ck-stat (yatim sebelum ini). Tanpa margin
   sendiri karena jaraknya sudah datang dari gap .ck-profilv-kiri.

   SELEKTORNYA GANDA, alasannya sama dengan aturan kisi di bawah: elemennya
   membawa `ck-stat-row ck-profilv-angka`, dan .ck-stat-row di bagian 17h
   menyetel margin-bottom: var(--ck-s5) dari posisi yang LEBIH BAWAH di berkas
   dengan spesifisitas sama. Dengan satu kelas saja, aturan ini kalah dan
   jaraknya jadi 16 + 24 = 40px — satu celah menyimpang di tengah kolom yang
   semua jarak lainnya 16px. */
.ck-stat-row.ck-profilv-angka {
  margin: 0;
}

/* Kolom kiri profil dipatok 22rem = 352px, jadi minmax(9.5rem) milik
   .ck-stat-row hanya memuat DUA jalur dan angka ketiga jatuh sendirian dengan
   satu sel kosong di sebelahnya — moda gagal yang persis sama dengan yang
   ditangani aturan 520px di bagian .ck-stat-row. Bedanya, lebar di sini datang
   dari KOLOM, bukan dari viewport, sehingga media query lebar layar tidak
   pernah menolongnya: di layar lebar pun kisinya tetap timpang. Penyelamatnya
   karena itu harus ditulis di sini, dinyalakan pada ambang yang sama dengan
   saat kolom dua mulai berlaku.

   Dengan gap 8px dan padding 8px tiap kartu jadi (352-16)/3 = 112px — sedikit
   lebih lega daripada 109px yang sudah diterima di ponsel, jadi pembungkusan
   labelnya tidak lebih buruk dari keadaan yang sudah berjalan. Saling
   eksklusif dengan @media (max-width: 520px), jadi tidak bertabrakan.

   SELEKTORNYA SENGAJA GANDA. Elemennya membawa dua kelas sekaligus
   (`ck-stat-row ck-profilv-angka`), dan `.ck-stat-row` di bagian 17h berada
   LEBIH BAWAH di berkas ini dengan spesifisitas yang sama — media query tidak
   menambah spesifisitas apa pun, jadi `.ck-profilv-angka` tunggal kalah dan
   aturan ini mati diam-diam. Diukur: 2 kolom 170px, kartu ketiga jatuh
   sendirian. Jangan "dirapikan" jadi satu kelas. */
@media (min-width: 60rem) {
  .ck-stat-row.ck-profilv-angka {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ck-s2);
  }

  .ck-profilv-angka .ck-stat {
    padding: var(--ck-s3) var(--ck-s2);
  }

  .ck-profilv-angka .ck-stat-angka {
    font-size: 1.5rem;
  }

  .ck-profilv-angka .ck-stat-label {
    font-size: .75rem;
  }
}

/* Sub-grid dua kartu di kolom kanan (Akademik + Keamanan). Jatuh ke satu kolom
   di layar sempit. */
.ck-profilv-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-s4);
}

/* DUA PASANG TITIK PUTUS, JANGAN DIRAPIKAN JADI SATU.

   Yang menentukan bukan lebar layar melainkan lebar KOLOM KANAN, dan hubungan
   keduanya patah di 62rem: di situ rel navigasi 16rem berhenti jadi panel geser
   lalu ikut memakan lebar. Kolom kanan karena itu MENYUSUT saat layar melebar —
   terukur 560px pada 991px, lalu terjun ke 305px pada 992px.

   Ambangnya diukur, bukan dikira: dua kolom mulai MELUBERKAN isi begitu kolom
   kanan di bawah 376px (pada 344px: 2 elemen luber, 5 label pecah). Di atas itu
   yang tersisa hanya label yang membungkus — kosmetik, dan tetap jauh lebih
   pendek daripada satu kolom (400px lawan 586px). Jadi syaratnya: kolom kanan
   >= ~400px, dengan sedikit kelonggaran untuk bilah gulir.

     tanpa rel : kanan = layar - 431  ->  52rem (832px) memberi 401px
     dengan rel: kanan = layar - 687  ->  68rem (1088px) memberi 401px

   48rem yang lama SALAH di kedua sisi: pada 768px kolom kanan hanya 337px dan
   isinya meluber, sedangkan pada 992px-1088px rel sudah memepetnya jauh lebih
   sempit lagi tanpa satu pun aturan yang membantah. */
@media (min-width: 52rem) and (max-width: 61.99rem), (min-width: 68rem) {
  .ck-profilv-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Baris label-kiri / nilai-kanan ---
   Pola yang belum ada di tema: .ck-fact bertumpuk, bukan berdampingan.
   <dl> dengan tiap pasang dibungkus <div>, garis pemisah antar baris. */
.ck-datalist {
  margin: var(--ck-s3) 0 0;
}

.ck-datarow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-s4);
  padding: var(--ck-s2) 0;
  border-top: 1px solid var(--ck-line);
}

.ck-datarow:first-child {
  border-top: 0;
}

.ck-datarow dt {
  color: var(--ck-muted);
  font-size: .9rem;
  flex: 0 0 auto;
}

.ck-datarow dd {
  margin: 0;
  color: var(--ck-ink);
  font-weight: 600;
  text-align: end;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Nilai kosong: redup dan TIDAK tebal, supaya "belum diisi" tidak terbaca
   seolah sebuah data sungguhan. */
.ck-datarow-kosong {
  color: var(--ck-muted);
  font-weight: 400;
  font-style: italic;
}

.ck-sandi-titik {
  letter-spacing: .15em;
  color: var(--ck-ink-2);
}

.ck-profilv-keamanan-aksi {
  margin: var(--ck-s4) 0 0;
}

.ck-tenggat {
  list-style: none;
  margin: var(--ck-s2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
}

.ck-tenggat li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ck-s1) var(--ck-s3);
}

.ck-tenggat a,
.ck-tenggat-judul {
  font-weight: 600;
  /* Sasaran 24x24 (SC 2.5.8): teks setinggi ~21px sendiri kurang dua piksel. */
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* Kuis yang belum dibuka tidak ditautkan, jadi ia juga tidak boleh berwarna
   tautan — biru bergaris bawah yang tidak bisa diklik terbaca sebagai rusak. */
.ck-tenggat-judul { color: var(--ck-ink); }

.ck-tenggat-sisa {
  color: var(--ck-muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* Kunci prasyarat dipaksa ke baris sendiri: ia kalimat, bukan label pendek,
   dan menempel di ujung baris tenggat membuat keduanya terbaca sebagai satu. */
.ck-tenggat-kunci {
  flex: 1 0 100%;
  color: var(--ck-ink-2);
  font-size: .85rem;
}

.ck-tenggat-kunci::before {
  content: "\1F512";  /* gembok; dekoratif, teks di sebelahnya sudah menjelaskan */
  margin-inline-end: var(--ck-s1);
}

/* --- Tiga angka --- */

/* auto-fit + minmax, bukan tiga kolom tetap: di 360px ketiganya menumpuk
   sendiri tanpa media query, dan tidak pernah ada kolom selebar 90px yang
   memaksa "Menunggu penilaian" pecah jadi empat baris. */
.ck-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--ck-s3);
  margin-bottom: var(--ck-s5);
}

.ck-stat {
  padding: var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
  box-shadow: var(--ck-shadow);
  text-align: center;
}

.ck-stat-angka {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}

.ck-stat-label {
  display: block;
  margin-top: var(--ck-s1);
  font-size: .82rem;
  color: var(--ck-muted);
}

/* DIHAPUS: .ck-stat.is-pending dan .ck-stat.is-pending .ck-stat-angka.

   Keduanya menandai kotak angka "Menunggu penilaian" dengan garis tepi
   peringatan. Kotak itu SUDAH TIDAK ADA: satu-satunya .ck-stat-row di tema ada
   di page-templates/profil.php dan berisi tepat tiga kartu (Kuis selesai,
   Rata-rata nilai, Perkiraan nilai) — tidak satu pun memasang kelas is-pending,
   dan tidak ada berkas lain yang mencetaknya. ck_student_summary() sendiri
   sudah mencatat penghapusan itu di docblock-nya: angka 'menunggu' "tidak lagi
   dicetak sebagai kotak tersendiri, tetapi masih dipakai kartu 'Kuis
   dikerjakan' di dash-kartu.php".

   Ditulis sebagai catatan, bukan dihapus diam-diam, supaya jelas bahwa ini
   bukan aturan yang hilang karena kelalaian. Bila kelak kotak itu ingin
   dihidupkan lagi, ingat bahwa .ck-profilv-angka kini dipatok TIGA kolom
   (aturan @media 60rem di bagian 17c, diukur 112px per kartu); kartu keempat
   menuntut ambang itu dihitung ulang. */

/* Di ponsel, minmax(9.5rem) hanya memuat DUA kolom pada lebar isi 343px,
   sehingga angka ketiga jatuh sendirian ke baris kedua dan menyisakan satu
   sel kosong di sebelahnya — terbaca seperti tata letak yang rusak. Tiga
   kolom setara dipaksa: labelnya membungkus dua baris, dan itu jauh lebih
   baik daripada kisi yang timpang. */
@media (max-width: 520px) {
  .ck-stat-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ck-s2);
  }

  .ck-stat {
    padding: var(--ck-s3) var(--ck-s2);
  }

  .ck-stat-angka {
    font-size: 1.5rem;
  }

  .ck-stat-label {
    font-size: .75rem;
  }
}


/* ==========================================================================
   17i. KARTU STATISTIK DASBOR
   ========================================================================== */

/*
   DUA KOLOM, BUKAN auto-fit.

   Barisnya SELALU berisi tepat empat kartu (dash-kartu.php merakit empat, tidak
   kurang tidak lebih). Dengan auto-fit minmax(15rem,1fr) jumlah kolomnya ikut
   lebar wadah, dan pada rentang lebar yang justru paling umum ia menghasilkan
   TIGA kolom — sehingga kartu keempat turun sendirian dan melar selebar penuh.
   Terukur di kolom utama selebar 825px (layar 1440 dengan rel dan kolom
   samping): 3 + 1. Satu kartu yatim di bawah tiga kartu terbaca seperti
   kerusakan tata letak, bukan pilihan.

   Tidak ada satu nilai minmax pun yang bisa melompati angka tiga: begitu ruang
   cukup untuk tiga, ia belum tentu cukup untuk empat. Yang bisa menjamin baris
   selalu genap hanyalah jumlah kolom yang ditetapkan. Empat-sejajar dilepas
   dengan sadar; 2x2 selalu seimbang di setiap lebar.
*/
.ck-kartu-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-s4);
  margin-bottom: var(--ck-s5);
}

/* Di ponsel dua kolom menyisakan ~163px per kartu — angka besarnya jadi
   terpotong. Titik putus lebar layar aman di sini: rel baru muncul di 62rem,
   jadi di bawah 30rem wadahnya memang selebar layar. */
@media (max-width: 30rem) {
  .ck-kartu-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ck-kartu {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s4);
  padding: var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: 16px;
  box-shadow: var(--ck-shadow);
}

.ck-kartu-ikon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

.ck-kartu-ikon svg {
  width: 22px;
  height: 22px;
}

/* Warna per kartu dibawa atribut data. color-mix dipakai supaya latarnya
   diturunkan dari token yang sama dengan sisa tema — bila pengelola mengganti
   warna primer, kartunya ikut. Peramban yang tidak mengenal color-mix
   mengabaikan aturannya dan memakai latar primer di atas. */
.ck-kartu[data-warna="hijau"] .ck-kartu-ikon {
  background: color-mix(in srgb, var(--ck-ok) 15%, transparent);
  color: var(--ck-ok);
}

.ck-kartu[data-warna="ungu"] .ck-kartu-ikon {
  background: color-mix(in srgb, var(--ck-primary) 18%, transparent);
  color: var(--ck-primary-dark);
}

.ck-kartu[data-warna="jingga"] .ck-kartu-ikon {
  background: color-mix(in srgb, var(--ck-warn) 24%, transparent);
  /* Bukan --ck-warn sebagai warna ikon: kuning di atas latar kuning muda
     tidak terbaca. Latarnya yang membedakan, bukan tintanya. */
  color: var(--ck-ink-2);
}

.ck-kartu-isi {
  min-width: 0;
}

.ck-kartu-label {
  display: block;
  color: var(--ck-muted);
  font-size: .85rem;
}

.ck-kartu-nilai {
  display: block;
  margin-top: 2px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}

/* Kartu tenggat berisi JUDUL KUIS, bukan angka. Pada ukuran 1,75rem judul
   sepanjang "Pertemuan 15 — Pemilihan Proses Dehidrasi" memakan empat baris
   dan mendorong tinggi seluruh baris kartu. */
.ck-kartu-nilai.is-teks {
  font-size: 1.05rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ck-kartu-catat {
  display: block;
  margin-top: var(--ck-s1);
  color: var(--ck-muted);
  font-size: .78rem;
  line-height: 1.45;
}


/* ==========================================================================
   17j. DONAT PERKIRAAN NILAI
   ========================================================================== */

.ck-donat-baris {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-s5);
  align-items: center;
  margin-top: var(--ck-s4);
}

@media (min-width: 560px) {
  .ck-donat-baris {
    grid-template-columns: auto 1fr;
  }
}

.ck-donat {
  position: relative;
  width: 180px;
  max-width: 100%;
  margin-inline: auto;
}

.ck-donat svg {
  display: block;
  width: 100%;
  height: auto;
  /* Busur mulai dari atas, bukan dari kanan (bawaan SVG). */
  transform: rotate(-90deg);
}

.ck-donat circle {
  fill: none;
  stroke-width: 12;
}

.ck-donat-alas {
  stroke: var(--ck-line);
}

.ck-donat-isi {
  stroke: var(--ck-primary);
  stroke-linecap: round;
}

.ck-donat-teks {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ck-donat-teks strong {
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}

.ck-donat-teks em {
  font-style: normal;
  font-size: .78rem;
  color: var(--ck-muted);
}

.ck-donat-angka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
}

.ck-donat-angka li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-s3);
  margin: 0;
  padding: var(--ck-s3) var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
  font-size: .92rem;
}

.ck-donat-angka b {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.ck-donat-angka b.is-ok  { color: var(--ck-ok-teks); }
.ck-donat-angka b.is-bad { color: var(--ck-bad-teks); }


/* ==========================================================================
   17k. AKTIVITAS TERBARU
   ========================================================================== */

.ck-akt {
  list-style: none;
  margin: var(--ck-s4) 0 0;
  padding: 0;
}

.ck-akt-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-s2) var(--ck-s4);
  margin: 0;
  padding: var(--ck-s3) 0;
  border-bottom: 1px solid var(--ck-line);
}

.ck-akt-item:last-child {
  border-bottom: 0;
}

.ck-akt-judul {
  flex: 1 1 14rem;
  /* Sasaran 24x24 (SC 2.5.8). */
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  font-weight: 600;
}

.ck-akt-nilai {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ck-akt-nilai strong {
  font-size: 1.05rem;
  color: var(--ck-primary-dark);
}

.ck-akt-dari {
  color: var(--ck-muted);
  font-size: .85rem;
}

/* Kata, bukan angka: hasil yang belum difinalisasi tidak punya nilai, dan
   menaruh angka sementara di kolom yang sama dengan nilai resmi membuat
   keduanya tertukar. */

/* ==========================================================================
   17h. PERKIRAAN NILAI (PG + pilihan jamak + benar/salah)
   ========================================================================== */

/* Pembungkus penggulung. Tabel tiga kolom berisi judul kuis panjang tidak muat
   di 375px; tanpa wadah ini yang menggulung mendatar adalah SELURUH halaman,
   dan itu memutus tata letak setiap bagian lain di dasbor. */
.ck-tabel-bungkus {
  overflow-x: auto;
  margin-top: var(--ck-s4);
  /* Menjadikannya sasaran fokus keyboard: wilayah yang bisa digulung wajib
     dapat dijangkau tanpa tetikus (SC 2.1.1). */
  -webkit-overflow-scrolling: touch;
}

.ck-tabel {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
  font-size: .92rem;
}

.ck-tabel th,
.ck-tabel td {
  padding: var(--ck-s3) var(--ck-s2);
  border-bottom: 1px solid var(--ck-line);
  text-align: start;
  vertical-align: top;
}

.ck-tabel thead th {
  border-bottom: 2px solid var(--ck-line-2);
  color: var(--ck-muted);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.ck-tabel tbody tr:last-child th,
.ck-tabel tbody tr:last-child td {
  border-bottom: 0;
}

.ck-tabel tbody th {
  font-weight: 600;
  color: var(--ck-ink);
}

/* Angka rata kanan dan bertabel: kolom perkiraan dibaca dengan cara dibandingkan
   antar baris, dan angka proporsional membuat perbandingan itu meleset. */
.ck-angka {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ck-perkiraan-catat {
  margin: var(--ck-s2) 0 0;
  color: var(--ck-muted);
  font-size: .85rem;
}

.ck-perkiraan-kosong {
  margin: var(--ck-s4) 0 0;
  color: var(--ck-muted);
}

/* .ck-perkiraan-rata / -angka / -label DIHAPUS di 1.13.0. Ketiganya menggayai
   kotak angka mendatar yang digantikan donat di .ck-donat-baris; membiarkannya
   berarti menyimpan gaya untuk markup yang tidak pernah dicetak lagi. */


/* Bagian 17g (BERANDA) DIHAPUS bersama front-page.php. Halaman depan situs
   kini adalah halaman Dasbor itu sendiri, jadi hero, tiga langkah, dan kartu
   ".ck-beranda-*" tidak pernah dicetak lagi oleh template mana pun. */


/* ==========================================================================
   17f. HALAMAN MASUK & DAFTAR AKUN
   --------------------------------------------------------------------------
   Satu kartu terpusat di layar kosong. Tidak ada sidebar, tidak ada widget,
   tidak ada apa pun yang bisa diklik selain yang menyelesaikan tugas ini —
   layar masuk yang menawarkan banyak hal membuat orang lupa untuk apa ia
   datang.

   Kartu ini SENGAJA tidak memakai .ck-card. Kartu biasa dipakai berdampingan
   di dalam kisi dan lebarnya mengikuti kolom; kartu ini berdiri sendiri dan
   lebarnya dibatasi oleh keterbacaan formulir, bukan oleh tata letak halaman.
   ========================================================================== */

/* --- TATA LETAK TERBELAH ---
   Panel kiri berisi merek dan janji produk; kanan berisi formulir. Panel kiri
   HANYA muncul dari 900px ke atas: di bawah itu ia mendorong formulir keluar
   layar, dan formulirlah alasan orang datang ke halaman ini. */
.ck-auth-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 60vh;
}

@media (min-width: 900px) {
  .ck-auth-split {
    grid-template-columns: 1fr 1fr;
  }
}

.ck-auth-panel {
  display: none;
  padding: var(--ck-s6) var(--ck-s5);
  background: linear-gradient(160deg, var(--ck-primary-bg) 0%, var(--ck-bg) 100%);
  border-inline-end: 1px solid var(--ck-line);
}

@media (min-width: 900px) {
  .ck-auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ck-s5);
  }
}

.ck-auth-panel-isi {
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}

.ck-auth-panel-judul {
  margin: 0 0 var(--ck-s3);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

/* Baris kedua judul diberi warna merek, meniru "Raih Prestasi." pada rancangan.
   Dibuat sebagai <span>, bukan <br> berwarna, supaya pembaca layar tetap
   membacanya sebagai satu kalimat utuh. */
.ck-auth-panel-judul .ck-aksen {
  display: block;
  color: var(--ck-primary-dark);
}

.ck-auth-panel-teks {
  margin: 0;
  color: var(--ck-ink-2);
  line-height: 1.6;
}

.ck-auth-gambar {
  display: block;
  width: 100%;
  height: auto;
  /* Batas tinggi ilustrasi. Tanpa ini, satu unggahan potret lewat Customizer
     (683x1024 dirender jadi 416x624) mendorong strip poin keluar layar pada
     laptop tinggi 900px. 18rem sedikit di atas SVG bawaan (416x250), jadi
     bawaannya tidak tersentuh. Potret dikotakkan, bukan dipotong — memotong
     ilustrasi pengelola tanpa diminta lebih buruk daripada menyisakan ruang. */
  max-height: 18rem;
  object-fit: contain;
  margin-block: var(--ck-s5);
  border-radius: var(--ck-radius);
}

/* --- TIGA KEPING KEUNGGULAN DI KAKI PANEL ---
   Blok ini dulu memaksa tiga kolom lewat @media (min-width: 1200px). Itu tidak
   pernah bisa benar: .ck-auth-panel-isi di atas mengunci isi panel di 26rem,
   jadi wadah strip ini 416px pada lebar layar BERAPA PUN. Tiga kolom di 416px
   menyisakan 73px untuk huruf — terukur di peramban, dan deskripsi terpanjang
   pecah jadi SEMBILAN baris (7-9 karakter per baris). Di 1199px, yaitu satu
   piksel di bawah ambang itu, tata letaknya menurun dan rapi: judul satu baris,
   deskripsi dua baris, 34-41 karakter per baris. Layar yang lebih lebar justru
   menghasilkan tampilan yang lebih buruk.

   Tiga kolom baru masuk akal bila wadahnya ~970px, yaitu viewport di atas
   2000px. Ambangnya karena itu dihapus tanpa pengganti; ia satu-satunya
   min-width: 1200px di seluruh berkas ini.

   Panel ini tetap tidak dicetak di bawah 900px. Itu keputusan yang
   DIPERTAHANKAN, bukan yang terlupa: di ponsel orang datang untuk formulirnya.
   Konsekuensinya perlu tertulis — ketiga janji ini juga tidak sampai ke
   pengguna yang memperbesar halaman >=160%, karena zoom menurunkan viewport ke
   bawah 900px. */
.ck-auth-poin {
  list-style: none;
  margin: 0;
  padding: var(--ck-s5) var(--ck-s4);
  display: grid;
  /* auto-fit + minmax, bukan kolom-tunggal keras, mengikuti pola yang sudah
     dipakai tema ini di beberapa tempat. Di wadah 416px hasilnya memang satu
     kolom hari ini. Bedanya: kalau kunci 26rem suatu saat dicabut atau poin
     keempat ditambahkan, aturan ini ikut benar sendiri alih-alih jadi
     pengecualian yang harus dibela ulang. 17rem = 2,5rem ikon + jarak +
     ~220px huruf, kolom tersempit yang masih menahan deskripsi di <=3 baris. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: 16px;
  box-shadow: var(--ck-shadow);
}

/* Di mode gelap --ck-shadow praktis tak terlihat dan tepi --ck-line hanya
   1,26:1 di atas permukaan kartu, sehingga strip melebur ke kaki gradien.
   --ck-line-2 menaikkannya ke 1,66:1 — masih rendah, tetapi cukup untuk
   membuatnya terbaca sebagai satu objek. Ini estetika, bukan kepatuhan: garis
   hias di sekeliling teks bukan komponen antarmuka, jadi ambang 3:1 pada WCAG
   1.4.11 tidak berlaku di sini dan tidak perlu dikejar.
   Ditulis sebagai .ck-dark, bukan @media (prefers-color-scheme), karena tema
   ini berganti mode lewat kelas di <html>; media query akan lepas dari tombol
   manual dan dari pilihan yang tersimpan. */
.ck-dark .ck-auth-poin {
  border-color: var(--ck-line-2);
}

.ck-auth-poin li {
  margin: 0;
  display: grid;
  /* minmax(0, 1fr), bukan 1fr. `1fr` berarti `minmax(auto, 1fr)`, dan lantai
     min-content itulah yang dulu membuat ketiga kolom tidak sama lebar
     (terukur 124,8 / 113,8 / 116,0px). Lantai 0 memindahkan moda gagalnya: yang
     meluber tinggal satu kata panjang, bukan seluruh tata letak — dan itu
     ditangani overflow-wrap di aturan teks di bawah, yang karena itu wajib. */
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--ck-s3);
  align-items: start;
}

/* Ikon kotak berwarna, satu warna per poin. Warnanya dibawa atribut data,
   bukan kelas per-poin, supaya menambah poin keempat tidak menuntut aturan
   CSS baru.

   `grid-row: span 2` DIHAPUS: dengan pembungkus .ck-poin-teks, tiap li hanya
   punya dua anak dan satu baris, sehingga chip yang membentang ke baris kedua
   justru menarik baris implisit yang kosong.

   Ukuran dalam rem, bukan px, supaya ikon dan huruf membesar bersama saat
   pengguna menaikkan ukuran font bawaan peramban. Dengan 40px mati, ikon
   menyusut jadi seperempat bobot visualnya pada zoom-teks-saja. */
.ck-poin-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  /* --ck-radius memang 12px, jadi ini nol perubahan visual — murni
     mengembalikan angka mati ke tokennya. */
  border-radius: var(--ck-radius);
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

.ck-auth-poin li[data-warna="ok"] .ck-poin-ikon {
  /* color-mix belum ada di peramban lawas; bila tidak dikenali, aturan ini
     diabaikan dan latar primer di atas tetap berlaku. */
  background: color-mix(in srgb, var(--ck-ok) 16%, transparent);
  color: var(--ck-ok);
}

.ck-auth-poin li[data-warna="warn"] .ck-poin-ikon {
  background: color-mix(in srgb, var(--ck-warn) 22%, transparent);
  /* --ck-warn terlalu terang sebagai warna ikon di atas latar terang;
     tinta biasa lebih terbaca dan tetap terbedakan oleh latarnya. */
  color: var(--ck-ink-2);
}

.ck-poin-ikon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Pembungkus teks. Ini yang MENYEMBUHKAN tabrakan spesifisitas, bukan
   menambalnya. Aturan lama `.ck-auth-poin span` berspesifisitas (0,1,1) dan
   ikut mengenai chip ikon — yang kebetulan juga sebuah <span> — sehingga
   mengalahkan `.ck-poin-ikon` (0,1,0). Akibatnya terukur di peramban: ketiga
   chip dirender display:block, SVG 20px menempel di pojok kiri-atas kotak 40px
   (meleset 10px dari pusat di kedua sumbu), dan poin PERTAMA berwarna
   --ck-muted alih-alih --ck-primary-dark. Poin ok/warn selamat hanya karena
   selektornya (0,3,1).
   Dengan pembungkus ini chip bukan lagi keturunan yang cocok, jadi tidak ada
   selektor yang perlu diperpanjang untuk menang. */
.ck-poin-teks b {
  display: block;
  font-size: .9375rem;
  /* line-height body dirancang untuk paragraf; judul satu baris di atas
     deskripsi jadi terlihat mengambang. 1,35 mengikatnya ke kalimatnya
     sendiri, bukan ke poin di bawahnya. */
  line-height: 1.35;
  margin-bottom: var(--ck-s1);
  color: var(--ck-ink);
  overflow-wrap: break-word;
}

.ck-poin-teks span {
  display: block;
  /* Dinaikkan dari .8rem. Ini teks terkecil sekaligus terredup di kartu, dan
     ruang kepalanya gratis: pada kolom 330px maupun 316px ia tetap dua baris. */
  font-size: .875rem;
  line-height: 1.5;
  /* --ck-muted di atas --ck-surface terukur 6,46:1 di terang dan 7,42:1 di
     gelap. Angkanya ditulis di sini supaya siapa pun yang menyetel ulang
     ukuran atau warna berikutnya tahu berapa ruang tersisa sebelum 4,5:1. */
  color: var(--ck-muted);
  overflow-wrap: break-word;
}

.ck-auth {
  display: flex;
  justify-content: center;
  /* Bukan center: formulir panjang di layar pendek harus mulai dari atas,
     kalau tidak bagian kepalanya terpotong dan tidak bisa digulung naik. */
  align-items: flex-start;
  padding: var(--ck-s6) var(--ck-s4);
  min-height: 60vh;
}

.ck-auth-kartu {
  width: 100%;
  max-width: 26rem;
  padding: var(--ck-s6) var(--ck-s5);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: 16px;
  box-shadow: var(--ck-shadow-lg);
}

/* --- Lencana ikon di puncak kartu (gembok / orang) --- */
.ck-auth-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--ck-s4);
  border-radius: 16px;
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

.ck-auth-ikon svg {
  width: 26px;
  height: 26px;
}

/* Kepala kartu di rancangan ini RATA TENGAH, berbeda dari rata kiri di
   halaman lain tema. Dibatasi ke .ck-auth-kartu supaya tidak merembet. */
.ck-auth-kartu .ck-auth-kepala {
  text-align: center;
}

.ck-auth-kartu .ck-auth-sub {
  margin-inline: auto;
  max-width: 24rem;
}

/* --- Input dengan ikon di depan --- */
.ck-input-ikon {
  position: relative;
  display: flex;
}

.ck-input-ikon > svg {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ck-muted);
  pointer-events: none;
}

.ck-input-ikon input {
  padding-inline-start: 40px;
}

/* Kolom sandi punya ikon DAN tombol lihat; keduanya butuh ruangnya sendiri. */
.ck-input-ikon.ck-pass-wrap input {
  padding-inline-end: 4.5rem;
}

/* --- Tanda wajib isi --- */
.ck-wajib {
  color: var(--ck-bad);
  /* Bukan satu-satunya penanda: input-nya juga bertanda `required`, sehingga
     pembaca layar mengumumkannya tanpa bergantung pada bintang merah ini. */
  margin-inline-start: 2px;
}

/* --- Pemisah "atau" --- */
.ck-atau {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  margin-block: var(--ck-s4);
  color: var(--ck-muted);
  font-size: .85rem;
}

.ck-atau::before,
.ck-atau::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ck-line);
}

/* --- Tombol penyedia luar (Google) --- */
.ck-btn--luar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-s3);
  width: 100%;
  min-height: 48px;
  background: var(--ck-surface);
  color: var(--ck-ink);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.ck-btn--luar:hover,
.ck-btn--luar:focus {
  background: var(--ck-bg);
  border-color: var(--ck-primary);
  color: var(--ck-ink);
}

.ck-btn--luar svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* --- Baris kepercayaan di bawah kartu --- */
.ck-auth-aman {
  margin: var(--ck-s5) auto 0;
  max-width: 26rem;
  text-align: center;
  color: var(--ck-muted);
  font-size: .8rem;
  line-height: 1.6;
}

.ck-auth-aman strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ck-ink-2);
  font-size: .85rem;
}

.ck-auth-aman svg {
  width: 16px;
  height: 16px;
  color: var(--ck-ok);
}

/* --- Kotak info (mis. "cek folder spam") --- */
.ck-auth-info {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s3);
  margin-top: var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s4);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-primary-bg);
  color: var(--ck-ink-2);
  font-size: .85rem;
  line-height: 1.55;
}

.ck-auth-info svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ck-primary-dark);
}

/* --- Tombol garis (kembali ke login) --- */
.ck-btn--garis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-s2);
  width: 100%;
  min-height: 48px;
  background: var(--ck-surface);
  color: var(--ck-primary-dark);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.ck-btn--garis:hover,
.ck-btn--garis:focus {
  background: var(--ck-primary-bg);
  border-color: var(--ck-primary);
  color: var(--ck-primary-dark);
}

/* Pendaftaran punya sembilan bidang; pada 26rem ia jadi menara sempit yang
   harus digulung dua layar penuh. Dilebarkan supaya bidang bisa berpasangan. */
.ck-auth-kartu--lebar {
  max-width: 40rem;
}

.ck-auth-kepala {
  margin-bottom: var(--ck-s5);
}

.ck-auth-judul {
  margin: 0 0 var(--ck-s2);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ck-auth-sub {
  margin: 0;
  color: var(--ck-muted);
  font-size: .95rem;
}

.ck-auth-pengantar {
  margin-bottom: var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s4);
  border-inline-start: 3px solid var(--ck-primary);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-primary-bg);
  color: var(--ck-ink-2);
  font-size: .92rem;
}

.ck-auth-pengantar > :first-child { margin-top: 0; }
.ck-auth-pengantar > :last-child  { margin-bottom: 0; }

/* Warna --ck-bad hanya untuk PITA dan garis tepi. Sebagai teks di atas
   permukaan terang ia lolos tipis, tetapi di mode gelap #ff8787 di atas
   #1c242e adalah teks merah muda yang sulit dibaca lama-lama. Hurufnya
   memakai --ck-ink, dan yang merah adalah pitanya. */
.ck-auth-galat {
  margin-bottom: var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-inline-start: 4px solid var(--ck-bad);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
  color: var(--ck-ink);
  font-size: .92rem;
  font-weight: 600;
}

/* Kembaran .ck-auth-galat dengan pita hijau. Hurufnya tetap --ck-ink: warna
   hijau tema (#2f9e44) di atas permukaan terang lolos tipis, tetapi di mode
   gelap ia jadi hijau muda yang melelahkan dibaca. Yang berwarna pitanya. */
.ck-auth-sukses {
  margin-bottom: var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-inline-start: 4px solid var(--ck-ok);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
  color: var(--ck-ink);
  font-size: .92rem;
  font-weight: 600;
}

.ck-auth-form {
  display: grid;
  gap: var(--ck-s4);
}

/* Kolom, bukan baris. Tanpa flex-direction eksplisit, input di dalamnya
   memperlakukan flex-basis sebagai TINGGI dan tumbuh jadi kotak raksasa —
   jebakan yang sudah menggigit sekali di bilah pencarian tema ini. */
.ck-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ck-field > label {
  margin-bottom: var(--ck-s1);
}

.ck-field-opsional {
  color: var(--ck-muted);
  font-weight: 500;
}

.ck-field-bantu {
  margin-top: var(--ck-s1);
  color: var(--ck-muted);
  font-size: .8rem;
}

.ck-field-galat {
  margin-top: var(--ck-s1);
  color: var(--ck-ink);
  font-size: .8rem;
  font-weight: 600;
}

/* Tanda seru dicetak lewat CSS supaya galatnya dikenali tanpa bergantung pada
   warna saja (SC 1.4.1); teksnya sendiri sudah menjelaskan apa yang salah. */
.ck-field-galat::before {
  content: "! ";
  color: var(--ck-bad);
  font-weight: 700;
}

.ck-field [aria-invalid="true"] {
  border-color: var(--ck-bad);
}

/* Dua bidang berdampingan di layar lebar, menumpuk sendiri di ponsel. */
.ck-auth-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ck-s4);
}

.ck-pass-wrap {
  position: relative;
  display: flex;
}

/* padding-inline-end disediakan untuk tombol "Lihat" supaya teks sandi yang
   panjang tidak merayap ke bawahnya. */
.ck-pass-wrap input {
  padding-inline-end: 4.5rem;
}

.ck-pass-lihat {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  /* 44px, muat pas di dalam input setinggi 48px. Sebelumnya 36px: lolos ambang
     minimum AA (24x24) tetapi menyimpang dari sasaran 44px yang dipenuhi seluruh
     kendali lain di tema ini, pada tombol yang justru sering ditekan ibu jari. */
  min-height: 44px;
  padding-inline: var(--ck-s3);
  background: none;
  border: 0;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-primary-dark);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.ck-pass-lihat:hover,
.ck-pass-lihat:focus {
  background: var(--ck-primary-bg);
}

/* [hidden] DIPAKSA. Tombol ini dicetak hidden dan baru dibuka JavaScript;
   display:inline-flex di atas akan mengalahkan atribut hidden dan membuatnya
   tampil walau JavaScript mati — sebuah tombol yang tidak melakukan apa-apa.
   Jebakan yang sama sudah muncul tiga kali di tema ini. */
.ck-pass-lihat[hidden] {
  display: none;
}

.ck-auth-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-s2) var(--ck-s4);
}

.ck-checkrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-s2);
  /* 44px pada BARIS yang bisa diklik, bukan pada kotak centangnya saja. */
  min-height: 44px;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

.ck-checkrow input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.ck-auth-lupa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9rem;
}

.ck-btn--blok {
  width: 100%;
  justify-content: center;
  /* Tombol utama dibuat lebih tinggi daripada .ck-btn biasa: ia satu-satunya
     tindakan di layar ini dan sering ditekan dengan ibu jari. */
  min-height: 48px;
  font-size: 1rem;
}

.ck-auth-kaki {
  margin: var(--ck-s5) 0 0;
  padding-top: var(--ck-s4);
  border-top: 1px solid var(--ck-line);
  text-align: center;
  color: var(--ck-muted);
  font-size: .92rem;
}

.ck-auth-kaki a {
  font-weight: 600;
}

.ck-auth-kaki--diam {
  text-align: start;
}

@media (max-width: 480px) {
  .ck-auth {
    padding: var(--ck-s5) var(--ck-s3);
  }

  /* Di ponsel kartunya melebur ke halaman: bingkai dan bayangan di layar
     selebar 375px hanya memakan ruang tanpa memisahkan apa pun. */
  .ck-auth-kartu {
    padding: var(--ck-s5) var(--ck-s4);
    border: 0;
    box-shadow: none;
    background: none;
  }
}


/* ==========================================================================
   18. GERAK YANG DIKURANGI
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .ck-card:hover,
  .ck-card:focus-within {
    transform: none;
  }
}


/* ==========================================================================
   19. GAYA CETAK
   ========================================================================== */

@media print {
  /* Cetakan selalu di atas kertas putih; token gelap akan memboroskan tinta. */
  :root,
  .ck-dark {
    --ck-bg: #ffffff;
    --ck-surface: #ffffff;
    --ck-ink: #000000;
    --ck-ink-2: #1a1a1a;
    --ck-muted: #333333;
    --ck-faint: #555555;
    --ck-line: #bbbbbb;
    --ck-line-2: #999999;
    --ck-primary: #0b4ea2;
    --ck-primary-dark: #0b4ea2;
    --ck-primary-bg: #ffffff;
    --ck-shadow: none;
    --ck-shadow-lg: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
    line-height: 1.5;
    display: block;
  }

  /* KERANGKA BARU IKUT DISEMBUNYIKAN. Daftar ini semula hanya menyebut kepala
     LAMA (.ck-header, .ck-nav, .ck-actions) — kelas yang sudah tidak pernah
     dicetak lagi sejak navigasi pindah ke rel kiri. Akibatnya seluruh maksud
     lembar cetak ini gagal: bilah atas yang lengket ikut tercetak di puncak
     halaman, dan rel navigasi 16rem memakan satu kolom penuh lebar kertas.
     .ck-header/.ck-nav/.ck-actions DIBIARKAN di daftar — biayanya nol dan ia
     melindungi anak tema yang masih memakai kerangka lama. */
  .ck-topbar,
  .ck-rel,
  .ck-shell-tirai,
  .ck-header,
  .ck-nav,
  .ck-menu,
  .ck-nav-toggle,
  .ck-actions,
  .ck-theme-toggle,
  .ck-footer,
  .ck-sidebar,
  .ck-pagination,
  .ck-skip-link,
  .ck-btn,
  .search-form,
  .comment-respond,
  .comment-reply-link {
    display: none !important;
  }

  /* Rel sudah disembunyikan, tetapi KOLOMNYA belum. Tanpa baris ini kisi tetap
     memesan 16rem untuk elemen yang tidak tergambar, dan isi halaman tercetak
     menjorok ke kanan dengan pias kosong selebar 256px di kiri setiap lembar. */
  .ck-shell,
  .ck-shell--tanpa-rel {
    display: block;
  }

  /* Tinggi 100vh milik kerangka layar memaksa halaman pertama setinggi layar,
     sehingga lembar cetak pertama sering hampir kosong. */
  .ck-shell,
  .ck-shell-badan {
    min-height: 0;
  }

  .ck-layout,
  .ck-layout--sidebar {
    display: block;
  }

  .ck-container,
  .ck-container--wide {
    max-width: none;
    padding-inline: 0;
  }

  .ck-card,
  .ck-quiz-hero,
  .ck-quiz-stat,
  .ck-empty,
  .comment-body,
  pre {
    border: 1px solid #999999;
    box-shadow: none;
    break-inside: avoid;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* URL dicetak di samping tautan agar isi cetakan tetap bisa ditelusuri. */
  .ck-entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    word-break: break-all;
  }

  img {
    break-inside: avoid;
  }
}


/* ==========================================================================
   KERANGKA SIDEBAR (tahap 1 perombakan tampilan)
   --------------------------------------------------------------------------
   Navigasi pindah dari kepala halaman ke rel kiri. Blok ini ditaruh PALING
   AKHIR supaya menang atas aturan kepala lama tanpa harus membongkarnya satu
   per satu.

   YANG BOLEH DIBERSIHKAN HANYA .ck-header dan kerabatnya — header.php memang
   tidak lagi mencetak kelas-kelas itu. `.ck-menu` JANGAN DISENTUH: footer.php
   masih memanggil wp_nav_menu() dengan 'menu_class' => 'ck-menu', jadi menu
   kaki di SETIAP halaman dilayani aturan itu. Menghapusnya menjatuhkan menu
   kaki ke <ul> bawaan peramban — bulatan, tanpa jarak, tautan biru bergaris
   bawah — tanpa satu pun aturan pengganti. (Kalimat versi lama di sini
   menyebut .ck-menu ikut mati; itu keliru dan sempat menjadi undangan untuk
   merusak kaki situs.)
   ========================================================================== */

/* Legacy .ck-nav-toggle menggambar hamburgernya sendiri lewat ::before. Kepala
   baru sudah memakai SVG inline, jadi tanpa baris ini muncul DUA hamburger
   bertumpuk di dalam satu tombol. */
.ck-nav-toggle::before { content: none; }

.ck-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background: var(--ck-bg);
}

/* --- Rel kiri ---
   Namanya .ck-rel, BUKAN .ck-sidebar. Kelas .ck-sidebar sudah dipakai
   sidebar.php untuk kolom widget di kanan (lihat bagian 05); kalau rel ini
   ikut memakainya, kolom widget akan tersedot jadi panel geser dan lenyap ke
   luar layar di ponsel begitu ada satu widget dipasang. */
.ck-rel {
  display: flex;
  flex-direction: column;
  gap: var(--ck-s4);
  padding: var(--ck-s4);
  background: var(--ck-surface);
  border-inline-end: 1px solid var(--ck-line);
}

.ck-rel-kepala {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s2);
  padding: var(--ck-s2) var(--ck-s2) 0;
}

/* Tombol tutup, hanya hidup di layar sempit. Tanpa ini, ketukan di tempat
   hamburger tadi mendarat di merek situs — karena rel yang terbuka menutupi
   sudut itu — dan pengguna terlempar ke beranda alih-alih menutup rel. */
.ck-rel-tutup {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius);
  background: transparent;
  color: var(--ck-ink-2);
  cursor: pointer;
}

.ck-rel-tutup:hover,
.ck-rel-tutup:focus-visible {
  background: var(--ck-bg);
  color: var(--ck-primary-dark);
}

.ck-rel-merek {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ck-rel-nama {
  display: block;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ck-primary-dark);
}

.ck-rel-sub {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  color: var(--ck-muted);
}

.ck-sidenav { flex: 1 1 auto; }

/* Judul kelompok. Huruf kecil-kapital, dan WARNANYA --ck-muted bukan yang
   lebih redup: pada ukuran 11px setiap tingkat keredupan langsung memakan
   kontras. */
.ck-sidenav-judul {
  margin: var(--ck-s4) 0 var(--ck-s2);
  padding-inline: var(--ck-s2);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-sidenav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.ck-sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  /* 44px sasaran sentuh, dipaksa bukan kebetulan dari padding. */
  min-height: 44px;
  padding: 0 var(--ck-s3);
  border-radius: var(--ck-radius);
  color: var(--ck-ink-2);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}

.ck-sidenav-ikon { width: 20px; height: 20px; flex: 0 0 auto; }

.ck-sidenav-item:hover,
.ck-sidenav-item:focus-visible {
  background: var(--ck-bg);
  color: var(--ck-primary-dark);
}

/* Butir aktif. Ditandai latar DAN warna teks DAN aria-current di markup —
   bukan warna saja. */
.ck-sidenav-item.is-aktif {
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}

/* Kartu prodi di kaki rel. */
.ck-rel-prodi {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: auto;
  padding: var(--ck-s4) var(--ck-s3);
  border-radius: var(--ck-radius);
  background: var(--ck-primary-bg);
  text-align: center;
}

.ck-rel-prodi-ikon { color: var(--ck-primary-dark); }
.ck-rel-prodi-ikon svg { width: 26px; height: 26px; display: block; }

.ck-rel-prodi-nama {
  margin-top: var(--ck-s2);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.3;
  color: var(--ck-primary-dark);
}

.ck-rel-prodi-kampus {
  font-size: .75rem;
  color: var(--ck-ink-2);
}

/* --- Kolom isi --- */
.ck-shell-badan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* --- Bilah atas --- */
.ck-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-line);
}

.ck-topbar-cari { flex: 1 1 auto; min-width: 0; max-width: 34rem; }

/* Butir-butir bilah tidak muat satu baris di layar sempit, dan kolom pencarian
   satu-satunya yang lentur — SELURUH tekanan penyusutan jatuh padanya. Terukur
   di 360px: kotak isiannya berhenti di 74px, ruang teksnya 4px, lebih sempit
   dari satu huruf. Pencarian karena itu turun ke baris kedua dan memakai lebar
   penuh.

   AMBANGNYA 36rem, BUKAN 30rem. Diukur: kalimat ajakan "Cari kuis atau materi…"
   menuntut 163px teks, kotak isiannya menambah 106px, dan butir tetap di bilah
   (hamburger + kendali akun + jarak + padding) memakan 271-346px bergantung
   panjang nama akun. Pada 30rem yang lama, di 481px ruang teks yang tersisa
   hanya 104px — kalimat ajakannya terpotong separuh, di lebar yang seharusnya
   masih nyaman.

   36rem = 576px dipilih sebagai batas yang JUJUR, bukan sempurna: tepat di
   atasnya kolom pencarian memuat kalimat ajakan utuh untuk nama sampai enam
   huruf (terukur 163-192px), sedangkan nama yang lebih panjang menyisakan
   118-135px — kalimatnya terpotong di ekor, tetapi kotaknya tetap lapang
   dipakai mengetik. Tidak ada satu titik putus yang benar untuk semua nama,
   karena ongkos tetapnya sendiri bergerak 271-346px; yang dihindari di sini
   adalah kotak 74px yang tak terpakai sama sekali, bukan setiap piksel
   pemotongan.

   Ongkosnya bilah lengket tumbuh dari ~69px menjadi ~131px di bawah 576px —
   bentuk app-bar dua baris yang lazim di ponsel. Token --ck-bilah ikut naik di
   sini supaya sasaran jangkar tidak mendarat di baliknya. */
@media (max-width: 36rem) {
  .ck-topbar { flex-wrap: wrap; }

  .ck-topbar-cari {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
  }

  /* Bilah kini dua baris — terukur 131px. Token tingginya WAJIB ikut naik di
     sini: kalau tidak, setiap lompatan jangkar mendarat 35px di balik bilah,
     justru di layar yang paling sedikit ruangnya. 9.5rem = 152px memberi
     napas 21px di atas sasaran. */
  :root { --ck-bilah: 9.5rem; }
}

/* HALAMAN UJIAN: BILAH ATAS TIDAK LENGKET DI PONSEL/TABLET.

   Plugin memaku bilah "Sisa waktu" di top: 0 dengan z-index 6 pada
   max-width: 768px (quiz/assets/css/frontend.css). Bilah atas tema juga lengket
   di top: 0, dengan z-index 30 dan latar buram, dan tidak satu pun leluhurnya
   membentuk konteks penumpukan — .ck-shell dan .ck-shell-badan keduanya tanpa
   z-index, transform, maupun opacity. Jadi keduanya bersaing langsung di
   lapisan akar dan bilah tema MENANG: begitu peserta menggulir turun, sisa
   waktu ujiannya tertimbun penuh (~69px, dan ~131px di bawah 576px) sepanjang
   pengerjaan. Ia harus menggulir balik ke puncak setiap kali ingin tahu sisa
   waktunya — persis hal yang sifat lengket bilah itu ada untuk mencegahnya.

   Yang dilepas kelengketannya milik TEMA, bukan .cq-* — pantangan di KONTRAK.md
   tetap dipatuhi; nama plugin hanya dipakai sebagai syarat kehadiran.

   Ambangnya 768px, disamakan dengan media query plugin: di atas itu bilah waktu
   memang tidak lengket, jadi bilah atas boleh lengket seperti biasa. */
@media (max-width: 768px) {
  body.single-carbon_quiz .ck-topbar { position: static; }

  /* Kuis yang dipasang lewat shortcode di halaman biasa. Ditulis TERPISAH,
     bukan digabung ke daftar koma di atas: peramban tanpa dukungan :has()
     membuang SELURUH daftar koma begitu satu selektornya tak dikenali, dan itu
     akan ikut mematikan baris single-carbon_quiz yang jalan di mana pun. */
  body:has(.cq-quiz) .ck-topbar { position: static; }
}

/* ==========================================================================
   20. HALAMAN BANTUAN
   --------------------------------------------------------------------------
   Memakai ulang .ck-ciut — pengungkap <details> yang dulu dipakai kotak "Data
   diri" di dasbor. Kotak itu sudah pindah ke halaman Edit Profil, dan aturannya
   sempat menjadi CSS yatim; dipakai kembali di sini alih-alih dibiarkan
   menganggur atau digandakan dengan nama baru.
   ========================================================================== */

.ck-bantuan {
  display: grid;
  gap: var(--ck-s3);
}

.ck-bantuan-butir {
  padding: var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
}

/*
   flex-basis NOL, dan itulah yang menahan kata "Buka" tetap di kanan.

   .ck-ciut > summary memakai flex-wrap: wrap. Keputusan membungkus memakai
   ukuran DASAR butir, bukan ukuran setelah menyusut — dan dengan flex-basis
   auto, ukuran dasar sebuah pertanyaan adalah panjang kalimatnya utuh tanpa
   pembungkusan. Di layar 390px itu selalu melebihi baris, sehingga "Buka"
   terlempar ke baris kedua dan berdiri sendirian di kiri; terukur pada
   pertanyaan terpanjang, "Buka" jatuh 65px di bawah pertanyaannya.

   Dengan basis nol, pertanyaannya tidak pernah menjadi alasan membungkus: ia
   mengambil sisa ruang yang ada, dan "Buka" tetap di ujung baris yang sama.
*/
.ck-bantuan-tanya {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  color: var(--ck-ink);
}

/* Jawabannya sedikit menjorok dan diberi garis kiri: saat beberapa butir
   terbuka sekaligus, jawaban dan pertanyaan berikutnya tidak lagi menyatu jadi
   satu blok teks yang sulit dipisah mata. */
.ck-bantuan-jawab {
  margin-top: var(--ck-s3);
  padding-inline-start: var(--ck-s4);
  border-inline-start: 2px solid var(--ck-primary-bg);
  color: var(--ck-ink-2);
}

.ck-bantuan-jawab p { margin: 0 0 var(--ck-s3); }
.ck-bantuan-jawab p:last-child { margin-bottom: 0; }

/* DIHAPUS: aturan .ck-bantuan-butir[open] yang memutar tanda panah 180°.

   Aturan itu ditulis seolah panahnya tetap â–¾ saat terbuka, padahal
   `.ck-ciut[open] > summary .ck-ciut-aksi::after` (bagian 12) SUDAH mengganti
   karakternya menjadi â–´ — dan .ck-bantuan-butir memang membawa kelas .ck-ciut.
   Memutar â–´ sejauh 180° mengembalikannya menghadap bawah, jadi panahnya tidak
   pernah berubah arah sama sekali: tertutup â–¾, terbuka â–¾. Penggantian karakter
   di bagian 12 sudah menangani perubahan arah, dan U+25BE serta U+25B4 punya
   lebar maju yang sama sehingga tidak ada lompatan lebar yang perlu dicegah. */

.ck-bantuan-tautan {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s3);
  margin: var(--ck-s5) 0 0;
}

#ck-bantuan-kontak { margin-top: var(--ck-s5); }


/* ==========================================================================
   21. SARINGAN KATEGORI ARSIP KUIS
   ========================================================================== */

.ck-filter {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ck-s2) var(--ck-s3);
  margin-bottom: var(--ck-s5);
}

.ck-filter-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-filter-daftar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
   <li> dijadikan flex, dan itu BUKAN kosmetik.

   Tanpa aturan ini <li> tetap list-item, sehingga <a> yang inline-flex duduk di
   atas garis dasar teks butirnya. Garis dasar sebuah inline-flex diturunkan dari
   butir pertamanya — dan keping yang punya angka jumlah (font lebih kecil) jadi
   punya garis dasar berbeda dari keping tanpa angka. Terukur: "Semua" di 52px
   sementara "Pengolahan Gas 6" di sebelahnya 56px, meleset 4px pada baris yang
   sama. Sebagai butir flex, <a> ditata sebagai blok dan garis dasarnya tidak
   ikut menentukan apa pun.
*/
.ck-filter-daftar li {
  display: flex;

  /*
     margin DINOLKAN. Aturan daftar umum tema `li + li { margin-top: 4px }`
     (bagian 04) juga mengenai daftar ini, sehingga setiap keping KECUALI yang
     pertama turun 4px — terukur "Semua" di 52px sementara tetangga sebarisnya
     di 56px, dan deretannya tampak bergerigi. Aturan itu masuk akal untuk
     daftar yang menumpuk ke bawah; di sini kepingnya berjajar mendatar dan
     jaraknya sudah diurus gap.
  */
  margin: 0;
  padding: 0;
}

/*
   TINGGI TETAP 44px, bukan min-height.

   44px adalah sasaran sentuh, dan itu bagian yang tidak boleh ditawar. Tetapi
   min-height membuat tinggi keping ikut bergantung pada isinya: keping "Semua"
   yang tanpa angka jumlah terukur 48px sementara tetangga sebarisnya 44px, dan
   deretan keping jadi bergerigi. Tinggi tetap membuat semuanya identik apa pun
   isinya; box-sizing tema sudah border-box, jadi 44px sudah termasuk garis tepi.

   nowrap menjaga tinggi itu tetap benar: nama kategori yang membungkus dua
   baris akan meluber keluar dari kotak setinggi 44px. Keping yang kepanjangan
   cukup turun ke barisnya sendiri — terukur nama 30 karakter pun masih muat di
   layar 390px.
*/
.ck-filter-butir {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-s2);
  height: 44px;
  max-width: 100%;
  white-space: nowrap;
  padding: 0 var(--ck-s4);
  border: 1px solid var(--ck-line-2);
  border-radius: 999px;
  background: var(--ck-surface);
  color: var(--ck-ink-2);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.ck-filter-butir:hover,
.ck-filter-butir:focus-visible {
  border-color: var(--ck-primary-dark);
  color: var(--ck-primary-dark);
}

/* Yang aktif ditandai latar penuh DAN aria-current di markup — bukan warna
   saja. */
.ck-filter-butir.is-aktif {
  border-color: var(--ck-primary-dark);
  background: var(--ck-primary-dark);
  color: #fff;
}

.ck-filter-jumlah {
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  opacity: .75;
}

/* Di mode gelap --ck-primary-dark adalah biru MUDA; huruf putih di atasnya
   hanya 2,4:1, jadi butir aktif memakai tinta gelap tema. */
.ck-dark .ck-filter-butir.is-aktif { color: var(--ck-bg); }

/*
   Di ponsel kepingnya dirapatkan mendatar — HANYA mendatar. Tinggi 44px tetap
   dipertahankan karena itu sasaran sentuh, bukan hiasan.

   Alasannya ruang: dengan padding lebar, lima kategori memakan 244px di layar
   390px, dan daftar kuisnya terdorong hampir sepenuhnya ke bawah lipatan.
   Merapatkan sisi kiri-kanan memuat lebih banyak keping per baris tanpa
   menyentuh apa pun yang berkaitan dengan ketepatan sentuhan.
*/
@media (max-width: 30rem) {
  .ck-filter-butir {
    padding: 0 var(--ck-s3);
    font-size: .8125rem;
  }
}


/* ==========================================================================
   22. SEMUA PERCOBAAN
   ========================================================================== */

.ck-percobaan-kuis + .ck-percobaan-kuis {
  margin-top: var(--ck-s5);
  padding-top: var(--ck-s5);
  border-top: 1px solid var(--ck-line);
}

.ck-percobaan-judul {
  margin: 0 0 var(--ck-s3);
  font-size: 1rem;
  font-weight: 700;
}

.ck-percobaan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
}

.ck-percobaan-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ck-s2) var(--ck-s3);
  padding: var(--ck-s3);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
}

/* Percobaan yang dipakai. Ditandai garis tepi DAN lencana bertulisan
   "Dihitung" — warna tidak pernah jadi satu-satunya pembawa makna. */
.ck-percobaan-item.is-dihitung {
  background: var(--ck-primary-bg);
  box-shadow: inset 0 0 0 2px var(--ck-primary-dark);
}

.ck-percobaan-kiri {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ck-percobaan-tanggal {
  font-weight: 600;
  color: var(--ck-ink);
  font-size: .9375rem;
}

.ck-percobaan-tanda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s2);
}

.ck-percobaan-dihitung,
.ck-percobaan-telat {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--ck-s2);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
}

.ck-percobaan-dihitung {
  background: var(--ck-primary-dark);
  color: #fff;
}

.ck-dark .ck-percobaan-dihitung { color: var(--ck-bg); }

.ck-percobaan-telat {
  background: var(--ck-bad-bg);
  color: var(--ck-bad-teks);
}

.ck-percobaan-nilai {
  flex: 0 0 auto;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ck-ink);
}

.ck-percobaan-nilai strong { font-size: 1.0625rem; }

.ck-percobaan-dari {
  font-size: .75rem;
  color: var(--ck-muted);
}

/* DIHAPUS: .ck-dark .ck-percobaan-item { background: var(--ck-bg) }.

   Cacat kembar dari .ck-dark .ck-papan-item: redundan (aturan dasarnya sudah
   var(--ck-bg), dan tokennya sudah berganti sendiri di mode gelap) sekaligus
   merusak — ia mengalahkan .ck-percobaan-item.is-dihitung yang berspesifisitas
   sama dan berada lebih atas, sehingga di mode gelap mahasiswa tidak lagi bisa
   melihat percobaan MANA yang dipakai sebagai nilainya. */


/* ==========================================================================
   23. PANEL BERTINTA DI DALAM KARTU
   --------------------------------------------------------------------------
   Dipakai kartu "Ubah kata sandi" di halaman Edit Profil supaya sepadan dengan
   panel "Data Mahasiswa" milik plugin yang berdiri tepat di atasnya. Nilainya
   diambil dari token tema yang KEBETULAN bernilai sama dengan hex yang ditulis
   frontend.css plugin (--ck-primary-bg = #eaf2fe, --ck-primary-dark = #1c6ad4,
   --ck-ink-2 = #3e4c59), jadi keduanya sepadan di mode terang dan tetap benar
   di mode gelap — sesuatu yang tidak bisa dicapai dengan menyalin hex-nya.

   Kelasnya .ck-panel-*, BUKAN .cq-profil-*. Kelas .cq-* milik plugin dan haram
   disentuh tema; memakainya berarti satu pembaruan plugin bisa mengubah
   tampilan halaman tema tanpa peringatan.
   ========================================================================== */

.ck-panel {
  margin-top: var(--ck-s4);
  padding: var(--ck-s5);
  border: 1px solid var(--ck-line);
  border-radius: 14px;
  /* Bertinta di puncak lalu memudar ke permukaan kartu, sama seperti panel
     plugin: kepalanya menonjol tanpa membuat seluruh kotak jadi biru. */
  background: linear-gradient(180deg, var(--ck-primary-bg) 0%, var(--ck-surface) 60%);
}

.ck-panel-kepala {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ck-s3);
  margin-bottom: var(--ck-s1);
}

.ck-panel-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ck-surface);
  color: var(--ck-primary-dark);
}

.ck-panel-ikon svg { width: 20px; height: 20px; }

.ck-panel-judul {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ck-primary-dark);
}

.ck-panel-intro {
  margin: 0 0 var(--ck-s4);
  font-size: .875rem;
  color: var(--ck-ink-2);
}

/* Kolom di dalam panel dijaga tetap satu kolom di ponsel; dua kolom baru masuk
   akal begitu kartunya lebih lebar daripada dua kolom minimum. */
.ck-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Row-gap TIDAK boleh nol. Di >=40rem grid ini berisi tepat dua butir dalam
     dua kolom, jadi hanya ada satu baris dan row-gap tak berpengaruh; di bawah
     40rem keduanya menumpuk, dan dengan 0 kolom "Kata sandi baru" menempel
     rapat ke "Ulangi kata sandi baru". --ck-s4 menyamakannya dengan gap
     .ck-auth-form, sehingga jaraknya seragam di seluruh formulir. */
  gap: var(--ck-s4) var(--ck-s5);
}

@media (min-width: 40rem) {
  .ck-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kotak keterangan di kaki panel. */
.ck-panel-info {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s3);
  margin: var(--ck-s2) 0 0;
  padding: var(--ck-s3) var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-radius: 10px;
  background: var(--ck-bg);
  font-size: .84375rem;
  line-height: 1.5;
  color: var(--ck-ink-2);
}

.ck-panel-info-ikon {
  flex: 0 0 auto;
  color: var(--ck-primary-dark);
}

.ck-panel-info-ikon svg { width: 18px; height: 18px; display: block; }

/* Tombol di kanan bawah, sejajar dengan "Simpan Data" milik panel plugin.
   Di ponsel ia melebar penuh — sasaran sentuh yang lebar lebih penting
   daripada perataan kanan pada layar selebar 390px. */
.ck-panel-aksi {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ck-s4);
}

@media (max-width: 30rem) {
  .ck-panel-aksi { display: block; }
  .ck-panel-aksi .ck-btn { width: 100%; }
}

/* Tombol kembali di kaki halaman Edit Profil. */
.ck-edit-kembali {
  margin: var(--ck-s5) 0 0;
}

/* --- Merek di bilah atas, hanya saat rel tidak dicetak (belum masuk) --- */
.ck-topbar-merek {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.ck-topbar-nama {
  display: block;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ck-primary-dark);
}

.ck-topbar-sub {
  display: block;
  margin-top: 1px;
  font-size: .75rem;
  color: var(--ck-muted);
}

/* Di layar sempit yang tersisa hanya nama situs; keterangannya memakan seluruh
   sisa lebar bilah dan mendesak tombol Masuk. */
@media (max-width: 30rem) {
  .ck-topbar-sub { display: none; }
}
.ck-topbar-aksi { display: flex; align-items: center; gap: var(--ck-s2); margin-inline-start: auto; }

/* Chip akun: nama di atas, peran di bawah. */
.ck-akun-teks { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }

/* LEBARNYA DIBATASI, dan itu bukan soal rapi melainkan soal ongkos. Kolom
   pencarian adalah satu-satunya butir lentur di bilah ini, jadi setiap piksel
   yang dipakai nama akun diambil LANGSUNG dari sana. Terukur pada 577px, ruang
   teks kolom pencarian: "fp" 192px, "Fhandy" 163px, "Abdurrahman" 124px — nama
   seseorang tidak boleh menentukan seberapa terpakai kotak pencarian itu.

   6rem = 96px menampung sekitar tiga belas huruf, jadi batas ini TIDAK pernah
   menyentuh nama yang wajar (yang terpanjang di antara contoh di atas terukur
   95px, pas di ambang). Ia ada sebagai pagar terhadap kasus ekstrem saja —
   tanpanya satu nama depan yang sangat panjang bisa memeras kotak pencarian
   sampai tak terpakai di lebar berapa pun. Yang terpotong hanya tampilannya;
   pembaca layar tetap menerima nama utuh dari teks aslinya. */
.ck-akun-teks-nama {
  font-weight: 600;
  font-size: .875rem;
  color: var(--ck-ink);
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-akun-teks-peran { font-size: .75rem; color: var(--ck-muted); }

/* .ck-main di dalam kerangka: isi tumbuh, kaki halaman terdorong ke bawah. */
.ck-shell-badan .ck-main { flex: 1 0 auto; }

/* Tirai hanya hidup di layar sempit; di layar lebar ia tidak pernah tampil. */
.ck-shell-tirai { display: none; }

/* ==========================================================================
   LAYAR LEBAR — rel selalu terbuka, tombol hamburger disembunyikan
   ========================================================================== */
/*
   Tanpa rel (pengunjung yang belum masuk): satu kolom di SETIAP lebar.
   Ditulis di sini, di luar media query, supaya aturan 62rem di bawah tidak
   perlu tahu apa-apa tentang keadaan ini — dan ia tetap tidak boleh menang,
   karena itu pengecualiannya diulang di dalam media query itu juga.
*/
.ck-shell--tanpa-rel { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 62rem) {
  .ck-shell { grid-template-columns: 16rem minmax(0, 1fr); }
  .ck-shell--tanpa-rel { grid-template-columns: minmax(0, 1fr); }

  .ck-rel {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  /* Menimpa aturan lama di @media (min-width: 782px) yang juga menyetel
     display; ditulis eksplisit supaya niatnya terbaca, bukan bergantung
     pada urutan berkas. */
  .ck-nav-toggle { display: none; }
}

/* ==========================================================================
   LAYAR SEMPIT — rel jadi panel geser
   --------------------------------------------------------------------------
   Dibuka lewat aria-expanded pada .ck-nav-toggle, mekanisme yang SUDAH
   ditangani assets/js/theme.js — tidak ada JavaScript baru.
   ========================================================================== */
@media (max-width: 61.99rem) {
  .ck-rel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    width: min(17rem, 84vw);
    overflow-y: auto;
    transform: translateX(-102%);
    /* visibility: hidden BUKAN hiasan. `transform` hanya memindahkan LUKISAN
       rel ke luar layar: isinya tetap berada di urutan Tab dan di pohon
       aksesibilitas. Mahasiswa berpapan ketik atau pembaca layar yang menekan
       Tab dari "Lewati ke konten utama" karena itu masuk ke belasan tautan
       navigasi yang tidak terlihat di layar, satu per satu, sebelum sampai ke
       isi halaman — dan fokusnya berada di tempat yang mustahil ia lihat.

       visibility mengeluarkan elemen dari keduanya sekaligus, dan ia dapat
       ditransisikan (tidak seperti display), sehingga animasi geser tetap
       utuh. Karena aturan ini hidup di dalam @media (max-width: 61.99rem), rel
       desktop tidak pernah tersentuh dan tidak ada keadaan yang perlu
       disinkronkan JavaScript. */
    visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }

  /* Tanpa JavaScript tombolnya mati, jadi rel tidak boleh disembunyikan di
     balik transform — ia dikembalikan ke aliran dokumen. */
  .no-js .ck-rel {
    position: static;
    width: auto;
    transform: none;
    visibility: visible;
  }

  /* Yang bergerak hanya transform, jadi animasinya boleh dimatikan penuh bagi
     yang memintanya tanpa mengubah keadaan akhir sedikit pun. */
  @media (prefers-reduced-motion: reduce) {
    .ck-rel { transition: none; }
  }

  .ck-shell:has(.ck-nav-toggle[aria-expanded="true"]) .ck-rel {
    transform: translateX(0);
    visibility: visible;
  }

  .ck-shell:has(.ck-nav-toggle[aria-expanded="true"]) .ck-shell-tirai {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 23, 42, .45);
  }

  .ck-nav-toggle { display: inline-flex; }
  .ck-rel-tutup { display: inline-flex; }

  /* Tanpa JS rel tidak pernah tertutup, jadi tombol tutupnya tidak akan
     melakukan apa-apa — dan tombol mati lebih buruk daripada tidak ada. */
  .no-js .ck-rel-tutup { display: none; }

  /* Alasan yang sama untuk hamburgernya. Tanpa JS aria-expanded-nya membeku di
     "false" padahal relnya justru terbentang di aliran dokumen: tombolnya mati
     DAN keterangannya kepada pembaca layar terbalik. */
  .no-js .ck-nav-toggle { display: none; }

  /* Peran disembunyikan di layar sempit; namanya saja sudah cukup dan
     bilahnya harus muat pencarian. */
  .ck-akun-teks-peran { display: none; }
}

@media (max-width: 30rem) {
  /* Di bawah 480px nama pun dilepas: yang tersisa inisial bulat, dan itu
     tetap punya nama aksesibel dari teks tersembunyi di dalam tautannya. */
  .ck-akun-teks { display: none; }
}

/* --- Mode gelap --- */
.ck-dark .ck-rel,
.ck-dark .ck-topbar { background: var(--ck-surface); border-color: var(--ck-line); }
/* DIHAPUS: .ck-dark .ck-sidenav-item:hover / :focus-visible.

   Nilainya identik dengan aturan hover mode terang (var(--ck-bg), yang tokennya
   sudah berganti sendiri di mode gelap), jadi ia tidak pernah mengubah apa pun
   pada butir biasa. Yang ia ubah justru butir AKTIF: spesifisitasnya 0-3-0
   mengalahkan .ck-sidenav-item.is-aktif yang hanya 0-2-0, sehingga di mode
   gelap penanda "kamu sedang di halaman ini" lenyap selama kursor berada di
   atasnya — dan kembali saat kursor pergi. Di mode terang hal itu tidak terjadi
   karena .is-aktif berada di bawah :hover dengan spesifisitas sama. Dua mode
   yang berperilaku berbeda pada kendali navigasi yang sama. */


/* ==========================================================================
   30. DASBOR DUA KOLOM
   --------------------------------------------------------------------------
   Kolom utama memuat yang perlu lebar; kolom samping memuat dua daftar sempit.
   Wadah sampingnya hanya dicetak PHP bila ada isinya, jadi tidak ada aturan
   ":empty" di sini yang harus menebak-nebak.
   ========================================================================== */

.ck-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-s5);
  align-items: start;
}

.ck-dash-utama {
  display: grid;
  gap: var(--ck-s5);
  min-width: 0;
}

.ck-dash-samping {
  display: grid;
  gap: var(--ck-s5);
  min-width: 0;
}

/*
   RITME VERTIKAL DIMILIKI gap, TITIK.

   Anak-anak kolom ini membawa margin-bottom dari masa dasbor masih satu aliran
   biasa: .ck-peringatan-profil 16px, .ck-kartu-row 24px, .ck-run 24px. Setelah
   wadahnya jadi kisi, margin itu BERTUMPUK di atas gap dan jaraknya terukur
   40 / 48 / 48 / 24px — empat jarak berbeda di satu kolom, tanpa satu pun yang
   disengaja. Dinolkan di sini, bukan di masing-masing komponen, karena
   komponen-komponen itu masih dipakai di luar kisi ini dan margin-nya masih
   benar di sana.
*/
.ck-dash-utama > *,
.ck-dash-samping > * {
  margin-bottom: 0;
}

/*
   TITIK PUTUS 76rem, bukan 62rem seperti kerangka rel.

   Di 62rem rel navigasi baru saja muncul dan langsung memakan 16rem, sehingga
   kolom isi tinggal ~46rem. Membelahnya lagi jadi dua di situ menyisakan kolom
   utama selebar ~22rem — lebih sempit daripada tampilan ponsel, dengan tabel
   perkiraan nilai yang harus digulir mendatar di layar yang sebenarnya lebar.
   Di 76rem kolom isinya ~60rem: dibelah pun kolom utamanya masih ~38rem.
*/
@media (min-width: 76rem) {
  .ck-dash {
    /* Lebar TETAP, bukan clamp() persentase. Wadahnya sudah dibatasi
       --ck-wide (1180px), jadi lebar yang tersedia praktis tidak berubah lagi
       di atas titik putus ini: persentase apa pun akan selalu jatuh ke nilai
       minimumnya dan hanya menyamar sebagai aturan yang lentur. */
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  /* Satu kolom saja saat tidak ada isi samping: kolom utama memakai seluruh
     lebar, bukan menyisakan kolom kosong di kanan. */
  .ck-dash--tunggal {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ikut menggulung bersama isi, lalu berhenti di bawah bilah atas yang sticky.
     Token --ck-bilah = tinggi bilah + napas, dipakai bersama scroll-padding-top
     dan .ck-sidebar. */
  .ck-dash-samping {
    position: sticky;
    top: var(--ck-bilah);

    /* Jebakan kolom lengket: bila isinya lebih tinggi daripada layar, bagian
       bawahnya TIDAK PERNAH bisa dijangkau — ia terpaku di tempat sementara
       halaman terus bergulir di belakangnya. Dibatasi setinggi layar dan
       diberi gulir sendiri, jadi daftar tenggat yang panjang tetap terbaca.
       Dikurangi tinggi bilah + 1rem, jadi ia ikut benar bila bilahnya
       berubah tinggi. */
    max-height: calc(100vh - var(--ck-bilah) - 1rem);
    overflow-y: auto;
  }
}


/* ==========================================================================
   31. KEPALA DASBOR (HERO)
   ========================================================================== */

.ck-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-s5);
  align-items: center;
  margin-bottom: var(--ck-s5);
  padding: var(--ck-s6) var(--ck-s5);
  border-radius: var(--ck-radius);
  background: var(--ck-primary-bg);
}

/*
   overflow-wrap DIWARISKAN, jadi satu aturan di sini menutupi prodi, judul,
   sapaan, dan kalimat keadaan sekaligus.

   Nama tampilan datang dari pengguna dan tidak selalu berspasi: "Halo,
   MuhammadNurfaizAbdurrahmanSyahputraWijayakusumaningrat." terukur meluber
   507px di kotak selebar 310px — teksnya keluar dari kartu hero di ponsel.

   'anywhere', bukan 'break-word': hanya 'anywhere' yang ikut mengecilkan
   ukuran min-content, sehingga jalur kisinya pun tidak dipaksa melebar oleh
   satu kata panjang. 'break-word' memperbaiki tampilan teksnya saja dan
   membiarkan tata letaknya tetap terdorong.

   Tombolnya tidak terpengaruh: .ck-hero-aksi-teks memakai white-space: nowrap
   dan dipotong elipsis, dan nowrap menang atas pembungkusan.
*/
.ck-hero-teks {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ck-hero-prodi {
  margin: 0 0 var(--ck-s2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* --ck-primary-dark, bukan --ck-primary: di atas latar --ck-primary-bg yang
     sudah kebiruan, yang lebih muda jatuh di bawah 4,5:1 pada ukuran 12px. */
  color: var(--ck-primary-dark);
}

.ck-hero-judul {
  margin: 0;
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ck-ink);
}

.ck-hero-sapa {
  margin: var(--ck-s3) 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ck-ink);
}

.ck-hero-keadaan {
  margin: var(--ck-s1) 0 0;
  color: var(--ck-ink-2);
}

.ck-hero-aksi {
  margin-top: var(--ck-s5);
  max-width: 100%;
}

/*
   Judul kuis bisa panjang, jadi labelnya dielipsis. Aturannya menempel pada
   SPAN di dalam tombol, bukan pada tombolnya: .ck-btn adalah inline-flex, dan
   text-overflow tidak pernah berlaku pada wadah flex — teksnya cuma terpangkas
   di tengah kata tanpa titik-titik. Teks penuhnya tetap utuh di DOM, jadi
   pembaca layar tetap menyebut judul lengkapnya.
*/
.ck-hero-aksi-teks {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Peringatan potongan nilai di bawah tombol. --ck-bad-teks, bukan --ck-warn:
   kuning gagal ambang teks di atas latar hero yang terang. */
.ck-hero-telat {
  margin: var(--ck-s2) 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ck-bad-teks);
}

/* Ilustrasi. Disembunyikan di ponsel: ia murni hiasan, dan di layar sempit
   ia hanya mendorong sapaan serta tombolnya ke bawah lipatan. */
.ck-hero-ilus { display: none; }

@media (min-width: 48rem) {
  .ck-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  }

  .ck-hero-ilus {
    display: block;
    min-width: 0;
  }
}

@media (min-width: 76rem) {
  .ck-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
}

/* ==========================================================================
   32. PAPAN PERINGKAT PERKIRAAN NILAI
   ========================================================================== */

.ck-papan {
  list-style: none;
  margin: var(--ck-s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
  counter-reset: none;
}

.ck-papan-item {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  padding: var(--ck-s3);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
}

/* Baris milik pengguna sendiri. Ditandai latar DAN garis tepi DAN lencana
   "Anda" di markup — warna tidak pernah jadi satu-satunya pembawa makna. */
.ck-papan-item.is-saya {
  background: var(--ck-primary-bg);
  box-shadow: inset 0 0 0 2px var(--ck-primary-dark);
}

.ck-papan-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ck-surface);
  color: var(--ck-ink-2);
  font-weight: 700;
  font-size: .8125rem;
}

.ck-papan-orang {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.ck-papan-nama {
  font-weight: 600;
  color: var(--ck-ink);
  /* Nama peserta datang dari pengguna dan tidak selalu berspasi. */
  overflow-wrap: anywhere;
}

.ck-papan-anda {
  display: inline-block;
  margin-inline-start: var(--ck-s2);
  padding: 1px var(--ck-s2);
  border-radius: 999px;
  background: var(--ck-primary-dark);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: 1px;
}

/* Jumlah kuis. Kecil, tetapi TIDAK boleh hilang: tanpa angka ini rata-rata
   dari satu kuis tampak setara dengan rata-rata dari delapan kuis. */
.ck-papan-kuis {
  font-size: .75rem;
  color: var(--ck-muted);
}

.ck-papan-nilai {
  flex: 0 0 auto;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ck-primary-dark);
  font-variant-numeric: tabular-nums;
}

.ck-papan-kosong,
.ck-papan-catat {
  margin: var(--ck-s4) 0 0;
  font-size: .8125rem;
  color: var(--ck-muted);
}

/* Kotak keadaan kosong papan peringkat: gambar di atas, kalimat di bawah,
   keduanya di tengah. Lebar kalimatnya dibatasi supaya tidak membentang
   selebar kartu dan jadi susah dibaca. */
.ck-papan-kosong-kotak {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ck-s5) 0 var(--ck-s2);
  text-align: center;
}

.ck-papan-kosong-kotak .ck-papan-kosong {
  max-width: 42ch;
}

/* DIHAPUS: .ck-dark .ck-papan-item { background: var(--ck-bg) }.

   Aturan itu tidak menambah apa pun — .ck-papan-item sendiri sudah memakai
   var(--ck-bg), dan token itu memang sudah berganti nilai di blok .ck-dark —
   tetapi ia MERUSAK: spesifisitasnya (0-2-0) sama dengan
   .ck-papan-item.is-saya dan letaknya lebih bawah, sehingga di mode gelap baris
   milik pengguna sendiri kehilangan latar sorotnya dan tampak sama dengan
   semua baris lain. Penandanya tinggal cincin tepi dan lencana "Anda", padahal
   di mode terang penandanya tiga lapis. */
.ck-dark .ck-papan-no { background: var(--ck-surface); }

/* Di mode gelap --ck-primary-dark adalah biru MUDA (#5b9df2); huruf putih di
   atasnya hanya 2,4:1. Lencana "Anda" karena itu memakai tinta gelap tema. */
.ck-dark .ck-papan-anda { color: var(--ck-bg); }


/* ==========================================================================
   33. DAFTAR KUIS BERKELOMPOK & PERKIRAAN DI KARTU
   ========================================================================== */

/* Judul kelompok di arsip kuis. Kisi kartu di bawahnya sudah bermargin dari
   .ck-grid, jadi yang diatur di sini hanya jarak DI ATAS judul — dan judul
   pertama tidak perlu jarak itu. */
.ck-daftar-judul {
  margin: var(--ck-s6) 0 var(--ck-s4);
  font-size: 1.25rem;
  font-weight: 700;
}

.ck-daftar-judul:first-of-type {
  margin-top: 0;
}

/* Perkiraan nilai di kartu kuis yang sudah dikerjakan. */
.ck-quizcard-perkiraan {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--ck-s2);
  margin: 0;
  padding-top: var(--ck-s3);
  border-top: 1px solid var(--ck-line);
}

.ck-quizcard-perkiraan-label {
  font-size: .8125rem;
  color: var(--ck-muted);
}

.ck-quizcard-perkiraan-nilai {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.125rem;
  color: var(--ck-primary-dark);
  font-variant-numeric: tabular-nums;
}

.ck-quizcard-perkiraan-catat {
  flex-basis: 100%;
  font-size: .6875rem;
  color: var(--ck-muted);
}


/* ==========================================================================
   34. PESERTA BERISIKO (PERKIRAAN D KE BAWAH)
   ========================================================================== */

.ck-risiko-untuk {
  margin: 0 0 var(--ck-s3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ck-muted);
}

.ck-risiko-dasar {
  margin: 0 0 var(--ck-s4);
  font-size: .8125rem;
  color: var(--ck-muted);
}

.ck-risiko {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
}

.ck-risiko-item {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  padding: var(--ck-s3);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
  /* Garis merah di tepi kiri: penanda kedua di samping huruf nilainya, jadi
     maknanya tidak bersandar pada warna saja. */
  border-inline-start: 3px solid var(--ck-bad-teks);
}

.ck-risiko-orang {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.ck-risiko-nama {
  font-weight: 600;
  color: var(--ck-ink);
  overflow-wrap: anywhere;
}

/*
   Baris kedua: NIM lalu keterangan. Membungkus di layar sempit — keterangannya
   turun ke bawah NIM alih-alih memaksa barisnya melebar.

   TANPA TITIK PEMISAH, dan itu disengaja. Versi pertama memakai "·" lewat
   ::before pada butir kedua; terukur di 390px keterangannya memang turun ke
   baris berikutnya, sehingga titiknya berdiri sendiri memimpin baris kedua
   seperti butir daftar yang tersasar. Pemisah yang rusak justru pada lebar
   yang paling banyak dipakai tidak sepadan dipertahankan. Pemisahannya kini
   datang dari hal yang tidak bisa patah: NIM lebih tebal dan lebih gelap,
   keterangannya lebih redup, dan ada jarak di antara keduanya.
*/
.ck-risiko-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ck-s3);
  font-size: .75rem;
  color: var(--ck-muted);
}

/* NIM memakai angka bertabulasi supaya deretan nomor induk yang panjangnya
   sama berbaris rapi ke bawah dan mudah dipindai mata. */
.ck-risiko-nim {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ck-ink-2);
}

/* NIM yang belum diisi bukan sekadar kosong — ia berarti baris ini tidak bisa
   dicocokkan ke SIAKAD. Dibedakan, tetapi tanpa warna bahaya: yang salah bukan
   mahasiswanya. */
.ck-risiko-nim--kosong {
  font-weight: 400;
  font-style: italic;
  color: var(--ck-muted);
}

.ck-risiko-kuis {
  font-size: .75rem;
  color: var(--ck-muted);
}

.ck-risiko-angka {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--ck-s2);
}

.ck-risiko-nilai {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ck-ink-2);
  font-variant-numeric: tabular-nums;
}

.ck-risiko-huruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px var(--ck-s2);
  border-radius: 999px;
  background: var(--ck-bad-bg);
  color: var(--ck-bad-teks);
  font-weight: 700;
  font-size: .8125rem;
}

.ck-risiko-kosong,
.ck-risiko-catat {
  margin: 0;
  font-size: .8125rem;
  color: var(--ck-muted);
}

.ck-risiko-catat {
  margin-top: var(--ck-s4);
}

.ck-dark .ck-risiko-item { background: var(--ck-bg); }


/* --- Progres pengerjaan di bawah ambang --- */

.ck-progres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ck-s2);
}

.ck-progres-item {
  display: grid;
  /* Nama melar, bilah tetap, persen sekecil isinya. Di layar sempit bilahnya
     turun ke baris kedua bersama persentasenya. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ck-s2) var(--ck-s3);
  padding: var(--ck-s3);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
}

.ck-progres-orang {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ck-progres-nama {
  font-weight: 600;
  color: var(--ck-ink);
  overflow-wrap: anywhere;
}

.ck-progres-kuis {
  font-size: .75rem;
  color: var(--ck-muted);
}

.ck-progres-bilah {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 8px;
  border-radius: 999px;
  background: var(--ck-line-2);

  /*
     CINCIN TEPI, bukan alur yang digelapkan.

     Isian --ck-line-2 sendiri hanya 1,42:1 terhadap latar butir — peserta
     bernilai 0% karena itu tidak menampilkan apa pun sama sekali, dan
     "0 dari 8" kehilangan pasangan visualnya. Menggelapkan alurnya memang
     menaikkan angka itu, tetapi sekaligus menjatuhkan kontras ISI terhadap
     alur ke 1,4:1 — batas yang justru paling penting pada bilah progres.

     Cincin 1px menyelesaikan keduanya: ia menandai seberapa panjang alurnya
     tanpa menyentuh warna dalamnya, jadi batas isi-terhadap-alur tetap utuh.
  */
  box-shadow: inset 0 0 0 1px var(--ck-faint);
  overflow: hidden;
}

.ck-progres-isi {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ck-primary-dark);
}

.ck-progres-persen {
  grid-column: 2;
  grid-row: 1;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ck-ink-2);
  font-variant-numeric: tabular-nums;
}

.ck-dark .ck-progres-item { background: var(--ck-bg); }


/* ==========================================================================
   35. ILUSTRASI TEMA
   --------------------------------------------------------------------------
   Semua ilustrasi memakai satu palet yang sama dan satu kelas dasar .ck-ilus.
   Berkasnya di template-parts/ilustrasi-*.php, dipanggil dengan
   get_template_part( 'template-parts/ilustrasi', '<nama>' ).

   SEMUANYA HIASAN MURNI: aria-hidden, tanpa <title>, tanpa role="img". Tidak
   ada satu pun keterangan di dalam gambar yang tidak juga tertulis sebagai
   teks di sebelahnya, jadi menyebutkannya ke pembaca layar hanya kebisingan.
   ========================================================================== */

.ck-ilus {
  display: block;
  width: 100%;
  height: auto;

  /* Palet gambar diikat ke token tema, jadi mode gelap ikut berganti sendiri
     tanpa satu pun aturan .ck-dark tambahan di bawah. */
  --ck-ilus-badan: var(--ck-surface);
  --ck-ilus-garis: var(--ck-primary-dark);
  --ck-ilus-aksen: var(--ck-primary);

  /* --ck-faint, BUKAN --ck-line-2. Yang terakhir dirancang untuk garis pemisah
     di atas latar putih; di atas latar hero yang kebiruan ia jatuh ke 1,35:1
     dan seluruh rak pipa serta garis tanah menghilang. --ck-faint terukur
     3,80:1 di mode terang dan 4,98:1 di mode gelap. */
  --ck-ilus-tanah: var(--ck-faint);

  /* Nyala suar SENGAJA tidak ikut token tema: api berwarna jingga di tema
     apa pun. --ck-warn (kuning) hanya 1,65:1 di atas latar hero terang —
     nyalanya lenyap justru di mode yang paling banyak dipakai. Jingga tua ini
     terukur 3,81:1 di terang dan 3,33:1 di gelap. */
  --ck-ilus-api: #d9480f;
}

/* Di mode gelap --ck-surface (#1c242e) nyaris sama dengan latar hero
   --ck-primary-bg (#1b2b40), dan badan gambarnya jadi rata dengan latar.
   Dibuat lebih gelap dari latarnya supaya siluetnya tetap terbaca. */
.ck-dark .ck-ilus { --ck-ilus-badan: var(--ck-bg); }

/* Ukuran di dalam kotak keadaan kosong. Dibatasi supaya gambar tidak
   mengambil alih kotaknya — kalimatnyalah yang menjelaskan keadaan, gambarnya
   hanya membuat kotak itu tidak terasa seperti kegagalan. */
.ck-ilus--kosong {
  max-width: 200px;
  margin-inline: auto;
}


/* ==========================================================================
   36. PRESENSI PER PERTEMUAN
   --------------------------------------------------------------------------
   Halaman yang dibuka peserta dari tautan yang dibagikan pengelola. Sangat
   sedikit isinya dan disengaja: satu keputusan, satu tombol. Setiap elemen
   tambahan di layar ini adalah hal yang harus dibaca orang yang sedang duduk
   di kelas sambil menunggu kuliah mulai.
   ========================================================================== */

.ck-presensi-kicker {
  margin: 0 0 var(--ck-s1);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ck-primary-dark);
}

.ck-presensi .ck-card-body {
  display: grid;
  gap: var(--ck-s4);
}

/* Pita hasil sesudah tombol ditekan. Warna BUKAN satu-satunya pembeda: teksnya
   sendiri sudah menyatakan berhasil atau tidak (SC 1.4.1). */
.ck-presensi-pesan {
  margin: 0;
  padding: var(--ck-s3) var(--ck-s4);
  border-radius: var(--ck-radius-sm);
  font-weight: 600;
}

.ck-presensi-pesan--ok {
  background: var(--ck-ok-bg);
  color: var(--ck-ok-teks);
}

.ck-presensi-pesan--galat {
  background: var(--ck-bad-bg);
  color: var(--ck-bad-teks);
}

.ck-presensi-status {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ck-ink);
}

.ck-presensi-status--hadir { color: var(--ck-ok-teks); }
.ck-presensi-status--tutup { color: var(--ck-muted); }

.ck-presensi-intro {
  margin: 0;
  color: var(--ck-ink-2);
}

/* Pasangan label/nilai bertumpuk. Nilai dibuat lebih besar daripada labelnya:
   yang dicari mata peserta adalah NIM dan jamnya, bukan kata "NIM". */
.ck-presensi-fakta {
  margin: 0;
  display: grid;
  gap: var(--ck-s3);
  padding: var(--ck-s4);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-bg);
}

.ck-presensi-fakta > div {
  display: grid;
  gap: 2px;
}

.ck-presensi-fakta dt {
  margin: 0;
  font-size: .8125rem;
  color: var(--ck-muted);
}

.ck-presensi-fakta dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ck-ink);
}

.ck-presensi-kosong { color: var(--ck-muted); font-style: italic; }

.ck-presensi-catatan {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ck-ink-2);
}


/* Kolom kode kelas. Angkanya diketik sambil berdiri, sambil melihat proyektor —
   jadi hurufnya besar, berjarak, dan bertipe tabular agar enam angka gampang
   dicocokkan satu per satu dengan yang di layar depan. */
.ck-presensi-kode { margin: 0 0 .5rem; }

.ck-presensi-kode label { font-size: .9375rem; }

.ck-presensi-kode-isi {
  width: 100%;
  max-width: 11rem;
  margin-top: .35rem;
  padding: .6rem .75rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ck-ink);
  background: var(--ck-surface);
  border: 2px solid var(--ck-line);
  border-radius: var(--ck-radius-sm);
}

.ck-presensi-kode-isi:focus-visible {
  outline: 3px solid var(--ck-primary);
  outline-offset: 2px;
  border-color: transparent;
}
.ck-presensi-form { margin: 0; }

/* Tombol dibuat selebar penuh dan tinggi: ditekan sambil berdiri, dengan satu
   tangan, di ponsel. 52px melampaui ambang 44px dengan sengaja. */
.ck-presensi-tombol {
  width: 100%;
  min-height: 52px;
  font-size: 1.0625rem;
}

@media (min-width: 30rem) {
  .ck-presensi-tombol { width: auto; min-width: 14rem; }
}

/* Kartu presensi di dasbor. Angka besar dulu, ajakan sesudahnya. */
.ck-presensi-rekap {
  margin: 0 0 var(--ck-s2);
  font-size: 1rem;
  color: var(--ck-ink-2);
}

.ck-presensi-rekap strong {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Rincian per pertemuan di kartu dasbor ----
   Hanya pertemuan yang SUDAH DITUTUP atau yang memang sudah diisi mahasiswa
   ini yang punya baris; saringannya ada di template-parts/dash-presensi.php
   dan alasannya ditulis panjang di sana. Jangan menyiasatinya lewat CSS
   (menyembunyikan baris dengan display:none) — barisnya tetap terkirim ke
   peramban dan tetap terbaca di sumber halaman. */
.ck-presensi-tabel { min-width: 20rem; }

.ck-presensi-tanda {
  display: inline-block;
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
}

/* Kata "Hadir"/"Tidak hadir" sudah membedakan keduanya tanpa warna; warna di
   sini hanya mempercepat pemindaian mata (SC 1.4.1). */
.ck-presensi-tanda--ok { color: var(--ck-ok-teks); }
.ck-presensi-tanda--no { color: var(--ck-muted); }

/* Jam pengisian turun ke baris sendiri di layar sempit: "Hadir 2 Okt 2026,
   08.04.12 WIT" di satu baris memaksa kolomnya melebihi 375px dan yang
   menggulung adalah seluruh tabel. */
.ck-presensi-jam {
  display: block;
  margin-top: 2px;
  color: var(--ck-muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.ck-presensi-ajakan {
  margin: 0 0 var(--ck-s3);
  font-weight: 600;
  color: var(--ck-ink);
}

/* =====================================================================
   KETENTUAN KUIS (halaman pengelola)

   Seluruh warna diambil dari token tema. Halaman ini sengaja TIDAK punya
   palet sendiri: ia bagian dari situs yang sama, dan warna yang berdiri
   sendiri akan menyimpang begitu tema disetel ulang.
   ================================================================== */

.ck-ket { max-width: var(--ck-wide); }

.ck-ket-cap {
  margin: 0 0 var(--ck-s1);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-primary);
}

/* ---- daftar isi ---- */
.ck-ket-isi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px var(--ck-s5);
  margin: var(--ck-s5) 0 var(--ck-s6);
  padding-top: var(--ck-s3);
  border-top: 1px solid var(--ck-line);
}
.ck-ket-isi a {
  display: flex;
  gap: var(--ck-s2);
  align-items: baseline;
  padding: 5px 0;
  font-size: .92rem;
  color: var(--ck-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ck-ket-isi a:hover,
.ck-ket-isi a:focus-visible {
  color: var(--ck-primary);
  border-bottom-color: var(--ck-primary);
}
.ck-ket-isi span {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--ck-faint);
}

/* ---- bab ---- */
.ck-ket-bab { margin: var(--ck-s6) 0 0; scroll-margin-top: var(--ck-s5); }
.ck-ket-bab:focus { outline: none; }

.ck-ket-judul {
  display: flex;
  align-items: baseline;
  gap: var(--ck-s4);
  margin: 0 0 var(--ck-s5);
  padding-bottom: var(--ck-s2);
  border-bottom: 2px solid var(--ck-ink);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.2;
  text-wrap: balance;
}
.ck-ket-no {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--ck-primary);
  font-size: .95em;
}

/* ---- pasal ---- */
.ck-ket-pasal {
  display: flex;
  gap: var(--ck-s4);
  align-items: flex-start;
  margin: 0 0 var(--ck-s5);
}
.ck-ket-pasal > .ck-ket-id {
  flex: none;
  width: 44px;
  padding-top: .3em;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ck-faint);
}
.ck-ket-pasal > div { flex: 1; min-width: 0; }
.ck-ket-pasal h3 {
  margin: 0 0 var(--ck-s1);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ck-ink);
}
.ck-ket-pasal p { margin: 0 0 var(--ck-s2); max-width: 70ch; }
.ck-ket-pasal p:last-child { margin-bottom: 0; }
.ck-ket-pasal ul { margin: var(--ck-s2) 0 0; padding-left: 20px; max-width: 72ch; }
.ck-ket-pasal li { margin: 0 0 var(--ck-s2); }

.ck-ket-sumber {
  font-size: .86rem;
  color: var(--ck-faint);
}
.ck-ket-turun { color: var(--ck-bad-teks); }

.ck-ket-rumus {
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-surface);
  border-left: 3px solid var(--ck-primary);
  border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
  box-shadow: var(--ck-shadow);
  font-variant-numeric: tabular-nums;
}

/* ---- kotak catatan ---- */
.ck-ket-catat {
  margin: var(--ck-s3) 0;
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-primary-bg);
  border-left: 3px solid var(--ck-primary);
  border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
}
.ck-ket-catat--awas {
  background: var(--ck-warn-bg);
  border-left-color: var(--ck-warn);
}
.ck-ket-catat p { margin: 0; }
.ck-ket-tag {
  display: block;
  margin: 0 0 var(--ck-s1);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-primary);
}
.ck-ket-catat--awas .ck-ket-tag { color: var(--ck-warn-teks); }

.ck-ket-alarm { border-left: 4px solid var(--ck-bad); }

/* ---- tabel ---- */
.ck-ket-tabelwrap {
  overflow-x: auto;
  margin: var(--ck-s4) 0;
  border-top: 2px solid var(--ck-ink);
  border-bottom: 1px solid var(--ck-line-2);
}
.ck-ket-tabel {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
}
.ck-ket-tabel caption {
  padding: 0 0 var(--ck-s2);
  text-align: left;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ck-faint);
}
.ck-ket-tabel th {
  padding: var(--ck-s2) var(--ck-s3) var(--ck-s2) 0;
  text-align: left;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ck-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--ck-line-2);
}
.ck-ket-tabel td {
  padding: var(--ck-s2) var(--ck-s3) var(--ck-s2) 0;
  vertical-align: top;
  font-size: .94rem;
  border-bottom: 1px solid var(--ck-line);
}
.ck-ket-tabel tbody tr:last-child td { border-bottom: 0; }
.ck-ket-tabel tfoot td {
  border-top: 1px solid var(--ck-line-2);
  border-bottom: 0;
  padding-top: var(--ck-s3);
}
.ck-ket-tabel .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ck-ket-tabel tbody tr:hover td { background: var(--ck-surface); }

.ck-ket-pil {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.ck-ket-pil.is-on  { background: var(--ck-ok-bg);  color: var(--ck-ok-teks); }
.ck-ket-pil.is-off { background: var(--ck-line);   color: var(--ck-muted); }

/* ---- pembagian UTS/UAS ---- */
.ck-ket-belah {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ck-s3);
  margin: var(--ck-s4) 0;
}
.ck-ket-belah-sisi {
  padding: var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-top: 3px solid var(--ck-primary);
  border-radius: var(--ck-radius-sm);
  box-shadow: var(--ck-shadow);
}
.ck-ket-belah-sisi h4 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ck-primary);
  letter-spacing: .02em;
}
.ck-ket-belah-cacah {
  margin: 2px 0 var(--ck-s3);
  font-size: .84rem;
  color: var(--ck-faint);
  font-variant-numeric: tabular-nums;
}
.ck-ket-belah-daftar {
  margin: 0;
  padding-left: 20px;
  font-size: .92rem;
}
.ck-ket-belah-daftar li { margin: 0 0 4px; }

/* ---- strip semester ---- */
.ck-ket-strip {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 3px;
  margin: var(--ck-s3) 0;
}
.ck-ket-sel {
  padding: 7px 2px 6px;
  text-align: center;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-top: 3px solid var(--ck-line-2);
  border-radius: 4px;
  min-width: 0;
}
.ck-ket-sel b {
  display: block;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--ck-ink);
}
.ck-ket-sel i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ck-faint);
}
.ck-ket-sel.is-ujian {
  border-top-color: var(--ck-warn);
  background: var(--ck-warn-bg);
}
.ck-ket-sel.is-ujian b,
.ck-ket-sel.is-ujian i { color: var(--ck-warn-teks); font-weight: 700; }

/* ---- kaki ---- */
.ck-ket-kaki {
  margin: var(--ck-s6) 0 0;
  padding-top: var(--ck-s4);
  border-top: 2px solid var(--ck-ink);
  font-size: .84rem;
  color: var(--ck-faint);
}
.ck-ket-kaki p { margin: 0 0 var(--ck-s1); }

@media (max-width: 780px) {
  .ck-ket-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ck-ket-belah { grid-template-columns: 1fr; }
  .ck-ket-pasal { gap: var(--ck-s2); }
  .ck-ket-pasal > .ck-ket-id { width: 34px; font-size: .76rem; }
}

@media print {
  .ck-ket-isi, .ck-ket-cap { display: none; }
  .ck-ket-bab { break-inside: avoid; }
  .ck-ket-tabelwrap { overflow: visible; }
}

/* =====================================================================
   ATURAN KUIS (halaman semua pengguna, dengan gerbang persetujuan)
   Warna diambil dari token tema — tidak ada palet sendiri.
   ================================================================== */

.ck-aturan { max-width: var(--ck-wide); }

.ck-remah {
  display: flex; gap: var(--ck-s2); align-items: center;
  margin: 0 0 var(--ck-s3);
  font-size: .86rem; color: var(--ck-faint);
}
.ck-remah a { color: var(--ck-faint); text-decoration: none; }
.ck-remah a:hover, .ck-remah a:focus-visible { color: var(--ck-primary); text-decoration: underline; }

.ck-aturan-kop { margin: 0 0 var(--ck-s5); }
.ck-aturan-sub1 {
  margin: var(--ck-s1) 0 2px;
  font-size: 1.05rem; color: var(--ck-ink-2);
  display: flex; flex-wrap: wrap; gap: var(--ck-s2); align-items: baseline;
}
.ck-aturan-sub1 span[aria-hidden] { color: var(--ck-line-2); }
.ck-aturan-sub2 {
  margin: 0; font-size: .92rem; color: var(--ck-faint);
  display: flex; flex-wrap: wrap; gap: var(--ck-s2);
}
.ck-aturan-sub2 span[aria-hidden] { color: var(--ck-line-2); }

/* ---- pita pemberitahuan ---- */
.ck-aturan-pita {
  display: flex; gap: var(--ck-s3); align-items: flex-start;
  margin: 0 0 var(--ck-s5);
  padding: var(--ck-s4);
  background: var(--ck-primary-bg);
  border: 1px solid var(--ck-primary);
  border-radius: var(--ck-radius);
}
.ck-aturan-pita.is-sudah { background: var(--ck-ok-bg); border-color: var(--ck-ok-teks); }
.ck-aturan-pita-ikon {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ck-primary); color: #fff;
}
.ck-aturan-pita.is-sudah .ck-aturan-pita-ikon { background: var(--ck-ok-teks); }
.ck-aturan-pita-ikon svg { width: 19px; height: 19px; }
.ck-aturan-pita p { margin: 0 0 3px; font-size: .93rem; color: var(--ck-ink-2); }
.ck-aturan-pita p:last-child { margin: 0; }
.ck-aturan-pita-judul { font-weight: 700; color: var(--ck-ink) !important; font-size: .98rem !important; }

/* ---- kisi kartu ---- */
.ck-aturan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-s4);
  align-items: start;
}
.ck-aturan-kartu {
  padding: var(--ck-s4) var(--ck-s5) var(--ck-s5);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
}
.ck-aturan-kartu > h2 {
  display: flex; gap: var(--ck-s3); align-items: center;
  margin: 0 0 var(--ck-s3);
  font-size: 1.08rem; line-height: 1.3;
}
.ck-aturan-no {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ck-primary); color: #fff;
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ck-aturan-kartu ul { margin: 0; padding-left: 18px; }
.ck-aturan-kartu li { margin: 0 0 6px; font-size: .92rem; color: var(--ck-ink-2); }
.ck-aturan-kartu li::marker { color: var(--ck-line-2); }
.ck-aturan-kartu > p { margin: 0 0 var(--ck-s3); font-size: .92rem; color: var(--ck-ink-2); }
.ck-aturan-kartu table + ul,
.ck-aturan-kartu ul + table,
.ck-aturan-kartu p + table { margin-top: var(--ck-s3); }

/* ---- tabel dalam kartu ---- */
.ck-aturan-tabel {
  width: 100%; border-collapse: collapse;
  margin: var(--ck-s3) 0;
  font-size: .88rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-sm);
  overflow: hidden;
}
.ck-aturan-tabel caption {
  padding: 0 0 5px; text-align: left;
  font-size: .78rem; font-weight: 700;
  color: var(--ck-primary);
}
.ck-aturan-tabel th,
.ck-aturan-tabel td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--ck-line);
  vertical-align: top;
}
.ck-aturan-tabel thead th {
  background: var(--ck-primary-bg);
  color: var(--ck-ink);
  font-size: .8rem; font-weight: 700;
  white-space: nowrap;
}
.ck-aturan-tabel tbody th {
  background: var(--ck-bg);
  font-weight: 600; color: var(--ck-ink);
  white-space: nowrap;
}
.ck-aturan-tabel tr:last-child th,
.ck-aturan-tabel tr:last-child td { border-bottom: 0; }
.ck-aturan-tabel.is-angka td,
.ck-aturan-tabel.is-angka th { text-align: center; font-variant-numeric: tabular-nums; }
.ck-aturan-tabel .is-turun { color: var(--ck-bad-teks); font-weight: 600; }
.ck-aturan-tabel th.is-tandai {
  background: var(--ck-primary-bg); color: var(--ck-primary);
  font-weight: 700; text-align: center; width: 68px;
}
.ck-aturan-duatabel {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--ck-s3);
  align-items: start;
}

/* ---- catatan dalam kartu ---- */
.ck-aturan-awas,
.ck-aturan-tenang {
  display: flex; gap: var(--ck-s2); align-items: flex-start;
  margin: var(--ck-s3) 0 0;
  padding: 9px 12px;
  border-radius: var(--ck-radius-sm);
  font-size: .87rem;
  line-height: 1.5;
}
.ck-aturan-awas { background: var(--ck-warn-bg); color: var(--ck-warn-teks); }
.ck-aturan-tenang { background: var(--ck-primary-bg); color: var(--ck-ink-2); }
.ck-aturan-awas > span[aria-hidden] { color: var(--ck-warn); flex: none; }
.ck-aturan-tenang > span[aria-hidden] { flex: none; color: var(--ck-primary); }
.ck-aturan-tenang svg { width: 20px; height: 20px; display: block; }


/* =====================================================================
   ATURAN KUIS — KERAPIAN TATA LETAK 7.67.0

   MASALAH YANG DIPERBAIKI, dan ia terukur, bukan selera: kisi dua kolom
   memasangkan kartu yang panjangnya jauh berbeda. Terukur pada 1440px
   sebelum perbaikan ini:

     baris 1 : kartu 1 = 310px  vs kartu 2 = 506px
     baris 4 : kartu 7 = 460px  vs kartu 8 = 1262px   <- 800px kolom kosong

   Delapan ratus piksel ruang kosong di sebelah satu kartu yang menjulang
   membuat halaman terbaca berantakan walau setiap kartunya sendiri rapi.

   YANG TIDAK BOLEH DIPAKAI untuk memperbaikinya: grid-auto-flow: dense.
   Ia memang mengisi lubangnya, tetapi dengan MENGACAK URUTAN kartu — dan
   kartu-kartu ini bernomor 1 sampai 10 dan dibaca berurutan. Aturan yang
   dibaca melompat-lompat lebih buruk daripada tata letak yang tidak rata.

   Yang dipakai: dua kartu terpanjang (5 dan 8) melebar penuh, sehingga
   pasangannya menjadi (1,2) (3,4) 5 (6,7) 8 (9,10) — tanpa satu pun lubang
   dan tanpa mengubah urutan baca.
   ================================================================== */

.ck-aturan-kartu--lebar { grid-column: 1 / -1; }

/*
 * Di kartu selebar penuh, satu kolom teks menjadi ~1.100px — jauh di atas
 * batas nyaman baca (65-75 karakter). Daftarnya karena itu dipecah dua
 * kolom, dan tiap butir dijaga tidak terpotong di tengah.
 */
@media (min-width: 62rem) {
  .ck-aturan-kartu--lebar > ul {
    columns: 2;
    column-gap: var(--ck-s6);
  }
  .ck-aturan-kartu--lebar > ul > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* Catatan dan paragraf tetap satu kolom, tetapi tidak dibiarkan selebar
     kartu: kalimat sepanjang itu sulit dilacak matanya kembali ke awal. */
  .ck-aturan-kartu--lebar > p,
  .ck-aturan-kartu--lebar > .ck-aturan-awas,
  .ck-aturan-kartu--lebar > .ck-aturan-tenang { max-width: 78ch; }
}

/* ---- kepala kartu: garis rambut pemisah ----
   Nomor dan judul dulu mengambang tepat di atas isi, sehingga kartu yang
   berisi tabel terbaca seperti dua blok tanpa hubungan. Garis tipis
   menyatukannya menjadi satu kartu berkepala. */
.ck-aturan-kartu > h2 {
  padding-bottom: var(--ck-s3);
  border-bottom: 1px solid var(--ck-line);
}

.ck-aturan-no {
  box-shadow: 0 0 0 4px var(--ck-primary-bg);
}

/* ---- jarak dalam kartu, satu irama ----
   Sebelumnya tiap jenis anak membawa margin sendiri-sendiri, jadi jarak
   antara judul-tabel, tabel-daftar, dan daftar-catatan semuanya berbeda. */
.ck-aturan-kartu > * + * { margin-top: var(--ck-s4); }
.ck-aturan-kartu > h2 + * { margin-top: var(--ck-s4); }
.ck-aturan-kartu > p { margin-bottom: 0; }
.ck-aturan-kartu .ck-aturan-tabel { margin: 0; }
.ck-aturan-kartu .ck-aturan-awas,
.ck-aturan-kartu .ck-aturan-tenang { margin-top: var(--ck-s4); }

/* ---- tabel: baris belang & angka sejajar ----
   Tabel konversi nilai dibaca dengan menelusuri baris; belang tipis
   memotong kesalahan baca baris yang paling sering terjadi pada tabel
   sempit berkolom banyak. */
.ck-aturan-tabel tbody tr:nth-child(even) td,
.ck-aturan-tabel tbody tr:nth-child(even) th { background: var(--ck-bg); }
.ck-aturan-tabel td { font-variant-numeric: tabular-nums; }
.ck-aturan-tabel caption {
  padding-bottom: 6px;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- catatan: aksen tepi, bukan hanya latar ----
   Latar berwarna saja membuat catatan terbaca seperti kotak lain; garis
   tepi kiri menandainya sebagai sisipan tanpa menambah warna baru. */
.ck-aturan-awas,
.ck-aturan-tenang {
  padding: var(--ck-s3) var(--ck-s4);
  border-left: 3px solid currentColor;
  align-items: flex-start;
}
.ck-aturan-awas > span:last-child,
.ck-aturan-tenang > span:last-child { color: var(--ck-ink-2); }
.ck-aturan-awas { border-left-color: var(--ck-warn); }
.ck-aturan-tenang { border-left-color: var(--ck-primary); }

/* ---- dua tabel berdampingan di kartu lebar ---- */
@media (min-width: 62rem) {
  .ck-aturan-kartu--lebar .ck-aturan-duatabel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-s5);
  }
}


/*
 * TABEL DI KARTU LEBAR TIDAK IKUT MELAR.
 *
 * Tabel potongan keterlambatan hanya punya tiga kolom pendek; direntang ke
 * 1.071px isinya berjauhan dan matanya kehilangan baris saat menyeberang.
 * Dibatasi, bukan dipusatkan: tabel yang mengambang di tengah kartu terbaca
 * seperti gambar sisipan, bukan bagian dari kalimat di atasnya.
 */
@media (min-width: 62rem) {
  .ck-aturan-kartu--lebar > .ck-aturan-tabel { max-width: 46rem; }

  /*
   * Daftar pendek TIDAK dipecah dua kolom. Tiga butir yang dibagi dua
   * menyisakan satu butir sendirian di kolom kanan — terbaca seperti ada yang
   * terputus. Pemecahan hanya untuk daftar panjang, dan penandanya di markup:
   * daftar terakhir kartu 8 memang pendek.
   */
  .ck-aturan-kartu--lebar > ul.is-pendek {
    columns: auto;
  }
}
/* ---- panel persetujuan ---- */
.ck-aturan-setuju {
  margin: var(--ck-s5) 0 0;
  padding: var(--ck-s5);
  background: var(--ck-surface);
  border: 2px solid var(--ck-primary);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow-lg);
}
.ck-aturan-setuju > h2 {
  display: flex; gap: var(--ck-s2); align-items: center;
  margin: 0 0 var(--ck-s4);
  font-size: 1rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ck-primary);
}
.ck-aturan-setuju > h2 svg { width: 20px; height: 20px; }

.ck-aturan-bar {
  position: relative;
  height: 12px;
  /* Ruang di atas disediakan untuk label persen, yang dipasang absolut di
     atas bilah. Dulu bilahnya overflow:hidden dan label itu TERPOTONG habis
     — angka kemajuan yang tidak pernah terlihat sama saja dengan tidak ada. */
  margin: 26px 0 var(--ck-s4);
  background: var(--ck-line);
  border-radius: 999px;
}
.ck-aturan-bar-isi {
  display: block; height: 100%; width: 0;
  background: var(--ck-primary);
  border-radius: 999px;
  transition: width .25s ease;
}
.ck-aturan-bar-angka {
  position: absolute; right: 0; top: -22px;
  font-size: .78rem; font-weight: 700;
  color: var(--ck-faint);
  font-variant-numeric: tabular-nums;
}

.ck-aturan-centang {
  display: flex; gap: var(--ck-s3); align-items: flex-start;
  margin: 0 0 var(--ck-s4);
  font-size: .95rem; color: var(--ck-ink);
  cursor: pointer;
}
.ck-aturan-centang input { margin-top: 3px; width: 17px; height: 17px; flex: none; cursor: pointer; }
.ck-aturan-centang input:disabled { cursor: not-allowed; }
.ck-aturan-centang.is-terkunci { color: var(--ck-faint); cursor: not-allowed; }

.ck-aturan-tombol {
  display: flex; gap: var(--ck-s2); align-items: center; justify-content: center;
  width: 100%;
  font-size: 1rem;
  padding: 12px 20px;
}
.ck-aturan-tombol svg { width: 19px; height: 19px; }
.ck-aturan-tombol[disabled] { opacity: .5; cursor: not-allowed; }

.ck-aturan-kaki {
  display: flex; gap: var(--ck-s2); align-items: center; justify-content: center;
  margin: var(--ck-s3) 0 0;
  font-size: .82rem; color: var(--ck-faint);
  text-align: center;
}
.ck-aturan-kaki svg { width: 14px; height: 14px; flex: none; }

.ck-aturan-tamu {
  margin: var(--ck-s5) 0 0;
  padding: var(--ck-s4);
  background: var(--ck-bg);
  border: 1px dashed var(--ck-line-2);
  border-radius: var(--ck-radius);
  text-align: center;
  color: var(--ck-muted);
}

@media (max-width: 900px) {
  .ck-aturan-grid { grid-template-columns: 1fr; }
  .ck-aturan-duatabel { grid-template-columns: 1fr; }
}
@media print {
  .ck-aturan-setuju, .ck-remah { display: none; }
  .ck-aturan-grid { grid-template-columns: 1fr; }
  .ck-aturan-kartu { break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   KELOLA PRESENSI (halaman pengelola)

   Aturan di blok ini DIPAKAI DUA SISI: halaman depan memuatnya dari berkas ini,
   dan layar wp-admin memuatnya dari assets/css/presensi-admin.css — berkas yang
   DIBANGKITKAN dari sini oleh wp-lokal/ck-buat-css-admin.php. Sesudah menyunting
   apa pun di bawah, JALANKAN:

       php wp-lokal/ck-buat-css-admin.php

   ck-uji-presensi-admin.php membangkitkan ulang lalu membandingkan bita per
   bita, jadi lupa menjalankannya akan berbunyi — bukan diam-diam membuat kedua
   sisi berbeda.

   Tabelnya memakai .ck-tabel yang sudah ada — tidak ada tabel kedua dengan
   aturan sendiri, sebab dua tabel yang mirip tapi tidak sama adalah cara paling
   cepat membuat satu di antara keduanya membusuk diam-diam saat tema disetel
   ulang.

   Warna diambil dari token; --ck-good TIDAK ADA di tema ini, pasangan yang
   benar adalah --ck-ok-teks/--ck-ok-bg dan --ck-bad-teks/--ck-bad-bg.
   ================================================================== */

.ck-pkel { max-width: var(--ck-wide); }

/* Pil status pertemuan. Warna BUKAN satu-satunya pembeda: kata di dalam pil
   sudah menyatakan keadaannya ("Terbuka", "Ditutup", "Draf — belum terbit"),
   jadi pembaca yang tidak membedakan warna tetap membacanya (SC 1.4.1). */
.ck-pkel-pil {
  display: inline-block;
  padding: .15rem var(--ck-s2);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.ck-pkel-pil.is-on {
  background: var(--ck-ok-bg);
  color: var(--ck-ok-teks);
}

.ck-pkel-pil.is-off {
  background: var(--ck-bg);
  color: var(--ck-muted);
}

/* Baris pertemuan yang sedang dibuka daftar hadirnya. Latarnya seluruh baris,
   tetapi penanda tebalnya HANYA di sel pertama: box-shadow di setiap sel
   menggambar garis biru di kiri tiap kolom, bukan satu penanda di tepi baris. */
.ck-pkel-tabel tr.is-terpilih > * { background: var(--ck-bg); }
.ck-pkel-tabel tr.is-terpilih > :first-child { box-shadow: inset 3px 0 0 var(--ck-primary); }

/* Jadwal tidak boleh patah di tengah "17.40 WIB": di 375px kolomnya jatuh jadi
   lima baris dan tabelnya setinggi layar. Tabel ini sudah punya pembungkus
   yang menggulung mendatar, jadi lebar tambahannya tidak merusak apa pun. */
.ck-pkel-jadwal { white-space: nowrap; }

/* Persentase di bawah 75%. Angkanya tetap terbaca apa adanya bila warnanya
   tidak tertangkap — ambang batasnya disebut di catatan tabel, bukan hanya
   diwarnai. */
.ck-pkel-turun { color: var(--ck-bad-teks); font-weight: 700; }

.ck-pkel-catat {
  margin: var(--ck-s3) 0 0;
  color: var(--ck-muted);
  font-size: .85rem;
  max-width: 62ch;
}

.ck-pkel-unduh {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s2);
  margin: 0;
}

/* Saat dicetak, yang dibuang hanya kolom Tindakan di tabel PERTEMUAN — bukan
   .ck-pkel-tabel mana pun. Kolom terakhir tabel daftar hadir adalah Alamat IP
   dan tabel rekap adalah persentase; keduanya justru isi yang dicetak. */
@media print {
  .ck-pkel-unduh { display: none; }
  #ck-pkel-pertemuan .ck-pkel-tabel td:last-child,
  #ck-pkel-pertemuan .ck-pkel-tabel th:last-child { display: none; }
}


/* =====================================================================
   KELOLA PRESENSI — TATA LETAK 7.65.0

   Rancangan ulang mengikuti mockup pengajar: remah roti, baris angka
   ringkas, kartu berkepala ikon, pil status, dan kaki bernomor halaman.
   Seluruh warnanya dari token tema — tidak ada palet kedua yang akan
   menyimpang begitu tema disetel ulang.
   ================================================================== */

.ck-pkel { max-width: var(--ck-wide); }

/* ---- remah roti ---- */
.ck-pkel-remah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s2);
  margin-bottom: var(--ck-s3);
  font-size: .85rem;
  color: var(--ck-muted);
}
.ck-pkel-remah a { color: var(--ck-muted); }
.ck-pkel-remah a:hover,
.ck-pkel-remah a:focus-visible { color: var(--ck-primary-dark); }
.ck-pkel-remah [aria-current] { color: var(--ck-ink); font-weight: 600; }

/* ---- kepala halaman + ajakan QR ---- */
.ck-pkel-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ck-s4);
  margin-bottom: var(--ck-s5);
}
.ck-pkel-kepala .ck-page-sub { max-width: 62ch; margin-bottom: 0; }

.ck-pkel-ajak {
  display: flex;
  align-items: center;
  gap: var(--ck-s3);
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
}
.ck-pkel-ajak-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--ck-radius-sm);
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}
.ck-pkel-ajak-teks { font-size: .85rem; color: var(--ck-muted); line-height: 1.35; }
.ck-pkel-ajak-teks strong { display: block; color: var(--ck-ink); }
.ck-pkel-ajak-btn { flex: none; }

/* ---- baris angka ringkas ---- */
.ck-pkel-angka-baris {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ck-s4);
  margin-bottom: var(--ck-s5);
}
.ck-pkel-angka {
  display: grid;
  gap: 2px;
  padding: var(--ck-s4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
}
.ck-pkel-angka-ubin {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--ck-s2);
  border-radius: var(--ck-radius-sm);
}
.ck-pkel-angka-ikon { width: 20px; height: 20px; }

/* Empat warna ubin. Warna hanya penyerta — tiap kartu sudah berlabel kata. */
.ck-pkel-angka-ubin.is-biru  { background: var(--ck-primary-bg); color: var(--ck-primary-dark); }
.ck-pkel-angka-ubin.is-hijau { background: var(--ck-ok-bg);      color: var(--ck-ok-teks); }
.ck-pkel-angka-ubin.is-ungu  { background: var(--ck-primary-bg); color: var(--ck-primary); }
.ck-pkel-angka-ubin.is-merah { background: var(--ck-bad-bg);     color: var(--ck-bad-teks); }

.ck-pkel-angka-label { font-size: .8rem; color: var(--ck-muted); }
.ck-pkel-angka-nilai {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}
.ck-pkel-angka-sub { font-size: .78rem; color: var(--ck-faint); }

/* ---- kepala kartu ---- */
.ck-pkel-kartu-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s3);
  margin-bottom: var(--ck-s3);
}
.ck-pkel-kartu-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--ck-radius-sm);
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
}
.ck-pkel-kartu-teks { flex: 1 1 16rem; }
.ck-pkel-kartu-teks .ck-card-title { margin: 0; }
.ck-pkel-kartu-sub {
  margin: 2px 0 0;
  font-size: .85rem;
  color: var(--ck-muted);
  max-width: 70ch;
}
.ck-pkel-tambah { flex: none; }

/* ---- kotak cari ---- */
.ck-pkel-cari { flex: none; }
.ck-pkel-cari input {
  min-width: 15rem;
  padding: var(--ck-s2) var(--ck-s3);
  font: inherit;
  font-size: .9rem;
  color: var(--ck-ink);
  background: var(--ck-bg);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
}
.ck-pkel-cari input:focus-visible {
  outline: 2px solid var(--ck-primary);
  outline-offset: 1px;
}

/* ---- tabel ---- */
.ck-pkel-no { width: 3rem; color: var(--ck-muted); }
.ck-pkel-jadwal { white-space: nowrap; }

.ck-pkel-pil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .15rem var(--ck-s2);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Titik kecil sebelum kata. Kata itu sendiri yang membedakan keadaan; titik
   hanya mempercepat pemindaian mata (SC 1.4.1). */
.ck-pkel-pil::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ck-pkel-pil.is-on  { background: var(--ck-ok-bg); color: var(--ck-ok-teks); }
.ck-pkel-pil.is-off { background: var(--ck-bg);    color: var(--ck-muted); }

/* ---- tanda kecil di samping nama/keadaan ----
   Bukan .ck-pkel-pil: pil menandai KEADAAN (hadir / tidak hadir) dan punya titik
   berwarna; tanda ini hanya keterangan asal-usul baris. Dibedakan bentuknya
   supaya mata tidak membacanya sebagai keadaan kedua yang bertentangan. */
.ck-pkel-tanda {
  display: inline-block;
  margin-left: 6px;
  padding: .05rem .4rem;
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ck-muted);
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- tombol ubah kehadiran ----
   Form-nya sengaja tidak punya margin sendiri: satu <form> per sel tabel, dan
   margin bawaan browser membuat baris tabel tinggi sebelah. */
.ck-pkel-ubah { margin: 0; }
.ck-pkel-ubah-tandai { color: var(--ck-ok-teks); border-color: var(--ck-ok-teks); }
.ck-pkel-ubah-tandai:hover { background: var(--ck-ok-bg); }
.ck-pkel-ubah-batal { color: var(--ck-bad-teks); border-color: var(--ck-bad-teks); }
.ck-pkel-ubah-batal:hover { background: var(--ck-bad-bg); }

.ck-pkel-tabel tr.is-terpilih > * { background: var(--ck-bg); }
.ck-pkel-tabel tr.is-terpilih > :first-child { box-shadow: inset 3px 0 0 var(--ck-primary); }

/* ---- tindakan per baris ---- */
.ck-pkel-aksi { display: flex; align-items: center; gap: var(--ck-s2); }
.ck-btn--kecil { padding: .3rem var(--ck-s3); font-size: .82rem; }

/* Menu tiga titik memakai <details> — tanpa JavaScript ia tetap membuka. */
.ck-pkel-menu { position: relative; }
.ck-pkel-menu > summary {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-muted);
  cursor: pointer;
  list-style: none;
}
.ck-pkel-menu > summary::-webkit-details-marker { display: none; }
.ck-pkel-menu > summary:hover { background: var(--ck-bg); color: var(--ck-ink); }
.ck-pkel-menu > summary:focus-visible { outline: 2px solid var(--ck-primary); outline-offset: 1px; }
.ck-pkel-menu-isi {
  position: absolute;
  inset-inline-end: 0;
  z-index: 5;
  min-width: 14rem;
  padding: var(--ck-s2);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ck-pkel-menu-isi a {
  display: block;
  padding: var(--ck-s2) var(--ck-s3);
  border-radius: var(--ck-radius-sm);
  font-size: .88rem;
  color: var(--ck-ink);
}
.ck-pkel-menu-isi a:hover,
.ck-pkel-menu-isi a:focus-visible { background: var(--ck-bg); }

/* ---- catatan ---- */
.ck-pkel-nota {
  display: flex;
  gap: var(--ck-s3);
  margin: var(--ck-s4) 0 0;
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-bg);
  border-radius: var(--ck-radius-sm);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ck-muted);
}
.ck-pkel-nota-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ck-primary-bg);
  color: var(--ck-primary-dark);
  font-size: .72rem;
  font-weight: 700;
}
.ck-pkel-nota.is-merah { background: var(--ck-bad-bg); color: var(--ck-bad-teks); }
.ck-pkel-nota.is-merah .ck-pkel-nota-ikon { background: var(--ck-surface); color: var(--ck-bad-teks); }

.ck-pkel-kosong { margin: var(--ck-s3) 0 0; color: var(--ck-muted); }
.ck-pkel-buka { margin: var(--ck-s3) 0; }

/* ---- kaki: hitungan + nomor halaman ---- */
.ck-pkel-kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-s3);
  margin-top: var(--ck-s3);
}
.ck-pkel-hitung { margin: 0; font-size: .85rem; color: var(--ck-muted); }
.ck-pkel-halaman { display: flex; gap: 4px; }
.ck-pkel-hal {
  min-width: 34px;
  padding: .3rem var(--ck-s2);
  font: inherit;
  font-size: .85rem;
  color: var(--ck-ink);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
  cursor: pointer;
}
.ck-pkel-hal:hover:not(:disabled) { background: var(--ck-bg); }
.ck-pkel-hal:disabled { opacity: .45; cursor: default; }
.ck-pkel-hal.is-aktif {
  background: var(--ck-primary);
  border-color: var(--ck-primary);
  color: #fff;
  font-weight: 700;
}
.ck-pkel-hal:focus-visible { outline: 2px solid var(--ck-primary); outline-offset: 1px; }

.ck-pkel-unduh { display: flex; flex-wrap: wrap; gap: var(--ck-s2); margin: 0; }
.ck-pkel-turun { color: var(--ck-bad-teks); font-weight: 700; }

/* =====================================================================
   LAYAR QR (?layar=qr) — DI DALAM KERANGKA APLIKASI

   Bukan lagi dokumen berdiri sendiri. Konsekuensinya disebut apa adanya:
   memproyeksikan layar ini ikut menayangkan bilah samping dan kop situs.
   Itu bentuk yang diminta rancangan; kode kelasnya sendiri tetap dibuat
   sebesar mungkin dalam ruang yang tersisa.
   ================================================================== */

.ck-pqr-pita {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-s3);
  margin: 0 0 var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s4);
  border-radius: var(--ck-radius-sm);
  font-size: .92rem;
  line-height: 1.45;
}
.ck-pqr-pita strong { display: block; }
.ck-pqr-pita-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-weight: 700;
}

/* Warna BUKAN satu-satunya pembeda: kalimat di dalam pita sudah menyatakan
   keadaannya sendiri (SC 1.4.1). */
.ck-pqr-pita.is-ok { background: var(--ck-ok-bg); color: var(--ck-ok-teks); }
.ck-pqr-pita.is-ok .ck-pqr-pita-ikon { background: var(--ck-ok-teks); color: var(--ck-ok-bg); }
.ck-pqr-pita.is-awas { background: var(--ck-warn-bg); color: var(--ck-warn-teks); }
.ck-pqr-pita.is-awas .ck-pqr-pita-ikon { background: var(--ck-warn-teks); color: var(--ck-warn-bg); }

/* Dua kolom dipisah garis, persis rancangannya. Menumpuk di layar sempit. */
.ck-pqr-utama { display: grid; gap: var(--ck-s5); align-items: start; }
@media (min-width: 860px) {
  /* minmax(0,...) di KEDUA sisi, bukan `auto`.
     Kolom `auto` menyesuaikan diri ke max-content, dan max-content kolom kanan
     adalah URL panjang yang tidak pernah minta dipotong — hasilnya kolom kanan
     menelan 973px sementara kolom kode tergencet jadi 64px. Terukur begitu
     sebelum batas ini dipasang. */
  .ck-pqr-utama { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 360px); }
  /* PENEMPATAN EKSPLISIT untuk ketiganya, bukan sebagian.
     ::before berada paling awal di urutan sumber; menaruhnya di kolom 2 secara
     eksplisit membuat kursor penempatan otomatis maju melewatinya, sehingga
     .ck-pqr-kiri yang tanpa penempatan mendarat di kolom 3 dan .ck-pqr-kanan
     terlempar ke baris kedua. Terlihat persis begitu: kode di kanan, QR di
     bawah. Menyebut ketiganya menghapus seluruh ketergantungan pada urutan. */
  .ck-pqr-kiri  { grid-column: 1; grid-row: 1; }
  .ck-pqr-utama::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    background: var(--ck-line);
  }
  .ck-pqr-kanan { grid-column: 3; grid-row: 1; }
}

.ck-pqr-label {
  margin: 0 0 var(--ck-s2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-muted);
  text-align: center;
}

/* Sebesar yang muat tanpa memaksa halaman menggulung mendatar. Angka
   bertabel supaya digit tidak bergeser saat kode berganti sendiri. */
.ck-pqr-kode {
  margin: 0;
  padding: var(--ck-s4) var(--ck-s3);
  background: var(--ck-primary-bg);
  border-radius: var(--ck-radius);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .08em;
  text-align: center;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.ck-pqr-aksi { margin-top: var(--ck-s4); }
.ck-pqr-aksi form { margin: 0; }

/* Keterangan tombol jadi kotak biru berisi, seperti di rancangan. */
.ck-pqr-aksi .description {
  display: block;
  margin: 0 0 var(--ck-s3);
  padding: var(--ck-s3) var(--ck-s4);
  background: var(--ck-primary-bg);
  border-radius: var(--ck-radius-sm);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ck-ink-2);
}
.ck-pqr-btn { width: 100%; justify-content: center; }

.ck-pqr-qr { display: grid; place-items: center; }
.ck-pqr-qr .ck-qr-wadah {
  padding: var(--ck-s3);
  background: #fff;
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius);
  line-height: 0;
}

/* Lebar dibatasi viewport juga: QR yang terpotong tidak dapat dipindai. */
.ck-pqr-qr .ck-qr-wadah svg { width: min(320px, 60vw); height: auto; }

.ck-pqr-tautan {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
  margin-top: var(--ck-s3);
  padding: var(--ck-s2) var(--ck-s3);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-2);
  border-radius: var(--ck-radius-sm);
}
.ck-pqr-tautan code {
  flex: 1 1 auto;
  font-size: .82rem;
  color: var(--ck-ink);
  word-break: break-all;
}
.ck-pqr-tautan-ikon { flex: none; color: var(--ck-muted); }
.ck-pqr-salin {
  flex: none;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-muted);
  cursor: pointer;
}
.ck-pqr-salin:hover { background: var(--ck-bg); color: var(--ck-ink); }
.ck-pqr-salin.is-ok { color: var(--ck-ok-teks); }
.ck-pqr-salin:focus-visible { outline: 2px solid var(--ck-primary); outline-offset: 1px; }

.ck-pqr-kanan { min-width: 0; }

.ck-pqr-catat {
  margin: var(--ck-s2) 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ck-muted);
  max-width: 34ch;
}

@media print {
  .ck-pkel-remah,
  .ck-pkel-ajak,
  .ck-pqr-aksi,
  .ck-pqr-salin,
  .ck-pkel-halaman,
  .ck-pkel-menu { display: none; }
}

/* ---- tombol layar penuh (proyeksi) ----
   Kode kelas dan QR memenuhi layar lewat Fullscreen API, bukan lewat dokumen
   kedua tanpa kerangka tema. Aturan .is-penuh hanya berlaku saat panelnya
   benar-benar sedang menjadi elemen layar penuh — dipasang JS pada peristiwa
   fullscreenchange, jadi tidak ada keadaan setengah jalan yang tertinggal
   bila pengguna keluar dengan Esc. */
.ck-pqr-aksi--penuh { margin: var(--ck-s3) 0 0; }

.ck-pqr-utama.is-penuh {
  padding: var(--ck-s6);
  background: var(--ck-surface);
  place-content: center;
}
.ck-pqr-utama.is-penuh .ck-pqr-kode {
  font-size: clamp(4rem, 18vw, 14rem);
  line-height: 1;
}
.ck-pqr-utama.is-penuh .ck-pqr-qr svg { width: min(46vw, 60vh); height: auto; }

/* Yang tidak dibaca dari bangku belakang disembunyikan saat layar penuh:
   alamat panjang, tombol, dan catatan. Kode dan QR-nya yang harus terbaca. */
.ck-pqr-utama.is-penuh .ck-pqr-aksi,
.ck-pqr-utama.is-penuh .ck-pqr-tautan,
.ck-pqr-utama.is-penuh .ck-pqr-catat { display: none; }