/*
Theme Name: SDN Cilopang
Theme URI: http://sdn-cilopang.test
Author: KKN SDN Cilopang
Description: Theme khusus website SDN Cilopang.
Version: 1.0.0
*/

/* ======================================================================
   SDN CILOPANG - DESIGN SYSTEM "MERAH PUTIH FORMAL"
   ====================================================================== */

:root {
    --color-merah: #B0102A;
    --color-merah-pekat: #6E0A1C;
    --color-merah-tint: #E7C6CB;
    --color-putih-tulang: #FAF8F5;
    --color-putih: #FFFFFF;
    --color-arang: #1A1717;
    --color-arang-soft: #4A4544;
    --color-emas: #B8912F;
    --font-heading: 'Sora', 'Libre Franklin', sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --fs-hero: clamp(2.5rem, 5vw, 4rem);
    --fs-h1: clamp(2rem, 3.5vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 2.5vw, 2rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-card: 0 4px 16px rgba(26, 23, 23, 0.08);
    --shadow-merah: 0 8px 24px rgba(176, 16, 42, 0.25);
    --sdn-primary: var(--color-merah);
    --sdn-primary-700: var(--color-merah-pekat);
    --sdn-text: var(--color-arang);
    --sdn-muted: var(--color-arang-soft);
    --sdn-border: var(--color-merah-tint);
    --sdn-surface: var(--color-putih-tulang);
}

body {
    font-family: var(--font-body);
    color: var(--color-arang);
    background-color: var(--color-putih-tulang);
}

h1, h2, h3, h4,
.site-title,
.section-title {
    font-family: var(--font-heading);
    color: var(--color-arang);
}

p {
    color: var(--color-arang-soft);
}
/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-arang);
    background: var(--color-putih);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Glassmorphism header: translucent with backdrop blur */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.header-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.site-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.site-tagline {
    font-size: 12px;
    color: var(--color-arang-soft);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.82),
            rgba(15, 23, 42, 0.35)
        ),
        url("assets/images/hero.jpg") center / cover;
}

.hero-content {
    max-width: 700px;
    color: var(--color-putih);
}

.hero-label {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-title {
    margin: 0 0 20px;
    color: var(--color-putih);
    line-height: 1.05;
    font-weight: 800;
}

.hero-title__main {
    display: block;
    font-size: clamp(2.8rem, 5vw, 5rem);
}

.hero-title__sub {
    display: block;
    font-size: clamp(1.5rem, 2.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
}

.hero p {
    max-width: 600px;
    margin: 0 0 30px;
    font-size: 18px;
}

.btn {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.2s ease;
}

.btn-primary {
    background: var(--color-merah);
    color: var(--color-putih);
}

.btn-primary:hover {
    background: var(--color-merah-pekat);
    transform: translateY(-2px);
}


/* =========================================================
   SECTION
   ========================================================= */

.section {
    padding: 90px 0;
}

.section-header {
    max-width: 650px;
    margin-bottom: 20px;
}

.section-label {
    margin-bottom: 8px;
    color: var(--color-merah);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title {
    margin: 0 0 10px;
    font-size: 38px;
    line-height: 1.2;
}

.section-description {
    margin: 0;
    color: var(--color-arang-soft);
}

/* Contact page styles (moved from page-kontak.php) */
.contact-page .contact-grid {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.contact-page .contact-info {
    flex: 1 1 380px;
    min-width: 260px;
}

.contact-page .contact-map {
    flex: 1 1 380px;
    min-width: 260px;
    max-width: 640px;
}

.contact-page .contact-map-box {
    background: var(--color-putih-tulang);
    border: 1px solid var(--color-merah-tint);
    border-radius: 12px;
    padding: 20px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-page .contact-map-box iframe {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: 10px;
}

.contact-page .contact-details p {
    margin: 8px 0;
    color: var(--color-arang-soft);
}

.contact-page .contact-details strong {
    display: inline-block;
    width: 110px;
}

.contact-page .contact-cta {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 800px) {
    .contact-page .contact-grid {
        flex-direction: column;
    }

    .contact-page .contact-details strong {
        width: 120px;
    }
}

/* =========================================================
   NATIVE POST ARCHIVE & SINGLE TEMPLATE
   ========================================================= */

.post-archive-page,
.post-single-page {
    background: var(--color-putih-tulang);
}

.post-archive-hero {
    background: linear-gradient(135deg, var(--color-putih-tulang) 0%, var(--color-merah-tint) 100%);
}

.post-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.post-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-merah-tint);
    border-radius: 18px;
    background: var(--color-putih);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.post-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.post-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    color: var(--color-arang-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

.post-meta-separator {
    color: var(--color-arang-soft);
}

.post-category-link {
    color: var(--color-merah);
}

.post-card-title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.3;
}

.post-card-title a {
    color: var(--color-arang);
}

.post-card-excerpt {
    margin: 0 0 18px;
    color: var(--color-arang-soft);
    line-height: 1.7;
}

.post-card-link {
    margin-top: auto;
    width: fit-content;
}

.post-empty-state {
    margin: 0;
    padding: 28px;
    border: 1px dashed var(--color-merah-tint);
    border-radius: 12px;
    background: var(--color-putih);
    color: var(--color-arang-soft);
}

.post-single-article {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-putih);
    border: 1px solid var(--color-merah-tint);
    border-radius: 22px;
    padding: 36px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.post-single-header {
    margin-bottom: 24px;
}

.post-single-meta {
    margin-bottom: 16px;
}

.post-single-title {
    margin-bottom: 8px;
}

.post-single-featured-image {
    margin-bottom: 28px;
}

.post-featured-image {
    width: 100%;
    max-height: 520px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

.post-content {
    color: var(--color-arang);
    line-height: 1.9;
    font-size: 1.04rem;
}

.post-content > *:first-child {
    margin-top: 0;
}

.post-content > *:last-child {
    margin-bottom: 0;
}

.post-content img,
.post-content figure,
.post-content iframe,
.post-content video {
    max-width: 100%;
    height: auto;
}

.post-content a {
    color: var(--color-merah);
    text-decoration: underline;
}

.post-single-actions {
    margin-top: 32px;
}

.navigation.pagination {
    margin-top: 36px;
}

.navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.navigation.pagination a,
.navigation.pagination .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--color-merah-tint);
    border-radius: 999px;
    background: var(--color-putih);
    color: var(--color-arang-soft);
    font-weight: 600;
}

.navigation.pagination .current {
    background: var(--color-merah);
    border-color: var(--color-merah);
    color: var(--color-putih);
}

/* =========================================================
   HOMEPAGE NEWS SECTION
   ========================================================= */

.section-berita {
    background: var(--color-putih-tulang);
}

.section-berita .post-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.section-berita .post-card {
    height: 100%;
}

@media (max-width: 900px) {
    .section-berita .post-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .post-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .post-archive-grid {
        grid-template-columns: 1fr;
    }

    .section-berita .post-archive-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding: 28px 0 18px;
    background: var(--color-arang);
    color: var(--color-putih);
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: start;
}

.site-footer .footer-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.site-footer .footer-bottom {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-arang-soft);
    font-size: 13px;
}

.site-footer .footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer .footer-column--brand {
    max-width: 520px;
}

.site-footer .footer-contact-item {
    margin: 0;
    line-height: 1.5;
}

.site-footer .footer-contact-item strong {
    font-weight: 600;
    color: var(--color-putih);
}

.site-footer .footer-social {
    margin-top: 8px;
}

.site-footer .footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.site-footer .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-putih);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-footer .footer-social-link:hover,
.site-footer .footer-social-link:focus {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.5);
    transform: translateY(-1px);
    text-decoration: none;
}

