/* ==========================================================================
   BIRO UMUM — HALAMAN
   Gaya khusus per halaman: hero, beranda, dokumentasi, dan masuk (login).
   ========================================================================== */

/* ==========================================================================
   HERO SINEMATIK (beranda)
   ========================================================================== */
.bu-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background: var(--bu-ink);
}
.bu-hero--compact {
    min-height: 62vh;
    min-height: 62svh;
}

/* Lapisan foto dengan gerak "Ken Burns" pelan */
.bu-hero__media {
    position: absolute;
    inset: -3%;
    z-index: -3;
    background-size: cover;
    background-position: center;
    animation: bu-kenburns 34s var(--bu-ease) infinite alternate;
}
@keyframes bu-kenburns {
    from {
        transform: scale(1.03) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.14) translate3d(-1.6%, -1.2%, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bu-hero__media {
        animation: none;
        transform: scale(1.05);
    }
}

/* Gradasi gelap agar teks selalu terbaca (kontras aman) */
.bu-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
            180deg,
            rgba(var(--bu-ink-rgb), 0.78) 0%,
            rgba(var(--bu-ink-rgb), 0.45) 34%,
            rgba(var(--bu-ink-rgb), 0.62) 68%,
            rgba(var(--bu-ink-rgb), 0.96) 100%
        ),
        radial-gradient(
            120% 78% at 50% 42%,
            transparent 38%,
            rgba(0, 0, 0, 0.6) 100%
        );
}

.bu-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: calc(var(--bu-nav-h) + 2.5rem);
    padding-bottom: clamp(6rem, 12vh, 9rem);
    text-align: center;
    color: #fff;
}
.bu-hero__crest {
    width: clamp(78px, 9vw, 104px);
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
    animation: bu-float 7s ease-in-out infinite;
}
@keyframes bu-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bu-hero__crest {
        animation: none;
    }
}

.bu-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.35rem;
    font-size: clamp(0.62rem, 1.1vw, 0.78rem);
    font-weight: var(--bu-fw-bold);
    letter-spacing: var(--bu-ls-kicker);
    text-transform: uppercase;
    color: var(--bu-gold-light);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.bu-hero__kicker::before,
.bu-hero__kicker::after {
    content: "";
    width: clamp(18px, 5vw, 54px);
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.bu-hero__title {
    margin: 0 0 1.2rem;
    font-family: var(--bu-font-display);
    font-size: var(--bu-fs-hero);
    font-weight: var(--bu-fw-bold);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
    text-wrap: balance;
}
.bu-hero__title em {
    display: block;
    font-style: italic;
    font-weight: var(--bu-fw-medium);
    color: var(--bu-gold-light);
}

.bu-hero__lead {
    max-width: 660px;
    margin: 0 auto 2.25rem;
    font-size: clamp(1.02rem, 1.6vw, 1.28rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.bu-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

/* Pita statistik di dasar hero */
.bu-hero__ribbon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(
        180deg,
        rgba(var(--bu-ink-rgb), 0.15),
        rgba(var(--bu-ink-rgb), 0.65)
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.bu-hero__ribbon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}
.bu-hero__ribbon-item {
    padding: 1.15rem 0.75rem;
    color: #fff;
}
.bu-hero__ribbon-item + .bu-hero__ribbon-item {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.bu-hero__ribbon-item strong {
    display: block;
    font-family: var(--bu-font-display);
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: var(--bu-fw-bold);
    color: var(--bu-gold-light);
    line-height: 1.2;
}
.bu-hero__ribbon-item span {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(0.62rem, 1.1vw, 0.72rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}
@media (max-width: 560px) {
    .bu-hero__ribbon {
        display: none;
    }
}

/* Petunjuk gulir */
.bu-scrollcue {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
}
.bu-scrollcue__line {
    width: 1px;
    height: 42px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        var(--bu-gold)
    );
    animation: bu-cue 2.2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes bu-cue {
    0%,
    100% {
        transform: scaleY(0.35);
        opacity: 0.35;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}
@media (max-width: 560px) {
    .bu-scrollcue {
        display: none;
    }
}

/* Hero ringkas untuk halaman dalam (dokumentasi, dll) */
.bu-pagehero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bu-ink);
    color: #fff;
    padding-top: calc(var(--bu-nav-h) + clamp(2.5rem, 6vw, 4.5rem));
    padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
.bu-pagehero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 35%;
    transform: scale(1.06);
}
.bu-pagehero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        160deg,
        rgba(var(--bu-ink-rgb), 0.92) 0%,
        rgba(var(--bu-ink-rgb), 0.72) 45%,
        rgba(var(--bu-ink-rgb), 0.94) 100%
    );
}
.bu-pagehero__title {
    margin: 0 0 0.6rem;
    font-family: var(--bu-font-display);
    font-size: var(--bu-fs-h1);
    font-weight: var(--bu-fw-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.bu-pagehero__lead {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--bu-fs-lead);
    line-height: 1.7;
}
.bu-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    font-size: var(--bu-fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.bu-crumb a {
    color: var(--bu-gold-light);
    text-decoration: none;
}
.bu-crumb i {
    font-size: 0.6rem;
    opacity: 0.6;
}

/* ==========================================================================
   BERANDA — PROFIL PIMPINAN & VISI MISI
   ========================================================================== */
.bu-leader {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: center;
}
@media (max-width: 900px) {
    .bu-leader {
        grid-template-columns: minmax(0, 1fr);
    }
}
.bu-leader__portrait {
    position: relative;
    border-radius: var(--bu-radius-lg);
    overflow: hidden;
    box-shadow: var(--bu-shadow-lg);
    aspect-ratio: 4 / 5;
    background: var(--bu-bg-3);
}
.bu-leader__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--bu-dur-slow) var(--bu-ease);
}
.bu-leader__portrait:hover img {
    transform: scale(1.04);
}
.bu-leader__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(var(--bu-ink-rgb), 0.85) 100%
    );
}
.bu-leader__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.5rem;
    color: #fff;
}
.bu-leader__role {
    font-size: 0.68rem;
    font-weight: var(--bu-fw-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bu-gold-light);
}
.bu-leader__name {
    margin: 0.35rem 0 0;
    font-family: var(--bu-font-display);
    font-size: clamp(1.05rem, 1.9vw, 1.35rem);
    font-weight: var(--bu-fw-bold);
    line-height: 1.3;
}

