/* Perangkat Ajar — tema VibeCoder */
:root{
  --ink:#1F1B3A;
  --ink2:#635F82;
  --indigo:#4F46E5;
  --violet:#8B5CF6;
  --garis:rgba(255,255,255,.65);
  --kaca:rgba(255,255,255,.58);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:#F3F0FF;
  min-height:100vh;
  line-height:1.55;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(139,92,246,.35), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(56,189,248,.28), transparent 40%),
    radial-gradient(circle at 76% 88%, rgba(236,72,153,.24), transparent 45%),
    radial-gradient(circle at 20% 82%, rgba(79,70,229,.22), transparent 45%),
    linear-gradient(160deg,#F3F0FF 0%,#EEE9FF 55%,#F6F1FF 100%);
}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
.bungkus{max-width:1180px;margin:0 auto;padding:22px 18px 70px}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--kaca);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:14px 18px;box-shadow:0 18px 40px rgba(79,70,229,.13);
}
.merek{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem}
.merek .logo{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.1rem;
  background:linear-gradient(135deg,var(--indigo),var(--violet));box-shadow:0 8px 18px rgba(79,70,229,.35);
}
.merek small{display:block;font-weight:500;color:var(--ink2);font-size:.76rem}
.nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  padding:9px 14px;border-radius:11px;font-weight:600;font-size:.88rem;color:var(--ink);
  border:1px solid transparent;
}
.nav a:hover{background:rgba(255,255,255,.7);border-color:var(--garis);text-decoration:none}
.nav a.aktif{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 10px 22px rgba(79,70,229,.3)}