.site-footer .footer-social-link svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.site-footer a {
    color: var(--color-putih-tulang);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--color-merah-tint);
    text-decoration: underline;
}

.site-footer .footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.site-footer .footer-grid li {
    margin: 0;
}

.site-footer .footer-grid li a {
    color: var(--color-arang-soft);
    font-size: 0.95rem;
}

.site-footer .footer-grid li a:hover,
.site-footer .footer-grid li a:focus {
    color: var(--color-putih);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .header-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 15px 0;
    }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .main-navigation {
        display: none;
        width: 100%;
        margin-left: 0;
        border-top: 1px solid var(--color-merah-tint);
        padding-top: 16px;
        position: relative;
        z-index: 20;
    }

    .site-footer {
        padding: 24px 0 20px;
    }

    .main-navigation.is-open {
        display: block;
    }

    .main-navigation ul {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .main-navigation li {
        width: 100%;
    }

    .main-navigation > ul > li + li {
        border-top: 1px solid var(--color-merah-tint);
    }

    .main-navigation a {
        padding: 16px 0;
    }

    .main-navigation .menu-item-has-children > a::after {
        margin-left: 0;
        float: right;
    }

    .main-navigation .sub-menu {
        display: none;
        position: static;
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 18px;
        margin-top: 6px;
    }

    .main-navigation .sub-menu a {
        padding: 12px 0;
        font-size: 0.95rem;
    }

    .main-navigation .menu-item-has-children.submenu-open > .sub-menu {
        display: block;
    }

    .menu-item-has-children .submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        padding: 0;
        margin-left: auto;
        color: var(--color-arang-soft);
        cursor: pointer;
    }

    .menu-item-has-children .submenu-toggle__bar {
        position: relative;
        width: 16px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }

    .menu-item-has-children .submenu-toggle__bar::after {
        content: '';
        position: absolute;
        top: -6px;
        left: 7px;
        width: 2px;
        height: 14px;
        background: currentColor;
        border-radius: 1px;
    }

    .main-navigation .menu-item-has-children.submenu-open .submenu-toggle__bar {
        transform: rotate(90deg);
    }

    .hero {
        min-height: 520px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .container {
        width: min(100% - 30px, 1120px);
    }

    .hero h1 {
        font-size: 42px;
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 30px;
    }

}

/* =====================================================
   THEME CSS VARIABLES & MICRO-INTERACTIONS
   - Adds CSS custom properties based on existing theme colors
   - Button hover, card hover, image zoom, and navbar underline
==================================================== */
:root {
    --sdn-primary: var(--color-merah); /* existing primary */
    --sdn-primary-700: var(--color-merah-pekat); /* existing darker primary */
    --sdn-text: var(--color-arang);
    --sdn-muted: var(--color-arang-soft);
    --sdn-border: var(--color-merah-tint);
    --sdn-surface: var(--color-putih-tulang);
    --sdn-transition: 200ms ease;
    --sdn-radius: 10px;
    --sdn-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 10px rgba(15,23,42,0.03);
    --sdn-shadow-hover: 0 6px 16px rgba(15,23,42,0.06), 0 16px 32px rgba(15,23,42,0.10);
}

/* Buttons: subtle lift + shadow on hover, reuse .btn existing */
.btn {
    transition: transform var(--sdn-transition), box-shadow var(--sdn-transition), background-color var(--sdn-transition);
    border-radius: var(--sdn-radius);
}

.btn-primary {
    background: var(--sdn-primary);
    color: var(--color-putih);
    box-shadow: var(--sdn-shadow);
}

.btn-primary:hover,
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sdn-shadow-hover);
    background: var(--sdn-primary-700);
}

/* Card hover: lift and stronger shadow; image zoom inside overflow-hidden wrapper */
.post-card,
.section-guru .sdn-guru-card,
.section-fasilitas .sdn-fasilitas-card,
.sdn-ekstrakurikuler-card {
    transition: transform var(--sdn-transition), box-shadow var(--sdn-transition);
    will-change: transform;
    box-shadow: 0 1px 6px rgba(8,15,25,0.04);
    border-radius: var(--sdn-radius);
    overflow: hidden;
}

.post-card:hover,
.section-guru .sdn-guru-card:hover,
.section-fasilitas .sdn-fasilitas-card:hover,
.sdn-ekstrakurikuler-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sdn-shadow-hover);
}

/* Image zoom */
.post-card, .sdn-guru-photo, .sdn-fasilitas-photo, .sdn-ekstrakurikuler-photo {
    overflow: hidden;
}

.post-card-image,
.section-guru .sdn-guru-photo img,
.section-fasilitas .sdn-fasilitas-photo img,
.sdn-ekstrakurikuler-photo img {
    transition: transform var(--sdn-transition);
    will-change: transform;
}

.post-card:hover .post-card-image,
.section-guru .sdn-guru-card:hover .sdn-guru-photo img,
.section-fasilitas .sdn-fasilitas-card:hover .sdn-fasilitas-photo img,
.sdn-ekstrakurikuler-card:hover .sdn-ekstrakurikuler-photo img {
    transform: scale(1.035);
}

/* Navbar underline hover animation (desktop only) */
@media (min-width: 801px) {
    .main-navigation li {
        position: relative; /* ensure positioning for pseudo */
    }

    .main-navigation a::before {
        content: '';
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: -6px;
        height: 2px;
        background: var(--sdn-primary);
        border-radius: 2px;
        transition: left 160ms ease, right 160ms ease, opacity 160ms ease;
        opacity: 0.0;
        pointer-events: none;
    }

    .main-navigation a:hover::before,
    .main-navigation a:focus::before {
        left: 0;
        right: 0;
        opacity: 1.0;
    }

    /* Keep existing current-menu-item indicator intact (uses ::after). Hide hover underline when item is current to avoid double lines */
    .main-navigation .current-menu-item > a::before,
    .main-navigation .current_page_item > a::before {
        opacity: 0;
    }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .post-card,
    .section-guru .sdn-guru-card,
    .section-fasilitas .sdn-fasilitas-card,
    .sdn-ekstrakurikuler-card,
    .main-navigation a::before,
    .post-card-image,
    .sdn-guru-photo img,
    .sdn-fasilitas-photo img,
    .sdn-ekstrakurikuler-photo img {
        transition: none !important;
        transform: none !important;
    }
}