/* Kartu visi/misi */
.bu-vm {
    display: grid;
    gap: 1rem;
}
.bu-vm__item {
    position: relative;
    padding: 1.4rem 1.5rem 1.4rem 1.65rem;
    background: var(--bu-surface);
    border: var(--bu-border);
    border-radius: var(--bu-radius);
    box-shadow: var(--bu-shadow-xs);
}
.bu-vm__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4rem;
    bottom: 1.4rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bu-grad-gold);
}
.bu-vm__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: var(--bu-fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bu-brand);
}
.bu-vm__item p {
    margin: 0;
    font-size: var(--bu-fs-sm);
    line-height: 1.8;
    color: var(--bu-text-2);
}
.bu-vm__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}
.bu-vm__list li {
    display: flex;
    gap: 0.7rem;
    font-size: var(--bu-fs-sm);
    line-height: 1.75;
    color: var(--bu-text-2);
}
.bu-vm__list li i {
    color: var(--bu-brand);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    flex: none;
}

/* ==========================================================================
   BERANDA — PANEL GRAFIK
   ========================================================================== */
.bu-chartpanel {
    background: var(--bu-surface);
    border: var(--bu-border);
    border-radius: var(--bu-radius-lg);
    box-shadow: var(--bu-shadow);
    overflow: hidden;
}
.bu-chartpanel__head {
    padding: clamp(1.15rem, 2.4vw, 1.75rem);
    border-bottom: var(--bu-border);
    background: linear-gradient(180deg, var(--bu-bg-2), var(--bu-surface));
}
.bu-chartpanel__body {
    padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
.bu-chartpanel__title {
    margin: 0 0 1.15rem;
    font-size: 0.95rem;
    font-weight: var(--bu-fw-bold);
    color: var(--bu-text-2);
    text-align: center;
    letter-spacing: 0.02em;
}
.bu-chart {
    position: relative;
    height: 430px;
}
@media (max-width: 720px) {
    .bu-chart {
        height: 340px;
    }
}
.bu-chart canvas {
    max-width: 100%;
}
.bu-chart__state {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.9rem;
    text-align: center;
    background: var(--bu-surface);
    color: var(--bu-text-3);
    font-size: var(--bu-fs-sm);
    z-index: 2;
}
.bu-chart__state[hidden] {
    display: none;
}
.bu-chart__state i {
    font-size: 2rem;
    color: var(--bu-line-strong);
}
.bu-chart__legend-note {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: var(--bu-border);
    font-size: var(--bu-fs-xs);
    color: var(--bu-text-3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bu-chart__legend-note i {
    color: var(--bu-brand);
}

/* ==========================================================================
   BERANDA — PANDUAN SIDARA (gaya terang, hijau, garis waktu)
   ========================================================================== */
.bu-guide {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 980px) {
    .bu-guide {
        grid-template-columns: minmax(0, 1fr);
    }
}
.bu-guide__visual {
    position: relative;
}
/* Panel bergambar — cocok untuk foto maupun ilustrasi */
.bu-guide__panel {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--bu-radius-lg);
    border: 1px solid var(--bu-line);
    background: linear-gradient(160deg, var(--bu-brand-tint) 0%, #fff 68%);
    box-shadow: var(--bu-shadow-lg);
    overflow: hidden;
}
.bu-guide__panel img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: var(--bu-radius);
    transition: transform var(--bu-dur-slow) var(--bu-ease);
}
.bu-guide__panel:hover img {
    transform: scale(1.03);
}
/* Motif gonjong halus di sudut panel */
.bu-guide__panel::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--bu-gold-rgb), 0.22),
        transparent 68%
    );
    pointer-events: none;
}
/* Bingkai dekoratif di belakang panel */
.bu-guide__visual::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 2px solid rgba(var(--bu-brand-rgb), 0.28);
    border-radius: var(--bu-radius-lg);
    z-index: -1;
}
.bu-guide__tag {
    position: absolute;
    left: -14px;
    bottom: 26px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.35rem;
    background: #fff;
    border-radius: var(--bu-radius-pill);
    box-shadow: var(--bu-shadow-lg);
    font-size: 0.85rem;
    font-weight: var(--bu-fw-bold);
    color: var(--bu-brand-dark);
}
.bu-guide__tag i {
    color: var(--bu-gold);
}

