/* ==========================================================================
   style.css — Gaya Global Website SMK Muhammadiyah 2 Yogyakarta (SMK MUHAYO)
   Identitas warna: hijau Muhammadiyah tua & madya, aksen emas
   Tipografi: Fraunces (display/heading) + Plus Jakarta Sans (body/UI)

   Dipisah dari index.php agar bisa di-cache oleh browser dan dipakai
   bersama di semua halaman (index.php, jurusan.php, berita.php, dst).

   UPDATE: Hero & page-hero kini memakai gradasi #05C7F2 -> #040DBF
   (variabel --hero-* di :root). Aturan .hero lama sudah DIGANTI langsung.
   ========================================================================== */
:root {
    --green-950: #176da7;
    --green-800: #1b5b93;
    --green-600: #0c0c70;
    --green-100: #E7F2EC;
    --gold-500: #C9A227;
    --gold-100: #F7EFD6;
    --cream: #FBFAF5;
    --ink: #17241D;
    --ink-soft: #4B5A52;
    --line: #E1E6E2;
    --white: #FFFFFF;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, Segoe UI, sans-serif;

    /* Warna gradasi hero: cyan -> biru tua */
    --hero-start: #05C7F2;
    --hero-end: #040DBF;
    --hero-gradient: linear-gradient(135deg, #05C7F2 0%, #040DBF 100%);
    --hero-lime: #DDF21A;
    --hero-amber: #F5C518;
}
* { box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--ink); background: var(--cream); margin: 0; line-height: 1.55; }
h1, h2, h3, .font-display { font-family: var(--font-display); color: var(--green-950); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container-nar { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }

/* Topbar */
.topbar { background: var(--green-950); color: #CFE4DA; font-size: 0.85rem; }
.topbar .container-nar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.topbar-badge { background: var(--gold-500); color: var(--green-950); font-weight: 700; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.78rem; margin-right: 0.75rem; }
.topbar-contacts { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topbar-contacts a:hover { color: var(--gold-500); }

/* Header / Navbar */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header .container-nar { display: flex; align-items: center; justify-content: space-between; padding-top: 0.85rem; padding-bottom: 0.85rem; gap: 1.5rem; position: relative; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand img { height: 52px; width: 52px; object-fit: contain; border-radius: 8px; }
.brand-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--green-950); line-height: 1.2; display: block; }
.brand-sub { font-size: 0.78rem; color: var(--gold-500); font-weight: 700; letter-spacing: 0.06em; }
.navbar-nav { display: flex; gap: 1.9rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.navbar-nav > li { position: relative; }
.navbar-nav a.nav-link { font-weight: 600; font-size: 0.94rem; color: var(--ink); padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.3rem; }
.navbar-nav a.nav-link:hover, .navbar-nav li.active a.nav-link { color: var(--green-600); }
.navbar-nav a.nav-link i.bi-chevron-down { font-size: 0.7rem; transition: transform 0.15s ease; }
.navbar-nav .dropdown { position: absolute; top: 100%; left: -0.75rem; background: var(--white); border: 1px solid var(--line); border-radius: 0.6rem; min-width: 230px; box-shadow: 0 12px 28px rgba(10,59,40,0.12); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.15s ease; }
.navbar-nav li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.navbar-nav .dropdown a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.navbar-nav .dropdown a:hover { background: var(--green-100); color: var(--green-950); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; padding: 0.65rem 1.3rem; border-radius: 0.6rem; border: none; cursor: pointer; }
.btn-gold { background: var(--gold-500); color: var(--green-950); }
.btn-gold:hover { background: #B8931F; }
.btn-outline { background: transparent; border: 1.5px solid var(--green-950); color: var(--green-950); }
.btn-white { background: var(--white); color: var(--green-950); }
.mobile-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--green-950); cursor: pointer; line-height: 1; }

/* Menu mobile: tersembunyi secara default, dibuka lewat JS (class .mobile-open) */
@media (max-width: 991px) {
    .navbar-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 28px rgba(10,59,40,0.1);
        padding: 0.5rem 1.5rem 1rem;
    }
    .navbar-nav.mobile-open { display: flex; }
    .navbar-nav > li { width: 100%; border-bottom: 1px solid var(--line); }
    .navbar-nav > li:last-child { border-bottom: none; }
    .navbar-nav a.nav-link { width: 100%; justify-content: space-between; padding: 0.85rem 0; }
    .navbar-nav .dropdown {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        display: none;
        box-shadow: none; border: none; border-radius: 0;
        background: var(--green-100);
        margin: 0 0 0.5rem;
        padding: 0.35rem;
    }
    .navbar-nav li:hover .dropdown { display: none; } /* matikan efek hover di mobile */
    .navbar-nav li.dropdown-open .dropdown { display: block; }
    .navbar-nav li.dropdown-open > a.nav-link i.bi-chevron-down { transform: rotate(180deg); }

    .header-cta { display: none; }
    .header-cta.mobile-open { display: flex; padding: 0.75rem 1.5rem 1.25rem; justify-content: center; }
    .header-cta.mobile-open .btn-gold { width: 100%; justify-content: center; }

    .mobile-toggle { display: block; }
}

/* ==========================================================================
   Hero — gradasi cyan #05C7F2 -> biru #040DBF
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 6rem;
    background: var(--hero-gradient);
}
/* Lingkaran dekoratif lama dimatikan supaya gradasi terlihat bersih */
.hero::before, .hero::after { display: none; }
.hero .container-nar { position: relative; display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.hero .container-nar > div:first-child { flex: 1 1 480px; }
.hero .container-nar > .hero-card { flex: 1 1 360px; max-width: 420px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); color: var(--hero-lime); padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.4rem; }
.hero h1 { color: #FFFFFF; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; margin: 0 0 1.1rem; }
/* Baris kedua judul: gradasi amber -> lime */
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--hero-amber), var(--hero-lime));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hero-lime); /* fallback */
}
.hero p.lead { color: rgba(255,255,255,0.92); font-size: 1.12rem; max-width: 38rem; margin: 0 0 1.8rem; }
.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* Tombol di dalam hero: utama lime + sekunder kaca (glass) */
.hero .btn-gold { background: var(--hero-lime); color: #1A2A1F; box-shadow: 0 10px 24px -10px rgba(221, 242, 26, 0.6); }
.hero .btn-gold:hover { background: #CBE015; }
.hero .btn-outline { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); color: #FFFFFF; backdrop-filter: blur(4px); }
.hero .btn-outline:hover { background: rgba(255,255,255,0.16); }

/* Statistik kecil di bawah tombol hero (opsional) */
.hero-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,0.18); }
.hero-stats strong { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--hero-amber); }
.hero-stats span { font-size: 0.8rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.8); text-transform: uppercase; }

