/* Bismillaahirrohmanirrohim
   belajar.css -- halaman siswa materi ajar (masuk-siswa.php, belajar.php).
   Ditulis tanpa Tailwind supaya tidak perlu membangun ulang app.css; warna aksen
   mengikuti warna tombol sekolah (--aw-color-tombol dari setting_umum). */
.blj {
  --blj-garis: #e5e7eb;
  --blj-teks: #1f2937;
  --blj-redup: #6b7280;
  --blj-latar: #ffffff;
  --blj-krem: #f9fafb;
  --blj-aksen: var(--aw-color-tombol, #4a7a1f);
  --blj-aksen-gelap: var(--aw-color-tombol-gelap, #3f6a19);
  --blj-jingga: #b8661c;
  --blj-bata: #a8461f;
  color: var(--blj-teks);
  font-size: 15px;
}
html.dark .blj { --blj-garis: #334155; --blj-teks: #e5e7eb; --blj-redup: #94a3b8; --blj-latar: #0f172a; --blj-krem: #111827; }
.blj *, .blj *::before, .blj *::after { box-sizing: border-box; }
.blj-wadah { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; }
.blj-mikro { display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--blj-redup); }
.blj-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--blj-redup); }
.blj-tautan { border: 0; background: none; padding: 0; color: var(--blj-aksen); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.blj-tautan:hover { text-decoration: underline; text-underline-offset: 3px; }
.blj-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--blj-aksen); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s; }
.blj-tombol:hover { background: var(--blj-aksen-gelap); color: #fff; }
.blj-tombol[aria-disabled="true"] { background: #e5e7eb; color: #9ca3af; pointer-events: none; }
html.dark .blj-tombol[aria-disabled="true"] { background: #1f2937; color: #64748b; }

/* masuk */
.blj-masuk { display: flex; justify-content: center; padding: 48px 16px 72px; }
.blj-kartu-masuk { width: min(420px, 100%); padding: 32px; border: 1px solid var(--blj-garis); border-radius: 16px; background: var(--blj-latar); }
.blj-kartu-masuk h1 { margin: 6px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.blj-isian { margin-top: 18px; }
.blj-isian label { display: block; margin-bottom: 6px; }
.blj-isian input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--blj-garis); border-radius: 10px; background: var(--blj-krem); color: var(--blj-teks); font-size: 16px; }
.blj-isian input:focus { outline: 0; border-color: var(--blj-aksen); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blj-aksen) 18%, transparent); background: var(--blj-latar); }
.blj-galat { margin-top: 16px; padding: 10px 14px; border-left: 2px solid var(--blj-bata); background: #fbf1ee; border-radius: 0 10px 10px 0; color: #7a2e16; font-size: 14px; }
html.dark .blj-galat { background: #3b1d14; color: #fecaca; }
.blj-kartu-masuk .blj-tombol { width: 100%; margin-top: 22px; height: 48px; }
.blj-catatan { margin: 14px 0 0; font-size: 13px; color: var(--blj-redup); text-align: center; }

/* daftar tugas */
.blj-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding-bottom: 20px; border-bottom: 1px solid var(--blj-garis); }
.blj-kepala h1 { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.blj-kepala .blj-aksi-kepala { margin-left: auto; }
.blj-bagian { margin-top: 32px; }
.blj-bagian > .blj-mikro { margin-bottom: 12px; }
.blj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.blj-kartu { display: flex; flex-direction: column; border: 1px solid var(--blj-garis); border-radius: 14px; overflow: hidden; background: var(--blj-latar); transition: border-color .2s, transform .2s; }
.blj-kartu:hover { border-color: color-mix(in srgb, var(--blj-aksen) 40%, var(--blj-garis)); transform: translateY(-2px); }
.blj-sampul { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--blj-krem); }
.blj-badan { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.blj-badan h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.blj-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--blj-garis); font-size: 14px; }
.blj-baris:last-of-type { border-bottom: 0; }
.blj-baris b { font-variant-numeric: tabular-nums; }
.blj-info { margin: 12px 0 14px; }
.blj-kaki { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blj-kaki .blj-tombol { flex: 1; }
.blj-mendesak { color: var(--blj-jingga); font-weight: 600; }
.blj-nilai { font-size: 22px; font-weight: 700; color: var(--blj-aksen); font-variant-numeric: tabular-nums; }
.blj-kosong { padding: 28px; border: 1px dashed var(--blj-garis); border-radius: 14px; color: var(--blj-redup); }
.blj-kosong b { display: block; color: var(--blj-teks); margin-bottom: 2px; }
.blj-lewat { border: 1px solid var(--blj-garis); border-radius: 14px; overflow: hidden; }
.blj-lewat-baris { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--blj-garis); }
.blj-lewat-baris:last-child { border-bottom: 0; }
.blj-lewat-baris > div { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .blj-wadah { padding-top: 20px; }
  .blj-kepala h1 { font-size: 22px; }
  .blj-kartu-masuk { padding: 24px 20px; }
}