/* ============================================================
   MAJELIS AI — app.css
   Semua gaya ada di berkas ini. Tidak memuat apa pun dari CDN,
   supaya halaman tetap utuh walau jaringan luar bermasalah dan
   tidak ada yang bocor ke pihak ketiga.
   ============================================================ */

@font-face { font-family:'PJS'; src:url('/assets/fonts/pjs-400.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'PJS'; src:url('/assets/fonts/pjs-600.woff2') format('woff2'); font-weight:600; font-display:swap }
@font-face { font-family:'PJS'; src:url('/assets/fonts/pjs-700.woff2') format('woff2'); font-weight:700; font-display:swap }
@font-face { font-family:'PJS'; src:url('/assets/fonts/pjs-800.woff2') format('woff2'); font-weight:800; font-display:swap }

:root{
  --biru:#3055B5; --indigo:#262F7D; --biru-muda:#EEF3FF;
  --emas:#DB9A20; --emas-terang:#F7CC3C; --emas-muda:#FFF6E2;
  --navy:#14213D; --teks:#1B2740; --redup:#64748B; --redup-2:#94A3B8;
  --garis:#E3E8F0; --latar:#F5F7FB; --putih:#fff;
  --hijau:#15803D; --hijau-muda:#ECFDF5;
  --merah:#DC2626; --merah-muda:#FEF2F2;
  --r:12px; --r-lg:18px;
  --bayang:0 1px 2px rgba(20,33,61,.05), 0 4px 16px rgba(20,33,61,.06);
  --bayang-lg:0 12px 36px rgba(20,33,61,.12);
  --font:'PJS', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h:60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--latar);color:var(--teks);line-height:1.6;font-size:15px;
     min-height:100vh;display:flex;flex-direction:column}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.25;font-weight:800;letter-spacing:-.015em;color:var(--navy)}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem} h4{font-size:.95rem}

/* ── Bilah atas ─────────────────────────────────────────── */
.bar{background:var(--putih);border-bottom:1px solid var(--garis);height:var(--nav-h);
     display:flex;align-items:center;gap:16px;padding:0 20px;position:sticky;top:0;z-index:50}
.bar-logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.bar-logo img{height:34px;width:auto}
.bar-nav{display:flex;gap:2px;margin-left:12px}
.bar-nav a{padding:8px 14px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--redup);transition:.15s}
.bar-nav a:hover{background:var(--latar);color:var(--navy)}
.bar-nav a.on{background:var(--biru-muda);color:var(--biru)}
.bar-kanan{margin-left:auto;display:flex;align-items:center;gap:10px}

.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--biru),var(--indigo));
        color:#fff;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;
        flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:72px;height:72px;font-size:1.4rem}

/* ── Rangka isi ─────────────────────────────────────────── */
.isi{flex:1;max-width:1080px;width:100%;margin:0 auto;padding:26px 20px 90px}
.isi.sempit{max-width:720px}
.judul-hal{margin-bottom:6px}
.sub-hal{color:var(--redup);font-size:.92rem;margin-bottom:24px}

/* ── Kartu ──────────────────────────────────────────────── */
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-lg);padding:22px}
.kartu + .kartu{margin-top:14px}
.kartu-judul{font-size:.95rem;font-weight:800;color:var(--navy);margin-bottom:14px;
             display:flex;align-items:center;justify-content:space-between;gap:10px}
.kisi{display:grid;gap:14px}
.kisi-2{grid-template-columns:repeat(2,1fr)}
.kisi-3{grid-template-columns:repeat(3,1fr)}

/* ── Kartu kelas ────────────────────────────────────────── */
.kelas{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-lg);padding:20px;
       display:flex;flex-direction:column;gap:10px;transition:.18s}
a.kelas:hover{border-color:var(--biru);box-shadow:var(--bayang);transform:translateY(-2px)}
.kelas-atas{display:flex;align-items:flex-start;gap:12px}
.kelas-ikon{width:44px;height:44px;border-radius:12px;background:var(--biru-muda);display:flex;
            align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.kelas-nama{font-weight:800;color:var(--navy);line-height:1.35}
.kelas-segmen{font-size:.76rem;color:var(--redup);font-weight:600}
.kelas-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--redup)}
.kelas-meta span{display:inline-flex;align-items:center;gap:5px}

/* ── Label ──────────────────────────────────────────────── */
.label{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
       font-size:.72rem;font-weight:700;white-space:nowrap}
.l-biru{background:var(--biru-muda);color:var(--biru)}
.l-emas{background:var(--emas-muda);color:#8A5D05}
.l-hijau{background:var(--hijau-muda);color:var(--hijau)}
.l-abu{background:#F1F5F9;color:var(--redup)}
.l-merah{background:var(--merah-muda);color:var(--merah)}

/* ── Tombol ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;
     border-radius:var(--r);font-size:.9rem;font-weight:700;border:1.5px solid transparent;
     cursor:pointer;transition:.15s;white-space:nowrap}
.btn-utama{background:var(--biru);color:#fff}
.btn-utama:hover{background:var(--indigo)}
.btn-emas{background:var(--emas);color:#fff}
.btn-emas:hover{background:#C2870F}
.btn-garis{background:var(--putih);border-color:var(--garis);color:var(--teks)}
.btn-garis:hover{border-color:var(--biru);color:var(--biru)}
.btn-bahaya{background:var(--merah);color:#fff}
.btn-kecil{padding:7px 14px;font-size:.82rem;border-radius:9px}
.btn-penuh{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ── Formulir ───────────────────────────────────────────── */
.kolom{margin-bottom:15px}
.kolom label{display:block;font-size:.83rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.kolom .bantuan{font-size:.76rem;color:var(--redup);margin-top:5px;line-height:1.5}
.kolom input,.kolom select,.kolom textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--garis);border-radius:var(--r);
  background:var(--putih);font-size:.92rem;transition:.15s}
.kolom input:focus,.kolom select:focus,.kolom textarea:focus{
  outline:none;border-color:var(--biru);box-shadow:0 0 0 3px rgba(48,85,181,.1)}
.kolom textarea{min-height:100px;resize:vertical}
.kolom.salah input,.kolom.salah select{border-color:var(--merah)}
.kolom .galat{font-size:.78rem;color:var(--merah);margin-top:5px;font-weight:600}
.baris-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.centang{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.55;color:var(--teks)}
.centang input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--biru)}

