/* ===========================================================================
   Exilir — LMS Peserta
   Token warna dan huruf diambil dari landing.css supaya LMS terasa lanjutan
   halaman etalase, bukan aplikasi lain. Yang TIDAK ikut diambil: skala
   tipografi raksasa milik landing (h1 72px). Landing harus berteriak dari
   kejauhan; LMS dibaca dari jarak 40cm oleh orang yang sudah memutuskan.
   =========================================================================== */

:root{
  --mint-soft:#7ff2c3; --mint:#52e8ab; --mint-dark:#35c792;
  --navy:#19283f; --navy-soft:#243a5a;
  --muted:#6b7b74;
  --line:#e4eae8; --line-2:#eef2f0;
  --bg:#f7f9f8; --white:#fff;
  --danger:#e5484d;

  --radius:12px; --radius-lg:20px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(14,49,40,.04), 0 10px 30px rgba(14,49,40,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.5; letter-spacing:-.01em;
  color:var(--navy); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--mint-dark);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em}
p{margin:0}

/* Cincin fokus satu bentuk untuk semua elemen yang bisa difokus — dipakai
   keyboard, jadi tidak boleh berbeda-beda antar halaman. */
:where(a,button,input):focus-visible{
  outline:2px solid var(--mint-dark); outline-offset:2px;
}

/* --------------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius-pill);border:2px solid transparent;
  font:inherit;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  cursor:pointer;text-decoration:none;
  transition:background-color .15s ease, transform .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--mint-soft);color:var(--navy)}
.btn--primary:hover{background:var(--mint)}
/* Tombol sekunder: dipakai sesi yang sudah selesai, di mana "buka lagi" tidak
   boleh terlihat sepenting "lanjut belajar" di sesi yang sedang berjalan. */
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn--ghost:hover{background:var(--bg);border-color:var(--navy-soft)}
.btn--block{width:100%;padding-block:15px}

/* --------------------------------------------------------------------------
   Kolom isian
   -------------------------------------------------------------------------- */
