:root{
  --biru-utama:#0d6efd;
  --biru-tua:#0a4fb0;
  --biru-lembut:#eaf2ff;
  --putih:#ffffff;
  --abu-bg:#f4f6f9;
  --abu-teks:#5c6672;
  --gelap:#0f2035;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-halus:0 6px 20px rgba(15,32,53,.06);
  --shadow-hover:0 16px 32px rgba(13,110,253,.16);
  --transisi:all .35s cubic-bezier(.25,.8,.25,1);
}

html{scroll-behavior:smooth;}

body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  background-color:var(--abu-bg);
  color:var(--gelap);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family:"Poppins", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:"Poppins",sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--biru-utama);
  background:var(--biru-lembut);
  padding:.4rem .9rem;
  border-radius:50px;
}

.section-title{
  font-weight:700;
  letter-spacing:-.01em;
}

.section-pad{
  padding-top:5rem;
  padding-bottom:5rem;
}

.navbar-sekolah{
  background:rgba(19, 19, 19, 0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 18px rgba(15,32,53,.06);
  transition:var(--transisi);
  padding-top:.7rem;
  padding-bottom:.7rem;
}

.navbar-brand-sekolah{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.navbar-brand-sekolah img{
  height:44px;
  width:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--putih);
}

.brand-text-title{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.1;
  color:var(--putih);
  margin:0;
}

.brand-text-sub{
  font-size:.72rem;
  color:var(--abu-teks);
  letter-spacing:.03em;
}

.nav-sekolah .nav-link{
  position:relative;
  font-weight:600;
  font-size:.92rem;
  color:var(--putih) !important;
  margin:0 .35rem;
  padding:.5rem .2rem !important;
}

.nav-sekolah .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:.1rem;
  width:0;
  height:2px;
  background:var(--biru-utama);
  transition:var(--transisi);
}

.nav-sekolah .nav-link:hover{
  color:var(--biru-utama) !important;
}

.nav-sekolah .nav-link:hover::after,
.nav-sekolah .nav-link.active::after{
  width:100%;
}

.nav-sekolah .dropdown-menu{
  border:none;
  box-shadow:var(--shadow-halus);
  border-radius:var(--radius-md);
  padding:.5rem;
}

.nav-sekolah .dropdown-item{
  border-radius:var(--radius-sm);
  font-weight:500;
  padding:.55rem .9rem;
  transition:var(--transisi);
}

.nav-sekolah .dropdown-item:hover{
  background:var(--biru-lembut);
  color:var(--biru-utama);
  padding-left:1.1rem;
}

.btn-ppdb-nav{
  background:var(--biru-utama);
  color:#fff;
  font-weight:600;
  font-size:.88rem;
  border-radius:50px;
  padding:.5rem 1.3rem;
  transition:var(--transisi);
  border:none;
}

.btn-ppdb-nav:hover{
  background:var(--biru-tua);
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
  color:#fff;
}
.navbar-brand {
        padding-top: 8px;
        padding-bottom: 8px;
        height: auto;
    }

    .navbar-brand img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
    }

.hero-carousel{
  margin-top:0;
}

.hero-slide{
  height:88vh;
  min-height:560px;
  position:relative;
  background-size:cover;
  background-position:center;
}

.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,20,40,.55) 0%, rgba(10,20,40,.35) 45%, rgba(10,20,40,.75) 100%);
}

.hero-caption{
  position:relative;
  z-index:2;
  max-width:720px;
}

.hero-caption .eyebrow{
  background:rgba(255,255,255,.15);
  color:#fff;
  backdrop-filter:blur(4px);
}

.hero-caption h1{
  font-weight:700;
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.12;
  color:#fff;
  letter-spacing:-.01em;
}

.hero-caption p{
  color:rgba(255,255,255,.85);
  font-size:1.08rem;
  max-width:560px;
}

.btn-hero-primary{
  background:var(--biru-utama);
  border:none;
  color:#fff;
  font-weight:600;
  padding:.75rem 1.7rem;
  border-radius:50px;
  transition:var(--transisi);
}

.btn-hero-primary:hover{
  background:var(--biru-tua);
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(13,110,253,.35);
  color:#fff;
}

.btn-hero-outline{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.75);
  color:#fff;
  font-weight:600;
  padding:.75rem 1.7rem;
  border-radius:50px;
  transition:var(--transisi);
}