.hero-card { background: var(--white); border-radius: 1.6rem; padding: 1.6rem; box-shadow: 0 30px 60px -20px rgba(8, 20, 40, 0.5); }
.hero-card-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.hero-card-head .icon-badge { background: var(--green-100); color: var(--green-800); width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.hero-card-head strong { display: block; color: var(--green-950); font-size: 1rem; }
.hero-card-head span { font-size: 0.82rem; color: var(--ink-soft); }
.hero-fact { display: flex; gap: 0.65rem; margin-bottom: 0.85rem; font-size: 0.9rem; color: var(--ink-soft); }
.hero-fact i { color: var(--green-600); margin-top: 0.15rem; }
.hero-fact strong { color: var(--ink); }
.hero-card-cta { margin-top: 1.2rem; background: var(--green-100); border-radius: 0.7rem; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.hero-card-cta span { font-size: 0.85rem; color: var(--green-950); font-weight: 600; }

/* Section shared */
.section { padding: 5rem 0; }
.section-head { max-width: 42rem; margin-bottom: 3rem; }
.section-head h2 { font-size: 2.1rem; margin: 0 0 0.9rem; }
.section-head p { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }
.section-alt { background: var(--white); }

/* Profil & Nilai */
.profile-grid { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.quote-card { flex: 1 1 320px; max-width: 400px; background: var(--green-950); color: var(--white); border-radius: 1rem; padding: 2.2rem; position: relative; }
.quote-card .quote-mark { font-family: var(--font-display); font-size: 3.5rem; color: var(--gold-500); line-height: 1; margin-bottom: 0.5rem; }
.quote-card p.quote-text { font-size: 1.05rem; color: #E7F0EA; font-style: italic; margin: 0 0 1.5rem; }
.quote-card .quote-by { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1rem; }
.quote-card .quote-by strong { display: block; font-size: 1rem; }
.quote-card .quote-by span { color: var(--gold-500); font-size: 0.85rem; }
.value-intro { flex: 2 1 480px; }
.value-intro h3 { font-size: 1.7rem; margin: 0 0 0.7rem; }
.value-intro p { color: var(--ink-soft); margin: 0 0 1.8rem; }
.value-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.value-card { flex: 1 1 calc(50% - 0.55rem); background: var(--white); border: 1px solid var(--line); border-radius: 0.85rem; padding: 1.4rem; }
.value-card .icon { width: 2.6rem; height: 2.6rem; border-radius: 0.55rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; font-size: 1.15rem; }
.value-card h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--green-950); margin: 0 0 0.4rem; }
.value-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* Jurusan */
.jurusan-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.jurusan-card { flex: 1 1 calc(33.333% - 0.94rem); min-width: 260px; background: var(--white); border-radius: 1rem; overflow: hidden; border: 1px solid var(--line); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.jurusan-card:hover { transform: translateY(-4px); box-shadow: 0 20px 30px rgba(10,59,40,0.1); }
.jurusan-media { height: 0.5rem; background: linear-gradient(90deg, var(--green-600), var(--gold-500)); }
.jurusan-body { padding: 1.5rem; }
.jurusan-tag { font-size: 0.75rem; font-weight: 700; color: var(--green-600); background: var(--green-100); display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.8rem; }
.jurusan-body h4 { font-family: var(--font-display); font-size: 1.15rem; color: var(--green-950); margin: 0 0 0.5rem; }
.jurusan-body p { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 1rem; }
.jurusan-body a.more { font-size: 0.85rem; font-weight: 700; color: var(--green-800); }

/* Statistik */
.stats { background: var(--green-950); }
.stats-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; text-align: center; }
.stats-grid > div { flex: 1 1 calc(25% - 1.13rem); min-width: 140px; }
.stat-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-500); font-weight: 700; }
.stat-label { color: #CFE4DA; font-size: 0.88rem; margin-top: 0.3rem; }

/* Berita */
.news-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.news-card { flex: 1 1 calc(33.333% - 0.94rem); min-width: 260px; background: var(--white); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.news-thumb { height: 9rem; background: linear-gradient(135deg, var(--green-100), var(--gold-100)); display: flex; align-items: center; justify-content: center; color: var(--green-600); font-size: 1.8rem; }
.news-body { padding: 1.3rem; }
.news-date { font-size: 0.78rem; color: var(--gold-500); font-weight: 700; margin-bottom: 0.5rem; display: block; }
.news-body h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--green-950); margin: 0 0 0.5rem; line-height: 1.4; }
.news-body p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* PPDB CTA band */
.cta-band { background: linear-gradient(120deg, var(--green-800), var(--green-950)); border-radius: 1.2rem; padding: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band h3 { color: var(--white); font-size: 1.6rem; margin: 0 0 0.5rem; }
.cta-band p { color: #DCEAE1; margin: 0; font-size: 0.95rem; }

/* Footer */
.site-footer { background: #220e51; color: #B9CBC1; padding: 4rem 0 1.5rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-grid > div { flex: 1 1 180px; }
.footer-grid > .footer-brand { flex: 1.6 1 260px; }
.footer-grid h5 { color: var(--white); font-family: var(--font-body); font-size: 0.95rem; margin: 0 0 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6rem; font-size: 0.88rem; }
.footer-grid a:hover { color: var(--gold-500); }
.footer-brand img { height: 46px; width: 46px; margin-bottom: 0.9rem; border-radius: 8px; }
.footer-brand p { font-size: 0.85rem; line-height: 1.6; margin: 0 0 1rem; }
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--gold-500); color: var(--green-950); }
.footer-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; }

