/* ==========================================================================
   TUTOORIA — 04. SEKSI & HALAMAN
   Komposisi halaman. Kolom SELALU memakai .row / .col-* (base.css) dan
   tampilan SELALU memakai komponen global (components.css). File ini hanya
   berisi hal yang benar-benar khas satu seksi: jarak, perataan, dan
   ukuran tetap yang tidak berlaku di tempat lain.
   ========================================================================== */

/* =======================================================
   HERO (beranda)
   Judul, .lead, dan tombol di .col-lg-7; foto tutor di .col-lg-5 kanan
   (di bawah lg turun ke bawah teks).
   ======================================================= */
.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: clip;
}
.hero__grid { --row-gap: var(--space-xl); }
.hero__title { margin-block: 0; }
.hero__actions { margin-block-start: var(--space-l); --cluster-gap: var(--space-s); }

/* Foto terpotong di pinggang, jadi ia "berdiri" di garis .hero__stats:
   margin bawah negatif sebesar margin atas .hero__stats menghapus celahnya.
   Latar foto putih pekat (#fdfdfc): brightness 1.02 mendorongnya ke #fff
   agar tidak tampak bingkai samar di atas --bg; pada wajah tak terlihat. */
.hero__media {
  align-self: end;
  margin-block-end: calc(var(--space-2xl) * -1);
}
.hero__media img {
  display: block;
  inline-size: 100%;
  max-inline-size: 36rem;
  block-size: auto;
  margin-inline: auto;
  filter: brightness(1.02);
}
/* Desktop: foto mengisi penuh kolom kanan, rata ke tepi kanan konten
   (sejajar tombol "Coba Gratis"). Mulai 2xl ruang kosong di samping judul
   cukup lebar, jadi foto dibesarkan lagi dan melebar ke kiri. Kolom teks
   dilapis di atas foto — kalau keduanya bersinggungan, huruf tetap utuh. */
@media (min-width: 64rem) {
  .hero__grid > :first-child { position: relative; z-index: var(--z-base); }
  .hero__media img {
    max-inline-size: none;
    margin-inline: auto 0;
  }
}
@media (min-width: 90rem) {
  .hero__media img {
    inline-size: 125%;
    margin-inline-start: -25%;
  }
}

/* Ponsel: tombol aksi hero dan pita CTA selebar kolom — sasaran jempol
   lebih besar, dan dua tombol yang ditumpuk sama lebar. */
@media (max-width: 29.99rem) {
  .hero__actions > .button,
  .cta__actions > .button { flex: 1 1 100%; }
}

/* Baris statistik di bawah hero: .row.row-cols-2.row-cols-lg-4 — empat
   angka jatuh 2 × 2 atau 4 × 1, tidak pernah 3 + 1. Empat kolom baru mulai
   lg: di tablet 768px tiap kolom hanya ±150px. */
.hero__stats {
  --row-gap: var(--space-l);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-l);
  border-block-start: var(--border-hair) solid var(--line);
}

/* =======================================================
   HEADER HALAMAN (halaman dalam)
   Judulnya <h1> biasa (--text-h1); paragraf pembukanya .lead.
   ======================================================= */
/* Pembuka halaman memakai .section.section--tight + .section-head--page
   (components.css), sama seperti kepala seksi — dulu .page-header punya
   padding dan garisnya sendiri. */

/* Kepala seksi & kepala halaman memakai .section-head bersama
   (components.css). */

/* =======================================================
   FAQ — .row: kepala seksi .col-xl-5, akordeon .col-xl-6.offset-xl-6
   (kolom ke-6 kosong = jarak lebar di antara keduanya).
   Mulai xl kepala seksi menempel (sticky) di kolom kiri. Tanpa ini, di
   layar lebar tiap baris pertanyaan membentang ±1.800px dengan ikon "+"
   terpisah jauh dari teksnya.
   ======================================================= */
