/* ═══════════════════════════════════════════════════════════════════
   Portal Kemitraan Pertashop — token desain bersama
   Sumber kebenaran tunggal untuk warna, skala spasi, tipografi,
   lengkung, bayangan, dan gerak. Dimuat oleh panel dan portal mitra;
   :root pada index.html mencerminkan nilai yang sama (diperiksa
   skrip sinkronisasi).

   Aturan: halaman tidak menulis angka piksel sendiri. Yang belum ada
   di sini ditambahkan di sini, bukan di halaman.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Warna: diambil dari logo PT Palma Pertiwi Makmur ─────────── */
  --biru-tua:   #2D3892;
  --biru:       #2470B6;
  --biru-muda:  #27A5DE;
  --hijau:      #0B8143;
  --merah:      #DC202B;
  --emas:       #DDA026;

  /* Turunan untuk teks & latar tipis (kontras teks ≥ 4,5:1 di atas putih) */
  --biru-teks:  #1B4F8A;   --biru-tint:  #EAF2FB;
  --hijau-teks: #0A5E33;   --hijau-tint: #E9F5EE;
  --merah-teks: #A81B23;   --merah-tint: #FCEBEC;
  --emas-teks:  #8A6516;   --emas-tint:  #FCF3E1;

  /* Netral */
  --ink:        #12203F;   /* teks utama */
  --ink-2:      #41506B;   /* teks pendukung */
  --muted:      #6B7C99;   /* keterangan */
  --rule:       #D3DCE9;   /* garis */
  --rule-soft:  #E5EBF3;   /* garis lembut */
  --kertas:     #F5F7FB;   /* latar lembar */
  --paper:      #FFFFFF;   /* permukaan kartu */
  --bg:         #EAEEF4;   /* latar halaman */
  --field:      #F5F8FC;   /* latar isian */
  --biru-gelap: #222B75;   /* tombol utama saat ditekan */

  /* ── Skala spasi: kelipatan 4 ──────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* ── Tipografi ─────────────────────────────────────────────────── */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: var(--sans);     /* nama lama, dipertahankan */
  --disp: "Barlow Condensed", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs: 11px;  --t-sm: 12.5px; --t-md: 13.5px; --t-base: 14.5px;
  --t-lg: 16px;  --t-xl: 20px;   --t-2xl: 26px;  --t-3xl: 32px;

  --lh-ketat: 1.2; --lh-baca: 1.55; --lh-longgar: 1.7;

  /* Label kecil kapital: satu-satunya tempat huruf renggang dipakai */
  --label-mono: 500 10px/1 var(--mono);
  --label-spasi: .12em;

  /* ── Bentuk ───────────────────────────────────────────────────── */
  --r-ctl:  8px;    /* kontrol: tombol, isian */
  --r-card: 14px;   /* kartu */
  --r-pill: 999px;  /* penanda */

  /* ── Bayangan: dua tingkat saja ────────────────────────────────── */
  --shadow:    0 1px 2px rgba(18,32,63,.05), 0 8px 24px -14px rgba(18,32,63,.18);
  --shadow-lg: 0 1px 2px rgba(18,32,63,.04), 0 18px 44px -20px rgba(18,32,63,.22);

  /* ── Gerak ────────────────────────────────────────────────────── */
  --cepat:  120ms;
  --sedang: 200ms;
  --lekuk:  cubic-bezier(.2,.7,.2,1);

  /* ── Cincin fokus: satu bentuk untuk semua kontrol ────────────── */
  --fokus: 0 0 0 3px rgba(36,112,182,.32);
}

/* Gerak dimatikan bagi pengguna yang memintanya — berlaku menyeluruh,
   bukan per komponen, supaya tidak ada yang terlewat. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Kelas guna: pengganti gaya sebaris. Nama Indonesia, ringkas,
   mengikuti skala di atas. Halaman memakai ini, bukan style="…".
   ═══════════════════════════════════════════════════════════════════ */
.mt-0{margin-top:0}      .mt-1{margin-top:var(--s-1)}  .mt-2{margin-top:var(--s-2)}
.mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mb-0{margin-bottom:0}   .mb-1{margin-bottom:var(--s-1)} .mb-2{margin-bottom:var(--s-2)}
.mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)} .mb-6{margin-bottom:var(--s-6)}
.m-0{margin:0}

.baris{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.baris.rapat{gap:var(--s-2)}   .baris.lega{gap:var(--s-4)}
.baris.sebar{justify-content:space-between}
.baris.atas{align-items:flex-start}
.isi-sisa{flex:1 1 auto}
.rata-kanan{text-align:right}
.lebar-penuh{width:100%}
.lebar-baca{max-width:62ch}
.penuh{grid-column:1/-1}