/* SD Negeri Swasta — app.css v3 */

/* ============================================================
   VARIABLES & RESET
============================================================ */
:root{
  --merah:#c4312f; --biru:#161b66; --kuning:#ffad00;
  --abu:#eaeaea; --putih:#ffffff; --teks:#1a1a1a;
  --teks-abu:#555; --font:'Poppins',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--teks);background:var(--putih);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
ul{list-style:none;padding:0;margin:0}
button{cursor:pointer;background:none;border:none;padding:0;font-family:var(--font)}

/* ============================================================
   NAVBAR
============================================================ */
.sd-navbar{
  position:sticky;top:0;z-index:999;
  background:var(--biru);
  box-shadow:0 2px 16px rgba(0,0,0,.28);
}
.sd-navbar-inner{
  display:flex;align-items:center;
  justify-content:space-between;
  /* FIX 2: tinggi navbar sedikit lebih besar */
  padding:0 32px;height:76px;gap:24px;
}
/* --- Brand --- */
.sd-navbar-brand{display:flex;align-items:center;gap:0;flex-shrink:0}
.sd-logo-box{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.7));
  /* garis kuning kanan logo */
  border-right:3px solid var(--kuning);
  padding-right:11px;margin-right:13px;
}
.sd-logo-box img{width:42px;height:42px;object-fit:contain}
.sd-logo-fallback{display:flex;width:42px;height:42px;align-items:center;justify-content:center;font-size:1.8rem;color:var(--kuning)}
.sd-brand-text{display:flex;flex-direction:column;line-height:1.3}
.sd-brand-top{font-size:.82rem;font-weight:700;color:var(--putih);letter-spacing:.01em}
.sd-brand-bot{font-size:.78rem;font-weight:400;color:rgba(255,255,255,.8)}

/* --- Nav Right --- */
.sd-nav-right{display:flex;align-items:center;gap:0;margin-left:auto}
.sd-nav-list{display:flex;align-items:center}
.sd-nav-item{position:relative}
.sd-nav-link{
  display:block;padding:0 20px;
  /* FIX 2: tinggi link sesuai navbar baru */
  height:76px;line-height:76px;
  font-size:.88rem;font-weight:500;color:var(--putih);white-space:nowrap;
}
.sd-nav-link:hover,.sd-nav-item:hover .sd-nav-link{color:var(--kuning)}

/* --- Dropdown --- */
.sd-dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:var(--putih);min-width:195px;
  box-shadow:0 8px 28px rgba(0,0,0,.16);
  border-radius:0;overflow:hidden;z-index:100;
}
.sd-nav-item:hover .sd-dropdown{display:block}
.sd-dropdown-item{
  display:block;padding:12px 18px;
  font-size:.85rem;font-weight:500;color:var(--teks);
  border-bottom:1px solid var(--abu);
  transition:background .14s,color .14s;
}
.sd-dropdown-item:last-child{border-bottom:none}
.sd-dropdown-item:hover{background:var(--abu);color:var(--biru)}

/* FIX 1: Pendaftaran pakai border-radius */
.sd-btn-pendaftaran{
  display:inline-block;margin-left:20px;padding:10px 24px;
  background:var(--kuning);color:var(--putih)!important;
  font-size:.88rem;font-weight:700;
  border-radius:6px;          /* <-- FIX 1 */
  white-space:nowrap;flex-shrink:0;
  transition:background .18s,transform .12s;
}
.sd-btn-pendaftaran:hover{background:#ffc02e;transform:translateY(-1px)}

/* --- Hamburger (mobile only) --- */
.sd-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;flex-shrink:0;z-index:1001;position:relative;
}
.sd-hamburger span{
  display:block;width:100%;height:2.5px;background:var(--putih);
  border-radius:2px;transition:transform .28s ease,opacity .2s ease;
}
.sd-hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.sd-hamburger.active span:nth-child(2){opacity:0}
.sd-hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============================================================
   NAVBAR — RESPONSIVE (tablet & mobile)