.faq { --row-gap: 0; align-items: start; }
@media (min-width: 80rem) {
  .faq > .section-head {
    margin-block-end: 0;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
  /* Kolomnya sempit — judul & keterangan ditumpuk, bukan bersebelahan. */
  .faq > .section-head > * { grid-column: 1 / -1; }
}

/* =======================================================
   KARTU PRODUK (beranda) — .card.card--flush.card--sunken
   Tata letak dalamnya pola "sidebar" (flex-wrap), BUKAN media query.
   Yang menentukan adalah lebar KARTU: gambar tetap di samping selama teks
   kebagian ≥ 55% (kartu ≥ ±36rem); kalau tidak, gambar turun ke bawah.
   Dulu ambangnya lebar viewport, dan di 832–1150px judul terpotong per
   suku kata ("Rangk-uman").
   ======================================================= */
.product {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  container: product / inline-size;
}
.product__title { font-size: var(--text-h3); max-inline-size: 20ch; }
.product__body { max-inline-size: var(--measure); }
.product__text {
  flex: 999 1 0;
  min-inline-size: 55%;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-xl);
}
@container product (max-width: 30rem) {
  .product__text { padding: var(--space-l); }
}
/* Tautan didorong ke dasar supaya berbaris rapi antar kartu. */
.product .link-arrow { margin-block-start: auto; align-self: start; }

/* Tempat gambar — dibiarkan kosong, tinggal diisi <img> nanti. Ambang
   container query = titik lipat flex-wrap di atas (16rem ÷ 45% ≈ 35.6rem). */
.product__media {
  flex: 1 1 16rem;
  background: var(--clr-gray-200);
}
@container product (max-width: 35.6rem) {
  .product__media { aspect-ratio: 16 / 9; }
}

/* =======================================================
   LANGKAH / CARA KERJA — nomor .emblem, isi tiga kolom mulai md.
   ======================================================= */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  gap: var(--space-s) var(--space-xl);
  align-items: start;
  padding-block: var(--space-xl);
  border-block-start: var(--border-hair) solid var(--line);
}
.step:last-child { border-block-end: var(--border-hair) solid var(--line); }
@media (min-width: 48rem) {
  .step { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.1fr); }
}
.step__num::before { content: "0" counter(step); }
.step__title { font-size: var(--text-h3); }
.step__body { color: var(--fg); }

/* =======================================================
   KEPALA HALAMAN KATALOG (judul + cari + tab)
   Kelas, Perpustakaan, Try Out — ketiganya harus identik.
   ======================================================= */
/* Jarak antar-baris dipegang gap, bukan margin tiap baris: dengan margin,
   baris terakhir menyumbang jarak bawah yang menumpuk di atas margin
   .catalog-head sendiri DAN gap .app-section — di Try Out, yang kepalanya
   tinggal satu baris, tumpukannya jadi 72px sebelum kartu pertama. */
