/* ============================================================
   skorika.com — css/page/exam-index.css.baru
   SATU-SATUNYA lembar gaya untuk /exam/index.html (exam.skorika.com). 13 Agustus 2026.

   Gabungan: scale + fonts + tokens + gaya halaman + logo.
   Halaman ini disajikan dari subdomain, jadi setiap berkas CSS
   berarti satu permintaan LINTAS ASAL ke skorika.com — mahal,
   dan semuanya menahan halaman tampil. Karena itu semua digabung
   jadi satu di sini. css/common.css SENGAJA tidak ikut: diuji,
   nol dari 349 aturannya cocok dengan elemen di halaman ini.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); /* 3 Okt 2026: Roboto menggantikan Fredoka/Inter/Nunito/Outfit/Space Grotesk */
/* ===== dari css/scale.css ===== */
/* ============================================================
   skorika.com — css/scale.css
   SKALA UKURAN & SUDUT, SUMBER TUNGGAL. 12 Agustus 2026.

   Sebelum berkas ini ada, situs memakai 48 ukuran huruf berbeda dan
   25 nilai sudut berbeda. Sebagian memang tangga yang dipakai
   konsisten, tetapi sisanya nilai karangan sesaat: 14,3px di satu
   tempat, 16,2px di tempat lain, sudut 7px di sini dan 9px di sana —
   selisih yang tidak terlihat mata tetapi harus diputuskan ulang
   setiap kali ada penambahan.

   Nilai-nilai itu sudah dirapikan ke tangga di bawah: ukuran huruf
   tinggal 19 langkah, sudut tinggal 11. Berkas ini yang menetapkan
   tangganya, dan berkas gaya bersama (style.css, admin-shell.css,
   owner.css, auth.css, stage.css) merujuk ke sini, bukan menulis
   angka sendiri.

   CARA PAKAI
   Muat PALING AWAL di <head>, sebelum berkas gaya lain:
       <link rel="stylesheet" href="/css/scale.css">
   Untuk nilai baru, pakai langkah yang sudah ada. Kalau benar-benar
   perlu langkah baru, tambahkan di sini — jangan tulis angka lepas
   di halaman.
   ============================================================ */
:root{/* --- ukuran huruf ---
     Tangga setengah piksel di rentang kecil memang disengaja: itu
     yang dipakai antarmuka konsol (Inter) sejak awal. */
  --fs-10-5: 10.5px;   /* label kecil, huruf kapital berjarak */
  --fs-11:   11px;
  --fs-11-5: 11.5px;
  --fs-12:   12px;
  --fs-12-5: 12.5px;   /* keterangan, tombol kecil */
  --fs-13:   13px;     /* paling banyak dipakai */
  --fs-13-5: 13.5px;   /* isian formulir, menu sidebar */
  --fs-14:   14px;     /* teks isi */
  --fs-15:   15px;
  --fs-16:   16px;
  --fs-17:   17px;
  --fs-18:   18px;
  --fs-20:   20px;
  --fs-22:   22px;     /* wordmark logo */
  --fs-26:   26px;
  --fs-32:   32px;
  --fs-40:   40px;
  --fs-56:   56px;
  --fs-80:   80px;     /* angka besar di panggung sesi */

  /* --- sudut membulat --- */
  --r-4:    4px;
  --r-6:    6px;
  --r-8:    8px;
  --r-10:   10px;
  --r-12:   12px;
  --r-14:   14px;
  --r-16:   16px;
  --r-18:   18px;
  --r-24:   24px;
  --r-32:   32px;
  --r-penuh: 999px;    /* bentuk pil; dulu ditulis 99px, 999px, dan 9999px */}
