/* ==========================================================================
   TUTOORIA — 05. AREA APLIKASI (setelah masuk)
   Dimuat hanya oleh halaman di folder app/, sesudah pages.css.
   Bingkai hitam (sidebar / bilah ponsel), konten putih. Semua nilai dari
   tokens.css — tidak ada hex atau px lepas kecuali ketebalan garis grafik.
   Kartu, panel, KPI, progres, tabel, tombol memakai komponen global di
   components.css; file ini hanya cangkang aplikasi dan tata letak isi
   yang khas dasbor.
   ========================================================================== */

/* =======================================================
   CANGKANG — sidebar kiri + konten kanan
   ======================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-block-size: 100dvh;
}

.app-sidebar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  block-size: 100dvh;
  padding: var(--space-l) var(--space-s) var(--space-s);
  overflow-y: auto;
  /* Token warna dibalik oleh .app-sidebar di base.css (permukaan hitam). */
  overscroll-behavior: contain;
}
.app-sidebar__logo { padding-inline: var(--space-xs); }
.app-sidebar__logo .logo__img { block-size: 1.75rem; }

/* --- Menu utama --- */
.app-nav__list {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-block-size: var(--control-h);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-m);
  color: color-mix(in oklab, var(--fg-invert) 74%, transparent);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.app-nav__link:hover {
  background: color-mix(in oklab, var(--fg-invert) 9%, transparent);
  color: var(--fg-invert);
  text-decoration: none;
}
/* Aktif = bidang ungu penuh, huruf hitam (9.5:1). */
.app-nav__link[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: var(--weight-semibold);
}
.app-nav__icon { display: grid; place-items: center; flex: none; }
.app-nav__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.app-nav__label--short { display: none; }
.app-nav__count {
  margin-inline-start: auto;
  min-inline-size: 1.5rem;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--fg-invert) 14%, transparent);
  color: var(--fg-invert);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.app-nav__link[aria-current="page"] .app-nav__count { background: var(--clr-black); color: var(--clr-white); }

/* --- Blok promosi paket — permukaan abu gelap, bukan ungu, supaya tidak
   berebut dengan butir menu aktif yang sudah ungu. --- */
.app-promo {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: auto;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: color-mix(in oklab, var(--fg-invert) 8%, transparent);
}
.app-promo__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); line-height: var(--leading-snug); }
.app-promo__body { font-size: var(--step--1); line-height: var(--leading-normal); color: var(--fg-muted); }
.app-promo .button { margin-block-start: var(--space-3xs); }

/* --- Pengguna di dasar sidebar --- */
.app-user {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-2xs) 0;
  border-block-start: var(--border-hair) solid var(--line);
}
.app-user .avatar { --avatar-size: 2.5rem; }
.app-user__text { min-inline-size: 0; flex: 1; line-height: var(--leading-snug); }
.app-user__name {
  overflow: hidden;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-user__plan { font-size: var(--step--2); color: var(--fg-muted); }
/* --- Konten --- */
.app-main {
  /* Di dalam aplikasi jarak tepinya --app-gutter. Disamakan ke --gutter
     supaya komponen yang membentang sampai tepi layar (baris tab katalog,
     .row--rail) memakai margin negatif yang tepat — dulu baris tab meluber
     7px di tablet karena memakai gutter situs. */
  --gutter: var(--app-gutter);
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2xl);
  padding: var(--space-xl) var(--app-gutter) var(--space-2xl);
}

/* =======================================================
   PONSEL & TABLET (< lg) — sidebar menjadi bilah atas hitam, menu
   menjadi bilah tab di dasar layar. Satu markup, tanpa JavaScript.
   Lima menu muat sebaris, jadi tidak perlu laci tersembunyi: setiap
   tujuan tetap satu ketukan.
   ======================================================= */