/* Logo/nama sistem besar di kepala seksi */
.bu-syslabel {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--bu-font-display);
    font-weight: var(--bu-fw-bold);
    letter-spacing: -0.02em;
}
.bu-syslabel small {
    font-family: var(--bu-font-body);
    font-size: 0.42em;
    font-weight: var(--bu-fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ==========================================================================
   BERANDA — PANDUAN SIPINTAS PLUS (gaya gelap, emas, kartu mendatar)
   ========================================================================== */
.bu-cine {
    position: relative;
    isolation: isolate;
    background: var(--bu-ink);
    color: #fff;
    overflow: hidden;
}
.bu-cine__media {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center 40%;
    opacity: 0.3;
    transform: scale(1.05);
}
.bu-cine__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
            135deg,
            rgba(var(--bu-ink-rgb), 0.96) 0%,
            rgba(var(--bu-ink-rgb), 0.82) 45%,
            rgba(8, 46, 32, 0.92) 100%
        ),
        radial-gradient(
            80% 60% at 15% 20%,
            rgba(var(--bu-gold-rgb), 0.16),
            transparent 70%
        );
}
.bu-cine__head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
    margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
@media (max-width: 900px) {
    .bu-cine__head {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
}
.bu-cine__title {
    margin: 0;
    font-family: var(--bu-font-display);
    font-size: var(--bu-fs-h2);
    font-weight: var(--bu-fw-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}
.bu-cine__title span {
    color: var(--bu-gold);
}
.bu-cine__lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--bu-fs-sm);
    line-height: 1.85;
}
.bu-cine__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.bu-cine__note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--bu-fs-sm);
    color: rgba(255, 255, 255, 0.68);
}
.bu-cine__note i {
    color: var(--bu-gold);
}

/* ==========================================================================
   BERANDA — KOTAK SARAN
   ========================================================================== */