/* =====================================================
   HEADER FIX
===================================================== */

.header-inner {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


/* Logo */

.site-logo {
    display: flex !important;
    align-items: center;
    gap: 14px;

    width: auto !important;
    max-width: none !important;

    flex-shrink: 0;

    text-decoration: none;
}


.site-logo img {
    width: 56px;
    height: 56px;

    object-fit: contain;

    flex-shrink: 0;
}


.site-logo-text {
    display: flex !important;
    flex-direction: column;

    width: auto !important;
    min-width: 220px;
    max-width: none !important;

    flex-shrink: 0;
}


.site-logo-text strong {
    display: block;

    font-size: 1.15rem;
    line-height: 1.3;

    white-space: nowrap;

    color: var(--color-arang);
}


.site-logo-text span {
    display: block;

    margin-top: 3px;

    font-size: 0.85rem;
    line-height: 1.4;

    white-space: nowrap;

    color: var(--color-arang-soft);
}


/* Navigation */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main-navigation {
    display: flex;
    align-items: center;
    margin-left: auto;
    position: relative;
}

.main-navigation ul {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation li {
    margin: 0;
    padding: 0;
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 14px 0;
    color: var(--color-arang);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: var(--color-merah-pekat);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_ancestor > a {
    color: var(--color-merah-pekat);
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
.main-navigation .current-menu-ancestor > a::after,
.main-navigation .current_page_ancestor > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-merah);
    border-radius: 2px;
}

.main-navigation .menu-item-has-children > a::after {
    content: 'â–¾';
    display: inline-block;
    margin-left: 10px;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}

.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 10px 0;
    background: var(--color-putih);
    border: 1px solid var(--color-merah-tint);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    z-index: 20;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    padding: 10px 18px;
    color: var(--color-arang);
    white-space: nowrap;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
    background: var(--color-putih-tulang);
    color: var(--color-merah-pekat);
}

.nav-toggle {
   display: none;
   border: none;
   background: transparent;
   padding: 0;
   margin: 0;
   width: 44px;
   height: 44px;
}

.nav-toggle:focus-visible,
.menu-item-has-children .submenu-toggle:focus-visible {
    outline: 2px solid var(--color-merah);
    outline-offset: 3px;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-arang);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bar + .nav-toggle__bar {
    margin-top: 5px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


.hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.55);

    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.35), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(29, 78, 216, 0.3), transparent 50%);
    background-size: 200% 200%;
    animation: sdnGradientMove 18s ease-in-out infinite;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

@keyframes sdnGradientMove {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero::after {
        animation: none !important;
    }
}


.hero .container {
    position: relative;
    z-index: 2;
}


.hero-content {
    max-width: 720px;
}


.hero-label {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--color-putih);

    font-size: 0.9rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.hero-title {
    margin: 0 0 20px;

    color: var(--color-putih);

    line-height: 1.05;
    font-weight: 800;
}


.hero-title__main {
    display: block;
    font-size: clamp(2.8rem, 5vw, 5rem);
}


.hero-title__sub {
    display: block;
    font-size: clamp(1.5rem, 2.5vw, 2.6rem);
    line-height: 1.15;
    font-weight: 700;
}


.hero-description {
    max-width: 650px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.1rem;
    line-height: 1.8;
}

/* =====================================================
   GURU & TENAGA KEPENDIDIKAN
===================================================== */

.section-guru {
    padding: 90px 0;
    background: var(--color-putih-tulang);
}


/* Container */

.section-guru > .container {
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* Header */

.section-guru .section-header {
    max-width: 760px;
    margin-bottom: 20px;
}

/* Center header intro for Guru archive */
.section-guru .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Additional selectors for archive template variants */
body.post-type-archive-guru .section-header,
.guru-archive-page .section-header,
.section-guru-hero .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* =====================================================
   CENTER SECTION HEADERS (Scoped)
   Target specific pages/archives so homepage/hero unaffected
===================================================== */
body.home .section-header,
.home-page .section-header,
body.page-profil-sekolah .section-header,
.profil-page .section-header,
body.page-kontak .section-header,
.kontak-page .section-header,
body.post-type-archive-guru .section-header,
.guru-archive-page .section-header,
body.post-type-archive-fasilitas .section-header,
.fasilitas-archive-page .section-header,
body.post-type-archive-ekstrakurikuler .section-header,
.ekstrakurikuler-archive-page .section-header,
body.post-type-archive-agenda .section-header,
.agenda-archive-page .section-header,
body.category .section-header,
.post-archive-page .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Ensure label/title/description inside these headers are centered
   and the description has a comfortable max-width */
body.home .section-header .section-description,
.home-page .section-header .section-description,
body.page-profil-sekolah .section-header .section-description,
.profil-page .section-header .section-description,
body.page-kontak .section-header .section-description,
.kontak-page .section-header .section-description,
body.post-type-archive-guru .section-header .section-description,
.guru-archive-page .section-header .section-description,
body.post-type-archive-fasilitas .section-header .section-description,
.fasilitas-archive-page .section-header .section-description,
body.post-type-archive-ekstrakurikuler .section-header .section-description,
.ekstrakurikuler-archive-page .section-header .section-description,
body.post-type-archive-agenda .section-header .section-description,
.agenda-archive-page .section-header .section-description,
body.category .section-header .section-description,
.post-archive-page .section-header .section-description {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Page-specific fallbacks (uses actual page IDs present in this site) */
body.page-id-35 .section-header,
body.page-id-49 .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.page-id-35 .section-header .section-description,
body.page-id-49 .section-header .section-description {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}



/* Grid */

.section-guru .guru-list {
    display: grid;
    /* Use auto-fit so columns wrap to the number of cards available
       and keep columns a comfortable, consistent width. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    justify-content: center;
    gap: 18px;
    width: 100%;
}


/* Card */

.section-guru .sdn-guru-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background: var(--color-putih);
    border: 1px solid var(--color-merah-tint);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.section-guru .sdn-guru-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-merah);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.section-guru .sdn-guru-photo {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-putih-tulang);
    padding: 12px;
}

.section-guru .sdn-guru-photo img {
    max-height: 140px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.35s ease;
}

.section-guru .sdn-guru-card:hover .sdn-guru-photo img {
    transform: scale(1.03);
}

.section-guru .sdn-guru-card h3 {
    transition: color 0.25s ease;
}

.section-guru .sdn-guru-card:hover h3 {
    color: var(--color-merah);
}


/* Konten */

.section-guru .sdn-guru-content {
    padding: 14px 14px 16px;
    text-align: center;
}

.section-guru .sdn-guru-content h3 {
    margin: 0 0 6px;
    color: var(--color-arang);
    font-size: 1rem; /* ~16px */
    font-weight: 700;
    line-height: 1.3;
}

.section-guru .sdn-guru-content p {
    margin: 4px 0;
    color: var(--color-arang-soft);
    font-size: 0.875rem; /* ~14px */
    line-height: 1.3;
}

.section-guru .sdn-guru-content strong {
    color: var(--color-arang-soft);
}

.section-guru .guru-card-link {
    color: var(--color-arang);
    text-decoration: none;
}

.section-guru .guru-card-link:hover {
    color: var(--color-merah);
}

/* Archive page grid fixes */
.section-guru .sdn-guru-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}