============================================================ */
@media(max-width:900px){
  .sd-navbar-inner{padding:0 18px;height:66px;gap:12px}
  .sd-logo-box{width:38px;height:38px;padding-right:9px;margin-right:10px}
  .sd-logo-box img{width:34px;height:34px}
  .sd-brand-top{font-size:.76rem}
  .sd-brand-bot{font-size:.68rem}

  .sd-hamburger{display:flex}

  .sd-nav-right{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin-left:0;
    position:fixed;top:66px;left:0;right:0;bottom:0;
    background:var(--biru);
    padding:8px 0 28px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:1000;
  }
  .sd-nav-right.active{transform:translateX(0)}

  .sd-nav-list{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .sd-nav-item{width:100%;border-bottom:1px solid rgba(255,255,255,.12)}
  .sd-nav-link{
    height:auto;line-height:1.4;padding:16px 24px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .sd-has-dropdown > .sd-nav-link::after{
    content:'\f282';font-family:'bootstrap-icons';font-size:.75rem;
    transition:transform .25s ease;color:rgba(255,255,255,.6);
  }
  .sd-has-dropdown.sd-dropdown-open > .sd-nav-link::after{transform:rotate(180deg)}

  /* Dropdown jadi accordion (klik, bukan hover) */
  .sd-dropdown{
    display:none;position:static;box-shadow:none;
    background:rgba(0,0,0,.15);min-width:0;
  }
  .sd-nav-item:hover .sd-dropdown{display:none} /* matikan perilaku hover di mobile */
  .sd-has-dropdown.sd-dropdown-open > .sd-dropdown{display:block}
  .sd-dropdown-item{
    padding:14px 36px;color:var(--putih);border-bottom:1px solid rgba(255,255,255,.08);
  }
  .sd-dropdown-item:hover{background:rgba(255,255,255,.08);color:var(--kuning)}

  .sd-btn-pendaftaran{
    margin:18px 24px 0;padding:13px 24px;text-align:center;
  }
}

@media(max-width:400px){
  .sd-brand-bot{display:none}
  .sd-navbar-inner{padding:0 14px}
}

/* ============================================================
   HERO SLIDER
============================================================ */
.sd-hero{position:relative;width:100%;height:540px;overflow:hidden;background:#000}
.sd-slides-wrap{position:relative;width:100%;height:100%}
.sd-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.sd-slide.active{opacity:1;pointer-events:auto}
.sd-slide-img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* FIX 4: overlay hitam, bukan biru */
.sd-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.08) 100%
  );
}

/* FIX 3: konten geser kanan + garis kuning pendek */
.sd-slide-content{
  position:absolute;
  bottom:90px;
  left:90px;     /* geser lebih kanan */
  color:var(--putih);z-index:2;
  display:flex;align-items:flex-start;gap:14px;
}

/* FIX 3: garis kuning pendek (tinggi = eyebrow+gap saja, bukan full height) */
.sd-slide-accent-line{
  width:5px;
  height:52px;   /* pendek, setinggi eyebrow+sedikit */
  background:var(--kuning);
  flex-shrink:0;
  margin-top:2px;
}

.sd-slide-texts{display:flex;flex-direction:column}
.sd-slide-eyebrow{font-size:.88rem;font-weight:400;margin-bottom:2px;opacity:.9;letter-spacing:.02em}
.sd-slide-title{font-size:3rem;font-weight:800;line-height:1.05;margin-bottom:6px}
.sd-slide-caption{font-size:.93rem;font-weight:300;line-height:1.65;opacity:.88}

@media(max-width:900px){
  .sd-hero{height:420px}
  .sd-slide-content{left:44px;bottom:56px;right:24px}
  .sd-slide-title{font-size:2.1rem}
  .sd-slide-caption{font-size:.85rem}
}
@media(max-width:600px){
  .sd-hero{height:360px}
  .sd-slide-content{left:24px;right:20px;bottom:44px;gap:10px}
  .sd-slide-accent-line{height:40px}
  .sd-slide-title{font-size:1.5rem}
  .sd-slide-eyebrow{font-size:.76rem}
  .sd-slide-caption{font-size:.76rem;line-height:1.5}
  .sd-dots{bottom:14px;right:16px}
  .sd-dot{width:8px;height:8px}
}

/* Dots pojok kanan bawah */
.sd-dots{position:absolute;bottom:24px;right:32px;display:flex;gap:9px;z-index:10}
.sd-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.38);border:2px solid transparent;transition:all .25s}
.sd-dot.active{background:var(--kuning);border-color:var(--kuning);transform:scale(1.3)}
.sd-dot:hover:not(.active){background:rgba(255,173,0,.55)}

/* ============================================================
   SELAMAT DATANG
============================================================ */
.sd-welcome{background:var(--putih);padding:64px 0 0}

