/* Bilah atas halaman pelanggan.
 *
 * Dipakai halaman pelanggan saja: katalog, masuk, reservasi, dan akun.
 * Halaman admin TIDAK memakai berkas ini, karena di sana kelas `.nav` dipakai
 * untuk menu samping dengan tampilan yang sama sekali berbeda.
 *
 * Warnanya diambil dari logo Griya Sport Massage: biru #0C6EEC dan hijau
 * #0B8A02. Keduanya dipakai versi terang, karena warna aslinya tidak terbaca di
 * atas latar biru.
 */

:root {
  /* Biru merek yang diturunkan sedikit. Biru terangnya (#0C6EEC) hanya sanggup
     memuat teks putih pada rasio kontras yang memadai, sehingga kata "sobatGSM"
     tidak bisa diberi warna hijau dan biru di atasnya. */
  --nav-bg: #0A4FB0;
  --nav-line: rgba(255,255,255,0.18);
  --nav-text: #FFFFFF;
  --nav-text-2: #FFFFFF;
  --nav-hover: rgba(255,255,255,0.16);
  --nav-sobat: #A5F08E;
  --nav-gsm: #BFD8FF;
  /* Latar tautan aktif di mode terang sama dengan latar saat disorot, karena
     bilahnya sendiri sudah biru. Versi birunya dipakai di mode gelap. */
  --nav-active: rgba(255,255,255,0.16);
}

html[data-theme="dark"] {
  /* Di mode gelap bilahnya hijau gelap, senada dengan bagian pembuka. */
  --nav-bg: #0A2622;
  --nav-line: rgba(255,255,255,0.12);
  --nav-text: #EEF3F1;
  --nav-text-2: #FFFFFF;
  --nav-hover: rgba(255,255,255,0.12);
  --nav-sobat: #57D24A;
  --nav-gsm: #5AA0FF;
  --nav-active: #0C6EEC;
}

.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 56px; display: flex; align-items: center; gap: 16px; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; color: var(--nav-sobat);
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
/* Logo itu sendiri biru, jadi diberi alas putih. Tanpa alas, huruf birunya
   tenggelam di latar biru. */
.brand-mark { height: 2.1em; width: auto; margin-right: 8px; flex: 0 0 auto;
  background: #FFFFFF; border-radius: 8px; padding: 3px; }
.logo .tail { color: var(--nav-gsm); }
.nav-links { display: none; gap: 4px; }
.nav-links a { font-size: 14px; padding: 8px 12px; border-radius: 6px; color: var(--nav-text-2);
  min-height: 44px; display: inline-flex; align-items: center; }
.nav-links a:hover { background: var(--nav-hover); color: var(--nav-text); }
.nav-links a.active { background: var(--nav-active); color: var(--nav-text); font-weight: 700; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.45); background: transparent; border-radius: 6px; cursor: pointer; color: var(--nav-text); }

/* Tombol dan ikon di bilah atas dibuat terang, karena latarnya gelap. */
.nav .btn-login { color: var(--nav-text); }
.nav .btn-login:hover { background: var(--nav-hover); color: var(--nav-text); }
.nav .theme-btn { color: var(--nav-text); background: transparent; border-color: rgba(255,255,255,0.45); }
.nav .theme-btn:hover { background: var(--nav-hover); }
/* Cincin fokus dibuat putih, karena cincin hijau sulit terlihat di latar biru. */
.nav :focus-visible { outline-color: rgba(255,255,255,0.9); }

@media (min-width: 900px) { .nav-links { display: flex; } .hamburger { display: none; } }
@media (max-width: 899px) { .nav-right .btn-login { display: none; } }