/* vendor-theme.css — SUMBER TUNGGAL token+komponen re-theme terang (DoD#4).
   CATATAN CACHE: file .css kena rule nginx immutable 7d → SELALU rujuk dgn ?v=N (bump N tiap ubah tema)
   agar update tak terjebak cache (pelajaran sw.js 2026-07-13). Versi saat ini: v2 (2026-07-13: +.v-btn-back/.v-btn-contact responsif). */
/* ===== KELAS RESPONSIF BERSAMA (owner 2026-07-13) — pola konsisten lintas halaman ===== */
/* Tombol Kembali: mobile = icon-only panah ≥44px; desktop = icon+teks. Beri aria-label="Kembali". */
.v-btn-back{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--radius-pill,20px);background:var(--card,#fff);border:1px solid var(--border2,#e2e8f0);color:var(--text,#0f172a);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;font-family:'DM Sans',sans-serif;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.v-btn-back .v-btn-label{display:inline}
/* Tombol Konsultasi/Kontak: mobile = bulat icon chat generik ≥44px; desktop = icon+teks. HINDARI logo resmi WA. */
.v-btn-contact{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 16px;border-radius:var(--radius-el,12px);background:var(--brand,#1e3a8a);color:#fff;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;font-family:'DM Sans',sans-serif;border:none}
.v-btn-contact .v-btn-label{display:inline}
@media(max-width:600px){
  .v-btn-back{padding:0;min-width:44px;width:44px}
  .v-btn-back .v-btn-label{display:none}
  .v-btn-contact{padding:0;min-width:44px;width:44px;border-radius:50%}
  .v-btn-contact .v-btn-label{display:none}
}
/* ===== TOKEN VENDOR KANONIS (cetakan re-theme terang R0) — sumber tunggal token; kelas .v-* reusable lintas halaman ===== */
:root{
  --brand:#1e3a8a;--brand-2:#1d4ed8;--brand-3:#3b82f6;--brand-200:#93c5fd;--brand-border:#c7d2fe;--link:#2563eb;
  --ok-bg:#dcfce7;--ok-fg:#15803d;--warn-bg:#fef3c7;--warn-fg:#b45309;--err:#dc2626;
  --bg:#f1f5f9;--card:#fff;--text:#0f172a;--body:#334155;--muted:#64748b;--faint:#94a3b8;--border:#eef2f7;--border2:#e2e8f0;
  --radius-card:16px;--radius-el:12px;--radius-pill:20px;--shadow:0 2px 10px rgba(15,23,42,.06);
  /* ===== F1 RESMIKAN TOKEN (2026-07-24) — ADITIF: token BARU + aturan. Nol ubah nilai lama = nol dampak visual sampai dipakai. ===== */
  /* TEKS SEKUNDER aman di SEMUA latar (putih 7,58:1 & abu --bg 6,92:1). Pakai INI untuk teks pudar; JANGAN --faint/--muted. */
  --muted-2:#475569;
  /* BAHAYA varian latar-abu: --err #dc2626 GAGAL 4,41:1 di --bg; --err-strong lulus (putih 6,47 / abu 5,91). */
  --err-strong:#b91c1c;
  /* 🔴 AKSEN/DEKORATIF SAJA — JANGAN untuk TEKS (gagal WCAG AA sbg teks): --faint #94a3b8 (2,56:1) · --brand-3 #3b82f6 (3,68:1) · --brand-200 #93c5fd (1,80:1). */
  /* ATURAN --muted #64748b: lulus di putih (4,76) TAPI GAGAL di abu --bg (4,34) → di latar abu pakai --muted-2 atau --body. */
  /* JARAK: kelipatan 4/8 (hindari 13/17/23px). */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  /* SENTUH minimum & ukuran teks: isi >=1rem cegah zoom-paksa iOS di form; keterangan .875rem; label kecil .75rem (label saja, bukan isi). */
  --tap-min:44px;--fs-body:1rem;--fs-note:0.875rem;--fs-label:0.75rem;
  /* KELUARGA FONT (slot). Judul boleh berkarakter, isi wajib terbaca. SLOT CJK: saat OM-INTL Mandarin, tambah 'Noto Sans TC' ke ekor --font-body (dimuat TERPISAH hanya saat Mandarin dipilih). */
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;--font-display:'Syne',var(--font-body);
  /* Font KODE/ANGKA-KRITIS (kunci TOTP, kode OTP, no rekening) — karakter mirip jelas (0 ber-slash). Dimuat saat F4. */
  --font-code:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  /* TITIK PATAH RESMI (3, tak bisa var() di @media — ACUAN nilai): HP <640px · tablet 640-1024px · desktop >1024px. */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:12px}
.spinner{width:40px;height:40px;border:3px solid var(--brand-border);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page{max-width:600px;margin:0 auto;padding:20px}
/* ===== Komponen bersama (.v-*) ===== */
.v-btn{width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--radius-el);padding:14px 16px;font-size:15px;font-weight:700;min-height:44px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:.15s;box-shadow:0 2px 8px rgba(30,58,138,.18)}
.v-btn:hover{background:var(--brand-2);transform:translateY(-1px)}
.v-btn-secondary{background:var(--card);color:var(--brand);border:1.5px solid var(--brand-border)}
.v-card{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow);border:1px solid var(--border)}
.v-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:4px 12px;font-size:11px;font-weight:700}