.section-guru .sdn-guru-card {
    min-height: 100%;
}

/* Profile page layout refinements */
body.page-profil-sekolah .section-profile-hero {
   position: relative;
   padding-top: 28px;
   padding-bottom: 36px;
}

body.page-profil-sekolah .section-header {
   max-width: 760px;
   margin-bottom: 24px;
}

body.page-profil-sekolah .section-title {
   font-size: 46px;
   line-height: 1.15;
}

body.page-profil-sekolah .section-header .section-description {
   max-width: 760px;
   margin-left: auto;
   margin-right: auto;
   color: var(--color-arang-soft);
}

.section-profile-about .profile-image {
   max-width: 820px;
   margin: 12px auto 18px;
}

.section-profile-about .profile-image img {
   width: 100%;
   display: block;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.section-profile-about .profile-sejarah {
   max-width: 760px;
   margin: 18px auto 0;
   color: var(--color-arang-soft);
   line-height: 1.8;
   text-align: left;
}

body.page-profil-sekolah .school-identity {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

/* Wider container for profile page to use more horizontal space */
body.page-profil-sekolah .container {
   width: min(1250px, calc(100% - 48px));
}

/* Reduce vertical padding for profile page sections to make content denser */
body.page-profil-sekolah .section {
   padding: 60px 0;
}

/* Ensure section headers for profile page use the wider constraints */
body.page-profil-sekolah .section-header {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

/* Wide profile grid (two-column) */
.profile-wide-grid {
   display: grid;
   grid-template-columns: 45% 55%;
   gap: 36px;
   align-items: start;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

.profile-col-photo .profile-photo-wrap {
   width: 100%;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   border-radius: 16px;
   background: var(--color-putih-tulang);
   box-shadow: 0 10px 24px rgba(15,23,42,0.06);
}

.profile-col-photo .profile-photo-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.profile-col-content .profile-col-title {
   margin: 0 0 8px;
   font-size: clamp(1.6rem, 2.5vw, 2rem);
   line-height: 1.12;
   font-weight: 800;
   color: var(--color-arang);
}

.profile-intro {
   margin: 0 0 14px;
   color: var(--color-arang-soft);
   line-height: 1.7;
}

.profile-sejarah-extended {
   color: var(--color-arang-soft);
   line-height: 1.8;
}

@media (max-width: 1000px) {
   .profile-wide-grid {
       grid-template-columns: 1fr;
   }

   .profile-col-photo .profile-photo-wrap {
       aspect-ratio: 16 / 9;
   }

   .profile-col-content {
       padding-top: 12px;
   }
}

/* Visi & Misi - combined two-column layout */
.section-vision-mission .section-header {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

.vm-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   align-items: start;
}

.vm-card {
   background: var(--color-putih);
   border-radius: 12px;
   padding: 20px;
   border: 1px solid rgba(148,163,184,0.08);
   box-shadow: 0 8px 20px rgba(15,23,42,0.04);
}

.vm-card h3 {
   margin: 0 0 8px;
   font-size: 1.1rem;
   color: var(--color-arang);
   font-weight: 800;
}

.vm-card .vm-content {
   color: var(--color-arang-soft);
   line-height: 1.7;
}

.vm-card ul {
   margin: 0 0 0 1.2rem;
}

@media (max-width: 1000px) {
   .vm-grid {
       grid-template-columns: 1fr;
   }

   .vm-card {
       padding: 16px;
   }
}

body.page-profil-sekolah .school-identity .identity-grid {
   display: grid;
   gap: 16px;
   padding: 14px;
   background: var(--color-putih-tulang);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: 18px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-profil-sekolah .school-identity .identity-item {
   background: var(--color-putih);
   padding: 14px 16px;
   border-radius: 12px;
   border: 1px solid rgba(148, 163, 184, 0.12);
}

body.page-profil-sekolah .identity-key {
   font-weight: 700;
   color: var(--color-arang-soft);
   text-transform: none;
}

body.page-profil-sekolah .identity-value {
   margin-top: 6px;
   color: var(--color-arang-soft);

   color: var(--color-arang);
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.6;
   word-break: break-word;
}

body.page-profil-sekolah .identity-value a {
   color: var(--color-merah-pekat);
}

body.page-profil-sekolah .school-identity {
   margin-bottom: 20px;
}

body.page-profil-sekolah .school-vision,
body.page-profil-sekolah .school-mission {
   max-width: 760px;
   margin-left: auto;
   margin-right: auto;
   color: var(--color-arang-soft);
   line-height: 1.8;
}

body.page-profil-sekolah .school-vision p,
body.page-profil-sekolah .school-mission p {
   margin: 0 0 0.6em 0;
}

body.page-profil-sekolah .school-mission ul {
   display: inline-block;
   max-width: 640px;
   margin: 0 auto;
   padding-left: 1.2em;
   text-align: left;
   line-height: 1.7;
}

body.page-profil-sekolah .section {
   padding: 56px 0;
}

body.page-profil-sekolah .section + .section {
   padding-top: 24px;
}

@media (max-width: 768px) {
   body.page-profil-sekolah .section {
       padding: 44px 0;
   }

   body.page-profil-sekolah .section-title {
       font-size: 34px;
   }

   body.page-profil-sekolah .school-identity .identity-row {
       grid-template-columns: 1fr;
       gap: 8px;
   }

   body.page-profil-sekolah .identity-value {
       text-align: left;
   }

   body.page-profil-sekolah .section + .section {
       padding-top: 18px;
   }
}

.section-school-identity {
   padding-top: 50px;
}

.section-school-vision,
.section-school-mission {
   padding-top: 60px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
    .section-guru .guru-list,
    .section-guru .sdn-guru-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .section-guru .guru-list,
    .section-guru .sdn-guru-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .section-guru .guru-list,
    .section-guru .sdn-guru-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .section-guru {
        padding: 60px 0;
    }

    .section-guru > .container {
        width: calc(100% - 30px);
    }

    .section-guru .guru-list,
    .section-guru .sdn-guru-grid {
        grid-template-columns: 1fr;
    }

    .section-guru .sdn-guru-photo {
        height: 300px;
    }
    .section-guru .sdn-guru-no-photo {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-merah-tint);
    color: var(--color-arang-soft);

    font-size: 0.95rem;
    font-weight: 600;
}

}

/* =====================================================
   AGENDA SEKOLAH
===================================================== */

.section-agenda .sdn-agenda-list {
    display: grid;
    gap: 24px;
    margin-top: 18px;
}

.section-agenda .sdn-agenda-card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    background: var(--color-putih);
    border: 1px solid var(--color-merah-tint);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.section-agenda .sdn-agenda-date {
    display: grid;
    align-items: center;
    justify-items: center;
    background: var(--color-putih-tulang);
    border-radius: 16px;
    padding: 16px 12px;
}

.section-agenda .sdn-agenda-day {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-arang);
}

.section-agenda .sdn-agenda-month {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-merah);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.section-agenda .sdn-agenda-content h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.35rem;
    line-height: 1.3;
}

.section-agenda .sdn-agenda-content p {
    margin: 10px 0;
    color: var(--color-arang-soft);
}

.section-agenda .sdn-agenda-description {
    margin-top: 18px;
    color: var(--color-arang-soft);
    line-height: 1.75;
}

@media (max-width: 900px) {
    .section-agenda .sdn-agenda-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .section-agenda .sdn-agenda-card {
        padding: 20px;
    }
}


/* Foto */

.guru-detail-photo {
    width: 100%;
    aspect-ratio: 3 / 4;

    overflow: hidden;

    background: var(--color-merah-tint);
    border-radius: 18px;
}

.guru-detail-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.guru-detail-no-photo {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-arang-soft);
    font-weight: 600;
}

/* Single guru: two-column profile layout (scoped) */
.guru-detail-page .guru-detail {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 32px;
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.guru-detail-page .guru-detail-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-merah-tint);
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

.guru-detail-page .guru-detail-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.guru-detail-page .guru-detail-content {
    display: block;
}


/* Konten */

.guru-detail-content h1 {
    margin: 10px 0 8px;

    color: var(--color-arang);

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.guru-detail-position {
    margin: 0 0 30px;

    color: var(--color-merah);

    font-size: 1.1rem;
    font-weight: 600;
}


/* Informasi */

.guru-detail-info {
    margin-bottom: 35px;

    border-top: 1px solid var(--color-merah-tint);
}

.guru-info-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);

    gap: 20px;

    padding: 15px 0;

    border-bottom: 1px solid var(--color-merah-tint);
}

