:root{--ff-mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;--ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;}
/*! Used font faces */
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI");ascent-override:95%;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Italic");ascent-override:95%;font-style:italic;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold");ascent-override:95%;font-weight:600;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold Italic");ascent-override:95%;font-style:italic;font-weight:600;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold");ascent-override:95%;font-weight:700;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold Italic");ascent-override:95%;font-style:italic;font-weight:700;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Bold");ascent-override:90%;font-weight:800;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Bold Italic");ascent-override:95%;font-style:italic;font-weight:800;}
:root{/* Canonical palette - single source for colour. *//* DARK - 35% */--black:#07080A;--black-2:#0F0F13;--charcoal:#1A1A1F;--graphite:#24252A;/* LIGHT - 40% */--light-bg:#F4F5F4;--light-panel:#FAFAF9;--light-panel-2:#FFFFFF;/* MIST / BRIDGE - 15% */--stone:#5D5F63;--mist:#ADAFB3;--foam:#C9CBCE;--foam-2:#DEE0E2;--dark-bg:#0F0F13;--dark-panel:#1A1A1F;--dark-panel-2:#24252A;--bridge:#ADAFB3;--bridge-soft:#DEE0E2;/* STEEL ACCENT - 10% */--accent-steel:#60788E;--accent-steel-soft:#8FA4B3;--accent-steel-muted:#A9B8C3;--accent-steel-pale:#CBD5DC;--accent-steel-wash:#EDF2F4;/* BLUE AURA */--blue:#60788E;--blue-soft:#91A8BA;--blue-pale:#C3D0DA;--blue-wash:#EDF2F5;/* SEMANTIC */--crit:#D14B4B;--high:var(--accent-steel);--med:#C9B458;--low:#6E9B6B;--ok:#5E8D86;/* TEXT */--text:#1A1A1F;--text-strong:#07080A;--text-secondary:#5D5F63;--text-muted:#7D8185;--text-soft:#ADAFB3;--text-dark:#DEE0E2;--text-dark-secondary:#ADAFB3;/* BORDER */--line-dark:rgba(222,224,226,.12);--line-dark-strong:rgba(222,224,226,.20);--line-light:#D7D9D8;--line-light-soft:#E5E7E6;--line-light-strong:#C9CBCE;--line-accent:rgba(96,120,142,.28);/* INTERACTION */--hover-light:#ECEEED;--active-light:#E3E6E4;--hover-dark:#24252A;--active-dark:#2C2D32;--accent:var(--accent-steel);--accent-hover:#4D657A;--accent-soft:var(--accent-steel-pale);/* GEOMETRY (unchanged: the app's own scale) */--radius:.3rem;--radius-sm:.3rem;/* SHADOW */--shadow:0 16px 44px rgba(7,8,10,.10);--shadow-soft:0 8px 24px rgba(7,8,10,.07);/* TYPOGRAPHY (unchanged: the app's own stacks) */--ff-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;--ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color-scheme:light;/* Legacy aliases: the app's older token names, pointed at the palette above so every existing rule follows it without being rewritten. */--porcelain:var(--light-bg);--paper:var(--light-panel);--soft-steel:var(--foam-2);--steel-gray:var(--stone);--ink:var(--black);--burnt-copper:var(--accent-steel);--burnt-copper-soft:var(--accent-steel-pale);--panel:var(--light-panel);--panel2:var(--light-panel);--panel-soft:var(--light-panel);--panel-raised:var(--light-panel-2);--panel-fade:var(--light-panel);--nav:var(--light-panel);--bg:var(--light-bg);--light:var(--light-bg);--surface:var(--light-bg);--border:var(--line-light);--line:var(--line-light);--line2:var(--line-light-soft);--line-soft:var(--line-light-soft);--stroke:var(--line-light);--btn:var(--graphite);--primary:var(--graphite);--primary2:var(--black);--strong:var(--black);--dark:var(--black);--muted:var(--text-muted);--faded:var(--stone);--accent-h:var(--accent-hover);--accent-s:var(--accent-steel-pale);--on:var(--light-panel-2);--on-accent:var(--light-panel-2);--inverse:var(--light-panel-2);--good:var(--ok);--success:var(--ok);--ok-soft:rgba(94,141,134,.16);--success-soft:rgba(94,141,134,.16);--bad:var(--crit);--danger:var(--crit);--danger-soft:rgba(209,75,75,.14);--warn:var(--med);--blue-line:var(--blue-pale);--shadow-modal:var(--shadow);--font:var(--ff-sans);--pointer-x:50vw;--pointer-y:50vh;--fs-xs:11px;--fs-sm:12px;--fs-base:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:18px;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--lh-tight:1.2;--lh-snug:1.35;--lh-normal:1.5;--lh-relaxed:1.7;--btn-bg:#444746;--btn-fg:#f5f6f3;--btn-border:#444746;}

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            background: var(--porcelain);
        }

        body {
            min-height: 100svh;
            margin: 0;
            overflow: hidden;
            color: var(--ink);
            background:
                radial-gradient(circle at 50% 120%, rgba(93,95,99,0.14), transparent 42rem),
                linear-gradient(rgba(244,241,236,.74), rgba(244,241,236,.90)),
                url('/assets/img/bg-intro.png') center center / cover no-repeat fixed,
                var(--porcelain);
            font-family:var(--ff-sans) !important;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;

        }

        button {
            font-family:var(--ff-sans) !important;
        }

        .noise,
        .scanline,
        .vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
        }

        .noise {
            z-index: 1;
            opacity: 0.024;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
        }

        .scanline {
            z-index: 0;
            background-image:
                linear-gradient(rgba(93,95,99,0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(93,95,99,0.07) 1px, transparent 1px);
            background-size: 44px 44px;
            -webkit-mask-image: linear-gradient(to bottom, #202426, transparent 92%);
            mask-image: linear-gradient(to bottom, #202426, transparent 92%);
        }

        .vignette {
            z-index: 4;
        }

        .stage {
            position: relative;
            z-index: 2;
            display: grid;
            place-items: center;
            min-height: 100svh;
            padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
            isolation: isolate;
        }

        .panel {
            position: relative;
            width: min(42rem, calc(100vw - 2rem));
            padding: clamp(1.3rem, 4vw, 2.4rem);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: linear-gradient(145deg, rgba(250,250,249,0.88), rgba(244,241,236,0.76));
            backdrop-filter: blur(1.25rem) saturate(110%);
        }

        .panel::before {
            content: "";
            position: absolute;
            inset: -1px;
            z-index: -1;
            border-radius: inherit;
            background: linear-gradient(120deg, rgba(96,120,142,0.48), transparent 35%, rgba(36,37,42,0.12));
            opacity: 0.42;
            mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
            mask-composite: exclude;
            padding: 1px;
        }

        .eyebrow {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            margin: 0 0 1.25rem;
            color: var(--steel-gray);
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .status-dot {
            width: 0.46rem;
            height: 0.46rem;
            border-radius: 50%;
            background: var(--btn-bg);
            animation: status-pulse 2.4s ease-in-out infinite;
        }

        .hero {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: clamp(1rem, 4vw, 1.8rem);
        }

        .hero-emoji {
            position: relative;
            display: grid;
            place-items: center;
            width: clamp(5.5rem, 17vw, 8rem);
            aspect-ratio: 1;
            border: 1px solid rgba(96,120,142,0.34);
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(250,250,249,0.92), transparent 36%),
                rgba(250,250,249,0.92);
            color: var(--graphite);
            font-family:var(--ff-sans);
            font-size: clamp(3.2rem, 10vw, 5.4rem);
            font-variant-emoji: emoji;
            filter: grayscale(0.25) saturate(0.75) contrast(1);
            user-select: none;
            overflow: hidden;
        }

        h1 {
            margin: 0;
            color: var(--ink);
            font-size: clamp(2rem, 8vw, 4.6rem);
            line-height: 0.94;
            letter-spacing: -0.07em;
        }

        h1 span {
            color: var(--burnt-copper);
        }

        .subtitle {
            margin: 0.85rem 0 0;
            max-width: 30rem;
            color: var(--graphite);
            font-size: clamp(0.78rem, 2vw, 0.95rem);
            line-height:var(--lh-relaxed);
        }

        .meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        .chip {
            padding: 0.46rem 0.65rem;
            border: 1px solid rgba(36,37,42,0.12);
            border-radius: var(--radius);
            color: var(--steel-gray);
            background: rgba(250,250,249,0.62);
            font-size: 0.68rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-decoration: none;
        }

        .controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 1.7rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(36,37,42,0.1);
        }

        .hint {
            color: var(--steel-gray);
            font-size: 0.7rem;
            line-height:var(--lh-normal);
        }

        @keyframes status-pulse {
            0%, 100% { opacity: 0.66; }
            50% { opacity: 1; }
        }

        @media (max-width: 36rem) {
            .hero {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-emoji {
                margin-inline: auto;
            }

            .meta,
            .controls {
                justify-content: center;
            }

            .controls {
                flex-direction: column;
            }

            .hint {
                text-align: center;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                animation-duration: 1ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 1ms !important;
            }
        }

/* Unified button appearance — authoritative, keep last. */
.btn,button,.btn-sm,.btn-xs,.page-link,.page-link--primary,
input[type=submit],input[type=button],.swal2-confirm,.swal2-cancel{
    border-color:var(--btn-border)!important;
    color:var(--btn-fg)!important;
    background:var(--btn-bg)!important;
}
.btn:hover,button:hover,.btn-sm:hover,.btn-xs:hover,.page-link:hover,
input[type=submit]:hover,input[type=button]:hover{
    border-color:var(--btn-border)!important;
    color:var(--btn-fg)!important;
    background:var(--btn-bg)!important;
    filter:brightness(1.18);
}
.btn:disabled,button:disabled,.btn-sm:disabled,.btn-xs:disabled,
input[type=submit]:disabled,input[type=button]:disabled{
    opacity:.55;
    filter:none;
}

/* Layar sentuh: chip tautan footer jadi target 44px (WCAG 2.5.5). */
@media (pointer: coarse) {
    .chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================================================
   Global font normalization — family only; no size/line-height/spacing changes.
   ========================================================================== */
:root {
    --font-family-apple:var(--ff-sans);
    --font-family-code:var(--ff-mono);
    --font-family-default:var(--ff-sans);
    --font-family-segoe:var(--ff-sans);
    --font-family-system:var(--ff-sans);
    --font:var(--ff-sans);
    --mono:var(--ff-mono);
}
html body {
    font-family:var(--font-family-system) !important;
}
html body *:not(.glyphicon):not(.hero-emoji):not(code):not(pre):not(kbd):not(samp) {
    font-family:var(--ff-sans) !important;
}
html body input,
html body input.form-control {
    font-family:var(--font-family-default) !important;
}
html body code,
html body pre,
html body kbd,
html body samp {
    font-family:var(--font-family-code) !important;
}
html body .hero-emoji {
    font-family:var(--ff-sans) !important;
}