/* ===========================================================================
   TAMPILAN SITUS tokugo.my.id
   ---------------------------------------------------------------------------
   Dua wajah, sama seperti aplikasinya:
     MALAM  = tema gelap "Yoru"  (gradien indigo dari ikon, tombol aksi koral)
     WASHI  = tema terang "Washi" (kertas krem, aksen kesemek)
   Nilai warnanya diambil dari core/designsystem/Color.kt dan
   docs/play-listing/template/tema.css, supaya situs, halaman Play Store, dan
   aplikasinya terbaca sebagai satu benda.

   Tidak ada berkas dari luar: font dan gambar di-host di sini sendiri, jadi
   halaman ini tidak mengirim apa pun ke pihak ketiga.
   =========================================================================== */

@font-face {
  font-family: 'Source Sans 3';
  src: url('font/sourcesans3-latin.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2026, U+2039-203A, U+2190-2193;
}
/* Huruf Vietnam dan Kiril (Mongolia). Karena unicode-range, peramban hanya mengunduh
   berkas ini di halaman yang memang memakai huruf-huruf itu. */
@font-face {
  font-family: 'Source Sans 3';
  src: url('font/sourcesans3-luas.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+0400-04FF, U+1E00-1EFF, U+20AB;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  src: url('font/zenkaku-kanji.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

:root {
  --malam-atas: #25214A;
  --malam-bawah: #0C0B16;
  --cahaya: rgba(139, 130, 246, 0.30);
  --putih-lembut: rgba(255, 255, 255, 0.74);
  --indigo: #B3ABF6;
  --koral: #F07553;
  --di-koral: #1A0A05;
  --bezel: #07060D;

  --washi: #EAE3D3;
  --kertas: #F4EFE3;
  --kertas-dalam: #E4DDCD;
  --garis: #D3C9B5;
  --tinta: #1F1D19;
  --tinta-lembut: #5B544A;
  --kesemek: #A8402A;
  --kesemek-lembut: #F7D5C6;
  --nila: #395673;
  --nila-lembut: #C9DCEE;

  --lebar: 1120px;
  --tepi: 20px;

  /* Tinggi baris dan ukuran judul. Diubah per aksara di bagian TIPOGRAFI PER AKSARA. */
  --b-isi: 1.55;
  --b-h1: 1.07;
  --b-h2: 1.15;
  --b-h3: 1.25;
  --b-kecil: 1.3;
  --u-h1: clamp(2.1rem, 8vw, 3.6rem);
  --ls: 1;          /* pengali jarak huruf judul; 0 untuk aksara yang tidak boleh dirapatkan */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; }

body {
  margin: 0;
  background: var(--washi);
  color: var(--tinta);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  font-size: 17px;
  line-height: var(--b-isi);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }

[lang="ja"] {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Sans',
    'Yu Gothic', Meiryo, sans-serif;
}

/* Istilah bertanda hubung ("JFT-Basic", "benar-benar", "N5–N1") tidak boleh terbelah di
   ujung baris. Dibungkus span, bukan diganti tanda hubung khusus, supaya teksnya tetap
   terbaca mesin pencari apa adanya. */
.rapat { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--koral); outline-offset: 3px; border-radius: 6px; }

.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 var(--tepi); }
.wadah.sempit { max-width: 820px; }

.lompat {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 10px; background: var(--koral); color: var(--di-koral);
  font-weight: 700; text-decoration: none;
}
.lompat:focus { top: 8px; }

/* --------------------------------------------------------------------------
   MALAM: latar gelap untuk bagian pembuka, galeri, dan penutup
   -------------------------------------------------------------------------- */
.malam {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(170deg, var(--malam-atas) 0%, var(--malam-bawah) 72%);
}
.malam::before {
  content: '';
  position: absolute;
  right: -260px; top: 60px;
  width: 900px; height: 900px;
  background: radial-gradient(circle, var(--cahaya) 0%, transparent 60%);
  pointer-events: none;
}
.malam > * { position: relative; }

/* --------------------------------------------------------------------------
   KEPALA: tetap di atas saat halaman digulir, 56px seperti kepala layar aplikasi.
   -------------------------------------------------------------------------- */
.kepala {
  position: sticky;
  top: 0;
  z-index: 50;
  color: #fff;
  background: rgba(37, 33, 74, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kepala .wadah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
}
.merek {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.merek img { width: 32px; height: 32px; border-radius: 9px; }

.navigasi { display: flex; align-items: center; gap: 4px; min-width: 0; }
.menu-besar { display: none; align-items: center; gap: 2px; }
.menu-besar a, .menu-kecil li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--putih-lembut);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.menu-besar a:hover, .menu-besar a[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.09); }

/* Pemilih bahasa dan menu HP: <details> biasa, jadi tetap bisa dibuka tanpa JavaScript */
.bahasa, .menu-kecil { position: relative; }
.bahasa summary, .menu-kecil summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.bahasa summary::-webkit-details-marker, .menu-kecil summary::-webkit-details-marker { display: none; }
.bahasa summary::after {
  content: '';
  width: 7px; height: 7px;
  margin: -4px 2px 0 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.8;
}
.bahasa summary:hover, .bahasa[open] summary, .menu-kecil summary:hover, .menu-kecil[open] summary { background: rgba(255, 255, 255, 0.1); }
.bahasa ul, .menu-kecil ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 240px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--garis);
  border-radius: 16px;
  background: var(--kertas);
  color: var(--tinta);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.menu-kecil ul { width: 260px; }
