@charset "UTF-8";
/* ==========================================================================
   INSYNTIVE Academy — Member area (/app/)
   Dimuat SETELAH /assets/app.css (font, token brand, app bar, .btn dasar).
   Semua warna memakai variabel dari app.css.

   01 Dasar & utilitas      08 Kartu produk & cover    15 Akun & form
   02 App bar & navigasi    09 Kelas                   16 Sertifikat (+ print)
   03 Tombol                10 Materi / player         17 Dialog & pembayaran
   04 Chip, badge, note     11 Koleksi: toolbar        18 Skeleton, empty, toast
   05 Judul & section       12 Detail produk           19 Motion
   06 Status membership     13 Lisensi
   07 Beranda               14 Webinar
   ========================================================================== */

/* 01 ── Dasar & utilitas ─────────────────────────────────────────────── */
.ma { --tabs-h: 64px; background: var(--bg-soft); }
.ma .i { width: 20px; height: 20px; flex: none; stroke-width: 1.8; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.muted { color: var(--text-3); }
.fine { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.grad-ink { background: var(--grad-text-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--lime); color: var(--ink-900); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 10px; }

.ma-main { flex: 1; padding-block: clamp(18px, 3vw, 36px) 48px; outline: none; }
@media (min-width: 960px) { .ma-main { padding-bottom: 72px; } }
/* Footer ringkas di bawah konten; di HP diberi ruang untuk tab bar yang menempel di bawah. */
.ma-foot { padding-bottom: calc(24px + var(--tabs-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 960px) { .ma-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); min-width: 0; }
.view > * { min-width: 0; }

/* 02 ── App bar & navigasi ───────────────────────────────────────────── */
.ma-bar { z-index: 40; }
.ma-bar .container { gap: 12px; }
.ma-bar .app-bar__name { padding-left: 12px; font-size: .9375rem; }
/* HP < 390px: logo + tombol bahasa + avatar saja (nama "Academy" disembunyikan supaya bar tidak melebar). */
@media (max-width: 389.98px) { .ma-bar .app-bar__name { display: none; } }
/* 640–767px: pill status muncul di samping tombol bahasa → nama "Academy" mengalah. */
@media (min-width: 640px) and (max-width: 767.98px) { .ma-bar .app-bar__name { display: none; } }
.ma-nav { display: none; }
@media (min-width: 960px) {
  .ma-nav { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
  .ma-nav a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
    border-radius: var(--r-pill); color: var(--on-ink-2); text-decoration: none; font-size: .9375rem; font-weight: 600;
    transition: color .2s, background-color .2s;
  }
  .ma-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
  .ma-nav a[aria-current="page"] { color: #fff; }
  .ma-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--lime); }
}
/* 11 menu atas (termasuk Latihan) + tombol bahasa + pill status / link Admin + avatar harus muat sebaris di container 1200px
   (juga dalam bahasa Inggris, juga dengan scrollbar klasik): menu lebih rapat dengan huruf 14px, nama "Academy" di sebelah
   logo disembunyikan, tombol bahasa cukup satu (ke bahasa lain). */
@media (min-width: 1200px) {
  .ma-nav { margin-left: 12px; }
  .ma-nav a { padding-inline: 9px; font-size: .875rem; white-space: nowrap; }
  .ma-bar .app-bar__name { display: none; }
  .ma-bar .lang-sw { padding: 0; }
  .ma-bar .lang-sw [aria-pressed="true"] { display: none; }
  .ma-bar .lang-sw button { min-width: 40px; min-height: 40px; opacity: .9; }
  /* Pill status cukup ikon / titik (teks lengkap: atribut title + tetap dibaca pembaca layar); halaman tidak melebar. */
  .ma-pill { position: relative; min-width: 0; padding-inline: 11px; gap: 0; }
  .ma-pill > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Admin: pill "Admin" sama dengan link Admin di sebelahnya → cukup link-nya, sebagai ikon. */
  .ma-bar .ma-pill.ma-pill--admin { display: none; }
  .ma-admin { width: 44px; justify-content: center; padding: 0; }
  .ma-admin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* HP sempit + link Admin + tombol bahasa: nama "Academy" disembunyikan supaya bar atas tidak melebar. */
@media (max-width: 419.98px) { .ma-bar .container:has(.ma-admin:not([hidden])) .app-bar__name { display: none; } }
/* 1200–1279px: container 1136px (± 1120px dengan scrollbar) — menu lebih rapat lagi supaya tetap muat. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .ma-nav { margin-left: 8px; }
  .ma-nav a { padding-inline: 6px; }
}
.ma-bar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ma-pill {
  display: none; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid var(--line-ink-2);
}
.ma-pill .i { width: 15px; height: 15px; }
/* Teks pill boleh terpotong (mis. "Active until 30 September 2027" di tablet), bar atas tidak ikut melebar. */
.ma-pill { min-width: 0; }
.ma-pill > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ma-pill--on { color: var(--lime); background: rgba(214, 253, 145, .08); border-color: rgba(214, 253, 145, .28); }
.ma-pill--off { color: #fff; background: rgba(255, 255, 255, .06); }
.ma-pill--off:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 640px) { .ma-pill:not([hidden]) { display: inline-flex; } }
.ma-admin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 12px;
  color: var(--on-ink-2); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--line-ink-2);
}
.ma-admin:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ma-admin .i { width: 18px; height: 18px; color: var(--lime); }
@media (max-width: 519.98px) { .ma-admin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ma-admin { width: 44px; justify-content: center; padding: 0; } }
.ma-me {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 800; font-size: .875rem; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}
.ma-me:hover { box-shadow: 0 0 0 3px rgba(214, 253, 145, .5); }

/* Tab bar bawah (mobile) */
.ma-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  /* min-content: kolom tidak pernah lebih sempit dari labelnya (mis. "Collection" di 320px); sisa ruang dibagi rata. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 -8px 24px -16px rgba(14, 22, 32, .25);
}
.ma-tabs a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 48px; padding-inline: 2px; color: var(--text-3); text-decoration: none; font-size: .6875rem; font-weight: 700; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.ma-tabs .i { width: 22px; height: 22px; transition: transform .2s var(--ease); }
/* 7 menu di layar sempit: label sedikit lebih kecil supaya tidak terpotong. */
@media (max-width: 389.98px) { .ma-tabs { padding-inline: 2px; } .ma-tabs a { font-size: .625rem; letter-spacing: 0; } .ma-tabs .i { width: 21px; height: 21px; } }
.ma-tabs a[aria-current="page"] { color: var(--blue-ink); }
.ma-tabs a[aria-current="page"] .i { transform: translateY(-1px); stroke-width: 2.1; }
.ma-tabs a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 4px 4px; background: var(--grad); }
.ma-tabs a:focus-visible { outline-offset: -4px; }
@media (min-width: 960px) { .ma-tabs { display: none; } }

/* 03 ── Tombol ───────────────────────────────────────────────────────── */
.btn .i { width: 20px; height: 20px; }
.btn[disabled], .btn[aria-busy="true"] { cursor: default; opacity: .7; transform: none; }
.btn--primary { --btn-bg: var(--lime); --btn-fg: var(--ink-900); box-shadow: inset 0 -2px 0 rgba(10, 17, 25, .12), 0 10px 30px -12px rgba(214, 253, 145, .7); }
.btn--primary:hover { --btn-bg: #E3FFB0; }
.btn--ink { --btn-bg: var(--ink-800); --btn-fg: #fff; box-shadow: 0 10px 24px -14px rgba(14, 22, 32, .7); }
.btn--ink:hover { --btn-bg: var(--ink-600); }
.btn--ink .i { color: var(--lime); }
.btn--ghost { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .22); }
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: rgba(255, 255, 255, .36); }
.btn--wa { --btn-bg: var(--wa); --btn-fg: var(--wa-ink); box-shadow: 0 10px 26px -14px rgba(37, 211, 102, .9); }
.btn--wa:hover { --btn-bg: #3BE07A; }
.btn--done { --btn-bg: #ECFDF3; --btn-fg: var(--ok); --btn-bd: #A7F3C4; }
.btn--done:hover { --btn-bg: #DCFCE7; }
.btn--danger { --btn-fg: var(--err); }
.btn--danger:hover { --btn-bd: #FCA5A5; }
.btn--sm { min-height: 44px; padding: 9px 16px; font-size: .9375rem; gap: 8px; }
.btn--sm .i { width: 18px; height: 18px; }
.btn--lg { min-height: 56px; padding: 15px 26px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-row--center { justify-content: center; }
.btn-col { display: grid; gap: 10px; }
.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--blue-ink); text-decoration: none; }
.link .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link:hover { text-decoration: underline; }
.link:hover .i { transform: translateX(3px); }
.link--sm { font-size: var(--fs-sm); }
.link--ink { color: var(--on-ink-2); font-size: var(--fs-sm); }
.link--ink .i { color: var(--wa); }
.link--ink:hover { color: #fff; }
.linkbtn { display: inline; padding: 0; min-height: 0; background: none; border: 0; font: inherit; font-weight: 700; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 04 ── Chip, badge, note ────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--bg-soft); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--text-2);
}
.chip .i { width: 15px; height: 15px; }
.chip--sm { min-height: 26px; padding: 3px 9px; font-size: .75rem; gap: 5px; }
.chip--sm .i { width: 13px; height: 13px; stroke-width: 2.2; }
.chip--tint { background: var(--bg-tint); border-color: #D4E5F7; color: var(--blue-ink); }
.chip--ok { background: #EEFBF2; border-color: #C9EFD6; color: #11663A; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink-800); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
.badge--lime { background: var(--lime); color: var(--ink-900); }
.badge--live { background: #FEE2E2; color: #991B1B; }
.badge--live .dot { background: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214, 253, 145, .18); flex: none; }
.dot--cyan { background: var(--cyan); box-shadow: 0 0 0 4px rgba(2, 160, 193, .16); }
.dot--pulse { animation: pulse 2.4s ease-in-out infinite; }
.tag-preview { display: inline-block; padding: 0 7px; border-radius: 6px; background: rgba(214, 253, 145, .5); color: #3B5B07; font-weight: 800; font-size: .6875rem; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }
.note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.note .i { width: 20px; height: 20px; margin-top: 1px; }
.note--lock { background: linear-gradient(120deg, #F2FBFD, #EEF4FD); border-color: #CFE6F3; }
.note--lock > .i { color: var(--cyan-ink); }
.note--info { background: var(--bg-tint); border-color: #D4E5F7; color: var(--blue-ink); }

/* 05 ── Judul & section ──────────────────────────────────────────────── */
.page-head { display: grid; gap: 8px; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--cyan-ink); }
.eyebrow .i { width: 18px; height: 18px; }
.page-title { font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem); outline: none; }
.page-title--sm { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); }
.page-sub, .lead { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); max-width: 64ch; }
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* "Lihat semua" / "See all" tetap satu baris di samping judul panjang (HP). */
.sec__head > .link { flex: none; white-space: nowrap; }
.sec__title { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); }
.sec__title .i { width: 22px; height: 22px; color: var(--cyan-ink); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-sm); color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--blue-ink); font-weight: 700; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs a .i { width: 18px; height: 18px; }
.crumbs [aria-current] { color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60ch, 100%); }
.crumbs__sep { color: var(--line-2); }
@media (max-width: 599.98px) { .crumbs [aria-current], .crumbs a:not(:first-child), .crumbs__sep { display: none; } }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.card--soft { background: var(--bg-soft); box-shadow: none; }
.card__title { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; }
.card__title .i { color: var(--cyan-ink); }
.panel { padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1); align-content: start; }
.panel__empty { color: var(--text-3); font-size: var(--fs-sm); padding: 8px 0; }