.catalog-head {
  display: grid;
  /* Kolom dikunci minmax(0, 1fr): butir grid bawaannya tidak boleh menyusut
     di bawah lebar min-content isinya, dan kolom cari di dalamnya membuat
     baris judul meluber keluar layar di ponsel. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
}
/* min-inline-size: 0 supaya kolom cari boleh menyusut di layar sempit —
   tanpa itu lebar minimum bawaan <input> membuat baris judul meluber. */
.catalog-head__search { inline-size: min(100%, 22rem); min-inline-size: 0; }

/* Alat penyaring katalog memakai .section-head__tools bersama
   (components.css); di sini hanya lebar masing-masing kontrolnya. */
/* .catalog-head__tabs hanya boleh berisi .tabs. .tabs menggulir mendatar di
   layar sempit, dan apa pun yang ikut di dalamnya terdorong keluar layar —
   garis bawahnya juga dipasang di pembungkus ini supaya membentang penuh. */
.catalog-head__tabs { border-block-end: var(--border-hair) solid var(--line); }
/* Ponsel & tablet: baris tab dibentangkan sampai tepi layar. Tab pertama
   tetap sejajar gutter lewat padding. */
@media (max-width: 63.99rem) {
  .catalog-head__tabs { margin-inline: calc(var(--gutter) * -1); }
  .catalog-head__tabs .tabs {
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}
/* Penyaring berupa dropdown (kategori di Try Out). .select bawaannya
   selebar 100%, jadi lebarnya dibatasi di pembungkus — bukan di .select,
   karena modul combobox membungkus ulang elemennya saat JS hidup. */
.catalog-head__select { inline-size: min(100%, 15rem); }


/* =======================================================
   KARTU TRY OUT — .card.tryout-card
   Susunannya: kategori + status di kepala · judul · satu kalimat isi ·
   tiga ubin angka (.stat-tiles) · kaki berisi harga dan tombol daftar.

   Kartu ini TIDAK memakai .card--interactive. Varian itu menyembunyikan
   tombolnya di bawah tepi kartu dan menaikkannya saat hover, sambil
   meredupkan baris kaki — sementara di sini harga dan tombol justru harus
   terbaca bersamaan, dan tombolnya harus bisa ditekan tanpa hover.
   ======================================================= */
/* Nama kampus boleh panjang ("Institut Teknologi Bandung"). Kepala kartu
   dibuat tidak membungkus supaya badge status tetap di pojok kanan atas;
   yang patah ke baris kedua adalah nama kampusnya sendiri. */
.tryout-card .card__head { flex-wrap: nowrap; }
/* Emblem dan nama penyelenggara duduk di satu sumbu tengah, termasuk saat
   namanya patah dua baris. */
.tryout-card .card__kind { min-inline-size: 0; align-items: center; }
/* Penyelenggara adalah keterangan, bukan penanda utama: emblemnya dibuat
   abu redup supaya badge status dan harga yang memimpin kartu. */
.tryout-card .card__kind .emblem { background: var(--clr-gray-100); color: var(--fg-muted); }

/* Kaki kartu = progres persiapan + tombol. Bar mengambil satu baris penuh
   sendiri supaya panjangnya terbaca sebagai ukuran, bukan sebagai sisa
   ruang di samping tombol; keterangan dan tombol berbagi baris di
   bawahnya. Grid, bukan flex, supaya tombol tetap sejajar tengah terhadap
   keterangan berapa pun tinggi keterangannya. */
.tryout-card__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-s);
  row-gap: var(--space-2xs);
}
.tryout-card__foot .progress { grid-column: 1 / -1; }
/* Halaman publik (pengunjung belum masuk) masih memakai kaki berisi harga:
   satu blok harga + jumlah peserta di kolom kiri, tombol di kanan. */
.tryout-card__price { display: grid; gap: var(--space-3xs); min-inline-size: 0; }
.tryout-card__price .card__price { line-height: var(--leading-tight); }
/* Di kolom sempit (tiga kartu sebaris) label dan nilainya boleh patah ke
   dua baris, daripada saling menindih. */
.tryout-card__progress { flex-wrap: wrap; gap: var(--space-3xs) var(--space-s); }

/* Di bawah sm kaki kartu menumpuk: tombol selebar penuh lebih mudah
   ditekan daripada tombol sempit di samping keterangan progres. */
@media (max-width: 29.99rem) {
  .tryout-card__foot { grid-template-columns: minmax(0, 1fr); }
  .tryout-card__foot .button { inline-size: 100%; }
}

/* =======================================================
   JALUR BELAJAR (index.html, tepat di bawah hero)
   Pengantar di kiri, rel kartu di kanan, kendali di bawah rel. Enam kartu
   adalah enam pintu masuk produk — bukan katalog, jadi kartunya sengaja
   tidak memakai .tutor-card: dua bentuk kartu yang mirip di satu halaman
   akan terbaca sebagai satu jenis yang sama.

   Rel-nya memakai modul shelf() yang sama dengan rak Try Out dan Bimbingan;
   yang khas di sini hanya tata letak dan titik halamannya.
   ======================================================= */