/* ===== dari css/fonts.css ===== */
/* ============================================================
   skorika.com — css/fonts.css
   SATU-SATUNYA tempat keluarga font aplikasi dimuat.

   Dibuat 12 Agustus 2026. Sebelumnya tiap halaman memuat sendiri
   dari fonts.googleapis.com dan tumbuh jadi 10 kombinasi berbeda
   di 57 halaman — antara lain 12 halaman owner/ yang memuat
   Plus Jakarta Sans dan Space Grotesk padahal tidak satu pun
   dipakai, sementara 17 halaman memakai Inter tanpa memuatnya
   dan hanya selamat karena halaman lain kebetulan sudah
   menghangatkan cache.

   Selain sepuluh kombinasi <link> itu, tiga berkas CSS juga diam-diam
   punya @import font sendiri — style.css (Inter, Space Grotesk),
   auth.css (Fredoka, Nunito), dan owner/owner.css (Inter, Outfit).
   Ketiganya sudah dicabut dan digantikan berkas ini, jadi seluruh
   aplikasi kini punya SATU sumber font, bukan tiga belas.

   Lima keluarga di bawah ini adalah yang benar-benar dirender di layar:
     Outfit          font utama seluruh situs
     Inter           teks badan konsol /admin/ dan halaman drive
     Space Grotesk   angka, kode gabung, timer
     Nunito          halaman masuk & join
     Fredoka         judul dan tombol halaman masuk

   Plus Jakarta Sans dicabut 12 Agu 2026: setelah drive.html memakai Inter,
   satu-satunya sisa rujukannya cuma cadangan di belakang Nunito, jadi tidak
   pernah sampai giliran tampil.

   Mendaftarkan enam keluarga sekaligus TIDAK membuat pengguna
   mengunduh enam font: Google Fonts hanya mengirim aturan
   @font-face, dan peramban baru mengambil berkas .woff2 untuk
   keluarga yang benar-benar dipakai halaman itu. Yang justru mahal
   adalah 10 URL berbeda — tiap URL jadi entri cache sendiri,
   sehingga berpindah halaman berarti mengunduh CSS font lagi.
   Satu URL berarti satu entri cache untuk seluruh situs.

   Cara pakai di halaman:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="/css/fonts.css">

   Font khusus satu halaman TIDAK ditaruh di sini dan tetap dimuat
   oleh halamannya sendiri, karena ukurannya besar dan cuma dipakai
   di satu tempat:
     waiting.html        Quicksand            (layar tunggu)

   Font IKON Material Symbols punya berkasnya sendiri, css/icons.css —
   sengaja terpisah karena bukan font teks dan hanya dipakai dua halaman.
   ============================================================ */
/* ===== dari css/tokens.css ===== */
/* ============================================================
   skorika.com — css/tokens.css
   Palet warna & radius bersama (design tokens).

   Dibuat 9 Agu 2026 saat restrukturisasi. Sebelumnya blok :root ini
   disalin ulang di 12-14 halaman, sehingga mengubah satu warna berarti
   menyunting belasan berkas dan hasilnya bisa berbeda-beda.

   Cara pakai: muat PALING AWAL, sebelum <style> halaman.
     <link rel="stylesheet" href="/css/tokens.css">

   Halaman boleh menimpa nilai apa pun dengan menulis ulang :root di
   <style> miliknya sendiri (yang belakangan menang).

   CATATAN: Drive/index.html dan admin/library.html sengaja TIDAK
   memakai berkas ini — keduanya berpalet terang sendiri
   (--line, --ink, --hover bernilai lain).
   ============================================================ */
:root{/* --- warna dasar (tema Paper Toy) --- */
  --header:     #121F3D;                 /* latar bilah atas / halaman gelap */
  --plum:       #15223F;                 /* permukaan kartu di atas latar gelap */
  --plum-3:     #1B2A4C;                 /* permukaan sedikit lebih terang */
  --cream:      #FFFFFF;                 /* teks utama di atas latar gelap */
  --cream-dim:  rgba(255,255,255,.78);   /* teks sekunder */
  --cream-dim2: rgba(255,255,255,.58);   /* teks tersier / keterangan */
  --teks:       #FFFFFF;                 /* 3 Okt 2026: teks putih, bukan krem */
  --teks-dim:   rgba(255,255,255,.78);
  --teks-dim2:  rgba(255,255,255,.58);
  --peach:      #FFD9A6;                 /* aksen hangat */
  --pink:       #0078D4;                 /* warna merek — sama dengan logo */
  --line:       rgba(255,255,255,.16);   /* garis pemisah di latar gelap */

  /* --- untuk teks gelap di atas latar terang --- */
  --ink-soft:   rgba(18,31,61,.7);
  --ink-line:   rgba(18,31,61,.2);

  /* --- sudut membulat --- */
  --r:          4px;

  /* --- alias lama, dipertahankan agar halaman yang memakainya tetap jalan.
         Nilainya sengaja sama dengan variabel di atas. --- */
  --plum-2:     #15223F;                 /* = --plum */
  --pd-header:  #121F3D;                 /* = --header */
  --pd-plum:    #15223F;                 /* = --plum  */
  --pd-cream:   #FFFFFF;                 /* = --cream */
  --pd-peach:   #FFD9A6;                 /* = --peach */
  --pd-pink:    #0078D4;                 /* = --pink  */
  --pd-line:    rgba(255,255,255,.16);   /* = --line  */}
/* ===== dari css/page/exam-index.css ===== */
/* ============================================================
   skorika.com — css/page/exam-index.css
   Gaya khas /exam/index.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   31 aturan.
   ============================================================ */
/* ============================================================
   skorika.com — css/page/exam-index.css
   Gaya khas /exam/index.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   31 aturan.
   ============================================================ */