/* Prose (hasil md()) */
.prose { color: var(--text-2); line-height: 1.7; overflow-wrap: anywhere; }
.prose > * + * { margin-top: .85em; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4, .prose h5 { color: var(--text); letter-spacing: -.02em; line-height: 1.25; margin-top: 1.4em; }
.prose h2 { font-size: 1.375rem; } .prose h3 { font-size: 1.1875rem; } .prose h4, .prose h5 { font-size: 1.0625rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--cyan-ink); }
.prose a { color: var(--blue-ink); font-weight: 700; }
.prose strong { color: var(--text); }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--bg-tint); color: var(--blue-ink); font-family: var(--mono); font-size: .9em; }
.prose blockquote { padding: 10px 16px; border-left: 3px solid var(--cyan); background: var(--bg-soft); border-radius: 0 10px 10px 0; }
.prose--sm { font-size: var(--fs-sm); line-height: 1.65; }

/* 06 ── Status membership ───────────────────────────────────────────── */
.status { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 0; }
.status__row { display: flex; align-items: center; gap: 14px; }
.status__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: #ECFDF3; color: var(--ok); }
.status__ic .i { width: 24px; height: 24px; }
.status__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); }
.status__eyebrow .i { width: 16px; height: 16px; }
.status__big { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.status__left { font-size: var(--fs-sm); color: var(--text-3); }
.status__left b { color: var(--text); }
.meter { height: 8px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; border: 1px solid var(--line); }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.status--warn .status__ic { background: #FFF7ED; color: #C2410C; }
.status--warn .status__eyebrow { color: #C2410C; }
.status--warn .meter span { background: linear-gradient(90deg, #F59E0B, #EA580C); }
.status--admin .status__ic { background: var(--ink-800); color: var(--lime); }
.status--admin .status__eyebrow { color: var(--blue-ink); }

.status--locked {
  overflow: hidden; isolation: isolate; gap: 22px; padding: clamp(22px, 3.4vw, 40px);
  background: var(--ink-900); color: var(--on-ink); border-color: var(--ink-700); box-shadow: var(--sh-3); border-radius: var(--r-lg);
}
.status__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(55% 70% at 100% 0%, rgba(2, 160, 193, .32), transparent 70%),
  radial-gradient(45% 60% at 0% 100%, rgba(53, 129, 225, .26), transparent 70%),
  radial-gradient(30% 40% at 85% 95%, rgba(214, 253, 145, .12), transparent 70%); }
.status--locked .status__eyebrow { color: var(--lime); }
.status__intro { display: grid; gap: 10px; max-width: 720px; }
.status__title { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem); color: #fff; }
.status__lead { color: var(--on-ink-2); font-size: var(--fs-md); max-width: 62ch; }
.status__cta { display: grid; gap: 12px; align-content: start; }
.status__cta .fine { color: var(--on-ink-3); }
@media (min-width: 960px) {
  .status--locked { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .status--locked .status__intro { grid-column: 1 / -1; }
}
/* Akun: kartu upgrade ada di kolom kiri yang sempit → tetap satu kolom (daftar manfaat lalu tombol selebar kartu). */
.acct .status--locked { grid-template-columns: minmax(0, 1fr); }
.pending-box { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-sm); background: rgba(214, 253, 145, .08); border: 1px solid rgba(214, 253, 145, .28); }
.pending-box p { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: #fff; }
.pending-box p .i { color: var(--lime); margin-top: 2px; }
.pending-box small { display: block; font-weight: 500; color: var(--on-ink-3); font-size: var(--fs-xs); }

.benefits { list-style: none; padding: 0; display: grid; gap: 12px; }
.benefits li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.benefits__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-tint); color: var(--blue-ink); }
.benefits b { display: block; line-height: 1.35; padding-top: 1px; }
.benefits small { display: block; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.benefits--ink .benefits__ic { background: rgba(255, 255, 255, .07); color: var(--lime); border: 1px solid var(--line-ink-2); }
.benefits--ink b { color: #fff; }
.benefits--ink small { color: var(--on-ink-3); }
.benefits--tight { gap: 10px; }
.benefits--tight li { grid-template-columns: 36px minmax(0, 1fr); }
.benefits--tight .benefits__ic { width: 36px; height: 36px; border-radius: 10px; }
.benefits--tight .benefits__ic .i { width: 18px; height: 18px; }

/* 07 ── Beranda ──────────────────────────────────────────────────────── */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.home-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1024px) {
  .home-top { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 20px; align-items: stretch; }
  .home-top--locked { grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); }
}
.today {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0;
  border-radius: var(--r-lg); background: var(--ink-900); color: var(--on-ink); box-shadow: var(--sh-3);
}
.today::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at 100% 100%, rgba(2, 160, 193, .22), transparent 70%), radial-gradient(40% 50% at 0% 0%, rgba(214, 253, 145, .08), transparent 70%); }
.today__media { display: block; text-decoration: none; }
.today__media .cv, .today__media .cv-img { border-radius: 0; }
.today__body { display: grid; gap: 14px; align-content: center; padding: clamp(20px, 3vw, 32px); min-width: 0; }
.today__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--lime); }
.today__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); color: #fff; }
.today__title a { color: inherit; text-decoration: none; }
.today__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.today__sum { color: var(--on-ink-2); }
.today__rights { list-style: none; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.today__rights li { display: flex; align-items: center; gap: 8px; color: var(--on-ink-2); }
.today__rights .i { width: 18px; height: 18px; padding: 2px; border-radius: 50%; stroke-width: 2.6; }
.today__rights .is-yes .i { background: var(--lime); color: var(--ink-900); }
.today__rights .is-no { color: var(--on-ink-3); }
.today__rights .is-no .i { background: rgba(255, 255, 255, .1); color: var(--on-ink-3); }
.today .btn-row { margin-top: 4px; }
.today--empty .today__body { padding-block: clamp(28px, 4vw, 44px); }
@media (min-width: 720px) {
  .today:not(.today--empty) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .today__media .cv, .today__media .cv-img { height: 100%; min-height: 100%; aspect-ratio: auto; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) { .today:not(.today--empty) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { display: grid; gap: 2px; align-content: start; padding: 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.stat__ic { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 10px; background: var(--bg-tint); color: var(--blue-ink); }
.stat__ic .i { width: 17px; height: 17px; }
.stat b { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat > span:last-child { font-size: .75rem; color: var(--text-3); line-height: 1.35; font-weight: 600; }
@media (min-width: 1024px) { .home-top:not(.home-top--locked) .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.home-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 860px) { .home-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.wmini-list, .cmini-list { list-style: none; padding: 0; display: grid; gap: 4px; }
.wmini { display: flex; align-items: center; gap: 14px; padding: 10px; margin-inline: -10px; border-radius: var(--r-sm); text-decoration: none; transition: background-color .2s; }
.wmini:hover { background: var(--bg-soft); }
.wmini__txt { display: grid; min-width: 0; flex: 1; }
.wmini__txt b { line-height: 1.35; }
.wmini__txt small { color: var(--text-3); font-size: var(--fs-sm); }
.wmini__go { color: var(--text-3); }
.datebox { display: grid; place-items: center; align-content: center; width: 54px; height: 58px; flex: none; border-radius: 14px; background: var(--ink-800); color: #fff; line-height: 1.05; }
.datebox b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; }
.datebox small { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lime); }
.cmini { display: grid; gap: 8px; padding: 12px 10px; margin-inline: -10px; border-radius: var(--r-sm); text-decoration: none; transition: background-color .2s; }
.cmini:hover { background: var(--bg-soft); }
.cmini b { line-height: 1.35; }
.tip { gap: 10px; }
.tip p:not(.eyebrow) { font-size: var(--fs-sm); color: var(--text-2); }
.tip .link { min-height: 36px; font-size: var(--fs-sm); }
.soon-strip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-md); border: 1.5px dashed var(--line-2); color: var(--text-2); font-size: var(--fs-sm); }
.tools { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tool { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tool:hover { border-color: var(--line-2); box-shadow: 0 12px 28px -18px rgba(14, 22, 32, .35); }
.tool b { display: block; font-size: var(--fs-md, 1rem); }
.tool small { display: block; color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.tool > .i:last-child { margin-left: auto; color: var(--text-3); flex: none; }
.soon-strip__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--bg-tint); color: var(--blue-ink); }

/* 08 ── Kartu produk & cover ────────────────────────────────────────── */
.grid-cards { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid-cards--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Rail geser horizontal di ponsel (beranda: rilis terbaru) */
@media (max-width: 639.98px) {
  .grid-cards--rail {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .grid-cards--rail::-webkit-scrollbar { display: none; }
  .grid-cards--rail > * { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
}
.pcard, .ccard {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1);
  color: inherit; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.pcard:hover, .ccard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.pcard:focus-visible, .ccard:focus-visible { outline-offset: 2px; border-radius: var(--r-md); }
.pcard__media, .ccard__media { position: relative; display: block; }
.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pcard__top .badge { flex: none; }
.pcard__top .badge:not(.badge--lime) { background: var(--bg-tint); color: var(--blue-ink); }
.pcard__body, .ccard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 16px 18px; min-width: 0; }
.pcard__meta { font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--cyan-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__title { font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__sum { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__foot, .ccard__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.ccard__foot { display: block; }

/* Cover otomatis */
.cv, .cv-img { display: block; width: 100%; aspect-ratio: 16 / 10; }
.cv-img { object-fit: cover; background: var(--bg-tint); }
.cv {
  position: relative; overflow: hidden; isolation: isolate; container-type: inline-size;
  background: linear-gradient(135deg, var(--cv-a), var(--cv-b)); color: #fff;
}
.cv::before { /* pola titik halus */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.cv::after { /* kilau + penggelap bawah untuk judul */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(180deg, transparent 38%, rgba(6, 11, 17, .55) 100%);
}
.cv__top { position: absolute; top: 7%; left: 6%; right: 30%; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv__ic { display: grid; place-items: center; width: clamp(28px, 11cqi, 44px); height: clamp(28px, 11cqi, 44px); flex: none; border-radius: 28%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: var(--lime); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cv__ic .i { width: 56%; height: 56%; stroke-width: 2; }
.cv__cat { font-size: clamp(.625rem, 3.6cqi, .875rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv__title {
  position: absolute; left: 6%; right: 6%; bottom: 7%; z-index: 2;
  font-size: clamp(.95rem, 6.6cqi, 2.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cv__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Template: lembar spreadsheet mini */
.cv-sheet {
  position: absolute; top: 8%; right: -6%; width: 48%; height: 54%; border-radius: 6cqi;
  background: rgba(255, 255, 255, .93); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); transform: rotate(-7deg); overflow: hidden;
}
.cv-sheet__bar { position: absolute; left: 0; right: 0; top: 0; height: 16%; background: var(--lime); }
.cv-sheet__bar::after { content: ""; position: absolute; left: 8%; top: 38%; width: 40%; height: 24%; border-radius: 99px; background: rgba(10, 17, 25, .25); }
.cv-sheet__grid { position: absolute; left: 0; right: 0; top: 16%; bottom: 0;
  background-image: linear-gradient(rgba(14, 22, 32, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 22, 32, .1) 1px, transparent 1px);
  background-size: 100% 16%, 25% 100%; }
.cv-sheet__chart { position: absolute; right: 8%; bottom: 10%; width: 44%; height: 42%; display: flex; align-items: flex-end; gap: 9%; }
.cv-sheet__chart b { flex: 1; border-radius: 2px 2px 0 0; background: var(--cv-a); }
.cv-sheet__chart b:nth-child(1) { height: 40%; opacity: .55; }
.cv-sheet__chart b:nth-child(2) { height: 70%; opacity: .75; }
.cv-sheet__chart b:nth-child(3) { height: 52%; opacity: .65; }
.cv-sheet__chart b:nth-child(4) { height: 95%; background: var(--cv-b); }
/* E-book */
.cv-book { position: absolute; top: 7%; right: 8%; width: 28%; height: 60%; border-radius: 3cqi 5cqi 5cqi 3cqi; transform: rotate(6deg);
  background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0 9%, rgba(255, 255, 255, .25) 9% 11%, transparent 11%), linear-gradient(160deg, #F4F7FA, #D7E8FB);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); }
.cv-book__lines { position: absolute; left: 22%; right: 14%; top: 16%; height: 34%;
  background: linear-gradient(var(--cv-a), var(--cv-a)) 0 0 / 80% 14% no-repeat, linear-gradient(rgba(14, 22, 32, .25), rgba(14, 22, 32, .25)) 0 45% / 100% 8% no-repeat, linear-gradient(rgba(14, 22, 32, .25), rgba(14, 22, 32, .25)) 0 70% / 70% 8% no-repeat; }
/* Toolkit / lainnya: tumpukan kartu */
.cv-stack { position: absolute; top: 10%; right: 6%; width: 38%; height: 48%; }
.cv-stack b { position: absolute; inset: 0; border-radius: 5cqi; background: rgba(255, 255, 255, .9); box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .45); }
.cv-stack b:nth-child(1) { transform: translate(-18%, 14%) rotate(-10deg); opacity: .45; }
.cv-stack b:nth-child(2) { transform: translate(-8%, 6%) rotate(-4deg); opacity: .7; }
.cv-stack b:nth-child(3) { background: linear-gradient(var(--lime), var(--lime)) 12% 16% / 40% 12% no-repeat, linear-gradient(rgba(14, 22, 32, .16), rgba(14, 22, 32, .16)) 12% 44% / 76% 7% no-repeat, linear-gradient(rgba(14, 22, 32, .16), rgba(14, 22, 32, .16)) 12% 60% / 60% 7% no-repeat, rgba(255, 255, 255, .95); }
/* Kelas: tombol play */
.cv-play { position: absolute; top: 16%; right: 10%; display: grid; place-items: center; width: 26cqi; height: 26cqi; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 0 0 4cqi rgba(255, 255, 255, .06), 0 0 0 9cqi rgba(255, 255, 255, .04); }
.cv-play .i { width: 40%; height: 40%; color: var(--lime); fill: var(--lime); margin-left: 6%; }
.cv--course .cv__top { right: 44%; }
.cv--lg .cv__title { font-size: clamp(1.25rem, 6.2cqi, 2.5rem); }
/* Varian ilustrasi saja (di samping judul besar) */
.cv--art::after { background: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(60% 50% at 50% 110%, rgba(6, 11, 17, .35), transparent 70%); }
.cv--art .cv__top { right: 6%; }
.cv--art .cv-sheet { top: 22%; right: 50%; width: 56%; height: 70%; transform: translateX(50%) rotate(-4deg); border-radius: 4cqi; }
.cv--art .cv-sheet__chart { width: 38%; }
.cv--art .cv-book { top: 18%; right: 50%; width: 28%; height: 72%; transform: translateX(50%) rotate(5deg); }
.cv--art .cv-stack { top: 24%; right: 50%; width: 40%; height: 62%; transform: translateX(42%); }
.cv--art .cv-play { top: 50%; right: 50%; width: 22cqi; height: 22cqi; transform: translate(50%, -42%); }
.cv--art.cv--course .cv__top { right: 6%; }

/* 09 ── Kelas ────────────────────────────────────────────────────────── */
.progress { display: grid; gap: 6px; }
.progress__bar { display: block; height: 8px; border-radius: 99px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; }
.progress__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .5s var(--ease); }
.progress__txt { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.course-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: clamp(14px, 2vw, 20px); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 0; }
.course-hero__media .cv, .course-hero__media .cv-img { border-radius: var(--r-md); }
.course-hero__body { display: grid; gap: 12px; align-content: center; padding: 4px clamp(4px, 1vw, 12px) 8px; min-width: 0; }
.course-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
.course-hero__meta .i { width: 17px; height: 17px; color: var(--cyan-ink); }
@media (min-width: 860px) { .course-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; } }
.course-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
@media (min-width: 1024px) { .course-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }

.lessons { list-style: none; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.lrow {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.lrow:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.lrow__n { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line); font-weight: 800; font-size: var(--fs-sm); color: var(--text-2); }
.lrow__n .i { width: 18px; height: 18px; }
.lrow__t { display: grid; min-width: 0; }
.lrow__t b { line-height: 1.35; font-weight: 700; }
.lrow__t small { color: var(--text-3); font-size: var(--fs-xs); }
.lrow.is-done .lrow__n { background: #ECFDF3; border-color: #A7F3C4; color: var(--ok); }
.lrow.is-done .lrow__n .i { stroke-width: 2.6; }
.lrow.is-locked .lrow__n { color: var(--text-3); }
.lrow.is-locked .lrow__t b { color: var(--text-2); }
.lrow.is-current { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(2, 160, 193, .14); }
.lrow.is-current .lrow__n:not(:has(.i)) { background: var(--ink-800); border-color: var(--ink-800); color: var(--lime); }
.lessons--compact { gap: 6px; }
.lessons--compact .lrow { min-height: 56px; padding: 8px 10px; gap: 10px; }
.lessons--compact .lrow__n { width: 30px; height: 30px; font-size: var(--fs-xs); }
.lessons--compact .lrow__t b { font-size: var(--fs-sm); }

/* 10 ── Materi / player ──────────────────────────────────────────────── */
.lesson { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.lesson__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; align-content: start; }
@media (min-width: 1024px) { .lesson { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .lesson__side { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; } }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--ink-950); box-shadow: var(--sh-3); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player--locked, .player--link {
  display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--on-ink);
  background: radial-gradient(60% 80% at 50% 0%, rgba(2, 160, 193, .28), transparent 70%), var(--ink-900); aspect-ratio: auto; min-height: clamp(260px, 42vw, 440px);
}
.player--locked h2, .player--link h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); color: #fff; }
.player--locked p, .player--link p { color: var(--on-ink-2); max-width: 46ch; }
.player__lock { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-ink-2); color: var(--lime); }
.player__lock .i { width: 26px; height: 26px; }
.lesson__head { display: grid; gap: 6px; }
.lesson__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lesson__actions .fine { display: flex; align-items: center; gap: 8px; }
.lesson__actions .fine .i { width: 16px; height: 16px; }
.lesson__body { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); }
.lesson__side { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.lesson__side-head { display: grid; gap: 8px; padding: 2px 2px 6px; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pager__btn { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.pager__btn:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.pager__btn span { display: grid; min-width: 0; }
.pager__btn small { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; }
.pager__btn b { font-size: var(--fs-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager__btn .i { color: var(--cyan-ink); }
.pager__btn--next { justify-content: flex-end; text-align: right; grid-column: 2; }

/* 11 ── Koleksi: toolbar ────────────────────────────────────────────── */
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.toolbar > * { min-width: 0; }
.toolbar__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.search { position: relative; display: block; }
.search .i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search__input, .input, .select {
  width: 100%; min-height: 52px; padding: 13px 16px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 14px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.search__input { padding-left: 46px; box-shadow: var(--sh-1); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }
.input::placeholder, .search__input::placeholder { color: #8A96A5; }
.input:hover, .select:hover, .search__input:hover { border-color: #B6C3D1; }
.input:focus, .select:focus, .search__input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(2, 160, 193, .18); }
.input:disabled { background: var(--bg-soft); color: var(--text-3); }
.select { padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 20px no-repeat; }
.select--sm { min-height: 44px; padding-block: 9px; font-size: .9375rem; font-weight: 600; }
.toolbar__cat { min-width: 200px; flex: 0 1 260px; }
@media (max-width: 599.98px) { .toolbar__cat { flex: 1 1 100%; } }
.fchips { display: flex; gap: 8px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.fchips::-webkit-scrollbar { display: none; }
@media (max-width: 599.98px) { .fchips { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); flex: 1 1 100%; max-width: none; width: calc(100% + 2 * var(--gutter)); } }
.fchip {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2); background: #fff; font-size: .9375rem; font-weight: 700; color: var(--text-2); white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s;
}
.fchip:hover { border-color: #9FB0C2; color: var(--text); }
.fchip[aria-pressed="true"] { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
.result-count { font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); margin-top: -12px; min-height: 1px; }
.result-count:empty { display: none; }

/* 12 ── Detail produk ───────────────────────────────────────────────── */
.pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.pd__head { display: grid; gap: 14px; min-width: 0; order: 1; }
.pd__cover .cv, .pd__cover .cv-img { border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.pd__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd__desc { display: grid; gap: 12px; order: 3; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.pd__aside { display: contents; }
.pd__aside > .buy { order: 2; }
.pd__aside > .lic { order: 4; }
@media (min-width: 960px) {
  .pd { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 24px; align-items: start; }
  .pd__head { grid-column: 1; grid-row: 1; }
  .pd__desc { grid-column: 1; grid-row: 2; }
  .pd__aside { display: grid; gap: 16px; grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 20px); }
  .pd__cover .cv { aspect-ratio: 2 / 1; }
}
.buy__file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.buy__file > div { display: grid; min-width: 0; }
.buy__file small { color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.buy__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--grad); color: #fff; }
.buy__ic .i { width: 22px; height: 22px; }
.locked-mini { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
.locked-mini .i { color: var(--cyan-ink); }
.cert-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: #F7FEE7; border: 1px solid #D9F99D; text-decoration: none; color: inherit; transition: box-shadow .2s; }
.cert-link:hover { box-shadow: var(--sh-2); }
.cert-link > span:not(.cert-link__ic) { display: grid; flex: 1; min-width: 0; }
.cert-link small { color: var(--text-3); font-size: var(--fs-xs); }
.cert-link__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--ink-800); color: var(--lime); }

/* 13 ── Lisensi ──────────────────────────────────────────────────────── */
.lic__name { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }
.lic__code { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; margin-top: -8px; }
.lic__sum { color: var(--text-2); font-size: var(--fs-sm); }
.lic__min { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-tint); color: var(--blue-ink); font-size: var(--fs-sm); }
.lic__terms { border-top: 1px solid var(--line); padding-top: 12px; }
.lic__terms summary { display: flex; align-items: center; min-height: 44px; font-weight: 800; cursor: pointer; }
.lic__terms[open] summary { margin-bottom: 4px; }
.matrix { list-style: none; padding: 0; display: grid; gap: 2px; }
.matrix__row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 8px; border-radius: 10px; font-size: var(--fs-sm); }
.matrix__row:nth-child(odd) { background: var(--bg-soft); }
.matrix__mark { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; }
.matrix__mark .i { width: 15px; height: 15px; stroke-width: 2.8; }
.matrix__row.is-yes .matrix__mark { background: #DCFCE7; color: var(--ok); }
.matrix__row.is-no .matrix__mark { background: #FEE2E2; color: var(--err); }
.matrix__row.is-no .matrix__lbl { color: var(--text-3); }
.matrix__row.is-yes .matrix__lbl { font-weight: 700; color: var(--text); }

/* 14 ── Webinar ──────────────────────────────────────────────────────── */
.wlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 0; }
.wcard--live { border-color: #FCA5A5; box-shadow: 0 0 0 4px rgba(220, 38, 38, .08), var(--sh-2); }
.wcard--past .datebox { background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--line); }
.wcard--past .datebox small { color: var(--text-3); }
.datebox--lg { width: 64px; height: 76px; gap: 1px; }
.datebox--lg b { font-size: 1.625rem; }
.wcard__body { display: grid; gap: 8px; min-width: 0; }
.wcard__when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
.wcard__when .i { width: 16px; height: 16px; color: var(--cyan-ink); }
.wcard__title { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); letter-spacing: -.02em; line-height: 1.25; }
.wcard__speaker { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 700; }
.wcard__speaker .i { width: 16px; height: 16px; color: var(--cyan-ink); }
.wcard__desc { max-width: 70ch; }
.wcard__actions { margin-top: 4px; }
@media (max-width: 479.98px) {
  .wcard { grid-template-columns: minmax(0, 1fr); }
  .wcard .datebox--lg { width: auto; height: auto; grid-auto-flow: column; justify-content: start; gap: 8px; padding: 8px 12px; border-radius: 12px; justify-self: start; }
  .wcard .datebox--lg b { font-size: 1.125rem; }
  .wcard__actions .btn { flex: 1 1 100%; }
}

/* 15 ── Akun & form ──────────────────────────────────────────────────── */
.acct { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.acct__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 960px) { .acct { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; } }
.acct__who { flex-direction: row; align-items: center; gap: 14px; }
.acct__who > div { display: grid; min-width: 0; }
.acct__who b { font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; }
.acct__who small { color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; }
.avatar--lg { width: 56px; height: 56px; font-size: 1.375rem; }
.acct__help p { color: var(--text-2); font-size: var(--fs-sm); }
.acct__help .btn { align-self: flex-start; }
.acct__out { flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.form { display: grid; gap: 16px; }
.field { display: grid; min-width: 0; }
.field__label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .9375rem; }
.field__hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.opt { color: var(--text-3); font-weight: 600; font-size: var(--fs-xs); margin-left: 4px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-err { padding: 10px 14px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; color: var(--err); font-weight: 600; font-size: var(--fs-sm); }
.orders { list-style: none; padding: 0; display: grid; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.order:first-child { border-top: 0; padding-top: 4px; }
.order__main { min-width: 0; }
.order__id { font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.order__meta { font-size: var(--fs-xs); color: var(--text-3); }
.order__side { display: grid; justify-items: end; gap: 4px; align-content: start; }
.order__amt { font-weight: 800; }
.order__actions { grid-column: 1 / -1; }
.status-chip { display: inline-flex; padding: 3px 9px; border-radius: var(--r-pill); font-size: .6875rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.status-chip--ok { background: #DCFCE7; color: #166534; }
.status-chip--warn { background: #FEF3C7; color: #92400E; }
.status-chip--err { background: #FEE2E2; color: #991B1B; }
.status-chip--muted { background: var(--bg-soft); color: var(--text-3); border: 1px solid var(--line); }

/* 16 ── Sertifikat ───────────────────────────────────────────────────── */
.cert-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cert {
  position: relative; display: grid; gap: 16px; width: min(100%, 860px); margin-inline: auto; padding: clamp(22px, 4.5vw, 56px);
  background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden;
}
.cert::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--cyan), var(--blue) 60%, var(--lime)); }
.cert::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--line); border-radius: calc(var(--r-md) - 8px); pointer-events: none; }
.cert > * { position: relative; z-index: 1; }
.cert__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cert__brand { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; color: var(--text-2); }
.cert__brand b { color: var(--text); letter-spacing: .08em; }
.cert__mark { width: 34px; height: 34px; }
.cert__no { font-size: var(--fs-sm); color: var(--text-3); font-weight: 700; }
.cert__no .mono { color: var(--text); }
.cert__eyebrow { margin-top: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-ink); }
.cert__title { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.375rem); margin-top: -6px; }
.cert__type { color: var(--text-3); font-weight: 700; margin-top: -8px; }
.cert__grid { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-sm); background: var(--bg-soft); border: 1px solid var(--line); }
@media (min-width: 640px) { .cert__grid { grid-template-columns: 1.3fr 1.2fr 1fr; } }
.cert__field { display: grid; gap: 2px; min-width: 0; }
.cert__field small { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cert__field b { font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.cert__field span { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.cert__holder { font-size: 1.25rem !important; }
.cert__sum { color: var(--text-2); }
.cert__h2 { font-size: 1rem; letter-spacing: -.01em; margin-top: 6px; }
.cert .matrix { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); column-gap: 12px; }
.cert .matrix__row:nth-child(odd) { background: none; }
.cert .matrix__row { border-bottom: 1px dashed var(--line); border-radius: 0; }
.cert__terms { padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg-soft); }
.cert__foot { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cert__verify { display: grid; gap: 2px; }
.cert__verify small { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cert__verify a { color: var(--blue-ink); font-weight: 700; overflow-wrap: anywhere; }
.cert__note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  /* min-height 100svh = tinggi 1 halaman kertas → sisa beberapa px tumpah jadi halaman ke-2 kosong. */
  body { min-height: 0 !important; display: block !important; }
  .ma-bar, .ma-tabs, .ma-foot, .no-print, .skip-link, .toasts, dialog { display: none !important; }
  .ma-main { padding: 0 !important; }
  .container { width: 100% !important; max-width: none !important; }
  .view { gap: 0; }
  .cert { width: 100%; box-shadow: none; border: 0; padding: 5mm 4mm; gap: 10px; border-radius: 0; break-inside: avoid; }
  .cert::after { inset: 0; border-radius: 0; }
  .cert, .cert * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cert__verify a { color: var(--text) !important; text-decoration: none; }
  .cert .matrix__row { min-height: 28px; padding: 3px 6px; }
}

/* 17 ── Dialog & pembayaran ─────────────────────────────────────────── */
.dlg { width: min(100% - 24px, 520px); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: #fff; color: var(--text); box-shadow: 0 40px 100px -20px rgba(6, 11, 17, .6); overflow: auto; overscroll-behavior: contain; }
.dlg::backdrop { background: rgba(6, 11, 17, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg[open] { animation: dlg-in .3s var(--ease); }
.dlg--sm { width: min(100% - 24px, 440px); }
.dlg__box { position: relative; display: grid; gap: 14px; padding: clamp(22px, 4vw, 32px); overflow: hidden; }
.dlg__x { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--text-2); }
.dlg__x:hover { background: var(--gray); color: var(--text); }
.dlg__title { font-size: clamp(1.3125rem, 1.15rem + .8vw, 1.625rem); padding-right: 44px; outline: none; }
.dlg__body { display: grid; gap: 14px; }
.dlg__lead { font-size: var(--fs-md); color: var(--text-2); }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg-tint); }
.price-tag__amt { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.price-tag__per { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.pay-wait { display: grid; justify-items: center; gap: 10px; padding: 12px 0 4px; text-align: center; }
.pay-wait__spin { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--bg-tint); border-top-color: var(--cyan); border-right-color: var(--blue); animation: spin 1s linear infinite; margin-bottom: 6px; }
.pay-wait__bar { width: 100%; height: 6px; margin-top: 8px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; }
.pay-wait__bar span { display: block; width: 2%; height: 100%; background: var(--grad); border-radius: inherit; transition: width .6s var(--ease); }
.pay-ok { display: grid; justify-items: center; gap: 12px; text-align: center; }
.pay-ok .dlg__title { padding-right: 0; }
.pay-ok__ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--ink-900); color: var(--lime); box-shadow: 0 0 0 8px rgba(214, 253, 145, .25); animation: pop .6s var(--ease); }
.pay-ok__ic .i { width: 36px; height: 36px; }
.pay-ok__list { list-style: none; padding: 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.pay-ok__list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: var(--fs-sm); font-weight: 600; }
.pay-ok__list .i { color: var(--cyan-ink); }
.pay-ok .btn-col { width: 100%; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--r)); animation: fall var(--t) var(--d) cubic-bezier(.25, .6, .4, 1) forwards; }
.confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }

/* 18 ── Skeleton, empty, toast ──────────────────────────────────────── */
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, #E8EDF3 0%, #F3F6F9 40%, #E8EDF3 80%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-page { display: grid; gap: 14px; }
.sk--title { width: min(420px, 80%); height: 36px; }
.sk--line { height: 14px; width: 100%; }
.sk--short { width: 60%; }
.sk--block { height: 180px; border-radius: var(--r-md); }
.sk--media { aspect-ratio: 16 / 10; border-radius: 0; }
.sk-row { display: grid; gap: 14px; margin-block: 8px; }
@media (min-width: 720px) { .sk-row { grid-template-columns: 1.6fr 1fr; } }
.sk-card { display: grid; gap: 10px; padding-bottom: 16px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.sk-card .sk--line { width: auto; margin-inline: 16px; }
.empty { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 5vw, 52px) 20px; border-radius: var(--r-md); background: var(--bg); border: 1.5px dashed var(--line-2); text-align: center; }
.empty__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--bg-tint); color: var(--blue-ink); margin-bottom: 4px; }
.empty__ic .i { width: 26px; height: 26px; }
.empty h3 { font-size: 1.1875rem; }
.empty p { color: var(--text-3); max-width: 46ch; }
.empty .btn-row { margin-top: 6px; }
.empty--err { border-color: #FECACA; background: #FFFBFB; }
.empty--err .empty__ic { background: #FEE2E2; color: var(--err); }

.toasts { position: fixed; left: 50%; bottom: calc(var(--tabs-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 200; display: grid; gap: 8px; width: min(100% - 24px, 420px); transform: translateX(-50%); pointer-events: none; }
@media (min-width: 960px) { .toasts { bottom: 24px; } }
.toast { padding: 12px 16px; border-radius: 14px; background: var(--ink-900); color: #fff; font-weight: 600; font-size: var(--fs-sm); line-height: 1.45; box-shadow: 0 16px 40px -12px rgba(6, 11, 17, .55); border-left: 4px solid var(--cyan); animation: toast-in .3s var(--ease); pointer-events: auto; overflow-wrap: anywhere; }
.toast--ok { border-left-color: var(--lime); }
.toast--err { border-left-color: #F87171; }
.toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }

/* 19 ── Motion ──────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(214, 253, 145, .18); } 50% { box-shadow: 0 0 0 8px rgba(214, 253, 145, .04); } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(560px) rotate(calc(var(--r) + 540deg)); } }
.view { animation: view-in .35s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .confetti { display: none; }
}

/* ── Kupon & afiliasi: halaman #/afiliasi (member-affiliate.js) ──────────
   Bagian ini ditambahkan untuk program afiliasi; aturan di atas tidak diubah. */
.aff, .aff-join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.aff__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 960px) {
  .aff { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
  .aff-join { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
}
.aff-warn { background: #FFFBEB; border-color: #FCD98A; color: #78350F; }
.aff-warn > .i { color: var(--warn); }

.aff-link__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.aff-link__input { min-height: 48px; padding-block: 10px; font-family: var(--mono); font-size: .875rem; background: var(--bg-soft); text-overflow: ellipsis; }
.aff-link .btn-row .mono { margin-left: 2px; }
.aff-coupons { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.aff-coupons__t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); }
.aff-coupons__t .i { color: var(--cyan-ink); width: 18px; height: 18px; }
.aff-coupons__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aff-coupons__list .is-off { opacity: .6; }
.aff-cpn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 6px 12px; border-radius: 12px;
  border: 1.5px dashed var(--cyan); background: #F2FBFD; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; cursor: pointer;
}
.aff-cpn .mono { font-weight: 800; color: var(--text); letter-spacing: .04em; overflow-wrap: anywhere; }
.aff-cpn .i { width: 16px; height: 16px; color: var(--cyan-ink); }
.aff-cpn:hover { background: var(--bg-tint); }

.aff-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .aff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aff-stats .stat b { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); overflow-wrap: anywhere; }

.aff-balance { display: grid; gap: 2px; padding: 16px; border-radius: var(--r-sm); background: linear-gradient(140deg, var(--ink-900), #12304A); color: #fff; }
.aff-balance span { font-size: var(--fs-sm); font-weight: 600; color: var(--on-ink-2); }
.aff-balance b { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: var(--lime); overflow-wrap: anywhere; }
.aff-balance small { font-size: var(--fs-xs); color: var(--on-ink-3); }
.aff-pay .fine { display: flex; align-items: flex-start; gap: 6px; }
.aff-pay .fine .i { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.aff-sub { font-size: 1rem; margin-top: 4px; }
.aff-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.aff-code-row .input { min-height: 48px; padding-block: 10px; }
.aff-code-row .btn { min-height: 48px; }

.aff-terms { list-style: none; padding: 0; display: grid; gap: 10px; }
.aff-terms li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.aff-terms .i { width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.aff-terms b { color: var(--text); }
.aff-termsbox summary { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.aff-termsbox summary::-webkit-details-marker { display: none; }
.aff-termsbox summary::after { content: "+"; margin-left: auto; font-size: 1.375rem; font-weight: 600; color: var(--text-3); }
.aff-termsbox[open] summary::after { content: "−"; }
.aff-termsbox summary .i { color: var(--cyan-ink); }

.aff-hero { background: linear-gradient(150deg, var(--ink-900), #102A42 70%, #0B3A4A); color: #fff; border-color: transparent; }
.aff-hero .eyebrow { color: var(--cyan-on-ink); }
.aff-hero__big { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.2; letter-spacing: -.03em; color: #fff; }
.aff-hero__rate { color: var(--lime); }
.aff-hero__eg { font-size: var(--fs-sm); color: var(--on-ink-2); }
.aff-hero__eg b { color: #fff; }
.aff-steps { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 4px; }
.aff-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9375rem; line-height: 1.5; color: var(--on-ink-2); }
.aff-steps b { color: #fff; }
.aff-steps__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(214, 253, 145, .14); color: var(--lime); font-weight: 800; }
.aff-joinform { padding-top: 14px; border-top: 1px solid var(--line); }
.aff-locked { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.aff-locked b { color: var(--text); }
.aff-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); cursor: pointer; }
.aff-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cyan-ink); }
.aff-check a { color: var(--blue-ink); font-weight: 700; }
/* ── Notifikasi email ── */
/* Akun → Notifikasi email (member-notify.js): tiga saklar = checkbox asli (role="switch") di dalam <label>. */
.npref { display: grid; gap: 14px; min-width: 0; }
.npref__list { list-style: none; margin: 0; padding: 0; display: grid; }
.npref__list > li + li { border-top: 1px solid var(--line); }
.npref__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 12px 0; cursor: pointer; }
.npref__list > li:first-child .npref__row { padding-top: 0; }
.npref__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bg-tint); color: var(--blue-ink); }
.npref__ic .i { width: 18px; height: 18px; }
.npref__txt { display: grid; gap: 2px; min-width: 0; }
.npref__txt b { font-size: .9375rem; line-height: 1.35; color: var(--text); }
.npref__txt small { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-3); overflow-wrap: anywhere; }
.npref__sw { position: relative; display: block; width: 48px; height: 28px; flex: none; }
.npref__sw input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.npref__track { position: absolute; inset: 0; border-radius: var(--r-pill); background: #C9D3DE; transition: background-color .2s var(--ease), box-shadow .2s; }
.npref__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14, 22, 32, .3); transition: transform .2s var(--ease), background-color .2s; }
.npref__sw input:checked + .npref__track { background: var(--ink-800); }
.npref__sw input:checked + .npref__track::after { transform: translateX(20px); background: var(--lime); }
.npref__sw input:focus-visible + .npref__track { outline: 3px solid var(--cyan); outline-offset: 2px; }
.npref__row:hover .npref__track { box-shadow: 0 0 0 4px rgba(2, 160, 193, .14); }
.npref__row[aria-busy="true"] { cursor: progress; }
.npref__row[aria-busy="true"] .npref__track { opacity: .55; }
.npref__note, .npref__off { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-3); }
.npref__note .i, .npref__off .i { width: 16px; height: 16px; margin-top: 2px; }
.npref__note .i { color: var(--ok); }
.npref__note b { color: var(--text-2); }
.npref__off { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.npref__off .i { color: var(--text-3); }
.npref-err { display: grid; gap: 10px; justify-items: start; }
@media (forced-colors: active) {
  .npref__track { border: 1px solid CanvasText; }
  .npref__sw input:checked + .npref__track::after { background: Highlight; }
}

/* 8 menu atas (+ pill status + avatar) baru muat sebaris mulai ±1200px; di 960–1199px menu terlipat ("CV / Builder")
   dan bar atas melebar sampai halaman bisa digeser ke samping. Di rentang itu pakai tab bar bawah seperti tablet. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .ma-nav { display: none; }
  .ma-tabs { display: grid; }
  .ma-main { padding-bottom: 48px; }
  .ma-foot { padding-bottom: calc(24px + var(--tabs-h) + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(var(--tabs-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* Dialog "Buka semua akses member" di HP: daftar manfaat (kini 5 baris) mendorong tombol aktivasi ke bawah layar →
   tombol menempel di bawah dialog saat isinya digulir. overflow: clip (bukan hidden) supaya sticky mengikuti dialog. */
@media (max-width: 599.98px) {
  .dlg--upsell .dlg__box { overflow: clip; }
  .dlg--upsell .btn-col { position: sticky; bottom: 0; z-index: 1; margin: 0 calc(-1 * clamp(22px, 4vw, 32px)); padding: 12px clamp(22px, 4vw, 32px) 14px; background: #fff; box-shadow: 0 -14px 20px -18px rgba(6, 11, 17, .35); }
}

/* ==========================================================================
   Akun → Login dengan Google + "Buat password" (akun tanpa password dari Google).
   ========================================================================== */
.glink { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px 14px; }
.glink__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.glink__logo { width: 22px; height: 22px; }
.glink__txt { display: grid; gap: 2px; min-width: 0; }
.glink__txt b { font-size: 1rem; line-height: 1.3; }
.glink__txt small { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.glink__act { grid-column: 1 / -1; display: flex; justify-content: flex-start; }
.glink__act .status-chip { font-size: var(--fs-xs); padding: 5px 12px; }
@media (min-width: 480px) {
  .glink { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .glink__act { grid-column: auto; justify-content: flex-end; }
}
.pw-note { margin: -4px 0 0; font-size: var(--fs-sm); line-height: 1.55; }
/* ── akhir: Akun → Login dengan Google ── */

/* ══════════════════════════════════════════════════════════════════════════
   Harga coret di member area (promo website / kode ?promo=) — member-state.js:
   priceHtml() / ctaPriceHtml() → <span class="price-promo"><s class="price-was">…</s> <ins class="price-now">…</ins></span>,
   upsellDialog() → .price-tag--promo + chip. Gaya dasar .price-was / .promo-chip ada di app.css.
   ══════════════════════════════════════════════════════════════════════════ */
.price-promo { white-space: normal; }
.price-promo .price-now { font-weight: 800; }
.btn .price-promo .price-was { font-size: .86em; font-weight: 700; }
/* Tombol aktivasi / perpanjang: label + harga coret membungkus jadi dua baris di layar sempit (bukan kolom-kolom). */
.btn:has(> .price-promo) { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
.price-tag--promo { align-items: center; }
.price-tag--promo .price-tag__amt .price-promo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; }
.price-tag--promo .price-tag__amt .price-was { margin: 0; font-size: .58em; }
.price-tag__chip { flex-basis: 100%; margin-top: 4px; }
/* Judul status (latar gelap, teks gradasi): harga normal abu-abu, harga promo tetap gradasi. */
.grad-ink .price-was, .status__title .price-was { color: var(--on-ink-3); -webkit-text-fill-color: var(--on-ink-3); opacity: 1; font-size: .62em; }
.status__title .price-now { background: var(--grad-text-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.status--locked .promo-chip { background: rgba(214, 253, 145, .1); border-color: rgba(214, 253, 145, .32); color: var(--lime); }

/* ==========================================================================
   Keamanan akun (perbaikan review): email Google + "Putuskan" / konfirmasi password di kartu Login dengan Google,
   tombol "Masuk ulang dengan Google" di kartu Buat password, peringatan akun Google baru di Beranda.
   ========================================================================== */
.glink__act { flex-wrap: wrap; align-items: center; gap: 8px; }
.glink__txt small .glink__mail { font-size: inherit; line-height: inherit; font-weight: 700; color: var(--text-2); overflow-wrap: anywhere; }
.glink__hint { margin: 14px 0 0; }
.glink__form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.glink__form .pw-note { margin: 0; }
.glink__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-reauth { margin: 0; }
.home-newacct { margin: 0 0 20px; }
.home-newacct__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* Ajakan gabung grup WhatsApp member (Beranda + dialog "Pembayaran berhasil") */
.home-wagroup { margin: 0 0 20px; }
.home-wagroup > .i { color: #128C7E; }
.home-wagroup__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pay-ok__group { display: grid; gap: 10px; width: 100%; padding: 14px; border-radius: 14px; background: var(--ok-bg); border: 1px solid var(--ok-bd); text-align: left; }
.pay-ok__group p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.pay-ok__group b { display: block; margin-bottom: 2px; font-size: var(--fs-md); color: var(--text); }
/* ── akhir: Keamanan akun ── */

/* ── Akun gratis: "Paket gratis Anda" di beranda ── */
.freepack { padding: 18px; border-radius: var(--r-md, 18px); border: 1px solid var(--ok-bd); background: linear-gradient(180deg, var(--ok-bg), #fff 70%); }
.freepack .sec__head { align-items: center; }
.freepack__sub { margin-top: 20px; }
.freepack__sub .sec__title { font-size: 1rem; }
.freepack .fine { margin-top: 10px; }

/* ── Testimoni (#/testimoni, ajakan di beranda / dialog, bagian Akun) ── */
.testi { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .testi { grid-template-columns: minmax(0, 1fr) 320px; } }
.testi-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.testi-rate__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.testi-rate__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.testi-rate__row label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; font-size: 30px; line-height: 1; color: #C9D3DE; cursor: pointer; transition: color .15s, transform .15s var(--ease); }
.testi-rate__row label:hover, .testi-rate__row label:hover ~ label,
.testi-rate__row input:checked ~ label { color: #F5B301; }
.testi-rate__row label:hover { transform: scale(1.08); }
.testi-rate__row input:focus-visible + label { outline: 3px solid var(--cyan); outline-offset: 1px; }
.testi-prompts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.testi-prompts li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); }
.testi-prompts .i { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--cyan-ink); }
.testi-area { min-height: 150px; resize: vertical; font: inherit; line-height: 1.55; }
.testi-count.is-ok { color: var(--ok); }
.testi-names { display: grid; gap: 8px; }
@media (min-width: 560px) { .testi-names { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.testi-names legend { margin-bottom: 8px; }
.testi-name { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 12px; border: 1.5px solid var(--line-2); border-radius: 14px; cursor: pointer; }
.testi-name:has(input:checked) { border-color: var(--ink-800); background: var(--bg-soft); }
.testi-name input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink-800); }
.testi-name span { display: grid; gap: 2px; min-width: 0; }
.testi-name small { color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.testi-consent { display: grid; gap: 10px; }
.testi-sender { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.testi-sender .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok); }
.testi-aside .card__title { font-size: 1rem; }
.testi-points { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.testi-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.testi-points .i { width: 18px; height: 18px; color: var(--ok); }
.testi-mine__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.testi-quote { margin: 16px 0 12px; padding: 18px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); }
.testi-quote blockquote { margin: 8px 0 10px; font-size: var(--fs-md); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.testi-quote figcaption { font-size: var(--fs-sm); color: var(--text-3); }
.testi-stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; color: #C9D3DE; }
.testi-stars .on { color: #F5B301; }
.testi-acct__q { display: grid; gap: 4px; margin: 10px 0 4px; overflow-wrap: anywhere; }
.testi-invite { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: start; margin: 0 0 20px; padding: 16px 18px; border-radius: var(--r-md, 18px); border: 1px solid #FCE7A6; background: linear-gradient(180deg, #FFFBEB, #fff 80%); }
.testi-invite__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #FEF3C7; color: #B45309; }
.testi-invite__txt h2 { margin: 0 0 4px; font-size: 1.0625rem; }
.testi-invite__txt p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.testi-invite__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
@media (min-width: 720px) { .testi-invite__act { grid-column: 2; } }
.testi-invite__never { font-size: var(--fs-sm); color: var(--text-3); }
.dlg--testi .testi-invite { margin: 0; border: 0; background: none; padding: 0; }

/* ── Kit Jualan (tab di halaman produk) ── */
.btn--xs { min-height: 36px; padding: 6px 12px; font-size: .8125rem; gap: 6px; }
.btn--xs .i { width: 16px; height: 16px; }
.pd-tabs { display: flex; gap: 6px; margin-bottom: 18px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.pd-tabs [role=tab] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-weight: 700; color: var(--text-2); cursor: pointer; }
.pd-tabs [role=tab] .i { width: 18px; height: 18px; }
.pd-tabs [role=tab][aria-selected="true"] { background: var(--ink-800); color: #fff; }
.kit { display: grid; gap: 18px; min-width: 0; }
.kit-form { display: grid; gap: 14px; margin: 14px 0 16px; }
.kit-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kit-sw { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: var(--sw); box-shadow: 0 0 0 1.5px var(--line-2); cursor: pointer; padding: 0; }
.kit-sw[aria-checked="true"] { box-shadow: 0 0 0 3px var(--ink-800); }
.kit-sw--custom { position: relative; display: grid; place-items: center; background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); overflow: hidden; }
.kit-sw--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kit-price { display: flex; gap: 10px; align-items: center; }
.kit-price .input { flex: 1; min-width: 0; }
.kit-canvases { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-bottom: 14px; }
.kit-cv { margin: 0; display: grid; gap: 8px; min-width: 0; }
.kit-cv canvas { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--sh-1); background: #0B1220; }
.kit-cv--wide { grid-column: 1 / -1; }
.kit-cv--story { grid-row: span 2; }
.kit-cv figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--fs-sm); }
.kit-cv figcaption small { color: var(--text-3); flex: 1 1 140px; }
@media (min-width: 900px) { .kit-canvases { grid-template-columns: 1fr .62fr 1.25fr; } .kit-cv--wide { grid-column: auto; } .kit-cv--story { grid-row: auto; } }
.kit-copy { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.kit-copy__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.kit-copy__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.kit-copy__text--multi { max-height: 320px; overflow: auto; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); }
.kit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-group h3 { margin: 14px 0 0; font-size: 1rem; }
.kit-niches { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.kit-pricebox { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #FFFBEB; border: 1px solid #FCE7A6; }
.kit-pricebox p { margin: 6px 0 0; }
.kit-note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: var(--fs-sm); color: var(--text-2); }
.kit-note .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--blue-ink); }
.kit-points { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.kit-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.kit-points .i { width: 18px; height: 18px; color: var(--ok); }

/* 30 ── Jalur belajar + sertifikat kelulusan (Fase 5, member-paths.js) ─────────────────── */
.pth-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.pth-lock p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.pth-lock .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) { .pth-lock { grid-template-columns: auto minmax(0, 1fr) auto; } .pth-lock .btn { grid-column: auto; } }
.pth-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pth-card { display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; }
.pth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad); }
.pth-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pth-card__title { font-size: 1.375rem; letter-spacing: -.02em; }
.pth-card__title a { color: inherit; text-decoration: none; }
.pth-card__title a:hover { color: var(--blue-ink); }
.pth-card__tag { color: var(--text-2); font-weight: 600; margin-top: -6px; }
.pth-card__dl { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg-soft); }
.pth-card__dl dt { display: flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pth-card__dl dt .i { width: 14px; height: 14px; }
.pth-card__dl dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.pth-card__prog { display: grid; gap: 4px; }
.pth-card__prog small { color: var(--text-3); font-weight: 600; }
.pth-card__act { display: flex; flex-wrap: wrap; gap: 8px; }
.pth-bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--bg-tint); overflow: hidden; }
.pth-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--grad); min-width: 0; transition: width .5s var(--ease); }
.pth-honest { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }
.pth-honest .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }

.pth-head { display: flex; align-items: center; gap: 14px; }
.pth-head__ic { width: 56px; height: 56px; border-radius: 16px; }
.pth-head__ic .i { width: 26px; height: 26px; }
.pth-head__txt { min-width: 0; display: grid; gap: 2px; }
.pth-sum { display: grid; gap: 14px; align-items: center; }
@media (min-width: 760px) { .pth-sum { grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); } }
.pth-sum__num { display: grid; }
.pth-sum__num b { font-size: 2.5rem; line-height: 1; letter-spacing: -.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pth-sum__num small { color: var(--text-3); font-weight: 700; }
.pth-sum__bar { display: grid; gap: 8px; }
.pth-sum__bar p { font-size: var(--fs-sm); color: var(--text-2); }
.pth-next { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg-tint); }
.pth-next small { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.pth-next b { line-height: 1.35; }
.pth-cols { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .pth-cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.pth-cols > .sec { display: grid; gap: 14px; }
.pth-info { display: grid; gap: 8px; }
.pth-info .sec__title { font-size: 1rem; margin-top: 6px; }
.pth-info .sec__title:first-child { margin-top: 0; }
.pth-info p { font-size: var(--fs-sm); color: var(--text-2); }
.pth-comp { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.pth-comp li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.pth-comp .i { width: 16px; height: 16px; color: var(--cyan-ink); margin-top: 2px; }

.pth-steps { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; counter-reset: s; }
.pth-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.pth-step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); border: 1.5px solid var(--line-2); font-weight: 800; color: var(--text-3); grid-row: span 2; align-self: start; }
.pth-step__n .i { width: 20px; height: 20px; }
.pth-step--done .pth-step__n { background: #DCFCE7; border-color: #86EFAC; color: #166534; }
.pth-step--next { border-color: var(--blue); box-shadow: 0 0 0 3px var(--bg-tint); }
.pth-step--next .pth-step__n { background: var(--ink-800); border-color: var(--ink-800); color: var(--lime); }
.pth-step--soon { background: var(--bg-soft); }
.pth-step--soon .pth-step__body { opacity: .78; }
.pth-step__body { display: grid; gap: 4px; min-width: 0; }
.pth-step__t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pth-step__t b { line-height: 1.35; }
.pth-step__body small { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; }
.pth-mini { display: block; max-width: 260px; margin-top: 2px; }
.pth-mini .pth-bar { height: 6px; }
.pth-step__act { grid-column: 2; display: flex; }
@media (min-width: 560px) { .pth-step { grid-template-columns: 40px minmax(0, 1fr) auto; } .pth-step__n { grid-row: auto; align-self: center; } .pth-step__act { grid-column: auto; } }

.pth-mods { display: grid; gap: 10px; }
.pth-mod { padding: 0; overflow: hidden; }
.pth-mod > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.pth-mod > summary::-webkit-details-marker { display: none; }
.pth-mod > summary > span:nth-child(2) { display: grid; min-width: 0; }
.pth-mod > summary small { color: var(--text-3); font-size: var(--fs-xs); }
.pth-mod > summary > .i { transition: transform .2s var(--ease); color: var(--text-3); }
.pth-mod[open] > summary > .i { transform: rotate(90deg); }
.pth-mod__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-tint); color: var(--blue-ink); }
.pth-mod__body { display: grid; gap: 16px; padding: 0 16px 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.pth-quiz { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-sm); background: var(--bg-soft); }
.pth-quiz h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 1.0625rem; }
.pth-quiz h3 small { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; }
.pth-q { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.pth-q legend { font-weight: 700; margin-bottom: 6px; line-height: 1.45; }
.pth-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: var(--fs-sm); line-height: 1.45; }
.pth-opt input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cyan-ink); }
.pth-opt:has(input:checked) { border-color: var(--blue); background: var(--bg-tint); }
.pth-quiz .btn { justify-self: start; }

.pth-proj { display: grid; gap: 14px; scroll-margin-top: 80px; }
.pth-proj:focus { outline: none; }
.pth-proj > p { color: var(--text-2); }
.pth-pform { display: grid; gap: 16px; }
.pth-pform .btn[type=submit] { justify-self: start; }
.pth-rubric { display: grid; gap: 8px; border: 0; padding: 14px; margin: 0; border-radius: var(--r-sm); background: var(--bg-soft); min-width: 0; }
.pth-rubric legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; }
.pth-kind { display: flex; flex-wrap: wrap; gap: 8px; }
.pth-kind label { position: relative; }
.pth-kind input { position: absolute; opacity: 0; inset: 0; }
.pth-kind span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.pth-kind input:checked + span { border-color: var(--ink-800); background: var(--ink-800); color: #fff; }
.pth-kind input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pth-statement { padding: 12px 14px; border-radius: var(--r-sm); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.pth-pstat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-soft); }
.pth-pstat p { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.pth-pstat__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; }
.pth-pstat--ok { background: #F0FDF4; border-color: #BBF7D0; } .pth-pstat--ok .pth-pstat__ic { color: #166534; }
.pth-pstat--warn { background: #FFFBEB; border-color: #FDE68A; } .pth-pstat--warn .pth-pstat__ic { color: #92400E; }
.pth-pstat--err { background: #FEF2F2; border-color: #FECACA; } .pth-pstat--err .pth-pstat__ic { color: #991B1B; }
.pth-pstat__what { overflow-wrap: anywhere; }
.pth-pstat__what a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-ink); font-weight: 700; overflow-wrap: anywhere; }
.pth-pstat__what .i { width: 16px; height: 16px; flex: none; }
.pth-note { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid currentColor; border-radius: 0 10px 10px 0; background: #fff; font-size: var(--fs-sm); color: var(--text); white-space: pre-line; }
.pth-note small { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.pth-grad { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.pth-grad p { color: var(--on-ink-2); font-size: var(--fs-sm); }
.pth-grad .eyebrow { color: var(--lime); }
.pth-grad .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) { .pth-grad { grid-template-columns: auto minmax(0, 1fr) auto; } .pth-grad .btn { grid-column: auto; } }

.pth-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
.pth-start p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.pth-start .btn { justify-self: start; }
@media (min-width: 640px) { .pth-start { grid-template-columns: minmax(0, 1fr) auto; } }

/* Sertifikat kelulusan: A4 tegak, siap cetak / simpan PDF. */
.btn--li { --btn-bg: #0A66C2; --btn-fg: #fff; box-shadow: 0 10px 24px -14px rgba(10, 102, 194, .9); }
.btn--li:hover { --btn-bg: #004182; }
.grad-share { display: grid; gap: 12px; }
.grad-share__row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 479.98px) { .grad-share__row .btn { flex: 1 1 100%; } }
.grad {
  position: relative; display: grid; gap: 14px; width: 100%; max-width: 860px; margin-inline: auto; padding: clamp(22px, 5vw, 48px);
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden;
}
.grad::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--cyan), var(--blue) 60%, var(--lime)); }
.grad::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--line); border-radius: calc(var(--r-md) - 8px); pointer-events: none; }
.grad > * { position: relative; z-index: 1; }
.grad__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.grad__brand { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 1.0625rem; }
.grad__brand b { color: var(--text); letter-spacing: .08em; }
.grad__brand small { display: block; font-size: .6875rem; color: var(--text-3); font-weight: 700; letter-spacing: .02em; }
.grad__mark { width: 38px; height: 38px; flex: none; }
.grad__no { font-size: var(--fs-sm); color: var(--text-3); font-weight: 700; }
.grad__no .mono { color: var(--text); }
.grad__eyebrow { text-align: center; margin-top: 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-ink); }
.grad__give { text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.grad__name { text-align: center; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem); letter-spacing: -.02em; overflow-wrap: anywhere; outline: none; }
.grad__path { text-align: center; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad__stats { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg-soft); border: 1px solid var(--line); }
@media (min-width: 600px) { .grad__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grad__stats div { display: grid; gap: 1px; min-width: 0; }
.grad__stats small { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.grad__stats b { font-size: 1.0625rem; }
.grad__stats span { font-size: var(--fs-xs); color: var(--text-2); }
.grad__cols { display: grid; gap: 16px; }
@media (min-width: 680px) { .grad__cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.grad__cols h2 { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.grad__comp { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; font-size: var(--fs-sm); }
.grad__comp li { position: relative; padding-left: 18px; line-height: 1.45; }
.grad__comp li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.grad__mat { font-size: var(--fs-sm); line-height: 1.45; margin-bottom: 8px; }
.grad__mat span { color: var(--text-3); font-weight: 600; }
.grad__mat small { color: var(--text-2); font-size: .75rem; }
.grad__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.grad__sign { display: grid; gap: 2px; justify-items: start; min-width: 200px; }
.grad__sign img { width: 180px; height: 64px; object-fit: contain; object-position: left bottom; }
.grad__sign-line { display: block; width: 200px; height: 52px; border-bottom: 1.5px solid var(--text-3); }
.grad__sign b { margin-top: 4px; }
.grad__sign small { color: var(--text-3); font-size: var(--fs-xs); }
.grad__verify { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grad__verify > div { display: grid; gap: 2px; min-width: 0; }
.grad__verify small { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.grad__verify .mono { font-size: var(--fs-xs); overflow-wrap: anywhere; color: var(--text); }
.grad__qr { width: 96px; height: 96px; flex: none; }
.grad__note { font-size: .75rem; color: var(--text-3); line-height: 1.55; }
.grad--revoked { filter: grayscale(.6); }
.grad__void { position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-18deg); margin: 0; padding: 6px 28px; border: 6px solid #DC2626; border-radius: 16px; color: #DC2626; font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; letter-spacing: .12em; opacity: .55; pointer-events: none; }
@media print {
  .grad { max-width: none; box-shadow: none; border: 0; border-radius: 0; padding: 9mm 8mm; gap: 3.2mm; break-inside: avoid; font-size: 9.5pt; }
  .grad::after { inset: 0; border-radius: 0; border-color: #CBD5E1; }
  .grad, .grad * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grad__name { font-size: 26pt; }
  .grad__path { font-size: 19pt; background: none; color: #1F5FB8; -webkit-text-fill-color: #1F5FB8; } /* teks gradien kadang tercetak berbingkai */
  .grad__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3mm 4mm; }
  .grad__cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6mm; }
  .grad__mat { font-size: 8.5pt; margin-bottom: 2mm; }
  .grad__mat small { font-size: 7.5pt; }
  .grad__comp { font-size: 9pt; }
  .grad__qr { width: 26mm; height: 26mm; }
  .grad__note { font-size: 7.5pt; }
}

/* Tombol bahasa (ID | EN, common.js): di app bar (gelap) dan di kartu "Bahasa" halaman Akun (terang).
   Di HP app bar cukup satu tombol ke bahasa lain (aturan app.css); di kartu Akun kedua pilihan tetap tampil. */
.ma-bar .lang-sw { color: var(--on-ink-2); }
.acct-lang__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.acct-lang__row .muted { flex: 1 1 240px; margin: 0; }
@media (max-width: 559.98px) {
  .acct-lang .lang-sw { padding: 3px; }
  .acct-lang .lang-sw [aria-pressed="true"] { display: inline-flex; }
  .acct-lang .lang-sw button { min-width: 48px; min-height: 40px; }
}