/* WhatsApp floating button */
.wa-float { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #25D366; color: var(--white); width: 3.4rem; height: 3.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 10px 24px rgba(0,0,0,0.25); z-index: 50; }

/* Responsive */
@media (max-width: 991px) {
    .quote-card, .value-intro { flex: 1 1 100%; max-width: 100%; }
    .footer-grid > div, .footer-grid > .footer-brand { flex: 1 1 45%; }
    .jurusan-card, .news-card { flex: 1 1 calc(50% - 0.7rem); }
}
@media (max-width: 640px) {
    .hero h1 { font-size: 2rem; }
    .value-card, .jurusan-card, .news-card, .stats-grid > div { flex: 1 1 100%; }
    .footer-grid > div, .footer-grid > .footer-brand { flex: 1 1 100%; }
    .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Halaman Detail Jurusan (jurusan-detail.php)
   Menggunakan variabel --jur-color (di-set inline per halaman lewat
   style="--jur-color: ...") agar setiap jurusan punya aksen warna sendiri
   tanpa perlu file CSS terpisah.
   ========================================================================== */
.jur-hero { background: linear-gradient(120deg, var(--jur-color, var(--green-950)) 0%, var(--green-950) 100%); position: relative; overflow: hidden; padding: 3.5rem 0 4rem; }
.jur-hero::after { content: ''; position: absolute; right: -4rem; top: -6rem; width: 20rem; height: 20rem; border-radius: 50%; background: rgba(255,255,255,0.08); }
.jur-breadcrumb { position: relative; display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #DCEAE1; margin-bottom: 1.5rem; }
.jur-breadcrumb a { color: #DCEAE1; font-weight: 600; }
.jur-breadcrumb a:hover { color: var(--gold-500); }
.jur-hero-inner { position: relative; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.jur-hero-icon { width: 5rem; height: 5rem; border-radius: 1.1rem; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--white); flex-shrink: 0; }
.jur-hero-tag { display: inline-block; background: rgba(255,255,255,0.14); color: var(--white); font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 999px; margin-bottom: 0.6rem; letter-spacing: 0.04em; }
.jur-hero h1 { color: var(--white); font-size: 2.1rem; margin: 0 0 0.5rem; }
.jur-hero p.lead { color: #DCEAE1; font-size: 1rem; max-width: 40rem; margin: 0; }
.jur-hero-cta { margin-top: 1.6rem; display: flex; gap: 0.9rem; flex-wrap: wrap; position: relative; }

.jur-tabs-strip { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.jur-tabs-strip .container-nar { display: flex; gap: 1.6rem; overflow-x: auto; }
.jur-tabs-strip a { display: block; padding: 0.9rem 0.1rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; border-bottom: 2.5px solid transparent; }
.jur-tabs-strip a:hover { color: var(--jur-color, var(--green-600)); }

.jur-meta-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 3rem; }
.jur-meta-card { flex: 1 1 calc(25% - 0.83rem); min-width: 190px; background: var(--white); border: 1px solid var(--line); border-radius: 0.85rem; padding: 1.2rem; }
.jur-meta-card i { font-size: 1.3rem; color: var(--jur-color, var(--green-600)); margin-bottom: 0.6rem; display: block; }
.jur-meta-card strong { display: block; font-size: 0.92rem; color: var(--green-950); margin-bottom: 0.15rem; }
.jur-meta-card span { font-size: 0.8rem; color: var(--ink-soft); }

.jur-content-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.jur-col-main { flex: 2 1 480px; }
.jur-col-side { flex: 1 1 280px; }
.jur-block { margin-bottom: 2.6rem; }
.jur-block h2 { font-size: 1.5rem; margin: 0 0 1.1rem; display: flex; align-items: center; gap: 0.6rem; }
.jur-block h2 i { color: var(--jur-color, var(--green-600)); font-size: 1.2rem; }
.jur-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.jur-check-list li { display: flex; gap: 0.65rem; font-size: 0.93rem; color: var(--ink-soft); align-items: flex-start; }
.jur-check-list i { color: var(--jur-color, var(--green-600)); margin-top: 0.2rem; flex-shrink: 0; }
.jur-pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.jur-pill-list span { background: var(--green-100); color: var(--green-950); font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; }
.jur-prospek-grid { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.jur-prospek-card { flex: 1 1 calc(50% - 0.45rem); min-width: 220px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--jur-color, var(--green-600)); border-radius: 0.6rem; padding: 0.9rem 1.1rem; font-size: 0.88rem; color: var(--ink); font-weight: 600; }

.jur-side-card { background: var(--white); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.4rem; }
.jur-side-card h3 { font-size: 1.02rem; margin: 0 0 1rem; }
.jur-side-card ul { list-style: none; margin: 0; padding: 0; }
.jur-side-card li { font-size: 0.86rem; color: var(--ink-soft); padding: 0.55rem 0; border-bottom: 1px dashed var(--line); }
.jur-side-card li:last-child { border-bottom: none; }
.jur-side-cta { background: var(--jur-color, var(--green-950)); color: var(--white); border-radius: 1rem; padding: 1.6rem; text-align: center; }
.jur-side-cta h3 { color: var(--white); font-size: 1.1rem; margin: 0 0 0.5rem; }
.jur-side-cta p { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin: 0 0 1.1rem; }
.jur-side-cta .btn-gold { width: 100%; justify-content: center; }

.jur-other-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.jur-other-card { flex: 1 1 calc(20% - 0.8rem); min-width: 140px; background: var(--white); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1rem; text-align: center; }
.jur-other-card i { font-size: 1.4rem; margin-bottom: 0.5rem; display: block; }
.jur-other-card span { font-size: 0.8rem; font-weight: 700; color: var(--green-950); }
.jur-other-card:hover { border-color: var(--gold-500); }

.jur-404 { padding: 6rem 0; text-align: center; }
.jur-404 i { font-size: 3rem; color: var(--gold-500); margin-bottom: 1rem; display: block; }

@media (max-width: 768px) {
    .jur-meta-card, .jur-prospek-card { flex: 1 1 100%; }
    .jur-other-card { flex: 1 1 calc(33.333% - 0.67rem); }
}

/* ==========================================================================
   Sub-halaman: profil, visi-misi, sejarah, guru-staf, sarana-prasarana
   ========================================================================== */

/* Hero sekunder — gradasi sama dengan .hero */
.page-hero {
    background: var(--hero-gradient);
    padding: 3rem 0 3.5rem; position: relative; overflow: hidden;
}
.page-hero::after { display: none; }
.page-breadcrumb { position: relative; display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #DCEAE1; margin-bottom: 1rem; }
.page-breadcrumb a { color: #DCEAE1; font-weight: 600; }
.page-breadcrumb a:hover { color: var(--gold-500); }
.page-hero h1 { color: var(--white); font-size: 2.2rem; margin: 0 0 0.6rem; position: relative; }
.page-hero p.lead { color: #DCEAE1; max-width: 42rem; margin: 0; position: relative; font-size: 1rem; }

/* Kartu fakta singkat (profil.php) */
.quick-facts-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.quick-fact-card { flex: 1 1 calc(25% - 0.83rem); min-width: 190px; background: var(--white); border: 1px solid var(--line); border-radius: 0.85rem; padding: 1.2rem; }
.quick-fact-card i { font-size: 1.3rem; color: var(--green-600); margin-bottom: 0.6rem; display: block; }
.quick-fact-card strong { display: block; font-size: 0.92rem; color: var(--green-950); margin-bottom: 0.15rem; }
.quick-fact-card span { font-size: 0.8rem; color: var(--ink-soft); }

/* Daftar Misi & Tujuan (visi-misi.php) */
.misi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.misi-list li { display: flex; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 0.8rem; padding: 1.1rem 1.3rem; }
.misi-num { flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--green-100); color: var(--green-800); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); }
.misi-text { font-size: 0.93rem; color: var(--ink-soft); padding-top: 0.15rem; }

/* Timeline (sejarah.php) */
.timeline { position: relative; padding-left: 2.2rem; }
.timeline::before { content: ''; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 2.2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -2.2rem; top: 0.15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gold-500); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--gold-500); }
.timeline-year { font-family: var(--font-display); font-size: 1.3rem; color: var(--green-800); font-weight: 700; margin-bottom: 0.3rem; }
.timeline-item h4 { font-size: 1rem; margin: 0 0 0.4rem; color: var(--green-950); }
.timeline-item p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* Guru & Staf */
.staff-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.staff-card { flex: 1 1 calc(33.333% - 0.8rem); min-width: 220px; background: var(--white); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; text-align: center; }
.staff-avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--green-100); color: var(--green-800); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1rem; }
.staff-card strong { display: block; font-size: 0.95rem; color: var(--green-950); margin-bottom: 0.3rem; }
.staff-card span { font-size: 0.82rem; color: var(--gold-500); font-weight: 700; }

.kaprodi-list { display: flex; flex-direction: column; gap: 0.8rem; }
.kaprodi-item { display: flex; align-items: center; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--kap-color, var(--green-600)); border-radius: 0.7rem; padding: 1rem 1.3rem; flex-wrap: wrap; }
.kaprodi-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; background: var(--green-100); color: var(--kap-color, var(--green-600)); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.kaprodi-item strong { display: block; font-size: 0.9rem; color: var(--green-950); }
.kaprodi-item span { font-size: 0.8rem; color: var(--ink-soft); }
.kaprodi-item a.more { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--green-800); flex-shrink: 0; }

