/* ==========================================================================
   E-GOV KABUPATEN SIAK — "Gen Z" theme
   Dark neon glassmorphism skin: header, footer, back-to-top, and the
   portal landing page (hero, app cards, modal, mobile bottom nav).
   ========================================================================== */

:root {
    /* Aligned to the 2026 UI/UX design-token review: deep slate instead of
       near-black (easier on the eyes), slightly more transparent card
       surface, standard 12px glass blur. */
    --gz-bg-deep: #0b0f19;
    --gz-bg-card: rgba(255, 255, 255, 0.05);
    --gz-bg-card-hover: rgba(255, 255, 255, 0.12);
    --gz-primary-blue: #0072ff;
    --gz-neon-cyan: #00f2fe;
    --gz-neon-purple: #7f00ff;
    --gz-neon-pink: #ff007f;
    --gz-card-blur: 12px;
}

html {
    scroll-behavior: smooth;
}

/* Offset anchor scrolling so section titles land BELOW the fixed site
   header instead of hiding behind it (which made "Home" and "Aplikasi
   Khusus" look like the same screen — the title was hidden and only the
   card grid showed either way). Adjust the px value if it doesn't line
   up exactly with your header's real height. */
#hero-top,
#sec-khusus,
#sec-umum,
#sec-berita {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   1) HEADER
   ========================================================================== */

#header {
    background: rgba(6, 13, 33, 0.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 242, 254, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease;
}

#header.header-scrolled,
#header.sticked {
    background: rgba(4, 9, 20, 0.95) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

#header .logo,
#header .logo a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.3px;
}

#header .logo a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.35));
}

.logo-text {
    background: linear-gradient(90deg, #ffffff, var(--gz-neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Phones in portrait: the default h1 size wraps "E-GOV Kabupaten Siak"
   onto 2 lines, which looked cramped next to the logo image. Shrink it
   down to fit one line; the ellipsis/max-width is just a safety net for
   the very narrowest phones so it truncates gracefully instead of
   wrapping or overflowing if it still doesn't quite fit. */
@media (max-width: 599.98px) {
    #header .logo {
        font-size: 1.05rem;
        letter-spacing: -0.4px;
    }

    .logo-img {
        width: 32px;
        height: 32px;
    }

    .logo-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 62vw;
    }
}

#navbar > ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

#navbar ul li a.nav-link,
#navbar > ul > li > a {
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    transition: color 0.2s ease, background 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 8px 14px !important;
    border-radius: 30px;
    white-space: nowrap;
}

#navbar > ul > li > a:hover,
#navbar > ul > li > a.active {
    color: var(--gz-neon-cyan) !important;
    background: rgba(0, 242, 254, 0.08);
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
}

#navbar .mobile-nav-toggle {
    color: #ffffff !important;
}

/* Navigation lives in the bottom app-bar (see .app-bottom-nav) on phones
   (portrait AND landscape — a rotated phone is still a phone, the top
   menu doesn't fit a ~400-430px-tall landscape header), and on tablets
   held upright — top menu doesn't fit/wrap nicely there either. Once a
   tablet is rotated to landscape (or on real desktop widths), the top
   menu takes over like normal desktop. */
@media (max-width: 767.98px),
    (max-width: 1024px) and (orientation: portrait),
    (max-height: 500px) and (orientation: landscape) {
    #navbar .mobile-nav-toggle {
        display: none !important;
    }

    #navbar > ul {
        display: none !important;
    }

    .app-bottom-nav {
        display: flex !important;
    }

    .egov-portal {
        padding-bottom: 90px !important;
    }

    #footer {
        display: none !important;
    }
}

/* Tablets in landscape DO keep the top menu (see above), but that's also
   exactly where it gets cramped: full nav links + the logged-in user
   badge (name + NIP) + the wordmark logo all competing for one row.
   Drop the "E-GOV Kabupaten Siak" text there and keep just the crest
   image — plenty recognizable on its own, and it frees up the room the
   nav/user-badge actually need.
   min-height:501px is what keeps this from also matching a PHONE turned
   sideways — a phone in landscape falls into the bottom-nav rule above
   instead (short viewport height), and there the header only has the
   logo in it with nothing else competing for space, so the text should
   stay visible (otherwise the header looks oddly empty). */