.menu-kecil { margin-left: 2px; }
.garis-tiga { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.garis-tiga::before, .garis-tiga::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.garis-tiga::before { top: -5px; }
.garis-tiga::after { top: 5px; }
.bahasa li a, .menu-kecil li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: normal;
}
.bahasa li a:hover, .menu-kecil li a:hover { background: var(--washi); }
.bahasa li a[aria-current], .menu-kecil li a[aria-current] { background: var(--kesemek-lembut); color: #350D02; }
.bendera { font-size: 1.3em; line-height: 1; }
/* Windows tidak punya gambar bendera; lihat skrip di kaki halaman */
.tanpa-bendera .bendera { display: none; }

@media (min-width: 1000px) {
  .menu-besar { display: flex; }
  .menu-kecil { display: none; }
}
/* Dipasang skrip di kepala halaman kalau menu lebar tidak muat (label panjang di sebagian bahasa). */
.menu-ringkas .menu-besar { display: none; }
.menu-ringkas .menu-kecil { display: block; }

/* --------------------------------------------------------------------------
   PEMBUKA
   -------------------------------------------------------------------------- */
.pembuka { display: grid; gap: 28px; padding-top: 22px; }

.label {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: var(--putih-lembut);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.label-kecil {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--kesemek);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.malam .label-kecil { color: var(--indigo); }

h1 {
  margin-top: 14px;
  font-size: var(--u-h1);
  line-height: var(--b-h1);
  font-weight: 700;
  letter-spacing: calc(-0.02em * var(--ls));
}
h1 b, .malam h2 b { color: var(--indigo); font-weight: inherit; }
h1, h2, h3 { text-wrap: balance; }

.remah { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; color: var(--putih-lembut); font-size: 0.92rem; font-weight: 600; }
.remah a { text-decoration: none; }
.remah a:hover { color: #fff; text-decoration: underline; }
.pembuka-sub h1 { margin-top: 8px; }

/* Garis koral: tanda yang sama dengan garis di bawah kanji pada ikon aplikasi */
.garis-koral {
  width: 72px; height: 6px;
  margin: 20px 0 16px;
  border-radius: 3px;
  background: var(--koral);
}

.pengantar {
  max-width: 34em;
  color: var(--putih-lembut);
  font-size: 1.1rem;
  line-height: calc(var(--b-isi) - 0.05);
}
.pengantar-bagian { max-width: 40em; margin: -6px 0 22px; color: var(--tinta-lembut); font-size: 1.05rem; }

.aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 22px; }

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--koral);
  color: var(--di-koral);
  font-size: 1.08rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(240, 117, 83, 0.28);
  transition: background-color 0.15s, transform 0.15s;
}
.tombol:hover { background: #F68A6B; transform: translateY(-1px); }
.tombol:active { transform: none; }
.tombol svg { width: 20px; height: 20px; flex: none; }

.tautan-fitur {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 5px;
}
.tautan-fitur:hover { text-decoration-color: #fff; }

.catatan { margin-top: 12px; color: var(--putih-lembut); font-size: 0.92rem; }
.penutup .catatan { margin-top: 14px; }

/* Tiga HP di pembuka: Beranda di depan, kartu dan soal menyimak di belakangnya. Semuanya terpotong di tepi
   bawah supaya bagian pembuka tidak setinggi HP utuh. Di HP hanya yang depan yang tampil. */
.panggung { position: relative; height: 430px; overflow: hidden; }
.hp {
  width: min(290px, 74vw);
  margin: 0 auto;
  padding: 8px 8px 0;
  border-radius: 40px 40px 0 0;
  background: var(--bezel);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.hp img { width: 100%; border-radius: 32px 32px 0 0; }
.hp-utama { position: relative; z-index: 2; }
.hp-kiri, .hp-kanan { display: none; }
.panggung-sub { height: 380px; }
.panggung-sub .layar.hp { padding: 8px 8px 0; }
.panggung-sub .layar.hp .bingkai { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.panggung-sub .layar.hp img { border-radius: 32px 32px 0 0; }

@media (min-width: 900px) {
  .pembuka { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 28px; padding-top: 36px; }
  .pembuka .teks { padding-bottom: 64px; }
  .panggung { align-self: end; height: 600px; }
  .hp-utama { width: 300px; }
  .panggung-sub { height: 520px; }
  .panggung-sub .hp { margin-left: auto; margin-right: 24px; width: 300px; }
  .pembuka-sub { grid-template-columns: 1.05fr 0.95fr; }
  .pembuka-sub .teks { padding-bottom: 40px; }
}
/* Tiga HP baru muat di layar lebar. Hitungannya dijaga supaya HP kiri TIDAK pernah menindih teks: kolom panggung
   580px (setengahnya 290), HP samping 220px mulai 50px dari tengah dan berayun 48px karena miring 6 derajat, jadi
   tepi terluarnya 318px dari tengah = 28px di luar kolom = persis selebar jarak antarkolom. */
@media (min-width: 1100px) {
  .pembuka:not(.pembuka-sub) { grid-template-columns: minmax(0, 1fr) 580px; }
  .panggung:not(.panggung-sub) { overflow: visible; clip-path: inset(-40px -60px 0 -60px); }
  .hp-kiri, .hp-kanan { display: block; position: absolute; top: 170px; width: 220px; margin: 0; }
  .hp-kanan { left: 50%; margin-left: 50px; transform: rotate(6deg); transform-origin: bottom left; }
  .hp-kiri { right: 50%; margin-right: 50px; transform: rotate(-6deg); transform-origin: bottom right; }
  .pembuka:not(.pembuka-sub) h1 { font-size: var(--u-h1-lebar, var(--u-h1)); }
}

/* --------------------------------------------------------------------------
   ANGKA: kartu krem yang menindih tepi bawah bagian pembuka
   -------------------------------------------------------------------------- */
.angka {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: -32px;
  border: 1px solid var(--garis);
  border-radius: 20px;
  overflow: hidden;
  background: var(--garis);
  box-shadow: 0 14px 36px rgba(31, 29, 25, 0.14);
}
.angka li { padding: 14px 16px 16px; background: var(--kertas); }
.angka b {
  display: block;
  color: var(--kesemek);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.angka li > span { display: block; margin-top: 2px; color: var(--tinta-lembut); font-size: 0.92rem; line-height: var(--b-kecil); }
@media (min-width: 700px) {
  .angka { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .angka { grid-template-columns: repeat(6, 1fr); }
  .angka li { padding: 18px 18px 20px; }
}

/* --------------------------------------------------------------------------
   BAGIAN
   -------------------------------------------------------------------------- */
.bagian { padding: 40px 0; }
.bagian + .bagian { padding-top: 4px; }
.malam.bagian, .malam.bagian + .bagian { padding-top: 40px; }

h2 {
  margin-bottom: 18px;
  font-size: clamp(1.55rem, 5vw, 2.1rem);
  line-height: var(--b-h2);
  font-weight: 700;
  letter-spacing: calc(-0.015em * var(--ls));
}
h3 { font-size: 1.2rem; line-height: var(--b-h3); letter-spacing: calc(-0.01em * var(--ls)); }

@media (min-width: 900px) {
  .bagian { padding: 60px 0; }
  .bagian + .bagian { padding-top: 0; }
  .malam.bagian, .malam.bagian + .bagian { padding-top: 60px; }
  h2 { margin-bottom: 24px; }
}

/* --------------------------------------------------------------------------
   JALUR BELAJAR: lima langkah
   -------------------------------------------------------------------------- */
.jalur { display: grid; gap: 10px; counter-reset: langkah; }
.jalur li {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--garis);
  border-radius: 16px;
  background: var(--kertas);
}
.jalur .nomor {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kesemek);
  color: #FFFDF8;
  font-weight: 700;
}
.jalur b { font-size: 1.08rem; }
.jalur b a { text-decoration: none; }
.jalur b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jalur li > span:last-child { color: var(--tinta-lembut); font-size: 0.93rem; line-height: var(--b-kecil); }
@media (min-width: 900px) {
  .jalur { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .jalur li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 6px; padding: 18px; }
  .jalur .nomor { grid-row: auto; margin-bottom: 6px; }
  /* panah antar langkah */
  .jalur li:not(:last-child)::after {
    content: '\2192';
    position: absolute; right: -14px; top: 24px;
    color: var(--kesemek); font-size: 1.3rem; font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
   FITUR: teks di satu sisi, satu atau dua layar HP di sisi lain, berselang-seling
   -------------------------------------------------------------------------- */
.fitur { display: grid; gap: 22px; padding: 26px 0; border-top: 1px solid var(--garis); }
.fitur:first-of-type { border-top: 0; padding-top: 6px; }
.fitur h3 { font-size: clamp(1.35rem, 4vw, 1.7rem); margin-bottom: 10px; }
.fitur-teks p { color: var(--tinta-lembut); }
.fitur-teks p b, .butir b { color: var(--tinta); font-weight: 700; }
.butir { display: grid; gap: 8px; margin-top: 14px; }
.butir li { position: relative; padding-left: 26px; color: var(--tinta-lembut); }
.butir li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.28em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--kesemek-lembut)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8402A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.tautan-baris { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.tautan {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kesemek);
  font-weight: 700;
  text-underline-offset: 4px;
}

/* Baris layar: di layar lebar dua HP berdampingan (yang kedua turun sedikit); di HP jadi deret yang digeser
   ke samping, supaya tiap layar cukup besar untuk dibaca. Kelas .geser dipakai juga di halaman fitur dan galeri. */
.geser { display: flex; gap: 14px; align-items: flex-start; }
.fitur-layar { justify-content: center; }
.fitur-layar .layar { flex: 1 1 0; max-width: 250px; }
@media (max-width: 899px) {
  .geser {
    justify-content: flex-start;
    margin: 0 calc(var(--tepi) * -1);
    padding: 4px var(--tepi) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--tepi);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .geser > .layar { flex: none; width: min(236px, 64vw); max-width: none; scroll-snap-align: start; }
}
@media (min-width: 900px) {
  .fitur { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 44px 0; }
  .fitur.balik .fitur-teks { order: 2; }
  .fitur.balik .fitur-layar { order: 1; }
  .fitur-layar .layar { max-width: 262px; }
  .fitur-layar .layar:nth-child(2) { margin-top: 36px; }
}

/* Bingkai HP untuk layar di fitur, galeri, dan halaman fitur */
.layar { margin: 0; }
.layar .bingkai {
  padding: 6px;
  border-radius: 30px;
  background: var(--bezel);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}
.layar img { width: 100%; border-radius: 23px; }
.layar figcaption { padding: 12px 2px 0; }
.layar figcaption b { display: block; font-size: 1.05rem; line-height: var(--b-h3); }
.layar figcaption > span {
  display: block;
  margin-top: 3px;
  color: var(--tinta-lembut);
  font-size: 0.93rem;
  line-height: calc(var(--b-kecil) + 0.05);
}
.malam .layar figcaption > span { color: var(--putih-lembut); }
.malam .layar .bingkai { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); }

/* Peraga di seksi kosakata: tiga tombol nilai dan empat tahap kata, teksnya dari aplikasi */
.peraga { margin-top: 16px; padding: 14px; border: 1px solid var(--garis); border-radius: 16px; background: var(--kertas); }
.nilai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nilai > span { padding: 8px 4px 9px; border: 1.5px solid; border-radius: 12px; text-align: center; line-height: calc(var(--b-kecil) - 0.1); min-width: 0; }
.nilai b { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.nilai i { display: block; margin-top: 2px; font-size: 0.8rem; font-style: normal; opacity: 0.78; }
.nilai .belum { background: #FFD9E0; border-color: #D97C90; color: #3A0512; }
.nilai .ragu  { background: #FBE4B4; border-color: #C79A3F; color: #2B1E02; }
.nilai .hafal { background: #B6F0D9; border-color: #57A98B; color: #04211B; }
.tahap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 12px; }
.tahap li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.tahap li > span { padding: 4px 11px; border: 1.5px solid var(--garis); border-radius: 999px; background: var(--washi); }
/* Panah di BELAKANG keping: kalau barisnya patah, panah tertinggal di ujung baris atas. */
.tahap li:not(:last-child)::after { content: '\2192'; color: var(--tinta-lembut); font-weight: 400; }
.tahap .puncak > span { border-color: var(--kesemek); background: var(--kesemek); color: #FFFDF8; }

/* --------------------------------------------------------------------------
   TAMPILAN & BAHASA + GALERI (bagian gelap)
   -------------------------------------------------------------------------- */
.tampil { display: grid; gap: 22px; padding-bottom: 36px; margin-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tampil h2 { margin-bottom: 10px; }
.tampil-teks p { max-width: 34em; color: var(--putih-lembut); }
.bahasa-keping { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.bahasa-keping a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  color: #fff; font-size: 0.92rem; font-weight: 600; text-decoration: none; line-height: 1.5;
}
.bahasa-keping a:hover { background: rgba(255, 255, 255, 0.1); }
.tampil-layar { justify-content: center; }
.tampil-layar .layar { flex: 1 1 0; max-width: 210px; }
@media (min-width: 900px) {
  .tampil { grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 48px; padding-bottom: 52px; margin-bottom: 48px; }
  .tampil-layar .layar:nth-child(2) { margin-top: 30px; }
  .tampil-layar .layar:nth-child(3) { margin-top: 60px; }
}

.galeri-judul { margin-bottom: 6px; }
.galeri-kelompok { margin-top: 22px; }
.galeri-kelompok h3 { margin-bottom: 12px; color: var(--indigo); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.galeri { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.catatan-galeri { margin-top: 14px; color: var(--putih-lembut); font-size: 0.88rem; }
@media (min-width: 900px) {
  .galeri { gap: 20px; }
  .galeri > .layar { flex: 1 1 0; min-width: 0; }
  .galeri-kelompok { margin-top: 34px; }
  .catatan-galeri { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   KARTU: gratis, premium, privasi, fitur terkait
   -------------------------------------------------------------------------- */
.dua { display: grid; gap: 14px; }
@media (min-width: 900px) { .dua { grid-template-columns: 1fr 1fr; gap: 18px; } }

.kartu {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--garis);
  border-radius: 20px;
  background: var(--kertas);
}
.kartu-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kartu p { color: var(--tinta-lembut); }
.kartu p + p { margin-top: 10px; }
.kartu p b { color: var(--tinta); font-weight: 700; }
.kartu .kecil { margin-top: 12px; font-size: 0.93rem; }
.kartu .tautan { margin-top: auto; padding-top: 6px; }
.kartu.premium { background: var(--kertas-dalam); }

/* Ubin ikon: bentuk dan gradiennya sama dengan ikon aplikasi */
.ubin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, #8B82F6, #4F48B8);
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}
.ubin svg { width: 24px; height: 24px; }

.daftar { display: grid; gap: 10px; margin-top: 6px; }
.daftar li { position: relative; padding-left: 30px; color: var(--tinta-lembut); }
.daftar li b { color: var(--tinta); }
.daftar li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.22em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--kesemek-lembut)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8402A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.premium .daftar li::before {
  background-color: var(--nila-lembut);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23395673' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.terkait { display: grid; gap: 12px; }
@media (min-width: 700px) { .terkait { grid-template-columns: repeat(3, 1fr); } }
.kartu-tautan { gap: 6px; text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
.kartu-tautan:hover { border-color: var(--kesemek); transform: translateY(-2px); }
.kartu-tautan b { font-size: 1.1rem; color: var(--kesemek); }
.kartu-tautan span { color: var(--tinta-lembut); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   TANYA JAWAB
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 8px; }
.tanya { border: 1px solid var(--garis); border-radius: 14px; background: var(--kertas); }
.tanya summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::before {
  content: '';
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--kesemek-lembut)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8402A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.tanya[open] summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8402A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.jawab { padding: 0 16px 16px 50px; color: var(--tinta-lembut); }
.jawab p + p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   HALAMAN FITUR: bagian artikel berselang-seling dengan layar, tabel
   -------------------------------------------------------------------------- */
.artikel .wadah { display: grid; gap: 22px; }
.artikel + .artikel { padding-top: 0; }
/* Anak grid boleh menyempit: tanpa ini tabel lebar melebarkan seluruh halaman di HP. */
.artikel-isi, .artikel-layar { min-width: 0; }
.artikel-isi h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
.artikel-isi p { color: var(--tinta-lembut); }
.artikel-isi p + p, .artikel-isi ul + p, .artikel-isi .tabel-gulir + p { margin-top: 12px; }
.artikel-isi p b { color: var(--tinta); }
.artikel-isi i { font-style: italic; }
.artikel-layar { justify-content: center; }
.artikel-layar .layar { flex: 1 1 0; max-width: 250px; }
.artikel.tanpa-layar .artikel-layar { display: none; }
.artikel.tanpa-layar .artikel-isi { max-width: 760px; }

.tabel-gulir { overflow-x: auto; margin-top: 14px; border: 1px solid var(--garis); border-radius: 14px; background: var(--kertas); }
table { width: 100%; font-size: 0.95rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--garis); }
td:first-child { white-space: nowrap; }
th { background: var(--kertas-dalam); color: var(--tinta); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td:last-child, th:last-child { white-space: normal; }

@media (min-width: 900px) {
  .artikel .wadah { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
  .artikel.balik .artikel-isi { order: 2; }
  .artikel.balik .artikel-layar { order: 1; }
  .artikel-layar .layar { max-width: 262px; }
  .artikel-layar .layar:nth-child(2) { margin-top: 36px; }
  .artikel.tanpa-layar .wadah { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   PENUTUP + KAKI
   -------------------------------------------------------------------------- */
.penutup { padding: 48px 0 40px; text-align: center; }
.penutup h2 { margin-bottom: 8px; }
.penutup p { color: var(--putih-lembut); font-size: 1.1rem; }
.penutup .aksi { justify-content: center; }
.penutup .catatan { font-size: 0.95rem; }

.kaki-kolom {
  display: grid;
  gap: 22px 32px;
  padding: 28px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.kaki-kolom h3 { margin-bottom: 8px; color: #fff; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.kaki-kolom ul { display: grid; gap: 2px; }
.kaki-kolom a { display: inline-flex; align-items: center; min-height: 36px; color: var(--putih-lembut); text-decoration: none; }
.kaki-kolom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.kaki-bahasa { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
  .kaki-kolom { grid-template-columns: 1fr 1.4fr 1fr; }
  .kaki-bahasa { grid-template-columns: 1fr 1fr; }
}

.kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 14px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--putih-lembut);
  font-size: 0.88rem;
}
.kaki .sumber { max-width: 48em; }

@media (min-width: 900px) { .penutup { padding: 72px 0 56px; } }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.halaman-404 { min-height: 100vh; display: grid; place-items: center; text-align: center; background: var(--malam-bawah); color: #fff; }
.halaman-404 h1 { margin: 14px 0 22px; }
.halaman-404 .kecil { margin-top: 20px; color: var(--putih-lembut); }

/* --------------------------------------------------------------------------
   TIPOGRAFI PER AKSARA
   Ukuran bawaan disetel untuk huruf Latin. Aksara yang menumpuk tanda di atas dan di
   bawah huruf butuh baris lebih lega (kalau tidak, tanda baris kedua menabrak baris
   pertama), dan jarak hurufnya tidak boleh dirapatkan. Sama dengan penyesuaian di
   docs/play-listing/template/tema.css.
   -------------------------------------------------------------------------- */
html:lang(vi) { --b-h1: 1.2; --b-h2: 1.25; --b-h3: 1.3; }
html:lang(zh-CN) {
  --b-isi: 1.7; --b-h1: 1.25; --b-h2: 1.3; --b-h3: 1.4; --b-kecil: 1.45;
  --u-h1: clamp(2rem, 8vw, 3.4rem); --ls: 0;
}
html:lang(th), html:lang(ne), html:lang(hi), html:lang(bn) {
  --b-isi: 1.7; --b-h1: 1.34; --b-h2: 1.38; --b-h3: 1.42; --b-kecil: 1.5;
  --u-h1: clamp(1.85rem, 7.4vw, 3.2rem); --u-h1-lebar: 2.7rem; --ls: 0;
}
html:lang(my), html:lang(km), html:lang(si) {
  --b-isi: 1.9; --b-h1: 1.5; --b-h2: 1.5; --b-h3: 1.55; --b-kecil: 1.65;
  --u-h1: clamp(1.7rem, 6.8vw, 3rem); --u-h1-lebar: 2.45rem; --ls: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tombol, .kartu-tautan { transition: none; }
}