/* card.css — kartu kaca (.card) + kartu angka (.st-). Kartu angka sama dengan mockup: gradasi 140° tingkat 500 → 700,
   tepi putih tipis & kilau; teks putih ≥ 4,5:1 di warna dasar (700). */
.card{background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-5);min-width:0}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.card-title{font-size:var(--fs-lg);font-weight:700}
.card-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.card--hover{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card--hover:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.st-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);padding:18px;min-height:136px;color:var(--on-brand);border:1px solid var(--st-line);background:linear-gradient(140deg,var(--c0),var(--c1));box-shadow:0 16px 34px -16px color-mix(in srgb,var(--c1) var(--glow-soft),transparent);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.st-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 15% -10%,var(--card-sheen),transparent 55%)}
.st-card:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px color-mix(in srgb,var(--c1) var(--glow-hover),transparent)}
.st-card--rev{--c0:var(--st-rev-0);--c1:var(--st-rev-1)}
.st-card--cash{--c0:var(--st-cash-0);--c1:var(--st-cash-1)}
.st-card--profit{--c0:var(--st-profit-0);--c1:var(--st-profit-1)}
.st-card--ar{--c0:var(--st-ar-0);--c1:var(--st-ar-1)}
.st-card--exp{--c0:var(--st-exp-0);--c1:var(--st-exp-1)}
.st-card--due{--c0:var(--st-due-0);--c1:var(--st-due-1)}
.st-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--on-brand-soft);margin-bottom:13px}
.st-label{font-size:var(--fs-sm);font-weight:600;color:var(--on-brand)}
.st-value{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.st-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:var(--fs-xs);font-weight:700;color:var(--on-brand)}

@media (max-width:1023px){
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:767px){
  .card{padding:var(--s-4)}
  .st-card{min-height:112px;padding:14px}
  .st-value{font-size:clamp(15px,4.3vw,20px);white-space:nowrap}
}