.pathway { display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) {
  /* Kolom kiri dipatok, bukan pecahan: pengantarnya pendek dan tidak perlu
     ikut melebar di layar besar — yang lebih berguna melebar adalah relnya. */
  .pathway { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
}
.pathway__intro { display: grid; gap: var(--space-s); align-content: center; }
/* Satu jenjang di atas h2 bawaan: seksi ini pintu masuk produk, bukan judul
   seksi biasa, dan di sebelah kartu sebesar itu judul --text-h2 kalah besar. */
.pathway__intro h2 { font-size: var(--text-h1); }
.pathway__lede { color: var(--fg-muted); line-height: var(--leading-relaxed); max-inline-size: 34ch; }

.pathway__body { display: grid; gap: var(--space-m); min-inline-size: 0; }

/* Pola relnya sama dengan .shelf__track: kolom dihitung dari satu variabel,
   pecahan di belakang koma membuat kartu berikutnya mengintip. */
.pathway__rail {
  --pathway-cols: 1.15;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--pathway-cols) - 1) * var(--grid-col-gap)) / var(--pathway-cols));
  gap: var(--grid-col-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pathway__rail::-webkit-scrollbar { display: none; }
.pathway__rail > * { min-inline-size: 0; scroll-snap-align: start; }
@media (min-width: 30rem) { .pathway__rail { --pathway-cols: 1.8; } }
/* Tepat tiga kartu, tanpa kartu keempat yang mengintip (permintaan user
   24 Sep 2026). Yang memberi tahu bahwa masih ada kartu lain di sini bukan
   kartu terpotong, melainkan panah dan titik halaman di bawah rel. */
@media (min-width: 64rem) { .pathway__rail { --pathway-cols: 3; } }

/* --- Kartu jalur: gambar penuh, label putih mengambang di dasarnya --- */
.pathway-card {
  position: relative;
  display: block;
  /* Rasio dipatok sejak sekarang supaya tata letak tidak bergeser begitu
     gambar aslinya dipasang menggantikan bidang abu. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  overflow: clip;
  background: var(--bg-sunken);
  text-decoration: none;
}
/* Tanpa animasi hover: kartunya besar dan sudah jelas bisa diklik dari
   bentuknya, jadi kartu yang bergerak saat dilewati kursor hanya menambah
   gerak yang tidak membawa informasi. Garis fokus papan ketik tetap ada. */
.pathway-card:hover { text-decoration: none; }
/* Bidang gambar. Abu-abunya tetap ada sebagai cadangan kalau gambarnya
   gagal muat — kartu tanpa latar membuat label putihnya hilang. */
.pathway-card__media { position: absolute; inset: 0; background: var(--clr-gray-100); }
.pathway-card__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* Gambarnya potret 9:16 sedangkan kartunya 4:5 — cover memangkas sisi
     atas-bawah, bukan meregangkan orangnya. */
  object-fit: cover;
}
.pathway-card__label {
  position: absolute;
  inset-inline: var(--space-s);
  inset-block-end: var(--space-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
  color: var(--fg);
}
.pathway-card__text { display: grid; gap: var(--space-3xs); min-inline-size: 0; }
.pathway-card__title { font-size: var(--step-2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.pathway-card__note { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--leading-snug); }
.pathway-card__label > .icon { flex: none; }

/* --- Kendali: panah bundar mengapit titik halaman ---
   Berbeda dengan .shelf__nav yang dilepas di peranti sentuh, panah di sini
   TETAP ada di ponsel: ia duduk di barisnya sendiri di bawah rel, bukan
   mengambang menutupi kartu, dan sasaran ketuknya setinggi kontrol penuh.
   Titik halaman saja terlalu kecil untuk jadi satu-satunya cara maju. */
.pathway__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-s); }
.pathway__nav {
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  border: var(--border-hair) solid var(--line);
  box-shadow: var(--shadow-s);
}
.pathway__nav:hover { background: var(--bg-canvas-strong); }
.pathway__dots { display: flex; align-items: center; gap: var(--space-2xs); }
/* Titik halaman: yang aktif memanjang jadi kapsul ungu — ungu sebagai
   BIDANG, bukan garis atau teks, sesuai aturan pemakaian warnanya. */
.pathway__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: inline-size var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.pathway__dot[aria-current="true"] { inline-size: 1.75rem; background: var(--accent); }

/* =======================================================
   PITA CTA — bidang ungu penuh lebar, teks hitam
   (ungu hanya aman membawa teks hitam: 8.2:1)
   ======================================================= */
.cta {
  background: var(--bg-accent);
  color: var(--accent-fg);
  padding-block: var(--space-3xl);
  text-align: center;
  --fg-muted: color-mix(in oklab, var(--clr-black) 72%, transparent);
  --line: color-mix(in oklab, var(--clr-black) 22%, transparent);
  --line-strong: var(--clr-black);
}
.cta__title { font-size: var(--text-h1); margin-block: var(--space-m); }
.cta__sub {
  max-inline-size: 46ch;
  margin-inline: auto;
  color: var(--fg);
}
.cta__actions { margin-block-start: var(--space-xl); justify-content: center; }

/* =======================================================
   HALAMAN HARGA — .row.row-cols-1.row-cols-lg-3.plans
   ======================================================= */
.plans { align-items: stretch; }

/* Tablet: tiga paket tidak muat sebaris (±230px, harga display
   bertabrakan). Jadi tiap paket ditumpuk sebagai kartu mendatar: nama,
   harga, tombol di kiri; daftar fitur di kanan. Subgrid dimatikan karena
   barisnya tidak lagi dibandingkan lintas kartu. Lencana "Paling dipilih"
   masuk ke alur supaya tidak menimpa daftar fitur. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .plans { grid-template-rows: none; }
  .plan {
    display: grid;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-content: start;
  }
  .plan > .check-list { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .plan__flag { position: static; justify-self: start; }
}

/* =======================================================
   HALAMAN TENTANG & SEKOLAH — teks .col-lg-7, samping .col-lg-4.offset-lg-8
   ======================================================= */
.about-grid { --row-gap: var(--space-2xl); }

.timeline { display: grid; gap: 0; }
.timeline__item {
  display: grid;
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-l);
  border-block-start: var(--border-hair) solid var(--line);
}
@media (min-width: 48rem) {
  .timeline__item { grid-template-columns: 8rem minmax(0, 1fr); }
}
.timeline__item:last-child { border-block-end: var(--border-hair) solid var(--line); }
/* Tahun = .badge.badge--primary; di sini hanya perataannya. */
.timeline__year { align-self: start; justify-self: start; }
.timeline__title { font-size: var(--text-h4); margin-block-end: var(--space-3xs); }
.timeline__body { color: var(--fg); font-size: var(--step-0); line-height: var(--leading-relaxed); max-inline-size: var(--measure); }

