/* Pilar: TEMA BERSAMA untuk semua tampilan web (satu berkas, isinya sama di mana-mana):
     - situs PT Pilar Sukses Sinergi        (web-company/)
     - landing page Pilar ERP               (web/)
     - dasbor admin Pilar ERP               (src/PilarErp.Api/wwwroot/console/)
     - halaman unduh installer Pilar ERP    (deploy/unduh/)
   SUMBER TUNGGAL: design/theme.css. Salinan di folder-folder di atas dibuat scripts/sync-theme.ps1 dan diperiksa saat rilis
   (scripts/sync-theme.ps1 -Check): jangan diubah di salinan. Tiap tampilan hanya menambah satu berkas CSS kecil untuk tata letaknya sendiri.
   Isi: font Inter, warna dasar logo PT Pilar Sukses Sinergi (biru, hijau, merah, navy), header, tombol, kartu, status, tabel, footer, halaman hukum.
   Tanpa JavaScript, tanpa font atau gambar dari luar. Kontras teks >= 4.5:1 (WCAG 2.2 AA). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* merek: warna dasar logo PT Pilar Sukses Sinergi (biru P, hijau dan merah S, navy huruf) */
  --brand: #1546b8;        /* biru logo */
  --brand-strong: #0f3796;
  --brand-tint: #e8eefc;
  --brand-line: #cfdaf5;
  --navy: #0b2a6f;         /* navy nama perusahaan */
  --green: #1faa31;        /* hijau logo (aksen) */
  --red: #d4202a;          /* merah logo (aksen) */
  /* netral */
  --ink: #0f1c3d;
  --ink-2: #26345a;
  --muted: #4b5878;
  --line: #dde4f0;
  --line-strong: #c7d2e8;
  --paper: #ffffff;
  --mist: #f5f8fd;
  --mist-2: #ebf0fa;
  --night: #0a2362;
  --night-text: #e8eefc;
  --night-muted: #b8c7ee;
  /* status (teks selalu disertai simbol atau kata, tidak hanya warna) */
  --leaf: #1a7f37;
  --ok-ink: #166534;   --ok-bg: #e6f6ea;
  --warn-ink: #8a4a0b; --warn-bg: #fdf1dc;
  --bad-ink: #a51d24;  --bad-bg: #fde9ea;
  --info-ink: #1e3fa6; --info-bg: #e8eefc;
  /* grafik */
  --chart-ok: #1b9d34;
  --chart-warn: #c26a05;
  --chart-bad: #d4202a;
  /* bentuk & huruf */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 28, 61, .06), 0 12px 32px -12px rgba(15, 28, 61, .22);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  /* motif kawung (empat buah kolang-kaling), garis sangat tipis, berwarna biru logo */
  --kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%231546b8' stroke-width='1'%3E%3Cellipse cx='11' cy='11' rx='5' ry='10' transform='rotate(-45 11 11)'/%3E%3Cellipse cx='33' cy='11' rx='5' ry='10' transform='rotate(45 33 11)'/%3E%3Cellipse cx='11' cy='33' rx='5' ry='10' transform='rotate(45 11 33)'/%3E%3Cellipse cx='33' cy='33' rx='5' ry='10' transform='rotate(-45 33 33)'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='1.6' fill='%231546b8'/%3E%3C/svg%3E");
}

