/* Lapisan merek klien: PleiPlei — "Build, Play, Inspire".
   Warna dari logo resmi (Logo_Plei-Plei_GSM.pdf, Okt 2026). Dimuat oleh Base.astro bila PUBLIC_MEREK=pleiplei.
   Selektor diberi ":root" ekstra agar menang atas tema-c.css apa pun urutan muatnya.
   Aturan kontras: kuning hanya sebagai LATAR tombol bertulisan gelap; teks & tautan memakai biru/gelap. */
html:root, html:root[data-tema="c"] {
  --brand: #3b5e86;        /* biru logo — judul & aksen utama */
  --acc: #3b5e86;          /* tautan, fokus, progres */
  --lime: #f9bb1c;         /* tombol utama: kuning perosotan */
  --lime-ink: #242a33;
  --ink: #1f2530;
  --krem: #fff8ec;         /* latar hangat, sedikit lebih kuning */
  --sun: #f9bb1c;
  --sky: #80a0fd;
  --coral: #ff6632;
  --grape: #9dcc30;        /* hijau logo (nama token tetap untuk kompatibilitas) */
  --pink: #ffcf9d;
  /* warna seri katalog = warna logo (outdoor hijau, softplay pink, waterplay biru, oranye, kuning, peach) */
  --seri-1: #9dcc30; --seri-2: #f39bb4; --seri-3: #80a0fd; --seri-4: #ff6632; --seri-5: #f9bb1c; --seri-6: #ffb27a;
  /* HURUF (5 Nov 2026): Fredoka untuk judul (ujung membulat, senada huruf logo), Nunito untuk teks (hangat, enak dibaca
     di katalog panjang). Sengaja bukan Inter/Plus Jakarta yang terasa "templat". Berkas di-host sendiri via @fontsource. */
  --font: "Nunito Variable", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-judul: "Fredoka Variable", "Fredoka", "Nunito Variable", system-ui, sans-serif;
  --t-body: 1.0625rem;     /* 17px: x-height Nunito lebih kecil, setara 16px huruf lain */
}
/* Judul Fredoka: tebal 600 (maks 700), tanpa jarak huruf rapat; huruf bulat jadi sesak kalau dirapatkan */
html:root :is(h1, h2, h3, h4), html:root[data-tema="c"] :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: 0; line-height: 1.12; }
html:root[data-tema="c"] h1 { letter-spacing: -.01em; line-height: 1.05; }
html:root .eyebrow { font-weight: 600; letter-spacing: .1em; }
/* Kutipan panjang (Visi) memakai Fredoka lebih ringan: 8 baris huruf tebal terlalu berat dibaca */
html:root .pf-visi blockquote { font-weight: 500; line-height: 1.3; }
html:root :is(.stats strong, .sp-no, .pf-no, .hd-bukti strong, .sh-jumlah strong, .cb-lencana span) { font-weight: 600; letter-spacing: 0; }
/* Kode produk: huruf teks tebal + angka sama lebar (bukan huruf mesin ketik) */
html:root .kode { font-family: var(--font); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
html:root[data-tema="c"] .btn-p:hover { background: #ffcc3d; color: var(--lime-ink); }
html:root[data-tema="c"] .progress { background: linear-gradient(90deg, #3b5e86, #80a0fd, #9dcc30, #f9bb1c, #ff6632); }
html:root[data-tema="c"] .eyebrow::before { background: var(--coral); }

/* Header: wordmark (tanpa baris slogan) + slogan sebagai TEKS sungguhan — terbaca di layar, bukan 5px di dalam gambar */
.brand-kunci { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo { display: block; height: 44px; width: auto; }
.brand-slogan { padding-left: 12px; border-left: 2px solid #e7e2d8; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); line-height: 1.15; max-width: 9.5em; }
/* Slogan resmi dari desainer (gambar huruf asli, satu baris, desain header Adim 2 Nov): logo | garis | slogan. Dipakai di HEADER saja;
   footer & ruang besar memakai logo original (slogan di bawah logo). */
.brand-slogan-img { max-width: none; display: block; line-height: 0; }
.brand-slogan-img img { display: block; height: 13px; width: auto; }
@media (max-width: 640px) {
  .site-header .brand-kunci:has(.brand-slogan-img) { flex-direction: row; align-items: center; gap: 8px; }
  .site-header .brand-slogan-img { border-left: 1.5px solid #e7e2d8; padding-left: 8px; }
  .brand-slogan-img img { height: 9px; }
}
/* Laptop kecil: slogan tetap di samping, sedikit lebih kecil. HP: slogan pindah ke bawah wordmark (satu baris, tetap terbaca). */
@media (max-width: 1100px) { .brand-slogan { font-size: .68rem; letter-spacing: .1em; padding-left: 10px; } .brand-kunci { gap: 10px; } }
@media (max-width: 640px) {
  .brand-kunci { flex-direction: column; align-items: flex-start; gap: 3px; }
  .brand-logo { height: 32px; }
  .brand-slogan { border-left: 0; padding-left: 2px; font-size: .62rem; letter-spacing: .16em; max-width: none; white-space: nowrap; }
}
/* Footer: logo lengkap cukup besar agar slogannya terbaca */
.footer-logo { display: block; height: 96px; width: auto; margin-bottom: 14px; }