/* NUSVA Learning · lapisan bersama
   Token mengikuti Nusva Design System v1.2, aksen produk Learning (Laguna).
   Komponen hanya boleh mengonsumsi token semantik di bawah ini. */

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/PlusJakartaSans-var.woff2') format('woff2');
}

:root{
  --samudra-500:#0A3D62;--samudra-900:#05192B;--laguna-500:#0FA3B1;--kristal-500:#1ECAD3;
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F7F9FA;--surface-3:#EEF3F5;
  --border:#E2EAEE;--border-strong:#CFDCE2;--ink:#0A3D62;--ink-2:#3E5A6E;--ink-3:#7C93A1;
  --focus:#14A7B0;--accent:#0FA3B1;
  --success:#1E9E6A;--success-tint:#E7F6EF;--success-deep:#15784F;
  --warning:#D9920E;--warning-tint:#FDF3E0;--warning-deep:#A8680C;
  --danger:#C8382F;--danger-tint:#FBECEA;--danger-deep:#A93A2D;
  --info:#1E6FA8;--info-tint:#E8F2F9;--info-deep:#14547E;

  --w-heading:650;--w-subhead:600;--w-body-strong:600;--w-caption:500;--ls-heading:-.015em;
  /* 16px, bukan 15px. Itu ukuran bawaan peramban, dan menurunkannya jadi 15
     adalah kebiasaan lama yang membuat teks isi terasa sempit terutama di layar
     besar. Sekitar separuh elemen di tiap halaman mewarisi ukuran ini; sisanya
     memakai ukuran sendiri dan tidak ikut bergeser. */
  --fs-ui:18px;--lh-ui:1.6;
  --r-control:10px;--r-field:12px;--r-card:18px;--r-panel:24px;
  --hit-min:44px;--hit-compact:36px;
  --spring:cubic-bezier(.30,1.08,.35,1);
  --grad-pasang:linear-gradient(135deg,#0B6B77 0%,#0FA3B1 55%,#1ECAD3 100%);
  /* 1560px. Angka ini sudah dinaikkan dua kali: 1180, lalu 1360, lalu ini,
     karena dua kali pertama masih menyisakan terlalu banyak ruang kosong di
     laptop. Pada 1560, layar 1440 dan 1512 terisi penuh sampai padding-nya,
     dan 16 inci hanya menyisakan 5% tiap sisi.

     Melebarkannya aman untuk keterbacaan karena blok teks panjang sudah punya
     batasnya sendiri dalam satuan ch — h1 17ch, .sub 54ch, lead 62ch — jadi
     yang ikut melebar adalah kartu dan kolom, bukan panjang barisnya. Kalau
     suatu saat ada paragraf tanpa batas ch, batas itu yang ditambahkan, bukan
     kolomnya yang dipersempit lagi. */
  --wrap:1560px;--nav:64px;

  /* Jarak kiri-kanan isi terhadap tepi kolomnya, satu token supaya bar navigasi,
     panel pencarian, dan tiap halaman bergeser bersama. Sebelumnya angka 24 dan
     18 ditulis terpisah di enam tempat, jadi menggesernya berarti menggeser
     enam-enamnya dan berharap tidak ada yang terlewat. */
  --pad-sisi:40px;
}
@media (max-width:1200px){ :root{ --pad-sisi:32px } }
@media (max-width:900px){ :root{ --pad-sisi:24px } }
@media (max-width:560px){ :root{ --pad-sisi:20px } }
html[data-theme="dark"]{
  --bg:#071018;--surface:#0D1B26;--surface-2:#122430;--surface-3:#17303E;
  --border:#1D3C4C;--border-strong:#275063;--ink:#FFFFFF;--ink-2:#D6E4EC;--ink-3:#A3BBC7;
  --success-tint:#0D2A1E;--warning-tint:#2A1F09;--danger-tint:#2A1210;--info-tint:#0C2436;
  --success-deep:#63D3A2;--warning-deep:#F0BC5E;--danger-deep:#F0928A;--info-deep:#7FC0EC;
}

*{box-sizing:border-box}
section[id],[id]{scroll-margin-top:74px}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-ui);line-height:var(--lh-ui);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
/* .wrap HANYA mengatur lebar dan jarak KIRI-KANAN, dan padding-nya ditulis per
   sisi dengan sengaja.

   Sebelumnya ia memakai bentuk ringkas `padding:0 24px`. Bentuk ringkas menulis
   keempat sisinya sekaligus, jadi ia diam-diam mengembalikan padding atas dan
   bawah ke nol pada setiap elemen yang memakai kelas ini. Karena `.wrap`
   berbobot lebih tinggi daripada pemilih tipe, aturan halaman seperti
   `section{padding:66px 0}` dan `main{padding:36px 0 72px}` kalah tanpa satu
   pun peringatan: yang ditulis 66px, yang berlaku 0.

   Akibatnya terlihat di produksi — bagian-bagian di halaman perusahaan dan
   dokumen saling menempel, hanya dipisah satu garis tipis. Kegagalan diam yang
   khas CSS: tidak ada galat, tidak ada peringatan, cuma tata letak yang terasa
   sesak tanpa ketahuan sebabnya. */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:var(--pad-sisi);padding-right:var(--pad-sisi)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- lockup ---------- */