@media (min-width: 768px) and (max-width: 1194px) and (min-height: 501px) and (orientation: landscape) {
    .logo-text {
        display: none;
    }
}

/* login pill (CTA — visually separated from the plain nav links before it) */
#navbar > ul > li > a[href*="login"] {
    background: linear-gradient(90deg, var(--gz-primary-blue), var(--gz-neon-cyan));
    color: #040914 !important;
    padding: 9px 22px !important;
    margin-left: 14px;
    border-radius: 30px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 242, 254, 0.35);
}

#navbar > ul > li > a[href*="login"]:hover {
    filter: brightness(1.1);
    background: linear-gradient(90deg, var(--gz-primary-blue), var(--gz-neon-cyan));
    text-shadow: none;
}

/* logged-in user badge */
#header .btn-warning {
    background: linear-gradient(90deg, var(--gz-neon-purple), var(--gz-neon-pink)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(127, 0, 255, 0.4);
}

#navbar .dropdown ul {
    background: rgba(13, 24, 56, 0.97) !important;
    border: 1px solid rgba(0, 242, 254, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

#navbar .dropdown ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

#navbar .dropdown ul li a:hover {
    color: var(--gz-neon-cyan) !important;
    background: rgba(0, 242, 254, 0.08) !important;
}

/* ==========================================================================
   2) FOOTER
   ========================================================================== */

#footer {
    position: relative;
    background: linear-gradient(180deg, #060d21 0%, #0b1330 100%) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 30px 20px 24px;
}

#footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gz-neon-cyan), var(--gz-neon-purple), transparent);
    opacity: 0.7;
}

#footer .copyright {
    color: #ffffff !important;
    font-weight: 700;
}

#footer .credits {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem;
    margin: 4px 0;
}

#footer .credits a {
    color: var(--gz-neon-cyan) !important;
    text-decoration: none;
}

#footer .credits a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   3) BACK TO TOP
   ========================================================================== */

.back-to-top {
    background: linear-gradient(135deg, var(--gz-primary-blue), var(--gz-neon-cyan)) !important;
    box-shadow: 0 6px 18px rgba(0, 242, 254, 0.45);
    color: #040914 !important;
}

.back-to-top:hover {
    filter: brightness(1.1);
}

@media (max-width: 480px) {
    .back-to-top {
        display: none !important;
    }
}

/* ==========================================================================
   4) PORTAL LANDING PAGE
   ========================================================================== */

.egov-portal,
.egov-portal * {
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.egov-portal {
    position: relative;
    background: var(--gz-bg-deep);
    /* Ambient glow intensity turned down ~30% and blur widened so the
       cyan/magenta pendaran fades into the deep background seamlessly
       instead of pulling focus from the cards. */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(0, 114, 255, 0.17) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(127, 0, 255, 0.17) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.1) 0%, transparent 60%);
    color: #ffffff;
    padding-bottom: 60px;
    overflow: hidden;
}

.ambient-sphere {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--gz-neon-cyan), var(--gz-primary-blue));
    filter: blur(140px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    animation: ambFloat 10s infinite ease-in-out alternate;
}

.ambient-sphere.s1 {
    top: 5%;
    left: 5%;
}

.ambient-sphere.s2 {
    top: 55%;
    right: 5%;
    background: linear-gradient(45deg, var(--gz-neon-purple), var(--gz-neon-pink));
    animation-delay: 1.5s;
}

@keyframes ambFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(80px, 40px) scale(1.2);
    }
}