/* Sarana Prasarana */
.facility-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.facility-card { flex: 1 1 calc(25% - 0.9rem); min-width: 220px; background: var(--white); border: 1px solid var(--line); border-radius: 1rem; padding: 1.4rem; }
.facility-card i { font-size: 1.5rem; color: var(--green-600); margin-bottom: 0.8rem; display: block; }
.facility-card h4 { font-size: 0.98rem; margin: 0 0 0.4rem; color: var(--green-950); }
.facility-card p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.facility-jurusan-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.facility-jurusan-strip a { background: var(--green-100); color: var(--green-950); font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.85rem; border-radius: 999px; }
.facility-jurusan-strip a:hover { background: var(--gold-500); }

@media (max-width: 768px) {
    .quick-fact-card { flex: 1 1 100%; }
    .staff-card { flex: 1 1 calc(50% - 0.6rem); }
    .facility-card { flex: 1 1 calc(50% - 0.6rem); }
}
/* ============================================================
   NAVBAR — Design tokens
   Ganti nilai di :root ini sesuai warna resmi sekolah bila perlu.
   ============================================================ */
:root {
    --nav-navy-900: #0E2A47;
    --nav-navy-800: #163B60;
    --nav-navy-700: #1F4E7A;
    --nav-gold-500: #D6A419;
    --nav-gold-600: #B8890F;
    --nav-white: #FFFFFF;
    --nav-ink: #16232F;
    --nav-ink-soft: #5C6B78;
    --nav-border: #E4E9EE;
    --nav-surface: #F6F8FA;
    --nav-radius: 10px;
    --nav-shadow: 0 12px 28px -12px rgba(14, 42, 71, 0.18);
    --nav-transition: 180ms cubic-bezier(.4, 0, .2, 1);
    --container-max: 1180px;
}