.guru-info-row strong {
    color: var(--color-arang-soft);
}

.guru-info-row span {
    color: var(--color-arang-soft);
}


/* Profil */

.guru-detail-description {
    margin-bottom: 35px;
}

.guru-detail-description h2 {
    margin-bottom: 15px;

    color: var(--color-arang);
}

.guru-detail-description p {
    color: var(--color-arang-soft);
    line-height: 1.8;
}


/* Mobile */

@media (max-width: 800px) {

    .guru-detail {
        display: grid;
        grid-template-columns: 1fr;

        gap: 35px;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .guru-detail-photo {
        max-width: 380px;
        margin: 0 auto;
    }

}


@media (max-width: 500px) {

    .guru-info-row {
        grid-template-columns: 1fr;

        gap: 5px;
    }

}

/* =====================================================
   FASILITAS SEKOLAH
===================================================== */

.section-fasilitas {
    background: var(--color-putih);
}

/* Archive-specific grid: use auto-fit so cards stay centered even with few items */
.fasilitas-archive-page .section-fasilitas .sdn-fasilitas-grid,
.section-fasilitas .sdn-fasilitas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 18px;
    justify-content: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.section-fasilitas .sdn-fasilitas-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-putih);
}

/* Archive-only image sizing (does not affect single layout) */
.fasilitas-archive-page .section-fasilitas .sdn-fasilitas-photo img,
.section-fasilitas .sdn-fasilitas-photo img {
    width: 100%;
    height: 220px; /* slightly more compact than 260px */
    object-fit: cover;
}

.section-fasilitas .sdn-fasilitas-no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    background: var(--color-putih-tulang);
    color: var(--color-arang-soft);
    font-weight: 700;
    text-align: center;
    padding: 20px;
}

.section-fasilitas .sdn-fasilitas-content {
    flex: 1;
    padding: 18px 20px;
}

.section-fasilitas .sdn-fasilitas-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.15rem;
    line-height: 1.25;
    text-align: center;
}

/* Limit description height visually to avoid uneven card heights */
.fasilitas-archive-page .sdn-fasilitas-description,
.section-fasilitas .sdn-fasilitas-description {
    margin: 0;
    color: var(--color-arang-soft);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .fasilitas-archive-page .section-fasilitas .sdn-fasilitas-grid,
    .section-fasilitas .sdn-fasilitas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .fasilitas-archive-page .section-fasilitas .sdn-fasilitas-grid,
    .section-fasilitas .sdn-fasilitas-grid {
        grid-template-columns: 1fr;
    }
}

/* More subtle hover effect aligned with other micro-interactions */
.fasilitas-archive-page .sdn-fasilitas-card:hover,
.section-fasilitas .sdn-fasilitas-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-merah);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.section-fasilitas .sdn-fasilitas-photo {
    overflow: hidden;
}

.section-fasilitas .sdn-fasilitas-photo img {
    transition: transform 0.35s ease;
}

.section-fasilitas .sdn-fasilitas-card:hover .sdn-fasilitas-photo img {
    transform: scale(1.03);
}

.section-fasilitas .sdn-fasilitas-card h3 {
    transition: color 0.2s ease;
}

.section-fasilitas .sdn-fasilitas-card:hover h3 {
    color: var(--color-merah);
}

.section-fasilitas .sdn-fasilitas-grid {
    align-items: stretch;
}

.section-fasilitas .sdn-fasilitas-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-fasilitas .sdn-fasilitas-content {
    flex: 1;
}

/* =========================================
   LAYOUT SINGLE FASILITAS & EKSKUL (BARU)
========================================= */
.sdn-single-layout {
    display: flex;
    gap: 40px; 
    align-items: flex-start;
}

.sdn-single-image {
    flex: 0 0 45%; 
}

.sdn-single-image img {
    width: 100%;
    height: auto;
    border-radius: 12px; 
    object-fit: cover;
}

.sdn-single-info {
    flex: 1; 
}