.field{display:grid;gap:7px}
.field__label{font-size:13.5px;font-weight:600;color:var(--navy-soft)}
.field__in{
  width:100%;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  font:inherit;font-size:15px;color:var(--navy);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.field__in::placeholder{color:#a9b6b1}
.field__in:focus{
  outline:none;border-color:var(--mint-dark);
  box-shadow:0 0 0 3px rgba(53,199,146,.16);
}

/* ===========================================================================
   Halaman masuk — panel gambar kiri, formulir kanan
   =========================================================================== */

body.auth{background:var(--white)}

.auth__split{
  display:grid;
  /* Kiri sedikit lebih lebar: gambarnya yang butuh ruang, formulirnya tidak —
     kolom isian di atas 400px justru makin susah dipindai matanya. */
  grid-template-columns:1.08fr 1fr;
  min-height:100vh; min-height:100dvh;
}

/* ---- panel kiri ---- */
.auth__brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:40px;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(127,242,195,.55) 0%, rgba(127,242,195,0) 60%),
    linear-gradient(165deg,#f0fbf5 0%, #dff7ec 100%);
}
.auth__logo{display:inline-block;align-self:flex-start}
.auth__logo img{height:30px;width:auto}
.auth__logo--mobile{display:none}

/* Isi panel didorong ke bawah, bukan ditengahkan: sisi bawah gambarnya
   terpotong lurus di berkas aslinya (lengkung mint-nya habis di situ), jadi
   satu-satunya cara menyembunyikan garis potong itu adalah menempelkannya ke
   tepi bawah panel. Ruang kosong yang tersisa jatuh di atas, tempat logo. */
.auth__brandbody{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  gap:28px;max-width:620px;width:100%;margin-inline:auto;
}
.auth__tag{
  font-size:34px;line-height:1.18;color:var(--navy);
}
.auth__tag em{font-style:normal;color:var(--mint-dark)}

/* Gambarnya PNG transparan yang sudah membawa lengkung mint sendiri — jadi
   tidak diberi latar, sudut membulat, atau bayangan. Semua itu akan menggambar
   kotak di belakang gambar yang bentuknya bukan kotak. */
.auth__art{
  width:100%;height:auto;
  margin-bottom:-40px;   /* -40px = padding panel, supaya menempel tepi bawah */
  flex:none;             /* tanpa ini flexbox menyusutkan gambarnya sampai hilang
                            saat panel lebih pendek dari isi */
}

/* ---- kolom kanan ---- */
.auth__panel{
  display:flex;align-items:center;justify-content:center;
  padding:48px 40px;
}
.auth__form{width:100%;max-width:380px}

.auth__title{font-size:30px;line-height:1.2}
.auth__sub{margin-top:8px;color:var(--muted);font-size:15px}
.auth__sub b{color:var(--navy);font-weight:600}

.auth__fields{display:grid;gap:18px;margin-top:28px}

.auth__note{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}
.auth__alt{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:14px;color:var(--muted);text-align:center}

/* Baris bantuan paling bawah. Ditempel ke dasar kolom di layar tinggi supaya
   tidak ikut mengambang di tengah bersama formulirnya. */
.auth__legal{margin-top:40px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---- kotak kode 6 digit ---- */
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp__box{
  width:100%;height:58px;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  font:inherit;font-size:22px;font-weight:700;text-align:center;color:var(--navy);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.otp__box:focus{
  outline:none;border-color:var(--mint-dark);
  box-shadow:0 0 0 3px rgba(53,199,146,.16);
}

/* ===========================================================================
   Dashboard
   =========================================================================== */

body.app{background:var(--bg)}

.top{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--line)}
.top__in{
  display:flex;align-items:center;gap:16px;
  /* Lebar + padding SAMA dengan .page: logo sejajar tepi kiri isi halaman,
     chevron akun sejajar tepi kanan kartu sesi. */
  height:64px;max-width:1060px;margin-inline:auto;padding-inline:24px;
}
.top__logo img{height:28px;width:auto}
.top__acct{display:flex;align-items:center;gap:12px;margin-left:auto}
.top__name{font-size:14px;font-weight:600;color:var(--navy)}
.top__out{font-size:14px;color:var(--muted);font-weight:500}
.top__out:hover{color:var(--navy)}

/* ---- menu akun: nama + avatar + chevron, "Keluar" di dalamnya ---- */
.akun{position:relative}
.akun__tombol{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;
  padding:4px 0 4px 6px;border-radius:var(--radius-pill);user-select:none}
.akun__tombol::-webkit-details-marker{display:none}
.akun__tombol:hover .akun__chevron{color:var(--navy)}
.akun__chevron{flex:none;color:var(--muted);transition:transform .15s ease}
.akun[open] .akun__chevron{transform:rotate(180deg);color:var(--navy)}
.akun__menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;padding:6px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);z-index:20}
.akun__siapa{padding:10px 12px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.akun__nama{font-size:14px;font-weight:700;color:var(--navy)}
.akun__email{margin-top:2px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.akun__item{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--navy)}
.akun__item:hover{background:var(--bg);text-decoration:none}

.avatar{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--mint-soft);color:var(--navy);font-size:13px;font-weight:700;
}

.page{max-width:1060px;margin-inline:auto;padding:40px 24px 80px}

/* ---- kepala kelas ---- */
.kelas-head__batch{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mint-dark)}
.kelas-head__title{margin-top:6px;font-size:28px;line-height:1.2}

/* Batang kemajuan selebar kolom kanan, sama dengan kartu sesi di bawahnya. */
.bar{height:6px;margin-top:18px;border-radius:var(--radius-pill);
  background:var(--line-2);overflow:hidden}
