/* Portal Serloka.

   TOKENNYA DISALIN DARI APLIKASI, bukan dipilih ulang —
   `serloka-web-publik/src/gaya/token.css`. Portal yang warnanya "mirip" membuat orang yang
   berpindah dari portal ke aplikasi merasa masuk ke produk lain, tepat pada langkah paling
   rapuh di seluruh perjalanannya: pendaftaran.

   Tidak ada huruf dari jaringan. Pembacanya di ponsel murah dengan sinyal seadanya, dan
   satu berkas huruf 80 KB menunda kalimat pertama lebih lama daripada seluruh HTML ini. */

:root {
  --latar: #f6f4f0;
  --kertas: #ffffff;
  --tinta: #1c1b19;
  --tinta-2: #6b6560;
  --tinta-3: #9a938b;
  --garis: #e7e2da;
  --garis-tua: #dad4cb;

  --merek: #e8590c;
  --merek-tua: #c34a08;
  --merek-muda: #fdeee3;

  --segar: #2b8a3e;
  --segar-muda: #e8f5ea;
  --pudar-latar: #fbf0da;
  --pudar-tinta: #8a5d06;

  --lebar: 60rem;
  --prosa: 40rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font: 17px/1.65 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

a {
  color: var(--merek-tua);
}

/* ————— kepala & kaki ————— */

.kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}
/* BILAH ATAS SEPERTI usaha.serloka.com dan halaman Saya (keputusan 198): lambang jingga, lalu "Serloka" dan nama
   bagian dalam tinta. Semula hanya kata "Serloka" berwarna merek 1.3rem, satu-satunya kepala di keluarga Serloka yang
   tidak berlambang. */
.merek {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
}
.merek-lambang {
  display: inline-flex;
  color: var(--merek);
}
.merek-nama {
  color: var(--tinta);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.merek-bagian {
  font-weight: 600;
  color: var(--tinta-2);
}
.kepala-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.92rem;
}
.kepala-nav a:not(.tombol) {
  color: var(--tinta-2);
  text-decoration: none;
}
.kepala-nav a:not(.tombol):hover {
  color: var(--tinta);
}

.kaki {
  margin-top: 4rem;
  border-top: 1px solid var(--garis);
  background: var(--kertas);
}
.kaki-isi {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}
.kaki-merek {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tinta);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}
.kaki-kalimat {
  margin: 0 0 1.5rem;
  color: var(--tinta-2);
  max-width: 30rem;
}
.kaki-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.92rem;
}
.kaki-nav-luar {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--garis);
}

/* ————— tombol ————— */

.tombol {
  display: inline-block;
  background: var(--merek);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: none;
}
.tombol:hover {
  background: var(--merek-tua);
}
.tombol-besar {
  font-size: 1.1rem;
  padding: 1rem 2.2rem;
}
.tombol-kecil {
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
}
/* Tombol berbingkai untuk "Buka peta" di bilah atas: tombol jingga penuh di sana bersaing dengan tombol utama halaman,
   dan panduan tidak punya satu aksi yang lebih penting daripada membaca. Tinggi 44 px, bidang ketuk ponsel. */
.tombol-garis {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--kertas);
  color: var(--merek-tua);
  border: 1px solid var(--garis-tua);
}
.tombol-garis:hover {
  background: var(--merek-muda);
}

/* ————— bagian ————— */

section {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}
section + section {
  border-top: 1px solid var(--garis);
}
section h2 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}
.bagian-lead {
  color: var(--tinta-2);
  margin: 0 0 2rem;
  max-width: var(--prosa);
}

/* ————— hero ————— */

.hero {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--merek);
  margin: 0 0 1.1rem;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.15rem);
  margin-bottom: 1.25rem;
  max-width: 22ch;
}
.lead {
  font-size: 1.18rem;
  color: var(--tinta-2);
  max-width: var(--prosa);
  margin: 0 0 2rem;
}
.aksi {
  margin: 0 0 0.9rem;
}
.aksi-catatan {
  margin: 0;
  font-size: 0.93rem;
  color: var(--tinta-2);
}

/* ————— tiga langkah ————— */

.langkah {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.75rem;
}
.langkah li {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1rem;
  padding: 1.5rem;
}
.langkah-no {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--merek-muda);
  color: var(--merek-tua);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.langkah strong {
  display: block;
  font-size: 1.08rem;
  margin-bottom: 0.3rem;
}
.langkah span:last-child {
  color: var(--tinta-2);
}

/* ————— pin ————— */