/* FIX 5: header dimulai invisible, JS yang reveal saat scroll */
.sd-welcome-header{
  text-align:center;margin-bottom:52px;padding:0 24px;
}
.sd-welcome-title{font-size:2rem;font-weight:800;color:var(--teks);margin-bottom:10px}
.sd-welcome-desc{font-size:.92rem;font-weight:400;color:var(--teks-abu);line-height:1.7}
.sd-yellow-line{width:58px;height:3px;background:var(--kuning);margin:14px auto 0}

/* FIX 6: visi misi wrap – foto ga kepotong, visi misi lebih ke kanan */
.sd-visimisi-wrap{
  display:grid;

  grid-template-columns:350px 80px 1fr 1fr;

  max-width:1200px;
  margin:0 auto;

  padding:0 40px;

  align-items:start;
}
.sd-visimisi-col{
  padding:0 20px;

  display:flex;

  flex-direction:column;

  align-self:start;
}
.sd-visimisi-img-col{
  display:flex;

  justify-content:flex-start;

  align-items:center;

  padding-left:10px;
}
.sd-visimisi-img{
  width:100%;
  max-width:320px;

  height:auto;

  display:block;

  object-fit:contain;

  margin-bottom:-1px;
}
/* FIX 6: kolom visi misi agak kanan & ada gap dari foto */
.sd-visimisi-img-col{
  display:flex;
  justify-content:center;
  align-items:center;
}
.sd-visimisi-title{font-size:.98rem;font-weight:700;color:var(--biru);margin-bottom:12px}
.sd-visimisi-text{font-size:.87rem;font-weight:400;color:var(--teks-abu);line-height:1.8}
.sd-visimisi-misi-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:10px}
.sd-visimisi-misi-list li{
  font-size:.87rem;font-weight:400;color:var(--teks-abu);line-height:1.6;
  padding-left:22px;position:relative;
}
.sd-visimisi-misi-list li::before{
  content:'';position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--kuning);
}
.sd-link-detail{display:inline-block;margin-top:14px;font-size:.87rem;font-weight:600;color:var(--merah)}
.sd-link-detail:hover{color:var(--kuning)}

@media(max-width:1024px){
  .sd-visimisi-wrap{grid-template-columns:280px 40px 1fr 1fr;padding:0 24px}
}
@media(max-width:900px){
  .sd-visimisi-wrap{
    grid-template-columns:1fr;
    max-width:480px;padding:0 24px;gap:28px;
  }
  .sd-visimisi-img-col{padding-left:0}
  .sd-visimisi-col{padding:0;align-items:flex-start}
}
@media(max-width:600px){
  .sd-welcome{padding:44px 0 0}
  .sd-welcome-title{font-size:1.5rem}
  .sd-welcome-header{margin-bottom:36px}
}

/* ============================================================
   BERITA & ACARA
============================================================ */
.sd-berita{background:var(--abu);padding:56px 32px 64px;margin-top:0}

.sd-berita-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:28px;max-width:1100px;margin-left:auto;margin-right:auto;margin-bottom:28px;
}
/* FIX 7: eyebrow tidak full bold */
.sd-berita-eyebrow{
  font-size:.78rem;font-weight:500;   /* <-- ganti dari 700 ke 500 */
  color:var(--biru);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;
}
/* FIX 7: judul pakai poppins light */
.sd-berita-title{
  font-size:1.85rem;font-weight:300;  /* <-- light */
  color:var(--teks);
}
.sd-link-detail-sm{font-size:.82rem;font-weight:600;color:var(--merah);white-space:nowrap}
.sd-link-detail-sm:hover{color:var(--biru)}

@media(max-width:600px){
  .sd-berita{padding:40px 20px 48px}
  .sd-berita-header{flex-direction:column;align-items:flex-start;gap:8px}
  .sd-berita-title{font-size:1.4rem}
}

/* Grid 4 kolom */
.sd-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:14px;
  max-width:1100px;margin:0 auto;
}
.sd-span2{grid-column:span 2}

@media(max-width:900px){
  .sd-grid{grid-template-columns:repeat(2,1fr);padding:0 20px}
}
@media(max-width:600px){
  .sd-grid{grid-template-columns:1fr;padding:0 16px}
  .sd-span2{grid-column:span 1}
}

