/*
  packages/theme/components/card-navbar-restyle.css

  Restyle opasitas & border card (.glass, .fcard) + navbar (header) mengikuti
  pola visual dashboardicons.com (lihat blueprint #3 & #6).

  KEPUTUSAN FINAL (per sesi packages/theme test): semua card cuma "nyala"
  pas disentuh — border/glow/shadow berubah, TAPI TIDAK ADA gerakan
  naik/ngambang (translateY) atau icon scale/rotate. Versi awal file ini
  masih punya hover-lift, sudah dicabut di revisi ini.

  ⚠️ Navbar (rgba(22,20,38,0.55), blur 14px) SENGAJA disamain persis dengan
  dashboard & admin (--bg-surface, sumber kebenaran lintas-proyek). Kalau
  file ini di-link ke index.html produksi, navbar landing bakal beda dari
  yang sekarang — itu bagian dari rollout yang lagi jalan, bukan efek
  samping yang gak disengaja.
*/

.glass{
  background:rgba(20,20,28,0.5);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  transition:border-color .3s, box-shadow .3s;
  position:relative;
  overflow:hidden;
}
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(99,102,241,0.10), transparent);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.glass:hover{
  border-color:rgba(99,102,241,0.25);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}
.glass:hover::after{
  opacity:1;
}

.fcard{
  position:relative;overflow:hidden;padding:28px 24px;
  transition:box-shadow .5s ease, border-color .5s ease;
}
.fcard:hover{box-shadow:0 8px 24px -8px rgba(0,0,0,0.4);}
.fcard::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg, var(--fc-a, var(--accent)), var(--fc-b, var(--accent-hover)));
  transition:opacity .5s ease;pointer-events:none;
}
.fcard:hover::before{opacity:0.05;}
.fcard::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.fcard:hover::after{opacity:1;}
.fcard:hover{border-color:var(--fc-a, var(--accent-subtle));}
.fcard > *{position:relative;z-index:1;}
.ficon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg, var(--fc-a, var(--accent)), var(--fc-b, var(--accent-hover)));
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff;
  box-shadow:0 8px 24px -6px var(--fc-a, var(--accent));
}
.ficon svg{width:24px;height:24px;}

header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  /* position:fixed WAJIB ada di sini — bukan cuma dekorasi. header jadi
     parent dari .mobile-menu (lihat feature-marquee.css sepupu-nya buat
     .mobile-menu sendiri, definisinya per-halaman karena markup link nav
     beda tiap halaman). Karena header position:fixed, dia keluar dari
     document flow — pas .mobile-menu expand (max-height animation),
     konten di bawah header TIDAK ke-geser, cuma ke-overlay. Kalau baris
     ini hilang dari sini, index.html tetep aman (punya header{} inline
     sendiri yang duplikat rule ini), tapi semua halaman lain yang CUMA
     ngandelin file ini bakal punya bug: buka mobile-menu bikin seluruh
     konten halaman ke-dorong ke bawah. */
  background:rgba(10,10,20,0.5);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

/* Icon file (packages/assets/icons/menu.svg, lock.svg, star.svg) —
   gantiin karakter Unicode ☰ / 🔒 / ⭐ yang dulu dipake langsung sebagai
   teks. currentColor tetep ngikutin `color` elemen pembungkusnya, jadi
   .menu-toggle:active{color:var(--accent)} otomatis masih kepake. */
.menu-toggle-icon{width:22px;height:22px;display:block;}
.menu-toggle-icon svg{display:block;width:100%;height:100%;}
.badge-icon{width:14px;height:14px;flex:0 0 auto;display:inline-flex;vertical-align:-2px;}
.badge-icon svg{display:block;width:100%;height:100%;}