@media (max-width: 768px) {
    .sdn-single-layout {
        flex-direction: column;
    }
    .sdn-single-image {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* =====================================================
   ARCHIVE PAGE VISUAL TWEAKS
   - Reduce vertical whitespace between hero and content
   - Center single ekstrakurikuler card
   - Provide clean placeholder for guru photos
   ===================================================== */

/* Reduce section padding on archive pages to tighten layout */
.fasilitas-archive-page .section,
.guru-archive-page .section,
.ekstrakurikuler-archive-page .section,
.agenda-archive-page .section {
    padding: 60px 0;
}

/* Facility archive header spacing */
.fasilitas-archive-page .section-header {
    margin-bottom: 32px;
}

/* Make archive hero sections less tall */
.section-fasilitas-hero,
.section-guru-hero,
.section-ekstrakurikuler-hero,
.section-agenda-hero {
    padding: 60px 0;
    min-height: auto;
}

.section-fasilitas-hero .section-header,
.section-guru-hero .section-header,
.section-ekstrakurikuler-hero .section-header,
.section-agenda-hero .section-header {
    margin-bottom: 20px;
}

/* Ekstrakurikuler: if only one card, span and center it */
.sdn-ekstrakurikuler-grid > .sdn-ekstrakurikuler-card:only-child {
    grid-column: 1 / -1;
    max-width: 820px;
    margin: 0 auto;
}

/* Ekstrakurikuler archive & homepage scoped layout adjustments */

/* Header spacing on archive */
.ekstrakurikuler-archive-page .section-header {
    margin-bottom: 32px;
}

/* Archive grid: content-sized, centered, keeps cards compact and centered even with few items */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid,
.section-ekstrakurikuler .sdn-ekstrakurikuler-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    gap: 18px;
    justify-content: center;
    align-items: stretch;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Card visual baseline (archive only) */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-card,
.section-ekstrakurikuler .sdn-ekstrakurikuler-card {
    display: flex;
    flex-direction: column;
    background: var(--color-putih);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.04);
    box-shadow: 0 6px 16px rgba(15,23,42,0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    padding: 14px;
    box-sizing: border-box;
    width: 100%;
    max-width: 220px;
}

/* Image sizing for archive cards - small thumbnail */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-photo img,
.section-ekstrakurikuler .sdn-ekstrakurikuler-photo img,
body.home .section-ekstrakurikuler .sdn-ekstrakurikuler-photo img {
    width: 100%;
    height: 150px; /* target 140-160px */
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-no-photo,
.section-ekstrakurikuler .sdn-ekstrakurikuler-no-photo {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-putih-tulang);
    color: var(--color-arang-soft);
    font-weight: 700;
    text-align: center;
    padding: 12px;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-content,
.section-ekstrakurikuler .sdn-ekstrakurikuler-content,
body.home .section-ekstrakurikuler .sdn-ekstrakurikuler-content {
    padding: 12px 8px 8px;
    text-align: center;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-content h3,
.section-ekstrakurikuler .sdn-ekstrakurikuler-content h3,
body.home .section-ekstrakurikuler .sdn-ekstrakurikuler-card h3 {
    margin: 8px 0 6px;
    font-size: 1.05rem;
    line-height: 1.2;
}

/* Metadata (Pembina/Jadwal/Tempat) styling - compact */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-content p,
.section-ekstrakurikuler .sdn-ekstrakurikuler-content p,
body.home .section-ekstrakurikuler .sdn-ekstrakurikuler-content p {
    margin: 4px 0;
    color: var(--color-arang-soft);
    font-size: 0.95rem;
}

/* Hide full description on archive & homepage cards to keep them compact */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-description,
body.home .section-ekstrakurikuler .sdn-ekstrakurikuler-description,
.section-ekstrakurikuler > .container article .sdn-ekstrakurikuler-description {
    display: none !important;
}

/* Hover */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-card:hover,
.section-ekstrakurikuler .sdn-ekstrakurikuler-card:hover,
body.home .section-ekstrakurikuler .sdn-ekstrakurikuler-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
    border-color: var(--color-merah);
}

/* Ensure single page layout not affected by archive card sizing */
.ekstrakurikuler-single-page .section-ekstrakurikuler > .container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.ekstrakurikuler-single-page .sdn-ekstrakurikuler-single-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive column targets: roughly match requested counts via min-widths */
@media (min-width: 1200px) {
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
}
@media (min-width: 1024px) and (max-width:1199px) {
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}
@media (min-width: 768px) and (max-width:1023px) {
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 767px) {
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid { grid-template-columns: 1fr; }
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-card { max-width: none; }
}

/* Homepage-specific: keep compact cards centered (existing rules are preserved) */
body.home .section-ekstrakurikuler > .container {
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
}

/* Ensure header spacing consistent */
.section-ekstrakurikuler > .container > .section-header {
    margin-bottom: 32px;
}

/* Agenda: make homepage agenda list form a centered, content-sized grid */
.section-agenda > .container {
    /* Keep default block layout; homepage centering handled below (scoped to body.home) */
}

/* Berita (homepage): center post cards and allow content-sized rows */
.section-berita > .container {
    /* Keep default block layout; homepage centering handled below (scoped to body.home) */
}

/* =========================================================
   HOMEPAGE: Center Agenda & Berita groups without shrinking cards
   - Scoped to homepage (body.home) to avoid changing archive/single layouts
   ========================================================= */

/* Agenda: keep card width and stack; center group and single card */
body.home .section-agenda > .container > .section-header {
    margin-left: auto;
    margin-right: auto;
}

body.home .section-agenda > .container > .sdn-agenda-list,
body.home .section-agenda .sdn-agenda-list {
    /* preserve original stacked/list layout but center the group when narrower than container */
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 18px;
    align-items: center; /* center single card horizontally */
}

body.home .section-agenda .sdn-agenda-card {
    width: 100%;
    max-width: 900px; /* keep card spacious for date/title/desc */
    box-sizing: border-box;
}

/* Berita: center row of post cards while preserving their intrinsic width */
body.home .section-berita > .container > .section-header {
    margin-left: auto;
    margin-right: auto;
}

body.home .section-berita > .container > .post-archive-grid,
body.home .section-berita .post-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
}

body.home .section-berita .post-card {
    width: 100%;
    max-width: 420px; /* preserve readable card width */
    box-sizing: border-box;
}


.section-ekstrakurikuler > .container > article h3,
.section-ekstrakurikuler .sdn-ekstrakurikuler-card h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    line-height: 1.2;
}

.section-ekstrakurikuler > .container > article .sdn-ekstrakurikuler-single-photo,
.section-ekstrakurikuler > .container > article img,
.section-ekstrakurikuler .sdn-ekstrakurikuler-photo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .section-ekstrakurikuler > .container {
        grid-template-columns: 1fr;
    }
    .section-ekstrakurikuler > .container > article {
        max-width: 100%;
        width: 100%;
    }
}

