/* DIGANTI NAMA 13 Agu 2026: dulu css/style.css. Isi dan urutan pemuatan
   TIDAK diubah sama sekali — hanya namanya, agar tanggung jawabnya lebih
   jelas sesuai rencana penataan CSS. Pemisahan isi menyusul terpisah. */
/* ============================================================
   skorika.com — Design System v4 "Neubrutalist Gen-Z"
   Solid pastel surfaces · crisp black borders · hard shadows
   Inter · green #4ADE80 · pink #BB8EF6 · yellow #FACC15

   CATATAN 14 Agu 2026
   Seluruh variabel warna kini didefinisikan di css/tokens.css. Berkas ini
   hanya menyimpan --line untuk dunia aplikasi.

   CATATAN PENTING
   ---------------
   Semua nama class LAMA dipertahankan 1:1 (.btn, .card, .navbar,
   .auth, .choice-btn, .lb-item, dst). Hanya tampilan yang berubah.
   Tidak ada perubahan struktur alur, ID, atau logika halaman.
   ============================================================ */
/* Font TIDAK lagi diimpor di sini — 12 Agu 2026 dipindahkan ke css/fonts.css
   bersama seluruh keluarga lain. Inter dan Space Grotesk yang dulu diimpor
   baris ini sudah termasuk di sana. Halaman memuat css/fonts.css sendiri. */

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