.bu-saran {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    border-radius: var(--bu-radius-xl);
    background: var(--bu-grad-brand);
    color: #fff;
    box-shadow: var(--bu-shadow-lg);
    overflow: hidden;
}
.bu-saran::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--bu-gold-rgb), 0.28),
        transparent 68%
    );
    pointer-events: none;
}
@media (max-width: 860px) {
    .bu-saran {
        grid-template-columns: minmax(0, 1fr);
    }
}
.bu-saran__title {
    margin: 0 0 0.5rem;
    font-family: var(--bu-font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: var(--bu-fw-bold);
    line-height: 1.2;
    color: #fff;
}
.bu-saran__desc {
    margin: 0;
    font-size: var(--bu-fs-sm);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}
.bu-saran__form {
    position: relative;
    display: flex;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--bu-radius-pill);
    padding: 0.4rem 0.4rem 0.4rem 0.4rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.bu-saran__form input[type="text"] {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: var(--bu-radius-pill);
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: #fff;
}
.bu-saran__form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.bu-saran__form input[type="text"]:focus {
    outline: none;
}
.bu-saran__form:focus-within {
    border-color: var(--bu-gold-light);
    box-shadow: 0 0 0 3px rgba(var(--bu-gold-rgb), 0.28);
}
@media (max-width: 480px) {
    .bu-saran__form {
        flex-direction: column;
        border-radius: var(--bu-radius);
        padding: 0.75rem;
    }
    .bu-saran__form input[type="text"] {
        text-align: center;
    }
}

/* ==========================================================================
   HALAMAN DOKUMENTASI
   ========================================================================== */
.bu-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
.bu-shot {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--bu-radius);
    overflow: hidden;
    background: var(--bu-bg-3);
    cursor: pointer;
    aspect-ratio: 4 / 3;
    box-shadow: var(--bu-shadow-xs);
    transition:
        transform var(--bu-dur) var(--bu-ease),
        box-shadow var(--bu-dur) var(--bu-ease);
}
.bu-shot:hover {
    transform: translateY(-5px);
    box-shadow: var(--bu-shadow-lg);
}
.bu-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform var(--bu-dur-slow) var(--bu-ease),
        filter var(--bu-dur) var(--bu-ease);
}
.bu-shot:hover img {
    transform: scale(1.07);
}
.bu-shot__veil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    text-align: left;
    background: linear-gradient(
        180deg,
        transparent 42%,
        rgba(var(--bu-ink-rgb), 0.88) 100%
    );
    opacity: 0.92;
    transition: opacity var(--bu-dur) var(--bu-ease);
}
.bu-shot__title {
    font-size: 0.92rem;
    font-weight: var(--bu-fw-bold);
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bu-shot__date {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--bu-gold-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bu-shot__zoom {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 0.8rem;
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity var(--bu-dur) var(--bu-ease),
        transform var(--bu-dur) var(--bu-ease);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bu-shot:hover .bu-shot__zoom {
    opacity: 1;
    transform: none;
}

.bu-gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.bu-gallery-count {
    font-size: var(--bu-fs-sm);
    color: var(--bu-text-3);
}
.bu-gallery-count strong {
    color: var(--bu-brand);
    font-weight: var(--bu-fw-bold);
}

/* Kerangka pemuatan galeri */
.bu-gallery--loading .bu-skeleton {
    aspect-ratio: 4 / 3;
}

/* ==========================================================================
   DAFTAR BUKU TAMU (/buku-tamu/list)

   Pengelompokan waktunya memakai .bu-tabs/.bu-tab yang sudah ada. Yang
   khas halaman ini hanya dua: baris pemilih bulan dan pasangan tombol
   pada bilah alat.
   ========================================================================== */
.bu-monthpick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.bu-monthpick__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--bu-fs-sm);
    font-weight: var(--bu-fw-semibold);
    color: var(--bu-text-2);
}
.bu-monthpick__label i {
    color: var(--bu-text-3);
}

/* Selebar isinya, bukan selebar baris — .bu-select bawaannya width:100%
   karena dirancang untuk formulir bertumpuk. */
.bu-monthpick__select {
    width: auto;
    min-width: min(20rem, 100%);
    min-height: 44px;
    padding-block: 0.55rem;
}

.bu-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* ==========================================================================
   HALAMAN SATU GERBANG (/gerbang)
   ========================================================================== */
.bu-gate {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--bu-ink);
    color: var(--bu-text-inv);
    overflow: hidden;
}
.bu-gate__media {
    position: absolute;
    inset: -3%;
    z-index: -3;
    background-size: cover;
    background-position: center;
    /* Foto sengaja diredam kuat. Kartu sistem berlatar kaca, jadi bagian
       foto yang terang (kolom kuning gedung) bisa menelan kartu bila
       peredamannya kurang. */
    opacity: 0.34;
    animation: bu-kenburns 44s var(--bu-ease) infinite alternate;
}
.bu-gate__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
            170deg,
            rgba(var(--bu-ink-rgb), 0.95) 0%,
            rgba(var(--bu-ink-rgb), 0.86) 45%,
            rgba(var(--bu-ink-rgb), 0.97) 100%
        ),
        radial-gradient(
            70% 55% at 82% 12%,
            rgba(var(--bu-gold-rgb), 0.16),
            transparent 70%
        ),
        radial-gradient(
            80% 60% at 12% 92%,
            rgba(var(--bu-brand-rgb), 0.32),
            transparent 72%
        );
}

