/* ==========================================================================
   BASE — reset, tipografi, primitif tata letak, utilitas tanda tangan BRUTAL
   ========================================================================== */

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

* { margin: 0; }

/* Aturan emas tema ini: TIDAK ADA sudut membulat di mana pun. Reset global
   ini menangkap juga elemen yang radiusnya datang dari user-agent (input,
   button, select di Safari/iOS) — bukan cuma komponen kita sendiri. */
*, *::before, *::after { border-radius: 0; }

html {
  /* 106.25% dari 16px = 17px (CP-06, demi warga sepuh) */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Header sticky + pita marquee ~120px, supaya anchor tidak tertutup */
  scroll-padding-top: 8rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100dvh;
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Kunci: body tidak pernah menggulir ke samping. Tabel lebar dan pita
     marquee menggulir di dalam pembungkusnya sendiri, bukan menyeret
     seluruh halaman. */
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

/* --- Fokus keyboard -------------------------------------------------------
   Cincin fokus tidak pernah dihapus. Kotak tegas dua lapis, bukan halo. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  position: relative;
  z-index: var(--z-sticky);
}

/* --- Tipografi ------------------------------------------------------------
   Archivo bobot 800 untuk semua judul — cukup tebal untuk terbaca tegas,
   tapi bentuk hurufnya tetap grotesque biasa yang mudah dikenali, bukan
   font display bergaya. Huruf kapital TIDAK dipasang di sini: hanya label
   pendek (eyebrow, lencana, tombol, kepala tabel) yang di-uppercase, karena
   teks kapital menghilangkan bentuk-kata yang justru jadi pegangan utama
   pembaca sepuh. Judul dan kalimat memakai kapitalisasi biasa. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  /* Jaring pengaman terakhir. Skala di tokens.css sudah dihitung supaya kata
     terpanjang muat sampai lebar 320px, tapi nama kegiatan atau judul baru
     yang lebih panjang bisa muncul kapan saja dari data. `break-word` hanya
     aktif kalau sebuah kata benar-benar tidak muat sendirian di satu baris —
     jadi ia tidak pernah memotong teks yang sebetulnya masih bisa dibungkus
     secara normal, dan halaman tidak akan pernah menggulir ke samping. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
h4 { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

/* Angka selalu tabular — kolom rupiah harus lurus, dan lebarnya tidak boleh
   berubah saat nilainya di-animasi menghitung naik.

   Tema lama memakai JetBrains Mono untuk ini. Manrope kini menggantikannya:
   `tabular-nums` memberi lebar angka yang seragam, jadi kolom tetap rata
   tanpa perlu font monospace ketiga yang memecah identitas dua-font. */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* Angka besar (saldo, statistik). SATU sistem angka untuk seluruh situs —
   angka besar dan angka di dalam tabel memakai bentuk yang sama persis,
   supaya warga tidak perlu "menyesuaikan mata" saat berpindah dari kartu
   saldo ke baris jurnal. Bobotnya yang membedakan, bukan fontnya. */
.num--display {
  font-family: var(--font-num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Label kecil huruf besar — penanda bahasa BRUTAL di seluruh situs.
   Manrope 700, uppercase, tracking 0.05em. */
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow--accent { color: var(--accent); }

/* Eyebrow sebagai LENCANA — kotak kuning berbingkai hitam, wujud "CREATIVE
   AGENCY" di spesifikasi. Dipakai untuk penanda paling penting saja. */
.eyebrow--badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--highlight);
  color: var(--highlight-ink);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--sh-1);
}

/* Paragraf pengantar dinaikkan dari --ink-3 (#666, 5.74:1) ke --ink-2
   (#333, 12.6:1). #666 lolos ambang WCAG, tapi ambang itu batas minimum
   untuk penglihatan normal — bukan target untuk pembaca sepuh. Abu muda
   hanya dipakai untuk keterangan pendek, tidak untuk teks yang harus
   benar-benar dibaca. */
.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  max-width: var(--measure);
}

.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }

.text-pos { color: var(--accent); }
.text-neg { color: var(--critical-ink); }

/* --- Sorotan blok (efek stabilo) ------------------------------------------
   Pola tanda tangan spesifikasi: kata kunci di dalam judul diberi latar
   warna solid, seperti dicoret stabilo. Selalu dipakai pada teks BESAR —
   putih di atas #FF0000 hanya 4.0:1, yang lulus AA untuk teks besar saja.
   Untuk teks berukuran normal, pakai .highlight-yellow (hitam di atas
   kuning, 19.6:1) yang aman di ukuran berapa pun. */