.team__card { display: flex; flex-direction: column; gap: var(--space-s); }
.team__name { font-size: var(--text-h4); }
.team__role { font-size: var(--step--1); color: var(--fg-muted); }

/* =======================================================
   HALAMAN KONTAK — formulir .col-lg-7, info .col-lg-4.offset-lg-8
   ======================================================= */
.contact-grid { --row-gap: var(--space-2xl); align-items: start; }
/* Kolom isian selebar 1.400px di monitor besar sulit dipindai mata —
   formulir dibatasi, tetap rata kiri supaya tepinya sejajar judul. */
.contact-grid__form { max-inline-size: 48rem; }

.info-list { display: grid; gap: var(--space-l); }
.info-item { display: grid; gap: var(--space-3xs); padding-block-start: var(--space-s); border-block-start: var(--border-hair) solid var(--line); }
.info-item__value { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h3); }

/* =======================================================
   HALAMAN MASUK & DAFTAR
   ======================================================= */
.auth { padding-block: var(--space-3xl); }
.auth__card {
  inline-size: min(100%, 26rem);
  margin-inline: auto;
}
.auth__form { margin-block-start: var(--space-l); }

/* Logo Google dipakai dalam warna resminya — satu-satunya pengecualian dari
   palet tiga warna, karena ini merek pihak ketiga yang harus dikenali. */
.auth__google { margin-block-start: var(--space-xl); }
.auth__google-logo { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.auth__divider { margin-block-start: var(--space-m); }
.auth__link { font-size: var(--step--1); font-weight: var(--weight-medium); }
.auth__foot {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-l);
  border-block-start: var(--border-hair) solid var(--line);
  font-size: var(--step--1);
}

/* =======================================================
   HALAMAN LENGKAPI PROFIL — alur pendaftaran bertahap
   Tanpa header & footer situs. Satu kolom sempit, satu tombol aksi.
   Tanpa JavaScript keempat langkah tampil berurutan sebagai satu
   formulir panjang.
   ======================================================= */
.onboard-page { display: flex; flex-direction: column; }