/* ----- Hero ----- */
.portal-hero {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 44px 20px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.portal-hero .hero-logo {
    width: 78px;
    filter: drop-shadow(0 0 18px rgba(0, 242, 254, 0.45));
}

.hero-tag {
    display: inline-block;
    background: rgba(0, 242, 254, 0.1);
    color: var(--gz-neon-cyan);
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 16px 0 14px;
}

.portal-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #ffffff 30%, #a5c0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portal-hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 30px;
}

.search-box {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

.search-box input {
    width: 100%;
    padding: 15px 22px 15px 48px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: white;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--gz-neon-cyan);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
}

.search-box i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gz-neon-cyan);
}

/* ----- Section ----- */
.portal-container {
    position: relative;
    z-index: 2;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 34px 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: var(--gz-neon-cyan);
}

.app-grid {
    /* Flexbox instead of CSS Grid: with Grid, auto-fit locks in a fixed
       column COUNT for the whole grid, so a lone leftover card on the
       last row just sits in column 1 with a big empty gap next to it
       (that was the "SI-PPE stranded bottom-left" issue with 25+ cards).
       Flex + wrap + justify-content:center wraps the same way per row
       but re-centers whatever is left on an incomplete row instead. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.app-card {
    /* Fixed-ish basis (not flex-grow) so cards stay the same size on a
       short last row instead of stretching to fill it — ~6 per row on a
       ~1250px desktop container, same as before. */
    flex: 0 1 160px;
    max-width: 190px;
}

/* ----- Wiggling app card ----- */
.app-card {
    background: var(--gz-bg-card);
    backdrop-filter: blur(var(--gz-card-blur));
    -webkit-backdrop-filter: blur(var(--gz-card-blur));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    animation: wiggleContinuous 4s infinite ease-in-out;
    animation-delay: calc(var(--i) * 0.15s);
}

@keyframes wiggleContinuous {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-3px) rotate(-1deg);
    }

    50% {
        transform: translateY(-6px) rotate(0.8deg);
    }

    75% {
        transform: translateY(-2px) rotate(-0.7deg);
    }
}

.app-card:hover {
    background: var(--gz-bg-card-hover);
    border-color: var(--gz-neon-cyan);
    box-shadow: 0 15px 35px rgba(0, 114, 255, 0.3), 0 0 15px rgba(0, 242, 254, 0.2);
    animation: intenseWiggle 0.6s ease-in-out infinite alternate;
    z-index: 10;
}

@keyframes intenseWiggle {
    0% {
        transform: translateY(-8px) rotate(-1.5deg) scale(1.03);
    }

    100% {
        transform: translateY(-10px) rotate(1.5deg) scale(1.03);
    }
}

.app-icon {
    /* No more solid white disc behind the logo — it washed out icon detail
       on the dark background. Frosted-glass container instead, matching
       the card token, with a thin accent ring so the icon still reads as
       a distinct shape. Sized up a bit + inner padding so wider source
       icons (ones with a wordmark baked into the image, e.g. "Stunting",
       "KAIT") have room to render at readable size via object-fit:
       contain instead of being squeezed into a tiny box. This is a CSS-
       level mitigation only — the real fix is on the asset side: upload
       transparent, icon-only artwork (no baked-in text) and let
       .app-name below the icon be the single source of the label, per
       the design review. */
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px;
    transition: transform 0.3s, border-color 0.3s;
    overflow: hidden;
}

