/* Situs Lark PDF Reader. Tata letak situs web biasa (kepala + navigasi di atas,
   hero dua kolom, kisi kartu, kaki berkolom), tetapi unsur UI-nya diambil dari app
   (ui/tema/Tema.kt, ui/Komponen.kt, ui/Navigasi.kt): palet gelap, aksen amber,
   Plus Jakarta Sans, baris ikon, label bagian berhuruf kapital, pil, dan navigasi
   kapsul dengan tab aktif amber. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Palet WarnaGelap app. */
:root {
  color-scheme: dark;
  --latar: #0f0e11;
  --latar-kaki: #0b0a0d;
  --permukaan: #1a181d;
  --teks: #f4f0eb;
  --teks2: #a8a19b;
  --teks3: #8e8780;
  --garis: rgba(255, 255, 255, .07);
  --aksen: #ffc44d;
  --diatas-aksen: #1a1407;
  --aksen-teks: #ffc44d;
  --pil-aktif: rgba(255, 196, 77, .14);
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lebar: 1120px;
  --tepi: 20px;
  --sudut: 20px;
}

@media (min-width: 640px) {
  :root {
    --tepi: 32px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Kolom fleks: di halaman pendek, kaki tetap menempel di dasar layar. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 400 16px/1.5 var(--huruf);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(255, 196, 77, .32);
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--aksen);
  outline-offset: 2px;
  border-radius: 8px;
}

.lewati {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--aksen);
  color: var(--diatas-aksen);
  font-weight: 700;
  text-decoration: none;
}

.lewati:focus {
  top: 16px;
}

main {
  flex: 1;
}

.wadah {
  width: 100%;
  max-width: calc(var(--lebar) + 2 * var(--tepi));
  margin: 0 auto;
  padding: 0 var(--tepi);
}

/* --- Ikon garis (kotak 24, ujung bulat) seperti Ikon.kt. Tebal garis ada di atribut
   stroke-width tiap ikon, karena aturan CSS akan menimpa atribut itu. */
.ik {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ik-isi {
  fill: currentColor;
  stroke: none;
}

/* LabelBagian: kecil, tebal, berhuruf kapital. */
.label {
  margin: 0;
  color: var(--teks3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.label.aksen {
  color: var(--aksen-teks);
}

/* --- Kepala: merek, navigasi kapsul, bahasa. */
.kepala {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--garis);
  background: rgba(15, 14, 17, .85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.kepala-dalam {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.merek {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--teks);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  text-decoration: none;
}

.merek img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

/* BilahNavigasi app, dipindah ke atas: tab aktif berlatar amber samar. */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 4px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--permukaan);
}

.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  color: var(--teks2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--teks);
}

.nav a[aria-current="page"] {
  background: var(--pil-aktif);
  color: var(--aksen-teks);
}

.nav .ik {
  width: 18px;
  height: 18px;
}

.kepala-kanan {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

@media (max-width: 859px) {
  .kepala {
    position: static;
  }

  .kepala-dalam {
    flex-wrap: wrap;
    gap: 14px 12px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .kepala-kanan {
    margin-left: auto;
  }

  .nav {
    order: 3;
    width: 100%;
    margin: 0;
  }

  .nav a {
    flex: 1;
    padding: 0 6px;
  }

  .nav .ik {
    display: none;
  }
}

/* --- Pil dan tombol. */
.pil {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--pil-aktif);
  color: var(--aksen-teks);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pil .ik {
  width: 18px;
  height: 18px;
}

a.pil:hover {
  background: rgba(255, 196, 77, .22);
}

/* TombolAksen: pil amber 48 dp. */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--aksen);
  color: var(--diatas-aksen);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.tombol .ik {
  width: 20px;
  height: 20px;
}

.tombol:hover {
  background: #ffcf6e;
}

.tombol-kecil {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.segera {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--garis);
  border-radius: 24px;
  color: var(--teks2);
  font-size: 14px;
  font-weight: 600;
}

.logo-play {
  width: 20px;
  height: 20px;
  flex: none;
}

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

.tautan-panah {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  color: var(--aksen-teks);
  font-weight: 700;
  text-decoration: none;
}

.tautan-panah .ik {
  width: 16px;
  height: 16px;
}

.tautan-panah:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Hero beranda: teks di kiri, dua layar app di kanan. */
.pahlawan {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 40px;
  padding-top: 56px;
}

.pahlawan h1 {
  margin: 14px 0 0;
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.slogan {
  margin: 10px 0 0;
  color: var(--aksen-teks);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.pembuka {
  max-width: 33em;
  margin: 22px 0 0;
  color: var(--teks2);
  font-size: 18px;
  line-height: 1.6;
}

.ciri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--teks2);
  font-size: 14px;
  font-weight: 600;
}

.ciri li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ciri .ik {
  width: 18px;
  height: 18px;
  color: var(--aksen-teks);
}

.pamer {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
}

.pamer::before {
  content: "";
  position: absolute;
  inset: 4% 0 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 77, .2), rgba(255, 196, 77, 0));
}

