/* ══════════════════════════════════════════════════════════════════
   PUBLIC PAGES — SHARED DESIGN SYSTEM
   Scoped to body.bd-public, which _Layout applies to every public page.
   The landing page carries .bd-public AND .bd-landing, so it inherits all
   of this and adds its own section styles in landing.css.

   Contains: design tokens, type scale, buttons, and the scroll-reactive
   glass navbar — everything that should look identical across Beranda,
   Pendaftaran, Ketentuan, Pengumuman and Cek Registrasi.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. TOKENS  (landing-local; global brand values live in tokens.css)
   ───────────────────────────────────────────────────────────────── */
.bd-public {
    /* Not pure white — a faint cool cast keeps large light areas from
       reading as blank paper, and gives the ornament layer something
       to sit against. */
    --paper:       #FCFDFE;
    --paper-alt:   #EDF3F9;
    --paper-warm:  #FDF7EE;
    --ink:         #0B1A2B;
    --ink-soft:    #57697C;
    --ink-faint:   #8C9AA8;
    --line:        #E3E9EF;
    --line-strong: #0B1A2B;

    --blue:   var(--color-blue);
    --orange: var(--color-orange);
    --green:  var(--color-green);
    --red:    var(--color-red);

    --shell: 1240px;
    --gutter: clamp(20px, 5vw, 64px);
    --band: clamp(80px, 11vh, 140px);

    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────
   2. TYPE SCALE
   ───────────────────────────────────────────────────────────────── */
.bd-public h1, .bd-public h2, .bd-public h3,
.bd-public h4, .bd-public h5 {
    font-family: var(--font);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.bd-display {
    font-size: clamp(2.9rem, 7.4vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.bd-h2 {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.bd-h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.02em; }

.bd-lead {
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.7;
    color: var(--ink-soft);
    font-weight: 400;
}

.bd-body {
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--ink-soft);
}

.bd-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}



/* ─────────────────────────────────────────────────────────────────
   4. BUTTONS
   ───────────────────────────────────────────────────────────────── */
.bd-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 30px;
    border: 2px solid var(--ink);
    border-radius: 0;               /* square — geometric, not pill */
    background: var(--ink);
    color: #fff;
    font-family: var(--font);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s var(--ease-out-soft),
                background .2s ease, color .2s ease, border-color .2s ease;
}
.bd-btn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    transform: translateY(-3px);
}
.bd-btn:active { transform: translateY(0); }
.bd-btn i { transition: transform .25s var(--ease-out-soft); }
.bd-btn:hover i:last-child { transform: translateX(5px); }

.bd-btn--ghost {
    background: transparent;
    color: var(--ink);
}
.bd-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.bd-btn--light {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.bd-btn--light:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.bd-btn--lg { padding: 21px 40px; font-size: 1rem; }

/* Text link with animated rule */
.bd-tlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 3px;
    background-image: linear-gradient(var(--accent, var(--blue)), var(--accent, var(--blue)));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size .32s var(--ease-out-soft), color .2s ease;
}
.bd-tlink:hover {
    background-size: 100% 2px;
    color: var(--accent, var(--blue));
}
.bd-tlink i { transition: transform .25s var(--ease-out-soft); }
.bd-tlink:hover i { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────────────
   5. NAVBAR — scroll-reactive floating glass (landing only)

   A single progress value, --nav-p (0 at rest → 1 when floating), is
   written by animations/navbar-morph.js and every property below is
   interpolated from it with calc(). One source of truth means width,
   padding, radius, opacity, blur, shadow, logo and CTA all move in
   perfect lockstep — no stepped class swap, and backdrop-filter (which
   GSAP cannot tween directly) comes along for free.
   ───────────────────────────────────────────────────────────────── */

/* Registering the property lets the browser treat it as a real number,
   so calc() interpolation stays stable. Falls back gracefully if the
   browser ignores @property — var(--nav-p, 0) still resolves. */
@property --nav-p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.bd-public #mainNavbar {
    /* Pinned at 1: the bar is a floating pill from the first paint rather
       than morphing on scroll. Every calc() below still reads it, so the
       resting geometry needs no other change. */
    --nav-p: 1;
    position: fixed;                 /* floats over the hero */
    top: 0; left: 0; right: 0;
    z-index: 1030;
    padding: 0;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
    /* --nav-p is a registered <number> via @property, so the browser can
       interpolate it natively. One transition here animates width, padding,
       radius, opacity, blur, shadow, logo and CTA together — no JS tweening,
       and it works on every page, not just where GSAP is loaded. */
    transition: --nav-p .42s cubic-bezier(.4, 0, .2, 1);
}
.bd-public #mainNavbar::after { display: none; }

/* site.js still toggles .nav-scrolled globally — neutralise it here so
   the two systems cannot fight over the same element. */
.bd-public #mainNavbar.nav-scrolled {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
}

/* ── The morphing surface ─────────────────────────────────────────
   At --nav-p 0 : full-bleed, square, near-solid, flat.
   At --nav-p 1 : inset pill, translucent, blurred, lifted.          */