/* -- Bilah atas -- */
.bu-gate__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem var(--bu-gutter);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bu-gate__bar .bu-brand {
    color: #fff;
}
.bu-gate__bar .bu-brand__kicker {
    color: var(--bu-gold-light);
}
.bu-gate__bar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.bu-gate__bar .bu-usermenu__trigger {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.bu-gate__home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: var(--bu-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: var(--bu-fw-semibold);
    white-space: nowrap;
    transition: background-color var(--bu-dur-fast) var(--bu-ease);
}
.bu-gate__home:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
@media (max-width: 640px) {
    .bu-gate__home span {
        display: none;
    }
}

/* -- Isi -- */
.bu-gate__body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: clamp(2.5rem, 7vw, 5rem);
}
.bu-gate__head {
    max-width: 720px;
    margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
    text-align: center;
}
.bu-gate__title {
    margin: 0 0 0.75rem;
    font-family: var(--bu-font-display);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    font-weight: var(--bu-fw-bold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
}
.bu-gate__title em {
    font-style: italic;
    color: var(--bu-gold-light);
}
.bu-gate__lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--bu-fs-lead);
    line-height: 1.7;
}

/* -- Deretan kartu sistem --------------------------------------------------
   Kartu disusun satu baris dan rata tengah. Bila jumlahnya melebihi batas
   kolom, sisanya turun ke baris berikutnya dan tetap rata tengah.

   Ingin mengubah jumlah maksimal per baris atau ukuran kartu?
   Cukup ubah tiga variabel di bawah ini.
   ------------------------------------------------------------------------- */
.bu-gate__grid {
    --bu-gate-cols: 6; /* maksimal kartu dalam satu baris */
    --bu-gate-item: 172px; /* lebar satu kartu             */
    --bu-gate-gap: 20px; /* jarak antar kartu            */

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--bu-gate-gap);
    margin-inline: auto;
    max-width: calc(
        var(--bu-gate-cols) * var(--bu-gate-item) + (var(--bu-gate-cols) - 1) *
            var(--bu-gate-gap)
    );
}

@media (max-width: 720px) {
    .bu-gate__grid {
        --bu-gate-item: 142px;
        --bu-gate-gap: 14px;
    }
}
@media (max-width: 360px) {
    .bu-gate__grid {
        --bu-gate-item: 128px;
    }
}

.bu-gate-card {
    position: relative;
    flex: 0 0 var(--bu-gate-item);
    width: var(--bu-gate-item);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: 1.6rem 0.9rem 1.5rem;
    text-align: center;
    border-radius: var(--bu-radius-lg);
    /* Latar kartu memakai warna tinta pekat, BUKAN putih transparan,
       agar kartu tetap terbaca di atas bagian foto yang terang.

       CATATAN PENTING — JANGAN tambahkan backdrop-filter di sini.
       Kartu ini berada di dalam .bu-gate yang memakai isolation: isolate
       dan overflow: hidden. Kombinasi backdrop-filter + lapisan
       mix-blend-mode di dalam stacking context tersebut memicu bug
       komposit: sebagian kartu dirender transparan (hilang) tergantung
       pembagian tile GPU — biasanya hanya satu dua kartu pertama yang
       tampil. Latar pekat di bawah ini sudah cukup tanpa blur. */
    background: rgba(var(--bu-ink-rgb), 0.74);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
    transition:
        transform var(--bu-dur) var(--bu-ease),
        background-color var(--bu-dur) var(--bu-ease),
        border-color var(--bu-dur) var(--bu-ease),
        box-shadow var(--bu-dur) var(--bu-ease);
}
.bu-gate-card:hover {
    transform: translateY(-6px);
    background: rgba(var(--bu-ink-rgb), 0.88);
    border-color: rgba(var(--bu-gold-rgb), 0.65);
    box-shadow: var(--bu-shadow-xl);
    color: #fff;
}
.bu-gate-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--bu-grad-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--bu-dur-slow) var(--bu-ease);
}
.bu-gate-card:hover::after {
    transform: scaleX(1);
}