.onboard-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--bg);
}
.onboard-bar__inner {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-m);
  min-block-size: var(--header-h);
}
/* Slot tombol kembali tetap memakan tempat walau tak terlihat, supaya bar
   langkah tidak melompat ke kiri saat berpindah dari langkah 1 ke 2. */
.onboard-bar__back[data-visible="false"] { visibility: hidden; }
.onboard-bar__count {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  white-space: nowrap;
}
html:not(.js) .onboard-bar :is(.onboard-bar__back, .steps-bar, .onboard-bar__count) { display: none; }

/* Layar sempit: tanpa logo. Slot tombol kembali ikut dilepas di langkah 1,
   karena ruang kosong di kiri bar lebih mengganggu daripada bar yang
   memendek saat tombolnya muncul. */
@media (max-width: 40rem) {
  .onboard-bar__logo { display: none; }
  .onboard-bar__inner { display: flex; gap: var(--space-s); }
  .onboard-bar .steps-bar { flex: 1; }
  .onboard-bar__back[data-visible="false"] { display: none; }
}

.onboard {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-block: var(--space-2xl) var(--space-l);
  padding-inline: var(--gutter);
}
.onboard__form,
.onboard__done { inline-size: min(100%, 30rem); }

/* Tanpa JS semua langkah bertumpuk — beri jarak antarlangkah. */
.onboard__step + .onboard__step { margin-block-start: var(--space-2xl); }
.js .onboard__step + .onboard__step { margin-block-start: 0; }

/* Tiap langkah adalah <h2>, tapi tampil sebagai judul halaman. */
.onboard__title { font-size: var(--text-h1); }
.onboard__title:focus { outline: none; }
.onboard__lede { font-size: var(--step-0); max-inline-size: 42ch; }
.onboard__fields { display: grid; gap: var(--space-l); margin-block-start: var(--space-xl); }
.onboard__actions { margin-block-start: var(--space-xl); }

/* Perpindahan langkah — geser pendek searah navigasi. */
.onboard__step[data-enter="forward"] { animation: step-in-forward var(--dur-slow) var(--ease-out); }
.onboard__step[data-enter="back"]    { animation: step-in-back var(--dur-slow) var(--ease-out); }
@keyframes step-in-forward { from { opacity: 0; translate: 1.5rem 0; } }
@keyframes step-in-back    { from { opacity: 0; translate: -1.5rem 0; } }

/* Layar selesai — tanda centang .emblem.emblem--xl */
.onboard__done { display: grid; gap: var(--space-m); animation: step-in-forward var(--dur-slow) var(--ease-out); }
.onboard__done:focus { outline: none; }
.onboard__summary { margin-block-start: var(--space-2xs); }
.onboard__done-actions { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-s); }

.onboard__account {
  margin-block-start: var(--space-2xl);
  font-size: var(--step--1);
  color: var(--fg-muted);
  text-align: center;
}
.onboard__account b { color: var(--fg); font-weight: var(--weight-semibold); }
.onboard__account a { margin-inline-start: var(--space-3xs); color: var(--fg); font-weight: var(--weight-semibold); }

/* =======================================================
   HALAMAN KOMPONEN (komponen.html) — referensi design system.
   Hanya bingkai peraga; semua yang dipamerkan adalah komponen asli.
   ======================================================= */
.ds-toc { margin-block-start: var(--space-l); }
.ds-title { margin-block-end: var(--space-s); }
.ds-note { max-inline-size: var(--measure); margin-block-end: var(--space-l); }
.ds-sub {
  margin-block: var(--space-xl) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.ds-caption { margin-block-start: var(--space-xs); font-size: var(--step--2); color: var(--fg-muted); max-inline-size: var(--measure); }
.ds-code { font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-muted); }

.ds-type { display: grid; border-block-start: var(--border-hair) solid var(--line); }
.ds-type__row {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  align-items: baseline;
  padding-block: var(--space-m);
  border-block-end: var(--border-hair) solid var(--line);
}
@media (min-width: 48rem) { .ds-type__row { grid-template-columns: 9rem minmax(0, 1fr); } }

.ds-swatch { display: grid; gap: var(--space-3xs); font-size: var(--step--2); }
.ds-swatch b { font-family: var(--font-mono); font-weight: var(--weight-medium); }
.ds-swatch span:last-child { color: var(--fg-muted); }
.ds-swatch__chip {
  block-size: 4rem;
  margin-block-end: var(--space-2xs);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-m);
  background: var(--c);
}