:root{
  /* ----------------------------------------------------------------
     Seluruh variabel warna dan ukuran pindah ke tokens.css pada
     14 Agustus 2026. tokens.css kini dimuat di setiap halaman,
     selalu SEBELUM berkas ini, jadi semua var() tetap terisi.
     Jangan menambah definisi variabel baru di sini - tulis di
     tokens.css supaya sumbernya tetap satu.

     Satu pengecualian di bawah: --line. Halaman publik memakai
     garis terang di atas latar plum, halaman aplikasi memakai
     garis gelap. Baris ini yang menang di halaman aplikasi karena
     base.css dimuat setelah tokens.css.
     ---------------------------------------------------------------- */
  --line: #0F172A;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; font-weight: 600; }
a:hover { color: var(--brand-dark); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 2px; border-radius:var(--r-4); }

h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 800; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Dark game pages (waiting / play / podium) ---------- */
body.dark { color: var(--on-dark); background: #0F172A; }

/* ---------- Brand mark ---------- */
.brand {display: inline-flex; align-items: center; gap:9px;
  font-weight:900; font-size:var(--fs-22); letter-spacing:-.015em; text-decoration: none;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Sub-label di dalam .brand (mis. "Student Console") adalah baris kedua,
   bukan tetangga di sebelah kanan nama merek. Karena .brand adalah flex
   baris, tanpa aturan ini label itu berdiri sejajar lalu menabrak tautan
   di sisi kanan bar begitu layarnya menyempit. */
.brand { flex-wrap: wrap; row-gap: 0; }
.brand small { flex-basis: 100%; width: 100%; margin-top: 1px; }

/* ---------- Bar atas di layar sempit ----------
   Tinggi tetap 68px plus dua sisi yang tidak boleh menyusut membuat isi
   bar saling menimpa di ponsel. Di layar sempit bar boleh melipat dan
   tumbuh ke bawah. */
@media (max-width: 560px) {
  .navbar { height: auto; min-height: 58px; padding: 9px 14px;
            flex-wrap: wrap; row-gap: 6px; }
  .navbar-right { gap: 12px; font-size:var(--fs-12-5); flex-wrap: wrap;
                  justify-content: flex-end; }
  .brand { font-size:var(--fs-22); min-width: 0; }
  .brand small { font-size:var(--fs-10-5); }
}
.brand .dot-id {font-style: normal;font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
body.dark .brand, body.dark .brand:hover {font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
body.dark .brand .dot-id {font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Logo mark resmi Skorika — 4 kotak warna membulat, TANPA latar.
   Bentuk ini HARUS sama persis dengan favicon di setiap halaman.

   UKURAN ditulis dalam em, bukan px, supaya aturan pemiliknya berlaku
   otomatis di setiap konteks: MARK 10% LEBIH TINGGI DARI TINTA TEKS.
   Angkanya diturunkan begini:
     tinggi tinta "Skorika" pada Outfit 900  = 0,727em
        (diukur langsung pada halaman terpasang: 16px tinta pada
         font-size 22px. Angka 0,75em pada putaran sebelumnya keliru —
         itu hasil menebak faktor skala tangkapan layar, bukan
         pengukuran langsung, dan membuat mark 12,5% bukan 10%.)
     target tinggi mark                      = 1,10 x 0,727em = 0,800em
   Untuk <svg class="mark"> lihat aturan .mark di bawah: tintanya hanya
   28/32 dari kotak (rect y=2..30), jadi kotaknya harus lebih besar.
   Jarak dan radius memakai persen supaya proporsinya ikut, bukan patah
   saat ukurannya diubah: gap 2/28 dan radius 4/13 dari sisi kotak. */
svg.mark { width: .8em; height: .8em; flex-shrink: 0; }
/* SVG memakai viewBox 0 0 32 32 dengan rect 2..30 -> tinta 28/32 kotak.
   0,800em / (28/32) = 0,914em.
   Dibatasi ke dalam .brand: kelas "mark" juga dipakai untuk bulatan
   penanda pilihan jawaban (.opt-item .mark) di halaman kuis, dan itu
   bukan logo. */
.brand .mark { width: .914em; height: .914em; flex-shrink: 0; }
/* Satu warna rata #9C50FF — sama persis dengan favicon.
   Diambil dari acuan: 87,3% piksel tinta pada gambar acuan bernilai
   tepat #9C50FF, sisanya hanya campuran tepi dengan latar.
   Keempat variabel dipertahankan supaya aturan lama tetap berlaku,
   nilainya kini sama. */

/* Logo kini satu warna rata, jadi kotak keempat tidak lagi ditukar
   mengikuti permukaan: #9C50FF terbaca di atas latar terang maupun
   gelap. Aturan berikut dibiarkan berdiri supaya pemilih yang sudah
   ada tidak hilang, tetapi nilainya disamakan dengan :root. */

/* ---------- Navbar ---------- */
.navbar {
  background: #FFFFFF;
  border-bottom: var(--nb-border);
  box-shadow: 0 4px 0 0 var(--nb-ink);
  color: var(--text);
  padding: 0 24px; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.navbar-right { display: flex; align-items: center; gap: 18px; font-size:var(--fs-13-5); }
.navbar-right > a:not(.btn) { color: var(--muted); font-weight: 700; transition: color .15s; }
.navbar-right > a:not(.btn):hover { color: var(--brand); }
.navbar-user { color: var(--muted); font-weight: 700; }
body.dark .navbar { background: #0F172A; border-bottom-color: #fff; box-shadow: 0 4px 0 0 rgba(255,255,255,.25); color: #fff; }
body.dark .navbar-right > a:not(.btn) { color: var(--on-dark-soft); }
body.dark .navbar-right > a:not(.btn):hover { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius:var(--r-penuh);
  font-size:var(--fs-14); font-weight:400; letter-spacing: -.01em;
  border: var(--nb-border); white-space: nowrap; text-decoration: none;
  box-shadow: var(--nb-shadow-sm);
  transition: transform .1s ease, box-shadow .1s ease, background .15s, opacity .15s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--nb-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--nb-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--nb-shadow-sm); }

.btn-primary { background: var(--brand-lite); color: var(--nb-ink); }
.btn-primary:hover { background: #6DFE9C; color: var(--nb-ink); }
.btn-pink    { background: var(--pink-soft); color: var(--nb-ink); }
.btn-pink:hover { background: #D7B8FF; color: var(--nb-ink); }
.btn-green   { background: var(--brand-lite); color: var(--nb-ink); }
.btn-green:hover { background: #6DFE9C; color: var(--nb-ink); }
.btn-red     { background: #FF8A80; color: var(--nb-ink); }
.btn-red:hover { background: #FFB4AB; color: var(--nb-ink); }
.btn-gray    { background: #FFFFFF; color: var(--nb-ink); }
.btn-gray:hover { background: var(--surface-2); color: var(--nb-ink); }
.btn-outline { background: #FFFFFF; color: var(--nb-ink); }
.btn-outline:hover { background: var(--surface-2); color: var(--nb-ink); }
.btn-ghost   { background: transparent; color: var(--nb-ink); }
.btn-ghost:hover { background: var(--surface-2); color: var(--nb-ink); }
body.dark .btn-ghost { color: #fff; border-color: #fff; box-shadow: 2px 2px 0 rgba(255,255,255,.5); }
body.dark .btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-sm   { padding: 7px 15px;  font-size:var(--fs-12-5); }
.btn-lg   { padding: 15px 30px; font-size:var(--fs-16); box-shadow: var(--nb-shadow); }
.btn-lg:hover { box-shadow: 5px 5px 0 var(--nb-ink); }
.btn-full { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: var(--nb-border);
  border-radius:var(--r-16);
  box-shadow: var(--nb-shadow);
  padding: 28px;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size:var(--fs-12); font-weight: 800; color: var(--nb-ink); margin-bottom: 7px; letter-spacing: .04em; text-transform: uppercase; }
.form-input {
  width: 100%; padding: 12px 15px;
  border: var(--nb-border); border-radius:var(--r-10);
  font-size:var(--fs-15); font-weight: 500; background: #FFFFFF; color: var(--text);
  box-shadow: var(--nb-shadow-sm);
  transition: box-shadow .12s, transform .12s;
}
.form-input::placeholder { color: #8B9A92; font-weight: 500; }
.form-input:focus { outline: none; box-shadow: var(--nb-shadow); transform: translate(-1px,-1px); }

/* ---------- Password toggle ---------- */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius:var(--r-8); color: var(--muted); cursor: pointer;
  padding: 0;
}
.pw-eye:hover { background: var(--surface-2); color: var(--text); }
.pw-eye svg { width: 19px; height: 19px; }
.pw-eye .eye-off { display: none; }
.pw-eye.is-visible .eye-on { display: none; }
.pw-eye.is-visible .eye-off { display: block; }

/* ---------- Alerts ---------- */
.alert {
  padding: 12px 16px; border-radius:var(--r-10); font-size:var(--fs-13-5); font-weight: 700;
  margin-bottom: 16px; display: none;
  border: var(--nb-border); box-shadow: var(--nb-shadow-sm);
}
.alert.show { display: block; }
.alert-error   { background: #FFDAD6; color: var(--red-dark); }
.alert-success { background: #BBF7D0; color: #14532D; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 11px; border-radius:var(--r-penuh);
  font-size:var(--fs-11); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid var(--nb-ink);
}
.badge-green { background: #BBF7D0; color: #14532D; }
.badge-gray  { background: #FFFFFF; color: var(--nb-ink); }
.badge-blue  { background: #E7D5FF; color: #4A1C87; }

/* ---------- Modal ----------

   MODAL YANG LEBIH TINGGI DARI LAYAR — 17 Agu 2026.

   Sebelumnya .modal-box tidak punya batas tinggi dan pembungkusnya tidak
   bisa digulir. Begitu isinya lebih tinggi dari jendela, kotak itu meluber
   ke atas DAN ke bawah sekaligus — judulnya terpotong di atas, tombolnya
   terpotong di bawah, dan tidak ada cara menggulir untuk mencapainya.
   Paling terasa pada layar 768px ke bawah dan pada layar yang diperbesar
   (125%/150%), yaitu keadaan paling lazim di laptop.

   Dua lapis penanganannya:

   1. Pembungkusnya kini bisa digulir (overflow-y:auto) dan kotaknya
      dipusatkan memakai margin:auto, bukan align-items:center. Bedanya
      penting: pada wadah yang bisa digulir, align-items:center memotong
      bagian yang meluber ke ATAS dan bagian itu tidak bisa dijangkau
      guliran. Dengan margin:auto, kotak tetap di tengah bila ruangnya
      cukup, dan menempel ke atas bila tidak — seluruh isinya terjangkau.

   2. Modal yang memang panjang boleh menambah kelas .modal-scroll: tinggi
      kotaknya dibatasi setinggi layar, judul dan baris tombol tetap
      terpaku, dan hanya bagian .modal-body yang bergulir. Jadi tombol
      utamanya selalu terlihat tanpa perlu menggulir dulu.

   Satuan dvh dipakai karena vh di peramban ponsel menghitung layar penuh
   termasuk bilah alamat yang bisa menyusut; vh tetap ditulis lebih dulu
   sebagai cadangan untuk peramban lama. */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 200; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.modal-overlay.show { display: flex; animation: fadeIn .15s ease; }
.modal-box {
  background: #fff; border: var(--nb-border); border-radius:var(--r-18);
  padding: 26px; max-width: 460px; width: 100%; margin: auto;
  box-shadow: var(--nb-shadow-lg); animation: popIn .16s ease;
}
.modal-title { font-size:var(--fs-20); font-weight: 900; margin-bottom: 14px; letter-spacing: -.03em; }
.modal-actions { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; }

/* Modal panjang: judul & tombol terpaku, isi tengahnya yang bergulir. */
.modal-box.modal-scroll { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.modal-box.modal-scroll > .modal-title,
.modal-box.modal-scroll > .modal-actions { flex: 0 0 auto; }
.modal-box.modal-scroll > .modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; min-height: 0; margin: 0 -26px; padding: 0 26px; }
.modal-box.modal-scroll > .modal-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, rgba(0,0,0,.1)); }

/* Layar sempit: padding dikurangi supaya isinya tidak terjepit. */
@media (max-width: 560px) {
  .modal-overlay { padding: 8px; }
  .modal-box { padding: 18px; }
  .modal-box.modal-scroll { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal-box.modal-scroll > .modal-body { margin: 0 -18px; padding: 0 18px; }
}
/* Layar pendek (mis. 1366x768 pada 125%): kurangi jarak vertikal. */
@media (max-height: 720px) {
  .modal-box { padding-top: 18px; padding-bottom: 18px; }
  .modal-title { margin-bottom: 10px; }
  .modal-actions { margin-top: 14px; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { from { opacity: 0; transform: translate(4px,4px); } to { opacity: 1; transform: none; } }

/* ---------- Spinner ---------- */
.spinner { width: 38px; height: 38px; border: 4px solid var(--nb-ink); border-top-color: var(--brand-lite); border-radius:50%; animation: spin .7s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: var(--nb-border); border-radius:var(--r-14); box-shadow: var(--nb-shadow-sm); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size:var(--fs-13-5); }
th {
  text-align: left; padding: 11px 14px; background: var(--surface-2); color: var(--nb-ink);
  font-size:var(--fs-10-5); font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid var(--nb-ink);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td, table tr:hover td { background: #F6FBF3; }

/* ---------- Answer choices (participant) ---------- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
.choice-btn {
  padding: 18px; border-radius:var(--r-14); border: var(--nb-border);
  box-shadow: var(--nb-shadow);
  font-size:var(--fs-20); font-weight: 800; cursor: pointer;
  transition: transform .1s, box-shadow .1s, opacity .2s;
  text-align: left; line-height: 1.35; color: var(--nb-ink);
  display: flex; align-items: center; gap: 12px;
  min-width: 0; height: auto;
  overflow-wrap: break-word; word-break: break-word;
}
.choice-btn > span:last-child {
  min-width: 0; max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word;
}
.choice-btn .ch-sym {
  width: 32px; height: 32px; flex-shrink: 0; border-radius:var(--r-8);
  background: rgba(255,255,255,.65);
  border: 2px solid var(--nb-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size:var(--fs-13); font-weight: 900;
}
.choices .choice-btn:nth-child(1), .choice-grid .choice-btn:nth-child(1) { background: var(--a-blue); }
.choices .choice-btn:nth-child(2), .choice-grid .choice-btn:nth-child(2) { background: var(--a-green); }
.choices .choice-btn:nth-child(3), .choice-grid .choice-btn:nth-child(3) { background: var(--a-amber); }
.choices .choice-btn:nth-child(4), .choice-grid .choice-btn:nth-child(4) { background: var(--a-red); }
.choices .choice-btn:nth-child(5), .choice-grid .choice-btn:nth-child(5) { background: var(--pink-soft); }
.choices .choice-btn:nth-child(6), .choice-grid .choice-btn:nth-child(6) { background: #7DD3FC; }
.choices .choice-btn:nth-child(7), .choice-grid .choice-btn:nth-child(7) { background: #5EEAD4; }
.choices .choice-btn:nth-child(8), .choice-grid .choice-btn:nth-child(8) { background: var(--accent-orange); }
.choice-btn:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--nb-ink); }
.choice-btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 0 0 0 var(--nb-ink); }
.choice-btn.correct { background: var(--brand-lite) !important; color: var(--nb-ink) !important; }
.choice-btn.wrong   { background: #FFDAD6 !important; color: var(--nb-ink) !important; opacity: .75; }

/* ---------- Leaderboard rows ---------- */
.lb-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border: var(--nb-border); border-radius:var(--r-12); background: #fff;
  box-shadow: var(--nb-shadow-sm); margin-bottom: 8px;
}
.lb-rank {
  width: 36px; height: 36px; border-radius:var(--r-10);
  background: var(--surface-2); border: 2px solid var(--nb-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size:var(--fs-14); flex-shrink: 0;
  color: var(--nb-ink);
}
.lb-name  { flex: 1; font-weight: 700; color: var(--nb-ink); }
.lb-score { font-family: var(--font-num); font-size:var(--fs-18); font-weight: 700; color: var(--brand); }
.lb-item.rank-1 .lb-rank { background: var(--accent-yellow); color: var(--nb-ink); }
.lb-item.rank-2 .lb-rank { background: var(--pink-soft); color: var(--nb-ink); }
.lb-item.rank-3 .lb-rank { background: var(--accent-pink); color: var(--nb-ink); }
body.dark .lb-item { background: rgba(255,255,255,.08); border-color: #fff; box-shadow: 2px 2px 0 rgba(255,255,255,.4); }
/* Poin 1 — NAMA PESERTA TIDAK MUNCUL.
   .lb-name default berwarna --nb-ink (#0F172A). Di halaman panggung
   (admin/live.html memakai <body class="stage">, bukan .dark) warna itu
   jatuh di atas latar gelap sehingga nama peserta praktis tak terbaca.
   Aturan putih di bawah karena itu dipasang untuk .dark DAN .stage. */
body.dark .lb-name, body.stage .lb-name,
body.dark .lb-name .nm, body.stage .lb-name .nm { color: #fff; }
body.dark .lb-score { color: var(--brand-lite); }

/* ---------- Auth split layout ---------- */
.auth { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 100vh; }
.auth-brand {position: relative; overflow: hidden;
  /* Warna teks panel ini, BUKAN warna logo. Logo di dalamnya diatur
     css/logo.css lewat .brand. 12 Agu 2026. */
  color: var(--nb-ink);
  background: var(--surface-2);
  border-right: var(--nb-border); padding: 44px 52px;
  display: flex; flex-direction: column; justify-content: space-between;}
.auth-brand::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius:50%;
  background: var(--brand-lite); border: var(--nb-border);
  top: -130px; right: -130px; opacity: .5; pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .brand {font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
.auth-brand .brand .dot-id {font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #FFFFFF; }
.auth-panel { width: 100%; max-width: 420px; }
.auth h1 { font-size:var(--fs-26); font-weight: 900; letter-spacing: -.03em; }
.auth-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; color: var(--muted); font-size:var(--fs-14); line-height: 1.55; font-weight: 600; }
.auth-check .tick {
  width: 24px; height: 24px; border-radius:var(--r-8);
  background: var(--brand-lite); border: 2px solid var(--nb-ink); color: var(--nb-ink);
  display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-12); font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } }

/* ---------- Kepingan melayang (hiasan) ---------- */
.chip-float {
  position: absolute; border-radius:var(--r-14);
  border: var(--nb-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--nb-ink); font-size:var(--fs-20); font-weight: 900;
  box-shadow: var(--nb-shadow);
  animation: floaty 5.5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot,0deg)); } }

/* ---------- Section helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size:var(--fs-11); font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nb-ink); background: var(--accent-yellow);
  border: 2px solid var(--nb-ink); border-radius:var(--r-penuh); padding: 5px 12px;
  box-shadow: var(--nb-shadow-sm);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--nb-ink); color: var(--on-dark-dim); padding: 52px 24px 32px; border-top: var(--nb-border); }
.site-footer a { color: var(--on-dark-soft); font-size:var(--fs-14); font-weight: 600; }
.site-footer a:hover { color: var(--accent-yellow); }
/* ---------- Misc ---------- */
::selection { background: var(--accent-yellow); color: var(--nb-ink); }
@media (max-width: 600px) {
  .card { padding: 20px 16px; }
  .choice-grid { grid-template-columns: 1fr; }
  .navbar { padding: 0 14px; height: 60px; }
  .navbar-right { gap: 12px; font-size:var(--fs-13); }
  .brand { font-size:var(--fs-22); gap:9px; white-space: nowrap; flex-shrink: 0; }
  .brand svg.mark { width:.8em; height:.8em; }
  .navbar .btn { padding: 8px 14px; font-size:var(--fs-12-5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- App footer (disisipkan js/footer.js) ---------- */
.app-footer { margin-top: auto; background: #FFFFFF; border-top: var(--nb-border); padding: 18px 24px; }
.app-footer .af-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.app-footer .af-brand {display: inline-flex; align-items: center; gap: 9px; font-size:var(--fs-13); font-weight: 700; color: var(--muted);}
.app-footer .af-brand svg.mark { width: 17px; height: 17px; flex-shrink: 0; }
.app-footer .af-links { display: inline-flex; align-items: center; gap: 20px; }
.app-footer .af-links a { font-size:var(--fs-13); font-weight: 700; color: var(--muted); text-decoration: none; }
.app-footer .af-links a:hover { color: var(--brand); }
@media (max-width: 600px) {
  .app-footer { padding: 16px; }
  .app-footer .af-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* Offset sidebar & konten — nilai 84px HARUS sama dengan .topbar-full.
   13 Agu 2026: baris `.sidebar, .sb { top: 84px !important }` DIHAPUS dari
   sini. Alasannya bukan sekadar mengurangi !important: deklarasi itu tidak
   pernah menang di halaman mana pun. `.sb` dan `.sidebar` hanya ada di
   konsol admin, dan SETIAP halaman admin memuat admin.css yang menetapkan
   `top` dengan !important juga — dimuat belakangan, jadi selalu menang.
   Di halaman non-admin, pemilihnya tidak cocok dengan elemen apa pun.
   Pemiliknya sekarang tegas: admin.css. */
.content { margin-top: 84px; }
@media (max-width: 720px) {
  .content { margin-top: 0; }
}

/* ============================================================
   LOGO SKORIKA — 12 Agustus 2026
   Tanda empat kotak diganti gelembung percakapan, kata jadi kapital.

   Tandanya kini SATU bentuk SVG sebaris di seluruh situs. Badannya
   memakai currentColor, jadi warnanya ikut warna elemen induknya —
   tidak perlu versi terpisah per halaman. Tiga titiknya memakai
   var(--mark-dot) supaya bisa disetel krem di halaman gelap dan
   putih di halaman terang.

   Seluruh tanda kini memakai markup yang sama persis:
   <svg class="mark" …>. WARNA tidak ditulis di sini —
   satu-satunya sumbernya css/logo.css.
   ============================================================ */
svg.mark{overflow:visible}

/* Kata SKORIKA ditulis kapital lewat CSS, bukan disunting di 57 halaman. */
.brand, .brand-sm, .sb-brand, .foot-brand, .af-brand, .auth-brand,
.ws-brand, .dw-brand, .brand-row{text-transform:uppercase;letter-spacing:-.01em}