/* Gaya non-Tailwind: animasi masuk, mega-menu, tipografi artikel, lenis. */
.ledger-bg { background-image: linear-gradient(to right, rgba(13,71,70,.05) 1px, transparent 1px); background-size: 32px 100%; }
.ledger-bg-dark { background-image: linear-gradient(to right, rgba(52,211,153,.07) 1px, transparent 1px); background-size: 32px 100%; }
.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.nums { font-variant-numeric: tabular-nums; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Muncul saat di-scroll (pengganti framer-motion whileInView) */
.zf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1) var(--zf-d,0s), transform .7s cubic-bezier(.22,1,.36,1) var(--zf-d,0s); }
.zf-reveal.zf-in { opacity: 1; transform: none; }
@keyframes zf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.zf-rise { opacity: 0; animation: zf-rise .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--zf-d,0s); }
@keyframes zf-slide { from { transform: translateY(112%); } to { transform: none; } }
.zf-slide { transform: translateY(112%); animation: zf-slide .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--zf-d,0s); }
@keyframes zf-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.zf-chip { animation: zf-float 6s ease-in-out infinite; }

/* Mega-menu */
.zf-mega { opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98); transition: opacity .2s, transform .2s, visibility .2s; }
.zf-mega-wrap.is-open .zf-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.zf-mega-wrap.is-open > .zf-mega-btn { background: #fff; color: #0D4746; }
.zf-mega-wrap.is-open .zf-chev, .zf-acc.is-open .zf-chev { transform: rotate(180deg); }

/* Dasbor mock */
.zf-dash-inner { transition: transform .15s ease-out; transform-style: preserve-3d; }
.zf-bar { transition: height .8s cubic-bezier(.22,1,.36,1); }
.zf-row { opacity: 0; transform: translateX(16px); transition: opacity .5s, transform .5s; }
.zf-dash.zf-in .zf-row { opacity: 1; transform: none; }
.zf-dash.zf-in .zf-row:nth-child(1) { transition-delay: .7s; } .zf-dash.zf-in .zf-row:nth-child(2) { transition-delay: .82s; } .zf-dash.zf-in .zf-row:nth-child(3) { transition-delay: .94s; }

/* Isi artikel / halaman legal */
.zf-prose { color: #4B6360; font-size: 1.0625rem; line-height: 1.8; }
.zf-prose p { margin: 0 0 1.25em; }
.zf-prose h2 { font-family: 'Cabinet Grotesk', system-ui, sans-serif; color: #0B2220; font-size: 1.5rem; font-weight: 700; margin: 2em 0 .6em; }
.zf-prose h3 { font-family: 'Cabinet Grotesk', system-ui, sans-serif; color: #0B2220; font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 .5em; }
.zf-prose a { color: #0D4746; font-weight: 700; text-decoration: underline; }
.zf-prose ul, .zf-prose ol { margin: 0 0 1.25em 1.25em; } .zf-prose ul { list-style: disc; } .zf-prose ol { list-style: decimal; }
.zf-prose strong { color: #0B2220; }
.zf-prose img { border-radius: 1.25rem; max-width: 100%; height: auto; }
.zf-prose blockquote { border-left: 3px solid #34D399; padding-left: 1rem; color: #0B2220; font-style: italic; }
.custom-logo-link { display: inline-flex; }

/* Demo interaktif */
.zf-tt { position: absolute; pointer-events: none; z-index: 5; background: #071817; border: 1px solid #155E5B; color: #fff; border-radius: 12px; padding: 8px 12px; font: 12px 'JetBrains Mono', monospace; white-space: nowrap; opacity: 0; transition: opacity .12s; }
.zf-tt.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-marquee, .animate-float, .zf-chip { animation: none !important; }
  .zf-reveal, .zf-rise, .zf-slide, .zf-row { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}