.bd-public .bd-nav__shell {
    --p: var(--nav-p, 0);

    width: 100%;
    /* 100% → 1120px cap, so it visibly contracts into a pill */
    max-width: calc(1120px + (1 - var(--p)) * (100% - 1120px));
    margin-inline: auto;
    margin-top: calc(var(--p) * 14px);

    padding-block: calc(19px - var(--p) * 9px);

    border-radius: calc(var(--p) * 999px);
    background: rgba(255, 255, 255, calc(0.62 + 0.14 * var(--p)));

    /* Blurred from the very top, not only once floating. */
    -webkit-backdrop-filter: blur(calc(14px + var(--p) * 6px)) saturate(calc(150% + var(--p) * 30%));
    backdrop-filter: blur(calc(14px + var(--p) * 6px)) saturate(calc(150% + var(--p) * 30%));

    border: 1px solid rgba(255, 255, 255, calc(0.45 + var(--p) * 0.22));

    box-shadow:
        0 calc(var(--p) * 10px) calc(var(--p) * 34px) rgba(11, 26, 43, calc(var(--p) * 0.13)),
        0 calc(var(--p) * 2px)  calc(var(--p) * 8px)  rgba(11, 26, 43, calc(var(--p) * 0.06));

    /* A hairline at rest, which fades out as the pill takes over. */
    border-bottom-color: rgba(11, 26, 43, calc(0.07 * (1 - var(--p)) + 0.0 * var(--p)));

    will-change: max-width, padding, border-radius, background-color;
}

.bd-public #mainNavbar .container {
    max-width: var(--shell);
    padding-inline: calc(var(--gutter) - var(--p, 0) * (var(--gutter) - 22px));
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Brand ── */
.bd-public .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: calc(0.92rem - var(--nav-p, 0) * 0.04rem);
    letter-spacing: -0.01em;
    color: var(--ink) !important;
    transition: none;
}
.bd-public .navbar-brand:hover { color: var(--blue) !important; transform: none; }
.bd-public .navbar-brand img {
    height: calc(40px - var(--nav-p, 0) * 5px);
    width: calc(40px - var(--nav-p, 0) * 5px);
    object-fit: cover;
    border-radius: calc(var(--nav-p, 0) * 50%);
}

/* ── Links ── */
.bd-public #mainNavbar .nav-link {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--ink-soft) !important;
    background: none !important;
    border-radius: 999px;
    padding: 7px 14px !important;
    position: relative;
    transition: color .2s ease;
}
.bd-public #mainNavbar .nav-link i { display: none; }   /* type-only nav */
.bd-public #mainNavbar .nav-link:hover,
.bd-public #mainNavbar .nav-link.nav-active { color: var(--ink) !important; }

.bd-public #mainNavbar .nav-link::after {
    content: '';
    display: block;
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease-out-soft);
}
.bd-public #mainNavbar .nav-link:hover::after,
.bd-public #mainNavbar .nav-link.nav-active::after { transform: scaleX(1); }

/* ── CTA — shrinks with the bar ── */
.bd-public .bd-nav__cta {
    margin-left: 16px;
    padding: calc(11px - var(--nav-p, 0) * 2px) calc(22px - var(--nav-p, 0) * 4px);
    border-radius: 999px;
    background: var(--ink);
    color: #fff !important;
    font-size: calc(0.85rem - var(--nav-p, 0) * 0.03rem);
    font-weight: 700;
    transition: background .22s ease, transform .22s ease;
}
.bd-public .bd-nav__cta:hover {
    background: var(--blue);
    transform: translateY(-2px);
}
.bd-public .bd-nav__cta i { transition: transform .25s var(--ease-out-soft); }
.bd-public .bd-nav__cta:hover i { transform: translateX(3px); }

/* ── Hamburger ── */
.bd-public .navbar-toggler {
    border: 1.5px solid rgba(11, 26, 43, .18);
    border-radius: 12px;
    padding: 7px 11px;
    background: rgba(255,255,255,.5);
}
.bd-public .navbar-toggler:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Mobile: compact glass bar + detached glass menu panel ──────── */
@media (max-width: 991.98px) {
    .bd-public .bd-nav__shell {
        /* Already pill-like at rest on mobile — less travel, less jank. */
        max-width: calc(100% - var(--p) * 24px);
        margin-top: calc(6px + var(--p) * 6px);
        border-radius: calc(16px + var(--p) * 20px);
        padding-block: calc(11px - var(--p) * 2px);
        overflow: visible;           /* let the menu panel escape the pill */
    }
    .bd-public #mainNavbar .container { padding-inline: 18px; }

    .bd-public #mainNavbar .navbar-collapse {
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, .65);
        border-radius: 20px;
        box-shadow: 0 16px 44px rgba(11, 26, 43, .16);
        padding: 12px;
    }
    .bd-public #mainNavbar .navbar-nav { gap: 2px !important; width: 100%; }
    .bd-public #mainNavbar .nav-link { padding: 11px 14px !important; }
    .bd-public #mainNavbar .nav-link::after { display: none; }
    .bd-public #mainNavbar .nav-link.nav-active { background: rgba(41,182,246,.12) !important; }

    .bd-public .bd-nav__cta {
        margin: 10px 0 2px;
        justify-content: center;
        width: 100%;
        padding: 13px 20px;
        font-size: .9rem;
    }
}

/* Reduced motion: land on the resting state, no morph. */
@media (prefers-reduced-motion: reduce) {
    .bd-public .bd-nav__shell {
        transition: none !important;
        will-change: auto;
    }
}

.bd-public .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.bd-public .navbar-brand img {
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 0;
}