.bar__fill{display:block;height:100%;border-radius:inherit;background:var(--mint-dark)}
.kelas-head__prog{margin-top:8px;font-size:13px;color:var(--muted)}

/* ---- dua kolom: silabus | isi sesi ---- */
.split{
  display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;
  /* Kepala kelas selebar isi halaman di baris pertama; silabus | sesi di bawahnya. */
  grid-template-areas:"head head" "silabus sesi";
  align-items:start;
  transition:grid-template-columns .2s ease;
}
.split > .kelas-head{grid-area:head}

/* Kepala kelas menempel di bawah bilah atas (64px) saat halaman digulung, dan
   kedua kartu lewat di bawahnya. Latarnya SOLID warna halaman -- ekor gradien
   sempat dicoba dan membuat kartu tampak tembus di bawah judul.
   Bayangan tanpa blur 32px di kiri dan kanan memperlebar latar itu: bayangan
   kartu lebih lebar dari kartunya, dan tanpa ini halonya tetap terlihat di
   kedua sisi judul saat kartu lewat di bawah.
   Margin negatif mengimbangi padding: posisi teks saat belum digulung tidak
   bergeser, dan saat menempel teksnya tepat di 88px. */
.split > .kelas-head{
  position:sticky;top:64px;z-index:5;
  margin:-24px 0 -16px;padding:24px 0 16px;
  background:var(--bg);
  box-shadow:-32px 0 0 var(--bg), 32px 0 0 var(--bg);
}
.split > .silabus{grid-area:silabus}
.split > .sesi{grid-area:sesi}
.pesan + .split{margin-top:20px}

/* Menu silabus menempel saat halaman digulung: daftar 10 sesi lebih panjang
   dari isi sesi yang pendek, dan kalau ikut menggulung, peserta kehilangan
   satu-satunya alat pindah sesi begitu ia membaca ke bawah. */
