/* ===========================================================================
   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;
  height:64px;max-width:960px;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)}

.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 dibatasi lebarnya: dibiarkan selebar halaman, ia terbaca
   seperti garis pemisah, bukan takaran. */
.bar{height:6px;max-width:320px;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;
  align-items:start;margin-top:32px;
}

/* 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{
  position:sticky;top:88px;   /* 64px bilah atas + jarak */
  padding:16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.silabus__hd{padding:4px 8px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.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 terkunci diredupkan, bukan disembunyikan: peserta boleh melihat ke mana
   kelas ini menuju — itu bagian dari alasan ia bertahan sampai sesi 10. */
.sesi-item--terkunci{color:#93a49e}
.sesi-item--terkunci .sesi-item__judul{font-weight:500}
.sesi-item--terkunci .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}

/* ---- 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--terkunci{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:24px;padding:12px 16px;border-radius:var(--radius);
  background:var(--bg);color:var(--muted);font-size:14px}

/* ---- 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 & terkunci sengaja datar: tautannya ada, tapi tidak menarik mata. */
.zoom--selesai,.zoom--terkunci{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)}
.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}

/* ===========================================================================
   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}
  .silabus{position:static}
}

@media (max-width:700px){
  .page{padding:32px 20px 64px}
  .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 */
}