@font-face {
    /* Jika sudah memuat Google Fonts "Plus Jakarta Sans" di <head>, baris ini bisa dihapus. */
    font-family: 'Plus Jakarta Sans';
    src: local('Plus Jakarta Sans');
}

.topbar, .site-header, .navbar-nav, .brand, .btn {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.container-nar {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: 20px;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    background: var(--nav-navy-900);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar .container-nar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    gap: 16px;
}

.topbar-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-badge {
    background: var(--nav-gold-500);
    color: var(--nav-navy-900);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.topbar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-contacts {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-contacts a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color var(--nav-transition);
}

.topbar-contacts a:hover {
    color: var(--nav-gold-500);
}

.topbar-contacts i {
    font-size: 0.85em;
}

/* Ikon login admin — pojok kanan atas */
.admin-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background var(--nav-transition), border-color var(--nav-transition), color var(--nav-transition);
}

.admin-icon-link:hover,
.admin-icon-link:focus-visible {
    background: var(--nav-gold-500);
    border-color: var(--nav-gold-500);
    color: var(--nav-navy-900);
}

.admin-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--nav-navy-900);
    color: var(--nav-white);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--nav-transition), transform var(--nav-transition), visibility var(--nav-transition);
    pointer-events: none;
}

.admin-icon-link:hover .admin-tooltip,
.admin-icon-link:focus-visible .admin-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============================================================
   HEADER + NAVBAR
   ============================================================ */
.site-header {
    background: var(--nav-white);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--nav-border);
    transition: box-shadow var(--nav-transition);
}

.site-header.is-scrolled {
    box-shadow: var(--nav-shadow);
}

.site-header .container-nar {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 76px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand img {
    height: 44px;
    width: 44px;
    object-fit: contain;
    border-radius: 8px;
}

.brand-name {
    display: block;
    font-weight: 800;
    font-size: 1rem;
    color: var(--nav-ink);
    line-height: 1.2;
}

.brand-sub {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--nav-ink-soft);
    letter-spacing: 0.02em;
}

/* Nav utama */
#mainNav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.navbar-nav {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.navbar-nav > li {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--nav-ink);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    position: relative;
    transition: color var(--nav-transition), background var(--nav-transition);
}

.nav-link i {
    font-size: 0.7rem;
    transition: transform var(--nav-transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--nav-gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--nav-transition);
}

.navbar-nav > li:hover > .nav-link,
.navbar-nav > li.active > .nav-link,
.nav-link:focus-visible {
    color: var(--nav-navy-800);
    background: var(--nav-surface);
}

.navbar-nav > li:hover > .nav-link::after,
.navbar-nav > li.active > .nav-link::after {
    transform: scaleX(1);
}

.navbar-nav > li:hover > .nav-link i {
    transform: rotate(180deg);
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-top: 3px solid var(--nav-gold-500);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--nav-transition), transform var(--nav-transition), visibility var(--nav-transition);
    z-index: 10;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--nav-ink);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--nav-transition), color var(--nav-transition);
}

.dropdown a:hover,
.dropdown a:focus-visible {
    background: var(--nav-surface);
    color: var(--nav-navy-800);
}

/* CTA + tombol */
.header-cta {
    flex-shrink: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--nav-transition), box-shadow var(--nav-transition), background var(--nav-transition);
}

.btn-gold {
    background: var(--nav-gold-500);
    color: var(--nav-navy-900);
    box-shadow: 0 6px 16px -6px rgba(214, 164, 25, 0.6);
}

.btn-gold:hover,
.btn-gold:focus-visible {
    background: var(--nav-gold-600);
    transform: translateY(-1px);
}

/* Tombol di hero tetap lime (menimpa .btn-gold navbar di atas) */
.hero .btn-gold { background: var(--hero-lime); color: #1A2A1F; box-shadow: 0 10px 24px -10px rgba(221, 242, 26, 0.6); }
.hero .btn-gold:hover,
.hero .btn-gold:focus-visible { background: #CBE015; }

/* Tombol menu mobile */
.mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--nav-border);
    background: var(--nav-white);
    color: var(--nav-navy-900);
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-toggle.is-active i::before {
    content: "\f62a"; /* bi-x-lg */
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .topbar-text { display: none; }

    .site-header .container-nar {
        height: 68px;
    }

    .header-cta { display: none; }

    .mobile-toggle {
        display: inline-flex;
    }

    #mainNav {
        position: fixed;
        top: 68px;
        right: 0;
        width: min(320px, 86vw);
        height: calc(100vh - 68px);
        background: var(--nav-white);
        border-left: 1px solid var(--nav-border);
        box-shadow: var(--nav-shadow);
        transform: translateX(100%);
        transition: transform var(--nav-transition);
        overflow-y: auto;
        justify-content: flex-start;
        z-index: 99;
    }

    #mainNav.is-open {
        transform: translateX(0);
    }

    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px;
        width: 100%;
    }

    .nav-link {
        justify-content: space-between;
        width: 100%;
        padding: 13px 14px;
    }

    .nav-link::after { display: none; }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--nav-border);
        border-radius: 0;
        margin: 2px 0 4px 14px;
        max-height: 0;
        padding: 0 12px;
        overflow: hidden;
        transition: max-height var(--nav-transition);
    }

    .has-dropdown.dropdown-open .dropdown {
        max-height: 400px;
        padding: 6px 12px;
    }

    .has-dropdown.dropdown-open > .nav-link i {
        transform: rotate(180deg);
    }

    body.nav-open {
        overflow: hidden;
    }
}

