/* ============================================================
   reatozdrive-publik.css — GAYA HALAMAN PUBLIK (landing & pendaftaran)
   ------------------------------------------------------------
   Dimuat lewat `views/public/partials/head-css.ejs` setelah
   `reatozdrive-base.css`. Berisi gaya halaman: landing, daftar murid baru,
   status pendaftaran, berita, dan detail berita — dipindahkan dari blok
   `<style>` masing-masing view oleh `agents/bin/pisah-css-publik.js`.

   Area lain punya berkasnya sendiri:
     · `reatozdrive-backend.css` — area `/backend/*`
     · `reatozdrive-club.css`    — area `/clubs/*`
   Diperbarui (last update): 2026-10-01 07:50 WIT
   ============================================================ */

/* ============================================================
   berita-detail.ejs — gaya halaman ini
   ============================================================ */

        body.np-berita-detail {
            --np-bg1: #f2f7fc; --np-bg2: #ffffff; --np-ink: #0f172a; --np-soft: #64748b;
            --np-line: #e2e8f0; --np-card: #ffffff; --np-brand: #1a73e8; --np-brand-soft: rgba(26,115,232,.10);
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%);
            color: var(--np-ink); min-height: 100vh;
        }
        body.dark-mode.np-berita-detail {
            --np-bg1: #0b1220; --np-bg2: #0f172a; --np-ink: #e2e8f0; --np-soft: #94a3b8;
            --np-line: rgba(255,255,255,.10); --np-card: #131c2e; --np-brand: #38bdf8; --np-brand-soft: rgba(56,189,248,.16);
        }
        html.dark-mode body.np-berita, body.dark-mode.np-berita-detail {
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%) !important;
        }
        .np-berita-detail .card { background: var(--np-card); border: 1px solid var(--np-line); }
        .np-berita-detail .text-soft { color: var(--np-soft) !important; }
        .np-berita-detail-nav { background: var(--np-card); border-bottom: 1px solid var(--np-line); }
        .np-berita-detail-brand { height: 36px; width: auto; }
        .np-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-bg1); }
        .np-theme-btn { border: 0; background: transparent; color: var(--np-soft); width: 34px; height: 30px; border-radius: 999px; cursor: pointer; }
        .np-theme-btn.active { background: var(--np-brand); color: #fff; }
        body.dark-mode .np-theme-btn.active { color: #08111f; }
        .np-berita-judul { color: var(--np-ink); }
        .np-berita-judul:hover { color: var(--np-brand); }
        .np-berita-cover { height: 170px; object-fit: cover; width: 100%; border-radius: 6px 6px 0 0; }
        .np-berita-cover-kosong { height: 170px; border-radius: 6px 6px 0 0;
            background: linear-gradient(135deg, rgba(26,115,232,.18), rgba(6,182,212,.24)); }
        .np-chip { border: 1px solid var(--np-line); border-radius: 999px; padding: 4px 12px; font-size: .82rem; color: var(--np-soft); text-decoration: none; display: inline-block; }
        .np-chip:hover, .np-chip.is-aktif { border-color: var(--np-brand); color: var(--np-brand); background: var(--np-brand-soft); }
    

/* ============================================================
   berita.ejs — gaya halaman ini
   ============================================================ */

        body.np-berita {
            --np-bg1: #f2f7fc; --np-bg2: #ffffff; --np-ink: #0f172a; --np-soft: #64748b;
            --np-line: #e2e8f0; --np-card: #ffffff; --np-brand: #1a73e8; --np-brand-soft: rgba(26,115,232,.10);
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%);
            color: var(--np-ink); min-height: 100vh;
        }
        body.dark-mode.np-berita {
            --np-bg1: #0b1220; --np-bg2: #0f172a; --np-ink: #e2e8f0; --np-soft: #94a3b8;
            --np-line: rgba(255,255,255,.10); --np-card: #131c2e; --np-brand: #38bdf8; --np-brand-soft: rgba(56,189,248,.16);
        }
        html.dark-mode body.np-berita, body.dark-mode.np-berita {
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%) !important;
        }
        .np-berita .card { background: var(--np-card); border: 1px solid var(--np-line); }
        .np-berita .text-soft { color: var(--np-soft) !important; }
        .np-berita-nav { background: var(--np-card); border-bottom: 1px solid var(--np-line); }
        .np-berita-brand { height: 36px; width: auto; }
        .np-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-bg1); }
        .np-theme-btn { border: 0; background: transparent; color: var(--np-soft); width: 34px; height: 30px; border-radius: 999px; cursor: pointer; }
        .np-theme-btn.active { background: var(--np-brand); color: #fff; }
        body.dark-mode .np-theme-btn.active { color: #08111f; }
        .np-berita-judul { color: var(--np-ink); }
        .np-berita-judul:hover { color: var(--np-brand); }
        .np-berita-cover { height: 170px; object-fit: cover; width: 100%; border-radius: 6px 6px 0 0; }
        .np-berita-cover-kosong { height: 170px; border-radius: 6px 6px 0 0;
            background: linear-gradient(135deg, rgba(26,115,232,.18), rgba(6,182,212,.24)); }
        .np-chip { border: 1px solid var(--np-line); border-radius: 999px; padding: 4px 12px; font-size: .82rem; color: var(--np-soft); text-decoration: none; display: inline-block; }
        .np-chip:hover, .np-chip.is-aktif { border-color: var(--np-brand); color: var(--np-brand); background: var(--np-brand-soft); }
    

/* ============================================================
   daftar-status.ejs — gaya halaman ini
   ============================================================ */

        body.np-status {
            --np-bg1: #f2f7fc; --np-bg2: #ffffff; --np-ink: #0f172a; --np-soft: #64748b;
            --np-line: #e2e8f0; --np-card: #ffffff; --np-brand: #1a73e8; --np-brand-soft: rgba(26,115,232,.10);
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%);
            color: var(--np-ink); min-height: 100vh;
        }
        body.dark-mode.np-status {
            --np-bg1: #0b1220; --np-bg2: #0f172a; --np-ink: #e2e8f0; --np-soft: #94a3b8;
            --np-line: rgba(255,255,255,.10); --np-card: #131c2e; --np-brand: #38bdf8; --np-brand-soft: rgba(56,189,248,.16);
        }

        /* `body.dark-mode` (AppStack) memakai !important → timpa dengan !important. */
        html.dark-mode body.np-status, body.dark-mode.np-status {
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%) !important;
        }
        .np-status .card { background: var(--np-card); border: 1px solid var(--np-line); }
        .np-status .text-soft { color: var(--np-soft) !important; }
        .np-status-nav { background: var(--np-card); border-bottom: 1px solid var(--np-line); }
        .np-status-brand { height: 36px; width: auto; }
        .np-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-bg1); }
        .np-theme-btn { border: 0; background: transparent; color: var(--np-soft); width: 34px; height: 30px; border-radius: 999px; cursor: pointer; }
        .np-theme-btn.active { background: var(--np-brand); color: #fff; }
        body.dark-mode .np-theme-btn.active { color: #08111f; }
    

/* ============================================================
   daftar.ejs — gaya halaman ini
   ============================================================ */

        body.np-daftar {
            --np-bg1: #f2f7fc;
            --np-bg2: #ffffff;
            --np-ink: #0f172a;
            --np-soft: #64748b;
            --np-line: #e2e8f0;
            --np-card: #ffffff;
            --np-brand: #1a73e8;
            --np-brand-soft: rgba(26, 115, 232, .10);
            --np-water1: #7dd3fc;
            --np-water2: #0284c7;
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%);
            color: var(--np-ink);
            min-height: 100vh;
        }
        body.dark-mode.np-daftar {
            --np-bg1: #0b1220;
            --np-bg2: #0f172a;
            --np-ink: #e2e8f0;
            --np-soft: #94a3b8;
            --np-line: rgba(255, 255, 255, .10);
            --np-card: #131c2e;
            --np-brand: #38bdf8;
            --np-brand-soft: rgba(56, 189, 248, .16);
            --np-water1: #0ea5e9;
            --np-water2: #082f49;
        }

        /* Tema gelap template menimpa latar body dengan `!important`.
           → gradasi halaman publik WAJIB !important agar menang. */
        html.dark-mode body.np-daftar, body.dark-mode.np-daftar {
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%) !important;
        }

        /* Gelombang air tipis di belakang halaman (nuansa renang) */
        .np-daftar-waves { position: fixed; inset: auto 0 0 0; height: 190px; pointer-events: none; z-index: 0; opacity: .5; }
        .np-daftar-waves svg { width: 100%; height: 100%; display: block; }
        .np-daftar-waves .w1 path { fill: var(--np-water1); opacity: .35; }
        .np-daftar-waves .w2 path { fill: var(--np-water2); opacity: .18; }
        .np-daftar-waves .w1 { animation: npd-drift 26s linear infinite; }
        .np-daftar-waves .w2 { animation: npd-drift 34s linear infinite reverse; }
        @keyframes npd-drift { from { transform: translateX(0); } to { transform: translateX(-1200px); } }
        @media (prefers-reduced-motion: reduce) { .np-daftar-waves .w1, .np-daftar-waves .w2 { animation: none; } }

        .np-daftar-wrap { position: relative; z-index: 1; }
        .np-daftar .card { background: var(--np-card); border: 1px solid var(--np-line); }
        .np-daftar .text-soft { color: var(--np-soft) !important; }
        .np-daftar-nav { background: var(--np-card); border-bottom: 1px solid var(--np-line); }
        .np-daftar-brand { height: 36px; width: auto; }

        .np-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-bg1); }
        .np-theme-btn { border: 0; background: transparent; color: var(--np-soft); width: 34px; height: 30px; border-radius: 999px; cursor: pointer; }
        .np-theme-btn.active { background: var(--np-brand); color: #fff; }
        body.dark-mode .np-theme-btn.active { color: #08111f; }

        /* Langkah (stepper) */
        .np-steps { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
        .np-step { display: inline-flex; align-items: center; gap: .5rem; color: var(--np-soft); font-size: .88rem; font-weight: 600; }
        .np-step .num {
            width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
            background: var(--np-line); color: var(--np-soft); font-size: .8rem;
        }
        .np-step.active { color: var(--np-brand); }
        .np-step.active .num { background: var(--np-brand); color: #fff; }
        .np-step.done .num { background: #10b981; color: #fff; }

        /* Kartu pilihan kelas */
        .np-kelas-pick { cursor: pointer; display: block; }
        .np-kelas-pick input { position: absolute; opacity: 0; }
        .np-kelas-card { border: 1px solid var(--np-line); border-radius: 14px; padding: 14px; height: 100%; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
        .np-kelas-pick:hover .np-kelas-card { transform: translateY(-2px); }
        .np-kelas-pick input:checked + .np-kelas-card { border-color: var(--np-brand); box-shadow: 0 0 0 3px var(--np-brand-soft); }
        .np-kelas-pick input:checked + .np-kelas-card .np-kelas-name { color: var(--np-brand); }
        .np-kelas-name { font-weight: 700; }
        .np-kelas-meta { font-size: .8rem; color: var(--np-soft); }

        /* Input OTP */
        .np-otp {
            font-size: 1.7rem; letter-spacing: .55rem; text-align: center; font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
        .np-hide { display: none !important; }
    

/* ============================================================
   landing.ejs — gaya halaman ini
   ============================================================ */

        /* ============================================================
           TEMA (terang ⇄ gelap)
           Variabel di-set pada body.np-landing dan ditimpa pada body.dark-mode
           sehingga seluruh warna halaman ikut berubah tanpa CSS tambahan.
           ============================================================ */
        body.np-landing {
            --np-bg1: #f4f7fb;
            --np-bg2: #ffffff;
            --np-ink: #0f172a;
            --np-soft: #64748b;
            --np-line: #e5e9f2;
            --np-card: #ffffff;
            --np-brand: #1a73e8;
            --np-brand-soft: rgba(26, 115, 232, .10);
            --np-water-top: #38bdf8;
            --np-water-bottom: #0369a1;
            --np-wave-1: rgba(56, 189, 248, .28);
            --np-wave-2: rgba(56, 189, 248, .18);
            --np-wave-3: rgba(186, 230, 253, .35);
            --np-bubble: rgba(255, 255, 255, .9);
            --np-glow-1: rgba(56, 189, 248, .18);
            --np-glow-2: rgba(125, 211, 252, .16);
            --np-deep: rgba(186, 230, 253, .45);
            --np-shine: rgba(255, 255, 255, .6);
            --np-lane: rgba(3, 105, 161, .22);
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 45%);
            color: var(--np-ink);
            min-height: 100vh;
        }

        body.dark-mode {
            --np-bg1: #0b1220;
            --np-bg2: #0f172a;
            --np-ink: #e2e8f0;
            --np-soft: #94a3b8;
            --np-line: rgba(255, 255, 255, .10);
            --np-card: #131c2e;
            --np-brand: #38bdf8;
            --np-brand-soft: rgba(56, 189, 248, .16);
            --np-water-top: #0ea5e9;
            --np-water-bottom: #062a40;
            --np-wave-1: rgba(56, 189, 248, .26);
            --np-wave-2: rgba(14, 165, 233, .17);
            --np-wave-3: rgba(2, 132, 199, .10);
            --np-bubble: rgba(125, 211, 252, .55);
            --np-glow-1: rgba(56, 189, 248, .22);
            --np-glow-2: rgba(45, 212, 191, .16);
            --np-deep: rgba(2, 44, 74, .55);
            --np-shine: rgba(125, 211, 252, .30);
            --np-lane: rgba(125, 211, 252, .35);
        }

        /* Tema gelap template menimpa latar body dengan `!important`.
           Gradasi air ditulis ulang dengan !important agar tetap tampil. */
        html.dark-mode body.np-landing, body.dark-mode.np-landing {
            background: linear-gradient(180deg, var(--np-bg1) 0%, var(--np-bg2) 55%) !important;
        }

        /* ====== Kerangka halaman ====== */
        .np-landing .text-soft { color: var(--np-soft) !important; }
        .np-landing .card { background: var(--np-card); border: 1px solid var(--np-line); }

        .np-landing-nav { background: var(--np-card); border-bottom: 1px solid var(--np-line); }
        .np-landing-brand { height: 38px; width: auto; }
        .np-landing-hero { padding: 56px 0 32px; }
        .np-landing-hero h1 { font-size: 2.35rem; line-height: 1.25; }

        /* Blok tombol hero — pakai kelas sendiri (bukan utilitas tema) supaya
           jarak & tinggi pasti benar dan tidak bertabrakan dengan baris kolom di bawahnya. */
        .np-landing-actions {
            display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
            margin: 0 0 2rem;
        }
        .np-landing-hero + .np-landing-hero, .np-landing-actions + .row { margin-top: 0; }

        .np-landing-badge {
            display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem;
            border-radius: 999px; background: var(--np-brand-soft); color: var(--np-brand);
            font-size: .8rem; font-weight: 600; letter-spacing: .2px;
        }

        .np-landing-ico {
            display: inline-flex; align-items: center; justify-content: center;
            width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem;
            background: var(--np-brand-soft); color: var(--np-brand);
        }
        .np-landing-ico.is-alt { background: rgba(6, 182, 212, .14); color: #0891b2; }
        body.dark-mode .np-landing-ico.is-alt { color: #22d3ee; }

        .np-landing-foot { border-top: 1px solid var(--np-line); background: var(--np-card); padding: 22px 0; }
        .np-landing-mono { font-variant-numeric: tabular-nums; }

        /* ====== Switch tema ====== */
        .np-theme-switch {
            display: inline-flex; align-items: center; gap: 2px; padding: 3px;
            border: 1px solid var(--np-line); border-radius: 999px; background: var(--np-bg1);
        }
        .np-theme-btn {
            border: 0; background: transparent; color: var(--np-soft);
            width: 34px; height: 30px; border-radius: 999px; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .95rem; transition: background .2s ease, color .2s ease;
        }
        .np-theme-btn:hover { color: var(--np-brand); }
        .np-theme-btn.active { background: var(--np-brand); color: #fff; }
        body.dark-mode .np-theme-btn.active { color: #08111f; }

        /* ============================================================
           ANIMASI BACKGROUND — nuansa AIR & OLAHRAGA RENANG
           Satu lapisan tetap (fixed) di belakang seluruh konten:
             • gradasi air + kilau cahaya (caustics) bergerak
             • 3 lapis gelombang mengalir di bagian bawah
             • tali lintasan kolam samar
             • siluet perenang melintas di beberapa lintasan
             • gelembung naik dari dasar kolam
           Konten diberi `position: relative; z-index: 1` (kelas .np-layer)
           agar tetap terbaca; animasi dimatikan bila pengguna memilih
           "reduce motion".
           ============================================================ */
        .np-bg {
            position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
        }
        .np-bg-wash {
            position: absolute; inset: 0;
            background:
                radial-gradient(1100px 520px at 12% 8%, var(--np-glow-1), transparent 62%),
                radial-gradient(900px 460px at 88% 22%, var(--np-glow-2), transparent 60%),
                linear-gradient(180deg, transparent 0%, transparent 46%, var(--np-deep) 100%);
        }
        .np-bg-caustics {
            position: absolute; inset: -20% -10% 30% -10%;
            background-image:
                radial-gradient(closest-side, var(--np-shine) 0%, transparent 70%),
                radial-gradient(closest-side, var(--np-shine) 0%, transparent 70%),
                radial-gradient(closest-side, var(--np-shine) 0%, transparent 70%);
            background-size: 340px 240px, 520px 320px, 420px 280px;
            background-position: 8% 22%, 58% 12%, 82% 38%;
            background-repeat: no-repeat;
            opacity: .55; filter: blur(6px);
            animation: np-caustics 22s ease-in-out infinite alternate;
        }
        .np-bg-waves { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(220px, 34vh, 380px); }
        .np-bg-waves svg { width: 100%; height: 100%; display: block; }
        .np-bg-waves .np-w3 path { fill: var(--np-wave-3); }
        .np-bg-waves .np-w2 path { fill: var(--np-wave-2); }
        .np-bg-waves .np-w1 path { fill: var(--np-wave-1); }
        .np-bg-waves .np-w3 { animation: np-waves 30s linear infinite reverse; }
        .np-bg-waves .np-w2 { animation: np-waves 22s linear infinite; }
        .np-bg-waves .np-w1 { animation: np-waves 16s linear infinite; }

        .np-bg-lane {
            position: absolute; left: 0; right: 0; bottom: 16%; height: 120px; opacity: .35;
            background-image: repeating-linear-gradient(90deg, var(--np-lane) 0 10px, transparent 10px 34px);
            background-size: 44px 100%;
            -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
            animation: np-lane 9s linear infinite;
        }

        .np-bubble { position: absolute; bottom: 4%; border-radius: 999px; background: var(--np-bubble); animation: np-bub linear infinite; }

        /* Konten di atas lapisan animasi */
        .np-layer { position: relative; z-index: 1; }

        @keyframes np-caustics {
            from { transform: translate3d(0, 0, 0) scale(1); }
            to   { transform: translate3d(-40px, 26px, 0) scale(1.08); }
        }
        /* Gelombang digambar 2× lebar kanvas lalu digeser 1 periode (1200px) agar loop mulus */
        @keyframes np-waves { from { transform: translateX(0); } to { transform: translateX(-1200px); } }
        @keyframes np-lane { from { background-position-x: 0; } to { background-position-x: -88px; } }
        @keyframes np-bub {
            0%   { transform: translateY(0) scale(.5); opacity: 0; }
            12%  { opacity: .85; }
            100% { transform: translateY(-70vh) scale(1.15); opacity: 0; }
        }

        /* Hormati preferensi pengguna: matikan animasi bila "reduce motion". */
        @media (prefers-reduced-motion: reduce) {
            .np-bg-caustics, .np-bg-waves .np-w1, .np-bg-waves .np-w2, .np-bg-waves .np-w3,
            .np-bg-lane, .np-bubble {
                animation: none !important;
            }
        }

        /* ============================================================
           KONTEN PUBLIKASI (dikelola dari backend):
           EVENT/LOMBA · ATLET & PELATIH TERBAIK · BERITA
           ============================================================ */
        .np-sec-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
        .np-sec-head h2 { font-size: 1.5rem; margin: 0; }
        .np-sec-head p { margin: 0; color: var(--np-soft); }

        .np-lomba { border: 1px solid var(--np-line); border-radius: 8px; background: var(--np-card); height: 100%; padding: 1rem 1.1rem; }
        .np-lomba-judul { font-weight: 700; color: var(--np-ink); display: block; margin: .35rem 0 .5rem; }
        .np-lomba-meta { color: var(--np-soft); font-size: .82rem; display: flex; flex-direction: column; gap: .2rem; }
        .np-lomba-now { border-color: rgba(34,197,94,.55); box-shadow: 0 0 0 1px rgba(34,197,94,.25) inset; }
        .np-lomba-lewat { opacity: .9; }
        .np-lomba-kosong { border: 1px dashed var(--np-line); border-radius: 8px; padding: 1rem; color: var(--np-soft); font-size: .875rem; }
        .np-dot-now { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: np-pulse 2s infinite; }
        @keyframes np-pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

        .np-award { border: 1px solid var(--np-line); border-radius: 8px; background: var(--np-card); padding: 1rem 1.1rem; height: 100%; display: flex; gap: .9rem; }
        .np-award-avatar { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-weight: 800; color: #fff; background: linear-gradient(135deg, #1a73e8, #06b6d4); overflow: hidden; }
        .np-award-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .np-award-nama { font-weight: 700; color: var(--np-ink); }
        .np-award-capaian { color: var(--np-soft); font-size: .84rem; margin: .35rem 0 0; }

        .np-news { border: 1px solid var(--np-line); border-radius: 8px; overflow: hidden; background: var(--np-card); height: 100%; display: flex; flex-direction: column; }
        .np-news-cover { height: 150px; object-fit: cover; width: 100%; display: block; }
        .np-news-cover-kosong { height: 150px; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, rgba(26,115,232,.20), rgba(6,182,212,.28)); color: #fff; }
        .np-news-body { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; }
        .np-news-judul { font-weight: 700; color: var(--np-ink); display: block; }
        .np-news-judul:hover { color: var(--np-brand); }
        .np-news-ringkas { color: var(--np-soft); font-size: .84rem; margin: 0; }
        @media (max-width: 575.98px) {
            .np-award { flex-direction: column; }
            .np-sec-head h2 { font-size: 1.25rem; }
        }

        /* --- Navbar di HP: tombol membungkus, tidak menembus layar ---------
           Tanpa aturan ini, deretan tombol (tema + Event + Berita + Daftar +
           Masuk) lebih lebar dari layar dan membuat halaman bisa digeser
           mendatar (overflow-x). */
        .np-landing-nav .np-nav-aksi { justify-content: flex-end; }
        @media (max-width: 767.98px) {
            .np-landing-nav .np-nav-aksi { width: 100%; justify-content: flex-start; gap: .4rem !important; }
            /* Satu baris rapi: [tema] Event · Berita · Masuk Aplikasi.
               Tombol "Daftar Murid Baru" disembunyikan di sini karena CTA-nya
               sudah besar di hero (menghindari tombol bertumpuk & navbar tinggi). */
            .np-landing-nav .np-nav-aksi .btn { flex: 1 1 0; font-size: .8rem; padding: .45rem .5rem; white-space: nowrap; }
            .np-landing-nav .np-nav-aksi .btn .icon { display: none; }
            .np-landing-nav .np-nav-aksi .np-btn-daftar { display: none; }
            .np-landing-nav .np-nav-aksi .np-theme-switch { order: -1; }
            .np-landing-brand { height: 30px; }
        }