.bd-public #mainNavbar .nav-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 8px 14px;
    border-radius: 0;
    transition: color .2s ease;
}
.bd-public #mainNavbar .nav-link i { display: none; } /* cleaner, type-only nav */
.bd-public #mainNavbar .nav-link:hover,
.bd-public #mainNavbar .nav-link.nav-active { color: var(--ink); }

.bd-public #mainNavbar .nav-link::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 2px;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease-out-soft);
}
.bd-public #mainNavbar .nav-link:hover::after,
.bd-public #mainNavbar .nav-link.nav-active::after { transform: scaleX(1); }

.bd-public .navbar-toggler {
    border: 2px solid var(--ink);
    border-radius: 0;
    padding: 6px 10px;
}
.bd-public .navbar-toggler:focus { box-shadow: none; }

/* ═════════════════════════════════════════════════════════════════
   PAGE SHELL — applies to every public page except the landing hero
   ═════════════════════════════════════════════════════════════════ */

/* The navbar is position:fixed, so content pages must clear it themselves.
   The landing page opts out — its hero provides its own top padding. */
.bd-public .main-content { padding-top: 96px; }
.bd-landing .main-content { padding-top: 0; }

/* Soft page ground so content pages share the landing's light canvas
   rather than sitting on flat white. */
.bd-public:not(.bd-landing) {
    background:
        radial-gradient(60% 32% at 8% 0%,   rgba(41,182,246,.10), transparent 62%),
        radial-gradient(50% 26% at 96% 6%,  rgba(250,133,0,.07),  transparent 60%),
        radial-gradient(46% 22% at 4% 62%,  rgba(12,138,103,.06), transparent 60%),
        linear-gradient(180deg, #FDFEFF 0%, #F6FAFD 45%, #FCFDFE 100%);
    background-attachment: fixed;
}

/* ── Page masthead ────────────────────────────────────────────────
   .kategori-header is the shared header block on Kategori, Ketentuan,
   Pengumuman and the announcement sub-pages. Restyled from a blue
   gradient banner into the landing page's editorial masthead. */
.bd-public .kategori-header {
    background: transparent;
    clip-path: none;
    color: var(--ink);
    text-align: center;
    padding: clamp(38px, 6vw, 68px) 0 clamp(28px, 4vw, 44px);
    position: relative;
}

/* Hairline + brand rule under every page header, echoing the landing strip */
.bd-public .kategori-header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(1240px, calc(100% - 2 * var(--gutter, 32px)));
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-blue) 0 25%,
        var(--color-orange) 25% 50%,
        var(--color-green) 50% 75%,
        var(--color-red) 75% 100%);
    opacity: .85;
}

.bd-public .kategori-header h1,
.bd-public .kategori-title {
    font-family: var(--font);
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--ink) !important;
    text-shadow: none !important;
    margin-bottom: 14px;
}

.bd-public .kategori-header p,
.bd-public .kategori-subtitle {
    color: var(--ink-soft) !important;
    font-size: 1rem !important;
    line-height: 1.7;
    max-width: 62ch;
    margin-inline: auto;
    opacity: 1 !important;
}

/* ── Step bar (Kategori → Persiapan → Formulir → Selesai) ───────── */
.bd-public .kat-step-circle {
    background: #fff;
    border: 2px solid var(--line);
    color: var(--ink-faint);
    font-weight: 800;
    box-shadow: none;
}
.bd-public .kat-step.active .kat-step-circle {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.bd-public .kat-step-label { color: var(--ink-soft); font-weight: 600; }
.bd-public .kat-step.active .kat-step-label { color: var(--ink); font-weight: 700; }
.bd-public .kat-step-line { background: var(--line); }

/* ── Cards ────────────────────────────────────────────────────────
   Flat, bordered, square-ish — the landing card language, applied to
   the Bootstrap cards these pages already use. */
.bd-public:not(.bd-landing) .card {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--line) !important;
    box-shadow: none !important;
    background: #fff;
}
.bd-public:not(.bd-landing) .card.shadow-sm,
.bd-public:not(.bd-landing) .card.shadow {
    box-shadow: var(--shadow-sm) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────
   Map Bootstrap's primary/outline buttons onto the landing's square,
   high-contrast style without touching any markup. */
.bd-public:not(.bd-landing) .btn-primary {
    background: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 12px 26px;
    transition: transform .18s var(--ease-out-soft), background .2s ease, border-color .2s ease;
}
.bd-public:not(.bd-landing) .btn-primary:hover {
    background: var(--blue);
    border-color: var(--blue);
    transform: translateY(-2px);
}
.bd-public:not(.bd-landing) .btn-outline-primary {
    border: 2px solid var(--ink);
    border-radius: 0;
    color: var(--ink);
    font-weight: 700;
    padding: 12px 26px;
}
.bd-public:not(.bd-landing) .btn-outline-primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.bd-public:not(.bd-landing) .btn-lg { padding: 15px 32px; font-size: 1rem; }

/* ── Form controls ───────────────────────────────────────────────── */
.bd-public:not(.bd-landing) .form-control,
.bd-public:not(.bd-landing) .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--line);
    padding: 11px 14px;
    font-family: var(--font);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.bd-public:not(.bd-landing) .form-control:focus,
.bd-public:not(.bd-landing) .form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(41,182,246,.16);
}
.bd-public:not(.bd-landing) .form-label {
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    letter-spacing: -0.005em;
}