/* -- Kemunculan kartu — MURNI CSS, TIDAK bergantung JavaScript -------------

   CATATAN PENTING — JANGAN pasang kelas .bu-reveal pada kartu ini.
   .bu-reveal menyembunyikan elemen (opacity: 0) sampai JavaScript
   menambahkan .is-visible, dan ia memasang will-change sehingga SETIAP
   kartu dipaksa menjadi lapisan GPU tersendiri. Kartu berada di dalam
   .bu-gate yang memakai isolation: isolate + overflow: hidden dan berisi
   foto latar ber-animasi tanpa henti (bu-kenburns). Gabungan itu memicu
   bug komposit: sebagian lapisan kartu tidak pernah dilukis — kartunya
   tetap ada dan bisa diklik (URL muncul di bilah status peramban) tetapi
   tampak kosong, umumnya hanya satu dua kartu pertama yang terlihat.

   Animasi di bawah ini tidak memakai will-change dan hanya memakai
   fill-mode `backwards` — begitu selesai, kartu kembali ke gaya normal
   (opacity 1). Jadi kartu pasti tampil, bahkan bila JavaScript gagal
   dimuat atau animasinya tidak dijalankan sama sekali.

   Urutan tundaan diambil dari --bu-gate-i yang ditulis per kartu di
   resources/views/gateway/index.blade.php.

   Bila suatu saat kartu kembali "hilang", periksa dulu apakah ada
   properti pemicu lapisan GPU yang tersisa di dalam .bu-gate
   (will-change, backdrop-filter, mix-blend-mode, filter, atau opacity
   pada elemen ber-animasi).
   ------------------------------------------------------------------------- */
