/* 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;

  /* ---- RASIO BANNER MODUL ----------------------------------------------
     Satu berkas yang diunggah trainer tampil di dua bentuk, dan sebelum token
     ini ada angkanya tersebar di empat tempat yang saling berbeda: hero halaman
     modul 21/9, kerangka muat di atasnya 16/7, kartu katalog 16/9, dan
     pratinjau di layar unggah trainer 16/10.

     Akibatnya dua-duanya: banner melompat tingginya begitu gambarnya mendarat
     (21/9 menggantikan 16/7), dan trainer memeriksa hasil potongan pada bentuk
     yang tidak pernah dilihat siapa pun (16/10).

     Angkanya sekarang hidup di sini saja. --rasio-banner-kartu SENGAJA tidak
     diubah: tata letak daftar modul sudah bergantung padanya. */
  --rasio-banner-hero: 20 / 9;
  --rasio-banner-kartu: 16 / 9;
  /* Titik fokus bawaan saat modul belum punya nilainya sendiri. Kiri-tengah,
     bukan tengah, karena judul dan logo pada banner Nusva selalu di kiri --
     dan pemotongan yang berpusat di tengah memakan justru bagian itu. */
  --fokus-banner-bawaan: 15% 50%;
  --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%);
  /* Lebar kolom isi, disamakan dengan produk Nusva yang lain.

     Riwayatnya: 1180, lalu 1360, lalu 1560 tetap, karena dua angka pertama
     menyisakan terlalu banyak ruang kosong di laptop. Sejak 5 September 2026
     angkanya tidak lagi tetap melainkan mengikuti lebar layar, dengan lantai
     dan langit-langit:

       layar di bawah 1692px   berhenti di lantai 1320px
       1692px sampai 2000px    ikut layar, 78vw
       di atas 2000px          berhenti di langit-langit 1560px

     Konsekuensinya disebut terus terang, karena ia membalik sebagian alasan
     kenaikan dulu: pada 1440 dan 1512, dua ukuran laptop yang paling sering
     dipakai, kolomnya kini berhenti di 1320px dan menyisakan margin tambahan
     tiap sisi. Itu lebih sempit daripada 1360 yang dulu ditolak. Yang dipilih
     di sini keseragaman antarproduk, bukan mengisi laptop sepenuhnya.

     Melebarkannya aman untuk keterbacaan karena blok teks panjang sudah punya
     batasnya sendiri dalam satuan ch, h1 17ch, .sub 54ch, lead 62ch, jadi yang
     ikut berubah 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:clamp(1320px, 78vw, 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)}

/* ---------- harga promo ----------
   Tiga bagian dalam satu baris: harga normal dicoret, lencana persen, lalu
   harga yang benar-benar ditagih. Urutannya sengaja begitu, karena yang
   dibaca terakhir yang paling diingat, dan yang paling perlu diingat adalah
   angka yang akan dibayar.

   Warna lencananya memakai token danger, bukan accent. Aksen dipakai untuk
   ajakan bertindak di seluruh situs, dan lencana diskon yang berwarna sama
   dengan tombol beli membuat keduanya bersaing di kartu yang sempit. */