/* ---- VIDEO CARD ---- */
.sd-card-video{
  position:relative;overflow:hidden;
  border-radius:0;cursor:pointer;min-height:230px;background:#111;
}
.sd-card-video-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;position:absolute;inset:0;
}
.sd-card-video:hover .sd-card-video-img{transform:scale(1.05)}
.sd-card-video-fallback{
  width:100%;height:100%;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a2280 0%,#161b66 100%);
}
.sd-card-video-fallback i{font-size:2.6rem;color:rgba(255,255,255,.3)}

/* inner shadow on hover */
.sd-card-video-inner-shadow{
  position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 rgba(0,0,0,0);
  transition:box-shadow .35s ease;z-index:1;pointer-events:none;
}
.sd-card-video:hover .sd-card-video-inner-shadow{
  box-shadow:inset 0 0 60px 20px rgba(0,0,0,.58);
}

/* FIX 7: gradient hitam bukan biru */
.sd-card-video::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.22) 50%,
    transparent 100%
  );
  z-index:1;pointer-events:none;
}

/* FIX 7: badge acara/berita & icon camera TANPA kotakan */
.sd-card-video-top{
  position:absolute;top:12px;left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:center;z-index:2;
}
.sd-badge-label{
  font-size:.75rem;font-weight:600;color:var(--putih);
  /* no background box */
  background:none;
  letter-spacing:.04em;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.sd-badge-cam{
  color:var(--putih);font-size:1rem;
  /* no background box */
  background:none;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  display:flex;align-items:center;
}

/* FIX 7: bottom text naik lebih ke atas */
.sd-card-video-bottom{
  position:absolute;
  bottom:18px;   /* naik dari bawah */
  left:0;right:0;
  padding:0 16px 0;
  z-index:2;color:var(--putih);
}
/* FIX 7: tanggal & judul pakai font light */
.sd-card-date{
  font-size:.72rem;font-weight:300;opacity:.85;margin-bottom:5px;
}
.sd-card-video-title{
  font-size:1.1rem;font-weight:300;  /* light */
  line-height:1.35;margin:0;
}

/* ---- BERITA CARD ---- */
.sd-card-berita{
  background:var(--putih);border-radius:0;
  padding:18px 16px;display:flex;flex-direction:column;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:box-shadow .22s,transform .22s;min-height:150px;
}
.sd-card-berita:hover{box-shadow:0 6px 22px rgba(0,0,0,.12);transform:translateY(-2px)}

/* FIX 7: badge berita tanpa kotakan */
.sd-badge-berita{
  font-size:.75rem;font-weight:600;color:var(--biru);
  background:none;      /* no box */
  padding:0;
  width:fit-content;margin-bottom:8px;letter-spacing:.02em;
}

/* FIX 7: judul berita lebih besar + ellipsis kalau kepanjangan */
.sd-card-berita-title{
  font-size:1rem;font-weight:600;color:var(--teks);
  line-height:1.4;flex:1;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* FIX 7: tema pakai poppins light, lebih besar, ellipsis */
.sd-card-berita-tema{
  font-size:.85rem;font-weight:300;   /* light */
  color:var(--teks-abu);
  line-height:1.4;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* FIX 7: garis solid (bukan dashed), lebih tebal, beri margin atas yang cukup */
.sd-card-berita-sep{
  border:none;
  border-top:2px solid #d0d0d0;  /* solid, lebih tebal */
  margin:12px 0 10px;             /* ga terlalu mepet selengkapnya */
}

.sd-selengkapnya{
  font-size:.8rem;font-weight:600;color:var(--merah);
  transition:color .18s;
}
.sd-selengkapnya:hover{color:var(--biru)}

/* ============================================================
   FOOTER
============================================================ */
.sd-footer{background:var(--biru);color:var(--putih)}
.sd-footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 40px;gap:24px;
}

/* FIX 8: kanan footer - our school & contact sejajar, our school rata kanan */
.sd-footer-right{
  display:flex;align-items:center;gap:0;
}

/* FIX 8: kolom Our School rata kanan, mepet ke garis */
.sd-footer-col-school{
  padding:0 0 0 0;
  text-align:right;
  padding-right:28px;
}
/* FIX 8: kolom Our Contact rata kiri, mepet ke garis */
.sd-footer-col-contact{
  padding:0;
  padding-left:28px;
}

.sd-footer-col-title{
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.sd-footer-col-body{
  font-size:.83rem;font-weight:300;color:rgba(255,255,255,.85);
  line-height:1.65;margin:0;
}

/* FIX 8: garis vertikal lebih tebal */
.sd-footer-vline{
  width:2.5px;          /* lebih tebal */
  height:64px;          /* lebih tinggi */
  background:rgba(255,255,255,.45);
  flex-shrink:0;
}

/* FIX 8: icon contact sejajar dengan teks alamat */
.sd-footer-contact-wrap{
  display:flex;flex-direction:column;
}
.sd-footer-icons{
  display:flex;gap:16px;
  margin-top:2px;   /* sejajar dengan text alamat */
}
.sd-footer-icons a{color:rgba(255,255,255,.75);font-size:1.25rem;transition:color .18s}
.sd-footer-icons a:hover{color:var(--kuning)}

@media(max-width:900px){
  .sd-footer-inner{
    flex-direction:column;align-items:flex-start;
    padding:32px 24px;gap:24px;
  }
  .sd-footer-right{
    flex-direction:column;align-items:flex-start;gap:20px;width:100%;
  }
  .sd-footer-col-school{text-align:left;padding-right:0}
  .sd-footer-col-contact{padding-left:0}
  .sd-footer-vline{display:none}
}

/* ============================================================
   SCROLL REVEAL
============================================================ */
.sd-reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .65s ease,transform .65s ease;
}
.sd-reveal.is-visible{opacity:1;transform:translateY(0)}
.sd-reveal-child{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease;
}
.sd-reveal-child.is-visible{opacity:1;transform:translateY(0)}

/* ============================================================
   INNER PAGES — shared styles
============================================================ */

/* Page Hero (banner atas tiap halaman dalam) */
.sd-page-hero {

    background:

    linear-gradient(
    90deg,
    rgba(0,0,0,.65),
    rgba(0,0,0,.30),
    rgba(0,0,0,.05)
    ),

    url('../images/sejarah.jpg');

    background-size: cover;

    background-position: center;

    padding: 52px 40px 44px;

    position: relative;

    overflow: hidden;
}

.sd-page-hero::after {
    content: '';

    position: absolute;

    right: -60px;

    top: -60px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: rgba(255,173,0,0.08);

    pointer-events: none;
}

.sd-page-hero-inner {
    max-width: 1100px;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}

.sd-page-breadcrumb {
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.sd-page-breadcrumb a {
    color: rgba(255,255,255,0.55);
    transition: color 0.18s;
}
.sd-page-breadcrumb a:hover { color: var(--kuning); }
.sd-page-breadcrumb span { color: rgba(255,255,255,0.85); }

.sd-page-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--putih);
    line-height: 1.15;
    margin-bottom: 6px;
}

.sd-page-subtitle {
    font-size: 0.95rem;

    font-weight: 300;

    color: rgba(255,255,255,.90);

    max-width: 620px;

    line-height: 1.8;
}

.sd-page-accent {
    width: 48px;
    height: 4px;
    background: var(--kuning);
    margin-top: 16px;
}

/* Content wrapper */
.sd-page-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 40px 72px;
}