@keyframes bu-gate-card-in {
    from {
        opacity: 0;
        translate: 0 22px;
    }
    to {
        opacity: 1;
        translate: none;
    }
}
.bu-gate-card {
    animation: bu-gate-card-in var(--bu-dur-slow) var(--bu-ease-out) backwards;
    animation-delay: calc(var(--bu-gate-i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
    .bu-gate-card {
        animation: none;
    }
}

.bu-gate-card__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: none;
    border-radius: 20px;
    background: rgba(var(--bu-brand-rgb), 0.3);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.55rem;
    transition:
        background-color var(--bu-dur) var(--bu-ease),
        transform var(--bu-dur) var(--bu-ease);
}
@media (max-width: 720px) {
    .bu-gate-card__icon {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }
}
.bu-gate-card:hover .bu-gate-card__icon {
    transform: rotate(-6deg) scale(1.06);
}
/* Ragam warna ikon per sistem */
.bu-gate-card__icon--gold {
    background: rgba(var(--bu-gold-rgb), 0.24);
    color: var(--bu-gold-light);
}
.bu-gate-card__icon--slate {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.bu-gate-card__icon--crimson {
    background: rgba(168, 35, 42, 0.35);
    color: #ffc9cb;
}

.bu-gate-card__name {
    margin: 0;
    font-family: var(--bu-font-display);
    font-size: 1.06rem;
    font-weight: var(--bu-fw-bold);
    line-height: 1.25;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}
@media (max-width: 720px) {
    .bu-gate-card__name {
        font-size: 0.94rem;
    }
}

/* Penanda kecil untuk sistem yang dibuka di tab baru */
.bu-gate-card__ext {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    transition: color var(--bu-dur-fast) var(--bu-ease);
}
.bu-gate-card:hover .bu-gate-card__ext {
    color: var(--bu-gold);
}

/* Pemberitahuan bila belum punya hak akses sistem internal */
.bu-gate__notice {
    max-width: 640px;
    margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
    padding: 1.15rem 1.4rem;
    border-radius: var(--bu-radius);
    border: 1px dashed rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--bu-fs-sm);
    line-height: 1.75;
    text-align: center;
}
.bu-gate__notice i {
    color: var(--bu-gold);
    margin-right: 0.45rem;
}

/* -- Kaki halaman -- */
.bu-gate__foot {
    position: relative;
    z-index: 1;
    padding: 1.1rem var(--bu-gutter);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: var(--bu-fs-xs);
    color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   HALAMAN MASUK (LOGIN) & AUTENTIKASI
   ========================================================================== */
.bu-auth {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    background: var(--bu-bg);
}
@media (max-width: 1024px) {
    .bu-auth {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -- Panel kiri: visual sinematik -- */
.bu-auth__stage {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: #fff;
    overflow: hidden;
    background: var(--bu-ink);
}
@media (max-width: 1024px) {
    .bu-auth__stage {
        min-height: 300px;
        justify-content: flex-end;
    }
}
.bu-auth__media {
    position: absolute;
    inset: -3%;
    z-index: -3;
    background-size: cover;
    background-position: center;
    animation: bu-kenburns 40s var(--bu-ease) infinite alternate;
}
.bu-auth__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
            170deg,
            rgba(var(--bu-ink-rgb), 0.9) 0%,
            rgba(var(--bu-ink-rgb), 0.64) 42%,
            rgba(var(--bu-ink-rgb), 0.96) 100%
        ),
        radial-gradient(
            85% 60% at 20% 85%,
            rgba(var(--bu-brand-rgb), 0.4),
            transparent 70%
        );
}
.bu-auth__top {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.bu-auth__top img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}
.bu-auth__top {
    color: #fff;
    text-decoration: none;
}
.bu-auth__top-text {
    display: grid;
    line-height: 1.2;
}
.bu-auth__top-text strong {
    font-family: var(--bu-font-display);
    font-size: 1.12rem;
    font-weight: var(--bu-fw-bold);
}
.bu-auth__top-text > span {
    font-size: 0.62rem;
    font-weight: var(--bu-fw-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bu-gold-light);
}
.bu-auth__stage-body {
    max-width: 520px;
    margin-block: auto 0;
}
@media (max-width: 1024px) {
    .bu-auth__stage-body {
        margin-top: 2rem;
    }
}
.bu-auth__stage-title {
    margin: 0 0 1rem;
    font-family: var(--bu-font-display);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: var(--bu-fw-bold);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.bu-auth__stage-title em {
    font-style: italic;
    color: var(--bu-gold-light);
}
.bu-auth__stage-lead {
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--bu-fs-sm);
    line-height: 1.85;
    max-width: 460px;
}
.bu-auth__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.bu-auth__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--bu-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.78rem;
    font-weight: var(--bu-fw-semibold);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bu-auth__chip i {
    color: var(--bu-gold);
    font-size: 0.75rem;
}

/* -- Panel kanan: formulir -- */
.bu-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
    background: var(--bu-bg);
}
.bu-auth__card {
    width: 100%;
    max-width: 440px;
}
.bu-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
    font-weight: var(--bu-fw-semibold);
    color: var(--bu-text-3);
    text-decoration: none;
}
.bu-auth__back:hover {
    color: var(--bu-brand);
}
.bu-auth__title {
    margin: 0 0 0.45rem;
    font-family: var(--bu-font-display);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: var(--bu-fw-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--bu-text);
}
.bu-auth__sub {
    margin: 0 0 2rem;
    color: var(--bu-text-2);
    font-size: var(--bu-fs-sm);
    line-height: 1.7;
}
.bu-auth__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 1.6rem;
}
.bu-auth__forgot {
    font-size: var(--bu-fs-sm);
    font-weight: var(--bu-fw-semibold);
    color: var(--bu-brand);
    text-decoration: none;
}
.bu-auth__forgot:hover {
    text-decoration: underline;
}
.bu-auth__divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.85rem 0;
    font-size: var(--bu-fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bu-text-3);
}
.bu-auth__divider::before,
.bu-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bu-line);
}
.bu-auth__help {
    padding: 1.15rem 1.3rem;
    border: 1px dashed var(--bu-line-strong);
    border-radius: var(--bu-radius);
    background: var(--bu-bg-2);
    font-size: var(--bu-fs-sm);
    line-height: 1.75;
    color: var(--bu-text-2);
}
.bu-auth__help strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--bu-text);
}
.bu-auth__foot {
    margin-top: 2rem;
    font-size: var(--bu-fs-xs);
    color: var(--bu-text-3);
    text-align: center;
    line-height: 1.7;
}