/* 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;
}
.merek {
  text-decoration: none;
}
.merek-nama {
  color: var(--merek);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}
.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 {
  color: var(--merek);
  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;
}

/* ————— 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;
}

/* ————— 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;
}

.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;
  }
}

/* ————— beranda: dua pintu ————— */

.hero-tengah {
  text-align: center;
}
.hero-tengah h1 {
  margin-left: auto;
  margin-right: auto;
  max-width: 20ch;
}
.lead-tengah {
  margin-left: auto;
  margin-right: auto;
}

.pintu-deret {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.pintu {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  text-align: center;
}
.pintu svg {
  width: 6rem;
  height: auto;
  margin-bottom: 0.5rem;
}
.pintu h2 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}
.pintu p {
  color: var(--tinta-2);
  margin: 0 0 1.25rem;
}
.pintu-aksi {
  margin: 0 0 0.9rem !important;
}
.pintu-lain {
  margin: 0 !important;
  font-size: 0.92rem;
  color: var(--tinta-2);
}



/* ————— 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);
}