.lockup{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.lockup img{height:31px;width:92px;display:block}
.lockup .w{display:none}
html[data-theme="dark"] .lockup .c{display:none}
html[data-theme="dark"] .lockup .w{display:block}
@media (max-width:480px){ .lockup img{height:26px;width:77px} }

/* ---------- tombol ---------- */
.btn{min-height:var(--hit-min);border-radius:var(--r-control);border:1px solid transparent;
  font-weight:700;font-size:16.5px;padding:12px 21px;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;text-decoration:none;
  transition:transform .18s var(--spring),filter .18s ease}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--ink)}
.btn-quiet{background:transparent;border-color:var(--border);color:var(--ink-2)}
.btn-google{background:var(--surface);border-color:var(--border-strong);color:var(--ink);width:100%}
.btn.sm{min-height:var(--hit-compact);font-size:15px;padding:8px 16px}
.btn.full{width:100%}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- chip kecil ---------- */
.chip{min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--ink-2);font-size:14px;font-weight:var(--w-body-strong)}

/* ---------- kepala halaman ---------- */
.nav{position:sticky;top:0;z-index:40;height:var(--nav);display:flex;align-items:center;gap:12px;
  padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)}
@media (max-width:560px){ .nav{padding:0 16px;gap:8px} }
.nav .sp{flex:1}
.navlinks{display:flex;gap:2px}
.navlinks a{font-size:15.5px;font-weight:var(--w-body-strong);color:var(--ink-2);
  text-decoration:none;padding:7px 11px;border-radius:9px}
.navlinks a:hover{background:var(--surface-2);color:var(--ink)}
@media (max-width:820px){ .navlinks{display:none} }

/* ---------- tipografi umum ---------- */
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block}
h1{font-size:clamp(35px,5.4vw,62px);font-weight:750;letter-spacing:-.03em;line-height:1.08;margin:14px 0 0}
h2{font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-.026em;line-height:1.15;margin:12px 0 0;
  max-width:24ch}
h1{max-width:17ch}
h3{font-size:19px;font-weight:var(--w-subhead);margin:0}
.sub{font-size:clamp(18.5px,1.8vw,23px);color:var(--ink-2);line-height:1.62;margin:16px 0 0;max-width:54ch}
/* 13.5px, naik dari 12.5px. Kelas ini dipakai untuk hampir semua teks penjelas
   di seluruh situs, jadi satu piksel di sini terasa di mana-mana. Di bawah 13px
   teks penjelas berhenti dibaca dan cuma dilihat. */
.cap{font-size:15px;color:var(--ink-3);font-weight:var(--w-caption);line-height:1.55}

