/* =====================================================================
   TEMA GLASS (kaca) + VIDEO LATAR  -  Boojin Beads
   Cara pakai di halaman mana pun:
     1. <link rel="stylesheet" href="../CSS/glass.css">   (taruh PALING AKHIR, setelah CSS lain)
     2. <body class="tema-glass">
     3. tempel blok <div class="bg-video"> ... </div> tepat setelah <body>
     4. <script src="../JS/glass.js"></script>
   Semua aturan diawali body.tema-glass, jadi halaman tanpa class itu tidak berubah.
   Mau ubah rasa kacanya? Cukup edit angka di blok "TOKEN" di bawah ini.
   ===================================================================== */

body.tema-glass {
  /* ---------- TOKEN (edit di sini) ---------- */
  --kaca: rgba(255, 240, 248, .38);            /* isi kaca. Naikkan (mis. .5) = lebih putih & mudah dibaca */
  --kaca-kuat: rgba(255, 255, 255, .58);       /* kaca yang butuh teks lebih jelas (menu HP, dll) */
  --kaca-pink: rgba(255, 178, 216, .42);       /* semburat pink di dalam kaca */
  --kaca-garis: rgba(255, 216, 236, .92);      /* garis tepi kaca */
  --kaca-blur: 18px;                           /* tingkat blur */
  --kaca-bayang: 0 14px 40px rgba(190, 24, 93, .16), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --g-judul: #ec1a85;                          /* warna judul (pink terang) */
  --g-teks: #b8186d;                           /* warna teks isi (pink mawar, tetap kontras) */
  --g-aksen: #f0268f;                          /* penanda, ikon, plus FAQ */
  --g-glow: 0 1px 12px rgba(255, 255, 255, .9), 0 0 3px rgba(255, 255, 255, .95);
  --teks: var(--g-teks);

  background: #fbe4ef;
  color: var(--g-teks);
}

/* ---------- VIDEO LATAR (diam di belakang semua section) ---------- */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #fbd5e5 url('../IMAGE/bg-poster.jpg') center / cover no-repeat;
}

.bg-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* kabut pink tipis supaya teks tetap terbaca di atas video */
.bg-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 196, 228, .42), rgba(255, 190, 224, .24) 45%, rgba(255, 196, 228, .42));
}

/* ---------- Semua section transparan: video terlihat dari navbar sampai footer ---------- */
body.tema-glass .blok,
body.tema-glass .warna-lembut,
body.tema-glass .warna-putih,
body.tema-glass .warna-muda,
body.tema-glass .warna-pink,
body.tema-glass .warna-tua,
body.tema-glass .warna-gelap,
body.tema-glass .w-scrolly {
  background: transparent !important;
}

body.tema-glass .hero {
  background-image: none !important;      /* hero asli punya wallpaper lewat style="" */
}

/* ---------- Teks: nuansa pink + glow putih lembut ---------- */
body.tema-glass h1,
body.tema-glass h2,
body.tema-glass h3 {
  color: var(--g-judul);
  text-shadow: var(--g-glow);
}