.btn-hero-outline:hover{
  background:#fff;
  color:var(--biru-tua);
  transform:translateY(-3px);
  border-color:#fff;
}

.hero-carousel .carousel-indicators [data-bs-target]{
  width:34px;
  height:4px;
  border-radius:4px;
  background-color:rgba(255,255,255,.55);
}
.hero-carousel .carousel-indicators .active{
  background-color:#fff;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}


.stat-strip-wrap{
  margin-top:-64px;
  position:relative;
  z-index:5;
}

.stat-strip{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 45px rgba(15,32,53,.14);
  padding:1.6rem 1rem;
}

.stat-item{
  text-align:center;
  padding:.4rem .6rem;
  border-right:1px solid #edf1f5;
}
.stat-item:last-child{border-right:none;}

.stat-num{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:1.9rem;
  color:var(--biru-utama);
  line-height:1;
}

.stat-label{
  font-size:.78rem;
  color:var(--abu-teks);
  font-weight:600;
  letter-spacing:.02em;
}


.card-sekolah{
  background:var(--putih);
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-halus);
  transition:var(--transisi);
  overflow:hidden;
}

.card-sekolah:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
}

.card-img-crop{
  height:210px;
  object-fit:cover;
  width:100%;
  transition:var(--transisi);
}

.card-sekolah:hover .card-img-crop{
  transform:scale(1.06);
}

.img-frame{
  overflow:hidden;
  border-radius:var(--radius-lg);
}


.profil-img-utama{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-halus);
  width:100%;
  object-fit:cover;
  height:430px;
}

.card-sambutan{
  background:var(--putih);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-halus);
  border-left:4px solid var(--biru-utama);
}

.foto-kepsek{
  width:130px;
  height:130px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--biru-lembut);
}

/* ---------- Statistik ---------- */
.card-statistik{
  background:var(--putih);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-halus);
  padding:2rem 1rem;
  text-align:center;
  transition:var(--transisi);
  height:100%;
}

.card-statistik:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
}

.icon-circle{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--biru-lembut);
  color:var(--biru-utama);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  margin:0 auto 1rem;
  transition:var(--transisi);
}

.card-statistik:hover .icon-circle{
  background:var(--biru-utama);
  color:#fff;
  transform:rotate(8deg) scale(1.05);
}

.angka-statistik{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:2rem;
  color:var(--gelap);
}


.card-menu-cepat{
  background:var(--putih);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-halus);
  padding:2.2rem 1rem;
  text-align:center;
  transition:var(--transisi);
  text-decoration:none;
  display:block;
  height:100%;
  color:var(--gelap);
}

.card-menu-cepat:hover{
  transform:scale(1.04) translateY(-4px);
  box-shadow:var(--shadow-hover);
  color:var(--gelap);
}

.card-menu-cepat .icon-circle{
  font-size:1.8rem;
}

.card-menu-cepat:hover .icon-circle{
  background:var(--biru-utama);
  color:#fff;
}


.badge-tanggal{
  background:var(--biru-lembut);
  color:var(--biru-utama);
  font-weight:600;
  font-size:.75rem;
  border-radius:50px;
  padding:.35rem .8rem;
}

.btn-baca{
  color:var(--biru-utama);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition:var(--transisi);
}

.btn-baca:hover{
  gap:.6rem;
  color:var(--biru-tua);
}


.card-fasilitas{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-halus);
  border:2px solid transparent;
  transition:var(--transisi);
  background:#fff;
}

.card-fasilitas:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:var(--biru-utama);
  box-shadow:var(--shadow-hover);
}

/* ---------- Galeri ---------- */
.galeri-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-halus);
}

.galeri-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  transition:var(--transisi);
}

.galeri-item:hover img{
  transform:scale(1.12);
}

.galeri-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13,110,253,0) 40%, rgba(10,30,60,.75) 100%);
  opacity:0;
  transition:var(--transisi);
  display:flex;
  align-items:flex-end;
  padding:1rem;
}

.galeri-item:hover .galeri-overlay{
  opacity:1;
}

.galeri-overlay span{
  color:#fff;
  font-weight:600;
  font-size:.9rem;
}


.table-agenda{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-halus);
}

.table-agenda thead{
  background:var(--gelap);
  color:#fff;
}