.silabus{
  /* Menempel di bawah bilah atas (64px) DAN kepala kelas yang juga menempel.
     --kepala dipasang skrip di dashboard.php dari tinggi kepala; 180px hanya
     cadangan bila skrip tidak jalan. */
  position:sticky;top:calc(64px + var(--kepala, 180px));
  /* Gulungan SENDIRI: tinggi kartu dibatasi ruang layar di bawah kepala kelas.
     Tanpa ini silabus yang lebih tinggi dari layar tidak pernah bisa menempel,
     dan sesi terakhirnya hanya terjangkau dengan menggulung seluruh halaman.
     80px di bawah = padding bawah .page. Dengan sisa lebih kecil, saat halaman
     digulung sampai habis kartu kehabisan ruang di area gridnya dan terdorong
     naik ke balik kepala kelas (terukur 48px pada 1280x800, 2026-09-14).
     overscroll-behavior: ujung daftar tidak ikut menggulung halaman. */
  max-height:calc(100vh - 64px - var(--kepala, 180px) - 80px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:0 16px 16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.silabus__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:32px;padding:16px 0 8px 8px;
  /* Judul + tombol lipat tetap di atas saat daftarnya digulung. Padding atas
     pindah dari kartu ke sini supaya daftar tidak terlihat di atas judul. */
  position:sticky;top:0;z-index:1;background:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

/* Scrollbar silabus DISEMBUNYIKAN (tetap bisa digulung dengan roda, trackpad,
   sentuh, dan keyboard). Penggantinya pudar di tepi: tanpa tanda apa pun, sesi
   yang terpotong di bawah terbaca seperti tidak ada. Kelas .ada-atas /
   .ada-bawah dipasang skrip di dashboard.php, dan pudarnya hilang sendiri di
   ujung daftar -- jadi daftar yang muat tanpa digulung tetap bersih. */
.silabus::-webkit-scrollbar{display:none}
.silabus__hd::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:24px;
  background:linear-gradient(var(--white),rgba(255,255,255,0));pointer-events:none;
  opacity:0;transition:opacity .15s ease;
}
.silabus.ada-atas .silabus__hd::after{opacity:1}
/* bottom NEGATIF = padding bawah kartu. Posisi sticky diukur dari dalam padding
   wadah gulungnya, jadi dengan bottom:0 pudarnya berhenti 16px di atas tepi
   kartu dan baris yang terpotong tetap terlihat di celah itu (2026-09-14). */
.silabus::after{
  content:"";display:block;position:sticky;bottom:-16px;height:48px;margin-top:-48px;
  background:linear-gradient(rgba(255,255,255,0),var(--white) 75%);pointer-events:none;
  opacity:0;transition:opacity .15s ease;
}
.is-lipat .silabus::after{bottom:-12px}
.silabus.ada-bawah::after{opacity:1}

/* Tombol lipat silabus: ikon panel + panah. Panahnya berbalik saat terlipat. */
.silabus__lipat{display:grid;place-items:center;width:32px;height:32px;flex:none;
  padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.silabus__lipat[hidden]{display:none}
.silabus__lipat:hover{background:var(--line-2);color:var(--navy)}
.silabus__panah{transform-box:fill-box;transform-origin:center;transition:transform .15s ease}
.is-lipat .silabus__panah{transform:rotate(180deg)}
.silabus__list{margin:0;padding:0;list-style:none;display:grid;gap:2px}

.sesi-item{
  display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  padding:10px 8px;border-radius:10px;
  text-decoration:none;font-weight:400;color:var(--navy);
  transition:background-color .12s ease;
}
.sesi-item:hover{background:var(--line-2);text-decoration:none}

.sesi-item__no{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--line-2);color:var(--muted);
  font-size:12.5px;font-weight:700;line-height:1;
}
.sesi-item__teks{display:grid;gap:2px;min-width:0}
.sesi-item__judul{font-size:14.5px;font-weight:600;line-height:1.35}
.sesi-item__meta{font-size:12px;color:var(--muted)}

.sesi-item--selesai .sesi-item__no{background:var(--mint-soft);color:var(--navy)}
.sesi-item--berjalan .sesi-item__no{background:var(--mint-dark);color:var(--white)}
/* Sesi yang belum datang diredupkan, bukan disembunyikan: peserta boleh melihat
   ke mana kelas ini menuju — itu bagian dari alasan ia bertahan sampai sesi
   terakhir. Diredupkan BUKAN berarti terkunci: tautannya, kalau sudah ada,
   tetap bisa dibuka. */
.sesi-item--nanti{color:#93a49e}
.sesi-item--nanti .sesi-item__judul{font-weight:500}
.sesi-item--nanti .sesi-item__meta{color:#a9b6b1}

/* Yang sedang dibuka ditandai latar mint + garis kiri. Warna saja tidak cukup:
   di layar redup atau mata yang sulit membedakan hijau, garisnya yang bekerja. */
.sesi-item.is-open{
  background:rgba(127,242,195,.22);
  box-shadow:inset 3px 0 0 var(--mint-dark);
}
.sesi-item.is-open .sesi-item__judul{font-weight:700}

/* ---- silabus terlipat (layar lebar): rel nomor sesi ----
   Teksnya disembunyikan secara VISUAL saja, bukan display:none: pembaca layar
   tetap membacakan judul tiap tautan, dan `title` memberinya tooltip. */
.split.is-lipat{grid-template-columns:72px minmax(0,1fr)}
.is-lipat .silabus{padding:0 8px 12px}
.is-lipat .silabus__hd{justify-content:center;padding:12px 0 8px}
.is-lipat .silabus__label,
.is-lipat .sesi-item__teks{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.is-lipat .sesi-item{grid-template-columns:26px;justify-content:center;padding:8px 0}

/* ---- isi sesi ---- */
.sesi{
  padding:32px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.sesi__kicker{display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tanda{padding:3px 10px;border-radius:var(--radius-pill);font-size:11.5px;letter-spacing:.02em}
.tanda--selesai{background:var(--mint-soft);color:var(--navy)}
.tanda--berjalan{background:var(--mint-dark);color:var(--white)}
.tanda--nanti{background:var(--line-2);color:var(--muted)}

.sesi__judul{margin-top:10px;font-size:26px;line-height:1.22}
.sesi__meta{margin-top:6px;font-size:13px;color:var(--muted)}
.sesi__ringkas{margin-top:18px;max-width:62ch;font-size:15.5px;line-height:1.65;color:var(--navy-soft)}
.sesi .btn{margin-top:24px}
.sesi__catatan{margin-top:18px;padding:12px 16px;border-radius:var(--radius);
  background:var(--bg);color:var(--muted);font-size:14px}

/* Isi sesi datang sebagai HTML dari dashboard (daftar sub-topik). Gayanya
   ditetapkan di sini, bukan di dalam HTML-nya, supaya materi yang diketik tim
   tetap seragam dengan halaman ini. */
.sesi__isi{margin-top:18px;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--navy-soft)}
.sesi__isi ul,.sesi__isi ol{margin:0;padding-left:20px}
.sesi__isi li{margin-bottom:6px}
.sesi__isi li::marker{color:var(--mint-dark)}
.sesi__isi p{margin:0 0 10px}
.sesi__isi a{color:var(--mint-dark)}

/* Halaman "belum bisa dimuat" */
.gagal{max-width:44ch;margin:64px auto;text-align:center}
.gagal__judul{font-size:26px;line-height:1.25}
.gagal__teks{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6}
.gagal__aksi{margin-top:24px}

/* ---- blok tautan Zoom (satu per sesi) ---- */
.zoom{
  margin-top:24px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
}
/* Sesi yang sedang berjalan diberi latar mint tipis dan garis kiri — di layar
   ini ia satu-satunya hal yang mungkin diklik peserta lima menit sebelum kelas
   mulai, jadi ia boleh menonjol. */
.zoom--berjalan{background:rgba(127,242,195,.16);border-color:rgba(53,199,146,.45);
  box-shadow:inset 3px 0 0 var(--mint-dark)}
/* Sesi lewat & yang masih jauh sengaja datar: tautannya ada, tapi tidak menarik mata. */
.zoom--selesai,.zoom--nanti{opacity:.9}

.zoom__hd{display:flex;align-items:center;gap:10px}
.zoom__ikon{display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:8px;background:var(--navy);color:var(--white)}
.zoom__label{font-size:13px;font-weight:700;color:var(--navy)}
.zoom__jadwal{font-size:12.5px;color:var(--muted)}

.zoom__tautan{margin-top:14px;font-size:13.5px;overflow-wrap:anywhere}
.zoom__tautan a{color:var(--navy-soft);font-weight:500}
.zoom__kredensial{margin-top:6px;font-size:13px;color:var(--muted)}
.zoom__kredensial b{color:var(--navy);font-weight:600;letter-spacing:.01em}

.zoom__aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.zoom__nota{margin-top:12px;font-size:12.5px;color:var(--muted)}

/* Kartu Zoom sesi yang sudah lewat: seluruhnya terlipat di balik satu tombol. */
.zoom-lipat{margin-top:24px}
.zoom-lipat__buka{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  font-size:13.5px;font-weight:700;color:var(--mint-dark);user-select:none}
.zoom-lipat__buka::-webkit-details-marker{display:none}
.zoom-lipat__buka:hover{text-decoration:underline}
.zoom-lipat__buka svg{transition:transform .15s ease}
.zoom-lipat[open] > .zoom-lipat__buka svg{transform:rotate(180deg)}
.zoom-lipat__teks-tutup{display:none}
.zoom-lipat[open] .zoom-lipat__teks-buka{display:none}
.zoom-lipat[open] .zoom-lipat__teks-tutup{display:inline}
.zoom-lipat > .zoom{margin-top:12px}
.zoom__kosong{margin-top:12px;font-size:13.5px;color:var(--muted)}

.btn--kecil{padding:9px 16px;font-size:13.5px}
.btn.is-salin{background:var(--mint-soft);border-color:transparent;color:var(--navy)}

/* ---- bagian yang memang masih kosong ---- */
.kosong{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.kosong__hd{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.kosong__txt{margin-top:8px;max-width:52ch;color:var(--muted);font-size:14.5px}

/* ---- pesan sekali tayang (lms_flash) ---- */
.pesan{margin-top:20px;padding:11px 14px;border:1px solid;border-radius:var(--radius);
  font-size:14px;line-height:1.45}
.pesan--info{background:rgba(127,242,195,.16);border-color:rgba(53,199,146,.45);color:var(--navy)}
.pesan--galat{background:rgba(229,72,77,.07);border-color:rgba(229,72,77,.35);color:#9b1c20}

/* Tombol yang tampil sebagai tautan — "Kirim ulang kode" harus POST (membawa
   token), tapi di dalam kalimat ia tetap harus terbaca seperti tautan biasa. */
.tautan{padding:0;border:0;background:none;font:inherit;font-weight:600;
  color:var(--mint-dark);cursor:pointer}
.tautan:hover{text-decoration:underline}

.top__ganti{font-size:14px;font-weight:600;color:var(--navy-soft);white-space:nowrap}
.top__ganti-hp{display:none}
/* Penanda mode tim: selalu terlihat, termasuk di ponsel -- layar yang membuka Zoom
   SEMUA angkatan tidak boleh bisa tertukar dengan layar peserta. */
.top__mode{padding:3px 10px;border-radius:var(--radius-pill);background:var(--navy);color:var(--white);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.tanda--galat{background:rgba(229,72,77,.1);color:#9b1c20}

/* ---- kelas saya: daftar kartu ---- */
.kelas-daftar{margin-top:32px;display:grid;gap:40px}
.kelas-grup__hd{margin-bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.kelas-grup__hd span{font-weight:500}
.kelas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}

.kartu{display:flex;flex-direction:column;overflow:hidden;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.kartu__gambar{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg)}
.kartu__isi{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 20px}
.kartu__batch{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mint-dark)}
.kartu__judul{font-size:18px;line-height:1.3}
.kartu__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  font-size:13px;line-height:1.5;color:var(--muted)}
.kartu__meta b{color:var(--navy);font-weight:600}
/* Baris sesi di kartu: blok biasa, BUKAN flex seperti .kartu__meta -- di dalam flex
   setiap potongan teks jadi item sendiri dan tanda baca terlempar ke baris baru. */
.kartu__sesi{font-size:13px;line-height:1.5;color:var(--muted)}
.kartu__sesi b{color:var(--navy);font-weight:600}
.kartu__aksi{margin-top:auto;padding-top:10px}
.kartu__nota{font-size:13px;color:var(--muted)}
/* Kelas yang belum/tidak bisa dibuka diredupkan, bukan disembunyikan: peserta
   perlu melihat bahwa pendaftarannya tercatat. */
.kartu--redup{box-shadow:none;background:var(--bg)}
.kartu--redup .kartu__gambar{filter:grayscale(.6);opacity:.75}

/* ---- materi PDF sesi ---- */
.materi{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.materi__item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  font:inherit;color:var(--navy);text-align:left;cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease}
.materi__item:hover{border-color:var(--mint-dark);background:rgba(127,242,195,.12)}
.materi__ikon{display:grid;place-items:center;width:38px;height:44px;flex:none;border-radius:6px;
  background:#fdecec;color:#c0392b;font-size:11px;font-weight:800;letter-spacing:.04em}
.materi__teks{display:grid;gap:2px;min-width:0;flex:1}
.materi__judul{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.materi__meta{font-size:12px;color:var(--muted)}
.materi__buka{font-size:13px;font-weight:700;color:var(--mint-dark)}

/* ---- viewer materi: layar penuh, tanpa unduh ----
   user-select none: tidak ada teks yang bisa dipilih (viewer.js pun tidak
   membuat lapisan teks). Saat dicetak, viewer disembunyikan seluruhnya. */
html.viewer-buka{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:rgba(15,23,36,.94);-webkit-user-select:none;user-select:none}
.viewer[hidden]{display:none}
.viewer__bilah{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;flex:none;color:var(--white)}
.viewer__judul{flex:1;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer__jumlah{font-size:13px;color:rgba(255,255,255,.7);white-space:nowrap}
.viewer__aksi{display:flex;gap:6px}
.viewer__tombol{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;
  background:rgba(255,255,255,.12);color:var(--white);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.viewer__tombol:hover{background:rgba(255,255,255,.22)}
/* Blok + margin auto, bukan flex center: halaman yang diperbesar melebihi layar
   harus bisa digulung ke KIRI juga — flex center memotongnya tanpa bisa dicapai. */
.viewer__isi{flex:1;overflow:auto;padding:8px 16px 40px;overscroll-behavior:contain}
.viewer__halaman{margin:0 auto 16px;background:var(--white);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.viewer__halaman canvas{display:block}
.viewer__status{margin:48px auto;max-width:40ch;color:rgba(255,255,255,.85);text-align:center;font-size:14px}
@media print{.viewer{display:none!important}}

/* ===========================================================================
   Layar kecil
   =========================================================================== */

@media (max-width:900px){
  /* Panel kiri hilang sepenuhnya, bukan mengecil di atas formulir: di ponsel
     ruang paling berharga adalah yang di atas lipatan, dan hiasan tidak boleh
     mendorong kolom email keluar dari sana. Logonya pindah ke atas formulir. */
  .auth__split{grid-template-columns:1fr}
  .auth__brand{display:none}
  .auth__panel{align-items:flex-start;padding:32px 20px 48px}
  .auth__logo--mobile{display:block;margin-bottom:36px}
  .auth__title{font-size:26px}
  .otp__box{height:52px;font-size:20px}
}

@media (max-width:980px){
  /* Silabus pindah ke atas isi sesi dan berhenti menempel — di layar sempit
     kolom 330px menyisakan lebar baca yang tidak layak untuk kolom kanan. */
  .split{grid-template-columns:1fr;gap:20px;grid-template-areas:"head" "silabus" "sesi"}
  /* Di layar sempit kepala kelas TIDAK menempel: judul dua baris + progres
     memakan hampir seperlima layar ponsel sepanjang waktu. */
  .split > .kelas-head{position:static;margin:0;padding:0;background:none;box-shadow:none}
  .silabus{position:static;max-height:none;overflow:visible}
  .silabus__hd{position:static}
  /* Satu kolom: terlipat berarti daftarnya disembunyikan, bukan jadi rel. */
  .split.is-lipat{grid-template-columns:1fr}
  .is-lipat .silabus{padding:0 16px 16px}
  .is-lipat .silabus__hd{justify-content:space-between;padding:16px 0 0 8px}
  .is-lipat .silabus__label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .is-lipat .silabus__list{display:none}
}

@media (max-width:700px){
  .page{padding:32px 20px 64px}
  .top__in{padding-inline:20px}   /* ikut .page */
  .kelas-head__title{font-size:24px}
  .sesi{padding:24px 20px}
  .sesi__judul{font-size:22px}
  .top__name{display:none}   /* nama peserta sudah diwakili avatar berinisial */
  .top__acct--staf .avatar{display:none}   /* ruang untuk penanda mode tim */
  .top__ganti-lebar{display:none}
  .top__ganti-hp{display:inline}
}