/* ── Pemberitahuan ──────────────────────────────────────── */
.pesan{padding:13px 16px;border-radius:var(--r);font-size:.87rem;margin-bottom:16px;
       display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.p-ok{background:var(--hijau-muda);color:var(--hijau);border:1px solid #BBF7D0}
.p-galat{background:var(--merah-muda);color:var(--merah);border:1px solid #FECACA}
.p-info{background:var(--biru-muda);color:var(--biru);border:1px solid #C7D8FF}
.p-ingat{background:var(--emas-muda);color:#8A5D05;border:1px solid #FCE3AE}

/* ── Halaman masuk / daftar ─────────────────────────────── */
.gerbang{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.gerbang-kotak{width:100%;max-width:440px}
.gerbang-logo{display:flex;justify-content:center;margin-bottom:22px}
.gerbang-logo img{height:76px}
.gerbang .kartu{padding:26px}
.gerbang-bawah{text-align:center;font-size:.86rem;color:var(--redup);margin-top:18px}
.gerbang-bawah a{color:var(--biru);font-weight:700}

/* ── Daftar materi ──────────────────────────────────────── */
.materi{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--garis)}
.materi:last-child{border-bottom:none}
.materi-ikon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
             font-size:1.1rem;flex-shrink:0;background:var(--biru-muda)}
.materi-ikon.tautan{background:var(--emas-muda)}
.materi-isi{flex:1;min-width:0}
.materi-judul{font-weight:700;color:var(--navy);font-size:.92rem;line-height:1.4}
.materi-sub{font-size:.79rem;color:var(--redup);margin-top:2px}

/* ── Tabel ──────────────────────────────────────────────── */
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;padding:10px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
   color:var(--redup);border-bottom:2px solid var(--garis);font-weight:700;white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--garis);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#FAFBFE}

/* ── Kosong ─────────────────────────────────────────────── */
.kosong{text-align:center;padding:44px 20px;color:var(--redup)}
.kosong-ikon{font-size:2.4rem;margin-bottom:10px;opacity:.5}
.kosong p{font-size:.9rem;max-width:400px;margin:0 auto 16px;line-height:1.6}

/* ── Navigasi bawah (ponsel) ────────────────────────────── */
.nav-bawah{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--putih);
           border-top:1px solid var(--garis);z-index:60;padding-bottom:env(safe-area-inset-bottom)}
.nav-bawah ul{display:flex}
.nav-bawah a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;
             font-size:.68rem;font-weight:700;color:var(--redup-2)}
.nav-bawah a.on{color:var(--biru)}
.nav-bawah svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
               stroke-linecap:round;stroke-linejoin:round}

/* ── Kaki ───────────────────────────────────────────────── */
.kaki{border-top:1px solid var(--garis);background:var(--putih);padding:22px 20px;text-align:center;
      font-size:.8rem;color:var(--redup-2)}
.kaki a{color:var(--redup);font-weight:600}

/* ── Responsif ──────────────────────────────────────────── */
@media (max-width:860px){
  .kisi-2,.kisi-3{grid-template-columns:1fr}
  .baris-2{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bar-nav{display:none}
  .nav-bawah{display:block}
  .isi{padding:20px 16px 96px}
  h1{font-size:1.35rem}
  .kartu{padding:18px}
  .bar{padding:0 16px}
}

/* ── Kartu angka (dasbor pengelola) ─────────────────────── */
.angka{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
.angka-kotak{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-lg);
             padding:17px;display:flex;gap:12px;align-items:flex-start}
.angka-ikon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
            justify-content:center;font-size:1.15rem;flex-shrink:0;background:var(--biru-muda)}
.angka-ikon.emas{background:var(--emas-muda)} .angka-ikon.hijau{background:var(--hijau-muda)}
.angka-nilai{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.1}
.angka-label{font-size:.76rem;color:var(--redup);margin-top:2px}
.saring{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.saring .kolom{margin:0;min-width:170px}
.saring .kolom.lebar{flex:1;min-width:220px}
.aksi-baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
details.lipat{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-lg);
              margin-bottom:14px;overflow:hidden}
details.lipat > summary{cursor:pointer;list-style:none;padding:16px 22px;font-weight:800;
                        color:var(--navy);font-size:.95rem;display:flex;justify-content:space-between}
details.lipat > summary::-webkit-details-marker{display:none}
details.lipat > summary::after{content:'+';font-size:1.2rem;color:var(--biru);font-weight:400}
details.lipat[open] > summary::after{content:'−'}
details.lipat > .lipat-isi{padding:0 22px 20px}
@media(max-width:860px){.angka{grid-template-columns:repeat(2,1fr)}}