/* Compact Ekstrakurikuler cards (scope to archive only) */
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-link {
    text-decoration: none;
    color: inherit;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-putih);
    border-radius: 12px;
    padding: 12px;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(15,23,42,0.04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-photo {
    width: 100%;
    height: 150px;
    max-height: 150px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--color-putih-tulang);
    display: block;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-arang-soft);
    font-weight: 600;
    height: 100%;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-content h3 {
    margin: 0 0 6px 0;
    font-size: 1rem; /* ~16px */
    line-height: 1.2;
    color: var(--color-arang);
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-content p {
    margin: 3px 0;
    font-size: 0.85rem; /* 13.6px */
    color: var(--color-arang-soft);
    line-height: 1.35;
}

.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-description {
    margin-top: 6px;
    color: var(--color-arang-soft);
    font-size: 0.875rem;
}

/* Hide card descriptions on archive and homepage (cards only) */
.section-ekstrakurikuler .sdn-ekstrakurikuler-description,
.ekstrakurikuler-archive-page .sdn-ekstrakurikuler-description,
.section-ekstrakurikuler > .container article .sdn-ekstrakurikuler-description,
.section-ekstrakurikuler .sdn-ekstrakurikuler-card .sdn-ekstrakurikuler-description {
    display: none;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Ensure single page description remains visible */
.ekstrakurikuler-single-page .sdn-ekstrakurikuler-description {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    margin-top: 18px;
    color: var(--color-arang-soft);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Single Ekstrakurikuler: two-column detail layout (scoped) */
.ekstrakurikuler-single-page .section-ekstrakurikuler > .container {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 30px;
    align-items: start;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.ekstrakurikuler-single-page .sdn-ekstrakurikuler-single-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    background: var(--color-putih-tulang);
}

.ekstrakurikuler-single-page .sdn-ekstrakurikuler-single-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ekstrakurikuler-single-page .sdn-ekstrakurikuler-single-content {
    display: block;
}

.ekstrakurikuler-single-page .sdn-ekstrakurikuler-meta p {
    margin: 6px 0;
    font-size: 0.95rem;
    color: var(--color-arang-soft);
}

/* Stacked meta layout for Ekstrakurikuler cards and single pages */
.sdn-ekstrakurikuler-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.sdn-ekstrakurikuler-meta-item {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.sdn-ekstrakurikuler-meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-arang-soft);
    margin-bottom: 2px;
    display: block;
}

.sdn-ekstrakurikuler-meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-arang);
    line-height: 1.35;
    display: block;
}

/* Keep title centered, but meta inside content aligned left */
.sdn-ekstrakurikuler-content { text-align: center; }
.sdn-ekstrakurikuler-content .sdn-ekstrakurikuler-meta { text-align: left; }

/* Single page adjustments */
.ekstrakurikuler-single-page .sdn-ekstrakurikuler-meta { gap: 14px; margin-bottom: 10px; }
.ekstrakurikuler-single-page .sdn-ekstrakurikuler-meta .sdn-ekstrakurikuler-meta-value { font-size: 1rem; }

.ekstrakurikuler-single-page .sdn-ekstrakurikuler-description {
    margin-top: 18px;
}

@media (max-width: 768px) {
    .ekstrakurikuler-single-page .section-ekstrakurikuler > .container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    .ekstrakurikuler-single-page .sdn-ekstrakurikuler-single-photo {
        height: auto;
        aspect-ratio: auto;
        max-height: 420px;
    }
}

@media (max-width: 1024px) {
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-photo {
        height: 140px;
        max-height: 140px;
    }
}

@media (max-width: 600px) {
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-grid {
        grid-template-columns: 1fr;
    }
    .ekstrakurikuler-archive-page .sdn-ekstrakurikuler-card {
        padding: 12px;
    }
}

/* Ensure facility grid responsiveness remains consistent */
.section-fasilitas .sdn-fasilitas-grid {
    gap: 28px;
}

/* Guru placeholder: clean neutral block with simple avatar icon (archive-only) */
.section-guru .sdn-guru-no-photo {
    background: var(--color-putih-tulang) !important;
    color: var(--color-arang-soft) !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 260px;
}

.section-guru .sdn-guru-no-photo::after {
    content: '';
    display: block;
    width: 72px;
    height: 72px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-3.31 0-6 1.69-6 4v2h12v-2c0-2.31-2.69-4-6-4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Fade-in Up reveal for sections (prefers-reduced-motion respected) */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-up.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   Cross-document View Transitions (progressive enhancement)
   ========================================================= */

@view-transition {
    navigation: auto;
}

/* Default gentle cross-fade for old/new roots */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: ease;
}

/* Ensure named view-transition groups animate smoothly */
::view-transition-group(*) {
    animation-duration: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    /* Disable view-transition animations for reduced-motion users */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Make sure guru card titles wrap comfortably (archive-only) */
.section-guru .sdn-guru-content h3 {
    word-break: break-word;
    line-height: 1.25;
}

/* =====================================================
   MOBILE NAVIGATION: SIDEBAR / DRAWER
   Overrides earlier mobile nav rules — drawer slide-in from right
===================================================== */

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1040;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.nav-drawer-close {
    display: none;
}

@media (max-width: 800px) {

    .main-navigation {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: min(85%, 340px);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 24px 24px 32px;
        background: var(--color-putih);
        border-top: none;
        box-shadow: 12px 0 32px rgba(15, 23, 42, 0.12);
        transform: translateX(-100%);
        transition: transform 0.32s ease;
        overflow-y: auto;
        z-index: 1050;
    }

    .main-navigation.is-open {
        display: block;
        transform: translateX(0);
    }

    .nav-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 auto 20px 0;
        border: none;
        background: var(--color-putih-tulang);
        border-radius: 999px;
        font-size: 22px;
        line-height: 1;
        color: var(--color-arang);
        cursor: pointer;
    }

    .nav-drawer-close:hover,
    .nav-drawer-close:focus-visible {
        background: var(--color-merah-tint);
    }

    body.nav-open {
        overflow: hidden;
    }

}

@media (prefers-reduced-motion: reduce) {
    .main-navigation,
    .nav-overlay {
        transition: none !important;
    }
}

@media (max-width: 800px) {
    .nav-toggle {
        display: inline-flex !important;
    }
}

.sdn-reveal {
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.sdn-reveal.is-loaded {
    opacity: 1;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .sdn-reveal {
        transition: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

@media (min-width: 801px) {
    .sdn-spotlight {
        position: relative;
    }

    .sdn-spotlight::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(220px circle at var(--sdn-spot-x, 50%) var(--sdn-spot-y, 50%), rgba(255, 255, 255, 0.25), transparent 70%);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
        z-index: 2;
    }

    .sdn-spotlight:hover::before {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdn-spotlight::before {
        transition: none !important;
    }
}

.section-statistik {
  position: relative;
  padding: 80px 0;
  background-image: none !important;
  background-color: var(--color-arang);
  overflow: hidden;
}

.section-statistik-overlay {
  display: none;
}

.section-statistik .container {
  position: relative;
  z-index: 2;
}

.sdn-statistik-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 32px;
}

.sdn-statistik-item {
   text-align: center;
}

.sdn-statistik-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   margin-bottom: 18px;
   border-radius: 18px;
   background: var(--sdn-primary, var(--color-merah));
   color: var(--color-putih);
}

.sdn-statistik-icon svg {
   width: 30px;
   height: 30px;
}

.sdn-statistik-number {
   font-size: clamp(2.2rem, 4vw, 3rem);
   font-weight: 800;
   color: var(--color-putih);
   line-height: 1.1;
}

.sdn-statistik-text {
   font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.sdn-statistik-label {
   margin-top: 8px;
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.75);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

@media (max-width: 900px) {
   .sdn-statistik-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 40px 24px;
   }
}

@media (max-width: 500px) {
   .section-statistik {
       padding: 56px 0;
   }
}


/* =====================================================
   PROFIL SEKOLAH - two-column layout (photo left, text right)
   ===================================================== */

.section-profil .section-header {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sdn-profile-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.sdn-profile-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--color-putih-tulang);
    box-shadow: var(--sdn-shadow, 0 1px 4px rgba(15,23,42,0.06));
}

