/* Tema DeepSpa — dipakai semua halaman.
 *
 * Diambil dari deepspa.co.id: navy #003399, latar gelap, judul huruf besar
 * berjenis Prompt dengan jarak huruf lebar, teks Montserrat.
 *
 * Fontnya ditaruh sendiri di /static/fonts, BUKAN nebeng Google Fonts —
 * auditor ngisi ini di outlet pakai data seluler, dan halaman yang nunggu
 * server luar itu nambah jeda di tempat sinyalnya paling jelek. Sekalian
 * bikin aplikasi tetap jalan penuh kalau Google lagi gak kebuka.
 *
 * Ambilnya WAJIB subset Latin. Sampai 29 Juli 2026 file di sini kebetulan
 * subset yang salah — Prompt cuma berisi glif Thai, Montserrat cuma Cyrillic —
 * jadi huruf Latin-nya kosong dan semua tulisan diam-diam jatuh ke font bawaan
 * HP. Kelihatannya jalan, padahal Prompt/Montserrat-nya gak pernah kepakai.
 */

@font-face {
  font-family: "Prompt";
  src: url("/static/fonts/Prompt-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Prompt";
  src: url("/static/fonts/Prompt-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Montserrat itu font variabel: satu file buat semua bobot, jadi 400 dan 600
   gak perlu dua unduhan. Rentangnya wajib ditulis — instans bawaannya Thin
   (wght 100), jadi tanpa "100 900" di sini semua teks bakal keluar setipis
   benang. */
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Dipakai di style tiap halaman lewat var(--f-judul) / var(--f-teks). */
:root {
  --f-judul: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-teks: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Tema dipaksa lewat tombol (lihat tema.js). color-scheme ikut dipaksa juga,
   kalau enggak kotak isian & dropdown bawaan HP tetap ngikut setelan sistem —
   jadi halaman terang tapi dropdown-nya masih hitam. */
:root[data-tema="terang"] { color-scheme: light; }
:root[data-tema="gelap"] { color-scheme: dark; }

.ganti-tema {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 99px;
  border: 1px solid var(--line, #ccc);
  background: transparent;
  color: var(--tx2, #666);
  font: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.ganti-tema.ngambang {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  background: var(--card, #fff);
}

/* Judul halaman: huruf besar berjarak, persis gaya "WELCOME TO DEEP SPA".
   Cuma buat h1 — kalau semua judul dibikin kapital, checklist yang isinya
   kalimat panjang jadi susah dibaca sambil jalan. */
h1 {
  font-family: var(--f-judul);
  text-transform: uppercase;
  letter-spacing: .06em;
}
h2, h3 {
  font-family: var(--f-judul);
  letter-spacing: .01em;
}

/* ── Logo app: AuditPRO ───────────────────────────────────────────────
   Latarnya transparan, jadi warnanya harus ikut tema — sama perlakuannya
   kayak logo DeepSpa di bawah: dua file dipasang barengan, CSS yang milih
   lewat class .merek-terang / .merek-gelap. Emas terang #81672C buat latar
   putih, emas asli #C9A961 buat latar gelap. */
.merek-app, .merek-masuk { display: block; height: auto; }
.merek-app   { width: 208px; margin-bottom: 12px; }
.merek-masuk { width: 240px; margin: 0 auto 20px; }
@media (max-width: 480px) {
  .merek-app   { width: 168px; margin-bottom: 9px; }
  .merek-masuk { width: 208px; }
}

/* ── Tanda induk DeepSpa Group (kecil, di kaki halaman masuk) ─────────
   Logo DeepSpa monokrom: putih di tema gelap, hitam di tema terang. Tema
   yang dipaksa lewat tombol menang atas setelan HP. */
.induk {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 20px; opacity: .55;
}
.induk span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx2); }
.induk img { display: block; width: 72px; height: auto; }

.merek-gelap { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .merek-terang { display: none; }
  :root:not([data-tema="terang"]) .merek-gelap  { display: block; }
}
:root[data-tema="gelap"]  .merek-terang { display: none; }
:root[data-tema="gelap"]  .merek-gelap  { display: block; }
:root[data-tema="terang"] .merek-terang { display: block; }
:root[data-tema="terang"] .merek-gelap  { display: none; }