/* ---------- kartu ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.pad{padding:20px 21px 21px}

/* ---------- badge ---------- */
.badge{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;font-weight:700;
  border-radius:999px;padding:4px 10px;white-space:nowrap}
.badge svg{width:11px;height:11px}
.badge.ok{background:var(--success-tint);color:var(--success-deep)}
.badge.warn{background:var(--warning-tint);color:var(--warning-deep)}
.badge.info{background:var(--info-tint);color:var(--info-deep)}
.badge.mut{background:var(--surface-3);color:var(--ink-2)}
.badge.acc{background:var(--accent);color:#fff}

/* ---------- catatan ---------- */
.note{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.55;
  border-radius:11px;padding:12px 14px}
.note svg{width:14px;height:14px;flex:none;margin-top:3px}
.note.info{background:var(--info-tint);color:var(--info-deep)}
.note.ok{background:var(--success-tint);color:var(--success-deep)}
.note.warn{background:var(--warning-tint);color:var(--warning-deep)}
.note.err{background:var(--danger-tint);color:var(--danger-deep)}
.note b{font-weight:700}

/* ---------- form ---------- */
label.f{display:block;font-size:12.5px;font-weight:var(--w-body-strong);color:var(--ink-2);margin-bottom:6px}
input.f,select.f,textarea.f{width:100%;min-height:var(--hit-min);border-radius:var(--r-field);
  border:1px solid var(--border-strong);background:var(--surface);padding:10px 13px;font-size:15px}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--accent)}

/* ---------- state ---------- */
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:nsh 1.3s linear infinite;border-radius:8px}
@keyframes nsh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);
  background:var(--samudra-900);color:#fff;font-size:13.5px;font-weight:600;padding:11px 17px;
  border-radius:12px;opacity:0;pointer-events:none;z-index:60;max-width:88%;text-align:center;
  transition:opacity .2s ease,transform .2s var(--spring)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- footer ---------- */
footer.site{padding:34px 0 46px;border-top:1px solid var(--border);background:var(--surface-2)}
.fnav{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-2)}
.fnav a{color:var(--ink-2);text-decoration:none}
.fnav a:hover{color:var(--ink)}
.fnav .sp{flex:1}
.legal{font-size:11.5px;color:var(--ink-3);line-height:1.6;margin-top:18px;max-width:84ch}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} }

/* ================= halaman trainer (dipakai dashboard dan modul) ================= */
.tnav{position:sticky;top:0;z-index:40;height:var(--nav);display:flex;align-items:center;gap:12px;
  padding:0 22px;background:var(--surface);border-bottom:1px solid var(--border)}
@media (max-width:600px){ .tnav{padding:0 14px;gap:8px} }
.tnav .sp{flex:1}
.tlinks{display:flex;gap:2px}
.tlinks a{font-size:13.5px;font-weight:var(--w-body-strong);color:var(--ink-2);text-decoration:none;
  padding:7px 11px;border-radius:9px}
.tlinks a:hover{background:var(--surface-2);color:var(--ink)}
.tlinks a[aria-current="page"]{background:var(--surface-3);color:var(--ink)}
@media (max-width:600px){ .tlinks{display:none} }
.simpan{font-size:11.5px;color:var(--ink-3);font-weight:var(--w-caption);white-space:nowrap}
/* Di layar kecil tandanya TIDAK dihilangkan, hanya turun ke barisnya sendiri, tepat di bawah bilah.
   Ponsel justru tempat orang paling takut kehilangan pekerjaan, karena aplikasinya bisa tertutup
   kapan saja; menghapus penenangnya persis di situ adalah kebalikan dari yang seharusnya. */
@media (max-width:760px){
  .tnav{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:7px}
  .simpan{order:9;flex-basis:100%;white-space:normal;border-top:1px solid var(--border);
    margin-top:6px;padding-top:7px}
  .simpan:empty{display:none}
}