/* Section heading inside page */
.sd-inner-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--biru);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--abu);
}

/* Card putih sederhana */
.sd-inner-card {
    background: var(--putih);
    border: 1px solid var(--abu);
    padding: 28px 28px;
    margin-bottom: 20px;
}

.sd-inner-card p {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--teks-abu);
    line-height: 1.85;
}

/* ---- SEJARAH ---- */
.sd-sejarah-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.sd-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
}

.sd-timeline-item {
    display: flex;
    gap: 20px;
    padding-bottom: 32px;
    position: relative;
}

.sd-timeline-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--abu);
}

.sd-timeline-item:last-child::before { display: none; }

.sd-timeline-dot {
    width: 32px;
    height: 32px;
    background: var(--biru);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

.sd-timeline-dot span {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--putih);
    text-align: center;
    line-height: 1.1;
}

.sd-timeline-content h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 4px;
}

.sd-timeline-content p {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--teks-abu);
    line-height: 1.7;
}

/* ---- VISI MISI ---- */
.sd-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.sd-vm-card {
    background: var(--putih);
    border: 1px solid var(--abu);
    padding: 32px 28px;
    position: relative;
}

.sd-vm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--biru);
}

.sd-vm-card.misi::before { background: var(--kuning); }

.sd-vm-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--biru);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.sd-vm-card.misi .sd-vm-card-label { color: var(--kuning); }

.sd-vm-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--teks);
    margin-bottom: 14px;
    line-height: 1.3;
}