@media (max-width: 560px) {
    .topbar-contacts a span,
    .topbar-contacts a:not(:first-child) { display: none; }

    .brand-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.001ms !important;
    }
}
/* ============================================================
   CONTENT PAGES — dipakai bersama oleh berita.php & prestasi.php
   Menggunakan CSS variable yang sama dengan navbar.css (--nav-*),
   jadi pastikan navbar.css sudah dimuat lebih dulu di halaman ini.
   ============================================================ */

/* ================= HERO (gradasi teal -> slate, sama dengan beranda) ================= */
.page-hero {
    background: var(--hero-gradient);
    color: var(--nav-white);
    padding: 56px 0 60px;
}

.page-hero-gold {
    background: var(--hero-gradient);
}

.page-hero-eyebrow {
    color: var(--hero-lime);
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0 0 8px;
}

.page-hero h1 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 12px;
}

.page-hero-desc {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ================= FILTER BAR ================= */
.content-section {
    padding: 44px 0 72px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.filter-btn {
    border: 1px solid var(--nav-border);
    background: var(--nav-white);
    color: var(--nav-ink-soft);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--nav-transition), color var(--nav-transition), border-color var(--nav-transition);
}

.filter-btn:hover {
    border-color: var(--nav-gold-500);
    color: var(--nav-navy-800);
}

.filter-btn.is-active {
    background: var(--nav-navy-900);
    border-color: var(--nav-navy-900);
    color: var(--nav-white);
}

/* ================= CARD GRID ================= */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.content-card {
    display: flex;
    flex-direction: column;
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow var(--nav-transition), transform var(--nav-transition), border-color var(--nav-transition);
}

.content-card:hover {
    box-shadow: var(--nav-shadow);
    transform: translateY(-3px);
    border-color: transparent;
}

.content-card-media {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--nav-navy-800), var(--nav-navy-700));
    color: rgba(255, 255, 255, 0.35);
    font-size: 2.4rem;
}

.content-card-media-gold {
    background: linear-gradient(135deg, #3B2E0A, var(--nav-navy-800));
    color: rgba(214, 164, 25, 0.55);
}

.content-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--nav-navy-900);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.content-card-tag-gold {
    background: var(--nav-gold-500);
    color: var(--nav-navy-900);
}

.content-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.content-card-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--nav-ink-soft);
}

.content-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nav-ink);
    line-height: 1.4;
    margin: 0;
}

.content-card-excerpt {
    font-size: 0.9rem;
    color: var(--nav-ink-soft);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-card-desc {
    font-size: 0.85rem;
    color: var(--nav-ink-soft);
    line-height: 1.6;
    margin: -2px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--nav-border);
}

.content-card-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
}

.content-card-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nav-ink-soft);
    font-weight: 600;
}

.content-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nav-navy-800);
    font-weight: 700;
    text-decoration: none;
    transition: gap var(--nav-transition), color var(--nav-transition);
}

.content-card-link:hover {
    gap: 9px;
    color: var(--nav-gold-600);
}

.prestasi-card .content-card-footer {
    justify-content: flex-start;
}

/* ================= EMPTY / NO RESULT STATE ================= */
.empty-state,
.no-result-msg {
    text-align: center;
    padding: 48px 20px;
    color: var(--nav-ink-soft);
}

.empty-state i {
    font-size: 2.4rem;
    color: var(--nav-border);
    display: block;
    margin-bottom: 12px;
}

.no-result-msg {
    padding: 32px 20px;
    font-weight: 600;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .page-hero {
        padding: 44px 0 48px;
    }
}
/* ==== Bingkai foto Guru & Staf — ukuran 9x12 cm (rasio 3:4) ==== */
.staff-avatar {
    width: 9cm;
    height: 12cm;
    max-width: 100%;          /* menyusut otomatis jika kartu lebih sempit */
    aspect-ratio: 3 / 4;      /* rasio 9:12 tetap terjaga saat menyusut */
    font-size: 3.2rem;
    margin: 0 auto 1.2rem;
    border-radius: 0.6rem;
    overflow: hidden;
}
.staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* foto memenuhi bingkai tanpa gepeng */
    object-position: top center; /* wajah tidak terpotong */
}
.staff-card {
    padding: 1.9rem 1.6rem;
}
/* ==========================================================================
   Galeri Foto & Video — Lightbox dan Modal Video
   ========================================================================== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 20, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
    z-index: 200;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox-close:hover { background: var(--gold-500); color: var(--green-950); border-color: var(--gold-500); }
.lightbox-figure { max-width: 92vw; max-height: 88vh; margin: 0; text-align: center; }
.lightbox-figure img { max-width: 92vw; max-height: 78vh; border-radius: 0.6rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.lightbox-figure figcaption { color: #EDEDED; font-size: 0.9rem; margin-top: 0.9rem; }

.video-thumb { position: relative; }
.video-play-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    pointer-events: none;
}

.video-modal-body { width: min(880px, 92vw); }
.video-modal-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 0.7rem; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-caption { color: #EDEDED; font-size: 0.9rem; margin: 0.9rem 0 0; text-align: center; }

@media (max-width: 640px) {
    .lightbox-close { top: 0.8rem; right: 0.8rem; }
}
/* ==========================================================================
   Halaman PPDB (ppdb.php) — SMK Muhammadiyah 2 Yogyakarta
   Memakai variabel --nav-* yang sudah ada di file (bagian "NAVBAR — Design tokens").
   ========================================================================== */

/* -------------------- 1. LANGKAH PENDAFTARAN (STEP 1-2-3) -------------------- */
.ppdb-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-bottom: 3rem;
}

.ppdb-step-card {
    position: relative;
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    padding: 1.8rem 1.6rem 1.6rem;
    transition: box-shadow var(--nav-transition), transform var(--nav-transition);
}

.ppdb-step-card:hover {
    box-shadow: var(--nav-shadow);
    transform: translateY(-2px);
}