/* ── Section headings inside content pages ───────────────────────── */
.bd-public:not(.bd-landing) h2,
.bd-public:not(.bd-landing) h3,
.bd-public:not(.bd-landing) h4,
.bd-public:not(.bd-landing) h5 {
    font-family: var(--font);
    letter-spacing: -0.025em;
    color: var(--ink);
}

@media (max-width: 767px) {
    .bd-public .main-content { padding-top: 78px; }
    .bd-public:not(.bd-landing) { background-attachment: scroll; }
}

/* ═════════════════════════════════════════════════════════════════
   PILIH JENIS LOMBA (step 1) + PILIH KATEGORI (step 2)
   ═════════════════════════════════════════════════════════════════ */

.bd-public .jenis-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(28px, 4vw, 40px);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .3s ease, transform .3s var(--ease-out-soft), box-shadow .3s ease;
}
.bd-public .jenis-card:hover {
    border-color: var(--accent, var(--color-blue));
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

/* Quarter circle from the logo, used as the card's identity mark */
.bd-public .jenis-card__corner {
    position: absolute;
    top: 0; right: 0;
    width: 132px; height: 132px;
    background: var(--accent, var(--color-blue));
    border-radius: 0 0 0 100%;
    opacity: .12;
    transition: opacity .3s ease, transform .45s var(--ease-out-soft);
}
.bd-public .jenis-card:hover .jenis-card__corner { opacity: .2; transform: scale(1.18); }

.bd-public .jenis-card__icon {
    position: relative;
    z-index: 1;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--accent-soft, #E3F6FF);
    color: var(--accent, var(--color-blue));
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.bd-public .jenis-card__title {
    position: relative; z-index: 1;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 8px;
}
.bd-public .jenis-card__tagline {
    position: relative; z-index: 1;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--color-muted);
    margin-bottom: 20px;
}

.bd-public .jenis-card__roles {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    position: relative; z-index: 1;
}
.bd-public .jenis-card__roles li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: var(--color-ink);
    padding: 4px 0;
}
.bd-public .jenis-card__roles i { color: var(--accent, var(--color-blue)); font-size: .85rem; }
.bd-public .jenis-card__more {
    color: var(--color-muted) !important;
    font-style: italic;
    padding-left: 22px;
}

.bd-public .jenis-card__foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative; z-index: 1;
}
.bd-public .jenis-card__count {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.bd-public .jenis-card__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--accent, var(--color-blue));
}
.bd-public .jenis-card__go i { transition: transform .25s var(--ease-out-soft); }
.bd-public .jenis-card:hover .jenis-card__go i { transform: translateX(5px); }

/* Per-type accent */
.bd-public .jenis-transformatif { --accent: var(--color-blue);   --accent-soft: #E3F6FF; }
.bd-public .jenis-dedikatif     { --accent: var(--color-orange); --accent-soft: #FFF1E0; }

/* ── Step 2 ─────────────────────────────────────────────────────── */
.bd-public .subkat-jenis-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 14px;
}
.bd-public .subkat-jenis-transformatif { background: #E3F6FF; color: #0F6E9B; }
.bd-public .subkat-jenis-dedikatif     { background: #FFF1E0; color: #B45309; }

.bd-public .subkat-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}
.bd-public .subkat-back:hover { color: var(--color-ink); gap: 12px; }

/* Completed step marker */
.bd-public .kat-step.done .kat-step-circle {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
}
.bd-public .kat-step.done .kat-step-label { color: var(--color-ink); font-weight: 600; }

/* Accent the step-2 cards by competition type */
.bd-public .subkat-transformatif::before { background: var(--color-blue); }
.bd-public .subkat-dedikatif::before     { background: var(--color-orange); }
.bd-public .subkat-transformatif:hover   { border-color: var(--color-blue); }
.bd-public .subkat-dedikatif:hover       { border-color: var(--color-orange); }
.bd-public .subkat-transformatif .subkat-icon { background: #E3F6FF; color: var(--color-blue); }
.bd-public .subkat-dedikatif .subkat-icon     { background: #FFF1E0; color: var(--color-orange); }
.bd-public .subkat-transformatif .subkat-arrow { color: var(--color-blue); }
.bd-public .subkat-dedikatif .subkat-arrow     { color: var(--color-orange); }

@media (max-width: 575.98px) {
    .bd-public .jenis-card { padding: 24px 20px; }
    .bd-public .jenis-card__icon { width: 46px; height: 46px; font-size: 1.2rem; }
}

/* ---------------------------------------------------------------------------
   Tema Karya picker — the nine themes on the registration and update forms.
   A single vertical list (not a grid): the names run long and a grid forced
   ragged two-line cards. Numbering mirrors the published theme list so a
   participant can match what they read in Ketentuan.
   --------------------------------------------------------------------------- */
.tema-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tema-list .tema-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.tema-list .tema-card:hover {
    border-color: var(--color-blue);
    background: var(--color-surface-alt);
}

.tema-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-blue-deep);
}

.tema-gold .tema-num { background: var(--color-orange); }

.tema-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tema-name {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-ink);
}

.tema-note {
    display: block;
    margin-top: .15rem;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--color-muted);
}

.tema-ico {
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: var(--color-line);
    transition: color .18s ease;
}

.tema-list .tema-card:hover .tema-ico { color: var(--color-blue); }