.sdn-profile-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sdn-profile-no-photo {
    width: 100%;
    height: 100%;
    background: var(--color-putih-tulang);
}

.sdn-profile-content {
    max-width: 720px;
}

.sdn-profile-name {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    line-height: 1.15;
    color: var(--color-arang);
    font-weight: 800;
}

.sdn-profile-text {
    color: var(--color-arang-soft);
    line-height: 1.8;
    font-size: 1rem;
    max-width: 100%;
}

@media (max-width: 800px) {
    .sdn-profile-grid {
        grid-template-columns: 1fr;
    }

    .sdn-profile-photo {
        aspect-ratio: 16 / 9;
    }

    .sdn-profile-content {
        padding-top: 12px;
    }
}

/* Slide-in reveal for profile section on homepage */
.sdn-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.sdn-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.sdn-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.sdn-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .sdn-slide-left,
    .sdn-slide-right {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ======================================================================
   FORMAL RED-WHITE COMPONENT LAYER
   ====================================================================== */

/* ======================================================================
   FORMAL RED-WHITE BASE OVERRIDES
   ====================================================================== */
body { font-family: var(--font-body); color: var(--color-arang); background-color: var(--color-putih-tulang); }
h1, h2, h3, h4, h5, h6, .site-title, .section-title { font-family: var(--font-heading); color: var(--color-arang); }
p { color: var(--color-arang-soft); }
.section-label { color: var(--color-merah); }
.section-description { color: var(--color-arang-soft); }
/* Final flat red-white header. */
.site-header {
  display: flex;
  align-items: stretch;
  min-height: 88px;
  background-color: var(--color-merah);
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.site-header .header-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: none;
  min-height: 88px;
  margin: 0;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 40px 0 24px;
  margin: 0;
  background-color: var(--color-putih);
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-right: 4px solid var(--color-emas);
}

.header-left .site-logo,
.header-left .site-title,
.header-left .site-tagline,
.header-left .site-logo * {
  color: var(--color-arang) !important;
}

.header-left .site-logo {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.header-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  padding: 0 32px;
  margin: 0;
  background-color: var(--color-merah);
  border: none;
}

.header-right .main-navigation {
  margin: 0;
}

.header-right .main-navigation a {
  color: var(--color-putih);
  font-weight: 600;
  font-family: var(--font-heading);
}

.header-right .main-navigation a:hover,
.header-right .main-navigation .current-menu-item > a {
  color: var(--color-emas);
}

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
  }

  .site-header .header-inner {
    flex-direction: column;
  }

  .header-left {
    border-right: none;
    border-bottom: 4px solid var(--color-emas);
    padding: 16px 24px;
    width: 100%;
  }

  .header-right {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 16px 24px;
  }
}

/* =========================================
   PERBAIKAN CAROUSEL GURU SDN CILOPANG (v2)
========================================= */

/* 1. Ruang untuk panah — sudah oke, tetap dipakai */
.guru-carousel {
    padding: 10px 60px 50px 60px !important;
}

/* 2. Panah jadi tombol lingkaran berdiri sendiri, bukan cuma ikon scaled */
.guru-carousel .swiper-button-prev,
.guru-carousel .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(26, 23, 23, 0.15);
    color: #b91c1c;
    transform: none; /* buang scale, ukuran diatur lewat width/height */
    margin-top: -20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.guru-carousel .swiper-button-prev::after,
.guru-carousel .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}

.guru-carousel .swiper-button-prev:hover,
.guru-carousel .swiper-button-next:hover {
    background-color: #b91c1c;
    color: #ffffff;
}

.guru-carousel .swiper-button-prev { left: 8px; }
.guru-carousel .swiper-button-next { right: 8px; }

/* 3. Tinggi kartu tetap sejajar */
.sdn-guru-card {
    display: flex;
    flex-direction: column;
    height: 10%;
    overflow: hidden;
    border-top: 3px solid #b91c1c;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(26, 23, 23, 0.08);
}

.sdn-guru-card.kepala-sekolah {
    border-top-color: #B8912F;
}

/* 4. Area foto DIPERKECIL drastis — ini kunci biar gak gemuk */
.sdn-guru-photo {
    width: 100%;
    height: 150px; /* turun dari 250px */
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 5. Kalau ADA foto, tetap cover penuh area 150px */
.sdn-guru-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* 6. Placeholder jadi avatar bulat kecil, bukan ikon besar + teks panjang */
.sdn-guru-no-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #FBE0E3;
    color: #b91c1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
}

/* Sembunyikan teks "Tidak ada foto" & ikon lama, ganti dengan inisial via PHP */
.sdn-guru-no-photo .placeholder-icon,
.sdn-guru-no-photo .placeholder-text {
    display: none;
}

/* =========================================
   PERBAIKAN SIDEBAR & WARNA MENU MOBILE
========================================= */

/* 1. Mencegah header memotong sidebar yang keluar batas */
.site-header {
    overflow: visible !important; 
}

/* Aturan khusus untuk layar HP */
@media (max-width: 768px) {
    
    /* 2. Mengubah wadah menu menjadi sidebar penuh dari kiri */
    .main-navigation {
        position: fixed !important; 
        top: 0;
        left: 0; 
        width: 280px; 
        height: 100vh !important; /* Full 1 layar penuh */
        background-color: #ffffff; 
        z-index: 99999 !important; /* Paling depan */
        overflow-y: auto; 
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15); 
    }

    /* 3. Memperbaiki warna teks yang sebelumnya putih (gaib) */
    .main-navigation a {
        color: #172033 !important; /* Warna gelap */
        font-weight: 600;
        display: block;
        padding: 10px 0; /* Biar ada jarak antar menu */
    }

    /* 4. Efek sentuh pada menu mobile */
    .main-navigation a:hover {
        color: #b91c1c !important; /* Merah SDN Cilopang */
    }
}

/* =========================================
   SOLUSI FINAL: BUG HEADER PROFIL MENYUSUT
========================================= */

/* Memaksa header-inner tetap 100% dan mengalahkan aturan .container di halaman profil */
body.page-profil-sekolah .site-header .header-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* =========================================
   PERBAIKAN TINGGI KARTU VISI & MISI
========================================= */

.vm-grid {
    align-items: stretch !important; /* Memaksa kotak dalam grid memiliki tinggi yang sejajar */
}

.vm-card {
    height: 100%; /* Memastikan kartu benar-benar mengisi seluruh ruang kosong */
}