.app-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.app-card:hover .app-icon {
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.app-name {
    /* Bumped from 0.82rem + made the color/weight explicit instead of
       relying on inherited white — against the more transparent glass
       card (bg alpha 0.05) small light-gray-looking text was blending
       into whatever busy ambient color sat behind the card. Solid white
       + a soft drop shadow keeps it readable regardless of what's
       behind it; line-height/padding give long names (e.g. "BPJS
       KETENAGAKERJAAN") room to wrap to 2 lines without feeling cramped. */
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    margin-bottom: 12px;
    letter-spacing: -0.1px;
    line-height: 1.32;
    padding: 0 2px;
}

.card-lock-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(4, 9, 20, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: var(--gz-neon-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.action-btns {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: auto;
}

.btn {
    flex: 1;
    padding: 7px 6px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-launch {
    background: linear-gradient(90deg, var(--gz-primary-blue), var(--gz-neon-cyan));
    color: #040914;
    box-shadow: 0 4px 12px rgba(0, 242, 254, 0.3);
}

.btn-launch:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

.btn-info {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-info:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--gz-neon-cyan);
    color: var(--gz-neon-cyan);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ----- App grid collapse/expand (long lists, see egov-portal.js) ----- */
.app-card-collapsed {
    display: none !important;
}

.app-grid-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 18px 0 8px;
}

.app-grid-toggle-btn {
    /* Solid-ish glass fill (not just a thin cyan outline) so it reads as
       a clickable surface instead of blending into the app cards behind
       it; hover lights up cyan to make the affordance obvious. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.82rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(var(--gz-card-blur));
    -webkit-backdrop-filter: blur(var(--gz-card-blur));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.25s ease;
}

.app-grid-toggle-btn i {
    transition: transform 0.25s ease;
}

.app-grid-toggle-btn.is-expanded i {
    transform: rotate(180deg);
}

.app-grid-toggle-btn:hover {
    background: var(--gz-neon-cyan);
    color: #040914;
    border-color: var(--gz-neon-cyan);
    box-shadow: 0 8px 22px rgba(0, 242, 254, 0.4);
    transform: translateY(-2px);
}

/* ----- Modal ----- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 20, 0.8);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 2000;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: #0d1838;
    border: 1px solid var(--gz-neon-cyan);
    border-radius: 26px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    position: relative;
    transform: scale(0.85) translateY(16px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 50px rgba(0, 242, 254, 0.2);
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #fff;
}

.modal-overlay.active .modal-card {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.modal-close:hover {
    background: var(--gz-neon-pink);
    transform: rotate(90deg);
}

.modal-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--gz-neon-cyan);
}

.modal-unor {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.modal-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.04);
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: linear-gradient(90deg, var(--gz-neon-cyan), var(--gz-primary-blue));
    color: #040914;
    font-weight: 800;
    text-decoration: none;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0, 242, 254, 0.4);
    transition: 0.2s;
}

.modal-action:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

/* ----- Mobile app grid & bottom nav ----- */
@media (max-width: 480px) {
    .app-grid {
        gap: 10px;
    }

    .app-card {
        /* exactly 3 per row, accounting for the two 10px gaps */
        flex-basis: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3);
        padding: 14px 8px 10px;
        border-radius: 18px;
    }

    .app-icon {
        width: 52px;
        height: 52px;
        border-radius: 13px;
        padding: 6px;
    }

    .app-name {
        font-size: 0.72rem;
    }

    .action-btns {
        flex-direction: column;
        gap: 4px;
    }

    .btn {
        font-size: 0.6rem;
        padding: 6px 4px;
    }

    .portal-hero h1 {
        font-size: 1.5rem;
    }

    .egov-portal {
        padding-bottom: 90px;
    }
}

.app-bottom-nav {
    display: none; /* shown by the combined phone/tablet-portrait rule above */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    background: rgba(13, 24, 56, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0, 242, 254, 0.2);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.bn-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 9.5px;
    font-weight: 600;
    padding: 4px 2px;
    border-radius: 12px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bn-item i {
    font-size: 16px;
}

.bn-item.active {
    color: var(--gz-neon-cyan);
    background: rgba(0, 242, 254, 0.1);
}

.bn-item:active {
    transform: scale(0.94);
}

/* ----- Berita (news) section ----- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

.news-card {
    background: var(--gz-bg-card);
    backdrop-filter: blur(var(--gz-card-blur));
    -webkit-backdrop-filter: blur(var(--gz-card-blur));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    border-color: var(--gz-neon-cyan);
    box-shadow: 0 14px 30px rgba(0, 114, 255, 0.28), 0 0 14px rgba(0, 242, 254, 0.18);
}

.news-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.news-cover i {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 2;
}

.news-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 55%);
}

/* Dark gradient overlay from the bottom up so the badge (and any text
   that ever sits on the cover image itself) stays legible against the
   bright gradient/photo underneath, instead of fighting it. */
.news-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 35%, transparent 75%);
    pointer-events: none;
}

.news-cover.grad-1 {
    background: linear-gradient(135deg, var(--gz-primary-blue), var(--gz-neon-purple));
}

.news-cover.grad-2 {
    background: linear-gradient(135deg, var(--gz-neon-cyan), var(--gz-primary-blue));
}

.news-cover.grad-3 {
    background: linear-gradient(135deg, var(--gz-neon-purple), var(--gz-neon-pink));
}

.news-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(4, 9, 20, 0.75);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
}

.news-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-title {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.35;
}

.news-excerpt {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.55;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.news-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gz-neon-cyan), var(--gz-primary-blue));
    color: #040914;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.news-meta-text {
    line-height: 1.3;
}