/* ---------- dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.6 var(--font);
  font-feature-settings: "cv11", "ss01";
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
h1, h2 { color: var(--navy); text-wrap: balance; }
h3, h4 { color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; z-index: 30; }
.skip:focus { left: 8px; color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--brand) 0 34%, var(--green) 34% 67%, var(--red) 67% 100%); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand img { width: 34px; height: 34px; display: block; }
.brand small { display: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.nav { display: none; gap: 4px; margin-left: 24px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: var(--ink); background: var(--mist-2); }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: 600; }
.lang a, .lang span { display: grid; place-items: center; min-width: 36px; min-height: 32px; padding: 0 8px; text-decoration: none; color: var(--muted); }
.lang a:hover { color: var(--ink); background: var(--mist-2); }
.lang [aria-current] { background: var(--ink); color: var(--paper); }
.top .btn { padding: 8px 14px; font-size: 14px; min-height: 36px; }
.top .btn .ico { display: none; }
@media (min-width: 880px) { .nav { display: flex; } .top .btn .ico { display: block; } .brand small { display: block; } }

/* ---------- tombol ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; border: 1px solid var(--brand); background: var(--brand); color: var(--paper); box-shadow: 0 1px 2px rgba(15, 55, 150, .28), inset 0 1px 0 rgba(255, 255, 255, .14); transition: background .15s, border-color .15s, transform .15s; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(15, 28, 61, .06); }
.btn.ghost:hover { background: var(--mist-2); color: var(--ink); border-color: var(--line-strong); }
.btn.light { background: var(--mist); border-color: var(--mist); color: var(--ink); box-shadow: none; }
.btn.light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
.cta { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 520px) { .cta { flex-direction: row; flex-wrap: wrap; } }

/* ---------- tipografi bersama ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 500; }
.eyebrow b { padding: 2px 8px; margin-left: -8px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-strong); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sub { color: var(--muted); font-size: 18px; max-width: 38em; }
code { font-size: .9em; background: var(--mist-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- kartu ---------- */
.card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.card h3 { font-size: 18px; letter-spacing: -.01em; }
.badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-line); flex: none; }
.note { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--brand-tint); color: var(--ink-2); font-size: 15px; }
.hint { font-size: 13px; color: var(--muted); }

/* ---------- status & komponen aplikasi (dasbor admin, halaman unduh) ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.bad { background: var(--bad-bg); color: var(--bad-ink); }
.pill.info { background: var(--info-bg); color: var(--info-ink); }
.pill.none { background: var(--mist-2); color: var(--muted); }
.banner { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--radius); font-weight: 600; }
.banner.ok { background: var(--ok-bg); color: var(--ok-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.banner.bad { background: var(--bad-bg); color: var(--bad-ink); }
.alert { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 8px; }
.alert.bad { background: var(--bad-bg); } .alert.warn { background: var(--warn-bg); } .alert.info { background: var(--info-bg); }
.alert strong { display: block; }
.alert .detail { color: var(--muted); font-size: 14px; }
.alert a { margin-left: auto; white-space: nowrap; font-weight: 600; font-size: 14px; }
.error { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--bad-bg); color: var(--bad-ink); font-weight: 500; }
.empty { padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 10px; }
.bar { height: 10px; border-radius: 999px; background: var(--mist-2); overflow: hidden; margin: 6px 0 4px; }
.bar > span { display: block; height: 100%; background: var(--chart-ok); border-radius: 999px; }
.bar.warn > span { background: var(--chart-warn); }
.bar.bad > span { background: var(--chart-bad); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th, .table-wrap td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { background: var(--mist); color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap .nowrap { white-space: nowrap; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); fill: var(--muted); font-size: 13px; }
.chart .strong { fill: var(--ink); font-weight: 600; font-size: 14px; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .c-ok { fill: var(--chart-ok); } .chart .c-warn { fill: var(--chart-warn); } .chart .c-bad { fill: var(--chart-bad); } .chart .c-brand { fill: var(--brand); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.legend .lg-ok i { background: var(--chart-ok); } .legend .lg-bad i { background: var(--chart-bad); }

/* ---------- footer ---------- */
footer { padding: 40px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; background: var(--paper); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer a { color: var(--muted); display: inline-block; padding: 4px 0; }
footer a:hover { color: var(--ink); }
.made { display: flex; align-items: center; gap: 8px; }
.made::before { content: ""; width: 15px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #ce1126 50%, #fff 50%); box-shadow: 0 0 0 1px var(--line-strong); }

/* ---------- halaman hukum ---------- */
.doc { max-width: 760px; padding: 48px 20px 72px; margin: 0 auto; }
.doc h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 8px; }
.doc h2 { font-size: 22px; margin: 36px 0 12px; letter-spacing: -.02em; }
.doc p, .doc li { color: var(--ink-2); }
.draft { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; padding: 14px 18px; border-radius: 10px; font-size: 15px; }