.pin-deret {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 2rem 0 0.75rem;
}
.pin-kartu {
  margin: 0;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
}
.pin-kartu svg {
  width: 100%;
  max-width: 8.5rem;
  height: auto;
}
.pin-kartu figcaption strong {
  display: block;
  margin: 0.6rem 0 0.2rem;
  font-size: 1.05rem;
}
.pin-kartu figcaption span {
  color: var(--tinta-2);
  font-size: 0.93rem;
}
.gambar-catatan {
  font-size: 0.82rem;
  color: var(--tinta-3);
  margin: 0 0 2rem;
}

.kutipan {
  margin: 0;
  border-left: 4px solid var(--segar);
  background: var(--segar-muda);
  border-radius: 0 1rem 1rem 0;
  padding: 1.4rem 1.6rem;
}
.kutipan p {
  margin: 0;
  font-size: 1.1rem;
  max-width: 44ch;
}

/* ————— kartu tipe & batas ————— */

.tipe-deret {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.tipe-kartu {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1rem;
  padding: 1.5rem;
}
.tipe-kartu h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.tipe-angka {
  font-size: 2rem;
  font-weight: 800;
  color: var(--merek);
  letter-spacing: -0.03em;
  margin: 0.25rem 0 0.75rem;
}
.tipe-kartu p {
  color: var(--tinta-2);
  margin: 0 0 0.6rem;
}
.tipe-untuk {
  font-size: 0.86rem;
  color: var(--tinta-3);
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--garis);
}
/* ————— ceklis ————— */

.ceklis {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--prosa);
}
.ceklis li {
  position: relative;
  padding: 0.9rem 0 0.9rem 2.1rem;
  border-bottom: 1px solid var(--garis);
  color: var(--tinta-2);
}
.ceklis li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--segar);
  background: var(--segar-muda);
}
.ceklis strong {
  color: var(--tinta);
}

/* ————— penutup ————— */

.tutup {
  text-align: center;
}
.tutup h2 {
  margin-bottom: 1.5rem;
}

/* ————— jejak halaman ————— */

/* Jejak duduk RAPAT DI BAWAH KEPALA, bukan di dalam kartu isi: ia bagian dari navigasi,
   dan menaruhnya di dalam kartu prosa membuatnya terbaca sebagai bagian pedomannya.

   Pemisahnya "›" dari CSS, bukan dari HTML. Kalau ia ditulis di markup, ia ikut tersalin
   saat pembaca menyalin jejaknya, dan ikut dibacakan pembaca layar sebagai teks. */
.jejak {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 0 1.25rem;
  font-size: 0.9rem;
}
.jejak ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jejak li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinta-2);
}
.jejak li + li::before {
  content: "›";
  color: var(--tinta-3);
}
.jejak a {
  color: var(--tinta-2);
  text-decoration: none;
}
.jejak a:hover {
  color: var(--merek-tua);
  text-decoration: underline;
}
/* Ruas terakhir lebih gelap dan lebih tebal: dialah jawaban atas "saya di mana". */
.jejak [aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
}

/* Di layar sempit jejak yang melipat menjadi dua baris memakan bagian atas layar yang
   justru paling mahal. Ruas pertama disembunyikan — tautan Serloka sudah ada di kepala
   halaman tepat di atasnya, jadi tidak ada jalan yang hilang. */
@media (max-width: 30rem) {
  .jejak {
    font-size: 0.85rem;
  }
  .jejak li:first-child {
    display: none;
  }
  .jejak li:nth-child(2)::before {
    content: none;
  }
}

/* ————— pedoman ————— */

.pedoman {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}
.prosa {
  max-width: var(--prosa);
  margin: 0 auto;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
}
.prosa h1 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  margin-bottom: 1rem;
}
.prosa h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--garis);
}
.prosa h3 {
  font-size: 1.08rem;
  margin: 1.8rem 0 0.4rem;
  color: var(--merek-tua);
}
.prosa p {
  margin: 0.9rem 0;
}
.prosa ul,
.prosa ol {
  padding-left: 1.3rem;
}
.prosa li {
  margin: 0.45rem 0;
}
.prosa blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.3rem;
  background: var(--merek-muda);
  border-left: 4px solid var(--merek);
  border-radius: 0 0.8rem 0.8rem 0;
}
.prosa blockquote p:first-child {
  margin-top: 0;
}
.prosa blockquote p:last-child {
  margin-bottom: 0;
}
.prosa hr {
  border: none;
  border-top: 1px solid var(--garis);
  margin: 2.5rem 0;
}
/* `---` di markdown tepat sebelum `##` menggambar DUA garis: satu dari `hr`, satu dari
   `border-top` milik h2, dengan pita kosong di antaranya. Terjadi di bagian paling atas
   ketiga pedoman. Yang dilepas garis h2-nya — `hr` ditulis pengarangnya dengan sengaja. */
.prosa hr + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.prosa code {
  background: var(--merek-muda);
  border-radius: 0.3em;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}
.tautan-mati {
  color: inherit;
}