.pamer img {
  position: absolute;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 34px;
  background: var(--permukaan);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}

.pamer .depan {
  z-index: 1;
  left: 2%;
  top: 0;
  width: 56%;
}

.pamer .belakang {
  right: 2%;
  top: 12%;
  width: 50%;
  opacity: .85;
}

@media (max-width: 899px) {
  .pahlawan {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 40px;
  }

  .pamer {
    max-width: 380px;
  }

  .pamer img {
    border-radius: 26px;
  }
}

/* --- Bagian: label + judul besar + pengantar. */
.bagian {
  padding-top: 96px;
}

.kepala-bagian {
  max-width: 680px;
  margin-bottom: 28px;
}

.kepala-bagian h2,
.judul-hal h1 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.kepala-bagian p,
.pengantar {
  margin: 14px 0 0;
  color: var(--teks2);
  font-size: 17px;
  line-height: 1.6;
}

.judul-hal {
  padding-top: 64px;
  padding-bottom: 36px;
}

.judul-hal > * {
  max-width: 760px;
}

@media (max-width: 899px) {
  .bagian {
    padding-top: 64px;
  }

  .judul-hal {
    padding-top: 40px;
    padding-bottom: 28px;
  }
}

/* --- Kartu: permukaan app. */
.kartu {
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--permukaan);
}

/* Ubin ikon: ikon amber di atas latar tab aktif. */
.ubin {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--pil-aktif);
  color: var(--aksen-teks);
}

/* --- Sekilas: kisi kartu; di HP jadi satu kartu berbaris seperti Beranda app. */
.fakta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fakta li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
}

.fakta strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
}

@media (max-width: 899px) {
  .fakta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .fakta {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    background: var(--permukaan);
  }

  .fakta li {
    padding: 14px 18px;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .fakta li + li {
    border-top: 1px solid var(--garis);
  }

  .fakta strong {
    font-size: 17px;
  }
}

/* --- Screenshot app: berjajar di layar lebar, digeser menyamping di layar sempit. */
.layar {
  display: flex;
  gap: 16px;
  margin: 0 calc(-1 * var(--tepi));
  padding: 4px var(--tepi) 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--tepi);
  scrollbar-width: thin;
  scrollbar-color: var(--teks3) transparent;
}

/* Lebar ~38% layar: kartu ketiga mengintip, tanda bahwa deretan bisa digeser. */
.layar figure {
  flex: none;
  width: clamp(140px, 38vw, 200px);
  margin: 0;
  scroll-snap-align: start;
}

.layar img {
  width: 100%;
  height: auto;
  border: 1px solid var(--garis);
  border-radius: 20px;
  background: var(--permukaan);
}