/* ============================================================
   exam.skorika.com — halaman latihan mandiri untuk peserta.

   Halaman ini BERDIRI SENDIRI (tidak memuat style.css milik domain
   utama) supaya tidak ada variabel warna yang bentrok. Gayanya
   mengikuti homepage: latar plum, kartu krem, tombol pink.

   API tetap satu di https://skorika.com/api.php — dipanggil lintas
   domain, dan hanya subdomain ini yang diizinkan oleh CORS di sana.
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--plum,#15223F);color:var(--teks,#FFFFFF);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif}
a{color:inherit}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
/* Perataan tanda terhadap tulisan. 13 Agu 2026.
   Sebelumnya align-items:center meratakan tanda ke tengah SELURUH blok
   tulisan (SKORIKA + PRACTICE), bukan ke baris SKORIKA saja. Terukur:
   pusat baris SKORIKA di 14px, pusat tanda di 19,8px — tanda 5,8px terlalu
   rendah, sehingga tepi bawahnya jatuh di baris PRACTICE dan keduanya
   terlihat berhimpitan. Homepage tidak punya masalah ini karena logonya
   hanya satu baris.
   Sekarang: tanda diratakan ke ATAS, lalu diturunkan setengah selisih
   antara tinggi baris SKORIKA dan tinggi tanda, sehingga pusatnya tepat
   di pusat baris SKORIKA — sama seperti homepage. Tinggi baris dikunci
   1.27 supaya angka pada calc() di bawah tidak menebak; kalau salah satu
   diubah (tinggi baris, ukuran tanda, atau font-size), ubah keduanya. */
.brand{display:inline-flex;align-items:flex-start;gap:9px;text-decoration:none;
  font-weight:900;font-size:22px;letter-spacing:-.015em}