.highlight-red,
.highlight-blue,
.highlight-yellow {
  padding: 0 0.18em;
  /* box-decoration-break menjaga latar tetap utuh ketika judul patah baris —
     tanpa ini, potongan kedua kehilangan padding kirinya. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight-red    { background: var(--brutal-red);    color: #FFFFFF; }
.highlight-blue   { background: var(--brutal-blue);   color: #FFFFFF; }
.highlight-yellow { background: var(--brutal-yellow); color: var(--ink); }

/* --- Primitif tata letak -------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }

/* Section bergaya gelap — latar hitam penuh, teks putih. Dipakai untuk
   bagian "cara kerja" bernomor, meniru section Services di spesifikasi.
   Melebar melewati container supaya benar-benar penuh selebar layar. */
.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-block: var(--bw-2) solid var(--ink);
}

.section--dark .eyebrow { color: rgba(255, 255, 255, 0.72); }
.section--dark .lede    { color: rgba(255, 255, 255, 0.78); }
.section--dark .dim     { color: rgba(255, 255, 255, 0.65); }

/* Section bergaya kuning — latar CTA penuh, teks hitam. Dipakai untuk blok
   kontak bendahara. */
.section--cta {
  background: var(--highlight);
  color: var(--ink);
  border-block: var(--bw-2) solid var(--ink);
}

.section--cta .eyebrow,
.section--cta .lede,
.section--cta .dim { color: var(--ink); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.grid { display: grid; gap: var(--sp-5); }

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

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Garis pemisah — tebal dan hitam, bukan garis rambut */
.rule {
  height: var(--bw-2);
  background: var(--ink);
  border: 0;
}

.rule--strong { height: 6px; }

/* --- Utilitas tanda tangan BRUTAL -----------------------------------------
   Tiga kelas inti dari spesifikasi bagian 4. Sebagian besar komponen di
   components.css sudah memakai kombinasi ini secara langsung lewat token;
   kelas di sini untuk markup yang dirakit di JS dan penggunaan sekali pakai. */

.brutal-border { border: var(--bw-2) solid var(--ink); }

.brutal-shadow {
  box-shadow: var(--sh-3);
  transition: transform var(--t-press) ease,
              box-shadow var(--t-press) ease;
}

/* Efek "ditekan": elemen bergeser 4px ke kanan-bawah sementara bayangannya
   menyusut 8px→4px. Karena geseran sama persis dengan penyusutan, sudut
   kanan-bawah bayangan diam di tempat — itu yang membuatnya terbaca sebagai
   tekanan, bukan sekadar pergerakan. */
.brutal-shadow:hover {
  box-shadow: var(--sh-3-press);
  transform: translate(4px, 4px);
}

/* --- Pola kisi dekoratif --------------------------------------------------- */

.grid-pattern {
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* --- Utilitas kecil -------------------------------------------------------
   Sengaja sedikit. Kalau daftar ini tumbuh panjang, itu tanda pola tersebut
   sebenarnya layak jadi komponen. */

.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }

.measure { max-width: var(--measure); }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.ml-auto { margin-left: auto; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

.upper {
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 700;
}

.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

/* --- Utilitas aksesibilitas ----------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-4);
  background: var(--highlight);
  color: var(--ink);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}

.skip-link:focus-visible { transform: translateY(0); }

/* --- Latar halaman ---------------------------------------------------------
   Tiga lapisan diam di belakang seluruh konten. Aurora dan butiran kini
   ber-opacity 0 lewat token (lihat tokens.css) — elemen DOM-nya sengaja
   dibiarkan supaya struktur halaman tidak perlu diubah di tujuh berkas HTML.
   Yang tersisa hanya kisi 40px yang sangat diredam. */

.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
}

.bg-canvas__aurora {
  position: absolute;
  filter: blur(90px);
  opacity: var(--aurora-opacity);
  will-change: transform;
}

.bg-canvas__aurora--a {
  width: 62vmax; height: 62vmax;
  top: -22vmax; left: -16vmax;
  background: radial-gradient(circle, var(--aurora-a) 0%, transparent 68%);
}

.bg-canvas__aurora--b {
  width: 54vmax; height: 54vmax;
  bottom: -20vmax; right: -14vmax;
  background: radial-gradient(circle, var(--aurora-b) 0%, transparent 68%);
}

/* Kisi 40px — `.grid-pattern` dari spesifikasi, dipakai sebagai tekstur
   halaman. Di-mask supaya memudar sebelum mencapai konten padat di bawah. */
.bg-canvas__grid {
  position: absolute;
  inset: -1px;
  opacity: var(--grid-opacity);
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 80%);
}

.bg-canvas__grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacity);
}

/* Konten selalu di atas latar */
.site-header, .site-main, .site-footer { position: relative; z-index: var(--z-base); }

/* --- Cetak ----------------------------------------------------------------
   Bayangan keras 8px menghabiskan tinta tanpa memberi informasi apa pun di
   atas kertas, jadi dilepas seluruhnya; border hitam sudah cukup membawa
   struktur. */
@media print {
  .bg-canvas, .site-header, .site-footer, .marquee, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  * { box-shadow: none !important; }
  .card, .panel, .balance, .stat { border: 1.5px solid #000 !important; }
  .section--dark { background: #fff !important; color: #000 !important; }
}