/* ============================================================
   Griity v3 — shared design system
   Tokens + components extracted from home-v3.html
   Used by all secondary pages (Bahasa + English twins).
   ============================================================ */

:root {
    --bg: #F7F4EE;
    --surface: #FFFFFF;
    --navy: #1A2C50;
    --navy-deep: #111E38;
    --ink: #1A2C50;
    --body-c: #4A5874;
    --muted: #8593AC;
    --line: rgba(26,44,80,0.10);
    --line-strong: rgba(26,44,80,0.16);
    --gold: #F6A404;
    --gold-deep: #D98E02;
    --signal: #1F8A5B;
    --error: #E0533D;
    --chip-bg: rgba(26,44,80,0.045);
}

body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--ink); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
[x-cloak] { display: none !important; }

.sys-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
            box-shadow: 0 1px 2px rgba(26,44,80,0.04), 0 16px 40px -28px rgba(26,44,80,0.25); }

.chip { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
        text-transform: uppercase; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.chip-ghost { background: var(--chip-bg); color: var(--body-c); border: 1px solid var(--line); }
.chip-gold { background: rgba(246,164,4,0.12); color: var(--gold-deep); border: 1px solid rgba(246,164,4,0.3); }
.chip-navy { background: rgba(255,255,255,0.07); color: #C8D2E6; border: 1px solid rgba(255,255,255,0.14); }
.chip-signal { background: rgba(31,138,91,0.1); color: var(--signal); border: 1px solid rgba(31,138,91,0.25); }
.chip-error { background: rgba(224,83,61,0.1); color: var(--error); border: 1px solid rgba(224,83,61,0.25); }

.kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.microlabel { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.btn-primary { background: var(--gold); color: var(--navy); font-weight: 700; border-radius: 14px;
               box-shadow: 0 1px 0 rgba(26,44,80,0.08), 0 12px 24px -12px rgba(246,164,4,0.55); transition: all .25s; }
.btn-primary:hover { background: #FFB41E; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(246,164,4,0.6); }
.btn-ghost-dark { border: 1.5px solid rgba(255,255,255,0.22); color: #fff; font-weight: 600; border-radius: 14px; transition: all .25s; }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.btn-ghost-navy { border: 1.5px solid var(--line-strong); color: var(--navy); font-weight: 600; border-radius: 14px; transition: all .25s; }
.btn-ghost-navy:hover { border-color: var(--navy); background: rgba(26,44,80,0.04); }

.grid-dots-dark { background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 28px 28px; }

.flow-divider { height: 36px; width: 1px; margin: 0 auto;
    background-image: linear-gradient(to bottom, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent); position: relative; }
.flow-divider::after { content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
    width: 7px; height: 7px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 4px rgba(246,164,4,0.15); }

/* page-load reveal (gated, reduced-motion safe) */
@keyframes gr-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.gr-rise { animation: gr-rise .6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .gr-rise { animation: none; } }

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 767px) { body { padding-bottom: 72px; } }