/* ============================================================
 | RBAC Menu Permission Tree
 |============================================================ */
.rbac-tree .menu-row { border-bottom: 1px solid rgba(0,0,0,0.04); }
.rbac-tree .menu-title { font-weight: 600; }
.rbac-tree .submenu { padding-left: 1.5rem; }
.rbac-tree .menu-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.rbac-tree .form-check { margin: 0; }
.rbac-tree .level-0 > .menu-row { background: rgba(17,149,173,0.04); }
.rbac-sticky-actions { position: sticky; top: 70px; z-index: 10; }
.action-legend .badge { font-weight: 500; }

/* ============================================================
 | Landing Page (Perpustakaan SMA)
 |------------------------------------------------------------
 | Warna mengikuti CSS variables dari Theme Manager
 | (di-inject via <style id="theme-variables"> pada <head>),
 | dengan fallback default agar tetap tampil rapi.
 |============================================================ */
/* Palet "Ocean Teal": latar terang, tinta slate, aksen teal, hijau sebagai
   success. Nilai di-override oleh Theme Manager. */
:root {
    --lp-primary: var(--primary-color, #1195AD);
    --lp-primary-hover: var(--primary-hover, #0E7C90);
    --lp-primary-light: var(--primary-light, #D7F4F9);
    /* Teks aksen kontras-aman (WCAG AA ≥4.5:1 di atas putih) — teal gelap */
    --lp-primary-text: #0B6B7D;
    --lp-primary-text-hover: #095A69;
    --lp-secondary: var(--secondary-color, #233D45);
    --lp-text: var(--heading-color, #1B2A2F);
    --lp-muted: var(--body-text, #55707A);
    --lp-bg: var(--bg-color, #F7FAFC);
    --lp-soft: #F1F6F9;
    --lp-card: var(--card-color, #FFFFFF);
    --lp-border: var(--border-color, #E2E8F0);
    --lp-hero-bg: var(--landing-hero-bg, #D7F4F9);
    --lp-gradient: var(--landing-gradient, linear-gradient(135deg, #FFFFFF 0%, #EAF9FC 45%, #D7F4F9 100%));
    --lp-footer-bg: var(--landing-footer-bg, #233D45);
    --lp-section-bg: var(--landing-section-bg, #FFFFFF);
    --lp-button-style: var(--landing-button-style, rounded);
    --lp-typography: var(--landing-typography, 'Poppins', system-ui, sans-serif);
    --lp-radius: 20px;
    --lp-radius-btn: 16px;
    /* Shadow di-tint ke hue slate (Design Taste: no black shadows) */
    --lp-shadow: 0 10px 35px rgba(35, 61, 69, 0.10);
    --lp-shadow-sm: 0 6px 18px rgba(35, 61, 69, 0.08);
    --lp-shadow-btn: 0 10px 30px rgba(17, 149, 173, 0.22);
    --lp-font: var(--font-family, 'Poppins', system-ui, sans-serif);
    --lp-success: var(--success-color, #2BB673);
    --lp-warning: var(--warning-color, #F4A261);
    --lp-danger: var(--danger-color, #B03A2E);
}


body {
    font-family: var(--lp-typography, var(--lp-font));
    color: var(--lp-text);
    background: var(--lp-bg);
}

/* ===== Button style dari Theme Manager (rounded | square | pill) ===== */
.btn {
    border-radius: var(--lp-radius-btn);
}
body[data-button-style="pill"] .btn {
    border-radius: 50rem;
}
body[data-button-style="square"] .btn {
    border-radius: 0;
}

/* ===== Section background dari Theme Manager ===== */
.section-space:not(.soft-bg) {
    background: var(--lp-section-bg);
}

/* ===== Dark mode support ===== */
body[data-theme-mode="dark"] {
    --lp-bg: #0F172A;
    --lp-text: #E2E8F0;
    --lp-muted: #94A3B8;
    --lp-card: #1E293B;
    --lp-border: #334155;
    --lp-soft: #111C33;
    --lp-section-bg: #111C33;
    --lp-hero-bg: #0F172A;
    --lp-gradient: linear-gradient(135deg, #0B1220 0%, #111C33 45%, #1E293B 100%);
    --lp-footer-bg: #0B1220;
}
body[data-theme-mode="dark"] .library-navbar.is-solid {
    background: rgba(15, 23, 42, 0.92);
}
body[data-theme-mode="dark"] .library-visual figcaption,
body[data-theme-mode="dark"] .literacy-banner > div {
    background: rgba(30, 41, 59, 0.92);
}
body[data-theme-mode="dark"] .testimonial-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.65);
}

/* ===== Animation disable ===== */
body[data-animation="disabled"] .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}
body[data-animation="disabled"] .running-text span {
    animation: none;
    padding-left: 0;
}
body[data-animation="disabled"] .live-dot {
    animation: none;
}
body[data-animation="disabled"] .btn-primary,
body[data-animation="disabled"] .btn-primary:hover,
body[data-animation="disabled"] .search-box button,
body[data-animation="disabled"] .search-box button:hover,
body[data-animation="disabled"] .info-stat,
body[data-animation="disabled"] .info-stat:hover,
body[data-animation="disabled"] .service-card,
body[data-animation="disabled"] .service-card:hover,
body[data-animation="disabled"] .book-card,
body[data-animation="disabled"] .book-card:hover,
body[data-animation="disabled"] .news-card,
body[data-animation="disabled"] .news-card:hover,
body[data-animation="disabled"] .category-card,
body[data-animation="disabled"] .category-card:hover,
body[data-animation="disabled"] .achievement-card,
body[data-animation="disabled"] .achievement-card:hover,
body[data-animation="disabled"] .testimonial-card,
body[data-animation="disabled"] .testimonial-card:hover,
body[data-animation="disabled"] .socials a,
body[data-animation="disabled"] .socials a:hover,
body[data-animation="disabled"] .download-card a,
body[data-animation="disabled"] .school-footer a,
body[data-animation="disabled"] .lightbox-close,
body[data-animation="disabled"] .gallery-item img,
body[data-animation="disabled"] .gallery-item figcaption {
    transform: none;
    transition: none;
}
body[data-animation="disabled"] .gallery-item figcaption { opacity: 1; }

.library-header a,
main a {
    text-decoration: none;
}

/* ===== Navbar ===== */
.library-navbar {
    background: transparent;
    padding: 1rem 0;
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.library-navbar.is-solid {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
    padding: .5rem 0;
}
.library-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--lp-text);
    font-weight: 700;
}
.library-navbar .navbar-brand .logo-mark {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--lp-primary-text);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: var(--lp-shadow-sm);
}
.library-navbar .navbar-brand .logo-image {
    display: block;
    height: auto;
    max-height: 48px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}
@media (max-width: 576px) {
    .library-navbar .navbar-brand .logo-image {
        max-height: 36px;
    }
}
.library-navbar .navbar-brand strong { display: block; line-height: 1.1; font-size: 1.05rem; }
.library-navbar .navbar-brand small { color: var(--lp-muted); font-size: .8rem; }
.library-navbar .nav-link {
    font-weight: 500;
    color: var(--lp-text);
    padding: .5rem 1rem;
    border-radius: .6rem;
    transition: color .2s ease, background .2s ease;
}
.library-navbar .nav-link:hover,
.library-navbar .nav-link.active {
    color: var(--lp-primary-text);
    background: rgba(17, 149, 173, 0.08);
}

.landing-user-name { font-size: .9rem; line-height: 1.1; }
.landing-user-role { font-size: .75rem; }

/* ===== Buttons ===== */
.btn-primary {
    --bs-btn-bg: var(--lp-primary-text);
    --bs-btn-border-color: var(--lp-primary-text);
    --bs-btn-hover-bg: var(--lp-primary-text-hover);
    --bs-btn-hover-border-color: var(--lp-primary-text-hover);
    --bs-btn-active-bg: var(--lp-primary-text-hover);
    border-radius: var(--lp-radius-btn);
    box-shadow: var(--lp-shadow-btn);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary {
    --bs-btn-color: var(--lp-primary-text);
    --bs-btn-border-color: var(--lp-primary-text);
    --bs-btn-hover-bg: var(--lp-primary-text);
    --bs-btn-hover-border-color: var(--lp-primary-text);
    --bs-btn-active-bg: var(--lp-primary-text);
}

/* ===== Section utilities ===== */
.section-space { padding: 5rem 0; }
.soft-bg { background: var(--lp-soft); }
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lp-primary-text);
    background: var(--lp-primary-light);
    padding: .4rem .9rem;
    border-radius: 50rem;
    margin-bottom: 1rem;
}
.section-title { max-width: 720px; margin-bottom: 2.5rem; }
.section-title h2 { font-weight: 700; }
main h1 { font-weight: 800; line-height: 1.15; font-size: clamp(2rem, 4vw, 3rem); }
main h2 { font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); }
main h3 { font-weight: 600; }

/* ===== Hero ===== */
.hero-library {
    position: relative;
    padding: 9rem 0 5rem;
    overflow: hidden;
    background: var(--lp-gradient);
}
/* Floating abstract blobs (low opacity) - Design brief */
.hero-library::before,
.hero-library::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}
.hero-library::before {
    width: 420px; height: 420px;
    background: rgba(17, 149, 173, 0.16);
    top: -120px; right: -80px;
}
.hero-library::after {
    width: 320px; height: 320px;
    background: rgba(215, 244, 249, 0.7);
    bottom: -120px; left: -60px;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    z-index: 0;
}
.hero-orb-one { width: 340px; height: 340px; background: var(--lp-primary); top: -80px; right: -60px; opacity: .18; }
.hero-orb-two { width: 260px; height: 260px; background: var(--lp-primary-light); bottom: -60px; left: -40px; opacity: .5; }
.hero-library .container { position: relative; z-index: 1; }
.hero-library p { color: var(--lp-muted); font-size: 1.1rem; max-width: 34rem; }

/* Glassmorphism khusus hero card (Design brief) */
.hero-glass-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    padding: 1.5rem;
}
/* Fallback bila transparansi dikurangi (aksesibilitas) */
@media (prefers-reduced-transparency: reduce) {
    .hero-glass-card,
    .testimonial-card {
        background: var(--lp-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.running-text {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: 50rem;
    padding: .6rem 1.2rem;
    margin-bottom: 2rem;
    box-shadow: var(--lp-shadow-sm);
    overflow: hidden;
}
.running-text > i { color: var(--lp-primary); flex-shrink: 0; }
.running-text > div { overflow: hidden; white-space: nowrap; }
.running-text span {
    display: inline-block;
    padding-left: 100%;
    animation: lp-marquee 22s linear infinite;
    color: var(--lp-muted);
    font-size: .9rem;
}
@keyframes lp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
/* WCAG 2.2.2 Pause, Stop, Hide: jeda marquee saat hover/fokus */
.running-text:hover span,
.running-text:focus-within span {
    animation-play-state: paused;
}

.search-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: 50rem;
    padding: .5rem .5rem .5rem 1.25rem;
    box-shadow: var(--lp-shadow-sm);
    max-width: 34rem;
}
.search-box > i { color: var(--lp-muted); }
.search-box input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    padding: .5rem;
    font-size: .95rem;
    color: var(--lp-text);
}
.search-box button {
    border: 0;
    background: var(--lp-primary-text);
    color: #fff;
    font-weight: 600;
    padding: .65rem 1.5rem;
    border-radius: 50rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.search-box button:hover { transform: translateY(-1px); box-shadow: var(--lp-shadow-btn); }

.library-visual {
    position: relative;
    margin: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}
.library-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.library-visual figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: .85rem 1.1rem;
    box-shadow: var(--lp-shadow-sm);
}
.library-visual figcaption strong { display: block; font-size: .95rem; }
.library-visual figcaption span { color: var(--lp-muted); font-size: .82rem; }
.live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: .4rem;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: lp-pulse 1.8s infinite;
}
@keyframes lp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ===== Stats ===== */
.stats-section { margin-top: -3rem; position: relative; z-index: 2; padding-bottom: 1rem; }
.info-stat {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.info-stat:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.info-stat i { font-size: 1.75rem; color: var(--lp-primary); }
.info-stat strong { display: block; font-size: 1.6rem; font-weight: 700; margin-top: .5rem; }
.info-stat span { color: var(--lp-muted); font-size: .85rem; }

/* ===== Profile ===== */
.profile-photo {
    width: 100%;
    border-radius: 1.5rem;
    box-shadow: var(--lp-shadow);
    object-fit: cover;
}
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.profile-grid article {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.25rem;
    box-shadow: var(--lp-shadow-sm);
}
.profile-grid h3 { font-size: 1rem; color: var(--lp-primary-text); margin-bottom: .5rem; }
.profile-grid p { color: var(--lp-muted); font-size: .9rem; margin: 0; }

/* ===== Service cards ===== */
.service-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.service-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.service-card h3 { font-size: 1.1rem; }
.service-card p { color: var(--lp-muted); font-size: .9rem; margin: 0; }

/* ===== Book cards ===== */
.book-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.book-card:hover { transform: translateY(-5px); box-shadow: var(--lp-shadow); }
.book-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.book-card > div { padding: 1rem; }
.book-card span {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lp-primary-text);
}
.book-card h3 {
    font-size: .98rem;
    margin: .35rem 0 .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-card p { color: var(--lp-muted); font-size: .82rem; margin-bottom: .5rem; }
.book-card small { color: #15803d; font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; }

/* ===== Category ===== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.5rem 1rem;
    color: var(--lp-text);
    text-align: center;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); color: var(--lp-primary-text); }
.category-card i { font-size: 1.6rem; color: var(--lp-primary); }
.category-card span { font-weight: 600; font-size: .9rem; }

/* ===== Literacy ===== */
.literacy-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.literacy-list span {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
    color: var(--lp-text);
}
.literacy-list i { color: var(--lp-primary); font-size: 1.15rem; }
.literacy-banner {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}
.literacy-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.literacy-banner > div {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    box-shadow: var(--lp-shadow-sm);
}
.literacy-banner strong { display: block; }
.literacy-banner span { color: var(--lp-muted); font-size: .85rem; }

/* ===== News ===== */
.news-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.news-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.news-card > div { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.news-card time { color: var(--lp-primary-text); font-size: .78rem; font-weight: 600; }
.news-card h3 { font-size: 1.05rem; margin: .35rem 0 .5rem; }
.news-card p {
    color: var(--lp-muted);
    font-size: .88rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card .btn { align-self: flex-start; margin-top: auto; }

/* ===== Schedule / Calendar / Download ===== */
.schedule-card,
.calendar-card,
.download-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
}
.schedule-card i { font-size: 1.75rem; color: var(--lp-primary); }
.schedule-card h2,
.calendar-card h2,
.download-card h2 { font-size: 1.2rem; margin: .75rem 0 .5rem; }
.schedule-card p { color: var(--lp-muted); margin-bottom: .25rem; }
.schedule-card strong { font-size: 1.4rem; color: var(--lp-primary-text); display: block; }
.schedule-card small { color: var(--lp-muted); }
.calendar-card ul { list-style: none; padding: 0; margin: 0; }
.calendar-card li {
    display: flex;
    flex-direction: column;
    padding: .6rem 0;
    border-bottom: 1px solid var(--lp-border);
    font-weight: 500;
}
.calendar-card li:last-child { border-bottom: 0; }
.calendar-card li span { color: var(--lp-primary-text); font-size: .8rem; font-weight: 600; }
.download-card a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    color: var(--lp-text);
    font-weight: 500;
    margin-bottom: .6rem;
    transition: background .2s ease, border-color .2s ease;
}
.download-card a:hover { background: var(--lp-primary-light); border-color: var(--lp-primary); }
.download-card a i { color: var(--lp-primary); }
.download-card h3 { font-size: 1rem; margin-top: 1rem; }
.download-card p { color: var(--lp-muted); font-size: .88rem; }

/* ===== Contact & Map ===== */
.contact-list { margin-top: 1.5rem; }
.contact-list p {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--lp-text);
    margin-bottom: .9rem;
}
.contact-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    flex-shrink: 0;
}
.map-box {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    min-height: 320px;
    height: 100%;
}
.map-box iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ===== Accordion / FAQ ===== */
.accordion-item {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius) !important;
    margin-bottom: .75rem;
    overflow: hidden;
    background: var(--lp-card);
}
.accordion-button {
    font-weight: 600;
    background: var(--lp-card);
    color: var(--lp-text);
}
.accordion-button:not(.collapsed) {
    background: var(--lp-primary-light);
    color: var(--lp-primary-text);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: none; }
.accordion-body { color: var(--lp-muted); }

/* ===== Footer ===== */
.school-footer {
    background: var(--lp-footer-bg);
    color: rgba(255, 255, 255, 0.75);
    padding: 4rem 0 2rem;
    margin-top: 2rem;
}
.school-footer h2 { font-size: 1rem; color: #fff; margin-bottom: 1rem; }
.school-footer a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: .5rem;
    transition: color .2s ease;
}
.school-footer a:hover { color: #fff; }
.school-footer p { color: rgba(255, 255, 255, 0.7); font-size: .9rem; }
.footer-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 1rem;
}
.footer-logo i { color: var(--lp-primary); font-size: 1.5rem; }
.socials { display: flex; gap: .6rem; }
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    margin: 0;
    transition: background .2s ease, transform .2s ease;
}
.socials a:hover { background: var(--lp-primary); transform: translateY(-2px); }
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ===== Category badge (kartu berita/announcement) ===== */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lp-primary-text);
    background: var(--lp-primary-light);
    padding: .3rem .7rem;
    border-radius: 50rem;
}

/* ===== Achievement grid ===== */
.achievement-card {
    position: relative;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.achievement-card:hover { transform: translateY(-5px); box-shadow: var(--lp-shadow); }
.achievement-card .ach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.achievement-card .ach-year {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--lp-muted);
}
.achievement-card h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.achievement-card p { color: var(--lp-muted); font-size: .88rem; margin: 0; }
.achievement-card .ach-tag {
    display: inline-block;
    margin-top: .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--lp-primary-text);
}

/* ===== Statistics (animated counters) ===== */
.counter-stat strong { font-variant-numeric: tabular-nums; }

/* ===== Gallery (masonry + hover zoom + lightbox) ===== */
.gallery-masonry {
    columns: 3 260px;
    column-gap: 1rem;
}
.gallery-item {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow-sm);
    cursor: zoom-in;
    break-inside: avoid;
    position: relative;
}
.gallery-item img {
    width: 100%;
    display: block;
    transition: transform .3s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem .9rem .8rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    background: linear-gradient(to top, rgba(35, 61, 69, 0.85), transparent);
    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption { opacity: 1; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(35, 61, 69, 0.9);
    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--lp-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ===== Testimonials (glass cards + rating) ===== */
.testimonial-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--lp-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.testimonial-card .stars { color: var(--lp-warning); font-size: .9rem; margin-bottom: .75rem; letter-spacing: .1em; }
.testimonial-card blockquote { color: var(--lp-text); font-size: .95rem; line-height: 1.6; margin: 0 0 1.25rem; }
.testimonial-author { display: flex; align-items: center; gap: .75rem; }
.testimonial-author img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--lp-shadow-sm);
}

.testimonial-author .ta-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--lp-primary-text);
    flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: .92rem; }
.testimonial-author span { color: var(--lp-muted); font-size: .8rem; }

/* ===== Reveal animations ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
    will-change: opacity, transform;
}
.reveal.slide-left { transform: translateX(28px); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 767.98px) {
    .section-space { padding: 3.5rem 0; }
    .hero-library { padding: 7rem 0 3.5rem; }
    .profile-grid { grid-template-columns: 1fr; }
    .stats-section { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .running-text span { animation: none; padding-left: 0; }
    .live-dot { animation: none; }
    .library-navbar,
    .library-navbar .nav-link,
    .btn-primary,
    .btn-primary:hover,
    .search-box button,
    .search-box button:hover,
    .info-stat,
    .info-stat:hover,
    .service-card,
    .service-card:hover,
    .book-card,
    .book-card:hover,
    .news-card,
    .news-card:hover,
    .category-card,
    .category-card:hover,
    .achievement-card,
    .achievement-card:hover,
    .testimonial-card,
    .testimonial-card:hover,
    .socials a,
    .socials a:hover,
    .download-card a,
    .school-footer a,
    .lightbox-close,
    .gallery-item img,
    .gallery-item figcaption {
        transform: none;
        transition: none;
    }
    .gallery-item figcaption { opacity: 1; }
}

