/* =========================================================================
   Kaca (glassmorphism) untuk label, lencana, dan kartu yang MENUMPANG DI ATAS
   FOTO di tema Clay. (LEX-246, permintaan Angga 26 Okt)

   Dulu semuanya kotak putih/krem nyaris pekat (`rgba(255,253,249,.9)`): terbaca,
   tapi menutup foto dan terlihat seperti stiker. Sekarang satu resep kaca:
   lapisan gelap tembus pandang + blur + garis putih tipis, teks putih.

   Kenapa gelap, bukan kaca putih: teks putih di atas kaca putih tidak terbaca
   saat fotonya langit atau pasir. Lapisan `--kaca-latar` dihitung supaya di atas
   foto PUTIH POLOS pun teks putihnya masih kontras (latar efektif +-#8f8a96);
   bayangan teks tipis menambal sisanya.

   Berkas ini dimuat SESUDAH `{% block page_css %}` di `clay/base.html`, jadi ia
   menimpa gaya halaman (halaman-*.css, home.css). Selektornya diawali `html`
   supaya juga menang atas `<style>` di dalam template detail tur/kapal.

   Yang SENGAJA tidak ikut: lencana berwarna penuh (diskon `--brand`, tipe kapal
   `--ink`), kotak pencarian, header, dan gelembung ikon hiasan About/Login
   (`.hi-gelembung`, `.ak-gelembung`) -- itu duduk di panel pastel, bukan di atas
   foto; kaca gelap di sana tampil sebagai ubin abu kusam (dicoba 26 Okt).
   ========================================================================= */

:root {
  --kaca-latar: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04)), rgba(28, 19, 42, .44);
  --kaca-garis: rgba(255, 255, 255, .32);
  --kaca-blur: blur(14px) saturate(150%);
  --kaca-bayang: 0 12px 28px rgba(18, 11, 30, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
  --kaca-teks: #fff;
  --kaca-teks-redup: rgba(255, 255, 255, .84);
  --kaca-bayang-teks: 0 1px 2px rgba(12, 7, 22, .45);
}

/* ---- Kotak/label kaca ---------------------------------------------------- */
html .destination-card span,
html .hk-provinsi__label,
html .prov-lain-label,
html .phinisi-melayang,
html .hero .floating-card,
html .hk-artikel__kategori,
html .prov-hitung a,
html .hero .visual-tag,
html .phinisi-bingkai .visual-tag,
html .kartu-produk .card-badge:not(.card-badge--diskon),
html .phinisi-boat .card-badge,
html #featured .experience-image .card-badge,
html .boat-card-badge:not(.boat-card-badge--type),
html .tour-card-badge,
html .experience-image .favorite-btn:not(.is-favorite),
html .hero .favorite-btn:not(.is-favorite) {
  border: 1px solid var(--kaca-garis);
  background: var(--kaca-latar);
  color: var(--kaca-teks);
  box-shadow: var(--kaca-bayang);
  text-shadow: var(--kaca-bayang-teks);
  -webkit-backdrop-filter: var(--kaca-blur);
  backdrop-filter: var(--kaca-blur);
}

/* ---- Warna teks di dalamnya ----------------------------------------------
   `home.css` memaku warna kartu destinasi lewat `#destinations`; selektor ber-ID
   ikut ditulis supaya kalah-menangnya tidak bergantung pada urutan berkas. */
html .destination-card strong,
html #destinations .destination-card strong,
html .hk-provinsi__teks strong,
html .prov-lain-label strong,
html .phinisi-melayang strong,
html .hero .floating-card strong { color: var(--kaca-teks); }

html .destination-card small,
html #destinations .destination-card small,
html .hk-provinsi__teks small,
html .prov-lain-label small,
html .phinisi-melayang small,
html .hero .floating-card small { color: var(--kaca-teks-redup); }

html .prov-hitung a:hover { color: var(--kaca-teks); }

/* Tombol hati: hatinya ikut putih; yang sudah difavoritkan tetap pink pekat (style.css). */
html #featured .experience-image .favorite-btn:not(.is-favorite) { color: var(--kaca-teks); }

/* Ikon dan tombol panah di dalam kaca tetap ubin pekat (target ketuk, bukan teks). */
html .hk-provinsi__panah,
html .phinisi-melayang-ikon { text-shadow: none; }

/* Peramban tanpa backdrop-filter: kaca jadi gelap pekat supaya teks putih tetap terbaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --kaca-latar: rgba(28, 19, 42, .78); }
}