/* Custom Stylesheets: assets/css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ===== GLOBAL FONT ===== */
*, *::before, *::after {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.font-mono, code, pre {
    font-family: 'JetBrains Mono', monospace !important;
}

/* ===== HIERARKI TIPOGRAFI ===== */
h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
h4, h5, h6 { font-weight: 600; }
p  { font-weight: 400; line-height: 1.65; }
label { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; }
small { font-weight: 400; font-size: 0.72rem; }
th { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.07em; }
td { font-weight: 400; font-size: 0.875rem; }
button { font-weight: 700; letter-spacing: 0.01em; }
input, select, textarea { font-weight: 500; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== ANIMASI UMUM ===== */
.glow-ball { animation: bounceSlow 6s ease-in-out infinite alternate; }
@keyframes bounceSlow {
    0%   { transform: translateY(0) scale(1); }
    100% { transform: translateY(-20px) scale(1.05); }
}
.custom-shadow-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.custom-shadow-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -8px rgba(0,0,0,0.08); }

/* ===== ANIMASI POPUP ===== */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes checkPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== LANDING PAGE v4 ===== */

/* bg canvas layer */
#bg-canvas { position:absolute; inset:0; width:100%; height:100%; }

/* Glassmorphism form */
.bg-white\/8 { background:rgba(255,255,255,.08); }
.border-white\/8 { border-color:rgba(255,255,255,.08); }

/* Stat card hover */
.stat-card > div { cursor:default; }

/* Route card */
.route-card > div { will-change:transform; }

/* Scroll reveal base (set by JS, just prevent FOUC) */
.reveal-up, .reveal-left, .reveal-right { will-change:transform,opacity; }

/* Counter digits */
.counter { font-variant-numeric:tabular-nums; }

/* Footer link hover underline */
footer a { position:relative; }
footer a::after {
  content:''; position:absolute; bottom:-1px; left:0; width:0; height:1px;
  background:#1e5eff; transition:width .2s;
}
footer a:hover::after { width:100%; }

/* Smooth scroll */
html { scroll-behavior:smooth; }

/* Fix: body bg dark for landing */
body.landing-page { background:#060d1f !important; }