.sd-vm-card p {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--teks-abu);
    line-height: 1.85;
}

.sd-nilai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.sd-nilai-item {
    background: var(--putih);
    border: 1px solid var(--abu);
    padding: 20px 18px;
    text-align: center;
}

.sd-nilai-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: var(--kuning);
}

.sd-nilai-item h5 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 4px;
}

.sd-nilai-item p {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--teks-abu);
    line-height: 1.6;
}

/* ---- KEPALA SEKOLAH ---- */
.sd-kepala-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

.sd-kepala-foto {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: top;
    display: block;
    border: 3px solid var(--abu);
}

.sd-kepala-nama {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--teks);
    margin-bottom: 4px;
}

.sd-kepala-jabatan {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--biru);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--abu);
}

.sd-kepala-bio {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--teks-abu);
    line-height: 1.9;
    margin-bottom: 20px;
}

.sd-kepala-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.sd-kepala-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.85rem;
}

.sd-kepala-info-item i {
    color: var(--biru);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.sd-kepala-info-item span {
    color: var(--teks-abu);
    font-weight: 400;
    line-height: 1.6;
}

/* ---- BERITA & ACARA (halaman) ---- */
/* TOOLBAR */

.sd-ba-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

margin-bottom:28px;

flex-wrap:wrap;

}


/* FILTER */

.sd-ba-filter{

display:flex;

gap:8px;

flex-wrap:wrap;

margin-bottom:0;

}


/* SEARCH */

.sd-ba-tools{

display:flex;

gap:12px;

align-items:center;

}

.sd-ba-search{

position:relative;

width:320px;

}

.sd-ba-search i{

position:absolute;

left:16px;

top:50%;

transform:translateY(-50%);

color:#999;

}

.sd-ba-search input{

width:100%;

height:42px;

padding:0 14px 0 44px;

border:1.5px solid var(--abu);

background:var(--putih);

font-size:.84rem;

outline:none;

}

.sd-ba-search input:focus{

border-color:var(--kuning);

}


/* DATE */

.sd-ba-date{

height:42px;

padding:0 14px;

border:1.5px solid var(--abu);

background:var(--putih);

font-size:.82rem;

}

.sd-ba-filter-btn {
    padding: 7px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font);
    background: var(--putih);
    border: 1.5px solid var(--abu);
    color: var(--teks-abu);
    cursor: pointer;
    transition: all 0.18s;
    border-radius: 0;
}

.sd-ba-filter-btn.active,
.sd-ba-filter-btn:hover {
    background: var(--biru);
    border-color: var(--biru);
    color: var(--putih);
}

.sd-ba-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sd-ba-card {
    background: var(--putih);
    border: 1px solid var(--abu);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.sd-ba-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.sd-ba-card-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #ddd;
}

.sd-ba-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sd-ba-card:hover .sd-ba-card-img { transform: scale(1.04); }

.sd-ba-card-type {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    letter-spacing: 0.04em;
}

.sd-ba-card-type.acara {
    background: var(--biru);
    color: var(--putih);
}

.sd-ba-card-type.berita {
    background: var(--putih);
    color: var(--biru);
    border: 1px solid var(--biru);
}

.sd-ba-card-video-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: var(--putih);
    padding: 4px 7px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.sd-ba-card-body {
    padding: 16px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sd-ba-card-date {
    font-size: 0.72rem;
    font-weight: 300;
    color: var(--teks-abu);
    margin-bottom: 6px;
}

.sd-ba-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--teks);
    line-height: 1.4;
    margin-bottom: 8px;
    flex: 1;
}

.sd-ba-card-desc {
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--teks-abu);
    line-height: 1.65;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sd-ba-card-sep {
    border: none;
    border-top: 1.5px solid var(--abu);
    margin-bottom: 10px;
}

.sd-ba-card-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--merah);
    transition: color 0.18s;
}
.sd-ba-card-link:hover { color: var(--biru); }

/* Responsive inner pages */
@media (max-width: 767px) {
    .sd-page-hero { padding: 36px 20px 30px; }
    .sd-page-body { padding: 36px 20px 52px; }
    .sd-sejarah-grid,
    .sd-vm-grid,
    .sd-kepala-wrap,
    .sd-ba-grid { grid-template-columns: 1fr; }
    .sd-nilai-grid { grid-template-columns: repeat(2, 1fr); }
    .sd-page-title { font-size: 1.5rem; }
    .sd-kepala-foto { aspect-ratio: 1/1; }
    .sd-ba-toolbar{

flex-direction:column;

align-items:stretch;

}

.sd-ba-tools{

width:100%;

}

.sd-ba-search{

width:100%;

}
}
/* ============================================================
   FOTO SEJARAH SEKOLAH
============================================================ */