/* Checked state. .btn-check is visually hidden by Bootstrap, so the label
   carries the whole selected appearance. */
.tema-list .btn-check:checked + .tema-card {
    border-color: var(--color-blue-dark);
    background: var(--color-tint);
    box-shadow: 0 0 0 3px rgba(41, 182, 246, .18);
}

.tema-list .btn-check:checked + .tema-card .tema-ico { color: var(--color-blue-dark); }

.tema-list .btn-check:focus-visible + .tema-card {
    outline: 2px solid var(--color-blue-dark);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .tema-list .tema-card { padding: .7rem .8rem; gap: .65rem; }
    .tema-name { font-size: .84rem; }
    .tema-ico { display: none; }
}

/* A category tied to a single theme renders one static card instead of the
   radio list. It must not look clickable, since there is nothing to pick. */
.tema-list .tema-card.tema-locked {
    cursor: default;
    border-color: var(--color-blue-dark);
    background: var(--color-tint);
}

.tema-list .tema-card.tema-locked:hover {
    border-color: var(--color-blue-dark);
    background: var(--color-tint);
}

.tema-list .tema-card.tema-locked .tema-ico { color: var(--color-blue-dark); }

/* Tema Karya dropdown (replaces the nine-card list on the forms) */
.tema-select {
    border: 1.5px solid var(--color-line);
    border-radius: 10px;
    padding: .6rem .9rem;
    font-size: .92rem;
    color: var(--color-ink);
}

.tema-select:focus {
    border-color: var(--color-blue-dark);
    box-shadow: 0 0 0 3px rgba(41, 182, 246, .18);
}

.tema-select-note {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--color-blue-dark);
    background: var(--color-tint);
    border-left: 3px solid var(--color-blue);
    border-radius: 0 8px 8px 0;
    padding: .5rem .75rem;
}

/* ---------------------------------------------------------------------------
   Pengumuman — regency picker shown before the announcement board, since
   winners are decided per kabupaten/kota.
   --------------------------------------------------------------------------- */
.peng-kota-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50px;
    padding: .35rem 1rem;
    font-size: .9rem;
    font-weight: 600;
}

.peng-kota-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    height: 100%;
    padding: 1.4rem 1rem;
    text-align: center;
    text-decoration: none;
    background: var(--color-surface);
    border: 1.5px solid var(--color-line);
    border-radius: 14px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.peng-kota-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-blue);
    box-shadow: 0 10px 24px rgba(15, 110, 155, .14);
}

.peng-kota-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.15rem;
    color: var(--color-blue-dark);
    background: var(--color-tint);
}

.peng-kota-name {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-ink);
}

.peng-kota-count {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-blue-dark);
}

.peng-kota-count span {
    font-size: .74rem;
    font-weight: 600;
    color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC PAGE DESIGN LAYER

   The inner pages inherited the landing page's editorial masthead but none of
   its ornament, so they read as plain white documents. This layer gives every
   public page a tinted, patterned header and a consistent card/section
   treatment.

   Deliberately restrained: thin outlined geometry and a dot grid, in brand
   colours at low opacity. No confetti, no filled blobs — the audience is
   teachers and school leaders, and the page has to look like an official
   provincial programme, not a children's poster.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header canvas ─────────────────────────────────────────────────────── */
.bd-public .kategori-header,
.bd-public .cek-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 8% 0%, rgba(41, 182, 246, .13) 0%, transparent 58%),
        radial-gradient(100% 130% at 96% 10%, rgba(250, 133, 0, .11) 0%, transparent 55%),
        linear-gradient(180deg, var(--color-surface-alt) 0%, #FFFFFF 82%);
}

/* Dot grid — reads as paper texture rather than decoration */
.bd-public .kategori-header::before,
.bd-public .cek-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(rgba(11, 26, 43, .12) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 72%);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 72%);
    pointer-events: none;
}

/* Outlined arcs, echoing the landing page's geometry */
.bd-public .kategori-header > .bd-orn,
.bd-public .cek-hero > .bd-orn {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    pointer-events: none;
    opacity: .28;
}

.bd-public .bd-orn--a {
    width: 260px; height: 260px;
    top: -104px; left: -70px;
    color: var(--color-blue);
}

.bd-public .bd-orn--b {
    width: 168px; height: 168px;
    right: -52px; bottom: -74px;
    color: var(--color-orange);
}

.bd-public .bd-orn--c {
    width: 92px; height: 92px;
    right: 13%; top: 22px;
    color: var(--color-green);
    opacity: .2;
}

@media (max-width: 767.98px) {
    .bd-public .bd-orn--c { display: none; }
}

/* Eyebrow pill above the page title */
.bd-public .kategori-header .container > .mb-3 > span:first-child {
    display: inline-block;
    background: var(--color-surface) !important;
    border: 1.5px solid var(--color-blue);
    color: var(--color-blue-dark) !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(15, 110, 155, .1);
}

