/* ============================================================
   FiskalDaerah · Lapisan tema FUTURISTIK (dipakai semua halaman)
   Dimuat SETELAH <style> halaman agar meng-override permukaan.
   Markup latar (tambahkan tepat setelah <body>):
     <div class="fz-aurora"><i class="a"></i><i class="b"></i><i class="c"></i></div>
     <div class="fz-grid"></div>
   ============================================================ */

body{ background:#070B16 !important; position:relative; }

/* ---- latar aurora + grid neon ---- */
.fz-aurora,.fz-grid{position:fixed; inset:0; z-index:0; pointer-events:none}
.fz-aurora{overflow:hidden}
.fz-aurora i{position:absolute; display:block; border-radius:50%; filter:blur(85px);
  opacity:.40; mix-blend-mode:screen}
.fz-aurora .a{width:560px;height:560px;background:radial-gradient(circle,#5B8DEF,transparent 70%);top:-200px;left:-140px;animation:fzD1 24s ease-in-out infinite}
.fz-aurora .b{width:520px;height:520px;background:radial-gradient(circle,#9B7BE8,transparent 70%);top:-90px;right:-160px;animation:fzD2 28s ease-in-out infinite}
.fz-aurora .c{width:480px;height:480px;background:radial-gradient(circle,#3DD6B0,transparent 70%);bottom:-220px;left:35%;animation:fzD3 32s ease-in-out infinite}
.fz-grid{background-image:
    linear-gradient(rgba(91,141,239,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,141,239,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 35%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 35%,transparent 100%)}
@keyframes fzD1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(110px,70px) scale(1.15)}}
@keyframes fzD2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,110px) scale(1.1)}}
@keyframes fzD3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-80px) scale(1.18)}}

/* ---- konten di atas latar ---- */
header,main,footer,.wrap{position:relative; z-index:1}
header{background:transparent !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}

/* ---- permukaan jadi kaca (glassmorphism) ---- */
.card,.panel,.chartbox,.tablewrap,.kpi,.spot,.chartbox{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.card:hover,.panel:hover{
  transform:translateY(-4px);
  border-color:rgba(91,141,239,.55) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.5), 0 0 38px -12px #5B8DEF;
}
/* sub-permukaan lebih gelap agar teks/tabel tetap kontras */
.mini,tr.lvl0 td{background:rgba(9,14,26,.55) !important}

/* input/select sedikit kaca */
select,input[type=text]{background:rgba(9,14,26,.6) !important; border-color:rgba(255,255,255,.12) !important}

/* ---- animasi masuk ---- */
@keyframes fzRise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
.card,.kpi,.mini{animation:fzRise .5s both}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
