/* Arka Sync Prototype. Dasar: reset, tipografi, tata letak */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-ink); text-underline-offset: 3px; }
a:hover { color: var(--t-700); }

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--t-500); outline-offset: 3px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--n-800); color: #fff;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--sp-4); color: #fff; }

/* Tata letak */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }

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

/* Kisi memecah dirinya sendiri lewat auto-fit, bukan lewat breakpoint.
 * Bedanya terasa persis di lebar antara: kisi ber-breakpoint menahan dua
 * kolom terlalu lama lalu meloncat ke empat, sementara auto-fit menambah
 * satu kolom begitu ruangnya benar benar cukup. */
/* PENJAGA LUAPAN MENDATAR
 *
 * Anak grid dan flex defaultnya `min-width: auto`, artinya ia menolak
 * mengecil di bawah lebar isi terkecilnya. Satu tabel ber-`white-space:
 * nowrap` di dalam kolom grid karena itu MELEBARKAN kolomnya, lalu
 * melebarkan halaman, dan muncullah layar kosong di sebelah kanan.
 *
 * Itu yang terjadi di halaman admin: `.table` memakai nowrap dan duduk di
 * dalam `.split`. `overflow-x: auto` pada pembungkusnya tidak menolong
 * selama induknya masih boleh melebar.
 *
 * Satu baris di bawah menutup seluruh kelas kesalahan itu, bukan satu
 * kejadiannya saja.
 */
.grid > *, .split > *, .stack > *, .stack-sm > *, .stack-lg > *, .shell > * { min-width: 0; }
.table-scroll, .rail, .vtabs, .tabs { max-width: 100%; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-wide)), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-mid)), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grid--gap-lg { gap: var(--gap-lg); }

/* Dua kolom yang memang harus tetap dua sampai layar sempit, misalnya
 * hero dan panel bersisian. Ia satu satunya yang masih memakai breakpoint,
 * karena memecahnya lebih awal justru merusak susunan bacanya. */
.split { display: grid; gap: var(--gap-lg); }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 62rem) { .split--hero { grid-template-columns: 1.08fr 0.92fr; } }

.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.row--tight { gap: var(--sp-2); }
.row--nowrap { flex-wrap: nowrap; }
.spacer { flex: 1 1 auto; }

/*  Kepala seksi
 * Tanpa garis kecil sebelum label. Perangkat itu penanda paling cepat
 * dikenali dari halaman yang dibuat mesin, dan sekali terlihat ia
 * menjatuhkan seluruh halaman. Penggantinya lencana padat. */
.kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .3125rem .75rem;
  border-radius: var(--r-pill);
  background: var(--n-600); color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: var(--sp-3);
}
.kicker--pop { background: var(--y-400); color: var(--n-800); }
.kicker--warm { background: var(--t-500); color: #fff; }
.kicker svg { width: 15px; height: 15px; }

.lead { font-size: 1.0625rem; color: var(--ink-soft); }
@media (min-width: 768px) { .lead { font-size: 1.1875rem; } }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.mb0 { margin-bottom: 0; }

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

/* Panel berwarna */
.panel { position: relative; overflow: hidden; }
.panel--deep  { background: var(--n-600); color: #fff; }
.panel--deep h2, .panel--deep h3, .panel--deep h4 { color: #fff; }
.panel--deep p { color: rgba(255,255,255,.76); }
.panel--cream { background: var(--cream); }
.panel--warm  { background: var(--t-50); }
.panel--pop   { background: var(--y-400); }
.panel__in { position: relative; z-index: 1; }
.panel__bg  { position: absolute; inset: 0; z-index: 0; pointer-events: none; }