/* ============================================================
   assets/nm-type.css — Tipografi Nitromedia
   ------------------------------------------------------------
   Satu keluarga font untuk seluruh situs: Plus Jakarta Sans.
   Berkas ini memuat tangga ukuran dan bobot baku. Ke depan,
   pakai variabel di sini daripada menulis angka px langsung —
   supaya kalau mau diubah cukup satu tempat.

   Muat SETELAH stylesheet lain agar penyeragaman menang.
   ============================================================ */

:root{
  /* ── Keluarga font ── */
  --nm-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Tangga ukuran ──
     Naik bertahap, tidak ada lagi 11.5 / 12.8 / 13.2 yang acak.
     Patokan: 14px untuk teks isi, 12px untuk keterangan. */
  --fs-2xs:  11px;   /* label mungil, timestamp */
  --fs-xs:   12px;   /* keterangan, meta */
  --fs-sm:   13px;   /* teks sekunder */
  --fs-base: 14px;   /* teks isi utama */
  --fs-md:   16px;   /* teks menonjol, input di HP */
  --fs-lg:   18px;   /* subjudul */
  --fs-xl:   20px;   /* judul kartu */
  --fs-2xl:  24px;   /* judul bagian */
  --fs-3xl:  30px;   /* judul halaman */
  --fs-4xl:  36px;   /* judul besar / hero */

  /* ── Bobot ──
     Plus Jakarta Sans berhenti di 800. Nilai 900 tidak tersedia
     dan akan ditiru browser dengan hasil yang lebih buruk, jadi
     bobot tertinggi kita adalah 800. */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Tinggi baris ── */
  --lh-tight: 1.25;  /* judul */
  --lh-snug:  1.4;   /* teks pendek */
  --lh-base:  1.55;  /* teks isi */
  --lh-loose: 1.7;   /* artikel panjang */

  /* ── Jarak huruf ──
     Judul besar dirapatkan sedikit supaya tidak terlihat renggang. */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;   /* label kapital */
}

/* ── Dasar ── */
html, body{
  font-family: var(--nm-font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Elemen form tidak mewarisi font secara otomatis di banyak browser */
button, input, select, textarea, optgroup{
  font-family: var(--nm-font);
}

/* Kode tetap monospace — itu kebutuhan fungsi, bukan gaya */
code, pre, kbd, samp, .mono{
  font-family: var(--nm-font-mono);
}

/* ── Judul ──
   Dirapatkan dan ditegaskan supaya hierarki terasa jelas. */
h1, h2, h3, h4, h5, h6{
  font-family: var(--nm-font);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}
h1{ font-size: var(--fs-3xl); font-weight: var(--fw-black); }
h2{ font-size: var(--fs-2xl); font-weight: var(--fw-black); }
h3{ font-size: var(--fs-xl); }
h4{ font-size: var(--fs-lg); }
h5{ font-size: var(--fs-md); }
h6{ font-size: var(--fs-base); }

/* ── Angka rata ──
   Untuk harga dan tabel: digit selebar sama supaya tidak goyang
   saat nilainya berubah. Jangan dipakai global — teks biasa
   justru terlihat aneh dengan angka tabular. */
.tt-price, .pv-val, .np-hg, .nm-harga, .harga, .price,
td.num, .tabular, .angka{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Kelas bantu ──
   Pakai ini di markup baru daripada menulis px langsung. */
.t-2xs{ font-size: var(--fs-2xs); }
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-base{ font-size: var(--fs-base); }
.t-md { font-size: var(--fs-md); }
.t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); }
.t-2xl{ font-size: var(--fs-2xl); }
.t-3xl{ font-size: var(--fs-3xl); }

.fw-normal  { font-weight: var(--fw-normal); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-semibold{ font-weight: var(--fw-semibold); }
.fw-bold    { font-weight: var(--fw-bold); }
.fw-black   { font-weight: var(--fw-black); }

/* Label kapital kecil — sering dipakai di kartu & tabel */
.t-label{
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ── Teks panjang ──
   Artikel dan deskripsi produk butuh baris lebih longgar. */
.prose, .artikel-isi, .deskripsi-produk{
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
.prose h2, .artikel-isi h2{ margin-top: 1.6em; }
.prose p,  .artikel-isi p { margin: 0 0 1em; }

/* ── Input di HP ──
   Di bawah 16px, iOS Safari otomatis memperbesar halaman saat
   kolom diketuk. Ini bikin tampilan meloncat. */
@media(max-width: 767px){
  input, select, textarea{ font-size: var(--fs-md); }
}