/* ==========================================================================
   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 .display selebar penuh; sub-judul (.lead) dan tombol di .col-lg-8.
   ======================================================= */
.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); }

/* 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);
  --col-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.
   ======================================================= */
.page-header {
  padding-block: var(--space-2xl) var(--space-xl);
  border-block-end: var(--border-hair) solid var(--line);
}
.page-header .lead { margin-block-start: var(--space-m); }

/* =======================================================
   KEPALA SEKSI — .row: judul (.col-md-6) + keterangan
   (.col-md-5.offset-md-7), rata bawah. Satu kolom kosong di antaranya
   menjadi jarak lega; tanpa kelas kolom, keduanya menumpuk.
   ======================================================= */
.section-head {
  --row-gap: var(--space-m);
  align-items: end;
  margin-block-end: var(--space-2xl);
}
.section-head__body { color: var(--fg); max-inline-size: 46ch; }

/* =======================================================
   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.
   ======================================================= */
.catalog-head { margin-block-end: var(--space-xl); }
.catalog-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-block-end: var(--space-m);
}
.catalog-head__search { inline-size: min(100%, 22rem); }
/* .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);
  }
}
/* Baris penyaring kedua (chip jenis materi di Perpustakaan). */
.catalog-head__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-block-start: var(--space-m);
}

/* =======================================================
   PITA CTA — bidang ungu penuh lebar, teks hitam
   (ungu hanya aman membawa teks hitam: 9.5: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; }
/* Di atas pita ungu, garis ungu pada hover .button--primary ikut hilang.
   Ganti jadi putih supaya umpan baliknya tetap terlihat. */
.cta .button--primary:hover { --_border: var(--clr-white); }

/* =======================================================
   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--accent; 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--1); 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); }