.news-author {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.news-time {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
}

.news-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 26px;
    margin-bottom: 3rem;
}

.news-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--gz-neon-cyan);
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.35);
    transition: all 0.25s ease;
}

.news-cta:hover {
    background: linear-gradient(90deg, var(--gz-primary-blue), var(--gz-neon-cyan));
    color: #040914;
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.35);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .news-body {
        padding: 10px 10px 12px;
    }

    .news-title {
        font-size: 0.78rem;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-excerpt {
        font-size: 0.66rem;
        line-height: 1.4;
        margin-bottom: 10px;
        -webkit-line-clamp: 2;
    }

    .news-badge {
        font-size: 0.55rem;
        padding: 3px 8px;
        top: 6px;
        left: 6px;
    }

    .news-cover i {
        font-size: 1.5rem;
    }

    .news-meta {
        gap: 6px;
        padding-top: 8px;
    }

    .news-avatar {
        width: 22px;
        height: 22px;
        font-size: 0.55rem;
    }

    .news-author {
        font-size: 0.62rem;
    }

    .news-time {
        font-size: 0.56rem;
    }
}

/* ==========================================================================
   5) LOGIN PAGE (portal pegawai)
   ========================================================================== */

.login-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78vh;
    padding: 60px 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #0d1838;
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 26px;
    padding: 34px 30px;
    box-shadow: 0 20px 50px rgba(0, 242, 254, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.login-card-header {
    text-align: center;
    margin-bottom: 22px;
}

.login-logo {
    width: 60px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 14px rgba(0, 242, 254, 0.4));
}

.login-card-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.login-alert-error {
    background: rgba(255, 0, 127, 0.1);
    border: 1px solid rgba(255, 0, 127, 0.35);
    color: #ff8fc0;
}

.login-alert-success {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: var(--gz-neon-cyan);
}

.login-field {
    margin-bottom: 16px;
}

.login-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.login-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-input-group:focus-within {
    border-color: var(--gz-neon-cyan);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 4px rgba(0, 242, 254, 0.12);
}

.login-input-group.is-invalid {
    border-color: var(--gz-neon-pink);
}

.login-input-group i {
    width: 42px;
    text-align: center;
    color: var(--gz-neon-cyan);
}

.login-input-group input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    padding: 13px 12px 13px 0;
    font-size: 0.9rem;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.login-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.login-err {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--gz-neon-pink);
    font-weight: 600;
}

.login-captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 18px 0 4px;
}

.login-submit {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px;
    margin-top: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #040914;
    background: linear-gradient(90deg, var(--gz-neon-cyan), var(--gz-primary-blue));
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.login-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.login-footer-links {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.login-footer-links a {
    color: var(--gz-neon-cyan);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.login-footer-links a:hover {
    text-decoration: underline;
}

.login-footer-links small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

@media (prefers-reduced-motion: reduce) {

    .app-card,
    .app-card:hover,
    .ambient-sphere {
        animation: none !important;
        transform: none !important;
    }
}