/* ---------- kartu ---------- */
.kartu{
  background:var(--kaca);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:22px;box-shadow:0 16px 36px rgba(79,70,229,.12);
  margin-top:20px;
}
.hero{padding:28px}
.hero h1{margin:0 0 8px;font-size:1.7rem;letter-spacing:-.3px}
.hero p{margin:0;color:var(--ink2);max-width:74ch}
.langkah{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.langkah span{
  background:rgba(255,255,255,.72);border:1px solid var(--garis);border-radius:999px;
  padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink2)
}
.judul-bagian{display:flex;align-items:center;gap:12px;margin:34px 0 0;flex-wrap:wrap}
.judul-bagian h2{margin:0;font-size:1.16rem}
.judul-bagian p{margin:2px 0 0;color:var(--ink2);font-size:.87rem;width:100%}
.lencana{
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  padding:5px 11px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--indigo),var(--violet))
}
.lencana.kuning{background:linear-gradient(135deg,#F59E0B,#FBBF24)}
.lencana.hijau{background:linear-gradient(135deg,#059669,#34D399)}
.lencana.biru{background:linear-gradient(135deg,#2563EB,#38BDF8)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px;margin-top:18px}
.dok{
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--garis);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 28px rgba(79,70,229,.11);
  transition:transform .16s ease,box-shadow .16s ease;
}
.dok:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(79,70,229,.2)}
.dok .ikon{font-size:1.5rem}
.dok h3{margin:0;font-size:1rem}
.dok p{margin:0;color:var(--ink2);font-size:.85rem;flex:1}
.dok .aksi{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.pilih{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink2);font-weight:600}
.pilih input{width:17px;height:17px;accent-color:var(--indigo)}

/* ---------- tombol & form ---------- */
.tbl{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:11px 18px;border-radius:12px;font-weight:700;font-size:.88rem;font-family:inherit;
  background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;
  box-shadow:0 10px 22px rgba(79,70,229,.28);text-decoration:none;
}
.tbl:hover{text-decoration:none;filter:brightness(1.06)}
.tbl.polos{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid var(--garis);box-shadow:none}
.tbl.bahaya{background:linear-gradient(135deg,#DC2626,#F87171);box-shadow:0 10px 22px rgba(220,38,38,.25)}
.tbl.kecil{padding:8px 13px;font-size:.8rem;border-radius:10px}
label{display:block;font-weight:600;font-size:.84rem;margin:0 0 6px}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border-radius:12px;border:1px solid rgba(79,70,229,.22);
  background:rgba(255,255,255,.85);font-family:inherit;font-size:.92rem;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(79,70,229,.35);outline-offset:0}
textarea{min-height:96px;resize:vertical}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.grid-form .penuh{grid-column:1/-1}
.bantuan{font-size:.78rem;color:var(--ink2);margin:5px 0 0}
.pesan{padding:13px 16px;border-radius:12px;margin-top:18px;font-size:.88rem;font-weight:600}
.pesan.sukses{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.4);color:#065F46}
.pesan.ingat{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.45);color:#92400E}
.baris-aksi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}

/* ---------- daftar riwayat ---------- */
table.riwayat{width:100%;border-collapse:collapse;margin-top:16px;font-size:.88rem}
table.riwayat th,table.riwayat td{padding:11px 12px;text-align:left;border-bottom:1px solid rgba(79,70,229,.14)}
table.riwayat th{font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2)}
table.riwayat tr:hover td{background:rgba(255,255,255,.5)}
.kosong-teks{color:var(--ink2);font-size:.9rem;font-style:italic}

/* ---------- pratinjau dokumen ---------- */
.kertas{
  background:#fff;border-radius:10px;padding:26px 30px;margin-top:20px;
  box-shadow:0 22px 50px rgba(31,27,58,.22);overflow-x:auto;
}
.kerangka-cetak{background:rgba(255,255,255,.5);backdrop-filter:blur(14px);border:1px solid var(--garis);border-radius:var(--radius);padding:14px 18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

@media print{
  body{background:#fff}
  body::before{display:none}
  .noprint{display:none !important}
  .kertas{box-shadow:none;margin:0;padding:0;border-radius:0}
  .bungkus{max-width:none;padding:0}
  .kartu{background:none;box-shadow:none;border:0;backdrop-filter:none;padding:0;margin:0}
}

/* ---------- multiuser: masuk/daftar, ringkasan, tabel admin ---------- */
.kotak-masuk{max-width:760px;margin:40px auto 0}
.kartu.auth{padding:28px}
.kartu.auth h1{margin:0 0 6px;font-size:1.4rem}
.kartu.auth label{margin-top:0}
.nav a.keluar{background:rgba(255,255,255,.85);border:1px solid var(--garis)}
.nav a.keluar:hover{background:#fff}

.ringkas{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.ringkas .angka{display:flex;flex-direction:column;line-height:1.15}
.ringkas .angka b{font-size:1.45rem}
.ringkas .angka span{font-size:.76rem;color:var(--ink2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.ringkas .tbl{margin-left:auto}

.aksi-baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aksi-baris form{margin:0}
.gulir-x{overflow-x:auto}
table.riwayat tr.baris-aktif td{background:rgba(79,70,229,.10)}
.grid-dua{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media (max-width:920px){.grid-dua{grid-template-columns:1fr}}
.form-tersembunyi{display:none}
.kotak-kelas{background:rgba(79,70,229,.06);border:1px solid rgba(79,70,229,.18);border-radius:14px;padding:16px;margin-top:16px}
.kelas-pil{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.label-stat{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2);font-weight:700}
.tanda-sudah{font-size:.76rem;font-weight:700;color:#047857}
.tanda-ok{font-size:.78rem;font-weight:700;color:#047857}
.tanda-kurang{font-size:.78rem;font-weight:700;color:#B45309}
.pesan.ingat a,.pesan.sukses a{color:inherit}

/* ---------- pemulihan sandi ---------- */
pre.kode{background:rgba(31,27,58,.06);border:1px solid rgba(79,70,229,.22);border-radius:10px;
  padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;
  overflow-x:auto;margin:10px 0}
.kartu.auth code{background:rgba(79,70,229,.10);padding:1px 5px;border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84em}
.status-pil{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px}
.status-pil.aktif{background:rgba(16,185,129,.16);color:#065F46}
.status-pil.nonaktif{background:rgba(245,158,11,.18);color:#92400E}