/* ============================================================
   SISANTRI 2026 — style.css
   ============================================================ */

/* ===== 1. DESIGN TOKENS ===== */
:root{
    --emerald-900:#043d2e;
    --emerald-700:#0f6b4c;
    --emerald-600:#128a5f;
    --emerald-500:#1aa870;
    --bright-500:#22c55e;
    --amber-500:#f2a916;
    --amber-600:#d99109;
    --cream:#f6faf6;
    --ink:#0f2119;
    --ink-soft:#3d5a4c;
    --line:#dbe8de;
  }
  
  /* ===== 2. BASE ===== */
  html{ scroll-behavior:smooth; }
  
  body{
    font-family:'Plus Jakarta Sans', sans-serif;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display-serif{
    font-family:'Fraunces', serif;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  
  a{ text-decoration:none; }
  .container-xl{ max-width:1200px; }
  
  /* Card/section titles that use <h3> but should stay sans-serif
     (overrides the global h1/h2/h3 serif rule above) */
  .feature-row h3,
  .modul-panel h3,
  .post-card h3,
  .contact-info-card h3,
  .ekskul-card h3,
  .k-body h3{
    font-family:'Plus Jakarta Sans', sans-serif;
  }
  
  /* ===== 3. GENERIC SECTION / TEXT UTILITIES ===== */
  section{ padding:4.5rem 0; }
  
  .hero-kicker{
    color:var(--emerald-700);
    font-weight:700;
    font-size:.95rem;
    margin-bottom:.9rem;
  }
  .hero-kicker.light{ color:var(--amber-500); }
  
  .lead-text{
    color:var(--ink-soft);
    font-size:1.1rem;
    max-width:480px;
    margin-bottom:2rem;
  }
  .lead-text.light{ color:rgba(255,255,255,.82); max-width:480px; }
  
  .section-title{
    font-size:clamp(1.7rem,2.6vw,2.3rem);
    font-weight:600;
    margin-bottom:.6rem;
  }
  .section-sub{
    color:var(--ink-soft);
    max-width:560px;
    margin-bottom:2.8rem;
  }
  
  /* ===== 4. BUTTONS ===== */
  .btn-primary-emerald{
    background:var(--emerald-700);
    border:none;
    color:#fff;
    font-weight:700;
    padding:.75rem 1.6rem;
    border-radius:8px;
    display:inline-block;
  }
  .btn-primary-emerald:hover{ background:var(--emerald-900); color:#fff; }
  
  .btn-outline-emerald{
    background:transparent;
    border:1.5px solid var(--emerald-700);
    color:var(--emerald-700);
    font-weight:700;
    padding:.72rem 1.5rem;
    border-radius:8px;
  }
  .btn-outline-emerald:hover{ background:var(--emerald-700); color:#fff; }
  
  .btn-outline-light-custom{
    background:transparent;
    border:1.5px solid rgba(255,255,255,.55);
    color:#fff;
    font-weight:700;
    padding:.72rem 1.5rem;
    border-radius:8px;
  }
  .btn-outline-light-custom:hover{ background:#fff; color:var(--emerald-900); border-color:#fff; }
  
  .btn-amber-lg{
    background:var(--amber-500);
    color:var(--ink);
    font-weight:700;
    padding:.75rem 1.7rem;
    border-radius:8px;
    border:none;
    white-space:nowrap;
  }
  .btn-amber-lg:hover{ background:#fff; color:var(--emerald-900); }
  
  .btn-ppdb{
    background:var(--amber-500);
    border:none;
    color:var(--ink);
    font-weight:700;
    padding:.55rem 1.3rem;
    border-radius:8px;
  }
  .btn-ppdb:hover{ background:var(--amber-600); color:#fff; }
  
  /* ===== 5. NAVBAR ===== */
  .navbar-sisantri{
    /* background:rgba(246,250,246,0.92); */
    background: #fff;
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .navbar-brand{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.35rem;
    color:var(--emerald-900);
  }
 .navbar-brand .brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;height:36px;
    border-radius:9px;
    background:var(--emerald-700);
    color:#fff;
    margin-right:.55rem;
    font-size:1.1rem;
  }
  .navbar-sisantri .nav-link{
    color:var(--ink-soft);
    font-weight:600;
    font-size:.95rem;
    padding:.5rem 1rem !important;
  }
  .navbar-sisantri .nav-link:hover,
  .navbar-sisantri .nav-link.active{
    color:var(--emerald-700);
  }
  
  /* ===== 6. INNER PAGE HEADER
     (shared by blog.html, post-detail.html, profil.html,
     kontak.html, kurikulum.html) ===== */
  .page-header,
  .post-header{
    padding:3rem;
    background:var(--cream);
  }
  
  .page-header h1,
  .post-header h1{
    font-size:clamp(1.9rem,3.2vw,2.7rem);
    font-weight:600;
    line-height:1.22;
    max-width:700px;
    margin-bottom:1.1rem;
  }
  .page-header .lead-text,
  .post-header .lead-text{ max-width:560px; margin-bottom:0;}
  .page-header h1,
  .page-header h2,
  .page-header h3,  
  .page-header p,  
  .page-header b{
    color: #fff !important;
  }  
  .post-breadcrumb{
    display:flex; align-items:center; gap:.5rem;
    font-size:.85rem; color:var(--ink-soft);
    margin-bottom:1.2rem;
  }
  .post-breadcrumb i{ font-size:.7rem; }
  .post-breadcrumb a{ color:var(--ink-soft); }
  .post-breadcrumb a:hover{ color:var(--emerald-700); }
  .post-breadcrumb span{ color:var(--ink); font-weight:600; }
  
  .post-header .tag{
    display:inline-block;
    background:var(--amber-500);
    color:var(--ink);
    font-size:.75rem;
    font-weight:700;
    padding:.3rem .8rem;
    border-radius:6px;
    margin-bottom:1rem;
  }
  .post-meta{
    display:flex; gap:1.5rem; flex-wrap:wrap;
    color:var(--ink-soft);
    font-size:.88rem;
  }
  .post-meta i{ margin-right:.35rem; color:var(--emerald-700); }
  
  /* ============================================================
     HOMEPAGE (index.html)
     ============================================================ */
  
  /* ===== HERO SLIDESHOW ===== */
  .hero-slideshow{
    padding:1rem 0 1rem 0;
    background:var(--cream);
  }
  .hero-carousel{
    border-radius:22px;
    overflow:hidden;
    position:relative;
  }
  .carousel-item{ height:560px; position:relative; }
  
  .slide-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
  }
  .slide-bg-1{ background:linear-gradient(135deg, var(--emerald-600), var(--emerald-900)); }
  .slide-bg-2{ background:linear-gradient(135deg, var(--emerald-900), #062017); }
  .slide-bg-3{ background:linear-gradient(135deg, var(--bright-500), var(--emerald-700)); }
  
  .slide-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(4,20,14,.72) 0%, rgba(4,20,14,.45) 45%, rgba(4,20,14,.1) 80%);
  }
  .slide-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 4rem;
    max-width:640px;
  }
  .slide-content h1{
    color:#fff;
    font-size:clamp(2rem, 3.4vw, 2.9rem);
    font-weight:600;
    line-height:1.16;
    margin-bottom:1.1rem;
  }
  
  .carousel-nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
    backdrop-filter:blur(4px);
  }
  .carousel-nav-btn:hover{ background:var(--amber-500); border-color:var(--amber-500); color:var(--ink); }
  .nav-prev{ left:1.5rem; }
  .nav-next{ right:1.5rem; }
  
  .carousel-indicators-custom{
    position:absolute;
    bottom:1.8rem;
    left:4rem;
    z-index:3;
    display:flex;
    gap:.5rem;
  }
  .carousel-indicators-custom button{
    width:28px; height:4px;
    border-radius:2px;
    background:rgba(255,255,255,.4);
    border:none;
    padding:0;
    transition:background .2s;
  }
  .carousel-indicators-custom button.active{ background:var(--amber-500); width:40px; }
  
  .hero-stats-bar{
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 45px -20px rgba(4,61,46,.28);
    display:flex;
    justify-content:space-around;
    padding:1.6rem 2rem;
    margin:0 1.5rem;
    position:relative;
    top:-40px;
    flex-wrap:wrap;
    gap:1.2rem;
  }
  .hsb-item{ text-align:center; }
  .hsb-item .stat-num{
    font-family:'Fraunces', serif;
    font-size:1.9rem;
    font-weight:600;
    color:var(--emerald-900);
    line-height:1;
  }
  .hsb-item .stat-label{
    color:var(--ink-soft);
    font-size:.82rem;
    margin-top:.35rem;
  }
  
  /* ===== SAMBUTAN ===== */
  .sambutan{ background:#fff; }
  .sambutan-photo{
    width:100%;
    aspect-ratio:4/5;
    border-radius:16px;
    background:linear-gradient(160deg, var(--emerald-700), var(--emerald-900));
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.55);
    font-size:3.4rem;
  }
  .sambutan blockquote{
    font-family:'Fraunces', serif;
    font-size:1.4rem;
    line-height:1.5;
    color:var(--ink);
    font-weight:500;
    border-left:3px solid var(--amber-500);
    padding-left:1.3rem;
  }
  .sambutan .signee{ margin-top:1.4rem; }
  .sambutan .signee .name{ font-weight:700; }
  .sambutan .signee .role{ color:var(--ink-soft); font-size:.9rem; }
  
  /* ===== KEUNGGULAN (list style, bukan card grid) ===== */
  .feature-row{
    display:flex;
    gap:1.4rem;
    padding:1.6rem 0;
    border-top:1px solid var(--line);
  }
  .feature-row:last-child{ border-bottom:1px solid var(--line); }
  .feature-icon{
    flex:0 0 auto;
    width:52px;height:52px;
    border-radius:12px;
    background:var(--cream);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--emerald-700);
    font-size:1.35rem;
  }
  .feature-row h3{ font-size:1.1rem; font-weight:700; margin-bottom:.3rem; }
  .feature-row p{ color:var(--ink-soft); margin:0; font-size:.95rem; }
  
  /* ===== MODUL (bento layout) ===== */
  .modul-panel{ border-radius:16px; padding:1.6rem; height:100%; }
  .modul-panel.dark{ background:var(--emerald-900); color:#fff; }
  .modul-panel.light{ background:#fff; border:1px solid var(--line); }
  .modul-panel .m-icon{
    width:44px;height:44px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1rem;
    font-size:1.2rem;
  }
  .modul-panel.dark .m-icon{ background:rgba(255,255,255,.12); color:var(--amber-500); }
  .modul-panel.light .m-icon{ background:var(--cream); color:var(--emerald-700); }
  .modul-panel h3{ font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
  .modul-panel.dark p{ color:rgba(255,255,255,.72); }
  .modul-panel.light p{ color:var(--ink-soft); }
  .modul-panel p{ font-size:.88rem; margin-bottom:0; }
  .modul-panel ul{ padding-left:1.1rem; margin-bottom:0; font-size:.85rem; }
  .modul-panel.dark ul{ color:rgba(255,255,255,.72); }
  .modul-panel.light ul{ color:var(--ink-soft); }
  
  /* ===== BERITA (dipakai juga sebagai pola dasar post-card di blog.html) ===== */
  .berita{ background:#fff; }
  .post-card{ display:block; height:100%; color:inherit;}
  .post-thumb{
    aspect-ratio:16/10;
    border-radius:12px;
    background:linear-gradient(135deg, var(--emerald-600), var(--emerald-900));
    margin-bottom:1rem;
    position:relative;
  }
  .post-thumb .tag{
    position:absolute; top:12px; left:12px;
    background:var(--amber-500);
    color:var(--ink);
    font-size:.72rem;
    font-weight:700;
    padding:.28rem .7rem;
    border-radius:6px;
  }
  .post-card .p-date{ color:var(--ink-soft); font-size:.8rem; margin-bottom:.4rem; }
  .post-card h3{ font-size:1.08rem; font-weight:700; line-height:1.35; margin-bottom:.5rem; }
  .post-card p{ color:var(--ink-soft); font-size:.9rem; }
  .post-card .read-more{ color:var(--emerald-700); font-weight:700; font-size:.88rem; }
  
  /* ===== PRESTASI STRIP ===== */
  .prestasi-strip{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.6rem; }
  .prestasi-item{
    flex:0 0 auto;
    width:250px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:1.2rem;
  }
  .prestasi-item .lvl{
    display:inline-block;
    background:var(--cream);
    color:var(--emerald-700);
    font-size:.72rem;
    font-weight:700;
    padding:.25rem .6rem;
    border-radius:6px;
    margin-bottom:.7rem;
  }
  .prestasi-item h4{ font-size:.98rem; font-weight:700; margin-bottom:.25rem; }
  .prestasi-item p{ color:var(--ink-soft); font-size:.84rem; margin:0; }
  
  /* ===== CTA PPDB ===== */
  .cta-ppdb{
    background:var(--emerald-900);
    border-radius:22px;
    padding:3.2rem;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .cta-ppdb h2{ color:#fff; font-size:clamp(1.6rem,2.8vw,2.2rem); margin-bottom:.7rem; }
  .cta-ppdb p{ color:rgba(255,255,255,.72); max-width:480px; margin-bottom:0; }
  .cta-dot{
    position:absolute;
    width:260px;height:260px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.14);
    right:-70px; top:-90px;
  }
  
  /* ===== FOOTER ===== */
  footer{ background:var(--ink); color:rgba(255,255,255,.66); padding:4rem 0 1.6rem; }
  footer h5{ color:#fff; font-weight:700; font-size:.95rem; margin-bottom:1.1rem; }
  footer a{ color:rgba(255,255,255,.66); }
  footer a:hover{ color:var(--amber-500); }
  footer ul{ list-style:none; padding:0; margin:0; }
  footer ul li{ margin-bottom:.6rem; font-size:.92rem; }
  .footer-brand{
    font-family:'Fraunces', serif;
    color:#fff;
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:.8rem;
  }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:2.6rem;
    padding-top:1.4rem;
    font-size:.82rem;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.6rem;
  }
  .social-dot{
    width:36px;height:36px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:inline-flex;align-items:center;justify-content:center;
    margin-right:.5rem;
  }
  .social-dot:hover{ background:var(--amber-500); color:var(--ink); }
  
  /* ============================================================
     BLOG LISTING (blog.html)
     ============================================================ */
  .blog-section{ padding:3.5rem 0 5rem; }
  
  .blog-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2rem;
  }
  .blog-search{ position:relative; flex:1 1 240px; }
  .blog-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); }
  .blog-search input{
    width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    padding:.6rem .9rem .6rem 2.3rem;
    font-size:.92rem;
    background:#fff;
  }
  .blog-search input:focus{ outline:none; border-color:var(--emerald-700); }
  .blog-filter{ display:flex; gap:.5rem; flex-wrap:wrap; }
  .filter-chip{
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-size:.85rem;
    font-weight:600;
    padding:.4rem .9rem;
    border-radius:20px;
  }
  .filter-chip.active, .filter-chip:hover{
    background:var(--emerald-700);
    border-color:var(--emerald-700);
    color:#fff;
  }
  
  .featured-post{
    display:flex;
    gap:1.5rem;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:1rem;
    margin-bottom:.5rem;
    color:inherit;
  }
  .featured-thumb{
    flex:0 0 42%;
    aspect-ratio:4/3;
    border-radius:12px;
    background:linear-gradient(135deg, var(--emerald-600), var(--emerald-900));
    position:relative;
  }
  .featured-thumb .tag{
    position:absolute; top:12px; left:12px;
    background:var(--amber-500);
    color:var(--ink);
    font-size:.72rem;
    font-weight:700;
    padding:.28rem .7rem;
    border-radius:6px;
  }
  .featured-body{ padding:.5rem .5rem .5rem 0; align-self:center; }
  .featured-body h2{ font-size:1.35rem; font-weight:600; margin:.4rem 0 .6rem; line-height:1.3; }
  .featured-body p{ color:var(--ink-soft); font-size:.94rem; }
  
  .blog-pagination{ display:flex; justify-content:center; gap:.5rem; margin-top:3rem; }
  .page-btn{
    width:40px;height:40px;
    border:1px solid var(--line);
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-soft);
    font-weight:600;
    font-size:.9rem;
  }
  .page-btn.active{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }
  .page-btn.disabled{ opacity:.4; pointer-events:none; }
  .page-btn:hover:not(.active){ border-color:var(--emerald-700); color:var(--emerald-700); }
  
  .blog-sidebar{ display:flex; flex-direction:column; gap:1.5rem; }
  .sidebar-box{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.4rem; }
  .sidebar-box h5{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; margin-bottom:1.1rem; }
  .sidebar-list{ list-style:none; padding:0; margin:0; }
  .sidebar-list li{ border-top:1px solid var(--line); padding:.65rem 0; }
  .sidebar-list li:first-child{ border-top:none; padding-top:0; }
  .sidebar-list a{ display:flex; justify-content:space-between; color:var(--ink); font-size:.9rem; font-weight:600; }
  .sidebar-list a span{ color:var(--ink-soft); font-weight:400; }
  .sidebar-list a:hover{ color:var(--emerald-700); }
  
  .sidebar-post{ display:flex; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line); color:inherit; }
  .sidebar-post:first-of-type{ border-top:none; padding-top:0; }
  .sidebar-post-thumb{
    flex:0 0 auto;
    width:56px;height:56px;
    border-radius:8px;
    background:linear-gradient(135deg, var(--emerald-600), var(--emerald-900));
  }
  .sidebar-post-title{ font-size:.85rem; font-weight:700; line-height:1.35; }
  .sidebar-post:hover .sidebar-post-title{ color:var(--emerald-700); }
  
  .tag-cloud{ display:flex; flex-wrap:wrap; gap:.5rem; }
  .tag-cloud a{ border:1px solid var(--line); color:var(--ink-soft); font-size:.82rem; padding:.35rem .8rem; border-radius:20px; }
  .tag-cloud a:hover{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }
  
  .cta-box{ background:var(--emerald-900); border-color:var(--emerald-900); }
  .cta-box h5{ color:#fff; }
  .cta-box p{ color:rgba(255,255,255,.72); font-size:.88rem; margin-bottom:1rem; }
  
  /* ============================================================
     POST DETAIL (post-detail.html)
     ============================================================ */
  .post-cover{
    aspect-ratio:21/9;
    border-radius:18px;
    background:linear-gradient(135deg, var(--emerald-600), var(--emerald-900));
    margin-top:-1.5rem;
    position:relative;
    z-index:1;
  }
  .post-section{ padding:3.5rem 0 5rem; }
  .post-body{ font-size:1.02rem; line-height:1.85; color:var(--ink); max-width:720px; }
  .post-body p{ margin-bottom:1.4rem; }
  .post-body h2{ font-size:1.4rem; font-weight:600; margin:2.2rem 0 1rem; }
  .post-body blockquote{
    font-family:'Fraunces', serif;
    font-size:1.2rem;
    font-style:italic;
    line-height:1.6;
    color:var(--ink);
    border-left:3px solid var(--amber-500);
    padding-left:1.3rem;
    margin:1.8rem 0;
  }
  .post-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin:2rem 0; }
  .post-tags a{ border:1px solid var(--line); color:var(--ink-soft); font-size:.82rem; padding:.35rem .9rem; border-radius:20px; }
  .post-tags a:hover{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }
  
  .post-share{
    display:flex; align-items:center; gap:.7rem;
    padding:1.2rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:1.8rem;
  }
  .post-share span{ font-size:.88rem; font-weight:600; color:var(--ink-soft); margin-right:.3rem; }
  .share-btn{
    width:38px;height:38px;
    border-radius:50%;
    background:var(--cream);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--emerald-700);
  }
  .share-btn:hover{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }
  
  .author-box{
    display:flex; align-items:center; gap:1rem;
    background:var(--cream);
    border-radius:14px;
    padding:1.2rem 1.4rem;
    max-width:720px;
  }
  .author-avatar{
    width:52px;height:52px;
    border-radius:50%;
    background:var(--emerald-700);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;
    flex:0 0 auto;
  }
  .author-name{ font-weight:700; font-size:.95rem; }
  .author-role{ color:var(--ink-soft); font-size:.85rem; }
  
  /* ============================================================
     PROFIL SEKOLAH (profil.html)
     ============================================================ */
  .profile-section{ padding:3.5rem 0 5rem; }
  
  .profile-nav{ display:flex; flex-direction:column; gap:.3rem; position:sticky; top:100px; }
  .profile-nav a{
    color:var(--ink-soft);
    font-weight:600;
    font-size:.92rem;
    padding:.6rem .9rem;
    border-radius:8px;
    border-left:2px solid transparent;
  }
  .profile-nav a:hover{ color:var(--emerald-700); }
  .profile-nav a.active{ color:var(--emerald-700); background:var(--cream); border-left-color:var(--amber-500); }
  
  .profile-block{
    padding-bottom:3.5rem;
    margin-bottom:3.5rem;
    border-bottom:1px solid var(--line);
    scroll-margin-top:100px;
  }
  .profile-block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .profile-block h2{ font-size:1.6rem; font-weight:600; margin:.4rem 0 1.2rem; }
  .profile-block p{ color:var(--ink-soft); line-height:1.8; margin-bottom:1.1rem; max-width:680px; }
  
  .timeline{ margin-top:2rem; }
  .timeline-item{ display:flex; gap:1.5rem; padding:1.2rem 0; border-top:1px solid var(--line); }
  .timeline-item:first-child{ border-top:none; }
  .t-year{ flex:0 0 70px; font-family:'Fraunces', serif; font-weight:600; color:var(--emerald-700); font-size:1.15rem; }
  .t-text{ color:var(--ink-soft); font-size:.94rem; padding-top:.15rem; }
  
  .visi-box{ background:var(--emerald-900); color:#fff; border-radius:16px; padding:1.8rem 2rem; margin-bottom:1.5rem; }
  .visi-label{
    display:inline-block;
    background:var(--amber-500);
    color:var(--ink);
    font-size:.72rem;
    font-weight:700;
    padding:.25rem .7rem;
    border-radius:6px;
    margin-bottom:.8rem;
  }
  .visi-box p{ color:#fff; font-family:'Fraunces', serif; font-size:1.2rem; line-height:1.5; margin:0; max-width:640px; }
  
  .misi-list{ display:flex; flex-direction:column; gap:0; }
  .misi-item{ display:flex; gap:1.2rem; padding:1rem 0; border-top:1px solid var(--line); }
  .misi-item:first-child{ border-top:none; }
  .misi-num{ flex:0 0 auto; font-family:'Fraunces', serif; font-weight:600; color:var(--amber-600); font-size:1.1rem; }
  .misi-item p{ margin:0; }
  
  .org-chart{ display:flex; flex-direction:column; align-items:center; gap:2rem; margin-top:2rem; }
  .org-row{ display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
  .org-node{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.5rem; text-align:center; width:200px; }
  .org-node.org-top{ border-color:var(--emerald-700); background:var(--cream); }
  .org-avatar{
    width:52px;height:52px;
    border-radius:50%;
    background:var(--emerald-700);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;
    margin:0 auto .8rem;
  }
  .org-name{ font-weight:700; font-size:.9rem; margin-bottom:.2rem; }
  .org-role{ color:var(--ink-soft); font-size:.8rem; }
  
  .fasilitas-item{
    display:flex;
    align-items:center;
    gap:.8rem;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:12px;
    padding:1rem 1.1rem;
    height:100%;
  }
  .fasilitas-item i{ color:var(--emerald-700); font-size:1.3rem; }
  .fasilitas-item span{ font-size:.88rem; font-weight:600; }
  
  /* ============================================================
     KONTAK (kontak.html)
     ============================================================ */
  .contact-section{ padding:3.5rem 0 5rem; }
  
  .contact-info-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.6rem; height:100%; }
  .ci-icon{
    width:48px;height:48px;
    border-radius:12px;
    background:var(--cream);
    color:var(--emerald-700);
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;
    margin-bottom:1rem;
  }
  .contact-info-card h3{ font-size:1rem; font-weight:700; margin-bottom:.4rem; }
  .contact-info-card p{ color:var(--ink-soft); font-size:.9rem; margin:0; line-height:1.6; }
  
  .contact-title{ font-size:1.7rem; font-weight:600; margin-bottom:.7rem; }
  
  .contact-form .form-label{ font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
  .contact-form .form-control,
  .contact-form .form-select{
    border:1px solid var(--line);
    border-radius:8px;
    padding:.65rem .9rem;
    font-size:.92rem;
    background:#fff;
  }
  .contact-form .form-control:focus,
  .contact-form .form-select:focus{
    outline:none;
    border-color:var(--emerald-700);
    box-shadow:0 0 0 3px rgba(15,107,76,.12);
  }
  
  .contact-map{ width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-bottom:1.5rem; }
  
  .office-hours{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.6rem; margin-bottom:1.5rem; }
  .office-hours h3{ font-size:1rem; font-weight:700; margin-bottom:1rem; }
  .office-hours h3 i{ color:var(--emerald-700); margin-right:.4rem; }
  .oh-row{ display:flex; justify-content:space-between; padding:.6rem 0; border-top:1px solid var(--line); font-size:.9rem; }
  .oh-row:first-of-type{ border-top:none; padding-top:0; }
  .oh-row span:first-child{ color:var(--ink-soft); }
  .oh-row span:last-child{ font-weight:700; }
  
  .social-inline{ display:flex; align-items:center; gap:.6rem; }
  .social-inline span{ font-size:.88rem; font-weight:600; color:var(--ink-soft); margin-right:.4rem; }
  .social-inline .social-dot{ background:var(--cream); border:1px solid var(--line); color:var(--ink); }
  .social-inline .social-dot:hover{ background:var(--amber-500); border-color:var(--amber-500); color:var(--ink); }
  
  /* ============================================================
     KURIKULUM (kurikulum.html)
     ============================================================ */
  .mapel-group{ margin-bottom:1.8rem; }
  .mapel-group-label{ font-weight:700; font-size:.85rem; color:var(--emerald-700); margin-bottom:.9rem; }
  .mapel-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.6rem; }
  .mapel-item{
    display:flex;
    align-items:center;
    gap:.7rem;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:10px;
    padding:.8rem 1rem;
    font-size:.9rem;
    font-weight:600;
  }
  .mapel-item i{ color:var(--emerald-700); font-size:1.05rem; }
  
  .ekskul-card{ display:flex; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem; height:100%; }
  .ekskul-icon{
    flex:0 0 auto;
    width:48px;height:48px;
    border-radius:12px;
    background:var(--emerald-900);
    color:var(--amber-500);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
  }
  .ekskul-card h3{ font-size:1rem; font-weight:700; margin-bottom:.25rem; }
  .ekskul-card p{ color:var(--ink-soft); font-size:.85rem; margin-bottom:.5rem; }
  .ekskul-jadwal{ font-size:.8rem; color:var(--emerald-700); font-weight:600; }
  .ekskul-jadwal i{ margin-right:.3rem; }
  
  .kalender-list{ display:flex; flex-direction:column; }
  .kalender-item{ display:flex; gap:1.3rem; padding:1.1rem 0; border-top:1px solid var(--line); align-items:center; }
  .kalender-item:first-child{ border-top:none; }
  .k-date{ flex:0 0 60px; text-align:center; background:var(--cream); border-radius:10px; padding:.5rem 0; }
  .k-day{ display:block; font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; color:var(--emerald-900); line-height:1; }
  .k-month{ display:block; font-size:.72rem; color:var(--ink-soft); margin-top:.15rem; }
  .k-cat{ display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:6px; margin-bottom:.4rem; }
  .cat-ujian{ background:#fde68a; color:#7c4a03; }
  .cat-kegiatan{ background:#bbf7d0; color:#065f46; }
  .cat-libur{ background:#e0e7ff; color:#3730a3; }
  .k-body p{ margin:0; color:var(--ink-soft); font-size:.85rem; }
  
  .jadwal-toolbar{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.3rem; }
  .jadwal-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:720px; }
  .jadwal-table th{ background:var(--emerald-900); color:#fff; font-weight:600; text-align:left; padding:.8rem 1rem; }
  .jadwal-table th:first-child{ border-radius:10px 0 0 0; }
  .jadwal-table th:last-child{ border-radius:0 10px 0 0; }
  .jadwal-table td{ border-bottom:1px solid var(--line); padding:.75rem 1rem; vertical-align:top; }
  .jadwal-table .jam{ font-weight:700; color:var(--emerald-700); white-space:nowrap; }
  .jp-mapel{ display:block; font-weight:700; color:var(--ink); }
  .jp-guru{ display:block; color:var(--ink-soft); font-size:.78rem; margin-top:.15rem; }
  .jp-empty{ color:var(--ink-soft); text-align:center; }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:991px){
    .profile-nav{ position:static; flex-direction:row; overflow-x:auto; gap:.5rem; padding-bottom:.5rem; }
    .profile-nav a{ white-space:nowrap; }
  }
  
  @media (max-width:767px){
    .featured-post{ flex-direction:column; }
    .featured-thumb{ flex:none; }
    .carousel-item{ height:460px; }
    .slide-content{ padding:0 1.6rem; max-width:100%; }
    .carousel-indicators-custom{ left:1.6rem; }
    .hero-stats-bar{ margin:0; top:-24px; padding:1.2rem 1rem; }
    .mapel-list{ grid-template-columns:1fr; }
  }
  .bg-theme{
    background: var(--emerald-900);
  }
  /* ===== TOP UTILITY BAR ===== */
.topbar-utility{
  background:var(--emerald-900);
  color:rgba(255,255,255,.78);
  font-size:.8rem;
  padding:.5rem 0;
}
.topbar-contact span{ margin-right:1.5rem; }
.topbar-contact i{ color:var(--amber-500); margin-right:.35rem; }
.topbar-social{ display:flex; gap:.9rem; }
.topbar-social a{ color:rgba(255,255,255,.78); }
.topbar-social a:hover{ color:var(--amber-500); }

@media (max-width:575px){
  .topbar-contact span:last-child{ display:none; } /* email disembunyikan di layar sempit, telepon tetap tampil */
}

/* ===== HEADER (logo + nama sekolah) ===== */
.header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header .navbar-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--emerald-900);
}
.header .navbar-brand img{ height:44px; width:auto; }
.header .navbar-brand span{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.25rem;
  line-height:1.25;
  color:var(--ink);
}

/* ===== NAVBAR ===== */
.navbar-sisantri{
  background:var(--emerald-700);
  padding:.4rem 0;
}
.navbar-sisantri .navbar-nav .nav-link{
  color:rgba(255,255,255,.85);
  font-weight:600;
  font-size:.94rem;
  padding:.65rem 1rem !important;
  border-radius:8px;
}
.navbar-sisantri .navbar-nav .nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.1);
}
.navbar-sisantri .navbar-nav .nav-link.active{
  color:var(--emerald-900);
  background:var(--amber-500);
}
.navbar-toggler-icon{
  filter:invert(1);
}



/* Saat navbar jadi sticky (nempel di atas ketika discroll) */
.navbar-sisantri.sticky-top{
  z-index:1030;
  box-shadow:0 6px 20px -8px rgba(4,61,46,.35);
}
/* ===== HEADER (logo + nama sekolah) — responsive ===== */
.header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header .navbar-brand{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem .7rem;
  color:var(--emerald-900);
}
.header .navbar-brand img{
  height:44px;
  width:auto;
  flex-shrink:0;
}
.header .navbar-brand span{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.25rem;
  line-height:1.25;
  color:var(--ink);
}
.small-tag{
  font-family: sans-serif;
  font-size: 0.8rem;
}

@media (max-width:575px){
  .header .navbar-brand{
    flex-direction:column;
    text-align:center;
    justify-content:center;
    gap:.4rem;
  }
  .header .navbar-brand .brand-logos{
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .header .navbar-brand img{
    height:34px;
  }
  .header .navbar-brand span{
    font-size:1rem;
    line-height:1.3;
  }
}
.blog-pagination{ list-style:none; padding:0; }
.blog-pagination li.active .page-btn{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }
.blog-pagination li.disabled .page-btn{ opacity:.4; pointer-events:none; }
.page-content img{
  width: 100% !important;
  border-radius: 0.3rem;
}
/* tabel desktop / daftar mobile */
.jadwal-desktop{ display:none; }
@media (min-width:768px){
  .jadwal-desktop{ display:block; }
  .jadwal-mobile{ display:none; }
}

/* sorotan hari ini */
.jadwal-table th.is-today{ background:var(--amber-500); color:var(--ink); }
.jadwal-table td.is-today{ background:rgba(242,169,22,.10); }

/* tampilan mobile */
.jp-item{ display:flex; gap:1rem; padding:.9rem 0; border-top:1px solid var(--line); }
.jp-item:first-child{ border-top:none; }
.jp-time{ flex:0 0 96px; font-weight:700; color:var(--emerald-700); font-size:.85rem; }
.jadwal-mobile .nav-pills .nav-link{ color:var(--ink-soft); white-space:nowrap; }
.jadwal-mobile .nav-pills .nav-link.active{ background:var(--emerald-700); color:#fff; }

/* cetak: hanya header halaman dan tabel */
@media print{
  .topbar-utility, .header, .navbar, footer, .jadwal-toolbar{ display:none !important; }
  .jadwal-desktop{ display:block !important; }
  .jadwal-mobile{ display:none !important; }
  .post-header{ padding:1rem 0; }
}
/* agenda terdekat */
.kal-next{ background:var(--emerald-900); color:#fff; border-radius:16px; padding:1.4rem 1.6rem; border-left:5px solid var(--amber-500); }
.kal-next-label{ color:var(--amber-500); font-weight:700; font-size:.85rem; margin-bottom:.4rem; }
.kal-next h2{ color:#fff; font-size:1.35rem; margin-bottom:.6rem; }
.kal-next-meta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; font-size:.9rem; color:rgba(255,255,255,.8); }
.kal-next-meta i{ margin-right:.3rem; color:var(--amber-500); }

/* lompat bulan */
.kal-jump{ display:flex; gap:.5rem; flex-wrap:wrap; }
.kal-jump a{ border:1px solid var(--line); color:var(--ink-soft); font-size:.8rem; font-weight:600; padding:.3rem .8rem; border-radius:20px; }
.kal-jump a:hover{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }

/* grup bulan */
.kal-month{ margin-bottom:2rem; scroll-margin-top:90px; }
.kal-month-title{ font-size:1.15rem; font-weight:600; padding-bottom:.6rem; border-bottom:2px solid var(--emerald-700); margin-bottom:.4rem; }

/* status */
.kalender-item.is-past{ opacity:.55; }
.kalender-item.is-now{ background:rgba(242,169,22,.08); border-radius:12px; padding-left:.8rem; padding-right:.8rem; }
.kal-status{ display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:6px; margin-left:.3rem; }
.kal-status.now{ background:var(--amber-500); color:var(--ink); }
.kal-desc{ margin-top:.3rem !important; }

@media print{
  .kal-toolbar, .kal-jump{ display:none !important; }
  .kalender-item.is-past{ opacity:1; }
}
/* kartu statistik */
.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.8rem; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem; }
.stat-card .num{ font-family:'Fraunces',serif; font-size:1.8rem; font-weight:600; color:var(--emerald-900); line-height:1; }
.stat-card .lbl{ color:var(--ink-soft); font-size:.82rem; margin-top:.35rem; }

/* tabel data siswa */
.data-table{ width:100%; border-collapse:collapse; font-size:.9rem; background:#fff; min-width:480px; }
.data-table th{ background:var(--emerald-900); color:#fff; text-align:left; padding:.75rem 1rem; font-weight:600; }
.data-table th:first-child{ border-radius:10px 0 0 0; }
.data-table th:last-child{ border-radius:0 10px 0 0; }
.data-table td{ padding:.65rem 1rem; border-bottom:1px solid var(--line); }
.data-table tbody tr:hover td{ background:var(--cream); }

/* kartu guru & staf */
.people-group-title{ font-size:1.15rem; font-weight:600; padding-bottom:.6rem; border-bottom:2px solid var(--emerald-700); margin:2rem 0 1.2rem; }
.people-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
.person-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.4rem 1rem; text-align:center; }
.person-card.is-lead{ border-color:var(--emerald-700); background:var(--cream); }
.person-avatar{
  position:relative; width:96px; height:96px; border-radius:50%; margin:0 auto .9rem; overflow:hidden;
  background:var(--emerald-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:1.6rem; font-weight:600;
}
.person-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.person-name{ font-weight:700; font-size:.92rem; line-height:1.35; margin-bottom:.25rem; }
.person-role{ color:var(--ink-soft); font-size:.8rem; }

@media (max-width:575px){
  .people-grid{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .person-avatar{ width:76px; height:76px; font-size:1.3rem; }
}
/* ===== EKSTRAKURIKULER ===== */
.ek-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.3rem; }
.ek-tile{ display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.5rem; color:inherit; transition:box-shadow .2s, transform .2s; }
.ek-tile:hover{ box-shadow:0 14px 30px -18px rgba(4,61,46,.4); transform:translateY(-2px); }
.ek-logo{
  position:relative; width:72px; height:72px; border-radius:16px; overflow:hidden; margin-bottom:1rem;
  background:var(--emerald-900); color:var(--amber-500);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.ek-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
.ek-tile h3{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.ek-meta{ display:flex; flex-direction:column; gap:.2rem; font-size:.8rem; color:var(--emerald-700); font-weight:600; margin-bottom:.7rem; }
.ek-meta i{ margin-right:.3rem; }
.ek-tile p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:.8rem; }

/* ===== PRESTASI ===== */
.pr-filter{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.5rem; }
.pr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.pr-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem; }
.pr-top{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.8rem; }
.pr-top .lvl{ margin-bottom:0; }
.pr-cat{ font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:6px; background:#f1f5f2; color:var(--ink-soft); }
.pr-rank{ display:inline-block; font-weight:700; font-size:.82rem; color:var(--ink-soft); margin-bottom:.4rem; }
.pr-rank.is-first{ color:var(--amber-600); }
.pr-card h3{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:700; line-height:1.4; margin-bottom:.6rem; }
.pr-line{ font-size:.84rem; color:var(--ink-soft); margin-top:.25rem; }
.pr-line i{ margin-right:.4rem; color:var(--emerald-700); }