.whoWrap{display:flex;gap:10px;align-items:center;min-width:0}
.whoWrap .who{font-size:12px;color:var(--ink-3);font-weight:var(--w-caption);text-align:right;
  line-height:1.3;min-width:0}
.whoWrap .who b{display:block;font-size:13px;color:var(--ink-2);font-weight:var(--w-body-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
@media (max-width:700px){ .whoWrap .who{display:none} }
.ava{position:relative;width:38px;height:38px;flex:none}
.ava .ph{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--surface-3);
  border:1px solid var(--border);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--ink-2)}
.ava .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ava .edit{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--surface);background:var(--accent);color:#fff;display:grid;place-items:center;padding:0}
.ava .edit svg{width:9px;height:9px}
.ava input[type=file]{display:none}
.ava.drop .ph{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,163,177,.18)}

.pita-pratinjau{display:flex;gap:10px;align-items:center;padding:9px 22px;font-size:12.5px;
  background:var(--warning-tint);color:var(--warning-deep);border-bottom:1px solid var(--border)}
.pita-pratinjau svg{width:14px;height:14px;flex:none}
.pita-pratinjau span{flex:1;line-height:1.4}
@media (max-width:600px){ .pita-pratinjau{padding:9px 14px} }

/* ================= navigasi bersama (bar tipis + panel penuh lebar) ================= */
.anav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 97%,transparent);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border)}
@supports not (backdrop-filter:blur(1px)){ .anav{background:var(--surface)} }
.abar{max-width:var(--wrap);margin:0 auto;height:52px;display:flex;align-items:center;gap:4px;
  padding-left:var(--pad-sisi);padding-right:var(--pad-sisi)}
.alogo{display:flex;align-items:center;flex:none;margin-right:14px}
.alogo img{height:24px;width:71px;display:block}
.alogo .w{display:none}
html[data-theme="dark"] .alogo .c{display:none}
html[data-theme="dark"] .alogo .w{display:block}
.amenu{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.amenu::-webkit-scrollbar{display:none}
.atop{background:transparent;border:0;padding:7px 12px;border-radius:8px;white-space:nowrap;
  font-size:13px;font-weight:var(--w-body-strong);color:var(--ink-2)}
.atop:hover{color:var(--ink)}
.atop[aria-expanded="true"]{color:var(--ink);background:var(--surface-2)}
/* di layar sempit menu turun ke barisnya sendiri, bukan berdesakan dengan kendali kanan */
@media (max-width:700px){
  .abar{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:7px;gap:8px}
  .alogo{margin-right:6px}
  .amenu{order:3;flex-basis:100%;margin:0 -18px;padding:0 18px 2px}
  .atop{padding:6px 10px;font-size:12.5px}
  .abar .asp{order:1}
  .aakun{order:2;margin-left:0}
}
.abar .asp{flex:1}
.aico{background:transparent;border:0;width:32px;height:32px;border-radius:8px;color:var(--ink-2);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;flex:none;text-decoration:none}
a.aico{color:var(--ink-2)}
.aico:hover{background:var(--surface-2);color:var(--ink)}
.aico svg{width:16px;height:16px}
.aakun{display:flex;align-items:center;gap:8px;margin-left:6px;flex:none}
.aakun .ini{width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);
  display:grid;place-items:center;font-size:11px;font-weight:800}

.apanel{border-top:1px solid var(--border);background:var(--surface);animation:apop .22s var(--spring)}
@keyframes apop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Kolomnya dilebarkan menurut ISINYA, bukan dibagi rata selebar halaman.
   Versi sebelumnya memakai 1.1fr dan 1fr, jadi kedua kolom selalu memakan seluruh lebar
   1180 piksel berapa pun panjang tautannya. Karena tautan di sini pendek, misalnya "Semua
   modul", yang lahir bukan tata letak lapang melainkan lubang sekitar 600 piksel di tengah
   panel, dan mata membacanya sebagai dua daftar yang tidak berhubungan.
   Diukur pada tangkapan layar Apple: jarak antar kolomnya sekitar 175 piksel, bukan 600,
   dan kolomnya duduk rapat di kiri sementara sisa ruang dibiarkan kosong di kanan. Itu
   yang ditiru di sini lewat max-content dan justify-content:start. Jarak antar barisnya
   sendiri tidak disentuh, karena hasil ukur menunjukkan angkanya memang sudah sama dengan
   Apple, yaitu rasio pitch terhadap tinggi tinta sekitar 1,9 berbanding 2,1. */