.brand span{line-height:1.27}
.brand .mark{width:20px;height:20px;flex:none;margin-top:calc((1.27em - 20px) / 2)}
.brand small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teks-dim2,rgba(255,255,255,.58));margin-top:1px;line-height:1}
.tb-link{font-size:15px;font-weight:600;color:var(--teks-dim,rgba(255,255,255,.78));text-decoration:none}
.tb-link:hover{color:var(--pink,#0078D4)}
.main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:10px 20px 60px}
.head{background:var(--biru-muda,#DCEEF8);color:var(--header,#121F3D);
  border-radius:var(--r,4px);padding:24px 26px;margin-bottom:16px}
.head h1{font-size:32px;font-weight:900;letter-spacing:-.015em;line-height:1.14;margin:0 0 6px}
.meta{font-size:16px;font-weight:600;color:rgba(18,31,61,.7);display:flex;flex-wrap:wrap;gap:14px}
.count{font-weight:700;color:var(--pink,#0078D4)}
.count.warn{color:#B45309}
.count.dead{color:#B91C1C}
.card{display:flex;align-items:center;gap:16px;background:var(--biru-muda,#DCEEF8);
  color:var(--header,#121F3D);border-radius:var(--r,4px);padding:15px 18px;margin-bottom:10px;
  border:1px solid transparent;transition:transform .1s,border-color .1s}
.card:not(.off):hover{transform:translateY(-2px);border-color:var(--pink,#0078D4)}
.no{flex:none;width:44px;height:44px;border-radius:var(--r,4px);display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:20px;
  color:var(--teks,#FFFFFF);background:var(--header,#121F3D)}
.body{flex:1;min-width:0}
.nm{font-size:18px;font-weight:900;letter-spacing:-.01em;margin:0}
.sub{font-size:14px;font-weight:600;color:rgba(18,31,61,.7);margin-top:2px}
.go{flex:none;background:var(--pink,#0078D4);color:#fff;border:none;border-radius:var(--r,4px);
  font-family:inherit;font-weight:700;font-size:16px;padding:11px 20px;text-decoration:none;cursor:pointer}
.go:hover{filter:brightness(1.06)}
.card.off{opacity:.55}
.card.off .no{background:rgba(18,31,61,.45)}
.badge{flex:none;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#B91C1C;background:rgba(185,28,28,.12);padding:9px 14px;border-radius:var(--r,4px)}
.state{text-align:center;color:var(--teks-dim,rgba(255,255,255,.78));padding:60px 20px}
.state h2{color:var(--teks,#FFFFFF);font-size:26px;font-weight:900;margin:0 0 8px}
.foot{background:var(--biru-muda,#DCEEF8);color:var(--header,#121F3D);
  padding:16px 22px;font-size:13px;text-align:center}
.foot a{color:var(--header,#121F3D);font-weight:600}
/* ===== dari css/logo.css ===== */
/* ============================================================
   skorika.com — css/logo.css
   SUMBER TUNGGAL WARNA LOGO. 12 Agustus 2026.

   Sebelum berkas ini ada, warna logo ditulis di 43 berkas dan 112
   aturan yang berbeda. Akibatnya satu permintaan ganti warna selalu
   jadi belasan suntingan, dan beberapa kali aturan yang satu diam-diam
   dikalahkan aturan yang lain (aturan ganda di admin/live.html,
   !important di css/admin-shell.css). Seluruh aturan itu sudah dihapus;
   warna logo sekarang HANYA ditulis di sini.

   CARA PAKAI
   Halaman memilih variannya lewat satu kelas di <body>:
       (tanpa kelas)   pink   — halaman berlatar gelap, ini bawaannya
       .logo-hitam            — halaman berlatar terang (konsol admin,
                                konsol owner, Drive, sertifikat, cetak)
       .logo-putih            — halaman yang logonya duduk di batang
                                gelap (lobby, live, podium, learn,
                                student/dashboard)
       .logo-plum             — admin/preview.html

   Berkas ini WAJIB dimuat paling akhir di <head>, sesudah style.css,
   admin-shell.css, auth.css, dan owner.css. Kalau tidak, aturan di
   berkas-berkas itu yang menang dan warnanya kembali kacau.

   Badan gelembung memakai fill="currentColor", jadi cukup 'color'.
   Tiga titik di dalamnya memakai fill="var(--mark-dot,#FFFFFF)".
   Nilai favicon disamakan dengan varian pink di /img/favicon.svg —
   favicon berkas statis, tidak bisa membaca variabel ini, jadi kalau
   --logo-pink atau --logo-krem diubah, berkas itu ikut diperbarui.
   ============================================================ */
:root{--logo-pink:#0078D4;   /* merah muda merek */
  --logo-krem:#FFFFFF;   /* titik di atas gelembung pink/plum */
  --logo-hitam:#0F172A;  /* logo di halaman terang */
  --logo-putih:#FFFFFF;  /* logo di batang gelap; titik di gelembung hitam */
  --logo-plum:#121F3D;   /* plum kop halaman pratinjau */}
/* ---- pilihan varian ---- */
body{--logo-ink:var(--logo-pink);  --logo-dot:var(--logo-krem)}
body.logo-hitam{--logo-ink:var(--logo-hitam); --logo-dot:var(--logo-putih)}
body.logo-putih{--logo-ink:var(--logo-putih); --logo-dot:var(--logo-hitam)}
body.logo-plum{--logo-ink:var(--logo-plum);  --logo-dot:var(--logo-krem)}
/* ---- satu-satunya tempat warna logo dipasang ----
   Daftar ini memuat SEMUA wadah logo yang ada di situs. Yang memuat
   tulisan merek sekalian diwarnai (nama merek sewarna tandanya);
   yang hanya membungkus tanda cukup mewarnai tandanya.
   :hover disertakan supaya warna tidak berubah saat disentuh. */
.brand, .brand:hover, .brand-sm, .brand-sm:hover, .sb-brand, .sb-brand:hover, .auth-logo, .auth-logo:hover, .ws-brand, .dw-brand, .dw-brand:hover, .brand-row a, .brand-row a:hover, .pdf-logo, .sb-logo, .pv-icon, .qz-icon, .wsbar .title, .login-card > svg.mark{color:var(--logo-ink);
  --mark-dot:var(--logo-dot);}
/* Tanda di dalam pembungkus yang juga memuat teks lain: yang diwarnai
   hanya SVG-nya, bukan wadahnya, supaya tulisan di sebelahnya tetap
   memakai warnanya sendiri. */
.foot-brand svg.mark, .af-brand svg.mark, .auth-brand svg.mark{color:var(--logo-ink); --mark-dot:var(--logo-dot)}
/* titik pemisah di dalam wordmark ikut warna logo.
   Catatan: .auth-brand, .foot-brand, dan .af-brand SENGAJA tidak ada di
   daftar warna logo di atas. Ketiganya pembungkus yang juga memuat teks
   lain (tagline panel masuk, baris hak cipta di kaki halaman); kalau ikut
   diwarnai, tulisan itu ikut berubah. Yang diwarnai hanya tandanya. */
.brand .dot-id, .brand-sm .dot-id, .sb-brand .dot-id, .auth-brand .brand .dot-id{color:var(--logo-ink);}
/* ---- pengecualian yang disengaja ----
   Kop laporan cetak memakai warna homepage walau halamannya terang. */
body.logo-hitam .pdf-logo{color:var(--logo-pink); --mark-dot:var(--logo-krem)}
/* Bentuk lama logo (empat kotak dalam grid) sudah tidak dipakai sejak
   tanda gelembung diberlakukan; sisa gayanya dinetralkan di sini supaya
   tidak ada kotak, jarak, atau latar yang ikut tergambar. */
svg.mark{display:inline-block; grid-template-columns:none; gap:0;
  background:none; padding:0; border:none; box-shadow:none;}