/* Malaka LMS — tampilan siswa */
.mlms{--l-p:#0b6fb4;--l-p2:#08527f;--l-r:#d51820;--l-g:#1d8a3f;--l-o:#b98c00;--l-ln:#dde8f1;--l-bg:#f2f7fb;--l-ink:#12263a;
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#3c4c5c;line-height:1.7;max-width:1080px;margin:0 auto}
.mlms *,.mlms *::before,.mlms *::after{box-sizing:border-box}
.mlms h2,.mlms h3,.mlms h4{color:var(--l-ink);margin-top:0}

.mlms-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.mlms-head h2{margin-bottom:4px;font-size:1.7rem}
.mlms-head p{margin:0;color:#647787}
.mlms-back{margin-bottom:16px;font-size:.9rem}
.mlms-judul-bagian{margin:32px 0 14px;font-size:1.2rem}

.mlms-panel{background:#fff;border:1px solid var(--l-ln);border-radius:14px;padding:26px;margin-bottom:20px}
.mlms-panel--tengah{max-width:460px;margin:0 auto;text-align:center}
.mlms-kosong{background:var(--l-bg);border:1px dashed var(--l-ln);border-radius:12px;padding:22px;text-align:center;color:#647787;margin-bottom:20px}

.mlms-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.75rem 1.4rem;border:2px solid transparent;border-radius:99px;
  font-family:inherit;font-weight:700;font-size:.94rem;cursor:pointer;text-decoration:none;transition:.18s}
.mlms-btn--utama{background:var(--l-p);color:#fff}
.mlms-btn--utama:hover{background:var(--l-p2);color:#fff}
.mlms-btn--garis{background:#fff;border-color:var(--l-ln);color:var(--l-ink)}
.mlms-btn--garis:hover{border-color:var(--l-p);color:var(--l-p)}
.mlms-link{background:none;border:0;color:#8598a8;text-decoration:underline;cursor:pointer;font-family:inherit;font-size:.88rem;padding:0 0 0 12px}

.mlms-alert{padding:12px 16px;border-radius:8px;font-size:.93rem;margin-bottom:16px}
.mlms-alert--ok{background:#e8f6ec;border:1px solid #b6e2c3;color:#1d6b33}
.mlms-alert--err{background:#fdebec;border:1px solid #f5c2c5;color:#9b1620}
.mlms-alert--info{background:#eaf4fb;border:1px solid #c4e0f2;color:#0a4b78}

/* Kotak kode kelas */
.mlms-gabung{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--l-ln);border-radius:12px;padding:16px 20px;margin-bottom:24px}
.mlms-gabung label{font-weight:700;color:var(--l-ink);font-size:.92rem}
.mlms-gabung input{flex:1;min-width:140px;padding:.7rem 1rem;border:1px solid var(--l-ln);border-radius:8px;font-family:inherit;
  text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:1rem}

/* Kartu kelas */
.mlms-kelas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.mlms-kelas{display:block;background:#fff;border:1px solid var(--l-ln);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.2s}
.mlms-kelas:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(18,38,58,.1);border-color:transparent}
.mlms-kelas__gambar{aspect-ratio:16/9;background:linear-gradient(135deg,var(--l-p2),var(--l-p));display:grid;place-items:center;overflow:hidden}
.mlms-kelas__gambar img{width:100%;height:100%;object-fit:cover}
.mlms-kelas__inisial{font-size:2.6rem;font-weight:800;color:rgba(255,255,255,.9)}
.mlms-kelas__isi{padding:16px 18px 18px}
.mlms-kelas__isi h4{margin:0 0 4px;font-size:1.05rem;line-height:1.35}
.mlms-kelas__guru{margin:0 0 10px;font-size:.85rem;color:var(--l-p)}
.mlms-kelas__meta{margin:8px 0 0;font-size:.82rem;color:#8598a8}

.mlms-bar{height:7px;background:var(--l-bg);border-radius:99px;overflow:hidden}
.mlms-bar i{display:block;height:100%;background:var(--l-g);border-radius:99px;transition:width .4s}
.mlms-bar--besar{height:10px;margin-top:14px}

/* Kepala kelas */
.mlms-kelas-head{background:linear-gradient(120deg,var(--l-ink),var(--l-p));color:#fff;border-radius:14px;padding:28px;margin-bottom:22px}
.mlms-kelas-head h2{color:#fff;margin-bottom:8px}
.mlms-kelas-head__meta{margin:0;font-size:.9rem;color:#cfe3f2;display:flex;gap:18px;flex-wrap:wrap}
.mlms-kelas-head__persen{margin:8px 0 0;font-size:.85rem;color:#cfe3f2}
.mlms-kelas-head .mlms-bar{background:rgba(255,255,255,.2)}

/* Daftar materi */
.mlms-materi-list{list-style:none;margin:0;padding:0;border:1px solid var(--l-ln);border-radius:12px;overflow:hidden;background:#fff}
.mlms-materi-list li{border-bottom:1px solid var(--l-ln)}
.mlms-materi-list li:last-child{border-bottom:0}
.mlms-materi-list a{display:flex;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;color:var(--l-ink)}
.mlms-materi-list a:hover{background:var(--l-bg)}
.mlms-cek{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid var(--l-ln);display:grid;place-items:center;font-size:.8rem;color:#fff}
.mlms-materi-list li.is-selesai .mlms-cek{background:var(--l-g);border-color:var(--l-g)}
.mlms-materi-judul{flex:1;font-weight:600}
.mlms-materi-meta{display:flex;gap:8px;flex:none}
.mlms-materi-meta em{font-style:normal;font-size:.75rem;background:var(--l-bg);color:#647787;padding:2px 8px;border-radius:99px}

/* Daftar tugas */
.mlms-tugas-list{display:grid;gap:10px}
.mlms-tugas{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--l-ln);
  border-left:4px solid var(--l-ln);border-radius:10px;padding:14px 18px;text-decoration:none;color:inherit;transition:.18s}
.mlms-tugas:hover{box-shadow:0 4px 14px rgba(18,38,58,.07)}
.mlms-tugas--belum{border-left-color:var(--l-o)}
.mlms-tugas--lewat{border-left-color:var(--l-r)}
.mlms-tugas--kirim{border-left-color:var(--l-p)}
.mlms-tugas--dinilai{border-left-color:var(--l-g)}
.mlms-tugas__kiri strong{display:block;color:var(--l-ink);line-height:1.35}
.mlms-tugas__kiri span{font-size:.83rem;color:#8598a8}
.mlms-tugas__kanan{text-align:right;flex:none}
.mlms-tugas__kanan small{display:block;font-size:.78rem;color:#8598a8;margin-top:3px}
.mlms-nilai-kecil{display:inline-block;background:var(--l-g);color:#fff;font-weight:800;padding:4px 12px;border-radius:99px;font-size:.95rem}

.mlms-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.mlms-tag--belum{background:#fcf3e3;color:#8a5700}
.mlms-tag--lewat{background:#fdebec;color:#9b1620}
.mlms-tag--kirim{background:#eaf4fb;color:#0a4b78}
.mlms-tag--dinilai{background:#e8f6ec;color:#1d6b33}
.mlms-tag--telat{background:#fdebec;color:#9b1620;margin-left:6px}

/* Materi */
.mlms-video{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000;margin-bottom:20px}
.mlms-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mlms-isi img{max-width:100%;height:auto;border-radius:8px}
.mlms-progres-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--l-ln);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mlms-nav-materi{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Tugas */
.mlms-tugas-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:.9rem;color:#647787;padding-bottom:14px;border-bottom:1px solid var(--l-ln);margin-bottom:18px}
.mlms-form-kirim{display:grid;gap:16px;background:var(--l-bg);border-radius:12px;padding:20px;margin-top:10px}
.mlms-field{display:block}
.mlms-field span{display:block;font-weight:700;color:var(--l-ink);font-size:.88rem;margin-bottom:6px}
.mlms-field input[type=url],.mlms-field textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--l-ln);border-radius:8px;font-family:inherit;font-size:.98rem;line-height:1.7;background:#fff}
.mlms-field textarea{resize:vertical}
.mlms-field small{display:block;margin-top:5px;font-size:.8rem;color:#8598a8}
.mlms-kirim-box{background:var(--l-bg);border-radius:12px;padding:20px;margin:20px 0}
.mlms-kirim-box h3{font-size:1.05rem;margin-bottom:8px}
.mlms-jawaban{background:#fff;border:1px solid var(--l-ln);border-radius:8px;padding:12px 14px;font-size:.93rem;margin:10px 0}
.mlms-hasil-nilai{margin-top:14px;background:#fff;border:1px solid #b6e2c3;border-radius:10px;padding:16px}
.mlms-hasil-nilai__angka{font-size:2.2rem;font-weight:800;color:var(--l-g);line-height:1}
.mlms-hasil-nilai__angka small{font-size:1rem;color:#8598a8;font-weight:600}
.mlms-umpan{margin:10px 0 0;font-size:.92rem}

@media (max-width:600px){
  .mlms-kelas-grid{grid-template-columns:1fr}
  .mlms-gabung{flex-direction:column;align-items:stretch}
  .mlms-tugas{flex-direction:column;align-items:flex-start}
  .mlms-tugas__kanan{text-align:left}
}