/* judul = gradasi pink + glow putih (pakai drop-shadow, bukan text-shadow, karena teksnya transparan) */
body.tema-glass h1,
body.tema-glass h2,
body.tema-glass h3 {
  background: linear-gradient(100deg, #ff4db3, #ec1a85 55%, #c0107a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 8px rgba(255, 255, 255, .95)) drop-shadow(0 0 2px rgba(255, 255, 255, .9));
}

body.tema-glass .penanda {
  color: var(--g-aksen);
  text-shadow: var(--g-glow);
}

body.tema-glass .judul-tengah p,
body.tema-glass .info-pelunasan {
  color: var(--g-teks);
  opacity: 1;
  font-weight: 600;
  text-shadow: var(--g-glow);
}

body.tema-glass .hero {
  color: #ff2fb2;
}

body.tema-glass .hero h1 {
  color: #f0189f;
  text-shadow: none;
  background-image: linear-gradient(100deg, #ff2fa6, #f0108f 50%, #c20a78);
}

body.tema-glass .hero p {
  color: var(--g-teks);
  font-weight: 600;
  text-shadow: var(--g-glow);
}

/* ---------- KARTU KACA (semua kartu di halaman) ---------- */
body.tema-glass .item-charm,
body.tema-glass .spesial,
body.tema-glass .langkah > div,
body.tema-glass .faq details,
body.tema-glass .bingkai-logo,
body.tema-glass .tentang > div:last-child,
body.tema-glass .vcard {
  background: linear-gradient(145deg, var(--kaca), var(--kaca-pink));
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  border: 1px solid var(--kaca-garis);
  box-shadow: var(--kaca-bayang);
  color: var(--g-teks);
}

body.tema-glass .spesial {
  border-style: solid;
}

body.tema-glass .langkah > div {
  border-style: solid;
}

body.tema-glass .item-charm p,
body.tema-glass .langkah p,
body.tema-glass .faq p,
body.tema-glass .spesial p,
body.tema-glass .tentang p {
  font-weight: 600;
}

body.tema-glass .tentang > div:last-child {
  padding: 2rem 2.2rem;
  border-radius: 2rem;
}

body.tema-glass .bingkai-logo {
  padding: .8rem;
}

body.tema-glass .bingkai-logo img {
  background: rgba(255, 240, 245, .55);
}

body.tema-glass .item-charm h3,
body.tema-glass .langkah h3,
body.tema-glass .spesial h3,
body.tema-glass .tentang h2 {
  color: var(--g-judul);
}

body.tema-glass .item-charm .foto-charm {
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(190, 24, 93, .18);
}

body.tema-glass .spesial .tagline,
body.tema-glass .w-tagline {
  color: var(--g-aksen);
}

body.tema-glass .langkah .no {
  box-shadow: 0 6px 14px rgba(190, 24, 93, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* FAQ: tiap pertanyaan jadi 1 kartu kaca */
body.tema-glass .faq details {
  margin-bottom: .85rem;
  padding: 1.05rem 1.4rem;
  border-radius: 1.2rem;
}

body.tema-glass .faq details:first-child {
  border-top: 1px solid var(--kaca-garis);
}

body.tema-glass .faq summary {
  color: var(--g-judul);
}

body.tema-glass .faq summary::after {
  color: var(--g-aksen);
}

body.tema-glass .faq details[open] {
  background: linear-gradient(145deg, var(--kaca-kuat), var(--kaca-pink));
}

/* ---------- Tombol ---------- */
body.tema-glass .tombol {
  background: linear-gradient(135deg, #ec4899, #be185d);
  box-shadow: 0 8px 20px rgba(190, 24, 93, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
}

body.tema-glass .tombol-putih {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--g-judul);
  border: 1px solid var(--kaca-garis);
  box-shadow: 0 8px 20px rgba(190, 24, 93, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.tema-glass .tombol-garis {
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid #ec4899;
  color: var(--g-judul);
  box-shadow: 0 8px 20px rgba(190, 24, 93, .12);
}

body.tema-glass .tombol-shopee {
  background: linear-gradient(135deg, #ff7a59, #ee4d2d);
  color: #fff;
}

/* ---------- Ajakan beli (CTA): kaca pink pekat supaya teks putih tetap jelas ---------- */
body.tema-glass .cta {
  padding: 2.8rem 2rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(236, 72, 153, .78), rgba(190, 24, 93, .84));
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.4);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 18px 44px rgba(190, 24, 93, .3), inset 0 1px 0 rgba(255, 255, 255, .55);
}

body.tema-glass .cta h2 {
  background: none;
  -webkit-text-fill-color: #fff;
  filter: none;
  color: #fff;
  text-shadow: 0 2px 12px rgba(131, 24, 67, .45);
}

body.tema-glass .cta p {
  color: #fff0f7;
  text-shadow: none;
}

body.tema-glass .cta .terima-kasih {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .55);
}

body.tema-glass .cta .tombol-putih {
  background: rgba(255, 255, 255, .86);
  color: var(--g-judul);
}

/* ---------- Footer kaca ---------- */
body.tema-glass .footer {
  margin-top: 2rem;
  background: linear-gradient(180deg, var(--kaca), var(--kaca-pink));
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  border-top: 1px solid var(--kaca-garis);
  border-radius: 2rem 2rem 0 0;
  box-shadow: 0 -10px 36px rgba(190, 24, 93, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
  color: var(--g-teks);
}

body.tema-glass .footer .nama {
  color: var(--g-judul);
  text-shadow: var(--g-glow);
}

body.tema-glass .footer .menu a {
  color: var(--g-teks);
  font-weight: 600;
}

body.tema-glass .footer .menu a:hover {
  color: var(--g-judul);
}

body.tema-glass .footer .ajak-follow {
  color: var(--g-teks);
  font-weight: 600;
}

body.tema-glass .footer .sosmed a {
  background: rgba(255, 255, 255, .45);
  border: 1px solid var(--kaca-garis);
  color: var(--g-judul);
  box-shadow: 0 6px 16px rgba(190, 24, 93, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
}

body.tema-glass .footer .sosmed a:hover {
  background: var(--g-judul);
  color: #fff;
}

body.tema-glass .footer .hak {
  border-top-color: rgba(190, 24, 93, .22);
  color: var(--g-teks);
  opacity: .85;
}

/* ---------- Carousel video ---------- */
body.tema-glass .vcard {
  padding: 6px;
}

body.tema-glass .carousel-panah {
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--kaca-garis);
  color: var(--g-judul);
  box-shadow: 0 8px 20px rgba(190, 24, 93, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.tema-glass .titik {
  background: rgba(255, 255, 255, .75);
}

body.tema-glass .titik.aktif {
  background: linear-gradient(90deg, #ec4899, #be185d);
}

/* ---------- NAVBAR KACA ---------- */
body.tema-glass .logo-img {
  filter: url(#hapus-latar) drop-shadow(0 4px 12px rgba(255, 255, 255, .7));
}

body.tema-glass .nav-menu a {
  color: var(--g-teks);
}

body.tema-glass .nav-menu a:hover {
  background: rgba(255, 255, 255, .55);
  color: var(--g-judul);
}

body.tema-glass .nav-menu a.aktif {
  background: rgba(255, 255, 255, .72);
  color: var(--g-judul);
  box-shadow: inset 0 0 0 1.5px rgba(244, 114, 182, .75), 0 4px 12px rgba(190, 24, 93, .14);
}

body.tema-glass .lang-toggle {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  border: 1px solid var(--kaca-garis);
  color: var(--g-teks);
  box-shadow: var(--kaca-bayang);
}

body.tema-glass .lang-toggle:hover {
  background: var(--g-judul);
  border-color: var(--g-judul);
  color: #fff;
}

@media (min-width: 1081px) {
  body.tema-glass .nav-kiri,
  body.tema-glass .nav-kanan {
    background: linear-gradient(145deg, rgba(255, 255, 255, .44), var(--kaca-pink));
    -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
    backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
    border: 1px solid var(--kaca-garis);
    box-shadow: var(--kaca-bayang);
  }
}

@media (max-width: 1080px) {
  body.tema-glass .nav-isi {
    background: linear-gradient(145deg, rgba(255, 255, 255, .5), var(--kaca-pink));
    -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
    backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
    border: 1px solid var(--kaca-garis);
    box-shadow: var(--kaca-bayang);
  }

  body.tema-glass .nav-menu {
    background: rgba(255, 246, 250, .86);      /* menu dropdown dibuat lebih pekat agar mudah dibaca */
    border: 1px solid var(--kaca-garis);
    box-shadow: 0 16px 36px rgba(190, 24, 93, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  }

  body.tema-glass .lang-toggle {
    background: rgba(255, 255, 255, .6);
    box-shadow: none;
  }

  body.tema-glass .nav-toggle {
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--kaca-garis);
    color: var(--g-judul);
  }
}

/* ---------- Kartu & petunjuk intro ikut gaya kaca ---------- */
body.tema-glass .w-kartu,
body.tema-glass .w-petunjuk {
  background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 214, 233, .42));
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  border: 1px solid var(--kaca-garis);
  box-shadow: var(--kaca-bayang);
}

body.tema-glass .w-kartu h2 {
  color: var(--g-judul);
}

body.tema-glass .w-kartu p,
body.tema-glass .w-petunjuk {
  color: var(--g-teks);
}

/* ---------- Kartu kaca tambahan: hero, judul pembuka section, kotak tombol Shopee ---------- */
body.tema-glass .hero-kaca,
body.tema-glass .judul-tengah,
body.tema-glass .order-shopee {
  background: linear-gradient(145deg, var(--kaca), var(--kaca-pink));
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  border: 1px solid var(--kaca-garis);
  box-shadow: var(--kaca-bayang);
}

body.tema-glass .hero-kaca {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 2rem) clamp(1.1rem, 3vw, 2.6rem);
  border-radius: 2.2rem;
}

body.tema-glass .judul-tengah {
  padding: 1.8rem 2rem 2rem;
  border-radius: 2rem;
}

body.tema-glass .order-shopee {
  padding: 1.6rem 1.8rem;
  border-radius: 1.8rem;
}

body.tema-glass .order-shopee .info-pelunasan {
  margin-top: 1rem;
}

/* judul welcome: 1 baris di layar lebar, di HP dibagi rata */
body.tema-glass .judul-welcome {
  text-wrap: balance;
}

@media (min-width: 700px) {
  body.tema-glass .judul-welcome {
    white-space: nowrap;
  }
}

/* hero sekarang punya kartu (lebih tinggi), jadi isinya sedikit dikecilkan supaya tetap muat 1 layar */
body.tema-glass .w-scrolly > .w-hero {
  padding-top: clamp(84px, 12vh, 130px);
}

@media (min-width: 700px) {
  body.tema-glass .w-hero .hero-mahkota {
    width: clamp(90px, 16vh, 190px);
  }

  body.tema-glass .w-hero h1 {
    font-size: clamp(1.9rem, min(5.6vw, 7.4vh), 3.8rem);
  }
}

@media (max-width: 699px) {
  body.tema-glass .w-scrolly > .w-hero {
    padding-top: clamp(84px, 12vh, 100px);
  }

  body.tema-glass .w-hero .hero-mahkota {
    width: clamp(84px, 13vh, 130px);
  }

  body.tema-glass .judul-tengah {
    padding: 1.4rem 1.2rem 1.6rem;
  }
}

/* ===== Halaman Kategori / Bahan / Figure ===== */
body.tema-glass .kategori-intro .judul-tengah h1,
body.tema-glass .kategori-bagian .judul-tengah h2,
body.tema-glass .figure-intro .judul-tengah h1 {
  text-shadow: none;                       /* panel halaman ini punya glow sendiri, tidak cocok dengan teks gradasi */
}

body.tema-glass .kategori-intro .judul-tengah p,
body.tema-glass .kategori-bagian .judul-tengah p,
body.tema-glass .figure-intro .judul-tengah p,
body.tema-glass #bahan .judul-tengah p {
  color: var(--g-teks);
  font-weight: 600;
  text-shadow: var(--g-glow);
}

body.tema-glass #bahan .penanda {
  color: var(--g-aksen);
}

/* tombol loncat kategori */
body.tema-glass .kategori-nav a {
  background: linear-gradient(145deg, rgba(255, 255, 255, .55), var(--kaca-pink));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--kaca-garis);
  color: var(--g-judul);
  box-shadow: 0 6px 16px rgba(190, 24, 93, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
}

body.tema-glass .kategori-nav a:hover {
  background: linear-gradient(135deg, #ec4899, #be185d);
  border-color: transparent;
  color: #fff;
}

/* item bahan & figure (nama + kartu foto) jadi 1 kartu kaca */
body.tema-glass .item-bahan,
body.tema-glass .item-figure {
  padding: .8rem .8rem 1rem;
  border-radius: 1.8rem;
  background: linear-gradient(145deg, var(--kaca), var(--kaca-pink));
  -webkit-backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kaca-blur)) saturate(1.5);
  border: 1px solid var(--kaca-garis);
  box-shadow: var(--kaca-bayang);
}

body.tema-glass .nama-bahan {
  margin-bottom: .6rem;
}

/* kartu foto flip (tanpa backdrop-filter di sisi flip supaya animasi 3D tetap mulus) */
body.tema-glass .kartu-foto,
body.tema-glass .kartu-figure {
  box-shadow: 0 12px 28px rgba(190, 24, 93, .22);
}

body.tema-glass .flip-depan,
body.tema-glass .flip-belakang {
  border: 2px solid rgba(255, 255, 255, .9);
}

body.tema-glass .flip-belakang {
  background: linear-gradient(145deg, rgba(255, 228, 243, .96), rgba(251, 168, 209, .94));
  color: var(--g-teks);
}

body.tema-glass .flip-kategori {
  color: var(--g-judul);
}

body.tema-glass .flip-tombol {
  background: linear-gradient(135deg, #ec4899, #be185d);
  box-shadow: 0 6px 14px rgba(190, 24, 93, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* popup foto (lightbox) */
body.tema-glass .lightbox {
  background: rgba(131, 24, 67, .42);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

body.tema-glass .lb-img {
  border-color: rgba(255, 255, 255, .9);
}

/* ---------- Cadangan: browser tanpa backdrop-filter -> kaca dibuat lebih pekat ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.tema-glass {
    --kaca: rgba(255, 255, 255, .78);
    --kaca-pink: rgba(255, 226, 240, .7);
  }
}

/* ---------- Gerak dikurangi: video latar tidak diputar (poster tetap tampil) ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-video video {
    display: none;
  }
}