/* ── Section headings ──────────────────────────────────────────────────── */
.bd-public .bd-sect-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.bd-public .bd-sect-head::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--color-line), transparent);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.bd-public .card {
    border-radius: 14px;
    border: 1px solid var(--color-line);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bd-public .card.shadow-sm {
    box-shadow: 0 2px 4px rgba(11, 26, 43, .04),
                0 12px 28px rgba(11, 26, 43, .06) !important;
}

.bd-public .card.shadow-sm:hover {
    box-shadow: 0 4px 8px rgba(11, 26, 43, .06),
                0 18px 40px rgba(11, 26, 43, .1) !important;
}

/* Coloured card headers keep their fill but lose the flat corners */
.bd-public .card > .card-header {
    border-radius: 14px 14px 0 0 !important;
}

/* ── Step bar ──────────────────────────────────────────────────────────── */
.bd-public .kat-step-circle {
    box-shadow: 0 2px 8px rgba(11, 26, 43, .1);
}

.bd-public .kat-step.active .kat-step-circle {
    box-shadow: 0 4px 14px rgba(15, 110, 155, .3);
}

/* ── Content surface ───────────────────────────────────────────────────── */
.bd-public .container.py-5 {
    position: relative;
}

/* ───────────────────────────────────────────────────────────────────────────
   BACKGROUND WEIGHT

   The near-white paper (#FCFDFE) left the pages reading as blank sheets: the
   white cards had nothing to lift off, so the ornament and the card shadows
   both disappeared. Deepened to a definite cool tint — still calm enough for
   long-form rules and form text, but the content now visibly sits on a
   surface rather than floating.
   ─────────────────────────────────────────────────────────────────────────── */
.bd-public {
    --paper:     #E9F1F9;
    --paper-alt: #DCE8F4;
    --line:      #D2DEEA;
}

/* Cards and form surfaces stay white so they read as raised against the tint */
.bd-public .card,
.bd-public .tema-select,
.bd-public .form-control,
.bd-public .form-select,
.bd-public .subkat-card,
.bd-public .jenis-card,
.bd-public .peng-kota-card {
    background-color: #FFFFFF;
}

/* Header sits on a stronger wash and settles into the page tint, so there is
   no seam where the masthead ends. */
.bd-public .kategori-header,
.bd-public .cek-hero {
    background:
        radial-gradient(120% 140% at 8% 0%, rgba(41, 182, 246, .26) 0%, transparent 60%),
        radial-gradient(100% 130% at 96% 10%, rgba(250, 133, 0, .20) 0%, transparent 58%),
        linear-gradient(180deg, #D6E7F6 0%, var(--paper) 88%);
}

/* Ornament and dot grid need a touch more presence on the deeper ground */
.bd-public .kategori-header::before,
.bd-public .cek-hero::before {
    background-image: radial-gradient(rgba(11, 26, 43, .16) 1px, transparent 1px);
}

.bd-public .kategori-header > .bd-orn,
.bd-public .cek-hero > .bd-orn {
    opacity: .38;
}

.bd-public .bd-orn--c { opacity: .28; }

/* The brand rule under the header gains contrast against the tint */
.bd-public .kategori-header::after {
    opacity: 1;
    height: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER RUNS UNDER THE NAVBAR

   .main-content carries a padding-top to clear the fixed navbar. That gap
   exposed the body background as a pale band across the top of every inner
   page — a white box sitting behind the navbar pill, above where the header
   gradient started.

   Instead of leaving a gap, the page header is pulled up through it and given
   the same amount back as padding. The gradient now starts at the very top of
   the viewport and the pill floats over it, exactly as it does on the landing
   page. Content does not move: the negative margin and the extra padding
   cancel out.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public {
    --nav-clear: 96px;
}

@media (max-width: 991.98px) {
    .bd-public { --nav-clear: 78px; }
}

.bd-public .main-content { padding-top: var(--nav-clear); }
.bd-landing .main-content { padding-top: 0; }

/* Only when the header is the first thing on the page — otherwise there is
   nothing to pull up and the clearance must stay. */
.bd-public .main-content > .kategori-header:first-child,
.bd-public .main-content > .cek-hero:first-child {
    margin-top: calc(-1 * var(--nav-clear));
    padding-top: calc(var(--nav-clear) + clamp(38px, 6vw, 68px));
}

/* The wash reads better when it starts behind the pill rather than level
   with it, now that there is more header above the title. */
.bd-public .kategori-header,
.bd-public .cek-hero {
    background:
        radial-gradient(120% 150% at 8% 0%, rgba(41, 182, 246, .30) 0%, transparent 62%),
        radial-gradient(100% 140% at 96% 4%, rgba(250, 133, 0, .22) 0%, transparent 60%),
        linear-gradient(180deg, #CFE3F5 0%, #DCEAF7 40%, var(--paper) 92%);
}

/* Pull the ornament circles up with the taller header so they still frame
   the title rather than sitting behind the navbar. */
.bd-public .bd-orn--a { top: -70px; }
.bd-public .bd-orn--c { top: calc(var(--nav-clear) + 8px); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE GUTTER — the same rule the landing page uses

   The landing page lays everything out inside .bd-shell:

       max-width: var(--shell);  padding-inline: var(--gutter);

   The inner pages use Bootstrap's .container instead, which has a different
   maximum at every breakpoint and a flat 12px gutter. Side by side the two
   never lined up — content on Kategori, Ketentuan, Pengumuman and Cek
   Registrasi sat at a different left edge from the navbar above it and from
   the landing page the visitor had just come from.

   Pointing .container at the same two tokens settles all of it, including the
   navbar, since the pill already measures itself with --shell.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public .container,
.bd-public .container-fluid {
    max-width: var(--shell);
    padding-inline: var(--gutter);
    margin-inline: auto;
}

/* Bootstrap rows use negative margins to cancel their own column padding.
   Those still work — the gutter above is on the container, not the row — but
   a nested container would double it up. */
.bd-public .container .container,
.bd-public .container .container-fluid {
    padding-inline: 0;
    max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOTSTRAP CONTEXTUAL COLOURS → LOGO PALETTE

   Inline hex values across the public pages now come from the brand ramp, but
   Bootstrap's own utilities still painted their defaults: #dc3545 for
   .text-danger on every required-field asterisk, #0d6efd for .text-primary on
   section headings. Two reds and two blues on the same screen.

   Remapped rather than removed — the classes stay semantic, they just resolve
   to the logo's colours. Bootstrap's utilities carry !important, so matching
   it here is what it takes to win.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public .text-primary { color: var(--ink-blue) !important; }
.bd-public .text-danger  { color: var(--ink-red) !important; }
.bd-public .text-success { color: var(--ink-green) !important; }
.bd-public .text-warning { color: var(--ink-orange) !important; }

.bd-public .bg-primary { background-color: var(--ink-blue) !important; }
.bd-public .bg-danger  { background-color: var(--ink-red) !important; }
.bd-public .bg-success { background-color: var(--ink-green) !important; }
.bd-public .bg-warning { background-color: var(--ink-orange) !important; }

.bd-public .border-primary { border-color: var(--ink-blue) !important; }
.bd-public .border-danger  { border-color: var(--ink-red) !important; }
.bd-public .border-success { border-color: var(--ink-green) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR — white glass pill, dark type, on every public page

   Applies wherever the layout sets .bd-public, which is the public site only;
   the admin, judge and verval dashboards run on .admin-body and are untouched.

   The pill has to hold up over two very different grounds: a dark photograph
   on the landing hero, and the pale blue paper of every inner page. The white
   is therefore carried at .82 rather than the ~.6 a glass panel usually takes
   — below roughly .75 the dark hero bleeds through and the panel turns grey,
   which is what made the earlier version unreadable. High saturation keeps the
   photo's colour from dulling the white, and the border is a bright hairline
   so the pill still has an edge where the backdrop behind it is light.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public .bd-nav__shell {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
            backdrop-filter: blur(22px) saturate(190%);
    box-shadow:
        0 10px 34px rgba(11, 26, 43, .16),
        0 2px 8px rgba(11, 26, 43, .08),
        inset 0 1px 0 rgba(255, 255, 255, .75);
    border-bottom-color: rgba(255, 255, 255, .9);
}

/* ── Brand ── */
.bd-public .navbar-brand { color: var(--ink) !important; }
.bd-public .navbar-brand:hover { color: var(--color-blue-dark) !important; }

.bd-public .navbar-brand img {
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(11, 26, 43, .1);
}

/* ── Links ──
   .72 rather than a mid grey: it reads as the same ink at lower emphasis, so
   the active item lifts by weight of colour instead of changing hue. */
.bd-public #mainNavbar .nav-link {
    color: rgba(11, 26, 43, .72) !important;
}

.bd-public #mainNavbar .nav-link:hover,
.bd-public #mainNavbar .nav-link.nav-active {
    color: var(--ink) !important;
}

.bd-public #mainNavbar .nav-link::after {
    background: var(--color-blue);
    bottom: 2px;
}

/* ── CTA — the one dark element, so it stays the obvious action ── */
.bd-public .bd-nav__cta {
    background: var(--ink);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(11, 26, 43, .22);
}

.bd-public .bd-nav__cta:hover {
    background: var(--color-blue-dark);
    color: #fff !important;
}

/* ── Hamburger ── */
.bd-public .navbar-toggler {
    background: rgba(255, 255, 255, .6);
    border: 1.5px solid rgba(11, 26, 43, .16);
}

.bd-public .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2811,26,43,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bd-public .navbar-toggler:focus-visible {
    outline: 2px solid var(--color-blue-dark);
    outline-offset: 2px;
}

/* ── Mobile panel matches the pill ── */
@media (max-width: 991.98px) {
    .bd-public #mainNavbar .navbar-collapse {
        background: rgba(255, 255, 255, .93);
        border: 1px solid rgba(255, 255, 255, .9);
        box-shadow: 0 16px 44px rgba(11, 26, 43, .2);
    }

    .bd-public #mainNavbar .nav-link.nav-active {
        background: rgba(41, 182, 246, .14) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR — dark glass on the landing page only

   The white pill above is right for the inner pages, which sit on pale paper.
   The landing hero is a photograph under a dark scrim, and a white pill there
   floats as a bright slab across the top of the image. Dark glass instead lets
   the bar sit inside the scrim, so the photograph reads unbroken.

   .bd-landing is set alongside .bd-public on the body, so these selectors are
   one class more specific and win without !important.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-landing .bd-nav__shell {
    background: rgba(9, 22, 36, .58);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(20px) saturate(175%);
            backdrop-filter: blur(20px) saturate(175%);
    box-shadow:
        0 10px 34px rgba(4, 14, 26, .26),
        0 2px 8px rgba(4, 14, 26, .16);
    border-bottom-color: rgba(255, 255, 255, .16);
}

.bd-landing .navbar-brand { color: #fff !important; }
.bd-landing .navbar-brand:hover { color: #fff !important; }

.bd-landing .navbar-brand img {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}

.bd-landing #mainNavbar .nav-link { color: rgba(255, 255, 255, .8) !important; }

.bd-landing #mainNavbar .nav-link:hover,
.bd-landing #mainNavbar .nav-link.nav-active { color: #fff !important; }

/* Inverted against the dark pill, so it stays the brightest thing in the bar */
.bd-landing .bd-nav__cta {
    background: #fff;
    color: var(--ink) !important;
    box-shadow: 0 4px 14px rgba(4, 14, 26, .3);
}

.bd-landing .bd-nav__cta:hover {
    background: var(--color-blue);
    color: #fff !important;
}

.bd-landing .navbar-toggler {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .3);
}

.bd-landing .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bd-landing .navbar-toggler:focus-visible { outline: 2px solid #fff; }

@media (max-width: 991.98px) {
    .bd-landing #mainNavbar .navbar-collapse {
        background: rgba(9, 22, 36, .88);
        border: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 16px 44px rgba(4, 14, 26, .34);
    }

    .bd-landing #mainNavbar .nav-link.nav-active {
        background: rgba(41, 182, 246, .2) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT TABLES — stop the cards clipping their own contents

   .result-table and .winner-table were width:auto, so the table grew to fit
   the longest school name. Their cards carry overflow:hidden for the rounded
   corners, which means anything past the card edge was cut off outright —
   no scrollbar, no ellipsis, the text simply ended. Both are width:100% now;
   what remains is making the cells able to give.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public .result-name,
.bd-public .result-school,
.bd-public .winner-name,
.bd-public .winner-school {
    /* Long school names have no spaces to break at ("SDN 001 Tanjungpinang
       Timur"), so a normal wrap is not always enough. */
    overflow-wrap: anywhere;
}

/* The rank cell and the score cell are fixed content; only the name column
   should absorb the slack. */
.bd-public .result-table td:first-child,
.bd-public .winner-table td:first-child { width: 1%; }

.bd-public .result-table td:last-child,
.bd-public .winner-table td:last-child { width: 1%; }

@media (max-width: 575.98px) {
    .bd-public .result-table td,
    .bd-public .winner-table td { padding: .6rem .45rem; }

    .bd-public .result-table td:first-child,
    .bd-public .winner-table td:first-child { padding-left: .8rem; }

    .bd-public .result-table td:last-child,
    .bd-public .winner-table td:last-child { padding-right: .8rem; }

    /* The city chip is the first thing that can go when space runs out. */
    .bd-public .result-city { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PENGUMUMAN BOARD — result links and stage chips

   Both problems came from markup written for the old dark-blue banner.

   The three result links used btn-light / btn-outline-light / btn-warning.
   On the pale header the outline-light one is white on white, so "Hasil
   Penilaian Substansi" was invisible — and the surviving two did not look
   like a set. All three share one shape and one colour now — they are three
   equal ways into the same board, not a ranking.

   The stage chips sat in a flex row. A flex item will not shrink below its
   own content, so "Hasil Penilaian Presentasi dan Wawancara Belum Dirilis"
   ran past the card edge and got cut. They stack full-width and wrap instead.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public .peng-result-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.15rem;
    border-radius: 50px;
    border: 1.5px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(11, 26, 43, .06);
    transition: border-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}

.bd-public .peng-result-btn:hover {
    border-color: var(--color-blue);
    color: var(--ink-blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 110, 155, .16);
}

.bd-public .peng-result-btn i { color: var(--ink-blue); }

/* ── Stage chips ── */
.bd-public .stage-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.bd-public .stage-chips .badge {
    max-width: 100%;
    /* Bootstrap badges do not wrap; these labels are full sentences. */
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CEK REGISTRASI

   .cek-hero in site.css still declares `color: white` from when the header was
   a solid blue gradient. The heading survived only because the base heading
   rule (.bd-public h2) is one step more specific and repainted it — the lead
   paragraph and the icon had nothing overriding them, so both were white on a
   pale header and effectively gone.

   The header now uses the same title/subtitle classes as every other public
   page rather than carrying its own colours.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-public .cek-hero { color: var(--ink); }

.bd-public .cek-hero__icon {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 1.7rem;
    color: var(--ink-blue);
    background: var(--color-surface);
    border: 1.5px solid var(--tint-blue-line);
    box-shadow: 0 6px 20px rgba(15, 110, 155, .14);
}

/* ── Search form ── */
.bd-public .cek-hero .form-control {
    border: 1.5px solid var(--tint-blue-line);
    border-radius: 12px;
    background: var(--color-surface);
}

.bd-public .cek-hero .form-control:focus {
    border-color: var(--color-blue-dark);
    box-shadow: 0 0 0 3px rgba(41, 182, 246, .18);
}

/* Was btn-light — white on a light header reads as a disabled control. */
.bd-public .cek-submit {
    white-space: nowrap;
    border: 0;
    border-radius: 12px;
    background: var(--ink-blue);
    color: #fff;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.bd-public .cek-submit:hover {
    background: var(--color-blue-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 110, 155, .28);
}

/* ── Result cards ── */
.bd-public .cek-card {
    border: 1px solid var(--color-line);
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(11, 26, 43, .04),
        0 12px 28px rgba(11, 26, 43, .06);
}

.bd-public .section-label { color: var(--color-muted); }
.bd-public .data-row { border-bottom-color: var(--color-line); }
.bd-public .data-key { color: var(--color-muted); }