@media (max-width: 63.99rem) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .app-sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    block-size: var(--appbar-h);
    padding: 0 var(--app-gutter);
    overflow: visible;
  }
  .app-sidebar__logo { padding: 0; }
  .app-sidebar__logo .logo__img { block-size: 1.5rem; }
  .app-promo { display: none; }

  .app-user { margin-inline-start: auto; padding: 0; border: 0; }
  .app-user .avatar { --avatar-size: 2.25rem; }
  .app-user__text { display: none; }

  .app-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-header);
    padding-block-end: env(safe-area-inset-bottom);
    background: var(--bg-invert);
    border-block-start: var(--border-hair) solid var(--line);
  }
  .app-nav__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .app-nav__link {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3xs);
    min-block-size: var(--tabbar-h);
    padding: var(--space-2xs) var(--space-3xs);
    border-radius: 0;
    font-size: var(--step--2);
    letter-spacing: 0;
  }
  .app-nav__link:hover { background: none; }
  /* Pil ungu di belakang ikon — bidang, bukan garis. */
  .app-nav__icon {
    inline-size: 3.25rem;
    block-size: 1.875rem;
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .app-nav__link[aria-current="page"] { background: none; color: var(--fg-invert); }
  .app-nav__link[aria-current="page"] .app-nav__icon { background: var(--accent); color: var(--accent-fg); }
  .app-nav__label--full { display: none; }
  .app-nav__label--short { display: block; }
  .app-nav__count {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: calc(50% + 0.6rem);
    min-inline-size: 1.1rem;
    margin: 0;
    padding: 0 0.3em;
    background: var(--clr-white);
    color: var(--clr-black);
    font-size: 0.625rem;
    line-height: 1.1rem;
  }

  .app-main {
    padding-block: var(--space-l) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-xl));
    gap: var(--space-xl);
  }
}

/* =======================================================
   KEPALA HALAMAN & SEKSI
   ======================================================= */
.app-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
}
.app-head__sub {
  margin-block-start: var(--space-2xs);
  max-inline-size: 60ch;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
}
.app-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

/* Kolom dikunci minmax(0, 1fr): kolom implisit `auto` ikut melebar sampai
   selebar isi yang tidak membungkus (baris tab ±650px), mendorong halaman
   meluber di ponsel — dan bilah tab bawah yang fixed ikut melebar. */
.app-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); min-inline-size: 0; }
.app-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
}
.app-section__title { font-size: var(--text-h3); }
.app-section__note { font-size: var(--step--1); color: var(--fg-muted); }

/* Kepala katalog di dalam aplikasi: strukturnya tetap .catalog-head yang sama
   dengan situs, hanya judulnya turun ke ukuran judul seksi karena <h1> halaman
   sudah dipegang .app-head. */
.app-main .catalog-head { margin-block-end: var(--space-m); }
.app-main .catalog-head__title { font-size: var(--text-h3); }

/* Panel dasbor = .card.card--compact dengan .card__head/__title/__sub.
   Grid dasbor = .row: panel selebar penuh sampai xl, lalu .col-xl-*. */

/* =======================================================
   KARTU "SEDANG BERJALAN" — .card.card--compact (hitam: + .surface-invert)
   di dalam .row.row--auto.
   ======================================================= */
