/* 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.
 */

@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;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat-600.woff2") format("woff2");
  font-weight: 600;
  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 resmi DeepSpa Group. Wordmark-nya MONOKROM — putih atau hitam, gak
   pernah diwarnain navy. Jadi yang ditukar itu berkasnya sesuai tema, bukan
   warnanya lewat CSS filter/mask. Aslinya putih di latar hitam; versi hitam
   dipakai waktu temanya terang. */
.merek {
  display: block;
  height: 26px;
  aspect-ratio: 1057 / 400;
  flex: none;
  background: url("/static/brand/deepspagroup-hitam.png") left center/contain no-repeat;
}
.merek-besar { height: 46px; margin: 0 auto 14px; background-position: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .merek {
    background-image: url("/static/brand/deepspagroup-putih.png");
  }
}
:root[data-tema="gelap"] .merek {
  background-image: url("/static/brand/deepspagroup-putih.png");
}
:root[data-tema="terang"] .merek {
  background-image: url("/static/brand/deepspagroup-hitam.png");
}

/* Logo aplikasi: PerformUP. Beda sama .merek di atas — ini BUKAN monokrom.
   Emasnya tetap sama di dua tema, yang ditukar cuma warna hurufnya (navy di
   latar terang, putih di latar gelap), jadi berkasnya juga dua. */
.merek-app {
  display: block;
  margin: 0;
  height: 34px;
  aspect-ratio: 1084 / 231;
  flex: none;
  background: url("/static/brand/performup-terang.png") left center/contain no-repeat;
}
.merek-app-besar { height: 56px; margin: 0 auto 18px; background-position: center; }
@media (max-width: 480px) {
  .merek-app { height: 30px; }
  .merek-app-besar { height: 46px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .merek-app {
    background-image: url("/static/brand/performup-gelap.png");
  }
}
:root[data-tema="gelap"] .merek-app {
  background-image: url("/static/brand/performup-gelap.png");
}
:root[data-tema="terang"] .merek-app {
  background-image: url("/static/brand/performup-terang.png");
}

/* Tagline PerformUP. Gayanya ikut h1 DeepSpa — Prompt, huruf besar, jarak
   huruf lebar — biar kebaca sebagai semboyan, bukan kalimat petunjuk. */
.tagline {
  font-family: var(--f-judul);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tx2, #666);
  text-align: center;
  margin: 0 0 20px;
}

/* Tanda induk di kaki halaman masuk: "oleh DeepSpa Group". Logo induknya
   turun ke sini begitu header dipegang logo aplikasi sendiri. */
.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, #666);
}
.induk .merek { height: 20px; }

/* Pemisah tipis antara merek perusahaan dan nama aplikasi — biar kebaca dua
   hal yang beda, bukan satu judul panjang. Sama seperti garis di logonya. */
.pemisah-merek {
  flex: none; width: 1px; height: 22px;
  background: var(--line, #ddd);
}