/* Layout: header tipis, hero dua kolom (teks + kartu signal), direktori gaya YC (filter kiri, daftar baris kanan), lalu signal, cara kerja, harga, FAQ. */
:root {
  --bg: 255 255 255;
  --surface: 246 247 249;
  --line: 227 230 235;
  --ink: 20 24 33;
  --muted: 95 104 119;
  --accent: 229 84 10;
  --accent-soft: 255 238 226;
  --on-accent: 255 255 255;

  --c-pendanaan: 21 128 61;  --b-pendanaan: 220 252 231;
  --c-rekrutmen: 29 78 216;  --b-rekrutmen: 219 234 254;
  --c-ekspansi: 109 40 217;  --b-ekspansi: 237 233 254;
  --c-tender: 180 83 9;      --b-tender: 254 243 199;
  --c-teknologi: 15 118 110; --b-teknologi: 204 251 241;

  --ok: 21 128 61; --ok-bg: 220 252 231;
  --err: 190 38 38;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: 13 15 20;
    --surface: 20 23 29;
    --line: 38 43 52;
    --ink: 236 238 242;
    --muted: 148 157 171;
    --accent: 255 122 51;
    --accent-soft: 54 29 15;
    --on-accent: 20 12 6;

    --c-pendanaan: 74 222 128;  --b-pendanaan: 19 46 31;
    --c-rekrutmen: 147 197 253; --b-rekrutmen: 22 36 68;
    --c-ekspansi: 196 181 253;  --b-ekspansi: 38 28 68;
    --c-tender: 252 211 77;     --b-tender: 54 39 12;
    --c-teknologi: 94 234 212;  --b-teknologi: 13 50 46;

    --ok: 74 222 128; --ok-bg: 19 46 31;
      --err: 248 113 113;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { background: rgb(var(--bg)); color: rgb(var(--ink)); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }

.sig {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 9999px; padding: .15rem .6rem .15rem .5rem;
  font-size: .75rem; line-height: 1.25rem; font-weight: 500;
  color: rgb(var(--c)); background: rgb(var(--b)); white-space: nowrap;
}
.sig svg { width: .85rem; height: .85rem; }
.sig[data-type="pendanaan"] { --c: var(--c-pendanaan); --b: var(--b-pendanaan); }
.sig[data-type="rekrutmen"] { --c: var(--c-rekrutmen); --b: var(--b-rekrutmen); }
.sig[data-type="ekspansi"]  { --c: var(--c-ekspansi);  --b: var(--b-ekspansi); }
.sig[data-type="tender"]    { --c: var(--c-tender);    --b: var(--b-tender); }
.sig[data-type="teknologi"] { --c: var(--c-teknologi); --b: var(--b-teknologi); }

/* Ketersediaan kontak (key person) */
.ok-badge { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .5rem; color: rgb(var(--ok)); background: rgb(var(--ok-bg)); }
.ok-badge svg { width: 1rem; height: 1rem; }
.ok-text { color: rgb(var(--ok)); }
.ok-text svg { width: .9rem; height: .9rem; flex-shrink: 0; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgb(var(--line)); border-radius: 9999px;
  padding: .3rem .85rem; font-size: .8125rem; color: rgb(var(--muted));
  background: rgb(var(--bg)); transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: rgb(var(--accent)); color: rgb(var(--ink)); }
.chip[aria-pressed="true"] { background: rgb(var(--ink)); color: rgb(var(--bg)); border-color: rgb(var(--ink)); }

.masked { filter: blur(4px); user-select: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.is-hidden { display: none !important; }

/* Status login dan warna galat */
:root { --err: 185 28 28; }
@media (prefers-color-scheme: dark) { :root { --err: 252 165 165; } }
[data-auth-hide] { display: none !important; }

/* Data tanpa signal dan penanda kesegaran */
.sig-none, .fresh {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 999px; padding: .125rem .625rem; font-size: .75rem; line-height: 1.25rem;
  border: 1px dashed rgb(var(--line)); color: rgb(var(--muted));
}
.sig-none svg, .fresh svg { width: .85rem; height: .85rem; }
.fresh { border-style: solid; }
.fresh[data-tier="baru"] { color: rgb(var(--ok)); background: rgb(var(--ok-bg)); border-color: transparent; }
.fresh[data-tier="lama"] { border-style: dashed; }