:root {
            --header-h: 3.5rem;
            --bottom-nav-h: 3.5rem;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --ad-sticky-h: 0px;
            color-scheme: light;
        }

        @media (min-width: 768px) {
            :root { --header-h: 4rem; --bottom-nav-h: 4rem; }
        }

        html.dark { color-scheme: dark; }
        [x-cloak] { display: none !important; }
        html { scrollbar-gutter: stable; }

        body {
            padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--ad-sticky-h));
        }

        main {
            padding-top: var(--header-h);
            min-height: calc(100vh - var(--header-h) - var(--bottom-nav-h) - var(--safe-bottom));
        }

        #page-loader { will-change: opacity; }

        .skip-link {
            position: absolute; top: -100px; left: 8px; z-index: 10002;
            padding: 8px 16px; background: var(--pramuka-main); color: #fff;
            border-radius: 0 0 8px 8px; font-weight: 700; font-size: 12px;
            transition: top .2s ease;
        }
        .skip-link:focus { top: 0; }

        .nav-active-dot {
            position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
            width: 4px; height: 4px; border-radius: 9999px;
            background: var(--pramuka-main);
        }
        .dark .nav-active-dot { background: var(--pramuka-light); }

        @keyframes loader-bar {
            0%   { transform: translateX(-100%); }
            100% { transform: translateX(400%); }
        }
        .loader-bar::before {
            content: ''; position: absolute; inset: 0; width: 30%;
            background: linear-gradient(90deg, transparent, var(--pramuka-main), transparent);
            animation: loader-bar 1.2s ease-in-out infinite;
        }

        .bottom-nav {
            height: var(--bottom-nav-h);
            padding-bottom: var(--safe-bottom);
        }

        .ads-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin: 0.75rem auto;
            position: relative;
            overflow: hidden;
            background: transparent;
            transition: opacity .3s ease;
        }
        .ads-container[data-ad-state="loading"]::before {
            content: 'Memuat iklan...';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #9ca3af;
            font-weight: 700;
        }
        .dark .ads-container[data-ad-state="loading"]::before { color: #4b5563; }

        .ads-container[data-ad-state="filled"]::before { content: none; }
        .ads-container[data-ad-state="unfilled"] { display: none; }

        .ads-label {
            display: block;
            font-size: 8px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: #9ca3af;
            font-weight: 800;
            margin-bottom: 4px;
        }
        .dark .ads-label { color: #4b5563; }

        .ads-top    { min-height: 90px;  max-width: 970px; }
        .ads-inline { min-height: 250px; max-width: 336px; }
        .ads-rect   { min-height: 250px; max-width: 300px; }
        .ads-mid    { min-height: 280px; max-width: 336px; }
        .ads-bottom { min-height: 90px;  max-width: 970px; }

        @media (min-width: 768px) {
            .ads-top, .ads-bottom { min-height: 90px; }
            .ads-inline, .ads-mid  { min-height: 250px; max-width: 728px; }
        }

        .ad-sticky-mobile {
            position: fixed;
            left: 0; right: 0;
            bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
            z-index: 39;
            background: rgba(255,255,255,.98);
            border-top: 1px solid #e5e7eb;
            padding: 4px 8px 6px;
            box-shadow: 0 -4px 12px rgba(0,0,0,.06);
            display: none;
        }
        .dark .ad-sticky-mobile {
            background: rgba(17,24,39,.98);
            border-top-color: #1f2937;
        }
        .ad-sticky-mobile.is-visible { display: block; }
        .ad-sticky-mobile .adsbygoogle { max-height: 60px; }

        @media (min-width: 1024px) {
            .ad-sticky-mobile { display: none !important; }
        }

        .site-footer a { transition: color .15s ease; }

        @media print {
            #page-loader, nav, #pwa-prompt, .skip-link,
            .ads-container, .ad-sticky-mobile, .site-footer { display: none !important; }
            body { padding-bottom: 0 !important; }
        }

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