/* ============================================================
   KAIRO — BILAH ATAS
   Berkas sendiri karena ketiga halaman memuat kumpulan stylesheet
   yang BERBEDA: lobi cuma lobby.css, konsol base+theme, briefing
   ketiganya. Menaruh aturan bilah di salah satunya membuat dua
   halaman lain kehilangan header — persis yang sempat terjadi:
   wordmark-nya membesar sampai memenuhi separuh layar karena
   tidak ada satu pun aturan tinggi yang sampai ke sana.
   ============================================================ */

/* ============================================================
   BILAH ATAS — dipakai ketiga halaman
   Dibangun js/bilah.js, jadi aturan di sini berlaku seragam di
   lobi, konsol, dan briefing.
   ============================================================ */
.bilah {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 11px 22px;
}

/* --- wordmark neon asli, bukan teks + ikon berlian ---
   Sebelumnya tiap halaman menulis "KAIRO" sebagai teks biasa dengan
   ikon berlian di sebelahnya, padahal mereknya sudah punya wordmark
   neon dengan cincin retak sebagai huruf O. Yang dipakai versi
   terpangkas: aset aslinya menyisakan banyak ruang kosong di atas
   dan bawah, dan di bilah setinggi 44px itu menyusutkan hurufnya
   sampai tak terbaca. */
.merek { display: inline-flex; align-items: center; gap: 0; }
.merek-tulisan {
  height: 30px; width: auto; display: block;
  filter: drop-shadow(0 0 14px rgba(34,228,255,.35));
  transition: filter .25s;
}
.merek:hover .merek-tulisan { filter: drop-shadow(0 0 20px rgba(34,228,255,.6)); }

/* --- alamat kontrak --- */
.bilah-ca {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 6px 8px 6px 11px; border-radius: 5px;
  border: 1px solid var(--line); background: rgba(9,14,22,.6);
}
.ca-tanda { font-family: var(--font); font-size: 9.5px; letter-spacing: .2em;
  color: var(--aksen); opacity: .85; flex-shrink: 0; }
.ca-nilai { font-family: var(--font); font-size: 11.5px; color: var(--terang);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.bilah-ca-kosong .ca-nilai { color: var(--redup); font-style: italic; }
.ca-salin { display: inline-flex; padding: 3px; border: none; background: transparent;
  color: var(--redup); cursor: pointer; border-radius: 3px; transition: color .2s, background .2s; }
.ca-salin svg { width: 14px; height: 14px; display: block; }
.ca-salin:hover { color: var(--aksen); background: rgba(34,228,255,.12); }
.ca-salin.tersalin { color: var(--baik); }

.tombol-beli { white-space: nowrap; }
.tombol-mati { opacity: .42; cursor: not-allowed; pointer-events: none;
  background: transparent; color: var(--redup); border: 1px solid var(--line);
  box-shadow: none; }
.tombol-mati::after { display: none; }

/* --- sisi kanan: hitung mundur, CA, beli, sosial, tautan, tombol --- */
.bilah-kanan { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Tombol beli sengaja jauh lebih kecil dari "Open console". Konsolnya
   yang jadi tujuan utama situs ini; tombol beli pelengkap. */
.tombol-mini { font-size: 10.5px; letter-spacing: .14em; padding: 6px 12px; }
.bilah-sosial { display: flex; align-items: center; gap: 4px; }
.sosial { display: inline-flex; padding: 7px; border-radius: 5px;
  color: var(--redup); transition: color .2s, background .2s; }
.sosial svg { width: 16px; height: 16px; display: block; }
.sosial:hover { color: var(--terang); background: rgba(34,228,255,.12); }
.sosial-mati { opacity: .38; cursor: default; }
.bilah-tautan { font-family: var(--font); font-size: 10.5px; letter-spacing: .18em;
  color: var(--redup); text-transform: uppercase; transition: color .2s; }
.bilah-tautan:hover, .bilah-tautan.aktif { color: var(--aksen); }

@media (max-width: 1100px) {
  .bilah { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .bilah-kanan { gap: 10px; }
  .merek-tulisan { height: 24px; }
  .ca-nilai { max-width: 18ch; }
}
@media (max-width: 760px) {
  .bilah-tautan, .bilah-ca { display: none; }
}

/* ============================================================
   HALAMAN BRIEFING
   Halaman sendiri, bukan sambungan lobi. Bilahnya menempel di atas
   dan isinya diberi ruang supaya tidak tertutup olehnya.
   ============================================================ */
.halaman-briefing .bilah { position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(5,7,12,.94), rgba(5,7,12,.72)); }
.halaman-briefing .halaman { position: relative; z-index: 12; background: none;
  border-top: none; }
.halaman-briefing .latar-ruang { filter: blur(18px) brightness(.42) saturate(1.15); }