/* ============================================================
   main.css — Sistem desain SobaTKA
   Palet dan komponen mengikuti berkas desain enam layar.
   ============================================================ */

:root {
  /* warna pokok */
  --biru:        #3B6CB4;   /* utama: sidebar, tombol, tautan */
  --biru-tua:    #31609F;   /* tekan/hover tombol utama */
  --biru-muda:   #4B7CC4;   /* kartu di dalam sidebar, hover menu */
  --navy:        #22364D;   /* teks utama, sidebar Admin */
  --navy-tua:    #1B2C40;
  --koral:       #FF8A6B;   /* aksen: menu aktif, ajakan bertindak */
  --koral-muda:  #FF9C81;
  --hijau:       #43BE94;
  --hijau-tua:   #37A681;
  --kuning:      #F5B93E;
  --merah:       #E2603F;

  /* permukaan */
  --bg:          #F5F8FD;
  --putih:       #FFFFFF;
  --garis:       #E2EAF6;
  --garis-halus: #EDF2FA;
  --isian:       #F9FBFE;

  /* teks */
  --teks:        #22364D;
  --teks-lemah:  #5D7793;
  --teks-samar:  #8FA3BB;
  --teks-sidebar:#D6E4F7;
  --teks-sidebar-samar: #A9C6EA;

  /* pasangan warna lembut untuk lencana dan ikon */
  --biru-bg:   #EDF3FC;  --biru-fg:   #31609F;
  --hijau-bg:  #F0FAF6;  --hijau-fg:  #1E7A5C;
  --hijau-bg2: #E4F7EF;
  --amber-bg:  #FFF6EC;  --amber-fg:  #A2601F;
  --amber-bg2: #FFF3E3;
  --merah-bg:  #FDE8E2;  --merah-fg:  #B23F22;
  --netral-bg: #EDF2FA;  --netral-fg: #22364D;

  --r-kartu:  18px;
  --r-medium: 14px;
  --r-kecil:  11px;
  --r-pil:    9px;
  --bayang:   0 1px 2px rgba(26,48,80,.04), 0 8px 24px -16px rgba(26,48,80,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--teks);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--biru); text-decoration: none; }
a:hover { color: var(--koral); }
::selection { background: var(--koral); color: var(--navy); }

/* ============================================================
   KERANGKA DASHBOARD
   ============================================================ */

.tata { min-height: 100vh; display: grid; grid-template-columns: 246px 1fr; }

.sisi {
  background: var(--biru);
  padding: 24px 18px;
  display: flex; flex-direction: column; gap: 24px;
}
.sisi.admin { background: var(--navy); }

.sisi-merek { display: flex; align-items: center; gap: 11px; }
.sisi-merek .logo {
  width: 38px; height: 38px; border-radius: 12px; background: var(--putih);
  display: flex; align-items: center; justify-content: center;
  font: 900 22px/1 Inter, sans-serif; color: var(--biru);
}
.sisi.admin .sisi-merek .logo { color: var(--navy); }
.sisi-merek strong { font: 800 17px Inter, sans-serif; color: var(--putih); }