.sd-sejarah-foto{

max-width:820px;

margin:0 auto 42px;

background:var(--putih);

padding:10px;

border:1px solid var(--abu);

overflow:hidden;
}

.sd-sejarah-foto img{

width:100%;

height:420px;

display:block;

object-fit:cover;
}


/* ============================================================
   BERITA & ACARA — fallback saat tidak ada foto
============================================================ */
.sd-ba-card-img-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f6f8ff 0%,#eef2ff 100%);
}
.sd-ba-card-img-fallback i{font-size:2.4rem;color:var(--biru);opacity:.55}
.sd-ba-card-img-fallback.acara{background:linear-gradient(135deg,#fff8e7 0%,#fff1cc 100%)}
.sd-ba-card-img-fallback.acara i{color:#9a6600}

/* ============================================================
   GURU & STAF — kategori tab tambahan (desain kartu tetap
   mengikuti data-guru, hanya menambah filter kategori)
============================================================ */
.sd-gs-kategori-tab{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sd-gs-kategori-btn{
  padding:9px 18px;border:1.5px solid #d0d0d0;background:var(--putih);
  font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--teks-abu);
  cursor:pointer;transition:all .16s;
}
.sd-gs-kategori-btn.active,.sd-gs-kategori-btn:hover{background:var(--biru);border-color:var(--biru);color:var(--putih)}
.sd-guru-badge.kategori-staff{background:rgba(196,49,47,.12);color:var(--merah)}

/* ============================================================
   STRUKTUR ORGANISASI
============================================================ */
.sd-struktur-wrap{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:8px}

.sd-struktur-tier{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;width:100%;position:relative;padding:0 0 44px}

.sd-struktur-connector{width:2px;height:32px;background:var(--abu)}

.sd-struktur-box{
  background:var(--putih);border:1px solid var(--abu);
  padding:18px 22px;text-align:center;min-width:220px;
  border-top:4px solid var(--biru);
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  transition:.2s;
}
.sd-struktur-box:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(22,27,102,.12)}
.sd-struktur-box.top{border-top-color:var(--merah);min-width:260px;background:var(--biru)}
.sd-struktur-box.top .sd-struktur-nama,
.sd-struktur-box.top .sd-struktur-jabatan{color:var(--putih)}
.sd-struktur-box.top .sd-struktur-jabatan{color:rgba(255,255,255,.75)}
.sd-struktur-box.komite{border-top-color:var(--kuning)}

.sd-struktur-icon{font-size:1.5rem;color:var(--kuning);margin-bottom:8px}
.sd-struktur-box.top .sd-struktur-icon{color:var(--kuning)}
.sd-struktur-jabatan{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--kuning);margin-bottom:4px}
.sd-struktur-nama{font-size:.92rem;font-weight:700;color:var(--teks)}

.sd-struktur-tier-label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teks-abu);margin-bottom:16px}

.sd-struktur-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:900px}
.sd-struktur-grid3 .sd-struktur-box{min-width:0}

@media(max-width:900px){
  .sd-struktur-grid3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .sd-struktur-grid3{grid-template-columns:1fr}
  .sd-struktur-tier{gap:14px}
}

/* ============================================================
   FASILITAS SEKOLAH
============================================================ */
.sd-fasilitas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px}

.sd-fasilitas-card{
  background:var(--putih);border:1px solid var(--abu);overflow:hidden;
  transition:.25s;border-bottom:3px solid transparent;
}
.sd-fasilitas-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.09);border-bottom-color:var(--kuning)}