.ppdb-step-num {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--nav-navy-900);
    color: var(--nav-gold-500);
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 2;
}

/* Garis penghubung antar langkah — hanya di layar lebar, biar kelihatan alur */
@media (min-width: 769px) {
    .ppdb-step-card:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 3.15rem;
        left: calc(100% - 0.8rem);
        width: calc(1.6rem + 1.6rem);
        height: 2px;
        background: var(--nav-border);
        z-index: 1;
    }
}

.ppdb-step-card h4 {
    font-size: 1.02rem;
    color: var(--nav-navy-900);
    margin: 0 0 0.5rem;
}

.ppdb-step-card p {
    font-size: 0.88rem;
    color: var(--nav-ink-soft);
    margin: 0;
    line-height: 1.6;
}

/* -------------------- 2. INFO JADWAL -------------------- */
.ppdb-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-bottom: 3rem;
}

.ppdb-info-card {
    flex: 1 1 calc(25% - 0.83rem);
    min-width: 190px;
    background: var(--nav-surface);
    border: 1px solid var(--nav-border);
    border-radius: 12px;
    padding: 1.2rem;
}

.ppdb-info-card i {
    font-size: 1.3rem;
    color: var(--nav-gold-600);
    margin-bottom: 0.6rem;
    display: block;
}

.ppdb-info-card strong {
    display: block;
    font-size: 0.92rem;
    color: var(--nav-navy-900);
    margin-bottom: 0.15rem;
}

.ppdb-info-card span {
    font-size: 0.8rem;
    color: var(--nav-ink-soft);
}

/* -------------------- 3. SYARAT PENDAFTARAN -------------------- */
.ppdb-syarat-list {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.5rem;
}

.ppdb-syarat-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--nav-ink-soft);
}

.ppdb-syarat-list i {
    color: var(--nav-gold-600);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* -------------------- 4. REKENING & QR -------------------- */
.ppdb-payment-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.6rem;
    margin-bottom: 3rem;
    align-items: stretch;
}

.ppdb-bank-card {
    background: var(--nav-navy-900);
    color: var(--nav-white);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.ppdb-bank-card .label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.ppdb-bank-card .bank-name {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.ppdb-bank-card .rekening-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.7rem;
}

.ppdb-bank-card .rekening-num {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ppdb-bank-card .copy-btn {
    flex-shrink: 0;
    background: var(--nav-gold-500);
    color: var(--nav-navy-900);
    border: none;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--nav-transition);
}

.ppdb-bank-card .copy-btn:hover {
    background: var(--nav-gold-600);
}

.ppdb-bank-card .an {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.4rem;
}

.ppdb-bank-card .nominal-box {
    margin-top: auto;
    background: rgba(214, 164, 25, 0.14);
    border: 1px solid rgba(214, 164, 25, 0.4);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ppdb-bank-card .nominal-box span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}

.ppdb-bank-card .nominal-box strong {
    font-size: 1.5rem;
    color: var(--nav-gold-500);
    font-family: var(--font-display, Georgia, serif);
}

.ppdb-qr-card {
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ppdb-qr-card #ppdbQr {
    padding: 0.8rem;
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    margin-bottom: 1.1rem;
}

.ppdb-qr-card p {
    font-size: 0.85rem;
    color: var(--nav-ink-soft);
    margin: 0 0 0.6rem;
}

.ppdb-qr-card .qr-note {
    font-size: 0.76rem;
    color: var(--nav-gold-600);
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .ppdb-payment-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------- 5. FORM KONFIRMASI PEMBAYARAN -------------------- */
.ppdb-form-card {
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    padding: 2.2rem;
}

.ppdb-form-card h3 {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.4rem;
    color: var(--nav-navy-900);
    margin: 0 0 0.4rem;
}

.ppdb-form-card > p {
    font-size: 0.9rem;
    color: var(--nav-ink-soft);
    margin: 0 0 1.8rem;
}

/* Honeypot anti-bot — disembunyikan total dari tampilan & alur visual,
   tapi tetap "ada" secara teknis di DOM (aman untuk aksesibilitas,
   lebih tepercaya daripada display:none untuk menipu bot sederhana) */
.ppdb-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ppdb-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin-bottom: 1.4rem;
}

.ppdb-form-row label {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--nav-navy-900);
    margin-bottom: 0.5rem;
}

.ppdb-form-row input[type="text"],
.ppdb-form-row input[type="tel"],
.ppdb-form-row input[type="email"],
.ppdb-form-row input[type="number"],
.ppdb-form-row select {
    width: 100%;
    font: inherit;
    font-size: 0.92rem;
    color: var(--nav-ink);
    background: var(--nav-white);
    border: 1.5px solid var(--nav-border);
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
    transition: border-color var(--nav-transition), box-shadow var(--nav-transition);
}

.ppdb-form-row input:focus,
.ppdb-form-row select:focus {
    outline: none;
    border-color: var(--nav-gold-500);
    box-shadow: 0 0 0 3px rgba(214, 164, 25, 0.18);
}

.ppdb-form-row .hint {
    font-size: 0.78rem;
    color: var(--nav-ink-soft);
    margin-top: 0.4rem;
}

/* Dropzone bukti transfer */
.ppdb-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    border: 2px dashed var(--nav-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    background: var(--nav-surface);
    transition: border-color var(--nav-transition), background var(--nav-transition);
}

.ppdb-file-drop:hover {
    border-color: var(--nav-gold-500);
    background: var(--gold-100, #F7EFD6);
}

.ppdb-file-drop i {
    font-size: 1.8rem;
    color: var(--nav-navy-700);
}

.ppdb-file-drop span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--nav-ink-soft);
}

.ppdb-file-drop .file-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nav-navy-900);
}

.ppdb-file-drop.has-file {
    border-style: solid;
    border-color: #2E9E5B;
    background: rgba(46, 158, 91, 0.06);
}