/* Tabel lebar menggulung DI DALAM kotaknya, bukan menggeser seluruh halaman. Di ponsel,
   halaman yang bisa digeser mendatar membuat pembacanya kehilangan tepi kiri teks dan
   menyangka isinya terpotong. */
.gulung {
  overflow-x: auto;
  margin: 1.4rem 0;
  border: 1px solid var(--garis);
  border-radius: 0.8rem;
}
.prosa table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.93rem;
}
.prosa th,
.prosa td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--garis);
}
.prosa th {
  background: var(--merek-muda);
  font-weight: 700;
}
.prosa tbody tr:last-child td {
  border-bottom: none;
}
/* TABEL KASIR BERTUMPUK DI PONSEL. Indeks Kasir punya empat kolom, dan di 360–412 px kolom keempat ("Tanpa internet",
   yang Kasir minta ditampilkan) terdorong keluar kotak gulir: potret pertama S5b, lalu sekali lagi sesudah tabelnya
   hanya dirapatkan. Setiap baris menjadi kartu, setiap sel satu baris berlabel judul kolomnya (`data-label`, dipasang
   `halaman/kasir.mjs`). Sel pertama (nama halaman atau keadaan) tanpa label dan tebal, sebagai judul kartu. */
@media (max-width: 40rem) {
  .hal-kasir .prosa thead {
    display: none;
  }
  .hal-kasir .prosa table,
  .hal-kasir .prosa tbody,
  .hal-kasir .prosa tr {
    display: block;
  }
  .hal-kasir .prosa tr {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--garis);
  }
  .hal-kasir .prosa tbody tr:last-child {
    border-bottom: none;
  }
  .hal-kasir .prosa td {
    display: flex;
    gap: 0.6rem;
    padding: 0.1rem 0;
    border-bottom: none;
  }
  .hal-kasir .prosa td::before {
    content: attr(data-label);
    flex: none;
    width: 7.5rem;
    color: var(--tinta-2);
    font-weight: 600;
  }
  .hal-kasir .prosa td:first-child {
    font-weight: 700;
    margin-bottom: 0.2rem;
  }
  .hal-kasir .prosa td:first-child::before {
    content: none;
  }
}

.pedoman-aksi {
  max-width: var(--prosa);
  margin: 1.5rem auto 0;
  text-align: center;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1.25rem;
  padding: 2rem;
}
.pedoman-aksi p {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

@media (min-width: 48rem) {
  .prosa {
    padding: 3rem 3.25rem;
  }
}

@media print {
  .kepala-nav,
  .pedoman-aksi,
  .kaki-nav {
    display: none;
  }
  .prosa {
    border: none;
    padding: 0;
    max-width: none;
  }
  body {
    background: #fff;
  }
}

/* ————— indeks panduan ————— */

/* Semula "beranda: dua pintu" (`.hero-tengah`, `.pintu-deret`, `.pintu`): pintu pencari dan pintu pelapak portal, yang
   kedua menuju `/jualan`. docs/33 S5a menggantinya dengan indeks empat bagian, jadi aturan-aturan itu dibuang bersama
   markup-nya, bukan dibiarkan mati di berkas ini.

   HERO BERLATAR, BUKAN TEKS DI ATAS KERTAS POLOS (keputusan 198: "eye catching … selaras dengan halaman yang lain").
   Kartu jingga muda dengan dua pin hijau di sudutnya: pin hijau adalah satu-satunya gambar yang dikenali pemakai
   Serloka dari aplikasi mana pun, dan jingga merek yang sama dengan lambang di bilah atas. */
.hero-indeks {
  position: relative;
  overflow: hidden;
  /* Berjarak 1 rem dari tepi layar di ponsel: potret 360 px pertama menggambar kartunya menempel tepi kiri dan kanan,
     karena `section` hanya punya padding dan kartu ini memakai padding-nya sendiri. */
  margin: 0.5rem 1rem 0;
  padding: 2.25rem 1.5rem 2.5rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 89, 12, 0.18), transparent 55%),
    linear-gradient(160deg, var(--merek-muda), var(--kertas) 70%);
  border: 1px solid var(--garis);
}
@media (min-width: 62rem) {
  .hero-indeks {
    margin: 0.5rem auto 0;
    padding: 3rem 3rem 3.25rem;
  }
}
/* Tanpa garis atas `section + section` di bawah kartu: kartunya sudah berbingkai, dan garis di bawahnya terbaca
   sebagai bayangan yang meleset (potret 1280 px). */