/* Sel peraga grid: bidang ungu muda supaya lebar kolom terlihat. */
.ds-grid > * {
  display: grid;
  place-items: center;
  min-block-size: 3.5rem;
  padding: var(--space-2xs);
  border-radius: var(--radius-s);
  background: var(--accent-mid);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  text-align: center;
}
.ds-popover { padding: var(--space-xs); }
.ds-boxed { max-inline-size: 28rem; margin-block-start: var(--space-m); }
.ds-divider { margin-block: var(--space-l); }


/* =======================================================
   KARTU PROGRAM BIMBINGAN — .card.program-card (bimbingan.html)
   Susunannya: jenis ujian + status di kepala · judul · satu kalimat isi ·
   tiga ubin angka (.stat-tiles) · kaki berisi harga dan tombol.

   Kakinya sengaja dibentuk sama persis dengan kaki kartu try out: grid dua
   kolom, harga di kiri, tombol di kanan, dan menumpuk di bawah sm. Aturannya
   ditulis terpisah — bukan ikut selektor .tryout-card__foot — karena kedua
   kartu bebas berubah sendiri-sendiri: kartu try out punya bar progres
   persiapan yang mengambil satu baris penuh, kartu program tidak.

   Seperti kartu try out, .card--interactive TIDAK dipakai: varian itu
   menyembunyikan tombol di bawah tepi kartu sampai hover, sementara harga
   bulanan dan tombolnya di sini harus terbaca bersamaan.
   ======================================================= */
/* Label jenis ujian adalah keterangan, bukan penanda utama: emblemnya abu
   redup seperti emblem penyelenggara di kartu try out, supaya badge status
   dan harga yang memimpin kartu. Berlaku untuk ketiga ikonnya (topi wisuda,
   piala, perisai) — kalau hanya sebagian yang diredupkan, barisnya terbaca
   seperti ada yang lebih penting dari yang lain. */
.program-card .card__kind .emblem,
.result-card .card__kind .emblem { background: var(--clr-gray-100); color: var(--fg-muted); }

.program-card__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-s);
  row-gap: var(--space-2xs);
}
/* Harga + satuannya satu blok: "Rp1,4jt" di atas, "per bulan · 6 sesi" di
   bawahnya sebagai keterangan redup. */
.program-card__price { display: grid; gap: var(--space-3xs); min-inline-size: 0; }
.program-card__price .card__price { line-height: var(--leading-tight); }

/* Di bawah sm kaki menumpuk dan tombol jadi selebar penuh — sasaran sentuh
   lebih besar daripada tombol sempit di samping harga. */
@media (max-width: 29.99rem) {
  .program-card__foot { grid-template-columns: minmax(0, 1fr); }
  .program-card__foot .button { inline-size: 100%; }
}


/* =======================================================
   KATALOG SELEBAR VIEWPORT — .katalog-wide (tutor.html)
   Katalog Kelas tidak dibatasi --container sama sekali: tepinya jadi
   sejajar dengan logo di bilah atas, yang juga fluid. Hanya seksi
   katalognya — footer dan seksi lain tetap memakai --container supaya
   tepinya sama dengan halaman lain. Kalau nilainya ditaruh di <body>,
   footer ikut melebar dan halaman Kelas jadi satu-satunya yang footernya
   berbeda.
   ======================================================= */
.katalog-wide { --container: none; }


/* =======================================================
   KEPALA KATEGORI — .topic-head (tryout.html, bimbingan.html)
   Judul halaman + satu paragraf + baris angka + kategori terkait, di atas
   bidang cekung. Dipakai hanya di dua katalog ini: Kelas dan Perpustakaan
   sengaja tetap langsung masuk ke daftarnya (lihat README).
   ======================================================= */
.topic-head__lede {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-s);
  color: var(--fg-muted);
}

/* Baris angka: label kecil di atas, nilai tebal di bawah, dipisah garis
   tipis. Flex + wrap, bukan grid berkolom tetap — jumlah angkanya boleh
   berbeda antar halaman dan di ponsel ia harus boleh patah dua baris. */