.hpromo{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hpromo .hcoret{text-decoration:line-through;text-decoration-thickness:1.5px;
  color:var(--ink-3);font-weight:var(--w-caption);font-size:.82em}
.hpromo .hdiskon{font-size:.72em;font-weight:800;letter-spacing:.01em;line-height:1;
  color:var(--danger-deep);background:var(--danger-tint);
  border-radius:999px;padding:5px 8px;white-space:nowrap}
.hpromo .hkini{font-weight:inherit}
.htenggat{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:6px}

/* ---------- footer ----------
   Tiga kolom di desktop: merek dan alamat, lalu dua kolom tautan. Baris bawah
   dipisah garis tipis untuk teks legal dan hak cipta, supaya paragraf panjang
   itu tidak menempel pada alamat. Di ponsel semuanya satu kolom dengan target
   sentuh penuh. */
footer.site{padding:52px 0 36px;border-top:1px solid var(--border);background:var(--surface-2)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px 40px;align-items:start}
.fmerek{display:flex;flex-direction:column;gap:16px;max-width:46ch}
.fjelas{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}
.fkontak{display:flex;flex-direction:column;gap:4px;margin:0;font-style:normal;
  font-size:13px;color:var(--ink-2);line-height:1.6}
.fkontak b{font-weight:var(--w-body-strong);color:var(--ink)}
.fkontak .fpeta{color:var(--accent);text-decoration:none;font-size:12.5px;align-self:flex-start;min-height:var(--hit-compact);display:inline-flex;align-items:center}
.fkontak .fpeta:hover{text-decoration:underline}
.fhub{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:2px}
.fhub a{color:var(--accent);text-decoration:none;min-height:var(--hit-compact);display:inline-flex;align-items:center}
.fhub a:hover{text-decoration:underline}
.fsosial{display:flex;gap:6px;margin-top:6px}
.fsosial a{display:inline-flex;align-items:center;justify-content:center;width:var(--hit-compact);height:var(--hit-compact);
  border:1px solid var(--border-strong);border-radius:10px;color:var(--ink-2);background:var(--surface)}
.fsosial a:hover{color:var(--ink);border-color:var(--ink-3)}
.fsosial svg{width:18px;height:18px}
.fkolom{display:flex;flex-direction:column;gap:2px;padding-top:6px}
.fkolom h3{margin:0 0 8px;font-size:12px;font-weight:var(--w-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fkolom a{color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1.4;
  min-height:var(--hit-compact);display:inline-flex;align-items:center;align-self:flex-start}
.fkolom a:hover{color:var(--ink)}
.fbawah{display:flex;gap:24px 48px;align-items:flex-end;justify-content:space-between;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--border)}
.legal{font-size:11.5px;color:var(--ink-3);line-height:1.6;margin-top:18px;max-width:84ch}
.fbawah .legal{margin:0;font-size:12px}
.fhak{margin:0;font-size:12px;color:var(--ink-3);white-space:nowrap}
@media (max-width:960px){
  .fgrid{grid-template-columns:repeat(3,1fr);gap:32px 28px}
  .fmerek{grid-column:1 / -1;max-width:none}
}
@media (max-width:760px){
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  footer.site{padding:40px 0 28px}
  .fgrid{grid-template-columns:1fr;gap:28px}
  .fkolom a,.fhub a{min-height:var(--hit-min)}
  .fsosial a{width:var(--hit-min);height:var(--hit-min)}
  .fbawah{flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px}
}

@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.5;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:min(32ch,33vw)}
@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}
/* Batasnya dulu angka karakter mati -- 18ch di sini, 22ch di bar trainer --
   dan alamat email biasa lebih panjang dari itu. rangga.irawan.p@gmail.com
   sendiri 25 karakter, jadi ia SELALU terpotong sekalipun bilahnya lapang.

   Sekarang batasnya yang lebih kecil antara 32 karakter dan sepertiga lebar
   layar: tampil utuh selama ada ruang, dan memendek hanya ketika ruangnya
   memang habis -- bukan karena angka yang ditulis sekali lalu dilupakan. */
/* line-height:1.45, bukan mewarisi line-height:1 dari .akun.

   overflow:hidden dipasang untuk elipsis MENDATAR, tapi ia memotong ke segala
   arah. Dengan tinggi baris persis sebesar font, ekor huruf yang turun di bawah
   garis dasar -- g, p, y, dan @ -- terpotong rapi seperti digunting. Alamat
   email adalah tempat paling buruk untuk itu: hampir semuanya punya @. */
.aakun .akun .nm{max-width:min(32ch,33vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  line-height:1.45;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}