.now-card__meta { font-size: var(--step--1); line-height: var(--leading-normal); }
.now-card__who { display: flex; align-items: center; gap: var(--space-xs); }
.now-card__body { display: grid; gap: var(--space-2xs); margin-block-start: auto; }
.now-card .button { margin-block-start: var(--space-2xs); }
/* Hitung mundur: angka besar dalam huruf sans, bukan display. */
.now-card__count {
  font-size: var(--step-4);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.now-card__count small {
  margin-inline-start: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
}

/* =======================================================
   KPI — .card.card--compact.kpi di .row.row-cols-2.row-cols-lg-4
   label · angka · perubahan. Angka memakai Hanken Grotesk (sans), angka
   proporsional: angka besar dengan tabular-nums terlihat renggang.
   ======================================================= */
.kpi { gap: var(--space-2xs); }
.kpi__label { font-size: var(--step--1); font-weight: var(--weight-medium); }
.kpi__value {
  font-size: var(--step-4);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.kpi__unit {
  margin-inline-start: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  color: var(--fg-muted);
}
.kpi__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  font-size: var(--step--2);
  color: var(--fg-muted);
}
/* Arah perubahan = .badge.badge--plain: naik bidang ungu (--accent),
   turun bidang abu (--gray). Dibawa ikon + tanda +/−, bukan warna saja. */

/* =======================================================
   GRAFIK — digambar main.js dari <table> di dalamnya.
   Tabel adalah sumber data sekaligus padanan aksesibel: tanpa JS ia tampil
   apa adanya; setelah grafik terpasang ia disembunyikan secara visual tapi
   tetap dibaca pembaca layar.
   ======================================================= */
.chart { position: relative; }
.chart__plot {
  position: relative;
  block-size: var(--chart-h);
  touch-action: pan-y;
}
.chart__plot svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.chart__plot:focus-visible { outline-offset: var(--space-2xs); }

.chart__grid   { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart__base   { stroke: var(--clr-gray-300); stroke-width: 1; shape-rendering: crispEdges; }
.chart__tick   { fill: var(--fg-muted); font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart__line   { fill: none; stroke: var(--chart-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area   { fill: var(--chart-wash); opacity: 0.7; }
/* Garis target memang ambang, jadi putus-putus — satu-satunya garis putus. */
.chart__target { stroke: var(--chart-ink); stroke-width: 1; stroke-dasharray: 4 4; }
.chart__target-label { fill: var(--fg); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.chart__dot    { fill: var(--chart-ink); stroke: var(--bg); stroke-width: 2; }
.chart__dot--end { r: 5; }
.chart__value  { fill: var(--fg); font-family: var(--font-sans); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart__cross  { stroke: var(--chart-ink); stroke-width: 1; opacity: 0.35; shape-rendering: crispEdges; }
.chart__bar    { fill: var(--chart-ink); transition: opacity var(--dur-fast) var(--ease-out); }
.chart__bar--hl { fill: var(--accent); }
.chart__hit    { fill: transparent; cursor: default; }
.chart__plot[data-hover] .chart__bar:not([data-active]) { opacity: 0.45; }

.chart__tip {
  position: absolute;
  z-index: var(--z-sticky);
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  gap: 0.1rem;
  min-inline-size: 7rem;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-m);
  background: var(--clr-black);
  color: var(--clr-white);
  box-shadow: var(--shadow-m);
  pointer-events: none;
  white-space: nowrap;
}
.chart__tip-value { font-size: var(--step-0); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.chart__tip-label { font-size: var(--step--2); color: color-mix(in oklab, var(--clr-white) 70%, transparent); }

/* Tanpa JS: tabel tampil sebagai tabel ringkas. */
.chart__table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
.chart__table caption { text-align: start; font-size: var(--step--2); color: var(--fg-muted); padding-block-end: var(--space-2xs); }
.chart__table :is(th, td) { padding: var(--space-3xs) 0; border-block-end: var(--border-hair) solid var(--line); text-align: start; font-weight: var(--weight-body); }
.chart__table td { text-align: end; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.chart[data-ready] .chart__table {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chart__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  font-size: var(--step--2);
  color: var(--fg-muted);
}
.chart__key { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.chart__key::before { content: ""; inline-size: 1rem; block-size: 2px; background: var(--chart-ink); }
.chart__key--target::before { background: repeating-linear-gradient(90deg, var(--chart-ink) 0 4px, transparent 4px 8px); block-size: 1px; }
.chart__key--hl::before { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 2px; background: var(--accent); }

/* =======================================================
   METER PER SUBTES — batang = .progress.progress--lg.progress--target
   (HTML murni, tanpa JS). Isian hitam 10px, garis tegak = target.
   ======================================================= */
.meters { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-s);
  align-items: baseline;
}
.meter__label { font-size: var(--step--1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.meter__value { font-size: var(--step--1); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.meter .progress { grid-column: 1 / -1; }
.meter .badge { padding-block: 0.2em; }

/* =======================================================
   HEATMAP AKTIVITAS — minggu = kolom, hari = baris.
   ======================================================= */
.heat { display: grid; gap: var(--space-2xs); }
.heat__scroll { overflow-x: auto; scrollbar-width: thin; }
.heat__grid {
  --cell: minmax(0.75rem, 1fr);
  display: grid;
  grid-template-columns: 1.75rem repeat(var(--weeks, 16), var(--cell));
  grid-template-rows: auto repeat(7, auto);
  gap: 3px;
  min-inline-size: 22rem;
}
.heat__month, .heat__day {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1;
  white-space: nowrap;
}
.heat__month { padding-block-end: var(--space-3xs); }
.heat__day { align-self: center; }
.heat__cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--heat-0);
  transition: outline-color var(--dur-fast) var(--ease-out);
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.heat__cell[data-level="1"] { background: var(--heat-1); }
.heat__cell[data-level="2"] { background: var(--heat-2); }
.heat__cell[data-level="3"] { background: var(--heat-3); }
.heat__cell[data-level="4"] { background: var(--heat-4); }
.heat__cell[data-future] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.heat__cell:hover, .heat__cell[data-active] { outline-color: var(--clr-black); }
.heat__legend { display: inline-flex; align-items: center; gap: 3px; }
.heat__legend .heat__cell { inline-size: 0.75rem; }
.heat__legend span:first-child { margin-inline-end: var(--space-3xs); }
.heat__legend span:last-child { margin-inline-start: var(--space-3xs); }

/* =======================================================
   AGENDA
   ======================================================= */
.agenda { display: grid; margin: 0; padding: 0; list-style: none; }
.agenda__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-block-end: var(--border-hair) solid var(--line);
}
.agenda__item:first-child { padding-block-start: 0; }
.agenda__item:last-child { border-block-end: 0; padding-block-end: 0; }
.agenda__date {
  display: grid;
  place-items: center;
  align-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
  line-height: 1;
}
.agenda__date[data-is-today] { background: var(--accent); }
.agenda__day { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); }
.agenda__mon { margin-block-start: 0.15rem; font-size: 0.625rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.agenda__title { font-size: var(--step--1); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.agenda__meta { font-size: var(--step--2); color: var(--fg-muted); }
@media (max-width: 29.99rem) {
  .agenda__item { grid-template-columns: auto minmax(0, 1fr); }
  .agenda__item > .link-arrow { grid-column: 2; justify-self: start; }
}

/* =======================================================
   KELAS AKTIF — .card.card--compact.course di .row.row--auto-l
   Baris foto + progres.
   ======================================================= */
.course {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-m) var(--space-s);
}
.course__photo {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  object-fit: cover;
  object-position: center top;
  background: var(--clr-gray-100);
}
.course__text { display: grid; gap: var(--space-3xs); align-content: start; min-inline-size: 0; }
.course__tutor { font-size: var(--step--1); }
.course__next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-2xs);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
}
.course__next .icon { --icon-size: 1rem; }
/* Progres & tombol memakai lebar penuh kartu — di kolom teks saja
   dua tombol tidak muat sebaris pada grid tiga kolom. */
.course__foot { grid-column: 1 / -1; display: grid; gap: var(--space-2xs); align-content: end; }
.course__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-2xs); }
.course__actions .button { flex: 1; }

/* Tabel riwayat try out = .table.table--flush di dalam .card (lihat
   components.css). */

/* =======================================================
   COPILOT AI
   ======================================================= */
.app-main--chat {
  block-size: 100dvh;
  padding-block: var(--space-m) 0;
  gap: 0;
  grid-template-rows: minmax(0, 1fr);
}
@media (max-width: 63.99rem) {
  .app-main--chat {
    block-size: calc(100dvh - var(--appbar-h));
    padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
}

.copilot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  min-block-size: 0;
}
@media (min-width: 80rem) {
  .copilot { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* --- Riwayat percakapan (hanya layar lebar) --- */
.copilot__side {
  display: none;
  flex-direction: column;
  gap: var(--space-m);
  min-block-size: 0;
  padding-block-end: var(--space-m);
  overflow-y: auto;
}
@media (min-width: 80rem) { .copilot__side { display: flex; } }
/* Judul kelompok = .overline; riwayat = .menu-list berisi
   .menu-item.menu-item--truncate. */
.copilot__group-title { margin-block-end: var(--space-2xs); }
.copilot__history-item { font-weight: var(--weight-body); }

/* --- Kolom obrolan --- */
.copilot__chat {
  display: grid;
  /* Kolom dikunci minmax(0, 1fr): tanpa itu blok rumus (white-space: pre)
     melebarkan seluruh kolom dan penyusun pesan meluber keluar layar ponsel. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-block-size: 0;
}
.copilot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-end: var(--space-s);
  border-block-end: var(--border-hair) solid var(--line);
}
.copilot__title { font-size: var(--text-h3); display: flex; align-items: center; gap: var(--space-xs); }
.copilot__tools { display: flex; align-items: center; gap: var(--space-2xs); }
.copilot__subject { inline-size: 12.5rem; }
@media (max-width: 29.99rem) { .copilot__subject { inline-size: 10rem; } }

.copilot__scroll {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding-block: var(--space-l);
}
.copilot__inner { inline-size: min(100%, 46rem); margin-inline: auto; }

/* Keadaan awal */
.copilot__intro { display: grid; gap: var(--space-m); justify-items: start; padding-block: var(--space-xl) var(--space-m); }
/* Tanda Copilot = .emblem.emblem--lg; salam = judul halaman. */
.copilot__hello { font-size: var(--text-h1); }
.copilot__lede { max-inline-size: 52ch; font-size: var(--step-0); line-height: var(--leading-normal); }
/* Pemantik obrolan = .option-card di .row.row--auto. */
.starters { inline-size: 100%; margin-block-start: var(--space-s); }

/* Utas pesan */
.thread { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
.msg { display: grid; gap: var(--space-2xs); animation: msg-in var(--dur-base) var(--ease-out); }
@keyframes msg-in { from { opacity: 0; translate: 0 0.5rem; } }
/* Pesan pengguna: bidang hitam di kanan. Jawaban AI: tanpa gelembung,
   teks penuh lebar — lebih mudah dibaca untuk penjelasan panjang. */
.msg--user { justify-items: end; }
.msg--user .msg__bubble {
  max-inline-size: min(85%, 34rem);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-l) var(--radius-l) var(--radius-xs) var(--radius-l);
  background: var(--clr-black);
  color: var(--clr-white);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--ai { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-s); align-items: start; }
/* Tanda AI di kiri jawaban = .emblem. */
.msg__body { display: grid; gap: var(--space-s); padding-block-start: 0.2rem; font-size: var(--step--1); line-height: var(--leading-prose); }
.msg__body > * { margin: 0; animation: msg-in var(--dur-base) var(--ease-out); }
.msg__body ol, .msg__body ul { display: grid; gap: var(--space-2xs); padding-inline-start: 1.25rem; }
.msg__body li::marker { font-weight: var(--weight-semibold); }
.msg__formula {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  overflow-x: auto;
  white-space: pre;
}
.msg__tip {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  border-inline-start: 4px solid var(--clr-black);
}
.msg__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
/* Aksi pesan (salin, latihan lagi) = .button.button--outline.button--small. */

/* Soal latihan interaktif di dalam jawaban — .card.card--compact.quiz;
   pilihannya .option-card.option-card--row dengan huruf .emblem. */
.quiz { gap: var(--space-xs); }
.quiz__q { font-weight: var(--weight-semibold); }
.quiz__feedback { font-size: var(--step--1); }
.quiz__feedback:empty { display: none; }

/* Indikator mengetik */
.typing { display: inline-flex; gap: 4px; padding-block: 0.6rem; }
.typing span {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--clr-black);
  animation: typing 1s var(--ease-inout) infinite;
}
.typing span:nth-child(2) { animation-delay: 150ms; }
.typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.25; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }

/* --- Penyusun pesan --- */
.composer {
  inline-size: min(100%, 46rem);
  margin-inline: auto;
  padding-block: var(--space-s) var(--space-m);
  background: var(--bg);
}
/* Satu baris yang bisa digeser di layar sempit — empat chip yang turun ke
   dua baris memakan ruang obrolan. fieldset direset dari bingkai bawaannya. */
.composer__modes {
  flex-wrap: nowrap;
  min-inline-size: 0;
  margin: 0 0 var(--space-xs);
  padding: 0;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer__modes::-webkit-scrollbar { display: none; }
.composer__modes .chip--small { min-block-size: 2rem; }
.composer__box {
  display: flex;
  align-items: end;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  padding-inline-start: var(--space-s);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-raised);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.composer__box:focus-within { border-color: var(--clr-black); box-shadow: 0 0 0 3px var(--accent); }
.composer__input {
  flex: 1;
  min-inline-size: 0;
  max-block-size: 12rem;
  padding-block: 0.7rem;
  border: 0;
  background: none;
  resize: none;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  field-sizing: content;
}
.composer__input:focus { outline: none; }
.composer__input::placeholder { color: var(--fg-subtle); }
/* Tombol kirim = .icon-button.icon-button--primary.icon-button--small. */
.composer__note { margin-block-start: var(--space-2xs); font-size: var(--step--2); color: var(--fg-muted); text-align: center; }
@media (pointer: coarse) { .composer__keys { display: none; } }
html:not(.js) .composer__box,
html:not(.js) .composer__modes { display: none; }

/* =======================================================
   HALAMAN BELAJAR (app/belajar.html)
   Tampilan fokus: bilah atas (kembali · judul kelas · status paket),
   lalu .row — materi terbuka .col-lg-8, daftar materi .col-lg-4.
   Mulai lg daftar materi menempel dan menggulir sendiri, jadi video
   tetap di tempat saat murid menelusuri bab.
   ======================================================= */
.learn-page { display: flex; flex-direction: column; min-block-size: 100dvh; }

.learn-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-block-end: var(--border-hair) solid var(--line);
}
/* Judul di tengah; kolom sampingnya sama lebar supaya benar-benar di
   tengah. Kolom tengah boleh menyusut (elipsis) bila judulnya panjang. */
.learn-bar__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: var(--space-s);
  min-block-size: var(--appbar-h);
  padding-inline: var(--app-gutter);
}
.learn-bar__back { justify-self: start; padding-inline-start: 0.7em; }
.learn-bar__heading { min-inline-size: 0; text-align: center; }
.learn-bar__title {
  overflow: hidden;
  font-size: var(--text-h4);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-bar__sub { font-size: var(--step--2); color: var(--fg-muted); }
.learn-bar__plan { justify-self: end; }
@media (max-width: 47.99rem) {
  .learn-bar__inner { grid-template-columns: auto minmax(0, 1fr); }
  .learn-bar__heading { text-align: start; }
  .learn-bar__plan { display: none; }
}

.learn {
  --gutter: var(--app-gutter);
  flex: 1;
  padding: var(--space-l) var(--app-gutter) var(--space-2xl);
}
.learn__grid { --row-gap: var(--space-l); }
.js .learn__nojs { display: none; }
html:not(.js) .learn-side { display: none; }

/* --- Daftar materi (kanan) --- */
.learn-side { gap: 0; }
.learn-side__head {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-m);
  border-block-end: var(--border-hair) solid var(--line);
}
.learn-side__body {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  min-block-size: 0;
  padding: var(--space-s);
}
.learn-side__empty { padding: var(--space-l) var(--space-s); font-size: var(--step--1); color: var(--fg-muted); text-align: center; }
/* Materi yang sedang dibuka: bidang ungu muda, huruf hitam — lebih jelas
   daripada abu tipis .menu-item, karena daftarnya panjang. */
.learn-side .menu-item[aria-current="true"] { background: var(--accent-mid); }
@media (min-width: 64rem) {
  .learn-side {
    position: sticky;
    inset-block-start: calc(var(--appbar-h) + var(--space-l));
    max-block-size: calc(100dvh - var(--appbar-h) - var(--space-l) * 2);
  }
  .learn-side__body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* --- Materi terbuka (kiri) --- */
.lesson-view { display: grid; gap: var(--space-m); }
.lesson-view__head { display: grid; gap: var(--space-2xs); }
.lesson-view__title:focus { outline: none; }
.lesson-view__meta { --cluster-gap: var(--space-2xs); }

/* Video = bidang hitam 16:9; bacaan & latihan = bidang abu cekung. */
.lesson-view__media {
  --focus-color: var(--clr-purple);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-s);
  aspect-ratio: 16 / 9;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--clr-black);
  color: var(--clr-white);
}
.lesson-view__media:not([data-type="v"]) {
  --focus-color: var(--clr-black);
  aspect-ratio: auto;
  min-block-size: 16rem;
  background: var(--bg-sunken);
  border: var(--border-hair) solid var(--line);
  color: var(--fg);
}
.lesson-view__play {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lesson-view__play:hover { transform: scale(1.06); }
.lesson-view__play .icon { --icon-size: 1.75rem; }
/* Segitiga putar diisi penuh dan digeser sedikit — pusat optisnya ada di
   kiri titik tengah kotak. */
[data-type="v"] > .lesson-view__play .icon { fill: currentColor; translate: 0.12rem 0; }
.lesson-view__media:not([data-type="v"]) .lesson-view__play { background: var(--clr-black); color: var(--clr-white); }
.lesson-view__caption { font-size: var(--step--1); font-weight: var(--weight-medium); }
.lesson-view__note { font-size: var(--step--1); color: var(--fg-muted); }
.lesson-view__note:empty { display: none; }
.lesson-view__desc { max-inline-size: var(--measure); }

.lesson-view__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding-block-start: var(--space-m);
  border-block-start: var(--border-hair) solid var(--line);
}
.lesson-view__actions-end { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
@media (max-width: 29.99rem) {
  .lesson-view__actions > *,
  .lesson-view__actions-end > * { flex: 1 1 100%; }
  .lesson-view__actions-end { flex: 1 1 100%; }
}

/* --- Materi terkunci — .card.surface-invert --- */
.paywall { gap: var(--space-m); padding: var(--space-xl); }
@media (max-width: 47.99rem) { .paywall { padding: var(--space-l); } }
.paywall__title:focus { outline: none; }
.paywall__lead { max-inline-size: 52ch; }
/* Dua kelas: reset ul[role="list"] { padding: 0 } di base.css lebih
   spesifik daripada satu kelas dan menghapus padding-block ini. */
.paywall > .paywall__features {
  --row-gap: var(--space-m);
  padding-block: var(--space-m);
  border-block: var(--border-hair) solid var(--line);
}
.paywall__feature { display: flex; align-items: start; gap: var(--space-s); }
.paywall__feature-title { font-size: var(--step--1); font-weight: var(--weight-semibold); }
.paywall__feature-body { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--leading-normal); }
.paywall__actions { margin-block-start: var(--space-2xs); }
/* Judul materi & ajakan berlangganan bisa panjang ("Proses isobarik,
   isokhorik, isotermal, adiabatik") — satu jenjang di bawah judul seksi. */
.lesson-view__title,
.paywall__title { font-size: var(--text-h3); }