.sisi nav { display: flex; flex-direction: column; gap: 5px; }
.sisi nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 12px;
  color: var(--teks-sidebar); font: 600 14px Inter, sans-serif;
  transition: background .15s, color .15s;
}
.sisi nav a:hover { background: var(--biru-muda); color: var(--putih); }
.sisi.admin nav a:hover { background: #334A66; color: var(--putih); }
.sisi nav a.aktif {
  background: var(--koral); color: var(--navy); font-weight: 700;
}
.sisi nav a.aktif:hover { background: var(--koral-muda); color: var(--navy); }
.sisi nav a .ikon { width: 18px; text-align: center; flex: none; }

.sisi-kartu {
  margin-top: auto; padding: 16px; border-radius: var(--r-medium);
  background: var(--biru-muda);
}
.sisi.admin .sisi-kartu { background: #334A66; }
.sisi-kartu p { margin: 0; }
.sisi-kartu .judul { font: 700 13px Inter, sans-serif; color: var(--putih); margin-bottom: 6px; }
.sisi-kartu .ket { font: 400 12px/1.5 Inter, sans-serif; color: var(--teks-sidebar); }
.sisi-kartu .rinci { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.sisi-kartu .rinci span {
  display: flex; justify-content: space-between; gap: 10px;
  font: 600 12px Inter, sans-serif; color: var(--teks-sidebar);
}
.sisi-kartu .rinci b { color: var(--putih); }

.sisi-peran { margin: 0; font: 500 11px Inter, sans-serif; color: var(--teks-sidebar-samar); }
.sisi-keluar {
  width: 100%; margin-top: 10px; padding: 10px;
  background: rgba(255,255,255,.12); color: var(--putih);
  border: none; border-radius: var(--r-kecil);
  font: 700 13px Inter, sans-serif; cursor: pointer; transition: background .15s;
}
.sisi-keluar:hover { background: rgba(255,255,255,.22); }

.utama { min-width: 0; }

.kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 32px; background: var(--putih);
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 5;
}
.kepala h1 { margin: 0; font: 800 19px Inter, sans-serif; letter-spacing: -.01em; }
.kepala .sub { margin: 2px 0 0; font: 500 12px Inter, sans-serif; color: var(--teks-lemah); }
.kepala .aksi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.isi-halaman {
  padding: 26px 32px 60px; display: flex; flex-direction: column;
  gap: 20px; max-width: 1300px;
}

@media (max-width: 860px) {
  .tata { grid-template-columns: 1fr; }
  .sisi { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; }
  .sisi nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .sisi nav a { padding: 9px 12px; font-size: 13px; }
  .sisi-kartu { display: none; }
  .sisi-peran { margin-left: auto; }
  .sisi-keluar { width: auto; margin: 0; padding: 9px 16px; }
  .kepala { padding: 14px 18px; flex-wrap: wrap; }
  .isi-halaman { padding: 18px 18px 50px; }
}

/* ============================================================
   KARTU & PETAK
   ============================================================ */

.kartu {
  padding: 24px; border-radius: var(--r-kartu);
  background: var(--putih); border: 1px solid var(--garis);
}
.kartu.rapat { padding: 18px; }
.kartu h2 { margin: 0 0 4px; font: 800 17px Inter, sans-serif; }
.kartu .sub { margin: 0 0 18px; font: 500 12px Inter, sans-serif; color: var(--teks-lemah); }
.kartu-biru  { background: var(--biru); border: none; color: var(--putih); }
.kartu-navy  { background: var(--navy); border: none; color: var(--putih); }
.kartu-amber { background: var(--amber-bg); border: 1px solid #F7DFC4; }
.kartu-hijau { background: var(--hijau-bg); border: 1px solid #CDEFE2; }

.petak { display: grid; gap: 14px; }
.petak-2 { grid-template-columns: repeat(2, 1fr); }
.petak-3 { grid-template-columns: repeat(3, 1fr); }
.petak-4 { grid-template-columns: repeat(4, 1fr); }
.petak-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 1000px) { .petak-4 { grid-template-columns: repeat(2, 1fr); } .petak-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .petak-2, .petak-3, .petak-4 { grid-template-columns: 1fr; } }

.angka-label { margin: 0 0 8px; font: 600 12px Inter, sans-serif; color: var(--teks-lemah); }
.angka-besar { margin: 0; font: 900 28px/1 Inter, sans-serif; }
.angka-sub   { margin: 7px 0 0; font: 600 11.5px Inter, sans-serif; color: var(--teks-samar); }

/* ============================================================
   TOMBOL
   ============================================================ */

button, .tombol {
  font: 700 13px Inter, sans-serif; cursor: pointer;
  border: none; border-radius: 12px; padding: 11px 18px;
  background: var(--biru); color: var(--putih);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, transform .15s;
}
button:hover, .tombol:hover { background: var(--biru-tua); color: var(--putih); }
button:disabled { opacity: .5; cursor: not-allowed; }

.tombol-koral { background: var(--koral); color: var(--navy); font-weight: 800;
  box-shadow: 0 12px 26px -12px rgba(255,138,107,.95); }
.tombol-koral:hover { background: var(--koral-muda); color: var(--navy); }
.tombol-hijau { background: var(--hijau); }
.tombol-hijau:hover { background: var(--hijau-tua); }
.tombol-halus {
  background: var(--bg); color: var(--teks); border: 1px solid var(--garis);
}
.tombol-halus:hover { background: var(--garis-halus); color: var(--teks); }
.tombol-amber {
  background: var(--amber-bg); border: 1.5px solid #F7DFC4; color: var(--amber-fg); font-weight: 800;
}
.tombol-amber:hover { background: #FDEEDC; color: var(--amber-fg); }
.tombol-kecil { padding: 9px 14px; font-size: 12px; border-radius: 10px; }
.tombol-besar { padding: 15px 28px; font-size: 16px; border-radius: var(--r-medium); }
.tombol-penuh { width: 100%; justify-content: center; }

/* ============================================================
   LENCANA
   ============================================================ */

.lencana {
  display: inline-block; padding: 5px 11px; border-radius: var(--r-pil);
  font: 700 11.5px Inter, sans-serif; white-space: nowrap;
}
.lencana.biru   { background: var(--biru-bg);   color: var(--biru-fg); }
.lencana.hijau  { background: var(--hijau-bg2); color: var(--hijau-fg); }
.lencana.amber  { background: var(--amber-bg2); color: var(--amber-fg); }
.lencana.merah  { background: var(--merah-bg);  color: var(--merah-fg); }
.lencana.netral { background: var(--netral-bg); color: var(--netral-fg); }
.lencana.aktif    { background: var(--hijau-bg2); color: var(--hijau-fg); }
.lencana.pending  { background: var(--amber-bg2); color: var(--amber-fg); }
.lencana.nonaktif { background: var(--netral-bg); color: var(--teks-lemah); }

.ikon-kotak {
  width: 48px; height: 48px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font: 800 21px Inter, sans-serif;
}

/* ============================================================
   FORMULIR
   ============================================================ */

.medan { margin-bottom: 16px; }
.medan label { display: block; font: 700 11px Inter, sans-serif; color: var(--teks-lemah);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.medan .bantuan { margin: 6px 0 0; font: 500 11.5px/1.45 Inter, sans-serif; color: var(--teks-samar); }
.medan .opsional { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--teks-samar); }

input[type=text], input[type=search], input[type=number], select, textarea {
  font: 600 13.5px Inter, sans-serif; width: 100%;
  padding: 12px 14px; border-radius: var(--r-kecil);
  border: 1.5px solid var(--garis); background: var(--isian); color: var(--teks);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--teks-samar); font-weight: 500; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--biru); background: var(--putih);
  box-shadow: 0 0 0 3px rgba(59,108,180,.12);
}
select:disabled, input:disabled { background: var(--garis-halus); color: var(--teks-samar); cursor: not-allowed; }

.pilih-daftar { display: grid; gap: 10px; }
.pilih-kotak {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--garis); border-radius: var(--r-medium);
  padding: 14px 16px; background: var(--putih);
  transition: border-color .15s, background .15s;
}
.pilih-kotak:hover { border-color: var(--biru-muda); }
.pilih-kotak.terpilih { border-color: var(--biru); background: var(--biru-bg); }
.pilih-kotak input { width: auto; margin-top: 3px; accent-color: var(--biru); }
.pilih-kotak .judul { font: 800 14px Inter, sans-serif; color: var(--teks); }
.pilih-kotak .ket { font: 400 13px/1.55 Inter, sans-serif; color: var(--teks-lemah); }
.tanda-izin {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 7px;
  background: var(--amber-bg2); color: var(--amber-fg); font: 700 10.5px Inter, sans-serif;
}

/* ============================================================
   TABEL
   ============================================================ */

.tabel-bungkus { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; padding: 0 14px 10px 0;
  font: 700 11px Inter, sans-serif; color: var(--teks-lemah);
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--garis); white-space: nowrap;
}
table.data td {
  padding: 13px 14px 13px 0; border-bottom: 1px solid var(--garis-halus);
  font: 500 13px Inter, sans-serif; vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr.sorot td { background: #FFFCF5; }

.orang { display: flex; align-items: center; gap: 10px; }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px Inter, sans-serif;
  background: var(--netral-bg); color: var(--navy);
}
.avatar.murid { background: var(--netral-bg); color: var(--navy); }
.avatar.guru { background: var(--biru-bg); color: var(--biru-fg); }
.avatar.pembuat_soal { background: var(--hijau-bg); color: var(--hijau-fg); }
.avatar.penelaah_soal { background: var(--amber-bg); color: var(--amber-fg); }
.avatar.admin { background: var(--merah-bg); color: var(--merah-fg); }
.orang .nama { font: 700 13.5px Inter, sans-serif; }
.orang .ket  { margin: 2px 0 0; font: 500 11.5px Inter, sans-serif; color: var(--teks-samar); }

.aksi-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.kosong { text-align: center; padding: 44px 20px; color: var(--teks-lemah); font: 500 14px Inter, sans-serif; }
.saring { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.saring input[type=search] { max-width: 250px; }
.saring select { max-width: 190px; }

/* ============================================================
   BATANG UKUR
   ============================================================ */

.ukur { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.ukur .nama { font: 600 13.5px Inter, sans-serif; }
.ukur .nilai { font: 800 13px Inter, sans-serif; color: var(--teks-lemah); }
.ukur .alur { grid-column: 1/-1; height: 12px; border-radius: 999px; background: var(--garis-halus); overflow: hidden; }
.ukur .alur > div { height: 100%; width: 0; border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); }

/* ============================================================
   PESAN, TOAST, MEMUAT
   ============================================================ */

.pesan { border-radius: var(--r-medium); padding: 14px 16px; font: 500 13.5px/1.6 Inter, sans-serif; }
.pesan.ok    { background: var(--hijau-bg); color: var(--hijau-fg); border: 1px solid #CDEFE2; }
.pesan.gagal { background: var(--merah-bg); color: var(--merah-fg); border: 1px solid #F8CFC3; }
.pesan.info  { background: var(--biru-bg);  color: var(--biru-fg);  border: 1px solid #D3E2F7; }
.pesan.tunda { background: var(--amber-bg); color: var(--amber-fg); border: 1px solid #F7DFC4; }
.pesan code { background: rgba(255,255,255,.65); padding: 1px 6px; border-radius: 6px;
  font: 600 12.5px ui-monospace, Menlo, monospace; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px);
  background: var(--navy); color: var(--putih);
  padding: 13px 20px; border-radius: var(--r-medium);
  font: 600 13.5px Inter, sans-serif; text-align: center;
  box-shadow: 0 18px 40px -18px rgba(26,48,80,.7);
  z-index: 900; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: min(90vw, 440px);
}
.toast.tampil { opacity: 1; transform: translate(-50%, 0); }
.toast.galat    { background: var(--merah); }
.toast.berhasil { background: var(--hijau); }

#memuat {
  position: fixed; inset: 0; background: rgba(245,248,253,.9);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; z-index: 1000;
}
#memuat p { margin: 0; font: 500 13.5px Inter, sans-serif; color: var(--teks-lemah); }
.putaran {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--garis); border-top-color: var(--biru);
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* ============================================================
   HALAMAN MASUK & PROFIL
   ============================================================ */

.layar-tengah { min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; }
.kotak-tengah {
  width: 100%; max-width: 440px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: 22px; padding: 40px 34px;
  box-shadow: 0 2px 4px rgba(26,48,80,.04), 0 24px 60px -34px rgba(26,48,80,.5);
}
.kotak-tengah.lebar { max-width: 580px; }
.logo-besar {
  position: relative; width: 74px; height: 74px; border-radius: 24px;
  background: var(--biru); color: var(--putih); margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font: 900 42px/1 Inter, sans-serif;
}
.logo-besar .centang {
  position: absolute; right: -9px; top: -9px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--hijau); color: var(--putih);
  display: flex; align-items: center; justify-content: center; font: 800 14px Inter, sans-serif;
}

.merek-baris { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.merek-baris .logo {
  width: 44px; height: 44px; border-radius: var(--r-medium); background: var(--biru);
  color: var(--putih); display: flex; align-items: center; justify-content: center;
  font: 900 24px/1 Inter, sans-serif;
}
.merek-baris h1 { margin: 0; font: 800 20px Inter, sans-serif; color: var(--navy); }
.merek-baris p  { margin: 0; font: 500 12.5px Inter, sans-serif; color: var(--teks-lemah); }

/* ============================================================
   ISI SOAL — memakai Merriweather sesuai PRD
   ============================================================ */

.teks-soal { font: 400 17px/1.75 Merriweather, Georgia, serif; color: var(--teks); }
.opsi-soal {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 12px;
  background: var(--putih); border: 1.5px solid var(--garis);
  font: 400 15px Merriweather, Georgia, serif;
}
.opsi-soal.kunci { border: 2px solid var(--hijau); background: var(--hijau-bg); }
.opsi-soal b { font: 800 12px Inter, sans-serif; color: var(--teks-lemah); }

/* ============================================================
   HALAMAN MUKA PUBLIK
   ============================================================ */

.muka-hero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 90px 24px; background: var(--biru); text-align: center;
}
.hias { position: absolute; pointer-events: none; }
.muka-hero h1 {
  margin: 0; font: 900 clamp(46px, 7.5vw, 92px)/1 Inter, sans-serif;
  color: var(--putih); letter-spacing: -.035em;
}
.muka-hero h1 span { color: var(--koral); }
.muka-hero .tagline { margin: 0; font: 600 clamp(17px, 2.3vw, 25px) Inter, sans-serif; color: var(--teks-sidebar); }
.muka-hero .lead {
  margin: 0; max-width: 620px; color: #BFD6F0;
  font: 400 clamp(14px, 1.6vw, 17px)/1.7 Inter, sans-serif;
}
.muka-hero .lead b { color: var(--putih); }

.blok { max-width: 1180px; margin: 0 auto; padding: 96px 28px 0; }
.blok .kicker { margin: 0 0 10px; font: 900 13px Inter, sans-serif; letter-spacing: .12em; }
.blok h2 { margin: 0 0 12px; font: 800 clamp(28px, 4.2vw, 44px)/1.12 Inter, sans-serif; letter-spacing: -.025em; }
.blok .lead { margin: 0 0 36px; max-width: 640px; font: 400 17px/1.7 Inter, sans-serif; color: var(--teks-lemah); }

.muka-cta { margin-top: 104px; padding: 96px 28px 110px; background: var(--biru); text-align: center; }
.muka-cta h2 { margin: 0 0 16px; font: 900 clamp(28px, 4vw, 44px)/1.15 Inter, sans-serif;
  color: var(--putih); letter-spacing: -.025em; }
.muka-cta p { margin: 0 auto 30px; max-width: 560px; font: 400 16px/1.75 Inter, sans-serif; color: #BFD6F0; }
.muka-kaki { margin: 32px 0 0; font: 500 12px Inter, sans-serif; color: var(--teks-sidebar-samar); }

/* Animasi .reveal ditangani js/sbt-reveal.js — berkas itu yang mengatur
   opacity, transform, dan penghormatan prefers-reduced-motion. */

@media (max-width: 620px) {
  .blok { padding: 64px 20px 0; }
  .muka-cta { margin-top: 64px; padding: 64px 20px 76px; }
}

/* ============================================================
   HALAMAN PEMERIKSAAN SISTEM
   ============================================================ */

.periksa { list-style: none; margin: 18px 0 0; padding: 0; }
.periksa li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--garis-halus);
}
.periksa li:last-child { border-bottom: none; }
.periksa .tanda {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 12px Inter, sans-serif; color: var(--putih);
}
.tanda.ok     { background: var(--hijau); }
.tanda.gagal  { background: var(--merah); }
.tanda.tunda  { background: var(--kuning); color: var(--navy); }
.tanda.nunggu { background: var(--garis); color: var(--teks-lemah); }
.periksa .isi { flex: 1; min-width: 0; }
.periksa .judul { font: 700 14px Inter, sans-serif; }
.periksa .ket { font: 500 13px/1.55 Inter, sans-serif; color: var(--teks-lemah); word-break: break-word; }

.langkah { margin: 10px 0 0; padding-left: 20px; font: 500 13.5px/1.8 Inter, sans-serif; color: var(--teks-lemah); }
code { background: var(--netral-bg); padding: 1px 6px; border-radius: 6px;
  font: 600 12.5px ui-monospace, Menlo, monospace; color: var(--navy); }
pre {
  background: #16283C; color: #D5E3F0; padding: 16px; border-radius: var(--r-medium);
  overflow-x: auto; font: 500 12px/1.55 ui-monospace, Menlo, monospace; margin-top: 14px;
}