.table-agenda thead th{
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:.85rem;
  border:none;
  padding:1rem;
}

.table-agenda tbody td{
  padding:1rem;
  vertical-align:middle;
  border-color:#eef1f5;
}


.card-pengumuman{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-halus);
  border-left:4px solid var(--biru-utama);
  padding:1.1rem 1.4rem;
  transition:var(--transisi);
}

.card-pengumuman:hover{
  transform:translateX(4px);
  box-shadow:var(--shadow-hover);
}


.ppdb-section{
  background:linear-gradient(120deg, var(--biru-tua) 0%, var(--biru-utama) 100%);
  border-radius:var(--radius-lg);
  color:#fff;
  padding:3.5rem 2rem;
  position:relative;
  overflow:hidden;
}

.ppdb-section::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
  top:-120px;
  right:-90px;
}

.btn-ppdb-daftar{
  background:#fff;
  color:var(--biru-tua);
  font-weight:700;
  border-radius:50px;
  padding:.75rem 1.8rem;
  border:none;
  transition:var(--transisi);
}

.btn-ppdb-daftar:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(0,0,0,.2);
  color:var(--biru-tua);
}

.btn-ppdb-syarat{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.7);
  color:#fff;
  font-weight:600;
  border-radius:50px;
  padding:.75rem 1.8rem;
  transition:var(--transisi);
}

.btn-ppdb-syarat:hover{
  background:rgba(255,255,255,.15);
  transform:translateY(-3px);
  color:#fff;
  border-color:#fff;
}


.kontak-map{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-halus);
  height:100%;
  min-height:380px;
}

.kontak-item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.4rem;
}

.kontak-icon{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  background:var(--biru-lembut);
  color:var(--biru-utama);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}


.footer-sekolah{
  background:var(--gelap);
  color:rgba(255,255,255,.75);
}

.footer-sekolah h6{
  color:#fff;
  font-weight:700;
  margin-bottom:1.1rem;
}

.footer-sekolah a{
  color:rgba(255,255,255,.65);
  text-decoration:none;
  transition:var(--transisi);
}

.footer-sekolah a:hover{
  color:#fff;
  padding-left:4px;
}

.footer-sosial a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.5rem;
  padding-left:0 !important;
}

.footer-sosial a:hover{
  background:var(--biru-utama);
}

.footer-bawah{
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem;
}


.subhero{
  height:46vh;
  min-height:320px;
  position:relative;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}

.subhero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,20,40,.6) 0%, rgba(10,20,40,.78) 100%);
}

.subhero-content{
  position:relative;
  z-index:2;
  color:#fff;
}

.breadcrumb-sub a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
}
.breadcrumb-sub a:hover{color:#fff;}
.breadcrumb-sub .active{color:#fff;font-weight:600;}

.list-kompetensi li,
.list-prospek li{
  padding:.55rem 0;
  border-bottom:1px dashed #e3e8ee;
  display:flex;
  gap:.6rem;
  align-items:flex-start;
}

.list-kompetensi li:last-child,
.list-prospek li:last-child{border-bottom:none;}

.list-kompetensi i,
.list-prospek i{
  color:var(--biru-utama);
  margin-top:.2rem;
}

.btn-kembali{
  background:var(--biru-utama);
  color:#fff;
  font-weight:600;
  border-radius:50px;
  padding:.7rem 1.6rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:var(--transisi);
}

.btn-kembali:hover{
  background:var(--biru-tua);
  color:#fff;
  transform:translateX(-4px);
  box-shadow:var(--shadow-hover);
}


.artikel-meta{
  color:var(--abu-teks);
  font-size:.9rem;
}

.artikel-body p{
  line-height:1.85;
  color:#33404d;
}

.artikel-cover{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-halus);
  width:100%;
  max-height:460px;
  object-fit:cover;
}


.btt{
  position:fixed;
  bottom:1.6rem;
  right:1.6rem;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--biru-utama);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-hover);
  z-index:60;
  text-decoration:none;
  transition:var(--transisi);
}
.btt:hover{background:var(--biru-tua); transform:translateY(-4px); color:#fff;}

@media (max-width: 991.98px){
  .stat-strip-wrap{margin-top:-40px;}
  .stat-item{border-right:none; margin-bottom:.6rem;}
  .hero-slide{height:78vh;}
}