.apanel-in{max-width:var(--wrap);margin:0 auto;padding:34px var(--pad-sisi) 46px;display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));justify-content:start;
  column-gap:clamp(56px,7vw,104px);row-gap:40px}
@media (max-width:760px){ .apanel-in{grid-template-columns:1fr;row-gap:26px;padding:24px 18px 32px} }
/* satu sumbu kiri untuk logo, menu, rail, dan seluruh isi halaman */
.ahd{display:block;font-size:12px;color:var(--ink-3);font-weight:var(--w-caption);margin-bottom:14px}
.abesar{display:flex;align-items:baseline;gap:9px;font-size:clamp(21px,2.4vw,26px);font-weight:600;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:5px 0;line-height:1.35}
.abesar:hover{color:var(--accent)}
.akecil{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:var(--w-body-strong);
  color:var(--ink-2);text-decoration:none;padding:5px 0}
.akecil:hover{color:var(--ink)}
.asoon{opacity:.62;cursor:default;pointer-events:none}
.asoonl{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface-3);color:var(--ink-3);border-radius:5px;padding:2px 6px;flex:none}
.atirai{position:fixed;inset:0;z-index:45;background:rgba(5,25,43,.22)}

/* Kotak akun di bar navigasi. Dulu gayanya ditulis ulang di tiap halaman, jadi halaman yang
   lupa menyalinnya menampilkan avatar, nama, dan tombol Keluar tanpa gaya apa pun, melimpah
   keluar dari bar setinggi 53 piksel. Sekarang ia tinggal satu tempat, bersama komponen
   bar-nya sendiri, sehingga halaman baru mustahil melupakannya. */
.aakun .akun{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--ink-2);
  min-width:0;flex-wrap:nowrap;line-height:1}
.aakun .akun .ini{width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.aakun .akun .nm{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:var(--w-body-strong);color:var(--ink-2)}
.aakun .akun .chip{min-height:28px;padding:4px 11px;font-size:12px;flex:none}
@media (max-width:820px){ .aakun .akun .nm{display:none} }
html.anav-buka .anav{background:var(--surface);backdrop-filter:none}

/* rail thumbnail */
.arail{border-bottom:1px solid var(--border);background:var(--surface)}
.arail-in{max-width:var(--wrap);margin:0 auto;padding:30px var(--pad-sisi) 28px;display:flex;gap:8px;
  overflow-x:auto;scrollbar-width:none}
.arail-in::-webkit-scrollbar{display:none}
.aitem{flex:0 0 auto;width:126px;text-decoration:none;color:var(--ink);text-align:center;
  padding:8px 6px 10px;border-radius:14px}
.aitem:hover{background:var(--surface-2)}
.ath{display:grid;place-items:center;height:88px;margin-bottom:10px}
.ath img,.ath svg{width:88px;height:88px;object-fit:cover;border-radius:14px;display:block}
.atx{display:block;font-size:12.5px;font-weight:var(--w-body-strong);line-height:1.3}
.atag{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--warning-deep);margin-top:2px}
@media (max-width:560px){ .arail-in{padding:22px 18px 20px} .aitem{width:104px} .ath{height:70px} }

/* penanda fitur belum jadi, dipakai di badan halaman */
.soon{display:inline-flex;gap:5px;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;background:var(--surface-3);color:var(--ink-3);border-radius:6px;padding:3px 7px}
.kunci{position:relative}
.kunci::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface);opacity:.55;
  pointer-events:none}