.sd-fasilitas-img-wrap{height:180px;position:relative;overflow:hidden;background:linear-gradient(135deg,#f6f8ff 0%,#eef2ff 100%)}
.sd-fasilitas-img-wrap img{width:100%;height:100%;object-fit:cover;transition:.4s}
.sd-fasilitas-card:hover .sd-fasilitas-img-wrap img{transform:scale(1.05)}
.sd-fasilitas-icon-badge{
  position:absolute;left:14px;bottom:-18px;width:46px;height:46px;
  background:var(--biru);color:var(--putih);display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;box-shadow:0 4px 14px rgba(22,27,102,.3);
}
.sd-fasilitas-body{padding:28px 20px 20px}
.sd-fasilitas-nama{font-size:1rem;font-weight:700;color:var(--teks);margin-bottom:8px}
.sd-fasilitas-desc{font-size:.83rem;font-weight:300;color:var(--teks-abu);line-height:1.75}

@media(max-width:900px){.sd-fasilitas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sd-fasilitas-grid{grid-template-columns:1fr}}

/* ============================================================
   EKSTRAKURIKULER
============================================================ */
.sd-ekskul-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px}

.sd-ekskul-card{
  background:var(--putih);border:1px solid var(--abu);overflow:hidden;transition:.22s;
  border-bottom:4px solid var(--biru);
}
.sd-ekskul-card.warna-kuning{border-bottom-color:var(--kuning)}
.sd-ekskul-card.warna-merah{border-bottom-color:var(--merah)}
.sd-ekskul-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.08)}

.sd-ekskul-img-wrap{height:180px;overflow:hidden;background:linear-gradient(135deg,#f6f8ff 0%,#eef2ff 100%)}
.sd-ekskul-img-wrap img{width:100%;height:100%;object-fit:cover;transition:.4s}
.sd-ekskul-card:hover .sd-ekskul-img-wrap img{transform:scale(1.05)}

.sd-ekskul-body{padding:22px}
.sd-ekskul-nama{font-size:1rem;font-weight:700;color:var(--teks);margin-bottom:8px}
.sd-ekskul-desc{font-size:.83rem;font-weight:300;color:var(--teks-abu);line-height:1.75;margin-bottom:16px}

.sd-ekskul-meta{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--abu)}
.sd-ekskul-meta-row{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:var(--teks-abu)}
.sd-ekskul-meta-row i{color:var(--kuning);margin-top:2px;flex-shrink:0}

@media(max-width:900px){.sd-ekskul-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sd-ekskul-grid{grid-template-columns:1fr}}

/* ============================================================
   PROGRAM SEKOLAH
============================================================ */
.sd-program-list{display:flex;flex-direction:column;gap:16px;margin-bottom:8px}

.sd-program-item{
  background:var(--putih);border:1px solid var(--abu);
  display:flex;gap:20px;padding:0;align-items:stretch;
  border-left:4px solid var(--biru);transition:.2s;overflow:hidden;
  text-decoration:none;color:inherit;
}
.sd-program-item:hover{box-shadow:0 10px 28px rgba(0,0,0,.08);transform:translateX(2px)}
.sd-program-item.warna-kuning{border-left-color:var(--kuning)}
.sd-program-item.warna-merah{border-left-color:var(--merah)}

.sd-program-thumb{width:160px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,#f6f8ff 0%,#eef2ff 100%)}
.sd-program-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}
.sd-program-item:hover .sd-program-thumb img{transform:scale(1.06)}

.sd-program-num{
  font-size:1.6rem;font-weight:800;color:var(--abu);flex-shrink:0;line-height:1;
  min-width:44px;padding:24px 0 24px 24px;
}
.sd-program-body{flex:1;padding:24px 24px 24px 0}
.sd-program-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.sd-program-nama{font-size:1rem;font-weight:700;color:var(--teks)}
.sd-program-kategori{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 10px;background:rgba(22,27,102,.08);color:var(--biru);
}
.sd-program-item.warna-kuning .sd-program-kategori{background:rgba(255,173,0,.16);color:#9a6600}
.sd-program-item.warna-merah .sd-program-kategori{background:rgba(196,49,47,.1);color:var(--merah)}
.sd-program-desc{font-size:.85rem;font-weight:300;color:var(--teks-abu);line-height:1.8}
.sd-program-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.8rem;font-weight:600;color:var(--biru)}

@media(max-width:600px){
  .sd-program-item{flex-direction:column;gap:0}
  .sd-program-thumb{width:100%;height:140px}
  .sd-program-num{padding:16px 0 0 20px}
  .sd-program-body{padding:12px 20px 20px}
}

/* ============================================================
   HALAMAN DETAIL (Berita & Acara / Program Sekolah) — layout
   konten utama + sidebar 300px, dibikin susun ke bawah di mobile
============================================================ */
@media(max-width:900px){
  .sd-detail-layout{grid-template-columns:1fr !important}
}