/* Frosted Glass Inset: Transparansi. Rollback: hapus <link> transparansi-clay */
body:has(.topbar) {
  --ink:#1d2b36; --ink2:#34495a; --ink3:#4d6070; --cream2:rgba(214,228,238,.55); --cream3:rgba(255,255,255,.9);
  --gr:#0b6b45; --gr2:#16a34a;
  --glass:rgba(255,255,255,.58);
  --in:inset 4px 4px 9px rgba(90,115,140,.2), inset -4px -4px 9px rgba(255,255,255,.95);
  --in-sm:inset 3px 3px 6px rgba(90,115,140,.2), inset -3px -3px 6px rgba(255,255,255,.95);
  --pane:0 18px 30px -20px rgba(70,100,130,.35), inset 0 0 0 1.5px rgba(255,255,255,.9);
  background:
    radial-gradient(45% 35% at 90% 5%, rgba(134,239,172,.3), transparent 70%),
    radial-gradient(45% 35% at 5% 45%, rgba(125,211,252,.3), transparent 70%),
    radial-gradient(40% 30% at 70% 95%, rgba(196,181,253,.25), transparent 70%),
    #eef3f6;
  color:var(--ink);
}

/* ===== Header situs (hanya halaman ini) ===== */
body:has(.topbar) .site-header, body:has(.topbar) .site-header.scrolled {
  background:rgba(238,243,246,.8); border-bottom:1px solid #fff; box-shadow:0 10px 24px -14px rgba(70,100,130,.4);
}
body:has(.topbar) .title-text { background:none; -webkit-text-fill-color:var(--ink); color:var(--ink); }
body:has(.topbar) .nav-capsule { background:var(--glass); border:0; box-shadow:var(--in-sm); }
body:has(.topbar) .nav-menu a { color:var(--ink3); }
body:has(.topbar) .nav-menu a::before { background:rgba(22,163,74,.1); }
body:has(.topbar) .nav-menu a:hover { color:var(--gr2); }
body:has(.topbar) .nav-menu a.active { background:#fff; color:var(--gr2); border:0; box-shadow:0 6px 12px -6px rgba(70,100,130,.4); }
body:has(.topbar) .search-toggle, body:has(.topbar) .menu-toggle { background:var(--glass); border:0; color:var(--ink); box-shadow:var(--in-sm); }
body:has(.topbar) .menu-toggle span { background:var(--ink); }

/* ===== Topbar filter ===== */
body:has(.topbar) .topbar { background:var(--glass); backdrop-filter:blur(14px); box-shadow:0 14px 24px -18px rgba(70,100,130,.5); border-bottom:1px solid #fff; }
body:has(.topbar) .topbar-brand { border-right:1px solid rgba(90,115,140,.15); }
body:has(.topbar) .topbar-dot { background:var(--gr2); box-shadow:0 0 0 3px rgba(22,163,74,.18); animation:none; }
body:has(.topbar) .topbar-name { color:var(--ink); }
body:has(.topbar) .topbar-sub, body:has(.topbar) .topbar-filter label { color:var(--ink3); }
body:has(.topbar) .topbar-filter select {
  background-color:rgba(255,255,255,.55); border:0; color:var(--ink); box-shadow:var(--in-sm); border-radius:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234d6070' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body:has(.topbar) .topbar-filter select:focus { background-color:#fff; box-shadow:var(--in-sm), 0 0 0 2px rgba(22,163,74,.35); }
body:has(.topbar) .topbar-filter select option { background:#fff; color:var(--ink); }
body:has(.topbar) .btn-go {
  background:linear-gradient(160deg,#4ade80,#16a34a); color:#fff; border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 16px -8px rgba(22,163,74,.6);
}
body:has(.topbar) .topbar-year { border-left:1px solid rgba(90,115,140,.15); color:var(--gr); }

/* ===== Hero ===== */
body:has(.topbar) .hero-strip { background:transparent; }
body:has(.topbar) .hero-strip::before { background:none; }
body:has(.topbar) .hero-bg-num { color:rgba(70,100,130,.06); }
body:has(.topbar) .hero-eyebrow-bar { background:var(--gr2); }
body:has(.topbar) .hero-eyebrow-txt { color:var(--gr); }
body:has(.topbar) .hero-title { color:var(--ink); text-shadow:0 2px 0 #fff; }
body:has(.topbar) .hero-title em { color:var(--gr2); }
body:has(.topbar) .hero-desc { color:var(--ink3); }
body:has(.topbar) .hero-stat-big-label { color:var(--ink3); }
body:has(.topbar) .hero-stat-big-val { color:var(--gr); }
body:has(.topbar) .hero-stat-big-sub { color:var(--ink3); }
body:has(.topbar) .hero-pills { background:var(--glass); border-top:1px solid #fff; box-shadow:var(--pane); }
body:has(.topbar) .hero-pill { border-right:1px solid rgba(90,115,140,.14); }
body:has(.topbar) .hero-pill:hover { background:rgba(255,255,255,.4); }
body:has(.topbar) .pill-icon { background:rgba(255,255,255,.6); box-shadow:var(--in-sm); }
body:has(.topbar) .pill-label { color:var(--ink3); }
body:has(.topbar) .pill-val { color:var(--ink); }
body:has(.topbar) .pill-val[style] { color:var(--gr) !important; }
body:has(.topbar) .pill-breakdown { color:var(--ink3); font-size:11px; }

/* ===== Banner privasi ===== */
body:has(.topbar) .privasi-banner { background:rgba(255,255,255,.5); border:0; border-left:4px solid var(--gr2); box-shadow:var(--in); }
body:has(.topbar) .privasi-body h3 { color:var(--ink); }
body:has(.topbar) .privasi-body p { color:var(--ink3); }

/* ===== Judul seksi ===== */
body:has(.topbar) .sec-head h2 { color:var(--ink); }
body:has(.topbar) .sec-line { background:linear-gradient(90deg,rgba(90,115,140,.25),transparent); }
body:has(.topbar) .sec-pill { background:rgba(255,255,255,.55); border:0; color:var(--ink3); box-shadow:var(--in-sm); }

/* ===== Kartu bulan (accordion) ===== */
body:has(.topbar) .bulan-details { background:rgba(255,255,255,.5); border:0; border-radius:18px; box-shadow:var(--in); }
body:has(.topbar) .bulan-details[open] { background:var(--glass); box-shadow:var(--pane); border:0; }
body:has(.topbar) .bulan-summary:hover { background:rgba(255,255,255,.45); }
body:has(.topbar) .bulan-details[open] .bulan-summary { background:rgba(255,255,255,.5); border-bottom:1px solid rgba(90,115,140,.14); }
body:has(.topbar) .bulan-summary .s-nama, body:has(.topbar) .bulan-summary .s-count { color:var(--ink3); }
body:has(.topbar) .bulan-summary .s-nominal { color:var(--gr); }
body:has(.topbar) .bulan-summary .s-nominal[style] { color:#b91c1c !important; }
body:has(.topbar) .bulan-summary .s-chevron { box-shadow:none; }

/* ===== Tabel & panel ===== */
body:has(.topbar) .tbl-wrap { background:var(--glass); border:0; border-radius:24px; box-shadow:var(--pane); }
body:has(.topbar) .tbl-header { background:rgba(255,255,255,.5); border-bottom:1px solid rgba(90,115,140,.14); }
body:has(.topbar) .tbl-title { color:var(--ink); }
body:has(.topbar) .tbl-badge { background:rgba(255,255,255,.6); border:0; color:var(--gr); box-shadow:var(--in-sm); }
body:has(.topbar) thead th { background:rgba(214,228,238,.55); color:var(--ink2); border-bottom:1px solid rgba(90,115,140,.15); }
body:has(.topbar) tbody tr { border-bottom:1px solid rgba(90,115,140,.12); }
body:has(.topbar) tbody tr:hover { background:rgba(255,255,255,.5); }
body:has(.topbar) td.no, body:has(.topbar) td.tgl, body:has(.topbar) td.ket { color:var(--ink3); }
body:has(.topbar) td.nama { color:var(--ink); }
body:has(.topbar) td.nominal { color:var(--gr); }
body:has(.topbar) td.nominal[style] { color:#b91c1c !important; }
body:has(.topbar) tfoot tr td { background:rgba(214,228,238,.55); border-top:1px solid rgba(90,115,140,.2); color:var(--ink2); }
body:has(.topbar) tfoot td.nominal { color:var(--gr); }
body:has(.topbar) .empty { color:var(--ink3); }

/* Baris "Total" (inline style) */
body:has(.topbar) .tbl-wrap > div[style*="linear-gradient(135deg,var(--cream2)"] {
  background:rgba(214,228,238,.45) !important; box-shadow:var(--in-sm);
}

/* Kotak ringkasan saldo (inline style) */
body:has(.topbar) .tbl-wrap div[style*="#f0fdf4"] { background:rgba(214,245,225,.55) !important; border:0 !important; box-shadow:var(--in) !important; }
body:has(.topbar) .tbl-wrap div[style*="#fff1f2"] { background:rgba(255,226,230,.55) !important; border:0 !important; box-shadow:var(--in) !important; }
body:has(.topbar) .tbl-wrap div[style*="var(--g1),var(--g2)"] { box-shadow:0 14px 22px -10px rgba(18,35,24,.55), inset 0 1px 0 rgba(255,255,255,.2) !important; }

body:has(.topbar) .divider-line { background:linear-gradient(90deg,transparent,rgba(90,115,140,.25),transparent); }
body:has(.topbar) .divider-sym { color:var(--gr2); }

/* ===== HP ===== */
@media (max-width:700px) {
  body:has(.topbar) .topbar { backdrop-filter:none; background:rgba(238,243,246,.95); }
  body:has(.topbar) .tbl-wrap { border-radius:20px; }
}

/* ===== Kedalaman 3D v2 ===== */
body:has(.topbar) {
  --pane3: 0 2px 3px rgba(70,100,130,.12),
           0 14px 20px -10px rgba(70,100,130,.3),
           0 34px 50px -26px rgba(70,100,130,.45),
           inset 0 1.5px 0 #fff,
           inset 0 0 0 1px rgba(255,255,255,.7),
           inset 0 -10px 16px rgba(150,180,205,.18);
  --in3: inset 6px 6px 12px rgba(80,105,130,.28),
         inset -6px -6px 12px rgba(255,255,255,1),
         inset 0 0 0 1px rgba(255,255,255,.4);
}

/* Panel utama: terangkat, ada kilau di tepi atas */
body:has(.topbar) .tbl-wrap,
body:has(.topbar) .hero-pills {
  box-shadow: var(--pane3);
  position: relative;
}
body:has(.topbar) .tbl-wrap::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}

/* Filter & kartu bulan: tenggelam lebih dalam */
body:has(.topbar) .topbar-filter select { box-shadow: var(--in3); }
body:has(.topbar) .bulan-details { box-shadow: var(--in3); transition: box-shadow .2s; }
body:has(.topbar) .bulan-details[open] { box-shadow: var(--pane3); }
body:has(.topbar) .privasi-banner,
body:has(.topbar) .tbl-wrap div[style*="#f0fdf4"],
body:has(.topbar) .tbl-wrap div[style*="#fff1f2"] { box-shadow: var(--in3) !important; }

/* Ikon pil & badge: bulatan cekung */
body:has(.topbar) .pill-icon { box-shadow: var(--in3); border-radius: 14px; }
body:has(.topbar) .tbl-badge,
body:has(.topbar) .sec-pill { box-shadow: var(--in3); }

/* Tombol Tampilkan: cembung seperti kaca hijau */
body:has(.topbar) .btn-go {
  background: linear-gradient(170deg, #6ee7a0 0%, #16a34a 60%, #0f7a3a 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.7), inset 0 -4px 6px rgba(0,70,30,.3),
              0 12px 18px -8px rgba(22,163,74,.65), 0 3px 4px rgba(22,163,74,.3);
}
body:has(.topbar) .btn-go:active {
  box-shadow: inset 0 3px 6px rgba(0,70,30,.4); transform: translateY(1px);
}

/* Kartu saldo hijau tua: tebal & berlapis */
body:has(.topbar) .tbl-wrap div[style*="var(--g1),var(--g2)"] {
  box-shadow: 0 18px 26px -12px rgba(18,35,24,.6), 0 4px 6px rgba(18,35,24,.25),
              inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -8px 14px rgba(0,0,0,.25) !important;
}

/* Header situs */
body:has(.topbar) .nav-capsule { box-shadow: var(--in3); }
body:has(.topbar) .nav-menu a.active { box-shadow: 0 10px 16px -8px rgba(70,100,130,.5), inset 0 1.5px 0 #fff; }

/* HP: bayangan lebih ringan */
@media (max-width: 700px) {
  body:has(.topbar) {
    --pane3: 0 12px 18px -10px rgba(70,100,130,.35), inset 0 1.5px 0 #fff, inset 0 -6px 10px rgba(150,180,205,.15);
    --in3: inset 4px 4px 8px rgba(80,105,130,.26), inset -4px -4px 8px rgba(255,255,255,1);
  }
}