.layar figcaption {
  margin-top: 12px;
  color: var(--teks2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 1000px) {
  .layar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .layar figure {
    width: auto;
  }
}

/* --- Kisi kartu fitur. */
.kisi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kisi.dua {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kartu-fitur {
  padding: 24px;
}

.kartu-fitur h3 {
  margin: 18px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.kartu-fitur p {
  margin: 6px 0 0;
  color: var(--teks2);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 899px) {
  .kisi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Di HP kartu fitur jadi mendatar: ubin di kiri, teks di kanan. */
@media (max-width: 559px) {
  .kisi,
  .kisi.dua {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kartu-fitur {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px;
  }

  .kartu-fitur .ubin {
    grid-row: span 2;
  }

  .kartu-fitur h3 {
    margin-top: 0;
  }
}

/* --- Penutup: kartu ajakan dengan cahaya amber. */
.penutup {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 96px;
  padding: 40px 44px;
  background:
    radial-gradient(520px 260px at 92% 120%, rgba(255, 196, 77, .16), rgba(255, 196, 77, 0) 70%),
    var(--permukaan);
}

.penutup img {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 22px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .45);
}

.penutup-teks {
  flex: 1;
  min-width: 0;
}

.penutup h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.penutup p {
  margin: 8px 0 0;
  color: var(--teks2);
}

.penutup .aksi {
  margin-top: 0;
}

@media (max-width: 799px) {
  .penutup {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 64px;
    padding: 28px 24px;
  }
}

/* --- Kartu berisi baris ikon (layar Alat/Setelan app). */
.kartu-daftar {
  padding: 18px 24px 8px;
}

.kartu-daftar > .label {
  margin-bottom: 4px;
}

/* Kartu-kartu disusun dua kolom bertingkat tanpa celah. */
.kolom {
  columns: 2;
  column-gap: 20px;
}

.kolom > * {
  margin-bottom: 20px;
  break-inside: avoid;
}

@media (max-width: 799px) {
  .kolom {
    columns: 1;
  }
}

.dua-kolom {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.tumpuk {
  display: grid;
  gap: 20px;
}

@media (max-width: 899px) {
  .dua-kolom {
    grid-template-columns: 1fr;
  }
}

/* --- Baris ikon (BarisIkon / BarisNilai). */
.daftar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.baris {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 8px 0;
  color: var(--teks);
  text-decoration: none;
}

.bergaris > li + li {
  border-top: 1px solid var(--garis);
}

.bergaris .baris {
  min-height: 56px;
}

.baris .ik {
  color: var(--teks2);
}

.baris .aksen {
  color: var(--aksen-teks);
}

.isi {
  flex: 1;
  min-width: 0;
}

.judul {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ket {
  display: block;
  margin-top: 2px;
  color: var(--teks2);
  font-size: 13px;
  line-height: 1.45;
}

.nilai {
  flex: none;
  max-width: 55%;
  color: var(--teks2);
  font-size: 14px;
  text-align: right;
  overflow-wrap: anywhere;
}

.panah {
  width: 16px;
  height: 16px;
  color: var(--teks3);
}

a.baris:hover .judul {
  color: var(--aksen-teks);
}

/* --- Bantuan: tanya-jawab yang bisa dibuka tanpa skrip. */
.tanya + .tanya {
  border-top: 1px solid var(--garis);
}

.tanya summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.tanya summary::-webkit-details-marker {
  display: none;
}

.tanya summary .panah {
  margin-left: auto;
  transition: transform .2s ease;
}

.tanya[open] summary .panah {
  transform: rotate(90deg);
}

.tanya summary:hover {
  color: var(--aksen-teks);
}

.tanya p {
  margin: 0 0 18px;
  color: var(--teks2);
  line-height: 1.6;
}

/* --- Dokumen hukum: daftar isi menempel di kiri, teks di kanan. */
.dok-tata {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  padding-top: 48px;
}

.dok-isi {
  position: sticky;
  top: 96px;
  padding-bottom: 14px;
}

.dok-isi ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dok-isi a {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--garis);
  color: var(--teks2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.dok-isi li:first-child a {
  border-top: 0;
}

.dok-isi a:hover {
  color: var(--aksen-teks);
}

.dokumen {
  max-width: 720px;
}

.dokumen h1 {
  margin: 20px 0 0;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.tanggal {
  margin: 10px 0 0;
  color: var(--teks3);
  font-size: 14px;
}

.dokumen h2 {
  margin: 36px 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  scroll-margin-top: 96px;
}

.dokumen p {
  margin: 0 0 12px;
  color: var(--teks2);
  line-height: 1.7;
}

.dokumen p a {
  color: var(--aksen-teks);
  text-underline-offset: 3px;
}

@media (max-width: 999px) {
  .dok-tata {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .dok-isi {
    display: none;
  }
}

/* --- 404. */
.hilang {
  padding-top: 96px;
  padding-bottom: 32px;
  text-align: center;
}

.hilang .angka {
  margin: 0;
  color: var(--aksen-teks);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}

.hilang h1 {
  margin: 16px 0 0;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.hilang .aksi {
  justify-content: center;
}

/* --- Kaki berkolom. */
.kaki {
  margin-top: 112px;
  border-top: 1px solid var(--garis);
  background: var(--latar-kaki);
}

.kaki-dalam {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 40px;
}

.kaki-merek p {
  max-width: 300px;
  margin: 14px 0 0;
  color: var(--teks2);
  font-size: 14px;
  line-height: 1.6;
}

.kaki-kolom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.kaki-kolom .label {
  margin-bottom: 4px;
}

.kaki-kolom a,
.kaki-kolom span {
  color: var(--teks2);
  font-size: 14px;
  text-decoration: none;
}

.kaki-kolom a:hover {
  color: var(--teks);
}

.kaki-kolom [aria-current="true"] {
  color: var(--aksen-teks);
  font-weight: 600;
}

.kaki-bawah {
  padding: 20px 0 32px;
  border-top: 1px solid var(--garis);
  color: var(--teks3);
  font-size: 13px;
}

@media (max-width: 799px) {
  .kaki {
    margin-top: 80px;
  }

  .kaki-dalam {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kaki-merek {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}