.hero-indeks + section {
  border-top: none;
}
.hero-indeks h1 {
  max-width: 16ch;
}
.hero-indeks .lead {
  margin-bottom: 0;
  max-width: 30rem;
}
/* Pin di sudut kanan atas, tidak pernah menindih teks: di bawah 40rem keduanya turun ke bawah kalimat. */
.hero-pin {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.5rem;
}
.hero-pin svg {
  width: 5.5rem;
  height: auto;
}
@media (min-width: 40rem) {
  .hero-pin {
    position: absolute;
    right: 1.5rem;
    top: 1.75rem;
    margin: 0;
  }
  .hero-pin svg + svg {
    margin-top: 2.5rem;
  }
  .hero-indeks h1,
  .hero-indeks .lead {
    max-width: calc(100% - 12rem);
  }
}

.indeks-bagian {
  padding-top: 2rem;
}
.indeks-deret {
  display: grid;
  gap: 0.9rem;
  /* Paling banyak DUA kolom: empat kartu dalam tiga kolom meninggalkan Dompet sendirian di baris kedua (potret 1280 px
     pertama). `min(100%, …)` supaya kolom tidak pernah lebih lebar daripada layar 360 px. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
/* Kartu bertautan seperti kartu halaman Saya host akun (`.kartu-tautan`): ikon dalam lingkaran, judul tebal, satu
   kalimat, panah di kanan. Seluruh kartu satu bidang ketuk, minimal 64 px tingginya. */
.indeks-kartu {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 4rem;
  padding: 1.1rem 1.1rem 1.1rem 1rem;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1.1rem;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.indeks-kartu:hover,
.indeks-kartu:focus-visible {
  border-color: var(--merek);
  box-shadow: 0 6px 20px rgba(232, 89, 12, 0.12);
}
.indeks-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--merek-muda);
  color: var(--merek);
}
.indeks-teks {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.indeks-teks strong {
  font-size: 1.08rem;
}
.indeks-teks span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.indeks-panah {
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--tinta-3);
}
/* Kartu terakhir yang sendirian di barisnya melebar penuh: lima kartu (sejak `/kasir`, S5b) dalam dua kolom
   meninggalkan satu kartu setengah lebar, cacat yang sama dengan Dompet di 1280 px pada S5a. */
@media (min-width: 46rem) {
  .indeks-kartu:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* PITA KEPALA TUGAS panduan Kasir: baris `**Untuk:** … · **Di:** … · **Tanpa internet:** …` yang diawali setiap
   halaman Kasir (I-24). Isinya kalimat Kasir apa adanya; yang ditambahkan perakit hanya kotaknya, supaya pembaca melihat
   untuk siapa halaman itu sebelum membaca langkahnya. */
.pita-tugas {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border-radius: 0.8rem;
  background: var(--merek-muda);
  color: var(--tinta);
  font-size: 0.9rem;
  line-height: 1.5;
}

.indeks-pedoman {
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
  color: var(--tinta-2);
}

.tipe-tautan {
  margin: 0.9rem 0 0 !important;
  font-weight: 600;
  font-size: 0.95rem;
}
.tipe-tautan a {
  text-decoration: none;
}

/* ————— dompet ————— */

.dompet-ringkas {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding-top: 0;
}
.dompet-kartu {
  border-radius: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: var(--kertas);
  border: 1px solid var(--garis);
}
/* Kartu pertama berlatar merek, seperti kartu saldo di halaman Dompet: angka yang orang cari paling dulu. */
.dompet-kartu:first-child {
  background: linear-gradient(140deg, var(--merek), var(--merek-tua));
  border-color: transparent;
  color: #fff;
}
.dompet-kartu p {
  margin: 0;
}
.dompet-kartu-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.dompet-kartu-isi {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dompet-kartu-catatan {
  font-size: 0.88rem;
  opacity: 0.8;
}



/* ————— gambar penjelas di pedoman ————— */

/* Gambar dibuat MELEBAR DARI KOLOM TEKS, bukan dibatasi 40rem seperti prosanya. Garis waktu
   yang dipaksa selebar kolom bacaan mengecilkan angkanya sampai tidak terbaca di ponsel —
   dan angka itu satu-satunya alasan gambarnya ada. */
.prosa .gambar {
  margin: 1.75rem calc(-1 * var(--luber, 0px));
  width: calc(100% + 2 * var(--luber, 0px));
}
.prosa .gambar img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
}
.prosa .gambar figcaption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--tinta-3);
}

@media (min-width: 56rem) {
  .prosa {
    --luber: 1.5rem;
  }
}

/* Gambar penjelas di halaman pemasaran. Melebar dari kolom teks dengan sengaja: garis waktu
   dan tangga warna yang dipaksa selebar bacaan mengecilkan pin sampai wajahnya tidak
   terbaca — dan wajah itu satu-satunya alasan gambarnya ada. */
.gambar-lebar {
  margin: 2rem 0;
}
.gambar-lebar img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
}
.gambar-lebar figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: var(--prosa);
}