.topic-head__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-block-start: var(--space-l);
}
.topic-head__stats > div + div {
  padding-inline-start: var(--space-l);
  border-inline-start: var(--border-hair) solid var(--line);
}
.topic-head__stats dt { font-size: var(--step--2); color: var(--fg-muted); }
.topic-head__stats dd {
  margin: var(--space-3xs) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}

/* Kategori terkait: chip yang MENAUTKAN, bukan menyaring — bentuknya sama
   dengan chip penyaring supaya sasaran sentuhnya sama, tapi ia <a>. */
.topic-head__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-l);
}
.topic-head__related-label { font-size: var(--step--1); color: var(--fg-muted); margin-inline-end: var(--space-2xs); }

@media (max-width: 47.99rem) {
  /* Di ponsel garis pemisah antar-angka jatuh di tempat yang salah begitu
     barisnya patah; jarak saja sudah cukup memisahkan. */
  .topic-head__stats { gap: var(--space-m) var(--space-l); }
  .topic-head__stats > div + div { padding-inline-start: 0; border-inline-start: 0; }
}


/* =======================================================
   KISI KATALOG PADAT — .catalog-grid (tryout.html, bimbingan.html)
   Kartu di dua halaman ini membawa gambar, jadi tingginya bertambah.
   Supaya halaman tidak jadi kolom panjang yang renggang, kartunya
   dibuat lebih banyak sebaris (.row--auto-s = --col-min-s, 4 kolom di
   1152px) dan jarak
   antar-barisnya turun satu jenjang lewat --row-gap.
   Jarak antar-KOLOM sengaja tidak ditimpa: --grid-col-gap satu nilai untuk
   seluruh produk (tokens.css), dan kepadatan di sini sudah didapat dari
   jumlah kolom + padding kartu (.card--compact).
   ======================================================= */
.catalog-grid { --row-gap: var(--space-s); }


/* =======================================================
   KERAPATAN KARTU KATALOG — .program-card / .tryout-card
   (bimbingan.html, tryout.html, dan kedua halaman "semua")

   Semua aturan di sini SENGAJA diikat ke dua kelas kartu itu, bukan ke
   .card / .stat-tile / .card__price global: .stat-tile juga dipakai di
   app/tryout.html dan app/tryout-mulai.html, dan di sana ubinnya selebar
   kolom halaman — bukan selebar kartu — sehingga angka yang pas di kartu
   justru terlihat kempis di sana.

   Yang TIDAK disentuh: ukuran dan leading .overline/.card__kind. Tinggi
   terkunci .card__head (2.75rem) dihitung dari tiga baris .overline;
   mengubah hurufnya membuat angka itu berhenti cocok tanpa gejala yang
   terlihat seperti kesalahan.
   ======================================================= */
/* Jarak antar-bagian kartu turun satu jenjang (16 → 12px). Bagiannya ada
   enam (gambar · kepala · judul · isi · ubin · kaki), jadi satu jenjang
   saja sudah memangkas ±20px dari tinggi tiap kartu. */
:is(.program-card, .tryout-card) { gap: var(--space-xs); }
:is(.program-card, .tryout-card) .card__foot { padding-block-start: var(--space-xs); }

/* Ubin angka: yang dikecilkan BIDANGNYA, bukan hurufnya. Nilai di dalamnya
   (tanggal, jumlah soal) membawa informasi, dan 12px sudah jenjang terkecil
   yang boleh dipakai di sistem ini. */
:is(.program-card, .tryout-card) .stat-tile { padding-block: var(--space-2xs); }
:is(.program-card, .tryout-card) .stat-tile .icon { --icon-size: 0.875rem; }

/* Harga turun ke ukuran teks isi. Aturan lama "harga sederajat dengan judul
   kartu" dibuat waktu kartu masih berdiri sendiri; di dalam rak, harga
   yang sebesar judul membuat dua hal berteriak sekaligus di kartu selebar
   17rem. Bobot display-nya tetap, jadi ia masih terbaca sebagai angka
   utama kaki kartu. */
:is(.program-card, .tryout-card) .card__price { font-size: var(--step-0); }