.ppdb-file-drop.has-file i::before {
    content: "\f26b"; /* bi-check-circle-fill */
    color: #2E9E5B;
}

@media (max-width: 640px) {
    .ppdb-form-grid,
    .ppdb-syarat-list {
        grid-template-columns: 1fr;
    }
    .ppdb-step-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------- 6. HALAMAN SUKSES -------------------- */
.ppdb-success-box {
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
    background: var(--nav-white);
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    padding: 3rem 2.2rem;
}

.ppdb-success-box .check {
    font-size: 3rem;
    color: #2E9E5B;
    margin-bottom: 1rem;
    display: block;
}

.ppdb-success-box h3 {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.5rem;
    color: var(--nav-navy-900);
    margin: 0 0 0.8rem;
}

.ppdb-success-box > p {
    font-size: 0.92rem;
    color: var(--nav-ink-soft);
    line-height: 1.6;
    margin: 0 0 1.6rem;
}

.ppdb-kode-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    background: var(--nav-surface);
    border: 1.5px dashed var(--nav-gold-500);
    border-radius: 12px;
    padding: 1.1rem;
    margin-bottom: 1.6rem;
}

.ppdb-kode-box i {
    font-size: 1.4rem;
    color: var(--nav-gold-600);
}

.ppdb-kode-box .kode {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--nav-navy-900);
    letter-spacing: 0.04em;
}

.ppdb-success-box .btn {
    margin: 0.4rem 0.35rem 0;
}

/* ==========================================================================
   7. ALERT & AKSI FORM — HAPUS blok ini jika sudah ada di stylesheet admin
   ========================================================================== */
.admin-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
    line-height: 1.6;
}

.admin-alert-error {
    background: #FDEDED;
    border: 1px solid #F3C6C6;
    color: #A32424;
}

.admin-alert-error i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.admin-form-actions {
    display: flex;
    justify-content: flex-end;
}

.admin-form-actions .btn {
    min-width: 220px;
    justify-content: center;
}

@media (max-width: 640px) {
    .admin-form-actions .btn {
        width: 100%;
    }
}

/* Khusus section Ekstrakurikuler di beranda */
.ekskul-home-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ekskul-home-card { flex: 1 1 calc(33.333% - 0.94rem); min-width: 260px; background: var(--white); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ekskul-home-card:hover { transform: translateY(-4px); box-shadow: 0 20px 30px rgba(10,59,40,0.1); }
.ekskul-home-media { height: 8.5rem; background: linear-gradient(135deg, var(--green-100), var(--gold-100)); display: flex; align-items: center; justify-content: center; color: var(--green-600); font-size: 2rem; overflow: hidden; }
.ekskul-home-media img { width: 100%; height: 100%; object-fit: cover; }
.ekskul-home-body { padding: 1.3rem; }
.ekskul-home-tag { font-size: 0.72rem; font-weight: 700; color: var(--green-600); background: var(--green-100); display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; margin-bottom: 0.6rem; }
.ekskul-home-body h4 { font-family: var(--font-display); font-size: 1.02rem; color: var(--green-950); margin: 0 0 0.4rem; }
.ekskul-home-body p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 991px) { .ekskul-home-card { flex: 1 1 calc(50% - 0.7rem); } }
@media (max-width: 640px) { .ekskul-home-card { flex: 1 1 100%; } }

/* Khusus section Testimoni — foto besar di atas kartu + marquee otomatis */
.tmn-viewport { position: relative; overflow: hidden; padding: 0.6rem 0 1.4rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.tmn-track { display: flex; gap: 1rem; width: max-content;
    animation: tmn-scroll var(--tmn-durasi, 48s) linear infinite; will-change: transform; }
.tmn-viewport:hover .tmn-track,
.tmn-viewport:focus-within .tmn-track,
.tmn-viewport.is-paused .tmn-track { animation-play-state: paused; }
@keyframes tmn-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.5rem)); } }

/* Kartu horizontal: lebar 15 cm x tinggi 4 cm — foto kiri, teks kanan */
.tmn-card { flex: 0 0 auto; width:15cm; height: 4cm; display: flex; flex-direction: row; background: var(--white); border: 1px solid var(--line); border-radius: 0.8rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tmn-card:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(10,59,40,0.12); }

.tmn-photo { position: relative; flex: 0 0 2.5cm; width: 2.5cm; height: 100%; background: linear-gradient(135deg, var(--green-100), var(--gold-100)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tmn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmn-photo .tmn-inisial { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--green-600); }
.tmn-quote { position: absolute; left: 0.4rem; bottom: 0.4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gold-500); color: #fff; font-family: Georgia, serif; font-size: 1.3rem; line-height: 1.5; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,0.2); z-index: 2; }

.tmn-body { flex: 1; min-width: 0; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; justify-content: space-between; }
.tmn-stars { color: var(--gold-500); letter-spacing: 0.08rem; font-size: 0.68rem; line-height: 1; margin-bottom: 0.3rem; }
.tmn-isi { font-size: 0.68rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; margin: 0 0 0.35rem; flex: 1; min-height: 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tmn-nama { display: block; font-family: var(--font-display); font-size: 0.74rem; line-height: 1.25; color: var(--green-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmn-peran { display: block; font-size: 0.64rem; color: var(--gold-500); font-weight: 600; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Pengguna dengan "reduce motion": tanpa animasi, geser manual */
@media (prefers-reduced-motion: reduce) {
    .tmn-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .tmn-track { animation: none; }
    .tmn-dup { display: none; }
}

/* ==========================================================================
   OVERRIDE AKHIR — pastikan gradasi hero #05C7F2 -> #040DBF selalu menang
   (biarkan di paling bawah file)
   ========================================================================== */
.hero,
.page-hero,
.page-hero-gold {
    background: linear-gradient(135deg, #05C7F2 0%, #040DBF 100%) !important;
}
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
    display: none !important;
}