@font-face {
  font-family: "Kulkul Sans";
  src: url("kulkul_sans.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --navy: #14284a;
  --navy-dalam: #0e1d38;
  --emas: #d6ae62;
  --emas-tua: #7d5f20;
  --biru: #1565c0;
  --latar: #f4f6fa;
  --kartu: #ffffff;
  --tinta: #0f1720;
  --lembut: #46525f;
  --garis: #d5dbe3;
  --tautan: #1565c0;
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --latar: #11161c;
    --kartu: #1c232c;
    --tinta: #f2f5f8;
    --lembut: #c3ccd7;
    --garis: #2e3946;
    --tautan: #7cbcff;
    --emas-tua: #d6ae62;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 "Kulkul Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--tautan); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; }

.lebar { width: min(70rem, 100% - 2rem); margin-inline: auto; }
.bacaan { width: min(42rem, 100% - 2rem); margin-inline: auto; }

/* Poleng Bali hitam dan putih selebar bilah menu. Putihnya 30%, supaya tulisan menu tetap terbaca (6,5:1). */
.bilah {
  background: #111 url("poleng.svg?v=8") 0 0 / 2rem 2rem;
  border-bottom: 1px solid var(--emas);
}

.atas { background: var(--navy); color: #fff; }

/* Batas bawah bagian navy: kotak merah putih yang sempit, dengan merah yang sama seperti tema aplikasi. */
.pembatas {
  height: 1rem;
  background: repeating-conic-gradient(#ce1126 0 25%, #fff 0 50%) 0 0 / 1rem 1rem;
}

.atas a { color: #fff; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.merek {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
}

.merek img { width: 2.25rem; height: 2.25rem; }

.nav-tautan { display: flex; gap: 1.25rem; font-size: .9375rem; }
.nav-tautan a { text-decoration: none; }
.nav-tautan a:hover { color: var(--emas); }

.pembuka {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: 2.5rem;
  padding-block: 2.5rem 4rem;
}

.pembuka h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.pembuka p { margin: 0 0 2rem; max-width: 34rem; font-size: 1.1875rem; color: #dfe6f0; }

.logo-besar { width: min(100%, 22rem); justify-self: center; display: block; }

.tombol {
  display: inline-block;
  padding: .875rem 1.75rem;
  border-radius: 999px;
  background: var(--emas);
  color: var(--navy) !important;
  font-weight: 600;
  text-decoration: none;
}

.tombol:hover { background: #e3c07e; }

.pembuka .catatan-unduh { margin: .875rem 0 0; font-size: .9375rem; color: #c5d0df; }
.catatan-unduh a { color: #fff; }

section { padding-block: 4rem; }

h2 { margin: 0 0 1rem; font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 600; line-height: 1.2; }
h3 { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 600; }

.pengantar { max-width: 40rem; margin: 0 0 2.5rem; color: var(--lembut); }

.fitur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  column-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fitur li { padding-block: 1.25rem; border-top: 1px solid var(--garis); }
.fitur p { margin: 0; color: var(--lembut); }

.rapat { margin-bottom: 0; }

.selang { background: var(--kartu); border-block: 1px solid var(--garis); }

.langkah { margin: 0; padding: 0; list-style: none; counter-reset: langkah; max-width: 42rem; }

.langkah li {
  position: relative;
  padding: 0 0 1.5rem 3.25rem;
  counter-increment: langkah;
}

.langkah li::before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: -.125rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--emas);
  font-weight: 600;
}

.langkah p { margin: 0; color: var(--lembut); }

.sidik {
  display: block;
  margin-top: .5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--garis);
  border-radius: .75rem;
  background: var(--latar);
  font: .8125rem/1.5 ui-monospace, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* Sama dengan bilah menu: poleng tipis di atas hitam, dengan garis emas sebagai batas */
.kaki {
  background: #111 url("poleng.svg?v=8") 0 0 / 2rem 2rem;
  border-top: 1px solid var(--emas);
  color: #fff;
  font-size: .9375rem;
}
.kaki .lebar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 2rem; }
.kaki a { color: #fff; }
.kaki nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.dokumen { padding-block: 2.5rem 4rem; }
.dokumen h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; line-height: 1.15; }
.dokumen h2 { margin-top: 2.5rem; font-size: 1.375rem; }
.dokumen .tanggal { color: var(--lembut); }
.dokumen table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.dokumen th, .dokumen td { padding: .625rem .75rem .625rem 0; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
.dokumen th { font-weight: 600; }

.isi-dulu { background: #ffc20e; color: #14284a; padding: 0 .25rem; border-radius: .25rem; font-weight: 600; }

/* Ponsel dan tablet tegak: tombol unduh harus sudah terlihat saat halaman dibuka, tanpa menggulir */
@media (max-width: 48rem) {
  .nav { padding-block: .5rem; }
  .merek { font-size: 1.125rem; gap: .5rem; flex-shrink: 0; }
  .merek img { width: 2rem; height: 2rem; }
  .nav-tautan { font-size: .8125rem; gap: .75rem; }
  .pembuka { grid-template-columns: 1fr; gap: .75rem; padding-block: 1rem 1.5rem; }
  /* Mengikuti tinggi layar: di layar pendek logo mengecil lebih dulu, bukan tombolnya yang terdorong */
  .logo-besar { width: clamp(3.5rem, 15vh, 9rem); order: -1; justify-self: center; }
  .pembuka h1 { font-size: clamp(1.75rem, 7.6vw, 3rem); margin-bottom: .625rem; text-align: center; }
  .pembuka p { font-size: clamp(.9375rem, 2.6vw, 1.1875rem); line-height: 1.45; margin-bottom: 1rem; max-width: none; text-align: center; }
  .tombol { display: block; max-width: 24rem; margin-inline: auto; text-align: center; }
  .pembuka .catatan-unduh { margin: .625rem 0 0; font-size: .8125rem; }
  section { padding-block: 3rem; }
}

/* Layar sangat sempit: tautan menu turun ke baris sendiri daripada terpotong */
@media (max-width: 22.5rem) {
  .nav-tautan { gap: .5rem; font-size: .75rem; }
}

/* Ponsel mendatar: dua kolom, supaya judul dan tombol muat dalam tinggi yang sangat pendek */
@media (max-height: 30rem) and (min-width: 34rem) {
  .nav { padding-block: .375rem; }
  .pembuka { grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; padding-block: .625rem 1rem; }
  .logo-besar { width: 7rem; order: 0; }
  .pembuka h1 { font-size: 1.75rem; margin-bottom: .25rem; text-align: left; }
  .pembuka p { font-size: .9375rem; line-height: 1.35; margin-bottom: .5rem; text-align: left; }
  .tombol { display: inline-block; padding: .5rem 1.25rem; }
  .pembuka .catatan-unduh { margin-top: .25rem; }
}

/* Tablet mendatar dan laptop pendek */
@media (min-width: 48.01rem) and (max-height: 45rem) {
  .pembuka { padding-block: 1.5rem 2rem; }
  .pembuka h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
  .logo-besar { width: min(100%, 17rem); }
}


/* Toko PIN dan halaman admin */
[hidden] { display: none !important; }

.bilah-putih { color: #fff; }
.bilah-putih a { color: #fff; }

.kartu-toko {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--garis);
  border-radius: .75rem;
  background: var(--kartu);
}
.kartu-toko.sempit { max-width: 26rem; margin-inline: auto; }
.kartu-toko.sorot { border: 2px solid var(--emas); }
.dokumen .kartu-toko h1, .dokumen .kartu-toko h2 { margin: 0 0 .75rem; font-size: 1.375rem; }
.kartu-toko h3 { margin-top: 1.25rem; }
.kartu-toko label { display: block; margin: .875rem 0 .25rem; font-weight: 600; }
.kartu-toko label.centang { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.kartu-toko .centang input { width: auto; margin-top: .375rem; flex-shrink: 0; }
.kartu-toko > .tombol-kecil { margin-top: 1rem; }

.kartu-toko input, .kartu-toko textarea {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--garis);
  border-radius: .5rem;
  background: var(--latar);
  color: var(--tinta);
  font: inherit;
}
.kartu-toko textarea { display: block; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--emas); outline-offset: 1px; }

.baris-isian { display: flex; gap: .5rem; }
.baris-isian input { min-width: 0; font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; }

.tombol-kecil {
  display: inline-block;
  padding: .625rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tombol-kecil:hover { background: var(--navy-dalam); }
.tombol-kecil:disabled { opacity: .6; cursor: default; }

.tombol-teks {
  padding: .375rem .5rem;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.tombol-teks.gelap { color: var(--tautan); }

.petunjuk { margin: .375rem 0 0; color: var(--lembut); font-size: .9375rem; }
.petunjuk.rapat-atas { margin-top: 0; }
.pesan-toko { margin: .75rem 0 0; font-weight: 600; }
.pesan-toko.galat { color: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pesan-toko.galat { color: #ffb4ab; } }
.petunjuk-bayar { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.daftar-toko { margin: 0; padding-left: 1.25rem; }
.dokumen td.harga { text-align: right; white-space: nowrap; font-weight: 600; padding-right: 0; }
.tersimpan { margin-left: .75rem; color: var(--lembut); font-size: .9375rem; }
.baris-tombol { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }

.gulir { overflow-x: auto; }
.dokumen .tabel-admin { min-width: 50rem; font-size: .9375rem; }
.tindakan { white-space: nowrap; }
.tindakan .tombol-kecil { padding: .375rem .875rem; margin-right: .25rem; }

.baris-harga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem auto;
  align-items: center;
  column-gap: .75rem;
  padding-block: .75rem;
  border-top: 1px solid var(--garis);
}
.kartu-toko .baris-harga label { margin: 0; font-weight: 400; }
.baris-harga .tersimpan { grid-column: 1 / -1; margin: .25rem 0 0; text-align: right; }

@media (max-width: 34rem) {
  .kartu-toko { padding: 1rem; }
  .baris-harga { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
  .kartu-toko .baris-harga label { grid-column: 1 / -1; }
}